From 375f16e0b2f0947dccec53b8b4d91bc42b3a3166 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Wed, 9 Dec 2020 16:02:31 +0530 Subject: [PATCH] #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 = [ {