From 72022f12e3ff98b30fd0f4ef6cfdd5708273053e Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 6 Jan 2021 13:44:44 +0530 Subject: [PATCH 1/3] #issue-fix IMPORT IMAGE menu open issue fixed --- src/editor/EditorStartup.js | 41 ++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index de30d96f..e86417cb 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -455,7 +455,7 @@ class EditorStartup { }); $id('tool_import').addEventListener('click', (e) => { this.clickImport(); - window.dispatchEvent(new CustomEvent('importImage')); + window.dispatchEvent(new CustomEvent('importImages')); }); $id('tool_save').addEventListener('click', function (e) { const $editorDialog = document.getElementById('se-svg-editor-dialog'); @@ -617,14 +617,15 @@ class EditorStartup { * @param {Event} e * @returns {void} */ + let editorObj = this; const importImage = function (e) { - $.process_cancel(this.uiStrings.notification.loadingImage); + document.getElementById('se-prompt-dialog').title = editorObj.uiStrings.notification.loadingImage; e.stopPropagation(); e.preventDefault(); $('#main_menu').hide(); const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0]; if (!file) { - $('#dialog_box').hide(); + document.getElementById('se-prompt-dialog').setAttribute('close', true); return; } @@ -637,15 +638,15 @@ class EditorStartup { if (file.type.includes('svg')) { reader = new FileReader(); reader.onloadend = function (ev) { - const newElement = this.svgCanvas.importSvgString(ev.target.result, true); - this.svgCanvas.ungroupSelectedElement(); - this.svgCanvas.ungroupSelectedElement(); - this.svgCanvas.groupSelectedElements(); - this.svgCanvas.alignSelectedElements('m', 'page'); - this.svgCanvas.alignSelectedElements('c', 'page'); + 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 - this.svgCanvas.selectOnly([newElement]); - $('#dialog_box').hide(); + editorObj.svgCanvas.selectOnly([newElement]); + document.getElementById('se-prompt-dialog').setAttribute('close', true); }; reader.readAsText(file); } else { @@ -659,23 +660,23 @@ class EditorStartup { * @returns {void} */ const insertNewImage = function (imageWidth, imageHeight) { - const newImage = this.svgCanvas.addSVGElementFromJson({ + const newImage = editorObj.svgCanvas.addSVGElementFromJson({ element: 'image', attr: { x: 0, y: 0, width: imageWidth, height: imageHeight, - id: this.svgCanvas.getNextId(), + id: editorObj.svgCanvas.getNextId(), style: 'pointer-events:inherit' } }); - this.svgCanvas.setHref(newImage, result); - this.svgCanvas.selectOnly([newImage]); - this.svgCanvas.alignSelectedElements('m', 'page'); - this.svgCanvas.alignSelectedElements('c', 'page'); - this.topPanelHandlers.updateContextPanel(); - $('#dialog_box').hide(); + editorObj.svgCanvas.setHref(newImage, result); + editorObj.svgCanvas.selectOnly([newImage]); + editorObj.svgCanvas.alignSelectedElements('m', 'page'); + editorObj.svgCanvas.alignSelectedElements('c', 'page'); + editorObj.topPanelHandlers.updateContextPanel(); + document.getElementById('se-prompt-dialog').setAttribute('close', true); }; // create dummy img so we know the default dimensions let imgWidth = 100; @@ -697,6 +698,8 @@ class EditorStartup { this.workarea[0].addEventListener('dragover', this.onDragOver); this.workarea[0].addEventListener('dragleave', this.onDragLeave); this.workarea[0].addEventListener('drop', importImage); + const imgImport = $('').change(importImage); + $(window).on('importImages', () => imgImport.click()); } this.updateCanvas(true); From 9297fd84b1e2a6d09c5a3e0035f0d3259640cb47 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 6 Jan 2021 20:00:02 +0530 Subject: [PATCH 2/3] #issue-fix alert dialog overwrite style --- src/editor/dialogs/SePlainAlertDialog.js | 77 ++++++++++++++++++++++++ src/editor/dialogs/seAlertDialog.js | 5 +- src/editor/dialogs/seConfirmDialog.js | 5 +- src/editor/dialogs/sePromptDialog.js | 5 +- src/editor/dialogs/seSelectDialog.js | 5 +- src/editor/svgedit.js | 6 +- 6 files changed, 88 insertions(+), 15 deletions(-) create mode 100644 src/editor/dialogs/SePlainAlertDialog.js diff --git a/src/editor/dialogs/SePlainAlertDialog.js b/src/editor/dialogs/SePlainAlertDialog.js new file mode 100644 index 00000000..6deb1261 --- /dev/null +++ b/src/editor/dialogs/SePlainAlertDialog.js @@ -0,0 +1,77 @@ +/* eslint-disable node/no-unpublished-import */ +import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js'; +// import AlertDialog from 'elix/define/AlertDialog.js'; +import {defaultState, template} from 'elix/src/base/internal.js'; +import {fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import PlainBorderButton from 'elix/define/BorderButton.js'; + +/** + * AlertDialog component in the Plain reference design system + * + * @inherits AlertDialog + * @mixes PlainModalOverlayMixin + * @part {PlainBorderButton} choice-button + */ +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` +
+
+ +
+
+
+ `); + } + console.log(result.content); + + result.content.append( + fragmentFrom.html` + + ` + ); + return result; + } +} + +customElements.define('se-elix-alert-dialog', SePlainAlertDialog); diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js index ef95c6df..8d83e2f8 100644 --- a/src/editor/dialogs/seAlertDialog.js +++ b/src/editor/dialogs/seAlertDialog.js @@ -1,8 +1,7 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; -const dialog = new AlertDialog(); const seAlert = (text) => { + const dialog = new SePlainAlertDialog(); dialog.textContent = text; dialog.choices = ['Ok']; dialog.open(); diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js index 66aa5cd0..eee1c0c1 100644 --- a/src/editor/dialogs/seConfirmDialog.js +++ b/src/editor/dialogs/seConfirmDialog.js @@ -1,8 +1,7 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; const seConfirm = async (text, choices) => { - const dialog = new AlertDialog(); + const dialog = new SePlainAlertDialog(); dialog.textContent = text; dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices; dialog.open(); diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js index 10fdf802..b7e3a098 100644 --- a/src/editor/dialogs/sePromptDialog.js +++ b/src/editor/dialogs/sePromptDialog.js @@ -1,5 +1,4 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; /** * @class SePromptDialog */ @@ -11,7 +10,7 @@ export class SePromptDialog extends HTMLElement { super(); // create the shadowDom and insert the template this._shadowRoot = this.attachShadow({mode: 'open'}); - this.dialog = new AlertDialog(); + this.dialog = new SePlainAlertDialog(); } /** * @function observedAttributes diff --git a/src/editor/dialogs/seSelectDialog.js b/src/editor/dialogs/seSelectDialog.js index a02caf03..27f754bf 100644 --- a/src/editor/dialogs/seSelectDialog.js +++ b/src/editor/dialogs/seSelectDialog.js @@ -1,8 +1,7 @@ -// eslint-disable-next-line node/no-unpublished-import -import AlertDialog from 'elix/define/AlertDialog.js'; +import SePlainAlertDialog from './SePlainAlertDialog.js'; -const dialog = new AlertDialog(); const seSelect = async (text, choices) => { + const dialog = new SePlainAlertDialog(); dialog.textContent = text; dialog.choices = choices; dialog.open(); diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index f63ef3bc..cd3e980a 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1250,7 +1250,7 @@ class Editor extends EditorStartup { * @param {Event} e * @returns {void} Resolves to `undefined` */ - saveSourceEditor (e) { + async saveSourceEditor (e) { const $editorDialog = document.getElementById('se-svg-editor-dialog'); if ($editorDialog.getAttribute('dialog') !== 'open') return; const saveChanges = () => { @@ -1262,8 +1262,8 @@ class Editor extends EditorStartup { }; if (!this.svgCanvas.setSvgString(e.detail.value)) { - const ok = seConfirm(this.uiStrings.notification.QerrorsRevertToSource); - if (!ok) { + const ok = await seConfirm(this.uiStrings.notification.QerrorsRevertToSource); + if (ok === false || ok === 'Cancel') { return; } saveChanges(); From 8bdc198739e59e03f7f60e35d84ab8bb3183af3e Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 6 Jan 2021 20:04:32 +0530 Subject: [PATCH 3/3] #issue-fix lint issue fixed --- src/editor/dialogs/SePlainAlertDialog.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/editor/dialogs/SePlainAlertDialog.js b/src/editor/dialogs/SePlainAlertDialog.js index 6deb1261..dbc9b393 100644 --- a/src/editor/dialogs/SePlainAlertDialog.js +++ b/src/editor/dialogs/SePlainAlertDialog.js @@ -1,16 +1,10 @@ /* eslint-disable node/no-unpublished-import */ import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js'; -// import AlertDialog from 'elix/define/AlertDialog.js'; -import {defaultState, template} from 'elix/src/base/internal.js'; +import {template} from 'elix/src/base/internal.js'; import {fragmentFrom} from 'elix/src/core/htmlLiterals.js'; -import PlainBorderButton from 'elix/define/BorderButton.js'; /** - * AlertDialog component in the Plain reference design system - * - * @inherits AlertDialog - * @mixes PlainModalOverlayMixin - * @part {PlainBorderButton} choice-button + * @class SePlainAlertDialog */ export default class SePlainAlertDialog extends PlainAlertDialog { /** @@ -31,8 +25,6 @@ export default class SePlainAlertDialog extends PlainAlertDialog { `); } - console.log(result.content); - result.content.append( fragmentFrom.html`