diff --git a/src/editor/components/index.js b/src/editor/components/index.js index 38adf0bb..8f16e993 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -1,10 +1,12 @@ import './seButton.js'; import './seFlyingButton.js'; import './seExplorerButton.js'; -import './seDropdown.js'; +import './seZoom.js'; import './seInput.js'; import './seSpinInput.js'; import './sePalette.js'; import './seMenu.js'; import './seMenuItem.js'; +import './seList.js'; +import './seListItem.js'; import './seColorPicker.js'; diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js new file mode 100644 index 00000000..fbf3e73d --- /dev/null +++ b/src/editor/components/seList.js @@ -0,0 +1,87 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/DropdownList.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + + + + + +`; +/** + * @class SeList + */ +export class SeList 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.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list'); + this.$label = this._shadowRoot.querySelector('label'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['label']; + } + + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'label': + this.$label.textContent = newValue; + break; + default: + // eslint-disable-next-line no-console + console.error(`unknown attribute: ${name}`); + break; + } + } + /** + * @function get + * @returns {any} + */ + get label () { + return this.getAttribute('label'); + } + + /** + * @function set + * @returns {void} + */ + set label (value) { + this.setAttribute('label', value); + } + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + this.$dropdown.addEventListener('change', (e) => { + e.preventDefault(); + const selectedItem = e?.detail?.closeResult; + if (selectedItem !== undefined && selectedItem?.id !== undefined) { + document.getElementById(selectedItem.id).click(); + } + }); + } +} + +// Register +customElements.define('se-list', SeList); diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js new file mode 100644 index 00000000..f460a410 --- /dev/null +++ b/src/editor/components/seListItem.js @@ -0,0 +1,71 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/Option.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + + + +`; +/** + * @class SeMenu + */ +export class SeListItem 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.$menuitem = this._shadowRoot.querySelector('elix-menu-item'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['option']; + } + + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'option': + this.$menuitem.setAttribute('option', newValue); + break; + default: + // eslint-disable-next-line no-console + console.error(`unknown attribute: ${name}`); + break; + } + } + /** + * @function get + * @returns {any} + */ + get option () { + return this.getAttribute('option'); + } + + /** + * @function set + * @returns {void} + */ + set option (value) { + this.setAttribute('option', value); + } +} + +// Register +customElements.define('se-list-item', SeListItem); diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 27436fa9..a02623e9 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -1,6 +1,5 @@ /* eslint-disable node/no-unpublished-import */ import 'elix/define/MenuButton.js'; -import 'elix/define/MenuItem.js'; const template = document.createElement('template'); template.innerHTML = ` diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index 288ea17e..43edfc11 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -1,5 +1,4 @@ /* eslint-disable node/no-unpublished-import */ -import 'elix/define/Menu.js'; import 'elix/define/MenuItem.js'; const template = document.createElement('template'); diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seZoom.js similarity index 98% rename from src/editor/components/seDropdown.js rename to src/editor/components/seZoom.js index 447d4cc7..7f5602a5 100644 --- a/src/editor/components/seDropdown.js +++ b/src/editor/components/seZoom.js @@ -8,7 +8,7 @@ import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; /** * @class Dropdown */ -class Dropdown extends ListComboBox { +class Zoom extends ListComboBox { /** * @function get * @returns {PlainObject} @@ -157,7 +157,7 @@ class Dropdown extends ListComboBox { } // Register -customElements.define('se-dropdown', Dropdown); +customElements.define('se-zoom', Zoom); /* {TODO diff --git a/src/editor/images/linejoin_mitter.svg b/src/editor/images/linejoin_miter.svg similarity index 100% rename from src/editor/images/linejoin_mitter.svg rename to src/editor/images/linejoin_miter.svg diff --git a/src/editor/index.html b/src/editor/index.html index d0361171..7fdf03cb 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -127,15 +127,23 @@ title="Change rotation angle"> + + Align Left + Align Center + Align Right + Align Top + Align Middle + Align Bottom +
- - - - + + + +
@@ -154,33 +162,30 @@ - + + selected objects + largest object + smallest object + page +
- - + +
- - + +
- - + +
- +
- - - - + + + +
- - + +
- - - - -
-
- - - - + + + + + + + +
@@ -236,25 +239,16 @@
-
- - -
+ +
Sans-serif
 +
Serif
 +
Cursive
 +
Fantasy
 +
Monospace
 +
Courier
 +
Helvetica
 +
Times
 + @@ -286,8 +280,8 @@
- - + + - - - - - - - - - -
- - -
+ + — + ... + - - + - . + - .. + + + + + + + + + + + + + 0% + 25% + 50% + 75% + 100% + +
- -
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js index 2dac9259..09b31291 100644 --- a/src/editor/panels/TopPanelHandlers.js +++ b/src/editor/panels/TopPanelHandlers.js @@ -410,13 +410,13 @@ class TopPanelHandlers { if (attr !== 'id' && attr !== 'class') { if (isNaN(val)) { val = this.svgCanvas.convertToNum(attr, val); - } else if (this.configObj.curConfig.baseUnit !== 'px') { + } else if (this.editor.configObj.curConfig.baseUnit !== 'px') { // Convert unitless value to one with given unit const unitData = getTypeMap(); if (this.selectedElement[attr] || this.svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') { - val *= unitData[this.configObj.curConfig.baseUnit]; + val *= unitData[this.editor.configObj.curConfig.baseUnit]; } } } diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 79282d4f..ce37d056 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -379,25 +379,6 @@ hr { /*—————————————————————————————*/ -.tool_button:hover, -.push_button:hover, -.buttonup:hover, -.buttondown, -.tool_button_current, -.push_button_pressed -{ - background-color: #ffc !important; -} - -.tool_button_current, -.push_button_pressed, -.buttondown { - background-color: #f4e284 !important; - -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important; - -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important; - box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important; -} - #tools_top { position: absolute; left: 108px; @@ -405,7 +386,6 @@ hr { top: 2px; height: 40px; border-bottom: none; - overflow: auto; } #tools_top .tool_sep { @@ -515,12 +495,6 @@ input[type=text] { padding: 2px; } -#tools_left .tool_button, -#tools_left .tool_button_current { - position: relative; - z-index: 11; -} - .dropdown { position: relative; } @@ -592,21 +566,6 @@ input[type=text] { margin-right: 0; } -.tool_button, -.push_button, -.tool_button_current, -.push_button_pressed -{ - height: 24px; - width: 24px; - margin: 2px 2px 4px 2px; - padding: 3px; - box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3); - background-color: #E8E8E8; - cursor: pointer; - border-radius: 3px; -} - #main_menu li#tool_open, #main_menu li#tool_import { position: relative; overflow: hidden; @@ -683,10 +642,6 @@ input[type=text] { float: right; } -.dropdown li.tool_button { - width: 24px; -} - #stroke_expand { width: 0; overflow: hidden; diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index ce81af8f..cf8f3313 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1292,7 +1292,7 @@ editor.init = () => { // fired when user wants to move elements to another layer let promptMoveLayerOnce = false; - $('#selLayerNames').change( async(evt) => { + $('#selLayerNames').change(async (evt) => { const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value; const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer); /** @@ -1310,7 +1310,7 @@ editor.init = () => { if (promptMoveLayerOnce) { moveToLayer(true); } else { - const ok = await seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]); + const ok = await window.seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]); if (ok === uiStrings.common.cancel) { return; } @@ -1669,9 +1669,9 @@ editor.init = () => { * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument * @returns {void} */ - const clickClear = async() => { + const clickClear = async () => { const [x, y] = editor.configObj.curConfig.dimensions; - const cancel = await seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]); + const cancel = await window.seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]); if (cancel === uiStrings.common.cancel) { return; } @@ -1861,7 +1861,8 @@ editor.init = () => { }; if (!svgCanvas.setSvgString(e.detail.value)) { - const resp = await seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]); + const resp = + await window.seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]); if (resp === uiStrings.common.cancel) { return; } @@ -1972,7 +1973,8 @@ editor.init = () => { if (editingsource) { const origSource = svgCanvas.getSvgString(); if (origSource !== e.detail.value) { - const resp = await seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]); + const resp = + await window.seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]); if (resp === uiStrings.common.ok) { hideSourceEditor(); }