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

#631 image path update in all web components

master
agriyadev5 2021-09-20 14:35:01 +05:30
parent 7da44c5d8a
commit ff91754c9f
22 changed files with 90 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/editor/MainMenu.js
View File

@ -278,15 +278,14 @@ class MainMenu {
init() {
// add Top panel
const template = document.createElement("template");
const { imgPath } = this.editor.configObj.curConfig;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<se-menu id="main_button" label="SVG-Edit" src="${imgPath}/logo.svg" alt="logo">
<se-menu-item id="tool_import" label="tools.import_doc" src="${imgPath}/importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="tools.export_img" src="${imgPath}/export.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="${imgPath}/docprop.svg"></se-menu-item>
<se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="${imgPath}/editPref.svg"></se-menu-item>
<se-menu-item id="tool_editor_homepage" label="tools.editor_homepage" src="${imgPath}/logo.svg"></se-menu-item>
<se-menu id="main_button" label="SVG-Edit" src="logo.svg" alt="logo">
<se-menu-item id="tool_import" label="tools.import_doc" src="importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="tools.export_img" src="export.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="docprop.svg"></se-menu-item>
<se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="editPref.svg"></se-menu-item>
<se-menu-item id="tool_editor_homepage" label="tools.editor_homepage" src="logo.svg"></se-menu-item>
</se-menu>
`;
$id('tools_top').prepend(template.content.cloneNode(true));

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

@ -83,7 +83,7 @@ export class ToolButton extends HTMLElement {
this.$div.style = newValue;
break;
case 'src':
this.$img.setAttribute('src', newValue);
this.$img.setAttribute('src', (newValue.indexOf("data:") === -1) ? './images/' + newValue : newValue);
break;
case 'pressed':
if (newValue === null) {

2
src/editor/components/seColorPicker.js
View File

@ -694,7 +694,7 @@ export class SeColorPicker extends HTMLElement {
if (oldValue === newValue) return;
switch (name) {
case 'src':
this.$logo.setAttribute('src', newValue);
this.$logo.setAttribute('src', './images/' + newValue);
break;
case 'label':
this.setAttribute('title', t(newValue));

2
src/editor/components/seExplorerButton.js
View File

@ -172,7 +172,7 @@ export class ExplorerButton extends HTMLElement {
}
break;
case 'src':
this.$img.setAttribute('src', newValue);
this.$img.setAttribute('src', './images/' + newValue);
break;
default:
// eslint-disable-next-line no-console

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

@ -235,7 +235,7 @@ export class FlyingButton extends HTMLElement {
connectedCallback () {
// initialize currentAction with the first slot of the list
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
this.$img.setAttribute('src', this.activeSlot.getAttribute('src'));
this.$img.setAttribute('src', './images/' + this.activeSlot.getAttribute('src'));
// capture click event on the button to manage the logic
const onClickHandler = (ev) => {
ev.stopPropagation();
@ -251,7 +251,7 @@ export class FlyingButton extends HTMLElement {
break;
case 'SE-BUTTON':
// change to the current action
this.$img.setAttribute('src', ev.target.getAttribute('src'));
this.$img.setAttribute('src', './images/' + ev.target.getAttribute('src'));
this.activeSlot = ev.target;
this.setAttribute('pressed', 'pressed');
// and close the menu

2
src/editor/components/seMenu.js
View File

@ -64,7 +64,7 @@ export class SeMenu extends HTMLElement {
if (oldValue === newValue) return;
switch (name) {
case 'src':
image.src = newValue;
image.src = './images/' + newValue;
image.width = 24;
image.height = 24;
this.$label.prepend(image);

2
src/editor/components/seMenuItem.js
View File

@ -49,7 +49,7 @@ export class SeMenuItem extends HTMLElement {
if (oldValue === newValue) return;
switch (name) {
case 'src':
this.$img.setAttribute('src', newValue);
this.$img.setAttribute('src', './images/'+newValue);
this.$img.style.display = 'inline-block';
break;
case 'label':

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

@ -92,7 +92,7 @@ export class SESpinInput extends HTMLElement {
}
break;
case 'src':
this.$img.setAttribute('src', newValue);
this.$img.setAttribute('src', './images/' + newValue);
this.$label.remove();
this.$div.classList.add('imginside');
break;

2
src/editor/components/seZoom.js
View File

@ -80,7 +80,7 @@ class Zoom extends ListComboBox {
// this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
break;
case 'src':
this.src = newValue;
this.src = './images/' + newValue;
break;
case 'inputsize':
this.inputsize = newValue;

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

@ -357,7 +357,7 @@ export default {
const btitle = `${name}:langListTitle`;
// eslint-disable-next-line no-unsanitized/property
const buttonTemplate = `
<se-button id="mode_connect" title="${btitle}" src="${imgPath}/conn.svg"></se-button>
<se-button id="mode_connect" title="${btitle}" src="conn.svg"></se-button>
`;
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13);
$id('mode_connect').addEventListener("click", () => {

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

@ -87,7 +87,7 @@ export default {
const key = `${name}:buttons.0.key`;
// eslint-disable-next-line no-unsanitized/property
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="eye_dropper.svg" shortcut=${key}></se-button>
`;
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12);
$id('tool_eyedropper').addEventListener("click", () => {

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

@ -168,7 +168,7 @@ export default {
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="view_grid" title="${title}" src="${imgPath}/grid.svg"></se-button>
<se-button id="view_grid" title="${title}" src="grid.svg"></se-button>
`;
$id('editor_panel').append(buttonTemplate.content.cloneNode(true));
$id('view_grid').addEventListener("click", () => {

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

@ -46,7 +46,7 @@ export default {
const title = `${name}:buttons.0.title`;
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="hello_world" title="${title}" src="${imgPath}/hello_world.svg"></se-button>
<se-button id="hello_world" title="${title}" src="hello_world.svg"></se-button>
`;
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
$id('hello_world').addEventListener("click", () => {

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

@ -524,7 +524,7 @@ export default {
const buttonTemplate = document.createElement("template");
const key = name + `:buttons.0.title`;
buttonTemplate.innerHTML = `
<se-menu-item id="tool_imagelib" label="${key}" src="${imgPath}/library.svg"></se-menu-item>
<se-menu-item id="tool_imagelib" label="${key}" src="library.svg"></se-menu-item>
`;
insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
$id('tool_imagelib').addEventListener("click", () => {

9
src/editor/extensions/ext-opensave/ext-opensave.js
View File

@ -39,7 +39,6 @@ export default {
name,
async init(_S) {
const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
await loadExtensionTranslation(svgEditor);
@ -162,13 +161,13 @@ export default {
callback() {
// eslint-disable-next-line no-unsanitized/property
const buttonTemplate = `
<se-menu-item id="tool_clear" label="opensave.new_doc" shortcut="N" src="${imgPath}/new.svg"></se-menu-item>`;
<se-menu-item id="tool_clear" label="opensave.new_doc" shortcut="N" src="new.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), buttonTemplate, 0);
const openButtonTemplate = `<se-menu-item id="tool_open" label="opensave.open_image_doc" src="${imgPath}/open.svg"></se-menu-item>`;
const openButtonTemplate = `<se-menu-item id="tool_open" label="opensave.open_image_doc" src="open.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), openButtonTemplate, 1);
const saveButtonTemplate = `<se-menu-item id="tool_save" label="opensave.save_doc" shortcut="S" src="${imgPath}/saveImg.svg"></se-menu-item>`;
const saveButtonTemplate = `<se-menu-item id="tool_save" label="opensave.save_doc" shortcut="S" src="saveImg.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), saveButtonTemplate, 2);
const saveAsButtonTemplate = `<se-menu-item id="tool_save_as" label="opensave.save_as_doc" src="${imgPath}/saveImg.svg"></se-menu-item>`;
const saveAsButtonTemplate = `<se-menu-item id="tool_save_as" label="opensave.save_as_doc" src="saveImg.svg"></se-menu-item>`;
svgCanvas.insertChildAtIndex($id('main_button'), saveAsButtonTemplate, 3);
// handler
$id("tool_clear").addEventListener("click", clickClear.bind(this));

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

@ -51,7 +51,7 @@ export default {
const buttonTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="ext-panning" title="${btitle}" src="${imgPath}/panning.svg"></se-button>
<se-button id="ext-panning" title="${btitle}" src="panning.svg"></se-button>
`;
insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
$id('ext-panning').addEventListener("click", () => {

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

@ -87,9 +87,9 @@ export default {
// eslint-disable-next-line no-unsanitized/property
const buttonTemplate = `
<se-flyingbutton id="tools_polygon" title="${fbtitle}">
<se-button id="tool_star" title="${title_star}" src="${imgPath}/star.svg">
<se-button id="tool_star" title="${title_star}" src="star.svg">
</se-button>
<se-button id="tool_polygon" title="${title_polygon}" src="${imgPath}/polygon.svg">
<se-button id="tool_polygon" title="${title_polygon}" src="polygon.svg">
</se-button>
</se-flyingbutton>
`;

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

@ -47,7 +47,7 @@ export default {
// eslint-disable-next-line no-unsanitized/property
const buttonTemplate = `
<se-explorerbutton id="tool_shapelib" title="${svgEditor.i18next.t(`${name}:buttons.0.title`)}" lib="./extensions/ext-shapes/shapelib/"
src="${imgPath}/shapelib.svg"></se-explorerbutton>
src="shapelib.svg"></se-explorerbutton>
`;
canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9);
$id('tool_shapelib').addEventListener("click", () => {

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

@ -170,7 +170,7 @@ class BottomPanel {
template.innerHTML = `
<div id="tools_bottom">
<!-- Zoom buttons -->
<se-zoom id="zoom" src="${imgPath}/zoom.svg" title="Change zoom level" inputsize="40px">
<se-zoom id="zoom" src="zoom.svg" title="Change zoom level" inputsize="40px">
<div value="1000">1000</div>
<div value="400">400</div>
<div value="200">200</div>
@ -182,8 +182,8 @@ class BottomPanel {
<div value="layer">${i18next.t('tools.fit_to_layer_content')}</div>
<div value="content">${i18next.t('tools.fit_to_all')}</div>
</se-zoom>
<se-colorpicker id="fill_color" src="${imgPath}/fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" label="properties.stroke_color" type="stroke">
<se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke">
</se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
<se-list id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px">
@ -209,8 +209,7 @@ class BottomPanel {
<se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="${imgPath}/linecap_round.svg"
height="22px"></img></se-list-item>
</se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="properties.opacity"
src="${imgPath}/opacity.svg"></se-spin-input>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="properties.opacity" src="opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette>
</div>
`;

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

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

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

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

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

@ -796,7 +796,6 @@ class TopPanel {
* @returns {void}
*/
togglePathEditMode(editMode, elems) {
const { imgPath } = this.editor.configObj.curConfig;
if (editMode) {
this.displayTool('path_node_panel');
} else {
@ -806,14 +805,14 @@ class TopPanel {
// Change select icon
$id('tool_path').pressed = false;
$id('tool_select').pressed = true;
$id('tool_select').setAttribute('src', `${imgPath}/select_node.svg`);
$id('tool_select').setAttribute('src', `select_node.svg`);
this.editor.multiselected = false;
if (elems.length) {
this.editor.selectedElement = elems[0];
}
} else {
setTimeout(() => {
$id('tool_select').setAttribute('src', `${imgPath}/select.svg`);
$id('tool_select').setAttribute('src', `select.svg`);
}, 1000);
}
}
@ -835,35 +834,35 @@ class TopPanel {
id="tool_source"
title="tools.tool_source"
shortcut="U"
src="${imgPath}/source.svg"
src="source.svg"
></se-button>
<se-button
id="tool_wireframe"
title="tools.wireframe_mode"
shortcut="F"
src="${imgPath}/wireframe.svg"
src="wireframe.svg"
></se-button>
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>
<se-button id="tool_undo" title="tools.undo" shortcut="Z" src="${imgPath}/undo.svg" disabled></se-button>
<se-button id="tool_redo" title="tools.redo" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button>
<se-button id="tool_undo" title="tools.undo" shortcut="Z" src="undo.svg" disabled></se-button>
<se-button id="tool_redo" title="tools.redo" shortcut="Y" src="redo.svg" disabled></se-button>
</div> <!-- history_panel -->
<!-- Buttons when a single element is selected -->
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone" title="tools.clone" shortcut="D" src="${imgPath}/clone.svg"></se-button>
<se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="${imgPath}/delete.svg"></se-button>
<se-button id="tool_clone" title="tools.clone" shortcut="D" src="clone.svg"></se-button>
<se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<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="tools.move_bottom" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg"></se-button>
<se-button id="tool_move_top" title="tools.move_top" shortcut="Ctrl+Shift+]" src="move_top.svg"></se-button>
<se-button id="tool_move_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="move_bottom.svg"></se-button>
</div>
<div class="selected_panel">
<se-button id="tool_topath" title="tools.to_path" src="${imgPath}/to_path.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="tools.make_link" src="${imgPath}/globe_link.svg"></se-button>
<se-button id="tool_topath" title="tools.to_path" src="to_path.svg"></se-button>
<se-button id="tool_reorient" title="tools.reorient_path" src="reorient.svg"></se-button>
<se-button id="tool_make_link" title="tools.make_link" src="globe_link.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
@ -871,9 +870,9 @@ class TopPanel {
</div>
<div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" 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="angle.svg"
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="blur.svg"
title="properties.blur"></se-spin-input>
<se-list id="tool_position" title="tools.align_to_page" label="" width="22px" height="22px">
<se-list-item id="tool_posleft" value="l">
@ -905,21 +904,21 @@ class TopPanel {
<!-- Buttons when multiple elements are selected -->
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="${imgPath}/clone.svg"></se-button>
<se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="clone.svg"></se-button>
<se-button id="tool_delete_multi" title="tools.del" shortcut="Delete/Backspace"
src="${imgPath}/delete.svg"></se-button>
src="delete.svg"></se-button>
</div>
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="${imgPath}/group_elements.svg">
<se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="group_elements.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="tools.align_left" src="${imgPath}/align_left.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="tools.align_right" src="${imgPath}/align_right.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="tools.align_middle" src="${imgPath}/align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="${imgPath}/align_bottom.svg"></se-button>
<se-button id="tool_make_link_multi" title="tools.make_link" src="globe_link.svg"></se-button>
<se-button id="tool_align_left" title="tools.align_left" src="align_left.svg"></se-button>
<se-button id="tool_align_center" title="tools.align_center" src="align_center.svg"></se-button>
<se-button id="tool_align_right" title="tools.align_right" src="align_right.svg"></se-button>
<se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
<se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
<se-list id="tool_align_relative" label="tools.relativeTo">
<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>
@ -933,7 +932,7 @@ class TopPanel {
<se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label" title="properties.rect_height">
</se-spin-input>
<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="c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div class="image_panel">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label" title="properties.image_width">
@ -974,8 +973,8 @@ class TopPanel {
</se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="${imgPath}/bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="properties.italic" src="${imgPath}/italic.svg" shortcut="I"></se-button>
<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-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="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
@ -987,12 +986,12 @@ class TopPanel {
<se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
</se-list>
<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="fontsize.svg"></se-spin-input>
</div>
<div class="text_panel">
<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="properties.text_anchor_middle" src="${imgPath}/anchor_middle.svg"></se-button>
<se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="${imgPath}/anchor_end.svg"></se-button>
<se-button id="tool_text_anchor_start" title="properties.text_anchor_start" src="anchor_start.svg"></se-button>
<se-button id="tool_text_anchor_middle" title="properties.text_anchor_middle" src="anchor_middle.svg"></se-button>
<se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="anchor_end.svg"></se-button>
</div>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35" />
@ -1002,11 +1001,11 @@ class TopPanel {
</div> <!-- container_panel -->
<div class="use_panel">
<se-button id="tool_unlink_use" title="tools.tool_unlink_use"
src="${imgPath}/unlink_use.svg">
src="unlink_use.svg">
</se-button>
</div> <!-- use_panel -->
<div class="g_panel">
<se-button id="tool_ungroup" title="tools.ungroup" src="${imgPath}/ungroup.svg">
<se-button id="tool_ungroup" title="tools.ungroup" src="ungroup.svg">
</se-button>
</div> <!-- g_panel -->
<!-- For anchor elements -->
@ -1018,7 +1017,7 @@ class TopPanel {
</div> <!-- a_panel -->
<div class="path_node_panel">
<div class="tool_sep"></div>
<se-button id="tool_node_link" title="tools.node_link" src="${imgPath}/tool_node_link.svg" pressed>
<se-button id="tool_node_link" title="tools.node_link" src="tool_node_link.svg" pressed>
</se-button>
<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">
@ -1029,11 +1028,11 @@ class TopPanel {
<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>
</select>
<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="tools.node_delete" src="${imgPath}/tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="tools.openclose_path" src="${imgPath}/tool_openclose_path.svg">
<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>
<se-button id="tool_add_subpath" title="tools.add_subpath" src="${imgPath}/tool_add_subpath.svg"></se-button>
<se-button id="tool_add_subpath" title="tools.add_subpath" src="tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel -->
<div id="cur_context_panel"></div>
</div>