refactor
JFH
parent
9655997878
commit
9b464b7a32
|
|
@ -1,69 +1,53 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
// import DelegateInputLabelMixin from 'elix/src/base/DelegateInputLabelMixin.js';
|
||||
// import html from 'elix/src/core/html.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 ReactiveElement from 'elix/src/core/ReactiveElement.js';
|
||||
import {internal} from 'elix';
|
||||
import 'elix/define/Input.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
img {
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
position: relative;
|
||||
}
|
||||
span {
|
||||
bottom: 1px;
|
||||
right: -4px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/logo.svg" alt="icon" width="12" height="12" />
|
||||
<span id="label">label</span>
|
||||
<elix-input></elix-input>
|
||||
`;
|
||||
|
||||
/**
|
||||
* @class SeInput
|
||||
* @class SEInput
|
||||
*/
|
||||
class SeInput extends Input {
|
||||
export class SEInput extends HTMLElement {
|
||||
/**
|
||||
* @function get
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [defaultState] () {
|
||||
return Object.assign(super[defaultState], {
|
||||
label: '',
|
||||
src: '',
|
||||
inputsize: '100%',
|
||||
value: ''
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [internal.template] () {
|
||||
const result = super[internal.template];
|
||||
result.content.prepend(fragmentFrom.html`
|
||||
<label>
|
||||
<span class="icon_label">
|
||||
<img src="./images/logo.svg" alt="icon" width="18" height="18" />
|
||||
</span>
|
||||
</label>`.cloneNode(true));
|
||||
// change the style so it fits in our toolbar
|
||||
result.content.append(
|
||||
templateFrom.html`
|
||||
<style>
|
||||
[part~="input"] {
|
||||
margin-top: 5px;
|
||||
height: 23px;
|
||||
}
|
||||
.icon_label {
|
||||
float: left;
|
||||
padding-top: 3px;
|
||||
padding-right: 3px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
`.content
|
||||
);
|
||||
return result;
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
// locate the component
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
this.$label = this.shadowRoot.getElementById('label');
|
||||
this.$event = new CustomEvent('change');
|
||||
this.$input = this._shadowRoot.querySelector('elix-input');
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['value', 'class', 'inputsize', 'label', 'src'];
|
||||
return ['value', 'label', 'src', 'size'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
|
|
@ -74,103 +58,100 @@ class SeInput extends Input {
|
|||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
console.log({this: this, name, oldValue, newValue});
|
||||
switch (name) {
|
||||
case 'label':
|
||||
this.label = newValue;
|
||||
break;
|
||||
case 'src':
|
||||
this.src = newValue;
|
||||
this.$img.setAttribute('src', newValue);
|
||||
this.$label.remove();
|
||||
break;
|
||||
case 'inputsize':
|
||||
this.inputsize = newValue;
|
||||
case 'size':
|
||||
this.$input.setAttribute('size', newValue);
|
||||
break;
|
||||
case 'label':
|
||||
this.$label.textContent = newValue;
|
||||
this.$img.remove();
|
||||
break;
|
||||
case 'value':
|
||||
this.$input.value = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function [internal.render]
|
||||
* @param {PlainObject} changed
|
||||
* @returns {void}
|
||||
*/
|
||||
[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('inner');
|
||||
this.$img = this.shadowRoot.querySelector('img');
|
||||
this.$span = this.shadowRoot.querySelector('span');
|
||||
this.$event = new CustomEvent('change');
|
||||
this.addEventListener('change', (e) => {
|
||||
e.preventDefault();
|
||||
this.value = e.target.value;
|
||||
});
|
||||
}
|
||||
if (changed.inputsize) {
|
||||
this.$input.style.width = this[internal.state].inputsize;
|
||||
}
|
||||
if (changed.src) {
|
||||
if (this[internal.state].src !== '') {
|
||||
this.$img.src = this[internal.state].src;
|
||||
this.$img.style.display = 'block';
|
||||
}
|
||||
}
|
||||
if (changed.label) {
|
||||
if (this[internal.state].label !== '') {
|
||||
this.$span.prepend(this[internal.state].label);
|
||||
this.$img.style.display = 'none';
|
||||
}
|
||||
}
|
||||
if (changed.value) {
|
||||
this.dispatchEvent(this.$event);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function inputsize
|
||||
* @returns {string} inputsize
|
||||
*/
|
||||
get inputsize () {
|
||||
return this[internal.state].inputsize;
|
||||
}
|
||||
/**
|
||||
* @function inputsize
|
||||
* @returns {void}
|
||||
*/
|
||||
set inputsize (inputsize) {
|
||||
this[internal.setState]({inputsize});
|
||||
}
|
||||
/**
|
||||
* @function src
|
||||
* @returns {string} src
|
||||
*/
|
||||
get src () {
|
||||
return this[internal.state].src;
|
||||
}
|
||||
/**
|
||||
* @function src
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (src) {
|
||||
this[internal.setState]({src});
|
||||
}
|
||||
/**
|
||||
* @function label
|
||||
* @returns {string} label
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get label () {
|
||||
return this[internal.state].label;
|
||||
return this.getAttribute('label');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function label
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set label (label) {
|
||||
this[internal.setState]({label});
|
||||
set label (value) {
|
||||
this.setAttribute('label', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get value () {
|
||||
return this.$input.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set value (value) {
|
||||
this.$input.value = value;
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get src () {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get size () {
|
||||
return this.getAttribute('size');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set size (value) {
|
||||
this.setAttribute('size', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.addEventListener('change', (e) => {
|
||||
e.preventDefault();
|
||||
this.value = e.target.value;
|
||||
});
|
||||
this.dispatchEvent(this.$event);
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-input', SeInput);
|
||||
customElements.define('se-input', SEInput);
|
||||
|
|
|
|||
|
|
@ -1,60 +1,53 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
import NumberSpinBox from 'elix/define/NumberSpinBox.js';
|
||||
import {defaultState} from 'elix/src/base/internal.js';
|
||||
import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
|
||||
import {internal} from 'elix';
|
||||
import 'elix/define/NumberSpinBox.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
img {
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
position: relative;
|
||||
}
|
||||
span {
|
||||
bottom: 1px;
|
||||
right: -4px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<img src="./images/logo.svg" alt="icon" width="12" height="12" />
|
||||
<span id="label">label</span>
|
||||
<elix-number-spin-box min="1" step="1"></elix-number-spin-box>
|
||||
`;
|
||||
|
||||
/**
|
||||
* @class SeSpinInput
|
||||
* @class SESpinInput
|
||||
*/
|
||||
class SeSpinInput extends NumberSpinBox {
|
||||
export class SESpinInput extends HTMLElement {
|
||||
/**
|
||||
* @function get
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [defaultState] () {
|
||||
return Object.assign(super[defaultState], {
|
||||
label: '',
|
||||
src: '',
|
||||
value: '',
|
||||
min: 1,
|
||||
step: 1
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [internal.template] () {
|
||||
const result = super[internal.template];
|
||||
result.content.prepend(fragmentFrom.html`
|
||||
<label style="display:none;">
|
||||
<span class="icon_label">
|
||||
<img src="./images/logo.svg" alt="icon" width="18" height="18" />
|
||||
</span>
|
||||
</label>`.cloneNode(true));
|
||||
// change the style so it fits in our toolbar
|
||||
result.content.append(
|
||||
templateFrom.html`
|
||||
<style>
|
||||
:host {
|
||||
float:left;
|
||||
line-height: normal;
|
||||
margin-top: 5px;
|
||||
height: 23px;
|
||||
}
|
||||
</style>
|
||||
`.content
|
||||
);
|
||||
return result;
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
// locate the component
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
this.$label = this.shadowRoot.getElementById('label');
|
||||
this.$event = new CustomEvent('change');
|
||||
this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['value', 'class', 'label', 'src', 'min', 'max', 'step'];
|
||||
return ['value', 'label', 'src', 'size'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
|
|
@ -65,84 +58,134 @@ class SeSpinInput extends NumberSpinBox {
|
|||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
console.log({this: this, name, oldValue, newValue});
|
||||
switch (name) {
|
||||
case 'label':
|
||||
this.label = newValue;
|
||||
break;
|
||||
case 'src':
|
||||
this.src = newValue;
|
||||
this.$img.setAttribute('src', newValue);
|
||||
this.$label.remove();
|
||||
break;
|
||||
case 'size':
|
||||
this.$input.setAttribute('size', newValue);
|
||||
break;
|
||||
case 'step':
|
||||
this.$input.setAttribute('step', newValue);
|
||||
break;
|
||||
case 'min':
|
||||
this.$input.setAttribute('min', newValue);
|
||||
break;
|
||||
case 'max':
|
||||
this.$input.setAttribute('max', newValue);
|
||||
break;
|
||||
case 'label':
|
||||
this.$label.textContent = newValue;
|
||||
this.$img.remove();
|
||||
break;
|
||||
case 'value':
|
||||
this.$input.value = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function [internal.render]
|
||||
* @param {PlainObject} changed
|
||||
* @returns {void}
|
||||
*/
|
||||
[internal.render] (changed) {
|
||||
super[internal.render](changed);
|
||||
if (this[internal.firstRender]) {
|
||||
this.$input = this.shadowRoot.getElementById('input');
|
||||
this.$label = this.shadowRoot.querySelector('label');
|
||||
this.$img = this.shadowRoot.querySelector('img');
|
||||
this.$span = this.shadowRoot.querySelector('span');
|
||||
this.$event = new CustomEvent('change');
|
||||
this.addEventListener('change', (e) => {
|
||||
e.preventDefault();
|
||||
this.value = e.target.value;
|
||||
});
|
||||
}
|
||||
if (changed.src) {
|
||||
if (this[internal.state].src !== '') {
|
||||
this.$img.src = this[internal.state].src;
|
||||
this.$img.style.display = 'block';
|
||||
this.$label.style.display = 'block';
|
||||
}
|
||||
}
|
||||
if (changed.label) {
|
||||
if (this[internal.state].label !== '') {
|
||||
this.$span.prepend(this[internal.state].label);
|
||||
this.$img.style.display = 'none';
|
||||
this.$label.style.display = 'block';
|
||||
}
|
||||
}
|
||||
if (changed.value) {
|
||||
this.dispatchEvent(this.$event);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function src
|
||||
* @returns {string} src
|
||||
*/
|
||||
get src () {
|
||||
return this[internal.state].src;
|
||||
}
|
||||
/**
|
||||
* @function src
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (src) {
|
||||
this[internal.setState]({src});
|
||||
}
|
||||
/**
|
||||
* @function label
|
||||
* @returns {string} label
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get label () {
|
||||
return this[internal.state].label;
|
||||
return this.getAttribute('label');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function label
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set label (label) {
|
||||
this[internal.setState]({label});
|
||||
set label (value) {
|
||||
this.setAttribute('label', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get value () {
|
||||
return this.$input.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set value (value) {
|
||||
this.$input.value = value;
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get src () {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get size () {
|
||||
return this.getAttribute('size');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set size (value) {
|
||||
this.setAttribute('size', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.addEventListener('change', (e) => {
|
||||
e.preventDefault();
|
||||
this.value = e.target.value;
|
||||
});
|
||||
this.dispatchEvent(this.$event);
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-spin-input', SeSpinInput);
|
||||
customElements.define('se-spin-input', SESpinInput);
|
||||
|
||||
/* TO DO
|
||||
Call back for fontsize
|
||||
function stepFontSize (elem, step) {
|
||||
const origVal = Number(elem.value);
|
||||
const sugVal = origVal + step;
|
||||
const increasing = sugVal >= origVal;
|
||||
if (step === 0) { return origVal; }
|
||||
|
||||
if (origVal >= 24) {
|
||||
if (increasing) {
|
||||
return Math.round(origVal * 1.1);
|
||||
}
|
||||
return Math.round(origVal / 1.1);
|
||||
}
|
||||
if (origVal <= 1) {
|
||||
if (increasing) {
|
||||
return origVal * 2;
|
||||
}
|
||||
return origVal / 2;
|
||||
}
|
||||
return sugVal;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -147,10 +147,10 @@
|
|||
<se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
|
||||
<se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
|
||||
<div class="tool_sep"></div>
|
||||
<se-input id="elem_id" data-attr="id" inputsize="100px" type="text" label="id:" title="Identify the element"></se-input>
|
||||
<se-input id="elem_class" data-attr="class" inputsize="100px" type="text" label="class:" title="Element class"></se-input>
|
||||
<se-input id="elem_id" data-attr="id" size="10" label="id:" title="Identify the element"></se-input>
|
||||
<se-input id="elem_class" data-attr="class" size="10" label="class:" title="Element class"></se-input>
|
||||
</div>
|
||||
<se-spin-input id="angle" min=-180 max=180 step=5 value="0" src="./images/angle.svg" title="Change rotation angle"></se-spin-input>
|
||||
<se-spin-input id="angle" min=-180 max=180 step=5 src="./images/angle.svg" title="Change rotation angle"></se-spin-input>
|
||||
<div class="toolset" id="tool_blur" title="Change gaussian blur value">
|
||||
<label>
|
||||
<span id="blurLabel" class="icon_label"></span>
|
||||
|
|
@ -170,8 +170,8 @@
|
|||
<button></button>
|
||||
</div>
|
||||
<div id="xy_panel" class="toolset">
|
||||
<se-input id="selected_x" data-attr="x" inputsize="41px" type="text" label="x:" title="Change X coordinate"></se-input>
|
||||
<se-input id="selected_y" data-attr="y" inputsize="41px" type="text" label="y:" title="Change Y coordinate"></se-input>
|
||||
<se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate"></se-input>
|
||||
<se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate"></se-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Buttons when multiple elements are selected -->
|
||||
|
|
@ -201,15 +201,15 @@
|
|||
</div>
|
||||
<div id="rect_panel">
|
||||
<div class="toolset">
|
||||
<se-input id="rect_width" data-attr="width" inputsize="41px" type="text" src="./images/width.svg" title="Change rectangle width"></se-input>
|
||||
<se-input id="rect_height" data-attr="height" inputsize="41px" type="text" src="./images/height.svg" title="Change rectangle height"></se-input>
|
||||
<se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg" title="Change rectangle width"></se-input>
|
||||
<se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg" title="Change rectangle height"></se-input>
|
||||
</div>
|
||||
<se-spin-input id="rect_rx" min=0 max=1000 step=1 value="0" title="Change Rectangle Corner Radius" data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
|
||||
<se-spin-input id="rect_rx" min=0 max=1000 step=1 title="Change Rectangle Corner Radius" data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
|
||||
</div>
|
||||
<div id="image_panel">
|
||||
<div class="toolset">
|
||||
<se-input id="image_width" data-attr="width" inputsize="41px" type="text" src="./images/width.svg" title="Change image width"></se-input>
|
||||
<se-input id="image_height" data-attr="height" inputsize="41px" type="text" src="./images/height.svg" title="Change image height"></se-input>
|
||||
<se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg" title="Change image width"></se-input>
|
||||
<se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg" title="Change image height"></se-input>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_image_url">url:
|
||||
|
|
@ -224,31 +224,31 @@
|
|||
</div>
|
||||
<div id="circle_panel">
|
||||
<div class="toolset">
|
||||
<se-input id="circle_cx" data-attr="cx" inputsize="41px" type="text" label="cx:"></se-input>
|
||||
<se-input id="circle_cy" data-attr="cy" inputsize="41px" type="text" label="cy:"></se-input>
|
||||
<se-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-input>
|
||||
<se-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-input>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<se-input id="circle_r" data-attr="r" inputsize="41px" type="text" label="r:"></se-input>
|
||||
<se-input id="circle_r" data-attr="r" size="4" label="r:"></se-input>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ellipse_panel">
|
||||
<div class="toolset">
|
||||
<se-input id="ellipse_cx" data-attr="cx" inputsize="41px" title="Change ellipse's cx coordinate" type="text" label="cx:"></se-input>
|
||||
<se-input id="ellipse_cy" data-attr="cy" inputsize="41px" title="Change ellipse's cy coordinate" type="text" label="cy:"></se-input>
|
||||
<se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:"></se-input>
|
||||
<se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:"></se-input>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<se-input id="ellipse_rx" data-attr="rx" inputsize="41px" title="Change ellipse's x radius" type="text" label="rx:"></se-input>
|
||||
<se-input id="ellipse_ry" data-attr="ry" inputsize="41px" title="Change ellipse's y radius" type="text" label="ry:"></se-input>
|
||||
<se-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
|
||||
<se-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-input>
|
||||
</div>
|
||||
</div>
|
||||
<div id="line_panel">
|
||||
<div class="toolset">
|
||||
<se-input id="line_x1" data-attr="x1" inputsize="41px" title="Change line's starting x coordinate" type="text" label="x1:"></se-input>
|
||||
<se-input id="line_y1" data-attr="y1" inputsize="41px" title="Change line's starting y coordinate" type="text" label="y1:"></se-input>
|
||||
<se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:"></se-input>
|
||||
<se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:"></se-input>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<se-input id="line_x2" data-attr="x2" inputsize="41px" title="Change line's ending x coordinate" type="text" label="x2:"></se-input>
|
||||
<se-input id="line_y2" data-attr="y2" inputsize="41px" title="Change line's ending y coordinate" type="text" label="y2:"></se-input>
|
||||
<se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:"></se-input>
|
||||
<se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:"></se-input>
|
||||
</div>
|
||||
</div>
|
||||
<div id="text_panel">
|
||||
|
|
@ -275,7 +275,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<se-spin-input id="font_size" min=1 max=1000 step=1 value="0" title="Change Font Size" src="./images/fontsize.svg"></se-spin-input>
|
||||
<se-spin-input id="font_size" min=1 max=1000 step=1 title="Change Font Size" src="./images/fontsize.svg"></se-spin-input>
|
||||
<!-- Not visible, but still used -->
|
||||
<input id="text" type="text" size="35" />
|
||||
</div>
|
||||
|
|
@ -305,8 +305,8 @@
|
|||
<div class="tool_sep"></div>
|
||||
<div id="tool_node_link" class="tool_button push_button_pressed" title="Link Control Points"></div>
|
||||
<div class="tool_sep"></div>
|
||||
<se-input id="path_node_x" data-attr="x" inputsize="41px" title="Change node's x coordinate" type="text" label="x:"></se-input>
|
||||
<se-input id="path_node_y" data-attr="y" inputsize="41px" title="Change node's y coordinate" type="text" label="y:"></se-input>
|
||||
<se-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-input>
|
||||
<se-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-input>
|
||||
<select id="seg_type" title="Change Segment type">
|
||||
<option id="straight_segments" selected="selected" value="4">Straight</option>
|
||||
<option id="curve_segments" value="6">Curve</option>
|
||||
|
|
@ -375,7 +375,7 @@
|
|||
<div id="stroke_bg"></div>
|
||||
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
|
||||
</div>
|
||||
<se-spin-input id="stroke_width" min=0 max=99 step=0.1 value="5" title="Change stroke width by 1, shift-click to change by 0.1"></se-spin-input>
|
||||
<se-spin-input id="stroke_width" min=0 max=99 step=0.1 title="Change stroke width by 1, shift-click to change by 0.1"></se-spin-input>
|
||||
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
|
||||
<label class="stroke_tool">
|
||||
<select id="stroke_style" title="Change stroke dash style">
|
||||
|
|
|
|||
|
|
@ -526,10 +526,6 @@ div.palette_item:first-child {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#tools_top > div, #tools_top {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
div.toolset,
|
||||
div.toolset > * {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -1001,8 +1001,6 @@ editor.init = () => {
|
|||
|
||||
ungroup: 'shape_ungroup.png',
|
||||
unlink_use: 'unlink_use.png',
|
||||
width: 'width.png',
|
||||
height: 'height.png',
|
||||
c_radius: 'c_radius.png',
|
||||
angle: 'angle.png',
|
||||
blur: 'blur.png',
|
||||
|
|
@ -4773,30 +4771,6 @@ editor.init = () => {
|
|||
|
||||
$(window).bind('load resize', centerCanvas);
|
||||
|
||||
/**
|
||||
* @type {module:jQuerySpinButton.StepCallback}
|
||||
*/
|
||||
function stepFontSize (elem, step) {
|
||||
const origVal = Number(elem.value);
|
||||
const sugVal = origVal + step;
|
||||
const increasing = sugVal >= origVal;
|
||||
if (step === 0) { return origVal; }
|
||||
|
||||
if (origVal >= 24) {
|
||||
if (increasing) {
|
||||
return Math.round(origVal * 1.1);
|
||||
}
|
||||
return Math.round(origVal / 1.1);
|
||||
}
|
||||
if (origVal <= 1) {
|
||||
if (increasing) {
|
||||
return origVal * 2;
|
||||
}
|
||||
return origVal / 2;
|
||||
}
|
||||
return sugVal;
|
||||
}
|
||||
|
||||
// function setResolution (w, h, center) {
|
||||
// updateCanvas();
|
||||
// // w -= 0; h -= 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue