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() { init() {
// add Top panel // add Top panel
const template = document.createElement("template"); const template = document.createElement("template");
const { imgPath } = this.editor.configObj.curConfig;
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
template.innerHTML = ` template.innerHTML = `
<se-menu id="main_button" label="SVG-Edit" src="${imgPath}/logo.svg" alt="logo"> <se-menu id="main_button" label="SVG-Edit" src="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_import" label="tools.import_doc" src="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_export" label="tools.export_img" src="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_docprops" label="tools.docprops" shortcut="D" src="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_prefs" label="config.editor_prefs" src="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-item id="tool_editor_homepage" label="tools.editor_homepage" src="logo.svg"></se-menu-item>
</se-menu> </se-menu>
`; `;
$id('tools_top').prepend(template.content.cloneNode(true)); $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; this.$div.style = newValue;
break; break;
case 'src': case 'src':
this.$img.setAttribute('src', newValue); this.$img.setAttribute('src', (newValue.indexOf("data:") === -1) ? './images/' + newValue : newValue);
break; break;
case 'pressed': case 'pressed':
if (newValue === null) { if (newValue === null) {

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

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

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

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

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

@ -235,7 +235,7 @@ export class FlyingButton extends HTMLElement {
connectedCallback () { connectedCallback () {
// initialize currentAction with the first slot of the list // initialize currentAction with the first slot of the list
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0]; 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 // capture click event on the button to manage the logic
const onClickHandler = (ev) => { const onClickHandler = (ev) => {
ev.stopPropagation(); ev.stopPropagation();
@ -251,7 +251,7 @@ export class FlyingButton extends HTMLElement {
break; break;
case 'SE-BUTTON': case 'SE-BUTTON':
// change to the current action // 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.activeSlot = ev.target;
this.setAttribute('pressed', 'pressed'); this.setAttribute('pressed', 'pressed');
// and close the menu // 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; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'src': case 'src':
image.src = newValue; image.src = './images/' + newValue;
image.width = 24; image.width = 24;
image.height = 24; image.height = 24;
this.$label.prepend(image); 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; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'src': case 'src':
this.$img.setAttribute('src', newValue); this.$img.setAttribute('src', './images/'+newValue);
this.$img.style.display = 'inline-block'; this.$img.style.display = 'inline-block';
break; break;
case 'label': case 'label':

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

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

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

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

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

@ -357,7 +357,7 @@ export default {
const btitle = `${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="conn.svg"></se-button>
`; `;
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13); svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13);
$id('mode_connect').addEventListener("click", () => { $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`; 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="eye_dropper.svg" shortcut=${key}></se-button>
`; `;
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12); svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12);
$id('tool_eyedropper').addEventListener("click", () => { $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 // eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = ` 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('editor_panel').append(buttonTemplate.content.cloneNode(true));
$id('view_grid').addEventListener("click", () => { $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`; 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="hello_world.svg"></se-button>
`; `;
$id('tools_left').append(buttonTemplate.content.cloneNode(true)); $id('tools_left').append(buttonTemplate.content.cloneNode(true));
$id('hello_world').addEventListener("click", () => { $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 buttonTemplate = document.createElement("template");
const key = name + `:buttons.0.title`; const key = name + `:buttons.0.title`;
buttonTemplate.innerHTML = ` 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)); insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
$id('tool_imagelib').addEventListener("click", () => { $id('tool_imagelib').addEventListener("click", () => {

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

@ -39,7 +39,6 @@ export default {
name, name,
async init(_S) { async init(_S) {
const svgEditor = this; const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
const { svgCanvas } = svgEditor; const { svgCanvas } = svgEditor;
const { $id } = svgCanvas; const { $id } = svgCanvas;
await loadExtensionTranslation(svgEditor); await loadExtensionTranslation(svgEditor);
@ -162,13 +161,13 @@ export default {
callback() { callback() {
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
const buttonTemplate = ` 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); 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); 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); 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); svgCanvas.insertChildAtIndex($id('main_button'), saveAsButtonTemplate, 3);
// handler // handler
$id("tool_clear").addEventListener("click", clickClear.bind(this)); $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"); const buttonTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = ` 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)); insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
$id('ext-panning').addEventListener("click", () => { $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 // 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}">
<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>
<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-button>
</se-flyingbutton> </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 // eslint-disable-next-line no-unsanitized/property
const buttonTemplate = ` const buttonTemplate = `
<se-explorerbutton id="tool_shapelib" title="${svgEditor.i18next.t(`${name}:buttons.0.title`)}" lib="./extensions/ext-shapes/shapelib/" <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); canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9);
$id('tool_shapelib').addEventListener("click", () => { $id('tool_shapelib').addEventListener("click", () => {

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

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

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="layers.new" size="small" src="${imgPath}/new.svg"></se-button> <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="${imgPath}/delete.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="${imgPath}/text.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="${imgPath}/go_up.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="${imgPath}/go_down.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="${imgPath}/context_menu.svg"> <se-button id="layer_moreopts" title="common.more_opts" size="small" src="context_menu.svg">
</se-button> </se-button>
</fieldset> </fieldset>
<table id="layerlist"> <table id="layerlist">

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

@ -195,52 +195,51 @@ class LeftPanel {
* @type {module} * @type {module}
*/ */
init() { init() {
const { imgPath } = this.editor.configObj.curConfig;
// add Left panel // add Left panel
const leftMenu = [ 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 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 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 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 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 position: 5
}, },
{ {
menu: `<se-flyingbutton id="tools_rect" title="tools.square_rect_tool"> 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_rect" title="tools.mode_rect" src="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_square" title="tools.mode_square" src="square.svg"></se-button>
<se-button id="tool_fhrect" title="tools.mode_fhrect" src="${imgPath}/fh_rect.svg"></se-button> <se-button id="tool_fhrect" title="tools.mode_fhrect" src="fh_rect.svg"></se-button>
</se-flyingbutton>`, </se-flyingbutton>`,
position: 6 position: 6
}, },
{ {
menu: `<se-flyingbutton id="tools_ellipse" title="tools.ellipse_circle_tool"> 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_ellipse" title="tools.mode_ellipse" src="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_circle" title="tools.mode_circle" src="circle.svg"></se-button>
<se-button id="tool_fhellipse" title="tools.mode_fhellipse" src="${imgPath}/fh_ellipse.svg"></se-button> <se-button id="tool_fhellipse" title="tools.mode_fhellipse" src="fh_ellipse.svg"></se-button>
</se-flyingbutton>`, </se-flyingbutton>`,
position: 7 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 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 position: 11
} }
]; ];

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

@ -796,7 +796,6 @@ class TopPanel {
* @returns {void} * @returns {void}
*/ */
togglePathEditMode(editMode, elems) { togglePathEditMode(editMode, elems) {
const { imgPath } = this.editor.configObj.curConfig;
if (editMode) { if (editMode) {
this.displayTool('path_node_panel'); this.displayTool('path_node_panel');
} else { } else {
@ -806,14 +805,14 @@ class TopPanel {
// Change select icon // Change select icon
$id('tool_path').pressed = false; $id('tool_path').pressed = false;
$id('tool_select').pressed = true; $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; this.editor.multiselected = false;
if (elems.length) { if (elems.length) {
this.editor.selectedElement = elems[0]; this.editor.selectedElement = elems[0];
} }
} else { } else {
setTimeout(() => { setTimeout(() => {
$id('tool_select').setAttribute('src', `${imgPath}/select.svg`); $id('tool_select').setAttribute('src', `select.svg`);
}, 1000); }, 1000);
} }
} }
@ -835,35 +834,35 @@ class TopPanel {
id="tool_source" id="tool_source"
title="tools.tool_source" title="tools.tool_source"
shortcut="U" shortcut="U"
src="${imgPath}/source.svg" src="source.svg"
></se-button> ></se-button>
<se-button <se-button
id="tool_wireframe" id="tool_wireframe"
title="tools.wireframe_mode" title="tools.wireframe_mode"
shortcut="F" shortcut="F"
src="${imgPath}/wireframe.svg" src="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="tools.undo" shortcut="Z" src="${imgPath}/undo.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="${imgPath}/redo.svg" disabled></se-button> <se-button id="tool_redo" title="tools.redo" shortcut="Y" src="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="tools.clone" shortcut="D" src="${imgPath}/clone.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="${imgPath}/delete.svg"></se-button> <se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="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="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="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_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="move_bottom.svg"></se-button>
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<se-button id="tool_topath" title="tools.to_path" src="${imgPath}/to_path.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="${imgPath}/reorient.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="${imgPath}/globe_link.svg"></se-button> <se-button id="tool_make_link" title="tools.make_link" src="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>
@ -871,9 +870,9 @@ class TopPanel {
</div> </div>
<div class="selected_panel"> <div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" title="properties.class"></se-input> <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> 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> title="properties.blur"></se-spin-input>
<se-list id="tool_position" title="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">
@ -905,21 +904,21 @@ class TopPanel {
<!-- 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="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" <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>
<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="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>
<se-button id="tool_make_link_multi" title="tools.make_link" src="${imgPath}/globe_link.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="${imgPath}/align_left.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="${imgPath}/align_center.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="${imgPath}/align_right.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="${imgPath}/align_top.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="${imgPath}/align_middle.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="${imgPath}/align_bottom.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 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="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>
@ -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 id="rect_height" data-attr="height" size="4" label="properties.h_label" 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="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="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="properties.w_label" title="properties.image_width"> <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> </se-spin-input>
</div> </div>
<div class="text_panel"> <div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="${imgPath}/bold.svg" shortcut="B"></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="${imgPath}/italic.svg" shortcut="I"></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 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>
@ -987,12 +986,12 @@ class TopPanel {
<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="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="fontsize.svg"></se-spin-input>
</div> </div>
<div class="text_panel"> <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_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="${imgPath}/anchor_middle.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="${imgPath}/anchor_end.svg"></se-button> <se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="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" />
@ -1002,11 +1001,11 @@ class TopPanel {
</div> <!-- container_panel --> </div> <!-- container_panel -->
<div class="use_panel"> <div class="use_panel">
<se-button id="tool_unlink_use" title="tools.tool_unlink_use" <se-button id="tool_unlink_use" title="tools.tool_unlink_use"
src="${imgPath}/unlink_use.svg"> src="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="tools.ungroup" src="${imgPath}/ungroup.svg"> <se-button id="tool_ungroup" title="tools.ungroup" src="ungroup.svg">
</se-button> </se-button>
</div> <!-- g_panel --> </div> <!-- g_panel -->
<!-- For anchor elements --> <!-- For anchor elements -->
@ -1018,7 +1017,7 @@ 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="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> </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="properties.node_x" label="properties.x_label"> <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="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="tools.node_clone" src="${imgPath}/tool_node_clone.svg"></se-button> <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="${imgPath}/tool_node_delete.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="${imgPath}/tool_openclose_path.svg"> <se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg">
</se-button> </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> <!-- path_node_panel -->
<div id="cur_context_panel"></div> <div id="cur_context_panel"></div>
</div> </div>