From 68f3efd03bb47e580e8c01e9d13f46d617f67a76 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 8 Dec 2020 18:25:05 +0530 Subject: [PATCH 1/5] #se-img-prop-dialog imagePropertiesDialog move separate file --- src/editor/dialogs/imagePropertiesDialog.js | 117 ++++++++++++++++++++ src/editor/dialogs/index.js | 1 + src/editor/index.html | 51 +-------- src/editor/index.js | 1 + src/editor/svgedit.js | 79 ++++++------- 5 files changed, 154 insertions(+), 95 deletions(-) create mode 100644 src/editor/dialogs/imagePropertiesDialog.js create mode 100644 src/editor/dialogs/index.js diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js new file mode 100644 index 00000000..0a9d4ca0 --- /dev/null +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -0,0 +1,117 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/Dialog.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + +
+
+ + +
+
+ Image Properties + +
+ Canvas Dimensions + + + +
+
+ Included Images + + +
+
+
+ + +`; +/** + * @class SeImgPropDialog + */ +export class SeImgPropDialog 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.$cancel = this._shadowRoot.querySelector('#tool_docprops_cancel'); + this.$resolution = this._shadowRoot.querySelector('#resolution'); + this.$canvasWidth = this._shadowRoot.querySelector('#canvas_width'); + this.$canvasHeight = this._shadowRoot.querySelector('#canvas_height'); + } + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + const onChangeHandler = (ev) => { + if (!ev.target.selectedIndex) { + if (this.$canvasWidth.getAttribute('value') === 'fit') { + this.$canvasWidth.removeAttribute('disabled'); + this.$canvasWidth.value = 100; + this.$canvasHeight.removeAttribute('disabled'); + this.$canvasHeight.value = 100; + } + } else if (ev.target.value === 'content') { + this.$canvasWidth.setAttribute('disabled', 'disabled'); + this.$canvasWidth.value = 'fit'; + this.$canvasHeight.setAttribute('disabled', 'disabled'); + this.$canvasHeight.value = 'fit'; + } else { + const dims = ev.target.value.split('x'); + this.$canvasWidth.value = dims[0]; + this.$canvasWidth.removeAttribute('disabled'); + this.$canvasHeight.value = dims[1]; + this.$canvasHeight.removeAttribute('disabled'); + } + }; + this.$resolution.addEventListener('change', onChangeHandler); + } +} + +// Register +customElements.define('se-img-prop-dialog', SeImgPropDialog); diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js new file mode 100644 index 00000000..fe96b1e7 --- /dev/null +++ b/src/editor/dialogs/index.js @@ -0,0 +1 @@ +import './imagePropertiesDialog.js'; diff --git a/src/editor/index.html b/src/editor/index.html index 381caf75..abb3061a 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -91,7 +91,6 @@ -
@@ -441,55 +440,7 @@
-
-
-
-
- - -
-
- Image Properties - -
- Canvas Dimensions - - - -
-
- Included Images - - -
-
-
-
+
diff --git a/src/editor/index.js b/src/editor/index.js index 3c578d3e..c29f2fa2 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -7,6 +7,7 @@ For default config and extensions (and available options) available to import './jquery.min.js'; import './jquery-ui/jquery-ui-1.8.17.custom.min.js'; import './components/index.js'; +import './dialogs/index.js'; import svgEditor from './svgedit.js'; // URL OVERRIDE CONFIG diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 48cd897a..26e64dc3 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -3775,7 +3775,7 @@ editor.init = () => { updateToolButtonState(); }; - $('#svg_docprops_container, #svg_prefs_container').draggable({ + $('#svg_prefs_container').draggable({ cancel: 'button,fieldset', containment: 'window' }).css('position', 'absolute'); @@ -3790,9 +3790,11 @@ editor.init = () => { const showDocProperties = function () { if (docprops) { return; } docprops = true; + const $imgDialog = document.getElementById('se-img-prop'); // This selects the correct radio button by using the array notation - $('#image_save_opts input').val([editor.pref('img_save')]); + const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); + $imageSaveOpts.querySelector('input').value = [editor.pref('img_save')]; // update resolution option with actual resolution const res = svgCanvas.getResolution(); @@ -3800,12 +3802,10 @@ editor.init = () => { res.w = convertUnit(res.w) + curConfig.baseUnit; res.h = convertUnit(res.h) + curConfig.baseUnit; } - - $('#canvas_width').val(res.w); - $('#canvas_height').val(res.h); - $('#canvas_title').val(svgCanvas.getDocumentTitle()); - - $('#svg_docprops').show(); + $imgDialog.shadowRoot.querySelector('#canvas_width').value = res.w; + $imgDialog.shadowRoot.querySelector('#canvas_height').value = res.h; + $imgDialog.shadowRoot.querySelector('#canvas_title').value = svgCanvas.getDocumentTitle(); + $imgDialog.shadowRoot.querySelector('#svg_docprops').open(); }; /** @@ -3887,10 +3887,13 @@ editor.init = () => { * @returns {void} */ const hideDocProperties = function () { - $('#svg_docprops').hide(); - $('#canvas_width,#canvas_height').removeAttr('disabled'); - $('#resolution')[0].selectedIndex = 0; - $('#image_save_opts input').val([editor.pref('img_save')]); + const $imgDialog = document.getElementById('se-img-prop'); + $imgDialog.shadowRoot.querySelector('#svg_docprops').close(); + $imgDialog.shadowRoot.querySelector('#canvas_width').removeAttribute('disabled'); + $imgDialog.shadowRoot.querySelector('#canvas_height').removeAttribute('disabled'); + $imgDialog.shadowRoot.querySelector('#resolution').selectedIndex = 0; + const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); + $imageSaveOpts.querySelector('input').value = [editor.pref('img_save')]; docprops = false; }; @@ -3909,29 +3912,29 @@ editor.init = () => { */ const saveDocProperties = function () { // set title - const newTitle = $('#canvas_title').val(); - updateTitle(newTitle); + const $imgDialog = document.getElementById('se-img-prop'); + const newTitle = $imgDialog.shadowRoot.querySelector('#canvas_title').value; svgCanvas.setDocumentTitle(newTitle); // update resolution - const width = $('#canvas_width'), w = width.val(); - const height = $('#canvas_height'), h = height.val(); + const width = $imgDialog.shadowRoot.querySelector('#canvas_width'), w = width.value; + const height = $imgDialog.shadowRoot.querySelector('#canvas_height'), h = height.value; if (w !== 'fit' && !isValidUnit('width', w)) { - width.parent().addClass('error'); + width.parentElement.classList.add('error'); /* await */ $.alert(uiStrings.notification.invalidAttrValGiven); return false; } - width.parent().removeClass('error'); + width.parentElement.classList.remove('error'); if (h !== 'fit' && !isValidUnit('height', h)) { - height.parent().addClass('error'); + height.parentElement.classList.add('error'); /* await */ $.alert(uiStrings.notification.invalidAttrValGiven); return false; } - height.parent().removeClass('error'); + height.parentElement.classList.remove('error'); if (!svgCanvas.setResolution(w, h)) { /* await */ $.alert(uiStrings.notification.noContentToFitTo); @@ -3939,7 +3942,8 @@ editor.init = () => { } // Set image save option - editor.pref('img_save', $('#image_save_opts :checked').val()); + const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); + editor.pref('img_save', $imageSaveOpts.querySelector(':checked').value); updateCanvas(); hideDocProperties(); return true; @@ -4259,13 +4263,12 @@ editor.init = () => { svgCanvas.embedImage('images/logo.svg', function (datauri) { if (!datauri) { // Disable option - $('#image_save_opts [value=embed]').attr('disabled', 'disabled'); - $('#image_save_opts input').val(['ref']); + const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); + $imageSaveOpts.querySelector('[value=embed]').setAttribute('disabled', 'disabled'); + $imageSaveOpts.querySelector('input').value = ['ref']; editor.pref('img_save', 'ref'); - $('#image_opt_embed').css('color', '#666').attr( - 'title', - uiStrings.notification.featNotSupported - ); + $imageSaveOpts.querySelector('#image_opt_embed').style.color = "#666"; + $imageSaveOpts.querySelector('#image_opt_embed').setAttribute('title', uiStrings.notification.featNotSupported); } }); }, 1000); @@ -4491,27 +4494,10 @@ editor.init = () => { // // } // } - $('#resolution').change(function () { - const wh = $('#canvas_width,#canvas_height'); - if (!this.selectedIndex) { - if ($('#canvas_width').val() === 'fit') { - wh.removeAttr('disabled').val(100); - } - } else if (this.value === 'content') { - wh.val('fit').attr('disabled', 'disabled'); - } else { - const dims = this.value.split('x'); - $('#canvas_width').val(dims[0]); - $('#canvas_height').val(dims[1]); - wh.removeAttr('disabled'); - } - }); - // Prevent browser from erroneously repopulating fields $('input,select').attr('autocomplete', 'off'); const dialogSelectors = [ - '#tool_source_cancel', '#tool_docprops_cancel', '#tool_prefs_cancel', '.overlay' ]; /* eslint-disable jsdoc/require-property */ @@ -4640,6 +4626,10 @@ editor.init = () => { $id('tool_docprops').addEventListener('click', showDocProperties); $id('tool_editor_prefs').addEventListener('click', showPreferences); $id('tool_editor_homepage').addEventListener('click', openHomePage); + const seImgProp = document.getElementById('se-img-prop'); + seImgProp.shadowRoot.querySelector('#tool_docprops_save').addEventListener('click', saveDocProperties); + seImgProp.shadowRoot.querySelector('#tool_docprops_cancel').addEventListener('click', hideDocProperties); + seImgProp.shadowRoot.querySelector('#svg_docprops').addEventListener('close', hideDocProperties); const toolButtons = [ { @@ -4656,7 +4646,6 @@ editor.init = () => { {sel: dialogSelectors.join(','), fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true}, {sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'}, - {sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'}, {sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'}, {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'}, {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'}, From 375f16e0b2f0947dccec53b8b4d91bc42b3a3166 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 9 Dec 2020 16:02:31 +0530 Subject: [PATCH 2/5] #se-img-prop-dialog style fixed changes and remove shadowRoot.querySelector from svg edit. --- src/editor/dialogs/imagePropertiesDialog.js | 225 +++++++++++++++++++- src/editor/index.html | 2 +- src/editor/svgedit.js | 78 ++++--- 3 files changed, 260 insertions(+), 45 deletions(-) diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index 0a9d4ca0..6cc9b8bd 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -15,6 +15,56 @@ template.innerHTML = ` body::-webkit-scrollbar-thumb { background: darkgray; } + #svg_docprops #svg_docprops_container { + padding: 10px; + background-color: #B0B0B0; + border: 1px outset #777; + opacity: 1.0; + font-family: Verdana, Helvetica, sans-serif; + font-size: .8em; + z-index: 20001; + } + + #svg_docprops .error { + border: 1px solid red; + padding: 3px; + } + + #svg_docprops #resolution { + max-width: 14em; + } + + #tool_docprops_back { + margin-left: 1em; + overflow: auto; + } + + #svg_docprops_container #svg_docprops_docprops { + float: left; + width: 221px; + margin: 5px .7em; + overflow: hidden; + } + + #svg_docprops legend { + max-width: 195px; + } + + #svg_docprops_docprops > legend { + font-weight: bold; + font-size: 1.1em; + } + + #svg_docprops_container fieldset { + padding: 5px; + margin: 5px; + border: 1px solid #DDD; + } + + #svg_docprops_container label { + display: block; + margin: .5em; + }
@@ -53,11 +103,11 @@ template.innerHTML = `
Included Images
@@ -78,10 +128,147 @@ export class SeImgPropDialog extends HTMLElement { // create the shadowDom and insert the template this._shadowRoot = this.attachShadow({mode: 'open'}); this._shadowRoot.appendChild(template.content.cloneNode(true)); - this.$cancel = this._shadowRoot.querySelector('#tool_docprops_cancel'); + this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save'); + this.$cancelBtn = this._shadowRoot.querySelector('#tool_docprops_cancel'); this.$resolution = this._shadowRoot.querySelector('#resolution'); + this.$canvasTitle = this._shadowRoot.querySelector('#canvas_title'); this.$canvasWidth = this._shadowRoot.querySelector('#canvas_width'); this.$canvasHeight = this._shadowRoot.querySelector('#canvas_height'); + this.$imageOptEmbed = this._shadowRoot.querySelector('#image_embed'); + this.$imageOptRef = this._shadowRoot.querySelector('#image_ref'); + this.$dialog = this._shadowRoot.querySelector('#svg_docprops'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['title', 'width', 'height', 'save', 'dialog']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'title': + this.$canvasTitle.value = newValue; + break; + case 'width': + if (newValue === 'fit') { + this.$canvasWidth.removeAttribute('disabled'); + this.$canvasWidth.value = 100; + this.$canvasHeight.removeAttribute('disabled'); + this.$canvasHeight.value = 100; + } else { + this.$canvasWidth.value = newValue; + } + break; + case 'height': + if (newValue === 'fit') { + this.$canvasWidth.removeAttribute('disabled'); + this.$canvasWidth.value = 100; + this.$canvasHeight.removeAttribute('disabled'); + this.$canvasHeight.value = 100; + } else { + this.$canvasHeight.value = newValue; + } + break; + case 'dialog': + if (newValue === 'open') { + this.$dialog.open(); + } else { + this.$dialog.close(); + } + break; + case 'save': + if (newValue === 'ref') { + this.$imageOptEmbed.setAttribute('checked', false); + this.$imageOptRef.setAttribute('checked', true); + } else { + this.$imageOptEmbed.setAttribute('checked', true); + this.$imageOptRef.setAttribute('checked', false); + } + break; + default: + super.attributeChangedCallback(name, oldValue, newValue); + break; + } + } + /** + * @function get + * @returns {any} + */ + get title () { + return this.getAttribute('title'); + } + + /** + * @function set + * @returns {void} + */ + set title (value) { + this.setAttribute('title', value); + } + /** + * @function get + * @returns {any} + */ + get width () { + return this.hasAttribute('width'); + } + /** + * @function set + * @returns {void} + */ + set width (value) { + this.setAttribute('width', value); + } + /** + * @function get + * @returns {any} + */ + get height () { + return this.hasAttribute('height'); + } + /** + * @function set + * @returns {void} + */ + set height (value) { + this.setAttribute('height', value); + } + /** + * @function get + * @returns {any} + */ + get save () { + return this.hasAttribute('save'); + } + /** + * @function set + * @returns {void} + */ + set save (value) { + this.setAttribute('save', value); + } + /** + * @function get + * @returns {any} + */ + get dialog () { + return this.hasAttribute('dialog'); + } + /** + * @function set + * @returns {void} + */ + set dialog (value) { + this.setAttribute('dialog', value); } /** * @function connectedCallback @@ -109,7 +296,39 @@ export class SeImgPropDialog extends HTMLElement { this.$canvasHeight.removeAttribute('disabled'); } }; + const onSaveHandler = (ev) => { + let saveOpt = ''; + if (this.$imageOptEmbed.getAttribute('checked') === 'true') { + saveOpt = 'embed'; + } + if (this.$imageOptRef.getAttribute('checked') === 'true') { + saveOpt = 'ref'; + } + const closeEvent = new CustomEvent('change', { detail: { + title: this.$canvasTitle.value, + w: this.$canvasWidth.value, + h: this.$canvasHeight.value, + save: saveOpt, + dialog: 'close' + }}); + this.$canvasWidth.removeAttribute('disabled'); + this.$canvasHeight.removeAttribute('disabled'); + this.$resolution.selectedIndex = 0; + this.dispatchEvent(closeEvent); + }; + const onCancelHandler = (ev) => { + const closeEvent = new CustomEvent('change', { detail: { + dialog: 'closed' + }}); + this.$canvasWidth.removeAttribute('disabled'); + this.$canvasHeight.removeAttribute('disabled'); + this.$resolution.selectedIndex = 0; + this.dispatchEvent(closeEvent); + }; this.$resolution.addEventListener('change', onChangeHandler); + this.$saveBtn.addEventListener('click', onSaveHandler); + this.$cancelBtn.addEventListener('click', onCancelHandler); + this.$dialog.addEventListener('close', onCancelHandler); } } diff --git a/src/editor/index.html b/src/editor/index.html index abb3061a..40c02537 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -440,7 +440,7 @@
- +
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 26e64dc3..baa76d86 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -2702,8 +2702,17 @@ editor.init = () => { setBackground(editor.pref('bkgd_color'), editor.pref('bkgd_url')); - $('#image_save_opts input').val([editor.pref('img_save')]); - + // update resolution option with actual resolution + const res = svgCanvas.getResolution(); + if (curConfig.baseUnit !== 'px') { + res.w = convertUnit(res.w) + curConfig.baseUnit; + res.h = convertUnit(res.h) + curConfig.baseUnit; + } + $('#se-img-prop').attr('dialog', 'close'); + $('#se-img-prop').attr('title', svgCanvas.getDocumentTitle()); + $('#se-img-prop').attr('width', res.w); + $('#se-img-prop').attr('height', res.h); + $('#se-img-prop').attr('save', editor.pref('img_save')); /** * @type {module} */ @@ -3792,20 +3801,17 @@ editor.init = () => { docprops = true; const $imgDialog = document.getElementById('se-img-prop'); - // This selects the correct radio button by using the array notation - const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); - $imageSaveOpts.querySelector('input').value = [editor.pref('img_save')]; - // update resolution option with actual resolution const res = svgCanvas.getResolution(); if (curConfig.baseUnit !== 'px') { res.w = convertUnit(res.w) + curConfig.baseUnit; res.h = convertUnit(res.h) + curConfig.baseUnit; } - $imgDialog.shadowRoot.querySelector('#canvas_width').value = res.w; - $imgDialog.shadowRoot.querySelector('#canvas_height').value = res.h; - $imgDialog.shadowRoot.querySelector('#canvas_title').value = svgCanvas.getDocumentTitle(); - $imgDialog.shadowRoot.querySelector('#svg_docprops').open(); + $imgDialog.setAttribute('save', editor.pref('img_save')); + $imgDialog.setAttribute('width', res.w); + $imgDialog.setAttribute('height', res.h); + $imgDialog.setAttribute('title', svgCanvas.getDocumentTitle()); + $imgDialog.setAttribute('dialog', 'open'); }; /** @@ -3888,12 +3894,8 @@ editor.init = () => { */ const hideDocProperties = function () { const $imgDialog = document.getElementById('se-img-prop'); - $imgDialog.shadowRoot.querySelector('#svg_docprops').close(); - $imgDialog.shadowRoot.querySelector('#canvas_width').removeAttribute('disabled'); - $imgDialog.shadowRoot.querySelector('#canvas_height').removeAttribute('disabled'); - $imgDialog.shadowRoot.querySelector('#resolution').selectedIndex = 0; - const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); - $imageSaveOpts.querySelector('input').value = [editor.pref('img_save')]; + $imgDialog.setAttribute('dialog', 'close'); + $imgDialog.setAttribute('save', editor.pref('img_save')); docprops = false; }; @@ -3910,40 +3912,30 @@ editor.init = () => { * * @returns {boolean} Whether there were problems saving the document properties */ - const saveDocProperties = function () { + const saveDocProperties = function (e) { // set title - const $imgDialog = document.getElementById('se-img-prop'); - const newTitle = $imgDialog.shadowRoot.querySelector('#canvas_title').value; - svgCanvas.setDocumentTitle(newTitle); - - // update resolution - const width = $imgDialog.shadowRoot.querySelector('#canvas_width'), w = width.value; - const height = $imgDialog.shadowRoot.querySelector('#canvas_height'), h = height.value; + const {title, w, h, save} = e.detail; + // set document title + svgCanvas.setDocumentTitle(title); if (w !== 'fit' && !isValidUnit('width', w)) { - width.parentElement.classList.add('error'); + // width.parentElement.classList.add('error'); /* await */ $.alert(uiStrings.notification.invalidAttrValGiven); return false; } - - width.parentElement.classList.remove('error'); - + // width.parentElement.classList.remove('error'); if (h !== 'fit' && !isValidUnit('height', h)) { - height.parentElement.classList.add('error'); + // height.parentElement.classList.add('error'); /* await */ $.alert(uiStrings.notification.invalidAttrValGiven); return false; } - - height.parentElement.classList.remove('error'); - + // height.parentElement.classList.remove('error'); if (!svgCanvas.setResolution(w, h)) { /* await */ $.alert(uiStrings.notification.noContentToFitTo); return false; } - // Set image save option - const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); - editor.pref('img_save', $imageSaveOpts.querySelector(':checked').value); + editor.pref('img_save', save); updateCanvas(); hideDocProperties(); return true; @@ -4263,10 +4255,11 @@ editor.init = () => { svgCanvas.embedImage('images/logo.svg', function (datauri) { if (!datauri) { // Disable option + const $imgDialog = document.getElementById('se-img-prop'); + editor.pref('img_save', 'ref'); + $imgDialog.setAttribute('save', 'ref'); const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); $imageSaveOpts.querySelector('[value=embed]').setAttribute('disabled', 'disabled'); - $imageSaveOpts.querySelector('input').value = ['ref']; - editor.pref('img_save', 'ref'); $imageSaveOpts.querySelector('#image_opt_embed').style.color = "#666"; $imageSaveOpts.querySelector('#image_opt_embed').setAttribute('title', uiStrings.notification.featNotSupported); } @@ -4626,10 +4619,13 @@ editor.init = () => { $id('tool_docprops').addEventListener('click', showDocProperties); $id('tool_editor_prefs').addEventListener('click', showPreferences); $id('tool_editor_homepage').addEventListener('click', openHomePage); - const seImgProp = document.getElementById('se-img-prop'); - seImgProp.shadowRoot.querySelector('#tool_docprops_save').addEventListener('click', saveDocProperties); - seImgProp.shadowRoot.querySelector('#tool_docprops_cancel').addEventListener('click', hideDocProperties); - seImgProp.shadowRoot.querySelector('#svg_docprops').addEventListener('close', hideDocProperties); + $id('se-img-prop').addEventListener('change', function (e) { + if (e.detail.dialog === 'closed') { + hideDocProperties(); + } else { + saveDocProperties(e); + } + }); const toolButtons = [ { From dbe84d8dc79834f9847bc650d0f9379307485b74 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 9 Dec 2020 17:14:38 +0530 Subject: [PATCH 3/5] #se-img-prop-dialog error class set changes --- src/editor/dialogs/imagePropertiesDialog.js | 13 +++++++++++++ src/editor/svgedit.js | 6 +----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index 6cc9b8bd..042ee3b0 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -1,5 +1,6 @@ /* eslint-disable node/no-unpublished-import */ import 'elix/define/Dialog.js'; +import {isValidUnit} from '../../common/units.js'; const template = document.createElement('template'); template.innerHTML = ` @@ -298,6 +299,18 @@ export class SeImgPropDialog extends HTMLElement { }; const onSaveHandler = (ev) => { let saveOpt = ''; + const w = this.$canvasWidth.value; + const h = this.$canvasHeight.value; + if (w !== 'fit' && !isValidUnit('width', w)) { + this.$canvasWidth.parentElement.classList.add('error'); + } else { + this.$canvasWidth.parentElement.classList.remove('error'); + } + if (h !== 'fit' && !isValidUnit('height', w)) { + this.$canvasHeight.parentElement.classList.add('error'); + } else { + this.$canvasHeight.parentElement.classList.remove('error'); + } if (this.$imageOptEmbed.getAttribute('checked') === 'true') { saveOpt = 'embed'; } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index baa76d86..60503dfa 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -3914,22 +3914,18 @@ editor.init = () => { */ const saveDocProperties = function (e) { // set title - const {title, w, h, save} = e.detail; + const {title, w, h, save} = e.detail; // set document title svgCanvas.setDocumentTitle(title); if (w !== 'fit' && !isValidUnit('width', w)) { - // width.parentElement.classList.add('error'); /* await */ $.alert(uiStrings.notification.invalidAttrValGiven); return false; } - // width.parentElement.classList.remove('error'); if (h !== 'fit' && !isValidUnit('height', h)) { - // height.parentElement.classList.add('error'); /* await */ $.alert(uiStrings.notification.invalidAttrValGiven); return false; } - // height.parentElement.classList.remove('error'); if (!svgCanvas.setResolution(w, h)) { /* await */ $.alert(uiStrings.notification.noContentToFitTo); return false; From cb9c75671a68a9a7d4ef5a91a21b4e9bd591ba57 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 9 Dec 2020 17:54:30 +0530 Subject: [PATCH 4/5] #se-img-prop-dialog embed radio button set changes modified --- src/editor/dialogs/imagePropertiesDialog.js | 26 ++++++++++++++++++++- src/editor/svgedit.js | 5 +--- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index 042ee3b0..e8df7d10 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -144,7 +144,7 @@ export class SeImgPropDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'width', 'height', 'save', 'dialog']; + return ['title', 'width', 'height', 'save', 'dialog', 'embed']; } /** * @function attributeChangedCallback @@ -195,6 +195,16 @@ export class SeImgPropDialog extends HTMLElement { this.$imageOptRef.setAttribute('checked', false); } break; + case 'embed': + if (newValue.includes('one')) { + const data = newValue.split('|'); + if (data.length > 1) { + this._shadowRoot.querySelector('#image_opt_embed').setAttribute('title', data[1]); + this._shadowRoot.querySelector('#image_opt_embed').setAttribute('disabled', 'disabled'); + this._shadowRoot.querySelector('#image_opt_embed').style.color = '#666'; + } + } + break; default: super.attributeChangedCallback(name, oldValue, newValue); break; @@ -271,6 +281,20 @@ export class SeImgPropDialog extends HTMLElement { set dialog (value) { this.setAttribute('dialog', value); } + /** + * @function get + * @returns {any} + */ + get embed () { + return this.hasAttribute('embed'); + } + /** + * @function set + * @returns {void} + */ + set embed (value) { + this.setAttribute('embed', value); + } /** * @function connectedCallback * @returns {void} diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 60503dfa..3cd0f917 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -4254,10 +4254,7 @@ editor.init = () => { const $imgDialog = document.getElementById('se-img-prop'); editor.pref('img_save', 'ref'); $imgDialog.setAttribute('save', 'ref'); - const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts'); - $imageSaveOpts.querySelector('[value=embed]').setAttribute('disabled', 'disabled'); - $imageSaveOpts.querySelector('#image_opt_embed').style.color = "#666"; - $imageSaveOpts.querySelector('#image_opt_embed').setAttribute('title', uiStrings.notification.featNotSupported); + $imgDialog.setAttribute('embed', 'one|' + uiStrings.notification.featNotSupported); } }); }, 1000); From cebafe58f2848da7e5381c72a45fe1540723cd8b Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 9 Dec 2020 18:36:21 +0530 Subject: [PATCH 5/5] #se-img-prop-dialog inject this component in the DOM dynamically --- src/editor/dialogs/imagePropertiesDialog.js | 12 ++++++++---- src/editor/index.html | 1 - src/editor/svgedit.js | 4 ++++ 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index e8df7d10..4b5c0cd9 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -127,6 +127,7 @@ export class SeImgPropDialog extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template + this.eventlisten = false; this._shadowRoot = this.attachShadow({mode: 'open'}); this._shadowRoot.appendChild(template.content.cloneNode(true)); this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save'); @@ -180,10 +181,12 @@ export class SeImgPropDialog extends HTMLElement { } break; case 'dialog': - if (newValue === 'open') { - this.$dialog.open(); - } else { - this.$dialog.close(); + if (this.eventlisten) { + if (newValue === 'open') { + this.$dialog.open(); + } else { + this.$dialog.close(); + } } break; case 'save': @@ -366,6 +369,7 @@ export class SeImgPropDialog extends HTMLElement { this.$saveBtn.addEventListener('click', onSaveHandler); this.$cancelBtn.addEventListener('click', onCancelHandler); this.$dialog.addEventListener('close', onCancelHandler); + this.eventlisten = true; } } diff --git a/src/editor/index.html b/src/editor/index.html index 40c02537..505078e3 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -440,7 +440,6 @@
-
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 3cd0f917..0bea6b1b 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -610,6 +610,10 @@ editor.init = () => { */ editor.storage = localStorage; } + // Image props dialog added to DOM + const newSeImgPropDialog = document.createElement('se-img-prop-dialog'); + newSeImgPropDialog.setAttribute('id', 'se-img-prop'); + document.body.append(newSeImgPropDialog); } catch (err) {} // get list of languages from options in the HTML