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

#631 web component i18n implement new approach

master
agriyadev5 2021-08-30 19:16:08 +05:30
parent 8e158eea64
commit 7fc2c93693
15 changed files with 141 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/editor/components/seButton.js
View File

@ -1,3 +1,4 @@
import { t } from '../locale.js';
const template = document.createElement('template'); const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
template.innerHTML = ` template.innerHTML = `
@ -75,7 +76,7 @@ export class ToolButton extends HTMLElement {
case 'title': case 'title':
{ {
const shortcut = this.getAttribute('shortcut'); const shortcut = this.getAttribute('shortcut');
this.$div.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`); this.$div.setAttribute('title', `${t(newValue)} ${shortcut ? `[${t(shortcut)}]` : ''}`);
} }
break; break;
case 'style': case 'style':

3
src/editor/components/seFlyingButton.js
View File

@ -1,3 +1,4 @@
import { t } from '../locale.js';
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
@ -120,7 +121,7 @@ export class FlyingButton extends HTMLElement {
case 'title': case 'title':
{ {
const shortcut = this.getAttribute('shortcut'); const shortcut = this.getAttribute('shortcut');
this.$button.setAttribute('title', `${newValue} [${shortcut}]`); this.$button.setAttribute('title', `${t(newValue)} ${shortcut ? `[${t(shortcut)}]` : ''}`);
} }
break; break;
case 'pressed': case 'pressed':

24
src/editor/components/seInput.js
View File

@ -1,4 +1,5 @@
import 'elix/define/Input.js'; import 'elix/define/Input.js';
import { t } from '../locale.js';
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
@ -45,6 +46,7 @@ export class SEInput extends HTMLElement {
this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true)); this._shadowRoot.append(template.content.cloneNode(true));
// locate the component // locate the component
this.$div = this._shadowRoot.querySelector('div');
this.$img = this._shadowRoot.querySelector('img'); this.$img = this._shadowRoot.querySelector('img');
this.$label = this.shadowRoot.getElementById('label'); this.$label = this.shadowRoot.getElementById('label');
this.$event = new CustomEvent('change'); this.$event = new CustomEvent('change');
@ -55,7 +57,7 @@ export class SEInput extends HTMLElement {
* @returns {any} observed * @returns {any} observed
*/ */
static get observedAttributes () { static get observedAttributes () {
return [ 'value', 'label', 'src', 'size' ]; return [ 'value', 'label', 'src', 'size', 'title' ];
} }
/** /**
* @function attributeChangedCallback * @function attributeChangedCallback
@ -67,6 +69,9 @@ export class SEInput extends HTMLElement {
attributeChangedCallback (name, oldValue, newValue) { attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'title':
this.$div.setAttribute('title', `${t(newValue)}`);
break;
case 'src': case 'src':
this.$img.setAttribute('src', newValue); this.$img.setAttribute('src', newValue);
this.$label.remove(); this.$label.remove();
@ -75,7 +80,7 @@ export class SEInput extends HTMLElement {
this.$input.setAttribute('size', newValue); this.$input.setAttribute('size', newValue);
break; break;
case 'label': case 'label':
this.$label.textContent = newValue; this.$label.textContent = t(newValue);
this.$img.remove(); this.$img.remove();
break; break;
case 'value': case 'value':
@ -87,6 +92,21 @@ export class SEInput extends HTMLElement {
break; break;
} }
} }
/**
* @function get
* @returns {any}
*/
get title () {
return this.getAttribute('title');
}
/**
* @function set
* @returns {void}
*/
set title (value) {
this.setAttribute('title', value);
}
/** /**
* @function get * @function get
* @returns {any} * @returns {any}

3
src/editor/components/seList.js
View File

@ -1,4 +1,5 @@
import 'elix/define/DropdownList.js'; import 'elix/define/DropdownList.js';
import { t } from '../locale.js';
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
@ -59,7 +60,7 @@ export class SeList extends HTMLElement {
if (oldValue === newValue) return; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'label': case 'label':
this.$label.textContent = newValue; this.$label.textContent = t(newValue);
break; break;
case 'height': case 'height':
this.$dropdown.style.height = newValue; this.$dropdown.style.height = newValue;

26
src/editor/components/seSpinInput.js
View File

@ -1,4 +1,5 @@
import '../dialogs/se-elix/define/NumberSpinBox.js'; import '../dialogs/se-elix/define/NumberSpinBox.js';
import { t } from '../locale.js';
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
@ -72,7 +73,7 @@ export class SESpinInput extends HTMLElement {
* @returns {any} observed * @returns {any} observed
*/ */
static get observedAttributes () { static get observedAttributes () {
return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ]; return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step', 'title' ];
} }
/** /**
* @function attributeChangedCallback * @function attributeChangedCallback
@ -84,6 +85,12 @@ export class SESpinInput extends HTMLElement {
attributeChangedCallback (name, oldValue, newValue) { attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'title':
{
const shortcut = this.getAttribute('shortcut');
this.$div.setAttribute('title', `${t(newValue)} ${shortcut ? `[${t(shortcut)}]` : ''}`);
}
break;
case 'src': case 'src':
this.$img.setAttribute('src', newValue); this.$img.setAttribute('src', newValue);
this.$label.remove(); this.$label.remove();
@ -105,7 +112,7 @@ export class SESpinInput extends HTMLElement {
this.$input.setAttribute('max', newValue); this.$input.setAttribute('max', newValue);
break; break;
case 'label': case 'label':
this.$label.textContent = newValue; this.$label.textContent = t(newValue);
this.$img.remove(); this.$img.remove();
break; break;
case 'value': case 'value':
@ -117,6 +124,21 @@ export class SESpinInput extends HTMLElement {
break; break;
} }
} }
/**
* @function get
* @returns {any}
*/
get title () {
return this.getAttribute('title');
}
/**
* @function set
* @returns {void}
*/
set title (value) {
this.setAttribute('title', value);
}
/** /**
* @function get * @function get
* @returns {any} * @returns {any}

2
src/editor/extensions/ext-connector/ext-connector.js
View File

@ -354,7 +354,7 @@ export default {
return { return {
name: svgEditor.i18next.t(`${name}:name`), name: svgEditor.i18next.t(`${name}:name`),
callback() { callback() {
const btitle = svgEditor.i18next.t(`${name}:langListTitle`); const btitle = `${name}:langListTitle`;
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
const buttonTemplate = ` const buttonTemplate = `
<se-button id="mode_connect" title="${btitle}" src="${imgPath}/conn.svg"></se-button> <se-button id="mode_connect" title="${btitle}" src="${imgPath}/conn.svg"></se-button>

4
src/editor/extensions/ext-eyedropper/ext-eyedropper.js
View File

@ -83,8 +83,8 @@ export default {
name: svgEditor.i18next.t(`${name}:name`), name: svgEditor.i18next.t(`${name}:name`),
callback() { callback() {
// Add the button and its handler(s) // Add the button and its handler(s)
const title = svgEditor.i18next.t(`${name}:buttons.0.title`); const title = `${name}:buttons.0.title`;
const key = svgEditor.i18next.t(`${name}:buttons.0.key`); const key = `${name}:buttons.0.key`;
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
const buttonTemplate = ` const buttonTemplate = `
<se-button id="tool_eyedropper" title="${title}" src="${imgPath}/eye_dropper.svg" shortcut=${key}></se-button> <se-button id="tool_eyedropper" title="${title}" src="${imgPath}/eye_dropper.svg" shortcut=${key}></se-button>

2
src/editor/extensions/ext-grid/ext-grid.js
View File

@ -164,7 +164,7 @@ export default {
callback () { callback () {
// Add the button and its handler(s) // Add the button and its handler(s)
const buttonTemplate = document.createElement("template"); const buttonTemplate = document.createElement("template");
const title = svgEditor.i18next.t(`${name}:buttons.0.title`); const title = `${name}:buttons.0.title`;
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = ` buttonTemplate.innerHTML = `

2
src/editor/extensions/ext-helloworld/ext-helloworld.js
View File

@ -43,7 +43,7 @@ export default {
callback() { callback() {
// Add the button and its handler(s) // Add the button and its handler(s)
const buttonTemplate = document.createElement("template"); const buttonTemplate = document.createElement("template");
const title = svgEditor.i18next.t(`${name}:buttons.0.title`); const title = `${name}:buttons.0.title`;
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = ` buttonTemplate.innerHTML = `
<se-button id="hello_world" title="${title}" src="${imgPath}/hello_world.svg"></se-button> <se-button id="hello_world" title="${title}" src="${imgPath}/hello_world.svg"></se-button>

2
src/editor/extensions/ext-panning/ext-panning.js
View File

@ -46,7 +46,7 @@ export default {
return { return {
name: svgEditor.i18next.t(`${name}:name`), name: svgEditor.i18next.t(`${name}:name`),
callback() { callback() {
const btitle = svgEditor.i18next.t(`${name}:buttons.0.title`); const btitle = `${name}:buttons.0.title`;
// Add the button and its handler(s) // Add the button and its handler(s)
const buttonTemplate = document.createElement("template"); const buttonTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property

6
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@ -81,9 +81,9 @@ export default {
callback() { callback() {
// Add the button and its handler(s) // Add the button and its handler(s)
// Note: the star extension needs to be loaded before the polygon extension // Note: the star extension needs to be loaded before the polygon extension
const fbtitle = svgEditor.i18next.t(`${name}:title`); const fbtitle = `${name}:title`;
const title_star = svgEditor.i18next.t(`${name}:buttons.0.title`); const title_star = `${name}:buttons.0.title`;
const title_polygon = svgEditor.i18next.t(`${name}:buttons.1.title`); const title_polygon = `${name}:buttons.1.title`;
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
const buttonTemplate = ` const buttonTemplate = `
<se-flyingbutton id="tools_polygon" title="${fbtitle}"> <se-flyingbutton id="tools_polygon" title="${fbtitle}">

1
src/editor/locale/lang.en.js
View File

@ -70,6 +70,7 @@ export default {
straight_segments: 'Straight', straight_segments: 'Straight',
curve_segments: 'Curve', curve_segments: 'Curve',
text_contents: 'Change text contents', text_contents: 'Change text contents',
font_family_label: 'Font',
font_family: 'Change Font Family', font_family: 'Change Font Family',
font_size: 'Change Font Size', font_size: 'Change Font Size',
bold: 'Bold Text', bold: 'Bold Text',

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

@ -54,12 +54,12 @@ class LayersPanel {
<div id="layerpanel"> <div id="layerpanel">
<h3 id="layersLabel">${i18next.t('layers.layers')}</h3> <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
<fieldset id="layerbuttons"> <fieldset id="layerbuttons">
<se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button> <se-button id="layer_new" title="layers.new" size="small" src="${imgPath}/new.svg"></se-button>
<se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button> <se-button id="layer_delete" title="layers.del" size="small" src="${imgPath}/delete.svg"></se-button>
<se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button> <se-button id="layer_rename" title="layers.rename" size="small" src="${imgPath}/text.svg"></se-button>
<se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button> <se-button id="layer_up" title="layers.move_up" size="small" src="${imgPath}/go_up.svg"></se-button>
<se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button> <se-button id="layer_down" title="layers.move_down" size="small" src="${imgPath}/go_down.svg"></se-button>
<se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg"> <se-button id="layer_moreopts" title="common.more_opts" size="small" src="${imgPath}/context_menu.svg">
</se-button> </se-button>
</fieldset> </fieldset>
<table id="layerlist"> <table id="layerlist">

30
src/editor/panels/LeftPanel.js
View File

@ -201,47 +201,47 @@ class LeftPanel {
// add Left panel // add Left panel
const leftMenu = [ const leftMenu = [
{ {
menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="${imgPath}/select.svg"></se-button>`, menu: `<se-button id="tool_select" title="tools.mode_select" src="${imgPath}/select.svg"></se-button>`,
position: 1 position: 1
}, },
{ {
menu: `<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="${imgPath}/zoom.svg" shortcut="Z"></se-button>`, menu: `<se-button id="tool_zoom" title="tools.mode_zoom" src="${imgPath}/zoom.svg" shortcut="Z"></se-button>`,
position: 2 position: 2
}, },
{ {
menu: `<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="${imgPath}/pencil.svg" shortcut="Q"></se-button>`, menu: `<se-button id="tool_fhpath" title="tools.mode_fhpath" src="${imgPath}/pencil.svg" shortcut="Q"></se-button>`,
position: 3 position: 3
}, },
{ {
menu: `<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="${imgPath}/pen.svg" shortcut="L"></se-button>`, menu: `<se-button id="tool_line" title="tools.mode_line" src="${imgPath}/pen.svg" shortcut="L"></se-button>`,
position: 4 position: 4
}, },
{ {
menu: `<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="${imgPath}/path.svg" shortcut="P"></se-button>`, menu: `<se-button id="tool_path" title="tools.mode_path" src="${imgPath}/path.svg" shortcut="P"></se-button>`,
position: 5 position: 5
}, },
{ {
menu: `<se-flyingbutton id="tools_rect" title="${i18next.t('tools.square_rect_tool')}"> menu: `<se-flyingbutton id="tools_rect" title="tools.square_rect_tool">
<se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="${imgPath}/rect.svg" shortcut="R"></se-button> <se-button id="tool_rect" title="tools.mode_rect" src="${imgPath}/rect.svg" shortcut="R"></se-button>
<se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="${imgPath}/square.svg"></se-button> <se-button id="tool_square" title="tools.mode_square" src="${imgPath}/square.svg"></se-button>
<se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="${imgPath}/fh_rect.svg"></se-button> <se-button id="tool_fhrect" title="tools.mode_fhrect" src="${imgPath}/fh_rect.svg"></se-button>
</se-flyingbutton>`, </se-flyingbutton>`,
position: 6 position: 6
}, },
{ {
menu: `<se-flyingbutton id="tools_ellipse" title="${i18next.t('tools.ellipse_circle_tool')}"> menu: `<se-flyingbutton id="tools_ellipse" title="tools.ellipse_circle_tool">
<se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="${imgPath}/ellipse.svg" shortcut="E"></se-button> <se-button id="tool_ellipse" title="tools.mode_ellipse" src="${imgPath}/ellipse.svg" shortcut="E"></se-button>
<se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="${imgPath}/circle.svg"></se-button> <se-button id="tool_circle" title="tools.mode_circle" src="${imgPath}/circle.svg"></se-button>
<se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="${imgPath}/fh_ellipse.svg"></se-button> <se-button id="tool_fhellipse" title="tools.mode_fhellipse" src="${imgPath}/fh_ellipse.svg"></se-button>
</se-flyingbutton>`, </se-flyingbutton>`,
position: 7 position: 7
}, },
{ {
menu: `<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="${imgPath}/text.svg" shortcut="T"></se-button>`, menu: `<se-button id="tool_text" title="tools.mode_text" src="${imgPath}/text.svg" shortcut="T"></se-button>`,
position: 8 position: 8
}, },
{ {
menu: `<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="${imgPath}/image.svg"></se-button>`, menu: `<se-button id="tool_image" title="tools.mode_image" src="${imgPath}/image.svg"></se-button>`,
position: 11 position: 11
} }
]; ];

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

@ -833,49 +833,49 @@ class TopPanel {
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button <se-button
id="tool_source" id="tool_source"
title="${i18next.t('tools.tool_source')}" title="tools.tool_source"
shortcut="U" shortcut="U"
src="${imgPath}/source.svg" src="${imgPath}/source.svg"
></se-button> ></se-button>
<se-button <se-button
id="tool_wireframe" id="tool_wireframe"
title="${i18next.t('tools.wireframe_mode')}" title="tools.wireframe_mode"
shortcut="F" shortcut="F"
src="${imgPath}/wireframe.svg" src="${imgPath}/wireframe.svg"
></se-button> ></se-button>
</div> <!-- editor_panel --> </div> <!-- editor_panel -->
<div id="history_panel"> <div id="history_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_undo" title="${i18next.t('tools.undo')}" shortcut="Z" src="${imgPath}/undo.svg" disabled></se-button> <se-button id="tool_undo" title="tools.undo" shortcut="Z" src="${imgPath}/undo.svg" disabled></se-button>
<se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button> <se-button id="tool_redo" title="tools.redo" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button>
</div> <!-- history_panel --> </div> <!-- history_panel -->
<!-- Buttons when a single element is selected --> <!-- Buttons when a single element is selected -->
<div class="selected_panel"> <div class="selected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="${imgPath}/clone.svg"></se-button> <se-button id="tool_clone" title="tools.clone" shortcut="D" src="${imgPath}/clone.svg"></se-button>
<se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="${imgPath}/delete.svg"></se-button> <se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="${imgPath}/delete.svg"></se-button>
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg"></se-button> <se-button id="tool_move_top" title="tools.move_top" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg"></se-button>
<se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg"></se-button> <se-button id="tool_move_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg"></se-button>
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="${imgPath}/to_path.svg"></se-button> <se-button id="tool_topath" title="tools.to_path" src="${imgPath}/to_path.svg"></se-button>
<se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="${imgPath}/reorient.svg"></se-button> <se-button id="tool_reorient" title="tools.reorient_path" src="${imgPath}/reorient.svg"></se-button>
<se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button> <se-button id="tool_make_link" title="tools.make_link" src="${imgPath}/globe_link.svg"></se-button>
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-input id="elem_id" data-attr="id" size="10" label="id" title="${i18next.t('properties.id')}"></se-input> <se-input id="elem_id" data-attr="id" size="10" label="id" title="properties.id"></se-input>
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input> <se-input id="elem_class" data-attr="class" size="10" label="class" title="properties.class"></se-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg" <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
title="${i18next.t('properties.angle')}"></se-spin-input> title="properties.angle"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg" <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg"
title="${i18next.t('properties.blur')}"></se-spin-input> title="properties.blur"></se-spin-input>
<se-list id="tool_position" title="${i18next.t('tools.align_to_page')}" label="" width="22px" height="22px"> <se-list id="tool_position" title="tools.align_to_page" label="" width="22px" height="22px">
<se-list-item id="tool_posleft" value="l"> <se-list-item id="tool_posleft" value="l">
<img title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg" height="22px"> <img title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg" height="22px">
</se-list-item> </se-list-item>
@ -897,29 +897,29 @@ class TopPanel {
</se-list> </se-list>
</div> </div>
<div class="xy_panel"> <div class="xy_panel">
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="${i18next.t('properties.pos_x')}"> <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="properties.pos_x">
</se-spin-input> </se-spin-input>
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="${i18next.t('properties.pos_y')}"> <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="properties.pos_y">
</se-spin-input> </se-spin-input>
</div> </div>
<!-- Buttons when multiple elements are selected --> <!-- Buttons when multiple elements are selected -->
<div class="multiselected_panel"> <div class="multiselected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="${imgPath}/clone.svg"></se-button> <se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="${imgPath}/clone.svg"></se-button>
<se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" <se-button id="tool_delete_multi" title="tools.del" shortcut="Delete/Backspace"
src="${imgPath}/delete.svg"></se-button> src="${imgPath}/delete.svg"></se-button>
</div> </div>
<div class="multiselected_panel"> <div class="multiselected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="${imgPath}/group_elements.svg"> <se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="${imgPath}/group_elements.svg">
</se-button> </se-button>
<se-button id="tool_make_link_multi" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button> <se-button id="tool_make_link_multi" title="tools.make_link" src="${imgPath}/globe_link.svg"></se-button>
<se-button id="tool_align_left" title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg"></se-button> <se-button id="tool_align_left" title="tools.align_left" src="${imgPath}/align_left.svg"></se-button>
<se-button id="tool_align_center" title="${i18next.t('tools.align_center')}" src="${imgPath}/align_center.svg"></se-button> <se-button id="tool_align_center" title="tools.align_center" src="${imgPath}/align_center.svg"></se-button>
<se-button id="tool_align_right" title="${i18next.t('tools.align_right')}" src="${imgPath}/align_right.svg"></se-button> <se-button id="tool_align_right" title="tools.align_right" src="${imgPath}/align_right.svg"></se-button>
<se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg"></se-button> <se-button id="tool_align_top" title="tools.align_top" src="${imgPath}/align_top.svg"></se-button>
<se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg"></se-button> <se-button id="tool_align_middle" title="tools.align_middle" src="${imgPath}/align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg"></se-button> <se-button id="tool_align_bottom" title="tools.align_bottom" src="${imgPath}/align_bottom.svg"></se-button>
<se-list id="tool_align_relative" label="relative to:"> <se-list id="tool_align_relative" label="relative to:">
<se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item> <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
<se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item> <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
@ -928,18 +928,18 @@ class TopPanel {
</se-list> </se-list>
</div> <!-- multiselected_panel --> </div> <!-- multiselected_panel -->
<div class="rect_panel"> <div class="rect_panel">
<se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}"> <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="properties.rect_width">
</se-spin-input> </se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="${i18next.t('properties.rect_height')}"> <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="properties.rect_height">
</se-spin-input> </se-spin-input>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}" <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input> data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
</div> <!-- rect_panel --> </div> <!-- rect_panel -->
<div class="image_panel"> <div class="image_panel">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="${i18next.t('properties.image_width')}"> <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="properties.image_width">
</se-spin-input> </se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h" <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
title="${i18next.t('properties.image_height')}"></se-spin-input> title="properties.image_height"></se-spin-input>
</div> </div>
<div class="image_panel"> <div class="image_panel">
<se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input> <se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input>
@ -952,31 +952,31 @@ class TopPanel {
<se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input> <se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input>
</div> </div>
<div class="ellipse_panel"> <div class="ellipse_panel">
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="${i18next.t('properties.ellipse_cx')}" label="cx"> <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx" label="cx">
</se-spin-input> </se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="${i18next.t('properties.ellipse_cy')}" label="cy"> <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy" label="cy">
</se-spin-input> </se-spin-input>
</div> </div>
<div class="ellipse_panel"> <div class="ellipse_panel">
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="${i18next.t('properties.ellipse_rx')}" label="rx"> <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx" label="rx">
</se-spin-input> </se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="${i18next.t('properties.ellipse_ry')}" label="ry"> <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry" label="ry">
</se-spin-input> </se-spin-input>
</div> </div>
<div class="line_panel"> <div class="line_panel">
<se-spin-input id="line_x1" data-attr="x1" size="4" title="${i18next.t('properties.line_x1')}" label="x1"> <se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="x1">
</se-spin-input> </se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="${i18next.t('properties.line_y1')}" label="y1"> <se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="y1">
</se-spin-input> </se-spin-input>
<se-spin-input id="line_x2" data-attr="x2" size="4" title="${i18next.t('properties.line_x2')}" label="x2"> <se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="x2">
</se-spin-input> </se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="${i18next.t('properties.line_y2')}" label="y2"> <se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="y2">
</se-spin-input> </se-spin-input>
</div> </div>
<div class="text_panel"> <div class="text_panel">
<se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button> <se-button id="tool_bold" title="properties.bold" src="${imgPath}/bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button> <se-button id="tool_italic" title="properties.italic" src="${imgPath}/italic.svg" shortcut="I"></se-button>
<se-list id="tool_font_family" label="Font:"> <se-list id="tool_font_family" label="properties.font_family_label">
<se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item> <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
<se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item> <se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
<se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item> <se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
@ -986,27 +986,27 @@ class TopPanel {
<se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item> <se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
<se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item> <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
</se-list> </se-list>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}" <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
src="${imgPath}/fontsize.svg"></se-spin-input> src="${imgPath}/fontsize.svg"></se-spin-input>
</div> </div>
<div class="text_panel"> <div class="text_panel">
<se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg"></se-button> <se-button id="tool_text_anchor_start" title="properties.text_anchor_start" src="${imgPath}/anchor_start.svg"></se-button>
<se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg"></se-button> <se-button id="tool_text_anchor_middle" title="properties.text_anchor_middle" src="${imgPath}/anchor_middle.svg"></se-button>
<se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg"></se-button> <se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="${imgPath}/anchor_end.svg"></se-button>
</div> </div>
<!-- Not visible, but still used --> <!-- Not visible, but still used -->
<input id="text" type="text" size="35" /> <input id="text" type="text" size="35" />
<div class="container_panel"> <div class="container_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="${i18next.t('label')}"></se-input> <se-input id="g_title" data-attr="title" size="8" label="label"></se-input>
</div> <!-- container_panel --> </div> <!-- container_panel -->
<div class="use_panel"> <div class="use_panel">
<se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}" <se-button id="tool_unlink_use" title="tools.tool_unlink_use"
src="${imgPath}/unlink_use.svg"> src="${imgPath}/unlink_use.svg">
</se-button> </se-button>
</div> <!-- use_panel --> </div> <!-- use_panel -->
<div class="g_panel"> <div class="g_panel">
<se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="${imgPath}/ungroup.svg"> <se-button id="tool_ungroup" title="tools.ungroup" src="${imgPath}/ungroup.svg">
</se-button> </se-button>
</div> <!-- g_panel --> </div> <!-- g_panel -->
<!-- For anchor elements --> <!-- For anchor elements -->
@ -1018,22 +1018,22 @@ class TopPanel {
</div> <!-- a_panel --> </div> <!-- a_panel -->
<div class="path_node_panel"> <div class="path_node_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="${imgPath}/tool_node_link.svg" pressed> <se-button id="tool_node_link" title="tools.node_link" src="${imgPath}/tool_node_link.svg" pressed>
</se-button> </se-button>
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="${i18next.t('properties.node_x')}" label="x:"> <se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="x:">
</se-spin-input> </se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="${i18next.t('properties.node_y')}" label="y:"> <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="y:">
</se-spin-input> </se-spin-input>
<select id="seg_type" title="${i18next.t('tools.seg_type')}"> <select id="seg_type" title="${i18next.t('tools.seg_type')}">
<option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option> <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>
<option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option> <option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option>
</select> </select>
<se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="${imgPath}/tool_node_clone.svg"></se-button> <se-button id="tool_node_clone" title="tools.node_clone" src="${imgPath}/tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="${imgPath}/tool_node_delete.svg"></se-button> <se-button id="tool_node_delete" title="tools.node_delete" src="${imgPath}/tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="${imgPath}/tool_openclose_path.svg"> <se-button id="tool_openclose_path" title="tools.openclose_path" src="${imgPath}/tool_openclose_path.svg">
</se-button> </se-button>
<se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="${imgPath}/tool_add_subpath.svg"></se-button> <se-button id="tool_add_subpath" title="tools.add_subpath" src="${imgPath}/tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel --> </div> <!-- path_node_panel -->
<div id="cur_context_panel"></div> <div id="cur_context_panel"></div>
</div> </div>