progress
parent
fc631d21db
commit
8eee8cf323
|
@ -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
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue