diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js index 4023c3f3..dc238c25 100644 --- a/src/editor/components/seDropdown.js +++ b/src/editor/components/seDropdown.js @@ -1,6 +1,7 @@ /* eslint-disable node/no-unpublished-import */ import ListComboBox from 'elix/define/ListComboBox.js'; import NumberSpinBox from 'elix/define/NumberSpinBox.js'; +// import Input from 'elix/src/base/Input.js'; import {defaultState} from 'elix/src/base/internal.js'; import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; import {internal} from 'elix'; @@ -16,7 +17,8 @@ class CustomCombo extends ListComboBox { get [defaultState] () { return Object.assign(super[defaultState], { inputPartType: NumberSpinBox, - src: './imags.logo.svg' + src: './images/logo.svg', + inputsize: '100%' }); } /** @@ -26,19 +28,17 @@ class CustomCombo extends ListComboBox { get [internal.template] () { const result = super[internal.template]; const source = result.content.getElementById('source'); + // add a icon before our dropdown source.prepend(fragmentFrom.html` - icon - + icon `.cloneNode(true)); + // change the style so it fits in our toolbar result.content.append( templateFrom.html` `.content @@ -63,7 +63,7 @@ class CustomCombo extends ListComboBox { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src']; + return ['title', 'src', 'inputsize']; } /** * @function attributeChangedCallback @@ -74,37 +74,22 @@ class CustomCombo extends ListComboBox { */ attributeChangedCallback (name, oldValue, newValue) { if (oldValue === newValue) return; + console.log({this: this, name, oldValue, newValue}); switch (name) { case 'title': - console.log({this: this, name, oldValue, newValue}); // this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`); break; case 'src': - console.log({name, oldValue, newValue}); this.src = newValue; break; + case 'inputsize': + this.inputsize = newValue; + break; default: super.attributeChangedCallback(name, oldValue, newValue); break; } } - /** - * @function connectedCallback - * @returns {void} - */ - connectedCallback () { - super.connectedCallback(); - this.addEventListener('selectedindexchange', (e) => { - console.log(e.detail); - console.log(this.children[e.detail.selectedIndex].getAttribute('value')); - console.log(this); - }); - this.addEventListener('input', (e) => { - console.log(e.detail); - console.log(this.children[e.detail.selectedIndex].getAttribute('value')); - console.log(this); - }); - } /** * @function [internal.render] * @param {PlainObject} changed @@ -112,21 +97,82 @@ class CustomCombo extends ListComboBox { */ [internal.render] (changed) { super[internal.render](changed); - console.log(this, changed, this[internal.firstRender], changed.src); + // 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); } + 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) => { + e.preventDefault(); + this.value = e.target.value; + }); + } } + /** + * @function src + * @returns {string} src + */ get src () { return this[internal.state].src; } + /** + * @function src + * @returns {void} + */ set src (src) { this[internal.setState]({src}); } + /** + * @function inputsize + * @returns {string} src + */ + get inputsize () { + return this[internal.state].inputsize; + } + /** + * @function src + * @returns {void} + */ + set inputsize (inputsize) { + this[internal.setState]({inputsize}); + } } // Register customElements.define('se-dropdown', CustomCombo); + +/* +{TODO + min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, + function stepZoom (elem, step) { + const origVal = Number(elem.value); + if (origVal === 0) { return 100; } + const sugVal = origVal + step; + if (step === 0) { return origVal; } + + if (origVal >= 100) { + return sugVal; + } + if (sugVal >= origVal) { + return origVal * 2; + } + return origVal / 2; + } +*/ diff --git a/src/editor/index.html b/src/editor/index.html index b7bb77dd..e062a0f0 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -411,13 +411,13 @@
- -
1000%
-
400%
-
200%
-
100%
-
50%
-
25%
+ +
1000
+
400
+
200
+
100
+
50
+
25
Fit to canvas
Fit to selection
Fit to layer content
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 77fc911e..5478f5f5 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -140,12 +140,6 @@ select { margin: 1px; } -#zoomLabel { - cursor: pointer; - margin-right: 5px; - padding-top: 4px -} - #linkLabel > svg { height: 20px; padding-top: 4px; @@ -576,15 +570,6 @@ input[type=text] { z-index: 11; } -span.zoom_tool { - line-height: 26px; - padding: 3px; -} - -#zoom_panel { - margin-top: 5px; -} - .dropdown { position: relative; } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index fb44cb62..b068c392 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -973,7 +973,6 @@ editor.init = () => { open_path: 'openpath.png', image: 'image.png', - zoom: 'zoom.png', arrow_right_big: 'arrow_right_big.png', arrow_down: 'dropdown.gif', @@ -1041,7 +1040,6 @@ editor.init = () => { '#tool_editor_prefs > div': 'config', '#tool_editor_homepage > div': 'globe_link', '#tool_image': 'image', - '#tool_zoom': 'zoom', '#tool_node_clone': 'node_clone', '#tool_node_delete': 'node_delete', '#tool_add_subpath': 'add_subpath', @@ -1079,7 +1077,6 @@ editor.init = () => { '#cornerRadiusLabel span': 'c_radius', '#angleLabel': 'angle', '#linkLabel,#tool_make_link_multi': 'globe_link', - '#zoomLabel': 'zoom', '#tool_fill label': 'fill', '#tool_stroke .icon_label': 'stroke', '#group_opacityLabel': 'opacity', @@ -2322,12 +2319,10 @@ editor.init = () => { bb = zInfo.bbox; if (zoomlevel < 0.001) { - changeZoom({value: 0.1}); + changeZoom(0.1); return; } - $('#zoom').val((zoomlevel * 100).toFixed(1)); - if (autoCenter) { updateCanvas(); } else { @@ -2345,10 +2340,10 @@ editor.init = () => { /** * @type {module:jQuerySpinButton.ValueCallback} */ - const changeZoom = function (ctl) { - const zoomlevel = ctl.value / 100; + const changeZoom = function (value) { + const zoomlevel = value / 100; if (zoomlevel < 0.001) { - ctl.value = 0.1; + value = 0.1; return; } const zoom = svgCanvas.getZoom(); @@ -3364,16 +3359,6 @@ editor.init = () => { } }); - editor.addDropDown('#zoom_dropdown', function () { - const item = $(this); - const val = item.data('val'); - if (val) { - zoomChanged(window, val); - } else { - changeZoom({value: Number.parseFloat(item.text())}); - } - }, true); - addAltDropDown('#stroke_linecap', '#linecap_opts', function () { setStrokeOpt(this, true); }, {dropUp: true}); @@ -3521,7 +3506,7 @@ editor.init = () => { const res = svgCanvas.getResolution(); multiplier = multiplier ? res.zoom * multiplier : 1; // setResolution(res.w * multiplier, res.h * multiplier, true); - $('#zoom').val(multiplier * 100); + $id('zoom').value = multiplier * 100; svgCanvas.setZoom(multiplier); zoomDone(); updateCanvas(true); @@ -4548,11 +4533,6 @@ editor.init = () => { $(window).mouseup(); }); - $('#zoomLabel').click(function () { - $('#zoom_dropdown button').mousedown(); - $(window).mouseup(); - }); - $('.push_button').mousedown(function () { if (!$(this).hasClass('disabled')) { $(this).addClass('push_button_pressed').removeClass('push_button'); @@ -4772,24 +4752,6 @@ editor.init = () => { return sugVal; } - /** - * @type {module:jQuerySpinButton.StepCallback} - */ - function stepZoom (elem, step) { - const origVal = Number(elem.value); - if (origVal === 0) { return 100; } - const sugVal = origVal + step; - if (step === 0) { return origVal; } - - if (origVal >= 100) { - return sugVal; - } - if (sugVal >= origVal) { - return origVal * 2; - } - return origVal / 2; - } - // function setResolution (w, h, center) { // updateCanvas(); // // w -= 0; h -= 0; @@ -4887,6 +4849,7 @@ editor.init = () => { $id('tool_zoom').addEventListener('dblclick', dblclickZoom); $id('tool_path').addEventListener('click', clickPath); $id('tool_line').addEventListener('click', clickLine); + // flyout $id('tool_rect').addEventListener('click', clickRect); $id('tool_square').addEventListener('click', clickSquare); @@ -4895,6 +4858,9 @@ editor.init = () => { $id('tool_circle').addEventListener('click', clickCircle); $id('tool_fhellipse').addEventListener('click', clickFHEllipse); + // register actions for bottom panel + $id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.value))); + // register actions for layer toolbar $id('layer_new').addEventListener('click', newLayer); $id('layer_delete').addEventListener('click', deleteLayer); @@ -5186,13 +5152,6 @@ editor.init = () => { $('#blur').SpinButton({ min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur }); - $('#zoom').SpinButton({ - min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, - stateObj, callback: changeZoom - // Set default zoom - }).val( - svgCanvas.getZoom() * 100 - ); $('#workarea').contextMenu( { diff --git a/src/svgcanvas/event.js b/src/svgcanvas/event.js index b20ced03..10fe2737 100644 --- a/src/svgcanvas/event.js +++ b/src/svgcanvas/event.js @@ -1381,7 +1381,7 @@ export const DOMMouseScrollEvent = function (e) { }; eventContext_.getCanvas().setZoom(zoomlevel); - $('#zoom').val((zoomlevel * 100).toFixed(1)); + document.getElementById('zoom').value = ((zoomlevel * 100).toFixed(1)); eventContext_.getCanvas().call('updateCanvas', {center: false, newCtr}); eventContext_.getCanvas().call('zoomDone');