From 9e2a10f729810f1778e70aaebd8759fc337ec1e1 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Mon, 21 Dec 2020 19:18:22 +0530 Subject: [PATCH 1/4] #svgSourceEditorDiaog editor dialog changed --- src/editor/dialogs/index.js | 1 + src/editor/dialogs/svgSourceDialog.js | 232 ++++++++++++++++++++++++++ src/editor/index.html | 18 -- src/editor/svgedit.js | 43 +++-- 4 files changed, 259 insertions(+), 35 deletions(-) create mode 100644 src/editor/dialogs/svgSourceDialog.js diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js index 4eff29c1..efa4b307 100644 --- a/src/editor/dialogs/index.js +++ b/src/editor/dialogs/index.js @@ -1,2 +1,3 @@ import './imagePropertiesDialog.js'; import './editorPreferencesDialog.js'; +import './svgSourceDialog.js'; diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js new file mode 100644 index 00000000..105ec666 --- /dev/null +++ b/src/editor/dialogs/svgSourceDialog.js @@ -0,0 +1,232 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/Dialog.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + +
+
+ + +
+
+

+ Copy the contents of this box into a text editor, + then save the file with a .svg extension.

+ +
+
+ +
+
+ +`; +/** + * @class SeSvgSourceEditorDialog + */ +export class SeSvgSourceEditorDialog extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + this.$dialog = this._shadowRoot.querySelector('#svg_source_editor'); + this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done'); + this.$saveBtn = this._shadowRoot.querySelector('#tool_source_save'); + this.$cancelBtn = this._shadowRoot.querySelector('#tool_source_cancel'); + this.$sourceTxt = this._shadowRoot.querySelector('#svg_source_textarea'); + this.$copySec = this._shadowRoot.querySelector('#save_output_btns'); + this.$applySec = this._shadowRoot.querySelector('#tool_source_back'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['dialog', 'value', 'applysec', 'copysec']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'dialog': + if (newValue === 'open') { + this.$sourceTxt.focus(); + this.$dialog.open(); + } else { + this.$dialog.close(); + this.$sourceTxt.blur(); + } + break; + case 'applysec': + if (newValue === 'false') { + this.$applySec.style.display = 'none'; + } else { + this.$applySec.style.display = 'block'; + } + break; + case 'copysec': + if (newValue === 'false') { + this.$copySec.style.display = 'none'; + } else { + this.$copySec.style.display = 'block'; + } + break; + case 'value': + this.$sourceTxt.value = newValue; + break; + default: + super.attributeChangedCallback(name, oldValue, newValue); + break; + } + } + + /** + * @function get + * @returns {any} + */ + get dialog () { + return this.getAttribute('dialog'); + } + /** + * @function set + * @returns {void} + */ + set dialog (value) { + this.setAttribute('dialog', value); + } + + /** + * @function get + * @returns {any} + */ + get value () { + return this.getAttribute('value'); + } + /** + * @function set + * @returns {void} + */ + set value (value) { + this.setAttribute('value', value); + } + + /** + * @function get + * @returns {any} + */ + get applysec () { + return this.getAttribute('applysec'); + } + /** + * @function set + * @returns {void} + */ + set applysec (value) { + this.setAttribute('applysec', value); + } + + /** + * @function get + * @returns {any} + */ + get copysec () { + return this.getAttribute('copysec'); + } + /** + * @function set + * @returns {void} + */ + set copysec (value) { + this.setAttribute('copysec', value); + } + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + const onCancelHandler = (ev) => { + const closeEvent = new CustomEvent('change', {detail: { + dialog: 'closed' + }}); + this.dispatchEvent(closeEvent); + }; + const onCopyHandler = (ev) => { + const closeEvent = new CustomEvent('change', {detail: { + copy: 'click', + value: this.$sourceTxt.value, + }}); + this.dispatchEvent(closeEvent); + }; + const onSaveHandler = (ev) => { + const closeEvent = new CustomEvent('change', {detail: { + value: this.$sourceTxt.value, + dialog: 'close' + }}); + this.dispatchEvent(closeEvent); + }; + this.$copyBtn.addEventListener('click', onCopyHandler); + this.$saveBtn.addEventListener('click', onSaveHandler); + this.$cancelBtn.addEventListener('click', onCancelHandler); + this.$dialog.addEventListener('close', onCancelHandler); + } +} + +// Register +customElements.define('se-svg-source-editor-dialog', SeSvgSourceEditorDialog); diff --git a/src/editor/index.html b/src/editor/index.html index 9c363e8e..b6585617 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -412,24 +412,6 @@
- -
-
-
-
- - -
-
-

- Copy the contents of this box into a text editor, - then save the file with a .svg extension.

- -
-
- -
-
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index f5401a83..70188dbc 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -234,6 +234,10 @@ editor.init = () => { const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog'); newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs'); document.body.append(newSeEditPrefsDialog); + // svg editor source dialoag added to DOM + const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog'); + newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog'); + document.body.append(newSeEditorDialog); } catch (err) {} configObj.load(); @@ -634,14 +638,13 @@ editor.init = () => { */ const showSourceEditor = function (e, forSaving) { if (editingsource) { return; } - editingsource = true; origSource = svgCanvas.getSvgString(); - $('#save_output_btns').toggle(Boolean(forSaving)); - $('#tool_source_back').toggle(!forSaving); - $('#svg_source_textarea').val(origSource); - $('#svg_source_editor').fadeIn(); - $('#svg_source_textarea').focus(); + const $editorDialog = document.getElementById('se-svg-editor-dialog'); + $editorDialog.setAttribute('dialog', 'open'); + $editorDialog.setAttribute('value', origSource); + $editorDialog.setAttribute('copysec', Boolean(forSaving)); + $editorDialog.setAttribute('applysec', !forSaving); }; let selectedElement = null; @@ -2822,18 +2825,17 @@ editor.init = () => { * @returns {void} */ const hideSourceEditor = () => { - $('#svg_source_editor').hide(); + const $editorDialog = document.getElementById('se-svg-editor-dialog'); + $editorDialog.setAttribute('dialog', 'closed'); editingsource = false; - $('#svg_source_textarea').blur(); }; /** - * + * @param {Event} e * @returns {Promise} Resolves to `undefined` */ - const saveSourceEditor = async () => { + const saveSourceEditor = async (e) => { if (!editingsource) { return; } - const saveChanges = () => { svgCanvas.clearSelection(); hideSourceEditor(); @@ -2843,7 +2845,7 @@ editor.init = () => { prepPaints(); }; - if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) { + if (!e.detail.value) { const ok = await $.confirm(uiStrings.notification.QerrorsRevertToSource); if (!ok) { return; @@ -2938,10 +2940,10 @@ editor.init = () => { }; /** - * + * @param {Event} e * @returns {Promise} Resolves to `undefined` */ - const cancelOverlays = async () => { + const cancelOverlays = async (e) => { $('#dialog_box').hide(); if (!editingsource && !docprops && !preferences) { if (curContext) { @@ -2951,7 +2953,7 @@ editor.init = () => { } if (editingsource) { - if (origSource !== $('#svg_source_textarea').val()) { + if (origSource !== e.detail.value) { const ok = await $.confirm(uiStrings.notification.QignoreSourceChanges); if (ok) { hideSourceEditor(); @@ -3446,11 +3448,9 @@ editor.init = () => { $id('font_size').addEventListener('change', (e) => changeFontSize(e)); // register actions in top toolbar - $id('tool_source_save').addEventListener('click', saveSourceEditor); $id('tool_ungroup').addEventListener('click', clickGroup); $id('tool_unlink_use').addEventListener('click', clickGroup); $id('sidepanel_handle').addEventListener('click', toggleSidePanel); - $id('copy_save_done').addEventListener('click', cancelOverlays); $id('tool_bold').addEventListener('click', clickBold); $id('tool_italic').addEventListener('click', clickItalic); @@ -3490,6 +3490,15 @@ editor.init = () => { savePreferences(e); } }); + $id('se-svg-editor-dialog').addEventListener('change', function (e) { + if (e?.detail?.copy === 'click') { + cancelOverlays(e); + } else if (e?.detail?.dialog === 'closed') { + hideSourceEditor(); + } else { + saveSourceEditor(e); + } + }); layersPanel.addEvents(); const toolButtons = [ // Shortcuts not associated with buttons From 83d08c373b8cf0a0a7d45b6d9cda377360a5ca4a Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Mon, 21 Dec 2020 20:40:07 +0530 Subject: [PATCH 2/4] #svgSourceEditorDialog lint issue fixed --- src/editor/dialogs/editorPreferencesDialog.js | 4 ++-- src/editor/dialogs/svgSourceDialog.js | 10 ++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/editor/dialogs/editorPreferencesDialog.js b/src/editor/dialogs/editorPreferencesDialog.js index 5bbe040f..f693a334 100644 --- a/src/editor/dialogs/editorPreferencesDialog.js +++ b/src/editor/dialogs/editorPreferencesDialog.js @@ -505,7 +505,7 @@ export class SeEditPrefsDialog extends HTMLElement { this.dispatchEvent(closeEvent); }; // Set up editor background functionality - const self = this; + const currentObj = this; this.colorBlocks.forEach(function (e, i) { const newdiv = document.createElement('div'); if (e === 'chessboard') { @@ -518,7 +518,7 @@ export class SeEditPrefsDialog extends HTMLElement { newdiv.style.backgroundColor = e; newdiv.classList.add('color_block'); } - self.$bgBlocks.append(newdiv); + currentObj.$bgBlocks.append(newdiv); }); const blocks = this.$bgBlocks.querySelectorAll('div'); const curBg = 'cur_background'; diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js index 105ec666..cbd058e0 100644 --- a/src/editor/dialogs/svgSourceDialog.js +++ b/src/editor/dialogs/svgSourceDialog.js @@ -208,10 +208,12 @@ export class SeSvgSourceEditorDialog extends HTMLElement { this.dispatchEvent(closeEvent); }; const onCopyHandler = (ev) => { - const closeEvent = new CustomEvent('change', {detail: { - copy: 'click', - value: this.$sourceTxt.value, - }}); + const closeEvent = new CustomEvent('change', { + detail: { + copy: 'click', + value: this.$sourceTxt.value + } + }); this.dispatchEvent(closeEvent); }; const onSaveHandler = (ev) => { From ed6651878a1e6a7522e06bbfe43c4eb77018cbe9 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 22 Dec 2020 11:23:04 +0530 Subject: [PATCH 3/4] #svgSourceEditorDialog edioter changes update issue and button alignment changes --- src/editor/dialogs/svgSourceDialog.js | 2 +- src/editor/svgedit.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js index cbd058e0..85c065b3 100644 --- a/src/editor/dialogs/svgSourceDialog.js +++ b/src/editor/dialogs/svgSourceDialog.js @@ -41,7 +41,7 @@ template.innerHTML = ` } #svg_source_editor #tool_source_back { text-align: left; - padding-left: 20px; + margin: 5px 10px; } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 70188dbc..3897ab8d 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -2845,7 +2845,7 @@ editor.init = () => { prepPaints(); }; - if (!e.detail.value) { + if (!svgCanvas.setSvgString(e.detail.value)) { const ok = await $.confirm(uiStrings.notification.QerrorsRevertToSource); if (!ok) { return; From 434b7c152383d18fd0c41f68b99b8aca38d60591 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Tue, 22 Dec 2020 08:50:35 +0100 Subject: [PATCH 4/4] fix the source area size --- src/editor/dialogs/svgSourceDialog.js | 6 +++++- src/editor/svgedit.css | 21 --------------------- 2 files changed, 5 insertions(+), 22 deletions(-) diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js index 85c065b3..6f48b539 100644 --- a/src/editor/dialogs/svgSourceDialog.js +++ b/src/editor/dialogs/svgSourceDialog.js @@ -38,7 +38,11 @@ template.innerHTML = ` #svg_source_editor #svg_source_textarea { padding: 5px; font-size: 12px; - } + min-height: 200px; + width: 95%; + height: 95%; + } + #svg_source_editor #tool_source_back { text-align: left; margin: 5px 10px; diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index d179c8cc..235791aa 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -963,27 +963,6 @@ ul li.current { width: 96%; } - -#svg_source_editor form { - position: absolute; - top: 40px; - bottom: 30px; - width: 100%; -} - -#svg_source_editor #svg_source_textarea { - position: relative; - width: 95%; - height: 95%; - padding: 5px; - font-size: 12px; -} - -#svg_source_editor #tool_source_back { - text-align: left; - padding-left: 20px; -} - #svg_prefs_container div.color_block { float: left; margin: 2px;