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

image folder variable used consistently

master
JFH 2021-08-11 10:16:00 +02:00
parent 4557d338c1
commit 86c0e9cf03
26 changed files with 136 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

367
package-lock.json generated
View File

@ -1,11 +1,11 @@
{
"name": "svgedit",
"version": "7.0.0-beta.3",
"version": "7.0.0-beta.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "7.0.0-beta.3",
"version": "7.0.0-beta.4",
"license": "(MIT AND Apache-2.0 AND ISC AND LGPL-3.0-or-later AND X11)",
"dependencies": {
"@babel/polyfill": "7.12.1",
@ -63,7 +63,6 @@
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "5.1.0",
"eslint-plugin-standard": "4.1.0",
"imageoptim-cli": "3.0.2",
"jamilih": "0.54.0",
"jsdoc": "3.6.7",
"node-static": "0.7.11",
@ -10697,200 +10696,6 @@
"node": ">=6.9.0"
}
},
"node_modules/imageoptim-cli": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/imageoptim-cli/-/imageoptim-cli-3.0.2.tgz",
"integrity": "sha512-zaoD9hqFvIUXWFye3sp+DyuQ2r5yPYSDksssZ6ytvgYkQgv0w+ebm0NaAHNU2qi97c9SB8p8hM7mBnQZocLM0w==",
"dev": true,
"dependencies": {
"chalk": "2.4.2",
"commander": "3.0.1",
"execa": "2.0.4",
"fs-extra": "8.1.0",
"globby": "10.0.1",
"pretty-bytes": "5.3.0"
},
"bin": {
"imageoptim": "dist/imageoptim"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/imageoptim-cli/node_modules/commander": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-3.0.1.tgz",
"integrity": "sha512-UNgvDd+csKdc9GD4zjtkHKQbT8Aspt2jCBqNSPp53vAS0L1tS9sXB2TCEOPHJ7kt9bN/niWkYj8T3RQSoMXdSQ==",
"dev": true
},
"node_modules/imageoptim-cli/node_modules/cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"dev": true,
"dependencies": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
"semver": "^5.5.0",
"shebang-command": "^1.2.0",
"which": "^1.2.9"
},
"engines": {
"node": ">=4.8"
}
},
"node_modules/imageoptim-cli/node_modules/execa": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/execa/-/execa-2.0.4.tgz",
"integrity": "sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==",
"dev": true,
"dependencies": {
"cross-spawn": "^6.0.5",
"get-stream": "^5.0.0",
"is-stream": "^2.0.0",
"merge-stream": "^2.0.0",
"npm-run-path": "^3.0.0",
"onetime": "^5.1.0",
"p-finally": "^2.0.0",
"signal-exit": "^3.0.2",
"strip-final-newline": "^2.0.0"
},
"engines": {
"node": "^8.12.0 || >=9.7.0"
}
},
"node_modules/imageoptim-cli/node_modules/fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
},
"engines": {
"node": ">=6 <7 || >=8"
}
},
"node_modules/imageoptim-cli/node_modules/globby": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
"integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
"dev": true,
"dependencies": {
"@types/glob": "^7.1.1",
"array-union": "^2.1.0",
"dir-glob": "^3.0.1",
"fast-glob": "^3.0.3",
"glob": "^7.1.3",
"ignore": "^5.1.1",
"merge2": "^1.2.3",
"slash": "^3.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/imageoptim-cli/node_modules/jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dev": true,
"dependencies": {
"graceful-fs": "^4.1.6"
}
},
"node_modules/imageoptim-cli/node_modules/npm-run-path": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
"integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
"dev": true,
"dependencies": {
"path-key": "^3.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/imageoptim-cli/node_modules/npm-run-path/node_modules/path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/imageoptim-cli/node_modules/p-finally": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
"integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/imageoptim-cli/node_modules/path-key": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/imageoptim-cli/node_modules/shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
"integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
"dev": true,
"dependencies": {
"shebang-regex": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/imageoptim-cli/node_modules/shebang-regex": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/imageoptim-cli/node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/imageoptim-cli/node_modules/universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"dev": true,
"engines": {
"node": ">= 4.0.0"
}
},
"node_modules/imageoptim-cli/node_modules/which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
"dev": true,
"dependencies": {
"isexe": "^2.0.0"
},
"bin": {
"which": "bin/which"
}
},
"node_modules/import-meta-resolve": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-1.1.1.tgz",
@ -16462,15 +16267,6 @@
"node": ">=4"
}
},
"node_modules/pretty-bytes": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
"integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/process": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@ -30646,159 +30442,6 @@
"integrity": "sha512-Hiyv+mXHfFEP7LzUL/llg9RwFxxY+o9N3JVLIeG5E7iFIFAalxvRU9UZthBdYDEVnzHMgjnKJPPpay5BWf1g9g==",
"dev": true
},
"imageoptim-cli": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/imageoptim-cli/-/imageoptim-cli-3.0.2.tgz",
"integrity": "sha512-zaoD9hqFvIUXWFye3sp+DyuQ2r5yPYSDksssZ6ytvgYkQgv0w+ebm0NaAHNU2qi97c9SB8p8hM7mBnQZocLM0w==",
"dev": true,
"requires": {
"chalk": "2.4.2",
"commander": "3.0.1",
"execa": "2.0.4",
"fs-extra": "8.1.0",
"globby": "10.0.1",
"pretty-bytes": "5.3.0"
},
"dependencies": {
"commander": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-3.0.1.tgz",
"integrity": "sha512-UNgvDd+csKdc9GD4zjtkHKQbT8Aspt2jCBqNSPp53vAS0L1tS9sXB2TCEOPHJ7kt9bN/niWkYj8T3RQSoMXdSQ==",
"dev": true
},
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"dev": true,
"requires": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
"semver": "^5.5.0",
"shebang-command": "^1.2.0",
"which": "^1.2.9"
}
},
"execa": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/execa/-/execa-2.0.4.tgz",
"integrity": "sha512-VcQfhuGD51vQUQtKIq2fjGDLDbL6N1DTQVpYzxZ7LPIXw3HqTuIz6uxRmpV1qf8i31LHf2kjiaGI+GdHwRgbnQ==",
"dev": true,
"requires": {
"cross-spawn": "^6.0.5",
"get-stream": "^5.0.0",
"is-stream": "^2.0.0",
"merge-stream": "^2.0.0",
"npm-run-path": "^3.0.0",
"onetime": "^5.1.0",
"p-finally": "^2.0.0",
"signal-exit": "^3.0.2",
"strip-final-newline": "^2.0.0"
}
},
"fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
"dev": true,
"requires": {
"graceful-fs": "^4.2.0",
"jsonfile": "^4.0.0",
"universalify": "^0.1.0"
}
},
"globby": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
"integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
"dev": true,
"requires": {
"@types/glob": "^7.1.1",
"array-union": "^2.1.0",
"dir-glob": "^3.0.1",
"fast-glob": "^3.0.3",
"glob": "^7.1.3",
"ignore": "^5.1.1",
"merge2": "^1.2.3",
"slash": "^3.0.0"
}
},
"jsonfile": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6"
}
},
"npm-run-path": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
"integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
"dev": true,
"requires": {
"path-key": "^3.0.0"
},
"dependencies": {
"path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true
}
}
},
"p-finally": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
"integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
"dev": true
},
"path-key": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
"dev": true
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
"integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
"dev": true,
"requires": {
"shebang-regex": "^1.0.0"
}
},
"shebang-regex": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true
},
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
"dev": true
},
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
"dev": true
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
"dev": true,
"requires": {
"isexe": "^2.0.0"
}
}
}
},
"import-meta-resolve": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-1.1.1.tgz",
@ -35068,12 +34711,6 @@
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
"dev": true
},
"pretty-bytes": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
"integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
"dev": true
},
"process": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",

15
src/editor/Editor.js
View File

@ -342,20 +342,25 @@ class Editor extends EditorStartup {
* @param {module:svgcanvas.SvgCanvas#event:selected} elems
* @returns {void}
*/
togglePathEditMode(editmode, elems) {
$id('path_node_panel').style.display = (editmode) ? 'block' : 'none';
if (editmode) {
togglePathEditMode(editMode, elems) {
const { imgPath } = this.configObj.curConfig;
if (editMode) {
$id('path_node_panel').style.removeProperty('display');
} else {
$id('path_node_panel').style.display = 'none';
}
if (editMode) {
// Change select icon
$id('tool_path').pressed = false;
$id('tool_select').pressed = true;
$id('tool_select').setAttribute('src', './images/select_node.svg');
$id('tool_select').setAttribute('src', `${imgPath}/select_node.svg`);
this.multiselected = false;
if (elems.length) {
this.selectedElement = elems[0];
}
} else {
setTimeout(() => {
$id('tool_select').setAttribute('src', './images/select.svg');
$id('tool_select').setAttribute('src', `${imgPath}/select.svg`);
}, 1000);
}
}

2
src/editor/EditorStartup.js
View File

@ -126,7 +126,7 @@ class EditorStartup {
const { undoMgr } = this.svgCanvas;
this.canvMenu = $id('se-cmenu_canvas');
this.exportWindow = null;
this.defaultImageURL = this.configObj.curConfig.imgPath + 'logo.svg';
this.defaultImageURL = `${this.configObj.curConfig.imgPath}/logo.svg`;
const zoomInIcon = 'crosshair';
const zoomOutIcon = 'crosshair';
this.uiContext = 'toolbars';

19
src/editor/MainMenu.js
View File

@ -303,17 +303,18 @@ class MainMenu {
// add Top panel
const template = document.createElement("template");
const { i18next } = this.editor;
const { imgPath } = this.editor.configObj.curConfig;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
<se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg"></se-menu-item>
<se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg"></se-menu-item>
<se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
<se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="./images/importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="./images/export.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg"></se-menu-item>
<se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="./images/editPref.svg"></se-menu-item>
<se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg"></se-menu-item>
<se-menu id="main_button" label="SVG-Edit" src="${imgPath}/logo.svg" alt="logo">
<se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="${imgPath}/new.svg"></se-menu-item>
<se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="${imgPath}/open.svg"></se-menu-item>
<se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="${imgPath}/saveImg.svg"></se-menu-item>
<se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="${imgPath}/importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="${imgPath}/export.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="${imgPath}/docprop.svg"></se-menu-item>
<se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="${imgPath}/editPref.svg"></se-menu-item>
<se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="${imgPath}/logo.svg"></se-menu-item>
</se-menu>
`;
$id('tools_top').prepend(template.content.cloneNode(true));

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

@ -1,7 +1,5 @@
// import {isMac} from '../../common/browser.js';
// if (isMac() && !window.opera) 'Ctrl+' 'Cmd+'
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<style>
:host(:hover) :not(.disabled)
@ -38,7 +36,7 @@ template.innerHTML = `
}
</style>
<div title="title">
<img src="./images/logo.svg" alt="icon">
<img src="logo.svg" alt="icon">
</div>
`;
/**

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

@ -638,7 +638,7 @@ div.jGraduate_Slider img {
}
</style>
<div id="picker">
<img src="./images/logo.svg" alt="icon" id="logo">
<img src="logo.svg" alt="icon" id="logo">
<label for="color" title="" id="label"></label>
<div id="block">
</div>

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

@ -15,7 +15,7 @@ class Dropdown extends ListComboBox {
get [defaultState] () {
return Object.assign(super[defaultState], {
inputPartType: NumberSpinBox,
src: './images/logo.svg',
src: "logo.svg",
inputsize: '100%'
});
}
@ -28,7 +28,7 @@ class Dropdown extends ListComboBox {
const source = result.content.getElementById('source');
// add a icon before our dropdown
source.prepend(fragmentFrom.html`
<img src="./images/logo.svg" alt="icon" width="18" height="18"></img>
<img src="logo.svg" alt="icon" width="18" height="18"></img>
`.cloneNode(true));
// change the style so it fits in our toolbar
result.content.append(

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

@ -85,7 +85,7 @@ template.innerHTML = `
<div class="overall">
<div class="menu-button">
<img class="button-icon" src="./images/logo.svg" alt="icon">
<img class="button-icon" src="logo.svg" alt="icon">
<div class="handle"></div>
</div>
<div class="image-lib"">

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

@ -71,7 +71,7 @@ template.innerHTML = `
<slot></slot>
</div>
<div class="menu-button">
<img class="button-icon" src="./images/logo.svg" alt="icon">
<img class="button-icon" src="logo.svg" alt="icon">
<div class="handle"></div>
</div>

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

@ -26,7 +26,7 @@ template.innerHTML = `
}
</style>
<div>
<img src="./images/logo.svg" alt="icon" width="12" height="12" />
<img src="logo.svg" alt="icon" width="12" height="12" />
<span id="label">label</span>
<elix-input></elix-input>
</div>

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

@ -7,7 +7,7 @@ template.innerHTML = `
</style>
<elix-menu-item>
<div style="display:flex; align-items: center;">
<img src="./images/logo.svg" alt="icon" style="display:none;" width="24"/>
<img src="logo.svg" alt="icon" style="display:none;" width="24"/>
<span style="margin-left: 7px;"></span>
</div>
</elix-menu-item>

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

@ -14,7 +14,7 @@ class Zoom extends ListComboBox {
get [internal.defaultState] () {
return Object.assign(super[internal.defaultState], {
inputPartType: NumberSpinBox,
src: './images/logo.svg',
src: 'logo.svg',
inputsize: '100%'
});
}
@ -27,7 +27,8 @@ class Zoom extends ListComboBox {
const source = result.content.getElementById('source');
// add a icon before our dropdown
source.prepend(fragmentFrom.html`
<img src="./images/logo.svg" alt="icon" width="18" height="18"></img>
<img src="zoom" alt="icon" width="18" height="18">
</img>
`.cloneNode(true));
// change the style so it fits in our toolbar
result.content.append(
@ -39,9 +40,6 @@ class Zoom extends ListComboBox {
::slotted(*) {
padding: 4px;
width: 100%;
background-color: var(--icon-bg-color);
color: #fff;
}
}
[part~="popup"] {
width: 150%;
@ -167,22 +165,3 @@ class Zoom extends ListComboBox {
// Register
customElements.define('se-zoom', Zoom);
/*
{TODO
min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
function stepZoom (elem, step) {
const origVal = Number(elem.value);
if (origVal === 0) { return 100; }
const sugVal = origVal + step;
if (step === 0) { return origVal; }
if (origVal >= 100) {
return sugVal;
}
if (sugVal >= origVal) {
return origVal * 2;
}
return origVal / 2;
}
*/

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

@ -31,6 +31,7 @@ export default {
const { svgCanvas } = svgEditor;
const { getElem, $id, mergeDeep } = svgCanvas;
const { svgroot } = S;
const { imgPath } = svgEditor.configObj.curConfig;
const addElem = svgCanvas.addSVGElementFromJson;
const selManager = S.selectorManager;
await loadExtensionTranslation(svgEditor);
@ -360,7 +361,7 @@ export default {
const btitle = svgEditor.i18next.t(`${name}:langListTitle`);
// eslint-disable-next-line no-unsanitized/property
const buttonTemplate = `
<se-button id="mode_connect" title="${btitle}" src="./images/conn.svg"></se-button>
<se-button id="mode_connect" title="${btitle}" src="${imgPath}/conn.svg"></se-button>
`;
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13);
$id('mode_connect').addEventListener("click", () => {

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

@ -29,6 +29,7 @@ export default {
name,
async init(S) {
const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
await loadExtensionTranslation(svgEditor);
const { ChangeElementCommand } = S; // , svgcontent,
// svgdoc = S.svgroot.parentNode.ownerDocument,
@ -86,7 +87,7 @@ export default {
const key = svgEditor.i18next.t(`${name}:buttons.0.key`);
// eslint-disable-next-line no-unsanitized/property
const buttonTemplate = `
<se-button id="tool_eyedropper" title="${title}" src="./images/eye_dropper.svg" shortcut=${key}></se-button>
<se-button id="tool_eyedropper" title="${title}" src="${imgPath}/eye_dropper.svg" shortcut=${key}></se-button>
`;
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12);
$id('tool_eyedropper').addEventListener("click", () => {

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

@ -28,6 +28,7 @@ export default {
name,
async init ({ NS, getTypeMap }) {
const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
await loadExtensionTranslation(svgEditor);
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
@ -167,14 +168,13 @@ export default {
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="view_grid" title="${title}" src="./images/grid.svg"></se-button>
<se-button id="view_grid" title="${title}" src="${imgPath}/grid.svg"></se-button>
`;
$id('editor_panel').append(buttonTemplate.content.cloneNode(true));
$id('view_grid').addEventListener("click", () => {
svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
gridUpdate();
});
if (showGrid) {
gridUpdate();
}

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

@ -34,6 +34,7 @@ export default {
name,
async init ({ _importLocale }) {
const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
await loadExtensionTranslation(svgEditor);
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
@ -45,7 +46,7 @@ export default {
const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="hello_world" title="${title}" src="./images/hello_world.svg"></se-button>
<se-button id="hello_world" title="${title}" src="${imgPath}/hello_world.svg"></se-button>
`;
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
$id('hello_world').addEventListener("click", () => {

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

@ -32,6 +32,8 @@ export default {
const svgEditor = this;
const { $id } = svgEditor.svgCanvas;
const { $svgEditor } = svgEditor;
const { imgPath } = svgEditor.configObj.curConfig;
await loadExtensionTranslation(svgEditor);
const { svgCanvas } = svgEditor;
@ -447,7 +449,7 @@ export default {
const back = document.createElement('button');
back.style.visibility = "hidden";
// eslint-disable-next-line max-len
back.innerHTML = '<img class="svg_icon" src="./images/library.svg" alt="icon" width="16" height="16" />' + svgEditor.i18next.t(`${name}:show_list`);
back.innerHTML = `<img class="svg_icon" src="${imgPath}/library.svg" alt="icon" width="16" height="16" />` + svgEditor.i18next.t(`${name}:show_list`);
leftBlock.appendChild(back);
back.addEventListener('click', function () {
frame.setAttribute('src', 'about:blank');
@ -521,7 +523,7 @@ export default {
// Add the button and its handler(s)
const buttonTemplate = document.createElement("template");
buttonTemplate.innerHTML = `
<se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
<se-menu-item id="tool_imagelib" label="Image library" src="${imgPath}/library.svg"></se-menu-item>
`;
insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
$id('tool_imagelib').addEventListener("click", () => {

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

@ -31,6 +31,8 @@ export default {
name,
async init() {
const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
await loadExtensionTranslation(svgEditor);
const {
svgCanvas
@ -42,7 +44,6 @@ export default {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
};
return {
newUI: true,
name: svgEditor.i18next.t(`${name}:name`),
callback() {
const btitle = svgEditor.i18next.t(`${name}:buttons.0.title`);
@ -50,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="./images/panning.svg"></se-button>
<se-button id="ext-panning" title="${btitle}" src="${imgPath}/panning.svg"></se-button>
`;
insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
$id('ext-panning').addEventListener("click", () => {

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

@ -29,6 +29,7 @@ export default {
name,
async init(_S) {
const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
const { ChangeElementCommand } = _S; // , svgcontent,
const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); };
const { svgCanvas } = svgEditor;
@ -86,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="./images/star.svg">
<se-button id="tool_star" title="${title_star}" src="${imgPath}/star.svg">
</se-button>
<se-button id="tool_polygon" title="${title_polygon}" src="./images/polygon.svg">
<se-button id="tool_polygon" title="${title_polygon}" src="${imgPath}/polygon.svg">
</se-button>
</se-flyingbutton>
`;

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

@ -27,6 +27,7 @@ export default {
name,
async init () {
const svgEditor = this;
const { imgPath } = svgEditor.configObj.curConfig;
const canv = svgEditor.svgCanvas;
const { $id } = canv;
const svgroot = canv.getRootElem();
@ -46,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="./images/shapelib.svg"></se-explorerbutton>
src="${imgPath}/shapelib.svg"></se-explorerbutton>
`;
canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9);
$id('tool_shapelib').addEventListener("click", () => {

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

@ -164,11 +164,13 @@ class BottomPanel {
// register actions for Bottom panel
const template = document.createElement('template');
const { i18next } = this.editor;
const { imgPath } = this.editor.configObj.curConfig;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<div id="tools_bottom">
<!-- Zoom buttons -->
<se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
<se-zoom id="zoom" src="${imgPath}/zoom.svg" title="Change zoom level" inputsize="40px">
<div value="1000">1000</div>
<div value="400">400</div>
<div value="200">200</div>
@ -180,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="./images/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="./images/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
<se-colorpicker id="fill_color" src="${imgPath}/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
</se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
<se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="24px">
@ -192,23 +194,23 @@ class BottomPanel {
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
</se-list>
<se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="24px">
<se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="./images/linejoin_miter.svg"
<se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
height="22px"></img></se-list-item>
<se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="./images/linejoin_round.svg"
<se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg"
height="22px"></img></se-list-item>
<se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="./images/linejoin_bevel.svg"
<se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg"
height="22px"></img></se-list-item>
</se-list>
<se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="24px">
<se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="./images/linecap_butt.svg"
<se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg"
height="22px"></img></se-list-item>
<se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="./images/linecap_square.svg"
<se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg"
height="22px"></img></se-list-item>
<se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="./images/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>
</se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}"
src="./images/opacity.svg"></se-spin-input>
src="${imgPath}/opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette>
</div>
`;

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

@ -114,18 +114,20 @@ class LayersPanel {
init() {
const template = document.createElement("template");
const { i18next } = this.editor;
const { imgPath } = this.editor.configObj.curConfig;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<div id="sidepanels">
<div id="layerpanel">
<h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
<fieldset id="layerbuttons">
<se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="./images/new.svg"></se-button>
<se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="./images/delete.svg"></se-button>
<se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="./images/text.svg"></se-button>
<se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="./images/go_up.svg"></se-button>
<se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="./images/go_down.svg"></se-button>
<se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="./images/context_menu.svg">
<se-button id="layer_new" title="${i18next.t('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_rename" title="${i18next.t('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_down" title="${i18next.t('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>
</fieldset>
<table id="layerlist">

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

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

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

@ -747,6 +747,7 @@ class TopPanel {
// add Top panel
const template = document.createElement("template");
const { i18next } = this.editor;
const { imgPath } = this.editor.configObj.curConfig;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<div id="tools_top">
@ -756,39 +757,39 @@ class TopPanel {
id="tool_source"
title="${i18next.t('tools.tool_source')}"
shortcut="U"
src="./images/source.svg"
src="${imgPath}/source.svg"
></se-button>
<se-button
id="tool_wireframe"
title="${i18next.t('tools.wireframe_mode')}"
shortcut="F"
src="./images/wireframe.svg"
src="${imgPath}/wireframe.svg"
></se-button>
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>
<se-button id="tool_undo" title="${i18next.t('tools.undo')}" shortcut="Z" src="./images/undo.svg" disabled></se-button>
<se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="./images/redo.svg" disabled></se-button>
<se-button id="tool_undo" title="${i18next.t('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>
</div> <!-- history_panel -->
<!-- Buttons when a single element is selected -->
<div id="selected_panel">
<div class="toolset">
<div class="tool_sep"></div>
<se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="./images/clone.svg"></se-button>
<se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="./images/delete.svg">
<se-button id="tool_clone" title="${i18next.t('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>
</div>
<div class="toolset">
<div class="tool_sep"></div>
<se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
<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_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
<se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg">
</se-button>
</div>
<div class="toolset">
<se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="./images/to_path.svg"></se-button>
<se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="./images/reorient.svg"></se-button>
<se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="./images/globe_link.svg"></se-button>
<se-button id="tool_topath" title="${i18next.t('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_make_link" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
</div>
<div class="toolset">
<div class="tool_sep"></div>
@ -797,28 +798,28 @@ class TopPanel {
<div class="toolset">
<se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input>
</div>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/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>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/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>
<se-list id="tool_position" title="${i18next.t('tools.align_to_page')}" label="" width="22px" height="24px">
<se-list-item id="tool_posleft" value="l">
<img title="${i18next.t('tools.align_left')}" src="./images/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 id="tool_poscenter" value="c">
<img title="${i18next.t('tools.align_center')}" src="./images/align_center.svg" height="22px">
<img title="${i18next.t('tools.align_center')}" src="${imgPath}/align_center.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posright" value="r">
<img title="${i18next.t('tools.align_right')}" src="./images/align_right.svg" height="22px">
<img title="${i18next.t('tools.align_right')}" src="${imgPath}/align_right.svg" height="22px">
</se-list-item>
<se-list-item id="tool_postop" value="t">
<img title="${i18next.t('tools.align_top')}" src="./images/align_top.svg" height="22px">
<img title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posmiddle" value="m">
<img title="${i18next.t('tools.align_middle')}" src="./images/align_middle.svg" height="22px">
<img title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posbottom" value="b">
<img title="${i18next.t('tools.align_bottom')}" src="./images/align_bottom.svg" height="22px">
<img title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg" height="22px">
</se-list-item>
</se-list>
<div id="xy_panel" class="toolset">
@ -831,19 +832,19 @@ class TopPanel {
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="./images/clone.svg"></se-button>
<se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="${imgPath}/clone.svg"></se-button>
<se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace"
src="./images/delete.svg"></se-button>
src="${imgPath}/delete.svg"></se-button>
<div class="tool_sep"></div>
<se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="./images/group_elements.svg">
<se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="${imgPath}/group_elements.svg">
</se-button>
<se-button id="tool_make_link_multi" title="${i18next.t('tools.make_link')}" src="./images/globe_link.svg"></se-button>
<se-button id="tool_align_left" title="${i18next.t('tools.align_left')}" src="./images/align_left.svg"></se-button>
<se-button id="tool_align_center" title="${i18next.t('tools.align_center')}" src="./images/align_center.svg"></se-button>
<se-button id="tool_align_right" title="${i18next.t('tools.align_right')}" src="./images/align_right.svg"></se-button>
<se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="./images/align_top.svg"></se-button>
<se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="./images/align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="./images/align_bottom.svg"></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_align_left" title="${i18next.t('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_right" title="${i18next.t('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_middle" title="${i18next.t('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-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="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
@ -860,7 +861,7 @@ class TopPanel {
</se-spin-input>
</div>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}"
data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div id="image_panel">
<div class="toolset">
@ -917,15 +918,15 @@ class TopPanel {
</div> <!-- line_panel -->
<div id="text_panel">
<div class="toolset">
<se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="./images/bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="./images/italic.svg" shortcut="I"></se-button>
<se-button id="tool_bold" title="${i18next.t('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>
</div>
<div class="toolset">
<se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="./images/anchor_start.svg">
<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_middle" title="${i18next.t('properties.text_anchor_middle')}" src="./images/anchor_middle.svg">
<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_end" title="${i18next.t('properties.text_anchor_end')}" src="./images/anchor_end.svg">
<se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg">
</se-button>
</div>
<se-list id="tool_font_family" label="Font:">
@ -939,7 +940,7 @@ 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="${i18next.t('properties.font_size')}"
src="./images/fontsize.svg"></se-spin-input>
src="${imgPath}/fontsize.svg"></se-spin-input>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35" />
</div> <!-- text_panel -->
@ -954,11 +955,11 @@ class TopPanel {
</div> <!-- container_panel -->
<div id="use_panel">
<se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}"
src="./images/unlink_use.svg">
src="${imgPath}/unlink_use.svg">
</se-button>
</div> <!-- use_panel -->
<div id="g_panel">
<se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="./images/ungroup.svg">
<se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="${imgPath}/ungroup.svg">
</se-button>
</div> <!-- g_panel -->
<!-- For anchor elements -->
@ -970,7 +971,7 @@ class TopPanel {
</div> <!-- a_panel -->
<div id="path_node_panel">
<div class="tool_sep"></div>
<se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="./images/tool_node_link.svg" pressed>
<se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="${imgPath}/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="${i18next.t('properties.node_x')}" label="x:">
@ -981,11 +982,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="${i18next.t('tools.node_clone')}" src="./images/tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="./images/tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="./images/tool_openclose_path.svg">
<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_delete" title="${i18next.t('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>
<se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="./images/tool_add_subpath.svg"></se-button>
<se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="${imgPath}/tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel -->
<div id="cur_context_panel"></div>
</div>

2
src/svgcanvas/select.js
View File

@ -365,7 +365,7 @@ export class SelectorManager {
r: gripRadius,
stroke: '#22C',
'stroke-width': 2,
style: 'cursor:url(' + config_.imgPath + 'rotate.svg) 12 12, auto;'
style: `cursor:url(${config_.imgPath}/rotate.svg) 12 12, auto;`
}
});
this.selectorGripsGroup.append(this.rotateGrip);

2
src/svgcanvas/svgcanvas.js
View File

@ -804,7 +804,7 @@ class SvgCanvas {
const removedElements = {};
// String with image URL of last loadable image
let lastGoodImgUrl = curConfig.imgPath + 'logo.svg';
let lastGoodImgUrl = `${curConfig.imgPath}/logo.svg`;
// Boolean indicating whether or not a draw action has been started
let started = false;
// String with an element's initial transform attribute value