diff --git a/src/editor/dialogs/editorPreferencesDialog.js b/src/editor/dialogs/editorPreferencesDialog.js new file mode 100644 index 00000000..6708244b --- /dev/null +++ b/src/editor/dialogs/editorPreferencesDialog.js @@ -0,0 +1,539 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/Dialog.js'; +import {isValidUnit} from '../../common/units.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + +
+
+ + +
+
+ Editor Preferences + + +
+ Editor Background +
+ +

Note: Background will not be saved with image.

+
+
+ Grid + + + +
+
+ Units & Rulers + + +
+
+
+ +`; +/** + * @class SeEditPrefsDialog + */ +export class SeEditPrefsDialog extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this.colorBlocks = ['#FFF', '#888', '#000', 'chessboard']; + this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + this.$dialog = this._shadowRoot.querySelector('#svg_prefs'); + this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save'); + this.$cancelBtn = this._shadowRoot.querySelector('#tool_prefs_cancel'); + this.$langSelect = this._shadowRoot.querySelector('#lang_select'); + this.$iconSize = this._shadowRoot.querySelector('#iconsize'); + this.$bgBlocks = this._shadowRoot.querySelector('#bg_blocks'); + this.$bgURL = this._shadowRoot.querySelector('#canvas_bg_url'); + this.$gridSnappingOn = this._shadowRoot.querySelector('#grid_snapping_on'); + this.$gridSnappingStep = this._shadowRoot.querySelector('#grid_snapping_step'); + this.$gridColor = this._shadowRoot.querySelector('#grid_color'); + this.$showRulers = this._shadowRoot.querySelector('#show_rulers'); + this.$baseUnit = this._shadowRoot.querySelector('#base_unit'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + // eslint-disable-next-line max-len + return ['dialog', 'lang', 'iconsize', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + const blocks = this.$bgBlocks.querySelectorAll('div'); + const curBg = 'cur_background'; + switch (name) { + case 'dialog': + if (newValue === 'open') { + this.$dialog.open(); + } else { + this.$dialog.close(); + } + break; + case 'lang': + this.$langSelect.value = newValue; + break; + case 'iconsize': + this.$iconSize.value = newValue; + break; + case 'canvasbg': + if (!newValue) { + if (blocks.length > 0) { + blocks[0].classList.add(curBg); + } + } else { + blocks.forEach(function (blk) { + const isBg = blk.dataset.bgColor === newValue; + if (isBg) { + blk.classList.add(curBg); + } else { + blk.classList.remove(curBg); + } + }); + } + break; + case 'bgurl': + this.$bgURL.value = newValue; + break; + case 'gridsnappingon': + if (newValue === 'true') { + this.$gridSnappingOn.checked = true; + } else if (newValue === 'false') { + this.$gridSnappingOn.checked = false; + } + break; + case 'gridsnappingstep': + this.$gridSnappingStep.value = newValue; + break; + case 'gridcolor': + this.$gridColor.value = newValue; + break; + case 'showrulers': + if (newValue === 'true') { + this.$showRulers.checked = true; + } else if (newValue === 'false') { + this.$showRulers.checked = false; + } + break; + case 'baseunit': + this.$baseUnit.value = newValue; + break; + default: + super.attributeChangedCallback(name, oldValue, newValue); + break; + } + } + /** + * @function get + * @returns {any} + */ + get lang () { + return this.getAttribute('lang'); + } + + /** + * @function set + * @returns {void} + */ + set lang (value) { + this.setAttribute('lang', value); + } + /** + * @function get + * @returns {any} + */ + get iconsize () { + return this.getAttribute('iconsize'); + } + /** + * @function set + * @returns {void} + */ + set iconsize (value) { + this.setAttribute('iconsize', value); + } + /** + * @function get + * @returns {any} + */ + get canvasbg () { + return this.getAttribute('canvasbg'); + } + /** + * @function set + * @returns {void} + */ + set canvasbg (value) { + this.setAttribute('canvasbg', value); + } + /** + * @function get + * @returns {any} + */ + get bgurl () { + return this.getAttribute('bgurl'); + } + /** + * @function set + * @returns {void} + */ + set bgurl (value) { + this.setAttribute('bgurl', value); + } + /** + * @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 gridsnappingon () { + return this.getAttribute('gridsnappingon'); + } + /** + * @function set + * @returns {void} + */ + set gridsnappingon (value) { + this.setAttribute('gridsnappingon', value); + } + /** + * @function get + * @returns {any} + */ + get gridsnappingstep () { + return this.getAttribute('gridsnappingstep'); + } + /** + * @function set + * @returns {void} + */ + set gridsnappingstep (value) { + this.setAttribute('gridsnappingstep', value); + } + /** + * @function get + * @returns {any} + */ + get gridcolor () { + return this.getAttribute('gridcolor'); + } + /** + * @function set + * @returns {void} + */ + set gridcolor (value) { + this.setAttribute('gridcolor', value); + } + /** + * @function get + * @returns {any} + */ + get showrulers () { + return this.getAttribute('showrulers'); + } + /** + * @function set + * @returns {void} + */ + set showrulers (value) { + this.setAttribute('showrulers', value); + } + /** + * @function get + * @returns {any} + */ + get baseunit () { + return this.getAttribute('baseunit'); + } + /** + * @function set + * @returns {void} + */ + set baseunit (value) { + this.setAttribute('baseunit', value); + } + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + const onCancelHandler = (ev) => { + const closeEvent = new CustomEvent('change', { detail: { + dialog: 'closed' + }}); + this.dispatchEvent(closeEvent); + }; + const onSaveHandler = (ev) => { + const color = this.$bgBlocks.querySelector('.cur_background').dataset.bgColor || '#FFF'; + const closeEvent = new CustomEvent('change', {detail: { + lang: this.$langSelect.value, + dialog: 'close', + iconsize: this.$iconSize.value, + bgcolor: color, + bgurl: this.$bgURL.value, + gridsnappingon: this.$gridSnappingOn.checked, + gridsnappingstep: this.$gridSnappingStep.value, + showrulers: this.$showRulers.checked, + baseunit: this.$baseUnit.value + }}); + this.dispatchEvent(closeEvent); + }; + // Set up editor background functionality + const self = this; + this.colorBlocks.forEach(function (e, i) { + const newdiv = document.createElement('div'); + if (e === 'chessboard') { + newdiv.dataset.bgColor = e; + // eslint-disable-next-line max-len + newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjGgq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)'; + newdiv.classList.add('color_block'); + } else { + newdiv.dataset.bgColor = e; // setAttribute('data-bgcolor', e); + newdiv.style.backgroundColor = e; + newdiv.classList.add('color_block'); + } + self.$bgBlocks.append(newdiv); + }); + const blocks = this.$bgBlocks.querySelectorAll('div'); + const curBg = 'cur_background'; + blocks.forEach(function (blk) { + blk.addEventListener('click', function () { + blocks.forEach((el) => el.classList.remove(curBg)); + blk.classList.add(curBg); + }); + }); + this.$saveBtn.addEventListener('click', onSaveHandler); + this.$cancelBtn.addEventListener('click', onCancelHandler); + this.$dialog.addEventListener('close', onCancelHandler); + } +} + +// Register +customElements.define('se-edit-prefs-dialog', SeEditPrefsDialog); diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index 4b5c0cd9..2eb7fc92 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -233,7 +233,7 @@ export class SeImgPropDialog extends HTMLElement { * @returns {any} */ get width () { - return this.hasAttribute('width'); + return this.getAttribute('width'); } /** * @function set @@ -247,7 +247,7 @@ export class SeImgPropDialog extends HTMLElement { * @returns {any} */ get height () { - return this.hasAttribute('height'); + return this.getAttribute('height'); } /** * @function set @@ -261,7 +261,7 @@ export class SeImgPropDialog extends HTMLElement { * @returns {any} */ get save () { - return this.hasAttribute('save'); + return this.getAttribute('save'); } /** * @function set @@ -275,7 +275,7 @@ export class SeImgPropDialog extends HTMLElement { * @returns {any} */ get dialog () { - return this.hasAttribute('dialog'); + return this.getAttribute('dialog'); } /** * @function set @@ -289,7 +289,7 @@ export class SeImgPropDialog extends HTMLElement { * @returns {any} */ get embed () { - return this.hasAttribute('embed'); + return this.getAttribute('embed'); } /** * @function set diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js index fe96b1e7..6ce10376 100644 --- a/src/editor/dialogs/index.js +++ b/src/editor/dialogs/index.js @@ -1 +1,2 @@ import './imagePropertiesDialog.js'; +import './editorPreferencesDialog.js'; \ No newline at end of file diff --git a/src/editor/images/cancel.svg b/src/editor/images/cancel.svg new file mode 100644 index 00000000..205ade12 --- /dev/null +++ b/src/editor/images/cancel.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/ok.svg b/src/editor/images/ok.svg new file mode 100644 index 00000000..67e433c4 --- /dev/null +++ b/src/editor/images/ok.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/editor/index.html b/src/editor/index.html index 56f8b1d7..33f40177 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -440,118 +440,6 @@ -
-
-
-
- - -
-
- Editor Preferences - - -
- Editor Background -
- -

Note: Background will not be saved with image.

-
-
- Grid - - - -
-
- Units & Rulers - - - - -
-
-
-
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 0bea6b1b..0d4cc248 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -614,10 +614,14 @@ editor.init = () => { const newSeImgPropDialog = document.createElement('se-img-prop-dialog'); newSeImgPropDialog.setAttribute('id', 'se-img-prop'); document.body.append(newSeImgPropDialog); + // editor prefences dialoag added to DOM + const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog'); + newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs'); + document.body.append(newSeEditPrefsDialog); } catch (err) {} - // get list of languages from options in the HTML - const goodLangs = [...document.querySelectorAll('#lang_select option')].map((option) => option.value); + // eslint-disable-next-line max-len + const goodLangs = ['ar', 'cs', 'de', 'en', 'es', 'fa', 'fr', 'fy', 'hi', 'it', 'ja', 'nl', 'pl', 'pt-BR', 'ro', 'ru', 'sk', 'sl', 'zh-CN', 'zh-TW']; /** * Sets up current preferences based on defaults. @@ -894,7 +898,8 @@ editor.init = () => { // return; editor.pref('iconsize', size); - $('#iconsize').val(size); + const $editDialog = document.getElementById('se-edit-prefs'); + $editDialog.setAttribute('iconsize', size); // Note that all rules will be prefixed with '#svg_editor' when parsed const cssResizeRules = { @@ -2684,26 +2689,6 @@ editor.init = () => { svgCanvas.bind('extension_added', extAdded); svgCanvas.textActions.setInputElem($('#text')[0]); - // Set up editor background functionality - const colorBlocks = ['#FFF', '#888', '#000', 'chessboard']; - let str = ''; - $.each(colorBlocks, function (i, e) { - str += (e === 'chessboard') - // eslint-disable-next-line max-len - ? `
` - : `
`; - }); - $('#bg_blocks').append(str); - const blocks = $('#bg_blocks div'); - const curBg = 'cur_background'; - blocks.each(function () { - const blk = $(this); - blk.click(function () { - blocks.removeClass(curBg); - $(this).addClass(curBg); - }); - }); - setBackground(editor.pref('bkgd_color'), editor.pref('bkgd_url')); // update resolution option with actual resolution @@ -3788,10 +3773,10 @@ editor.init = () => { updateToolButtonState(); }; - $('#svg_prefs_container').draggable({ + /* $('#svg_prefs_container').draggable({ cancel: 'button,fieldset', containment: 'window' - }).css('position', 'absolute'); + }).css('position', 'absolute'); */ let docprops = false; let preferences = false; @@ -3825,25 +3810,19 @@ editor.init = () => { const showPreferences = function () { if (preferences) { return; } preferences = true; + const $editDialog = document.getElementById('se-edit-prefs'); $('#main_menu').hide(); - // Update background color with current one const canvasBg = curPrefs.bkgd_color; const url = editor.pref('bkgd_url'); - blocks.each(function () { - const blk = $(this); - const isBg = blk.data('bgcolor') === canvasBg; - blk.toggleClass(curBg, isBg); - }); - if (!canvasBg) { blocks.eq(0).addClass(curBg); } if (url) { - $('#canvas_bg_url').val(url); + $editDialog.setAttribute('bgurl', url); } - $('#grid_snapping_on').prop('checked', curConfig.gridSnapping); - $('#grid_snapping_step').attr('value', curConfig.snappingStep); - $('#grid_color').attr('value', curConfig.gridColor); - - $('#svg_prefs').show(); + $editDialog.setAttribute('gridsnappingon', curConfig.gridSnapping); + $editDialog.setAttribute('gridsnappingstep', curConfig.snappingStep); + $editDialog.setAttribute('gridcolor', curConfig.gridColor); + $editDialog.setAttribute('canvasbg', canvasBg); + $editDialog.setAttribute('dialog', 'open'); }; /** @@ -3908,7 +3887,8 @@ editor.init = () => { * @returns {void} */ const hidePreferences = function () { - $('#svg_prefs').hide(); + const $editDialog = document.getElementById('se-edit-prefs'); + $editDialog.setAttribute('dialog', 'close'); preferences = false; }; @@ -3946,33 +3926,31 @@ editor.init = () => { * @function module:SVGEditor.savePreferences * @returns {Promise} */ - const savePreferences = editor.savePreferences = async function () { + const savePreferences = editor.savePreferences = async function (e) { + const {lang, iconsize, bgcolor, bgurl, gridsnappingon, gridsnappingstep, gridcolor, showrulers, baseunit} = e.detail; // Set background - const color = $('#bg_blocks div.cur_background').data('bgcolor') || '#FFF'; - setBackground(color, $('#canvas_bg_url').val()); + setBackground(bgcolor, bgurl); // set language - const lang = $('#lang_select').val(); if (lang && lang !== editor.pref('lang')) { const {langParam, langData} = await editor.putLocale(lang, goodLangs); await setLang(langParam, langData); } // set icon size - setIconSize($('#iconsize').val()); + setIconSize(iconsize); // set grid setting - curConfig.gridSnapping = $('#grid_snapping_on')[0].checked; - curConfig.snappingStep = $('#grid_snapping_step').val(); - curConfig.gridColor = $('#grid_color').val(); - curConfig.showRulers = $('#show_rulers')[0].checked; + curConfig.gridSnapping = gridsnappingon; + curConfig.snappingStep = gridsnappingstep; + curConfig.gridColor = gridcolor; + curConfig.showRulers = showrulers; $('#rulers').toggle(curConfig.showRulers); if (curConfig.showRulers) { updateRulers(); } - curConfig.baseUnit = $('#base_unit').val(); + curConfig.baseUnit = baseunit; svgCanvas.setConfig(curConfig); - updateCanvas(); hidePreferences(); }; @@ -3999,10 +3977,6 @@ editor.init = () => { } else { hideSourceEditor(); } - } else if (docprops) { - hideDocProperties(); - } else if (preferences) { - hidePreferences(); } }; @@ -4623,7 +4597,13 @@ editor.init = () => { saveDocProperties(e); } }); - + $id('se-edit-prefs').addEventListener('change', function (e) { + if (e.detail.dialog === 'closed') { + hidePreferences(); + } else { + savePreferences(e); + } + }); const toolButtons = [ { key: ['esc', false, false], @@ -4639,7 +4619,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_prefs_save', fn: savePreferences, evt: 'click'}, {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'}, {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'}, {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'}, @@ -4826,6 +4805,7 @@ editor.init = () => { const preTool = document.getElementById(`tool_${curConfig.initTool}`); const regTool = document.getElementById(curConfig.initTool); const selectTool = document.getElementById('tool_select'); + const $editDialog = document.getElementById('se-edit-prefs'); const mouseupEvent = new Event('mouseup'); if (preTool) { preTool.click(); @@ -4849,23 +4829,23 @@ editor.init = () => { $('#rulers').toggle(Boolean(curConfig.showRulers)); if (curConfig.showRulers) { - $('#show_rulers')[0].checked = true; + $editDialog.setAttribute('showrulers', true); } if (curConfig.baseUnit) { - $('#base_unit').val(curConfig.baseUnit); + $editDialog.setAttribute('baseunit', curConfig.baseUnit); } if (curConfig.gridSnapping) { - $('#grid_snapping_on')[0].checked = true; + $editDialog.setAttribute('gridsnappingon', true); } if (curConfig.snappingStep) { - $('#grid_snapping_step').val(curConfig.snappingStep); + $editDialog.setAttribute('gridsnappingstep', curConfig.snappingStep); } if (curConfig.gridColor) { - $('#grid_color').val(curConfig.gridColor); + $editDialog.setAttribute('gridcolor', curConfig.gridColor); } }); @@ -5191,7 +5171,8 @@ editor.init = () => { const setLang = editor.setLang = function (lang, allStrings) { editor.langChanged = true; editor.pref('lang', lang); - $('#lang_select').val(lang); + const $editDialog = document.getElementById('se-edit-prefs'); + $editDialog.setAttribute('lang', lang); if (!allStrings) { return; }