diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 9a39c817..62438011 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -580,96 +580,97 @@ class EditorStartup { // if browser has HTML5 File API support, then we will show the open menu item // and provide a file input to click. When that change event fires, it will // get the text contents of the file and send it to the canvas - if (window.FileReader) { + /** * @param {Event} e * @returns {void} */ - const editorObj = this; - const importImage = function (e) { - $id('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage'); - e.stopPropagation(); - e.preventDefault(); - const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0]; - if (!file) { - $id('se-prompt-dialog').setAttribute('close', true); - return; - } + const importImage = (e) => { + $id('se-prompt-dialog').title = this.i18next.t('notification.loadingImage'); + $id('se-prompt-dialog').setAttribute('close', false); + e.stopPropagation(); + e.preventDefault(); + const file = (e.type === 'drop') ? e.dataTransfer.files[0] : e.currentTarget.files[0]; + if (!file) { + $id('se-prompt-dialog').setAttribute('close', true); + return; + } - if (!file.type.includes('image')) { - return; - } - // Detected an image - // svg handling - let reader; - if (file.type.includes('svg')) { - reader = new FileReader(); - reader.onloadend = function (ev) { - const newElement = editorObj.svgCanvas.importSvgString(ev.target.result, true); - editorObj.svgCanvas.ungroupSelectedElement(); - editorObj.svgCanvas.ungroupSelectedElement(); - editorObj.svgCanvas.groupSelectedElements(); - editorObj.svgCanvas.alignSelectedElements('m', 'page'); - editorObj.svgCanvas.alignSelectedElements('c', 'page'); - // highlight imported element, otherwise we get strange empty selectbox - editorObj.svgCanvas.selectOnly([ newElement ]); - $id('se-prompt-dialog').setAttribute('close', true); - }; - reader.readAsText(file); - } else { + if (!file.type.includes('image')) { + return; + } + // Detected an image + // svg handling + let reader; + if (file.type.includes('svg')) { + reader = new FileReader(); + reader.onloadend = (ev) => { + const newElement = this.svgCanvas.importSvgString(ev.target.result, true); + this.svgCanvas.alignSelectedElements('m', 'page'); + this.svgCanvas.alignSelectedElements('c', 'page'); + // highlight imported element, otherwise we get strange empty selectbox + this.svgCanvas.selectOnly([ newElement ]); + $id('se-prompt-dialog').setAttribute('close', true); + }; + reader.readAsText(file); + } else { // bitmap handling - reader = new FileReader(); - reader.onloadend = function ({ target: { result } }) { + reader = new FileReader(); + reader.onloadend = function ({ target: { result } }) { /** * Insert the new image until we know its dimensions. * @param {Float} imageWidth * @param {Float} imageHeight * @returns {void} */ - const insertNewImage = function (imageWidth, imageHeight) { - const newImage = editorObj.svgCanvas.addSVGElementFromJson({ - element: 'image', - attr: { - x: 0, - y: 0, - width: imageWidth, - height: imageHeight, - id: editorObj.svgCanvas.getNextId(), - style: 'pointer-events:inherit' - } - }); - editorObj.svgCanvas.setHref(newImage, result); - editorObj.svgCanvas.selectOnly([ newImage ]); - editorObj.svgCanvas.alignSelectedElements('m', 'page'); - editorObj.svgCanvas.alignSelectedElements('c', 'page'); - editorObj.topPanel.updateContextPanel(); - $id('se-prompt-dialog').setAttribute('close', true); - }; - // create dummy img so we know the default dimensions - let imgWidth = 100; - let imgHeight = 100; - const img = new Image(); - img.style.opacity = 0; - img.addEventListener('load', () => { - imgWidth = img.offsetWidth || img.naturalWidth || img.width; - imgHeight = img.offsetHeight || img.naturalHeight || img.height; - insertNewImage(imgWidth, imgHeight); + const insertNewImage = (imageWidth, imageHeight) => { + const newImage = this.svgCanvas.addSVGElementFromJson({ + element: 'image', + attr: { + x: 0, + y: 0, + width: imageWidth, + height: imageHeight, + id: this.svgCanvas.getNextId(), + style: 'pointer-events:inherit' + } }); - img.src = result; + this.svgCanvas.setHref(newImage, result); + this.svgCanvas.selectOnly([ newImage ]); + this.svgCanvas.alignSelectedElements('m', 'page'); + this.svgCanvas.alignSelectedElements('c', 'page'); + this.topPanel.updateContextPanel(); + $id('se-prompt-dialog').setAttribute('close', true); }; - reader.readAsDataURL(file); - } - }; + // create dummy img so we know the default dimensions + let imgWidth = 100; + let imgHeight = 100; + const img = new Image(); + img.style.opacity = 0; + img.addEventListener('load', () => { + imgWidth = img.offsetWidth || img.naturalWidth || img.width; + imgHeight = img.offsetHeight || img.naturalHeight || img.height; + insertNewImage(imgWidth, imgHeight); + }); + img.src = result; + }; + reader.readAsDataURL(file); + } + }; + + this.workarea.addEventListener('dragenter', this.onDragEnter); + this.workarea.addEventListener('dragover', this.onDragOver); + this.workarea.addEventListener('dragleave', this.onDragLeave); + + // create an input with type file to open the filesystem dialog + const imgImport = document.createElement('input'); + imgImport.type="file"; + imgImport.addEventListener('change', importImage); + // the importImages event will activate the input field + window.addEventListener('importImages', () => imgImport.click()); + // dropping a svg file will import it in the svg as well + this.workarea.addEventListener('drop', importImage); - this.workarea.addEventListener('dragenter', this.onDragEnter); - this.workarea.addEventListener('dragover', this.onDragOver); - this.workarea.addEventListener('dragleave', this.onDragLeave); - this.workarea.addEventListener('drop', importImage); - const imgImport = document.createElement('input'); - imgImport.type="file"; - imgImport.addEventListener('change', importImage); - window.addEventListener('importImages', () => imgImport.click()); - } this.updateCanvas(true); // Load extensions diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index d47afa83..74ca02e6 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -195,14 +195,6 @@ class MainMenu { } } - /** - * - * @returns {void} - */ - clickImport() { - /* empty fn */ - } - /** * * @returns {void} @@ -290,7 +282,6 @@ class MainMenu { * Associate all button actions as well as non-button keyboard shortcuts. */ $id("tool_import").addEventListener("click", () => { - this.clickImport(); window.dispatchEvent(new CustomEvent("importImages")); }); $id("tool_export").addEventListener("click", function() { diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js index 6045bdc0..16195ffa 100644 --- a/src/editor/dialogs/sePromptDialog.js +++ b/src/editor/dialogs/sePromptDialog.js @@ -39,6 +39,8 @@ export class SePromptDialog extends HTMLElement { case 'close': if (this.dialog.opened) { this.dialog.close(); + } else { + this.dialog.open(); } break; default: @@ -74,7 +76,12 @@ export class SePromptDialog extends HTMLElement { * @returns {void} */ set close (value) { - this.setAttribute('close', value); + // boolean value => existence = true + if (value) { + this.setAttribute('close', 'true'); + } else { + this.removeAttribute('close'); + } } }