From 8eee8cf3231231841158110b48f70284e1672fca Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 18 Nov 2020 21:36:42 +0100 Subject: [PATCH] progress --- src/editor/components/seDropdown.js | 40 ++++++++++++-------- src/editor/svgedit.js | 57 +++++++++++++++++------------ 2 files changed, 58 insertions(+), 39 deletions(-) diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js index dc238c25..981ce4d9 100644 --- a/src/editor/components/seDropdown.js +++ b/src/editor/components/seDropdown.js @@ -7,9 +7,9 @@ import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; import {internal} from 'elix'; /** - * @class CustomCombo + * @class Dropdown */ -class CustomCombo extends ListComboBox { +class Dropdown extends ListComboBox { /** * @function get * @returns {PlainObject} @@ -63,7 +63,7 @@ class CustomCombo extends ListComboBox { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src', 'inputsize']; + return ['title', 'src', 'inputsize', 'value']; } /** * @function attributeChangedCallback @@ -97,15 +97,9 @@ class CustomCombo extends ListComboBox { */ [internal.render] (changed) { super[internal.render](changed); - // console.log(this, changed); if (this[internal.firstRender]) { this.$img = this.shadowRoot.querySelector('img'); this.$input = this.shadowRoot.getElementById('input'); - this.$event = new CustomEvent('change'); - this.addEventListener('selectedindexchange', (e) => { - e.preventDefault(); - this.value = this.children[e.detail.selectedIndex].getAttribute('value'); - }); } if (changed.src) { this.$img.setAttribute('src', this[internal.state].src); @@ -113,15 +107,15 @@ class CustomCombo extends ListComboBox { if (changed.inputsize) { this.$input.shadowRoot.querySelector('[part~="input"]').style.width = this[internal.state].inputsize; } - if (changed.value) { - console.log('value=', this[internal.state].value); - this.dispatchEvent(this.$event); - } if (changed.inputPartType) { // Wire up handler on new input. - this.$input.addEventListener('click', (e) => { + this.addEventListener('close', (e) => { e.preventDefault(); - this.value = e.target.value; + const value = e.detail?.closeResult.getAttribute('value'); + if (value) { + const closeEvent = new CustomEvent('change', {detail: {value}}); + this.dispatchEvent(closeEvent); + } }); } } @@ -153,10 +147,24 @@ class CustomCombo extends ListComboBox { set inputsize (inputsize) { this[internal.setState]({inputsize}); } + /** + * @function value + * @returns {string} src + */ + get value () { + return this[internal.state].value; + } + /** + * @function value + * @returns {void} + */ + set value (value) { + this[internal.setState]({value}); + } } // Register -customElements.define('se-dropdown', CustomCombo); +customElements.define('se-dropdown', Dropdown); /* {TODO diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index c082d815..53364f6e 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -2321,6 +2321,8 @@ editor.init = () => { return; } + $id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1); + if (autoCenter) { updateCanvas(); } else { @@ -2338,23 +2340,34 @@ editor.init = () => { /** * @type {module:jQuerySpinButton.ValueCallback} */ - const changeZoom = function (value) { - const zoomlevel = value / 100; - if (zoomlevel < 0.001) { - value = 0.1; - return; - } - const zoom = svgCanvas.getZoom(); - const wArea = workarea; + const changeZoom = (value) => { + switch (value) { + case 'canvas': + case 'selection': + case 'layer': + case 'content': + zoomChanged(window, value); + break; + default: + { + const zoomlevel = Number(value) / 100; + if (zoomlevel < 0.001) { + value = 0.1; + return; + } + const zoom = svgCanvas.getZoom(); + const wArea = workarea; - zoomChanged(window, { - width: 0, - height: 0, - // center pt of scroll position - x: (wArea[0].scrollLeft + wArea.width() / 2) / zoom, - y: (wArea[0].scrollTop + wArea.height() / 2) / zoom, - zoom: zoomlevel - }, true); + zoomChanged(window, { + width: 0, + height: 0, + // center pt of scroll position + x: (wArea[0].scrollLeft + wArea.width() / 2) / zoom, + y: (wArea[0].scrollTop + wArea.height() / 2) / zoom, + zoom: zoomlevel + }, true); + } + } }; $('#cur_context_panel').delegate('a', 'click', function () { @@ -3543,7 +3556,7 @@ editor.init = () => { const res = svgCanvas.getResolution(); multiplier = multiplier ? res.zoom * multiplier : 1; // setResolution(res.w * multiplier, res.h * multiplier, true); - $id('zoom').value = multiplier * 100; + $id('zoom').value = (multiplier * 100).toFixed(1); svgCanvas.setZoom(multiplier); zoomDone(); updateCanvas(true); @@ -4753,11 +4766,6 @@ editor.init = () => { populateLayers(); - // function changeResolution (x,y) { - // const {zoom} = svgCanvas.getResolution(); - // setResolution(x * zoom, y * zoom); - // } - const centerCanvas = () => { // this centers the canvas vertically in the workarea (horizontal handled in CSS) workarea.css('line-height', workarea.height() + 'px'); @@ -4896,7 +4904,7 @@ editor.init = () => { $id('tool_fhellipse').addEventListener('click', clickFHEllipse); // register actions for bottom panel - $id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.value))); + $id('zoom').addEventListener('change', (e) => changeZoom(e.detail.value)); $id('elem_id').addEventListener('change', (e) => attrChanger(e)); $id('elem_class').addEventListener('change', (e) => attrChanger(e)); $id('circle_cx').addEventListener('change', (e) => attrChanger(e)); @@ -5211,6 +5219,9 @@ editor.init = () => { min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur }); + // zoom + $id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1); + $('#workarea').contextMenu( { menu: 'cmenu_canvas',