Merge pull request #34 from OptimistikSAS/issue-fix

Issue fix
master
JFH 2021-01-06 21:51:41 +01:00 committed by GitHub
commit 25b5a2d619
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 102 additions and 34 deletions

View File

@ -455,7 +455,7 @@ class EditorStartup {
}); });
$id('tool_import').addEventListener('click', (e) => { $id('tool_import').addEventListener('click', (e) => {
this.clickImport(); this.clickImport();
window.dispatchEvent(new CustomEvent('importImage')); window.dispatchEvent(new CustomEvent('importImages'));
}); });
$id('tool_save').addEventListener('click', function (e) { $id('tool_save').addEventListener('click', function (e) {
const $editorDialog = document.getElementById('se-svg-editor-dialog'); const $editorDialog = document.getElementById('se-svg-editor-dialog');
@ -617,14 +617,15 @@ class EditorStartup {
* @param {Event} e * @param {Event} e
* @returns {void} * @returns {void}
*/ */
let editorObj = this;
const importImage = function (e) { const importImage = function (e) {
$.process_cancel(this.uiStrings.notification.loadingImage); document.getElementById('se-prompt-dialog').title = editorObj.uiStrings.notification.loadingImage;
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
$('#main_menu').hide(); $('#main_menu').hide();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0]; const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) { if (!file) {
$('#dialog_box').hide(); document.getElementById('se-prompt-dialog').setAttribute('close', true);
return; return;
} }
@ -637,15 +638,15 @@ class EditorStartup {
if (file.type.includes('svg')) { if (file.type.includes('svg')) {
reader = new FileReader(); reader = new FileReader();
reader.onloadend = function (ev) { reader.onloadend = function (ev) {
const newElement = this.svgCanvas.importSvgString(ev.target.result, true); const newElement = editorObj.svgCanvas.importSvgString(ev.target.result, true);
this.svgCanvas.ungroupSelectedElement(); editorObj.svgCanvas.ungroupSelectedElement();
this.svgCanvas.ungroupSelectedElement(); editorObj.svgCanvas.ungroupSelectedElement();
this.svgCanvas.groupSelectedElements(); editorObj.svgCanvas.groupSelectedElements();
this.svgCanvas.alignSelectedElements('m', 'page'); editorObj.svgCanvas.alignSelectedElements('m', 'page');
this.svgCanvas.alignSelectedElements('c', 'page'); editorObj.svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox // highlight imported element, otherwise we get strange empty selectbox
this.svgCanvas.selectOnly([newElement]); editorObj.svgCanvas.selectOnly([newElement]);
$('#dialog_box').hide(); document.getElementById('se-prompt-dialog').setAttribute('close', true);
}; };
reader.readAsText(file); reader.readAsText(file);
} else { } else {
@ -659,23 +660,23 @@ class EditorStartup {
* @returns {void} * @returns {void}
*/ */
const insertNewImage = function (imageWidth, imageHeight) { const insertNewImage = function (imageWidth, imageHeight) {
const newImage = this.svgCanvas.addSVGElementFromJson({ const newImage = editorObj.svgCanvas.addSVGElementFromJson({
element: 'image', element: 'image',
attr: { attr: {
x: 0, x: 0,
y: 0, y: 0,
width: imageWidth, width: imageWidth,
height: imageHeight, height: imageHeight,
id: this.svgCanvas.getNextId(), id: editorObj.svgCanvas.getNextId(),
style: 'pointer-events:inherit' style: 'pointer-events:inherit'
} }
}); });
this.svgCanvas.setHref(newImage, result); editorObj.svgCanvas.setHref(newImage, result);
this.svgCanvas.selectOnly([newImage]); editorObj.svgCanvas.selectOnly([newImage]);
this.svgCanvas.alignSelectedElements('m', 'page'); editorObj.svgCanvas.alignSelectedElements('m', 'page');
this.svgCanvas.alignSelectedElements('c', 'page'); editorObj.svgCanvas.alignSelectedElements('c', 'page');
this.topPanelHandlers.updateContextPanel(); editorObj.topPanelHandlers.updateContextPanel();
$('#dialog_box').hide(); document.getElementById('se-prompt-dialog').setAttribute('close', true);
}; };
// create dummy img so we know the default dimensions // create dummy img so we know the default dimensions
let imgWidth = 100; let imgWidth = 100;
@ -697,6 +698,8 @@ class EditorStartup {
this.workarea[0].addEventListener('dragover', this.onDragOver); this.workarea[0].addEventListener('dragover', this.onDragOver);
this.workarea[0].addEventListener('dragleave', this.onDragLeave); this.workarea[0].addEventListener('dragleave', this.onDragLeave);
this.workarea[0].addEventListener('drop', importImage); this.workarea[0].addEventListener('drop', importImage);
const imgImport = $('<input type="file">').change(importImage);
$(window).on('importImages', () => imgImport.click());
} }
this.updateCanvas(true); this.updateCanvas(true);

View File

@ -0,0 +1,69 @@
/* eslint-disable node/no-unpublished-import */
import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js';
import {template} from 'elix/src/base/internal.js';
import {fragmentFrom} from 'elix/src/core/htmlLiterals.js';
/**
* @class SePlainAlertDialog
*/
export default class SePlainAlertDialog extends PlainAlertDialog {
/**
* @function get
* @returns {PlainObject}
*/
get [template] () {
const result = super[template];
// Replace the default slot with a new default slot and a button container.
const defaultSlot = result.content.querySelector('#frameContent');
if (defaultSlot) {
defaultSlot.replaceWith(fragmentFrom.html`
<div id="alertDialogContent">
<div id="se-content-alert">
<slot></slot>
</div>
<div id="choiceButtonContainer" part="choice-button-container"></div>
</div>
`);
}
result.content.append(
fragmentFrom.html`
<style>
[part~="frame"] {
padding: 1em;
background: #CCC;
width: 300px;
border: 1px outset #777;
font-size: 0.8em;
font-family: Verdana,Helvetica,sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
[part~="choice-button-container"] {
margin-top: 1em;
text-align: center;
}
[part~="choice-button"]:not(:first-child) {
margin-left: 0.5em;
}
#se-content-alert{
height: 95px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
padding: 1em;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
`
);
return result;
}
}
customElements.define('se-elix-alert-dialog', SePlainAlertDialog);

View File

@ -1,8 +1,7 @@
// eslint-disable-next-line node/no-unpublished-import import SePlainAlertDialog from './SePlainAlertDialog.js';
import AlertDialog from 'elix/define/AlertDialog.js';
const dialog = new AlertDialog();
const seAlert = (text) => { const seAlert = (text) => {
const dialog = new SePlainAlertDialog();
dialog.textContent = text; dialog.textContent = text;
dialog.choices = ['Ok']; dialog.choices = ['Ok'];
dialog.open(); dialog.open();

View File

@ -1,8 +1,7 @@
// eslint-disable-next-line node/no-unpublished-import import SePlainAlertDialog from './SePlainAlertDialog.js';
import AlertDialog from 'elix/define/AlertDialog.js';
const seConfirm = async (text, choices) => { const seConfirm = async (text, choices) => {
const dialog = new AlertDialog(); const dialog = new SePlainAlertDialog();
dialog.textContent = text; dialog.textContent = text;
dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices; dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices;
dialog.open(); dialog.open();

View File

@ -1,5 +1,4 @@
// eslint-disable-next-line node/no-unpublished-import import SePlainAlertDialog from './SePlainAlertDialog.js';
import AlertDialog from 'elix/define/AlertDialog.js';
/** /**
* @class SePromptDialog * @class SePromptDialog
*/ */
@ -11,7 +10,7 @@ export class SePromptDialog extends HTMLElement {
super(); super();
// create the shadowDom and insert the template // create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'}); this._shadowRoot = this.attachShadow({mode: 'open'});
this.dialog = new AlertDialog(); this.dialog = new SePlainAlertDialog();
} }
/** /**
* @function observedAttributes * @function observedAttributes

View File

@ -1,8 +1,7 @@
// eslint-disable-next-line node/no-unpublished-import import SePlainAlertDialog from './SePlainAlertDialog.js';
import AlertDialog from 'elix/define/AlertDialog.js';
const dialog = new AlertDialog();
const seSelect = async (text, choices) => { const seSelect = async (text, choices) => {
const dialog = new SePlainAlertDialog();
dialog.textContent = text; dialog.textContent = text;
dialog.choices = choices; dialog.choices = choices;
dialog.open(); dialog.open();

View File

@ -1250,7 +1250,7 @@ class Editor extends EditorStartup {
* @param {Event} e * @param {Event} e
* @returns {void} Resolves to `undefined` * @returns {void} Resolves to `undefined`
*/ */
saveSourceEditor (e) { async saveSourceEditor (e) {
const $editorDialog = document.getElementById('se-svg-editor-dialog'); const $editorDialog = document.getElementById('se-svg-editor-dialog');
if ($editorDialog.getAttribute('dialog') !== 'open') return; if ($editorDialog.getAttribute('dialog') !== 'open') return;
const saveChanges = () => { const saveChanges = () => {
@ -1262,8 +1262,8 @@ class Editor extends EditorStartup {
}; };
if (!this.svgCanvas.setSvgString(e.detail.value)) { if (!this.svgCanvas.setSvgString(e.detail.value)) {
const ok = seConfirm(this.uiStrings.notification.QerrorsRevertToSource); const ok = await seConfirm(this.uiStrings.notification.QerrorsRevertToSource);
if (!ok) { if (ok === false || ok === 'Cancel') {
return; return;
} }
saveChanges(); saveChanges();