Merge pull request #12 from OptimistikSAS/se-input
#se-input input element webcomponent create partially didmaster
JFH
GitHub
commit
fc631d21db
|
|
@ -2,3 +2,4 @@ import './seButton.js';
|
|||
import './seFlyingButton.js';
|
||||
import './seExplorerButton.js';
|
||||
import './seDropdown.js';
|
||||
import './seInput.js';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
/* 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';
|
||||
|
||||
/**
|
||||
* @class SeInput
|
||||
*/
|
||||
class SeInput extends Input {
|
||||
/**
|
||||
* @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 observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['value', 'class', 'inputsize', 'label', 'src'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
* @param {string} oldValue
|
||||
* @param {string} newValue
|
||||
* @returns {void}
|
||||
*/
|
||||
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;
|
||||
break;
|
||||
case 'inputsize':
|
||||
this.inputsize = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
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
|
||||
*/
|
||||
get label () {
|
||||
return this[internal.state].label;
|
||||
}
|
||||
/**
|
||||
* @function label
|
||||
* @returns {void}
|
||||
*/
|
||||
set label (label) {
|
||||
this[internal.setState]({label});
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-input', SeInput);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<path transform="rotate(90, 50, 50)" fill="#000000" stroke="#000000" stroke-width="8" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" id="svg_6"/>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 402 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<path id="svg_6" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" stroke-width="8" stroke="#000000" fill="#000000"/>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 371 B |
|
|
@ -147,14 +147,8 @@
|
|||
<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>
|
||||
<label id="idLabel" title="Identify the element">
|
||||
<span>id:</span>
|
||||
<input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text" />
|
||||
</label>
|
||||
<label id="classLabel" title="Element class">
|
||||
<span>class:</span>
|
||||
<input id="elem_class" class="attr_changer" data-attr="class" size="10" type="text" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
<label id="tool_angle" title="Change rotation angle" class="toolset">
|
||||
<span id="angleLabel" class="icon_label"></span>
|
||||
|
|
@ -179,12 +173,8 @@
|
|||
<button></button>
|
||||
</div>
|
||||
<div id="xy_panel" class="toolset">
|
||||
<label>
|
||||
x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x" />
|
||||
</label>
|
||||
<label>
|
||||
y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Buttons when multiple elements are selected -->
|
||||
|
|
@ -214,14 +204,8 @@
|
|||
</div>
|
||||
<div id="rect_panel">
|
||||
<div class="toolset">
|
||||
<label id="rect_width_tool" title="Change rectangle width">
|
||||
<span id="rwidthLabel" class="icon_label"></span>
|
||||
<input id="rect_width" class="attr_changer" size="3" data-attr="width" />
|
||||
</label>
|
||||
<label id="rect_height_tool" title="Change rectangle height">
|
||||
<span id="rheightLabel" class="icon_label"></span>
|
||||
<input id="rect_height" class="attr_changer" size="3" data-attr="height" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
<label id="cornerRadiusLabel" class="toolset" title="Change Rectangle Corner Radius">
|
||||
<span class="icon_label"></span>
|
||||
|
|
@ -230,12 +214,8 @@
|
|||
</div>
|
||||
<div id="image_panel">
|
||||
<div class="toolset">
|
||||
<label><span id="iwidthLabel" class="icon_label"></span>
|
||||
<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width" />
|
||||
</label>
|
||||
<label><span id="iheightLabel" class="icon_label"></span>
|
||||
<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_image_url">url:
|
||||
|
|
@ -250,61 +230,31 @@
|
|||
</div>
|
||||
<div id="circle_panel">
|
||||
<div class="toolset">
|
||||
<label id="tool_circle_cx">cx:
|
||||
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3"
|
||||
data-attr="cx" />
|
||||
</label>
|
||||
<label id="tool_circle_cy">cy:
|
||||
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3"
|
||||
data-attr="cy" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_circle_r">r:
|
||||
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r" />
|
||||
</label>
|
||||
<se-input id="circle_r" data-attr="r" inputsize="41px" type="text" label="r:"></se-input>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ellipse_panel">
|
||||
<div class="toolset">
|
||||
<label id="tool_ellipse_cx">cx:
|
||||
<input id="ellipse_cx" class="attr_changer" title="Change ellipse's cx coordinate" size="3"
|
||||
data-attr="cx" />
|
||||
</label>
|
||||
<label id="tool_ellipse_cy">cy:
|
||||
<input id="ellipse_cy" class="attr_changer" title="Change ellipse's cy coordinate" size="3"
|
||||
data-attr="cy" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_ellipse_rx">rx:
|
||||
<input id="ellipse_rx" class="attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx" />
|
||||
</label>
|
||||
<label id="tool_ellipse_ry">ry:
|
||||
<input id="ellipse_ry" class="attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="line_panel">
|
||||
<div class="toolset">
|
||||
<label id="tool_line_x1">x1:
|
||||
<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3"
|
||||
data-attr="x1" />
|
||||
</label>
|
||||
<label id="tool_line_y1">y1:
|
||||
<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3"
|
||||
data-attr="y1" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_line_x2">x2:
|
||||
<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3"
|
||||
data-attr="x2" />
|
||||
</label>
|
||||
<label id="tool_line_y2">y2:
|
||||
<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3"
|
||||
data-attr="y2" />
|
||||
</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="text_panel">
|
||||
|
|
@ -364,12 +314,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>
|
||||
<label id="tool_node_x">x:
|
||||
<input id="path_node_x" class="attr_changer" title="Change node's x coordinate" size="3" data-attr="x" />
|
||||
</label>
|
||||
<label id="tool_node_y">y:
|
||||
<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y" />
|
||||
</label>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1072,8 +1072,6 @@ editor.init = () => {
|
|||
'#tool_source_save,#tool_docprops_save,#tool_prefs_save': 'ok',
|
||||
'#tool_source_cancel,#tool_docprops_cancel,#tool_prefs_cancel': 'cancel',
|
||||
|
||||
'#rwidthLabel, #iwidthLabel': 'width',
|
||||
'#rheightLabel, #iheightLabel': 'height',
|
||||
'#cornerRadiusLabel span': 'c_radius',
|
||||
'#angleLabel': 'angle',
|
||||
'#linkLabel,#tool_make_link_multi': 'globe_link',
|
||||
|
|
@ -1888,8 +1886,8 @@ editor.init = () => {
|
|||
const opacPerc = (selectedElement.getAttribute('opacity') || 1.0) * 100;
|
||||
$('#group_opacity').val(opacPerc);
|
||||
$('#opac_slider').slider('option', 'value', opacPerc);
|
||||
$('#elem_id').val(selectedElement.id);
|
||||
$('#elem_class').val(selectedElement.getAttribute('class'));
|
||||
$id('elem_id').value = selectedElement.id;
|
||||
$id('elem_class').value = (selectedElement.getAttribute('class') !== null) ? selectedElement.getAttribute('class') : '';
|
||||
}
|
||||
|
||||
updateToolButtonState();
|
||||
|
|
@ -3047,6 +3045,45 @@ editor.init = () => {
|
|||
svgCanvas.setGroupTitle(this.value);
|
||||
});
|
||||
|
||||
const attrChanger = function (e) {
|
||||
const attr = e.target.getAttribute('data-attr');
|
||||
let val = e.target.value;
|
||||
const valid = isValidUnit(attr, val, selectedElement);
|
||||
|
||||
if (!valid) {
|
||||
e.target.value = selectedElement.getAttribute(attr);
|
||||
/* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (attr !== 'id' && attr !== 'class') {
|
||||
if (isNaN(val)) {
|
||||
val = svgCanvas.convertToNum(attr, val);
|
||||
} else if (curConfig.baseUnit !== 'px') {
|
||||
// Convert unitless value to one with given unit
|
||||
|
||||
const unitData = getTypeMap();
|
||||
|
||||
if (selectedElement[attr] || svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
|
||||
val *= unitData[curConfig.baseUnit];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if the user is changing the id, then de-select the element first
|
||||
// change the ID, then re-select it with the new ID
|
||||
if (attr === 'id') {
|
||||
const elem = selectedElement;
|
||||
svgCanvas.clearSelection();
|
||||
elem.id = val;
|
||||
svgCanvas.addToSelection([elem], true);
|
||||
} else {
|
||||
svgCanvas.changeSelectedAttribute(attr, val);
|
||||
}
|
||||
// e.target.blur();
|
||||
return true;
|
||||
};
|
||||
|
||||
$('.attr_changer').change(function () {
|
||||
const attr = this.getAttribute('data-attr');
|
||||
let val = this.value;
|
||||
|
|
@ -4860,6 +4897,27 @@ editor.init = () => {
|
|||
|
||||
// register actions for bottom panel
|
||||
$id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.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));
|
||||
$id('circle_cy').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('circle_r').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('ellipse_cx').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('ellipse_cy').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('ellipse_rx').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('ellipse_ry').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('selected_x').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('selected_y').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('rect_width').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('rect_height').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('line_x1').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('line_y1').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('line_x2').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('line_y2').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('image_width').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('image_height').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('path_node_x').addEventListener('change', (e) => attrChanger(e));
|
||||
$id('path_node_y').addEventListener('change', (e) => attrChanger(e));
|
||||
|
||||
// register actions for layer toolbar
|
||||
$id('layer_new').addEventListener('click', newLayer);
|
||||
|
|
|
|||
Loading…
Reference in New Issue