From 9e2a10f729810f1778e70aaebd8759fc337ec1e1 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Mon, 21 Dec 2020 19:18:22 +0530 Subject: [PATCH] #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