zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #650 from SVG-Edit/issues/631_2 

#631 normal select change to se-select web component
master
JFH 2021-09-25 15:54:16 +02:00 committed by GitHub
parent 63fe9f2d34 7e8136722e
commit 7ef8cb5da2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/editor/EditorStartup.js
View File

@ -217,7 +217,7 @@ class EditorStartup {
// fired when user wants to move elements to another layer
let promptMoveLayerOnce = false;
$id('selLayerNames').addEventListener('change', (evt) => {
const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
const destLayer = evt.detail.value;
const confirmStr = this.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer);
/**
* @param {boolean} ok

56
src/editor/components/seSelect.js
View File

@ -42,7 +42,7 @@ export class SeSelect extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return [ 'label', 'width', 'height', 'options', 'values', 'title' ];
return [ 'label', 'width', 'height', 'options', 'values', 'title', 'disabled' ];
}
/**
@ -62,6 +62,13 @@ export class SeSelect extends HTMLElement {
case 'title':
this.$select.setAttribute("title", t(newValue));
break;
case 'disabled':
if(newValue === null) {
this.$select.removeAttribute("disabled");
} else {
this.$select.setAttribute("disabled", newValue);
}
break;
case 'height':
this.$select.style.height = newValue;
break;
@ -69,19 +76,29 @@ export class SeSelect extends HTMLElement {
this.$select.style.width = newValue;
break;
case 'options':
options = newValue.split(',');
options.forEach((option) => {
const optionNode = document.createElement("OPTION");
const text = document.createTextNode(t(option));
optionNode.appendChild(text);
this.$select.appendChild(optionNode);
});
if(newValue === "") {
while(this.$select.firstChild)
this.$select.removeChild(this.$select.firstChild);
} else {
options = newValue.split(',');
options.forEach((option) => {
const optionNode = document.createElement("OPTION");
const text = document.createTextNode(t(option));
optionNode.appendChild(text);
this.$select.appendChild(optionNode);
});
}
break;
case 'values':
options = newValue.split(' ');
options.forEach((option, index) => {
this.$select.children[index].setAttribute('value', option);
});
if(newValue === "") {
while(this.$select.firstChild)
this.$select.removeChild(this.$select.firstChild);
} else {
options = newValue.split('::');
options.forEach((option, index) => {
this.$select.children[index].setAttribute('value', option);
});
}
break;
default:
// eslint-disable-next-line no-console
@ -149,6 +166,21 @@ export class SeSelect extends HTMLElement {
set value (value) {
this.$select.value = value;
}
/**
* @function get
* @returns {any}
*/
get disabled () {
return this.$select.getAttribute('disabled');
}
/**
* @function set
* @returns {void}
*/
set disabled (value) {
this.$select.setAttribute('disabled', value);
}
/**
* @function connectedCallback
* @returns {void}

2
src/editor/panels/BottomPanel.js
View File

@ -186,7 +186,7 @@ class BottomPanel {
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
<se-select id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px"
options="&#8212;,...,- -,- .,- .."
values="none 2,2 5,5 5,2,2,2 5,2,2,2,2,2">
values="none::2,2::5,5::5,2,2,2::5,2,2,2,2,2">
</se-select>
<se-list id="stroke_linejoin" title="properties.linejoin_miter" label="" width="22px" height="22px">
<se-list-item id="linejoin_miter" value="miter" src="linejoin_miter.svg" title="properties.linejoin_miter" img-height="22px"></se-list-item>

21
src/editor/panels/LayersPanel.js
View File

@ -67,10 +67,9 @@ class LayersPanel {
<td class="layername">Layer 1</td>
</tr>
</table>
<se-text id="selLayerLabel" text="layers.move_elems_to"></se-text>
<select id="selLayerNames" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
<se-select id="selLayerNames" title="layers.move_selected" label="layers.move_elems_to" options="Layer 1"
values="layer1" value="layer1" disabled="disabled">
</se-select>
</div>
</div>
</div>
@ -89,7 +88,6 @@ class LayersPanel {
menuLayerBox.setAttribute("leftclick", false);
this.editor.$container.append(menuLayerBox);
menuLayerBox.init(i18next);
$id("selLayerNames").setAttribute("title", i18next.t('layers.move_selected'));
$id("layer_new").addEventListener("click", this.newLayer.bind(this));
$id("layer_delete").addEventListener("click", this.deleteLayer.bind(this));
$id("layer_up").addEventListener("click", () => this.moveLayer.bind(this)(-1));
@ -279,14 +277,13 @@ class LayersPanel {
while(layerlist.firstChild)
layerlist.removeChild(layerlist.firstChild);
const selLayerNames = $id("selLayerNames");
// empty() ref: http://youmightnotneedjquery.com/#empty
while(selLayerNames.firstChild)
selLayerNames.removeChild(selLayerNames.firstChild);
$id("selLayerNames").setAttribute("options", "");
const drawing = this.editor.svgCanvas.getCurrentDrawing();
const currentLayerName = drawing.getCurrentLayerName();
let layer = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
let values = "";
let text = "";
while (layer--) {
const name = drawing.getLayerName(layer);
const layerTr = document.createElement("tr");
@ -299,9 +296,11 @@ class LayersPanel {
layerTr.appendChild(layerVis);
layerTr.appendChild(layerName);
layerlist.appendChild(layerTr);
// eslint-disable-next-line no-unsanitized/property
selLayerNames.innerHTML += '<option value="' + name + '">' + name + '</option>';
values = (values) ? values + "::" + name : name;
text = (text) ? text + "," + name : name;
}
$id("selLayerNames").setAttribute("options", text);
$id("selLayerNames").setAttribute("values", values);
// handle selection of layer
const nelements = $id('layerlist').querySelectorAll("td.layername");
Array.from(nelements).forEach(function(element) {

9
src/editor/panels/TopPanel.js
View File

@ -427,6 +427,7 @@ class TopPanel {
// update the selected elements' layer
$id("selLayerNames").removeAttribute("disabled");
$id("selLayerNames").value = currentLayerName;
$id("selLayerNames").setAttribute("value", currentLayerName);
// Enable regular menu options
const canCMenu = document.getElementById("se-cmenu_canvas");
@ -435,7 +436,7 @@ class TopPanel {
"#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back"
);
} else {
$id("selLayerNames").disabled = "disabled";
$id("selLayerNames").setAttribute("disabled", "disabled");
}
}
/**
@ -897,7 +898,7 @@ class TopPanel {
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
<se-select id="tool_align_relative" label="tools.relativeTo"
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
values="selected largest smallest page"></se-list-item>
values="selected::largest::smallest::page"></se-list-item>
</se-select>
</div> <!-- multiselected_panel -->
<div class="rect_panel">
@ -936,7 +937,7 @@ class TopPanel {
<div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
<se-select id="tool_font_family" label="properties.font_family_label" options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times" values="Serif Sans-serif Cursive Fantasy Monospace Courier Helvetica Times"></select>
<se-select id="tool_font_family" label="properties.font_family_label" options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times" values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></select>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size" src="fontsize.svg"></se-spin-input>
</div>
<div class="text_panel">
@ -969,7 +970,7 @@ class TopPanel {
<div class="tool_sep"></div>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label"></se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label"></se-spin-input>
<se-select id="seg_type" title="properties.seg_type" label="" options="properties.straight_segments,properties.curve_segments" values="4 6"></se-select>
<se-select id="seg_type" title="properties.seg_type" label="" options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
<se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>