From cfb47fa952782480937940ec20a72063e17f56ff Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Sat, 7 Aug 2021 00:06:58 +0200 Subject: [PATCH 01/17] change to css grid --- src/editor/Editor.js | 36 +- src/editor/EditorStartup.js | 82 +-- src/editor/MainMenu.js | 1 - src/editor/Rulers.js | 2 +- src/editor/components/seInput.js | 7 + src/editor/components/seSpinInput.js | 7 + .../ext-overview_window.js | 10 +- .../extensions/ext-storage/ext-storage.js | 2 +- src/editor/index.html | 6 +- src/editor/panels/BottomPanel.js | 8 +- src/editor/panels/LayersPanel.js | 4 +- src/editor/panels/LeftPanel.js | 2 +- src/editor/panels/TopPanel.js | 468 +++++++++--------- src/editor/svgedit.css | 190 +++---- src/editor/templates/editorTemplate.js | 45 +- src/editor/templates/rulersTemplate.js | 42 +- 16 files changed, 422 insertions(+), 490 deletions(-) diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 2e6029f4..38a93a24 100644 --- a/src/editor/Editor.js +++ b/src/editor/Editor.js @@ -457,23 +457,23 @@ class Editor extends EditorStartup { */ updateCanvas(center, newCtr) { const zoom = this.svgCanvas.getZoom(); - const wArea = this.workarea; + const { workarea } = this; const cnvs = $id("svgcanvas"); - let w = parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")); let h = parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")); + let w = parseFloat(getComputedStyle(workarea, null).width.replace("px", "")); let h = parseFloat(getComputedStyle(workarea, null).height.replace("px", "")); const wOrig = w; const hOrig = h; const oldCtr = { - x: wArea.scrollLeft + wOrig / 2, - y: wArea.scrollTop + hOrig / 2 + x: workarea.scrollLeft + wOrig / 2, + y: workarea.scrollTop + hOrig / 2 }; const multi = this.configObj.curConfig.canvas_expansion; w = Math.max(wOrig, this.svgCanvas.contentW * zoom * multi); h = Math.max(hOrig, this.svgCanvas.contentH * zoom * multi); if (w === wOrig && h === hOrig) { - this.workarea.style.overflow = 'hidden'; + workarea.style.overflow = 'hidden'; } else { - this.workarea.style.overflow = 'scroll'; + workarea.style.overflow = 'scroll'; } const oldCanY = parseFloat(getComputedStyle(cnvs, null).height.replace("px", "")) / 2; @@ -508,22 +508,22 @@ class Editor extends EditorStartup { if (center) { // Go to top-left for larger documents - if (this.svgCanvas.contentW > parseFloat(getComputedStyle(wArea, null).width.replace("px", ""))) { + if (this.svgCanvas.contentW > parseFloat(getComputedStyle(workarea, null).width.replace("px", ""))) { // Top-left - this.workarea.scrollLeft = offset.x - 10; - this.workarea.scrollTop = offset.y - 10; + workarea.scrollLeft = offset.x - 10; + workarea.scrollTop = offset.y - 10; } else { // Center - wArea.scrollLeft = scrollX; - wArea.scrollTop = scrollY; + workarea.scrollLeft = scrollX; + workarea.scrollTop = scrollY; } } else { - wArea.scrollLeft = newCtr.x - wOrig / 2; - wArea.scrollTop = newCtr.y - hOrig / 2; + workarea.scrollLeft = newCtr.x - wOrig / 2; + workarea.scrollTop = newCtr.y - hOrig / 2; } if (this.configObj.curConfig.showRulers) { this.rulers.updateRulers(cnvs, zoom); - this.workarea.scroll(); + workarea.scroll(); } if (this.configObj.urldata.storagePrompt !== true && this.storagePromptState === 'ignore') { @@ -706,8 +706,7 @@ class Editor extends EditorStartup { */ zoomChanged(win, bbox, autoCenter) { const scrbar = 15; - const wArea = this.workarea; - const zInfo = this.svgCanvas.setBBoxZoom(bbox, parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) - scrbar, parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) - scrbar); + const zInfo = this.svgCanvas.setBBoxZoom(bbox, parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")) - scrbar, parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")) - scrbar); if (!zInfo) { return; } const zoomlevel = zInfo.zoom; const bb = zInfo.bbox; @@ -857,9 +856,10 @@ class Editor extends EditorStartup { * @returns {void} */ pasteInCenter() { + const { workarea } = this; const zoom = this.svgCanvas.getZoom(); - const x = (this.workarea.scrollLeft + parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")) / 2) / zoom - this.svgCanvas.contentW; - const y = (this.workarea.scrollTop + parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")) / 2) / zoom - this.svgCanvas.contentH; + const x = (workarea.scrollLeft + parseFloat(getComputedStyle(workarea, null).width.replace("px", "")) / 2) / zoom - this.svgCanvas.contentW; + const y = (workarea.scrollTop + parseFloat(getComputedStyle(workarea, null).height.replace("px", "")) / 2) / zoom - this.svgCanvas.contentH; this.svgCanvas.pasteElements('point', x, y); } diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index c12de021..99f9c471 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -41,7 +41,7 @@ const readySignal = () => { } }; -const { $id } = SvgCanvas; +const { $id, $qq } = SvgCanvas; /** * @@ -53,7 +53,7 @@ class EditorStartup { constructor (div) { this.extensionsAdded = false; this.messageQueue = []; - this.$svgEditor = div??$id('svg_editor'); + this.$container = div??$id('svg_editor'); } /** * Auto-run after a Promise microtask. @@ -65,43 +65,44 @@ class EditorStartup { this.storage = window.localStorage; } this.configObj.load(); - const self = this; const { i18next } = await putLocale(this.configObj.pref('lang'), this.goodLangs); this.i18next = i18next; await import(`./components/index.js`); await import(`./dialogs/index.js`); - // allow to prepare the dom without display - this.$svgEditor.style.visibility = 'hidden'; try { // add editor components to the DOM - this.$svgEditor.append(editorTemplate.content.cloneNode(true)); + this.$container.append(editorTemplate.content.cloneNode(true)); + this.$svgEditor = $qq('.svg_editor'); + // allow to prepare the dom without display + // JFH this.$svgEditor.style.visibility = 'hidden'; + this.workarea = $id('workarea'); // Image props dialog added to DOM const newSeImgPropDialog = document.createElement('se-img-prop-dialog'); newSeImgPropDialog.setAttribute('id', 'se-img-prop'); - this.$svgEditor.append(newSeImgPropDialog); + this.$container.append(newSeImgPropDialog); newSeImgPropDialog.init(this.i18next); // editor prefences dialoag added to DOM const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog'); newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs'); - this.$svgEditor.append(newSeEditPrefsDialog); + this.$container.append(newSeEditPrefsDialog); newSeEditPrefsDialog.init(this.i18next); // canvas menu added to DOM const dialogBox = document.createElement('se-cmenu_canvas-dialog'); dialogBox.setAttribute('id', 'se-cmenu_canvas'); - this.$svgEditor.append(dialogBox); + this.$container.append(dialogBox); dialogBox.init(this.i18next); // alertDialog added to DOM const alertBox = document.createElement('se-alert-dialog'); alertBox.setAttribute('id', 'se-alert-dialog'); - this.$svgEditor.append(alertBox); + this.$container.append(alertBox); // promptDialog added to DOM const promptBox = document.createElement('se-prompt-dialog'); promptBox.setAttribute('id', 'se-prompt-dialog'); - this.$svgEditor.append(promptBox); + this.$container.append(promptBox); // Export dialog added to DOM const exportDialog = document.createElement('se-export-dialog'); exportDialog.setAttribute('id', 'se-export-dialog'); - this.$svgEditor.append(exportDialog); + this.$container.append(exportDialog); exportDialog.init(this.i18next); } catch (err) { console.error(err); @@ -123,8 +124,7 @@ class EditorStartup { this.mainMenu.init(); const { undoMgr } = this.svgCanvas; - this.workarea = document.getElementById('workarea'); - this.canvMenu = document.getElementById('se-cmenu_canvas'); + this.canvMenu = $id('se-cmenu_canvas'); this.exportWindow = null; this.defaultImageURL = this.configObj.curConfig.imgPath + 'logo.svg'; const zoomInIcon = 'crosshair'; @@ -218,9 +218,9 @@ class EditorStartup { // fired when user wants to move elements to another layer let promptMoveLayerOnce = false; - $id('selLayerNames').addEventListener('change', function(evt) { + $id('selLayerNames').addEventListener('change', (evt) => { const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value; - const confirmStr = self.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer); + const confirmStr = this.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer); /** * @param {boolean} ok * @returns {void} @@ -228,9 +228,9 @@ class EditorStartup { const moveToLayer = (ok) => { if (!ok) { return; } promptMoveLayerOnce = true; - self.svgCanvas.moveSelectedToLayer(destLayer); - self.svgCanvas.clearSelection(); - self.layersPanel.populateLayers(); + this.svgCanvas.moveSelectedToLayer(destLayer); + this.svgCanvas.clearSelection(); + this.layersPanel.populateLayers(); }; if (destLayer) { if (promptMoveLayerOnce) { @@ -244,12 +244,12 @@ class EditorStartup { } } }); - $id('tool_font_family').addEventListener('change', function(evt) { - self.svgCanvas.setFontFamily(evt.detail.value); + $id('tool_font_family').addEventListener('change', (evt) => { + this.svgCanvas.setFontFamily(evt.detail.value); }); - $id('seg_type').addEventListener('change', function(evt) { - self.svgCanvas.setSegType(evt.currentTarget.value); + $id('seg_type').addEventListener('change', (evt) => { + this.svgCanvas.setSegType(evt.currentTarget.value); }); function addListenerMulti(element, eventNames, listener) { @@ -259,35 +259,33 @@ class EditorStartup { } } - addListenerMulti($id('text'), 'keyup input', function(evt){ - self.svgCanvas.setTextContent(evt.currentTarget.value); + addListenerMulti($id('text'), 'keyup input', (evt) => { + this.svgCanvas.setTextContent(evt.currentTarget.value); }); - $id('image_url').addEventListener('change', function(evt) { - self.setImageURL(evt.currentTarget.value); + $id('image_url').addEventListener('change', (evt) => { + this.setImageURL(evt.currentTarget.value); }); - $id('link_url').addEventListener('change', function(evt) { + $id('link_url').addEventListener('change', (evt) => { if (evt.currentTarget.value.length) { - self.svgCanvas.setLinkURL(evt.currentTarget.value); + this.svgCanvas.setLinkURL(evt.currentTarget.value); } else { - self.svgCanvas.removeHyperlink(); + this.svgCanvas.removeHyperlink(); } }); - $id('g_title').addEventListener('change', function(evt) { - self.svgCanvas.setGroupTitle(evt.currentTarget.value); + $id('g_title').addEventListener('change', (evt) => { + this.svgCanvas.setGroupTitle(evt.currentTarget.value); }); - const wArea = this.workarea; - let lastX = null; let lastY = null; let panning = false; let keypan = false; - $id('svgcanvas').addEventListener('mouseup', function(evt) { + $id('svgcanvas').addEventListener('mouseup', (evt) => { if (panning === false) { return true; } - wArea.scrollLeft -= (evt.clientX - lastX); - wArea.scrollTop -= (evt.clientY - lastY); + this.workarea.scrollLeft -= (evt.clientX - lastX); + this.workarea.scrollTop -= (evt.clientY - lastY); lastX = evt.clientX; lastY = evt.clientY; @@ -298,8 +296,8 @@ class EditorStartup { $id('svgcanvas').addEventListener('mousemove', function(evt) { if (panning === false) { return true; } - wArea.scrollLeft -= (evt.clientX - lastX); - wArea.scrollTop -= (evt.clientY - lastY); + this.workarea.scrollLeft -= (evt.clientX - lastX); + this.workarea.scrollTop -= (evt.clientY - lastY); lastX = evt.clientX; lastY = evt.clientY; @@ -535,7 +533,11 @@ class EditorStartup { $id('tool_wireframe').click(); } - $id('rulers').style.display = (this.configObj.curConfig.showRulers) ? 'block' : 'none'; + if (this.configObj.curConfig.showRulers) { + $id('rulers').style.removeProperty('display'); + } else { + $id('rulers').style.display = 'none'; + } if (this.configObj.curConfig.showRulers) { $editDialog.setAttribute('showrulers', true); diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index 7d16be70..17db34cd 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -306,7 +306,6 @@ class MainMenu { // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` - diff --git a/src/editor/Rulers.js b/src/editor/Rulers.js index c263214f..e1a49c23 100644 --- a/src/editor/Rulers.js +++ b/src/editor/Rulers.js @@ -18,7 +18,7 @@ class Rulers { this.svgCanvas = editor.svgCanvas; this.editor = editor; // add rulers component to the DOM - this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true)); + this.editor.workarea.append(rulersTemplate.content.cloneNode(true)); } /** * @type {Module} diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js index a4cd4d8f..708bc413 100644 --- a/src/editor/components/seInput.js +++ b/src/editor/components/seInput.js @@ -3,6 +3,11 @@ import 'elix/define/Input.js'; const template = document.createElement('template'); template.innerHTML = ` +
icon label +
`; /** diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index b80ffcb3..67fb5657 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -3,6 +3,11 @@ import '../dialogs/se-elix/define/NumberSpinBox.js'; const template = document.createElement('template'); template.innerHTML = ` +
icon label +
`; /** diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js index 582b7963..b045b01a 100644 --- a/src/editor/extensions/ext-overview_window/ext-overview_window.js +++ b/src/editor/extensions/ext-overview_window/ext-overview_window.js @@ -51,11 +51,11 @@ export default { // Define dynamic animation of the view box. const updateViewBox = function () { - const warea = document.getElementById('workarea'); - const portHeight = parseFloat(getComputedStyle(warea, null).height.replace("px", "")); - const portWidth = parseFloat(getComputedStyle(warea, null).width.replace("px", "")); - const portX = warea.scrollLeft; - const portY = warea.scrollTop; + const { workarea } = svgEditor; + const portHeight = parseFloat(getComputedStyle(workarea, null).height.replace("px", "")); + const portWidth = parseFloat(getComputedStyle(workarea, null).width.replace("px", "")); + const portX = workarea.scrollLeft; + const portY = workarea.scrollTop; const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", "")); const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", "")); const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", "")); diff --git a/src/editor/extensions/ext-storage/ext-storage.js b/src/editor/extensions/ext-storage/ext-storage.js index 739acb68..dc3136d0 100644 --- a/src/editor/extensions/ext-storage/ext-storage.js +++ b/src/editor/extensions/ext-storage/ext-storage.js @@ -82,7 +82,7 @@ export default { // storageDialog added to DOM const storageBox = document.createElement('se-storage-dialog'); storageBox.setAttribute('id', 'se-storage-dialog'); - svgEditor.$svgEditor.append(storageBox); + svgEditor.$container.append(storageBox); storageBox.init(svgEditor.i18next); // manage the change in the storageDialog diff --git a/src/editor/index.html b/src/editor/index.html index 698a9096..9c2d1b8f 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -25,7 +25,7 @@ - - + - -

Select an image:

-smiley.svg -
-logo.svg - +

Select an image:

+ + smiley.svg + +
+ + logo.svg + - + + \ No newline at end of file From 90ce030304681159ccfc42b79dbf7439f0b3354f Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Mon, 9 Aug 2021 17:35:07 +0200 Subject: [PATCH 07/17] minimum 2 lines for toolbar on smaller screen --- src/editor/svgedit.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 9dec2a39..f0ac8acb 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -32,6 +32,13 @@ height: 100%; } +/* on smaller screen, allow 2 lines for the toolbar */ +@media screen and (max-width:1250px) { + .svg_editor { + grid-template-rows: minmax(80px, auto) 15px 1fr 40px; + } +} + #svgroot { user-select: none; position: absolute; From 4557d338c152dbd76db2d9e5256ec6135c42c690 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Mon, 9 Aug 2021 17:35:34 +0200 Subject: [PATCH 08/17] no more png so remove optimizer from project. --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index a7863aa1..4481fe2b 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "build-docs": "run-s -c build-docs-remove build-docs-create", "build-and-open-docs-no-start": "run-s build-docs open-docs-no-start", "build-and-open-docs": "run-s build-docs open-docs", - "compress-images": "imageoptim \"src/editor/extensions/*.png\" \"src/editor/spinbtn/*.png\" \"src/editor/jgraduate/images/*.{png,gif}\" \"src/editor/images/*.png\"", "remark": "remark -q -f .", "prepublishOnly": "run-s build-docs build" }, @@ -132,7 +131,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", From 86c0e9cf03a2d04f96fba01e941b9aee78cd0f8c Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 11 Aug 2021 10:16:00 +0200 Subject: [PATCH 09/17] image folder variable used consistently --- package-lock.json | 367 +----------------- src/editor/Editor.js | 15 +- src/editor/EditorStartup.js | 2 +- src/editor/MainMenu.js | 19 +- src/editor/components/seButton.js | 6 +- src/editor/components/seColorPicker.js | 2 +- src/editor/components/seDropdown.js | 4 +- src/editor/components/seExplorerButton.js | 2 +- src/editor/components/seFlyingButton.js | 2 +- src/editor/components/seInput.js | 2 +- src/editor/components/seMenuItem.js | 2 +- src/editor/components/seZoom.js | 27 +- .../extensions/ext-connector/ext-connector.js | 3 +- .../ext-eyedropper/ext-eyedropper.js | 3 +- src/editor/extensions/ext-grid/ext-grid.js | 4 +- .../ext-helloworld/ext-helloworld.js | 3 +- .../extensions/ext-imagelib/ext-imagelib.js | 6 +- .../extensions/ext-panning/ext-panning.js | 5 +- .../extensions/ext-polystar/ext-polystar.js | 5 +- .../extensions/ext-shapes/ext-shapes.js | 3 +- src/editor/panels/BottomPanel.js | 22 +- src/editor/panels/LayersPanel.js | 14 +- src/editor/panels/LeftPanel.js | 28 +- src/editor/panels/TopPanel.js | 87 +++-- src/svgcanvas/select.js | 2 +- src/svgcanvas/svgcanvas.js | 2 +- 26 files changed, 136 insertions(+), 501 deletions(-) diff --git a/package-lock.json b/package-lock.json index 27f67cba..432124e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 38a93a24..8121efeb 100644 --- a/src/editor/Editor.js +++ b/src/editor/Editor.js @@ -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); } } diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index abae6c0a..e9a135ef 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -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'; diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index f6b8355f..1e12c8a1 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -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 = ` - - - - - - - - - + + + + + + + + + `; $id('tools_top').prepend(template.content.cloneNode(true)); diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index 52e18f7b..56ffbb4d 100644 --- a/src/editor/components/seButton.js +++ b/src/editor/components/seButton.js @@ -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 = `
- icon + icon
`; /** diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 5bb03156..27d7875a 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -638,7 +638,7 @@ div.jGraduate_Slider img { }
- +
diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js index aaf1039b..d150b4e4 100644 --- a/src/editor/components/seDropdown.js +++ b/src/editor/components/seDropdown.js @@ -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` - icon + icon `.cloneNode(true)); // change the style so it fits in our toolbar result.content.append( diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index f64ddc00..c3eb2f7f 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -85,7 +85,7 @@ template.innerHTML = `
- icon + icon
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 45944d1e..b083d211 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -71,7 +71,7 @@ template.innerHTML = `
- icon + icon
diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js index 708bc413..27bb57c4 100644 --- a/src/editor/components/seInput.js +++ b/src/editor/components/seInput.js @@ -26,7 +26,7 @@ template.innerHTML = ` }
- icon + icon label
diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index 67cbd9d7..d005fb8e 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -7,7 +7,7 @@ template.innerHTML = `
- icon + icon
diff --git a/src/editor/components/seZoom.js b/src/editor/components/seZoom.js index 05f90ad0..34cc54d9 100644 --- a/src/editor/components/seZoom.js +++ b/src/editor/components/seZoom.js @@ -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` - icon + icon + `.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; - } -*/ diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js index e06ea039..45278681 100644 --- a/src/editor/extensions/ext-connector/ext-connector.js +++ b/src/editor/extensions/ext-connector/ext-connector.js @@ -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 = ` - + `; svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13); $id('mode_connect').addEventListener("click", () => { diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index 88b9d166..d10f0aec 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js @@ -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 = ` - + `; svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12); $id('tool_eyedropper').addEventListener("click", () => { diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js index 3a5e2ca5..059188c5 100644 --- a/src/editor/extensions/ext-grid/ext-grid.js +++ b/src/editor/extensions/ext-grid/ext-grid.js @@ -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 = ` - + `; $id('editor_panel').append(buttonTemplate.content.cloneNode(true)); $id('view_grid').addEventListener("click", () => { svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid; gridUpdate(); }); - if (showGrid) { gridUpdate(); } diff --git a/src/editor/extensions/ext-helloworld/ext-helloworld.js b/src/editor/extensions/ext-helloworld/ext-helloworld.js index 43bc7598..297a70eb 100644 --- a/src/editor/extensions/ext-helloworld/ext-helloworld.js +++ b/src/editor/extensions/ext-helloworld/ext-helloworld.js @@ -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 = ` - + `; $id('tools_left').append(buttonTemplate.content.cloneNode(true)); $id('hello_world').addEventListener("click", () => { diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 5f1c9aa2..09dc11f8 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -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 = 'icon' + svgEditor.i18next.t(`${name}:show_list`); + back.innerHTML = `icon` + 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 = ` - + `; insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true)); $id('tool_imagelib').addEventListener("click", () => { diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js index 299b6223..8ec7cd48 100644 --- a/src/editor/extensions/ext-panning/ext-panning.js +++ b/src/editor/extensions/ext-panning/ext-panning.js @@ -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 = ` - + `; insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true)); $id('ext-panning').addEventListener("click", () => { diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index f7bcbead..ce8801fc 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -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 = ` - + - + `; diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js index d7dfcad3..a415663c 100644 --- a/src/editor/extensions/ext-shapes/ext-shapes.js +++ b/src/editor/extensions/ext-shapes/ext-shapes.js @@ -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 = ` + src="${imgPath}/shapelib.svg"> `; canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9); $id('tool_shapelib').addEventListener("click", () => { diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 5581baa5..2137ec5c 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -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 = `
- +
1000
400
200
@@ -180,8 +182,8 @@ class BottomPanel {
${i18next.t('tools.fit_to_layer_content')}
${i18next.t('tools.fit_to_all')}
 - - + + @@ -192,23 +194,23 @@ class BottomPanel { - .. - - - - - - + src="${imgPath}/opacity.svg">
`; diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 5a15a891..5dc8c259 100644 --- a/src/editor/panels/LayersPanel.js +++ b/src/editor/panels/LayersPanel.js @@ -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 = `

${i18next.t('layers.layers')}

- - - - - - + + + + + +
diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js index a06e1667..8a16642e 100644 --- a/src/editor/panels/LeftPanel.js +++ b/src/editor/panels/LeftPanel.js @@ -196,50 +196,52 @@ class LeftPanel { */ init() { const { i18next } = this.editor; + const { imgPath } = this.editor.configObj.curConfig; + // add Left panel const leftMenu = [ { - menu: ``, + menu: ``, position: 1 }, { - menu: ``, + menu: ``, position: 2 }, { - menu: ``, + menu: ``, position: 3 }, { - menu: ``, + menu: ``, position: 4 }, { - menu: ``, + menu: ``, position: 5 }, { menu: ` - - - + + + `, position: 6 }, { menu: ` - - - + + + `, position: 7 }, { - menu: ``, + menu: ``, position: 8 }, { - menu: ``, + menu: ``, position: 11 } ]; diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index ca22d2c9..4d969bd6 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -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 = `
@@ -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" >
- - + +
- - + +
- + - +
- - - + + +
@@ -797,28 +798,28 @@ class TopPanel {
- - - + - + - + - + - + - +
@@ -831,19 +832,19 @@ class TopPanel {
- + + src="${imgPath}/delete.svg">
- + - - - - - - - + + + + + + + ${i18next.t('tools.selected_objects')} ${i18next.t('tools.largest_object')} @@ -860,7 +861,7 @@ class TopPanel {
+ data-attr="Corner Radius" src="${imgPath}/c_radius.svg">
@@ -917,15 +918,15 @@ class TopPanel {
- - + +
- + - + - +
@@ -939,7 +940,7 @@ class TopPanel { ${i18next.t('properties.times')} + src="${imgPath}/fontsize.svg">
@@ -954,11 +955,11 @@ class TopPanel {
+ src="${imgPath}/unlink_use.svg">
- +
@@ -970,7 +971,7 @@ class TopPanel {
- +
@@ -981,11 +982,11 @@ class TopPanel { - - - + + + - +
diff --git a/src/svgcanvas/select.js b/src/svgcanvas/select.js index d0c10f85..8b99bfba 100644 --- a/src/svgcanvas/select.js +++ b/src/svgcanvas/select.js @@ -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); diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index 8c442de9..f4ac97ff 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -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 From b5ee544b0926e7323f9a2e6dcf5467243d9501c2 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 11 Aug 2021 10:16:23 +0200 Subject: [PATCH 10/17] palette using flex --- src/editor/components/sePalette.js | 33 ++---------------------------- src/editor/svgedit.css | 18 ++-------------- 2 files changed, 4 insertions(+), 47 deletions(-) diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js index 91260091..5c6ecf31 100644 --- a/src/editor/components/sePalette.js +++ b/src/editor/components/sePalette.js @@ -24,10 +24,7 @@ template.innerHTML = ` } #palette_holder { overflow: hidden; - padding: 5px; - position: absolute; - right: 15px; - height: 16px; + padding: 4px; background: #f0f0f0; border-radius: 3px; z-index: 2; @@ -48,33 +45,7 @@ template.innerHTML = ` div.palette_item:first-child { background: white; } - @media screen and (max-width:1100px) { - #palette_holder { - left: 410px; - overflow-x: scroll; - padding: 0 5px; - margin-top: 2px; - height: 22px; - } - } - @media screen and (max-width:1250px) { - #palette_holder { - left: 560px; - overflow-x: scroll; - padding: 0 5px; - margin-top: 2px; - height: 22px; - } - } - @media screen and (max-width:540px) { - #palette_holder { - left: 0px; - overflow-x: scroll; - padding: 0 5px; - margin-top: 32px; - height: 22px; - } - } +
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index f0ac8acb..94e22ac1 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -333,25 +333,11 @@ hr { #tools_bottom { grid-area: bottom; - overflow: visible; -} - -#tools_bottom * { - float: left; - margin-right: 2px; -} - -#tools_bottom se-spin-input { - float: left; - vertical-align: middle; + overflow: scroll; display: flex; align-items: center; } -#tools_bottom elix-dropdown-list { - width: 22px; -} - /*—————————————————————————————*/ #tools_left { @@ -543,7 +529,7 @@ input[type=text] { } #palette { - float: right; + margin-left:auto; } #stroke_expand { From 30d5f7d3d36e4353de9867ef4aeaa6d9b9fddd92 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Thu, 12 Aug 2021 09:30:52 +0200 Subject: [PATCH 11/17] fix top toolbar css --- src/editor/components/seSpinInput.js | 7 +++---- src/editor/panels/TopPanel.js | 15 ++++++--------- src/editor/svgedit.css | 3 ++- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 67fb5657..8e25fa95 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -13,13 +13,12 @@ template.innerHTML = ` right: -4px; } span { - bottom: -3px; + bottom: -0.5em; right: -4px; position: relative; - margin-left: 4px; - margin-right: 4px; + margin-left: -4px; + margin-right: 1px; color: #fff; - vertical-align: ; } elix-number-spin-box { background-color: var(--input-color); diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index 4d969bd6..942950d8 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -797,12 +797,11 @@ class TopPanel {
-
- - + @@ -822,7 +821,9 @@ class TopPanel { -
+ +
+
@@ -947,11 +948,7 @@ class TopPanel {
- - +
Date: Thu, 12 Aug 2021 10:02:19 +0200 Subject: [PATCH 12/17] Update TopPanel.js --- src/editor/panels/TopPanel.js | 47 ++++++++++++++--------------------- 1 file changed, 18 insertions(+), 29 deletions(-) diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index 942950d8..079213cc 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -151,11 +151,6 @@ class TopPanel { * @returns {void} */ updateContextPanel() { - const setInputWidth = (elem) => { - const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300); - elem.style.width = w + 'px'; - }; - let elem = this.editor.selectedElement; // If element has just been deleted, consider it null if (!isNullish(elem) && !elem.parentNode) { @@ -371,7 +366,6 @@ class TopPanel { const title = this.editor.svgCanvas.getTitle(); const label = $id("g_title"); label.value = title; - setInputWidth(label); $id("g_title").disabled = (tagName === "use"); } } @@ -919,36 +913,31 @@ class TopPanel {
- - + + + + + + + ${i18next.t('properties.serif')} + ${i18next.t('properties.sans_serif')} + ${i18next.t('properties.cursive')} + ${i18next.t('properties.fantasy')} + ${i18next.t('properties.monospace')} + ${i18next.t('properties.courier')} + ${i18next.t('properties.helvetica')} + ${i18next.t('properties.times')} + +
-
- - - - - - -
- - ${i18next.t('properties.serif')} - ${i18next.t('properties.sans_serif')} - ${i18next.t('properties.cursive')} - ${i18next.t('properties.fantasy')} - ${i18next.t('properties.monospace')} - ${i18next.t('properties.courier')} - ${i18next.t('properties.helvetica')} - ${i18next.t('properties.times')} - -
- +
Date: Thu, 12 Aug 2021 10:33:11 +0200 Subject: [PATCH 13/17] fix issue with color picker (see comment) this component likely needs to be replaced with an external picker if available. --- src/editor/components/seColorPicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 27d7875a..8aab6862 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -634,7 +634,7 @@ div.jGraduate_Slider img { } #color_picker { z-index: 1000; - top: -350px; + top: 60%; }
From 4de7af29c85790be27e93997e28796f7de5fd107 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Thu, 12 Aug 2021 11:34:42 +0200 Subject: [PATCH 14/17] Update seList.js --- src/editor/components/seList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js index d9bbcfe1..7f573115 100644 --- a/src/editor/components/seList.js +++ b/src/editor/components/seList.js @@ -4,7 +4,7 @@ const template = document.createElement('template'); template.innerHTML = `
- icon + icon
`; /** diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js index d150b4e4..03fc8a75 100644 --- a/src/editor/components/seDropdown.js +++ b/src/editor/components/seDropdown.js @@ -28,7 +28,7 @@ class Dropdown extends ListComboBox { const source = result.content.getElementById('source'); // add a icon before our dropdown source.prepend(fragmentFrom.html` - icon + icon `.cloneNode(true)); // change the style so it fits in our toolbar result.content.append( diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index c3eb2f7f..0caf6d94 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -85,7 +85,7 @@ template.innerHTML = `
- icon + icon
diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js index 27bb57c4..4d386e5c 100644 --- a/src/editor/components/seInput.js +++ b/src/editor/components/seInput.js @@ -26,7 +26,7 @@ template.innerHTML = ` }
- icon + icon label
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 8e25fa95..3aa391de 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -39,7 +39,7 @@ template.innerHTML = ` }
- icon + icon label
diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js index 9d159d65..98ec88e0 100644 --- a/src/editor/extensions/ext-overview_window/ext-overview_window.js +++ b/src/editor/extensions/ext-overview_window/ext-overview_window.js @@ -11,29 +11,20 @@ import { dragmove } from './dragmove/dragmove.js'; export default { name: 'overview_window', - init ({ _$, isChrome }) { + init ({ _$ }) { const svgEditor = this; const { $id } = svgEditor.svgCanvas; const overviewWindowGlobals = {}; - // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and - // https://code.google.com/p/chromium/issues/detail?id=565120. - if (isChrome()) { - const verIndex = navigator.userAgent.indexOf('Chrome/') + 7; - const chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex)); - if (chromeVersion < 49) { - return undefined; - } - } // Define and insert the base html element. const propsWindowHtml = '
' + '
' + + 'left:15px; top:0px;">' + '
' + - '' + @@ -47,7 +38,7 @@ export default { '
' + '
'; // eslint-disable-next-line no-unsanitized/method - $id("sidepanels").insertAdjacentHTML( 'beforeend', propsWindowHtml ); + $id("sidepanel_content").insertAdjacentHTML( 'beforeend', propsWindowHtml ); // Define dynamic animation of the view box. const updateViewBox = function () { diff --git a/src/editor/locale/lang.af.js b/src/editor/locale/lang.af.js index 26c74280..1027a18f 100644 --- a/src/editor/locale/lang.af.js +++ b/src/editor/locale/lang.af.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klik om te verander vul kleur, verskuiwing klik om 'n beroerte kleur verander', zoom_level: 'Change zoom vlak', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ar.js b/src/editor/locale/lang.ar.js index c7a0f420..3e2673cc 100644 --- a/src/editor/locale/lang.ar.js +++ b/src/editor/locale/lang.ar.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'انقر لتغيير لون التعبئة ، تحولا مزدوجا فوق لتغيير لون السكتة الدماغية', zoom_level: 'تغيير مستوى التكبير', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.az.js b/src/editor/locale/lang.az.js index ff3d7f96..bc7bae51 100644 --- a/src/editor/locale/lang.az.js +++ b/src/editor/locale/lang.az.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Click to change fill color, shift-click to change stroke color', zoom_level: 'Change zoom level', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.be.js b/src/editor/locale/lang.be.js index c68fa730..071cf304 100644 --- a/src/editor/locale/lang.be.js +++ b/src/editor/locale/lang.be.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Націсніце для змены колеру залівання, Shift-Click змяніць обводка', zoom_level: 'Змяненне маштабу', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.bg.js b/src/editor/locale/lang.bg.js index e597d556..783a2ee6 100644 --- a/src/editor/locale/lang.bg.js +++ b/src/editor/locale/lang.bg.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Кликнете, за да промени попълнете цвят, на смени, кликнете да променят цвета си удар', zoom_level: 'Промяна на ниво на мащабиране', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ca.js b/src/editor/locale/lang.ca.js index 20b2a34a..ca3157c7 100644 --- a/src/editor/locale/lang.ca.js +++ b/src/editor/locale/lang.ca.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Feu clic per canviar el color de farciment, shift-clic per canviar el color del traç', zoom_level: 'Canviar el nivell de zoom', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.cs.js b/src/editor/locale/lang.cs.js index 74d261de..6656a0fa 100644 --- a/src/editor/locale/lang.cs.js +++ b/src/editor/locale/lang.cs.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Zobrazit/schovat více možností', palette_info: 'Kliknutím změníte barvu výplně, kliknutím současně s klávesou shift změníte barvu čáry', zoom_level: 'Změna přiblížení', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.cy.js b/src/editor/locale/lang.cy.js index 71286854..031a97ed 100644 --- a/src/editor/locale/lang.cy.js +++ b/src/editor/locale/lang.cy.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Cliciwch yma i lenwi newid lliw, sifft-cliciwch i newid lliw strôc', zoom_level: 'Newid lefel chwyddo', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.da.js b/src/editor/locale/lang.da.js index 9189d0af..3bd6c198 100644 --- a/src/editor/locale/lang.da.js +++ b/src/editor/locale/lang.da.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klik for at ændre fyldfarve, shift-klik for at ændre stregfarve', zoom_level: 'Skift zoomniveau', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.de.js b/src/editor/locale/lang.de.js index 72396778..1e78ef56 100644 --- a/src/editor/locale/lang.de.js +++ b/src/editor/locale/lang.de.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Zeige/Verberge weitere Linien-Werkzeuge', palette_info: 'Klick zum Ändern der Füllfarbe, Shift-Klick zum Ändern der Linienfarbe', zoom_level: 'vergrößern', - panel_drag: 'Nach links/rechts ziehen, um die Größe vom Seitenpanel zu ändern', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.el.js b/src/editor/locale/lang.el.js index e3183bc9..fa939618 100644 --- a/src/editor/locale/lang.el.js +++ b/src/editor/locale/lang.el.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Κάντε κλικ για να συμπληρώσετε την αλλαγή χρώματος, στροφή κλικ για να αλλάξετε το χρώμα εγκεφαλικό', zoom_level: 'Αλλαγή επίπεδο μεγέθυνσης', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.en.js b/src/editor/locale/lang.en.js index 8607575b..7d9ba8f3 100644 --- a/src/editor/locale/lang.en.js +++ b/src/editor/locale/lang.en.js @@ -20,7 +20,8 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Click to change fill color, shift-click to change stroke color', zoom_level: 'Change zoom level', - panel_drag: 'Drag left/right to resize side panel', + panel: 'Panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.es.js b/src/editor/locale/lang.es.js index 99c13915..7a65d9c5 100644 --- a/src/editor/locale/lang.es.js +++ b/src/editor/locale/lang.es.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Mostrar/ocultar herramientas de trazo adicionales', palette_info: 'Haga clic para cambiar el color de relleno. Pulse Mayús y haga clic para cambiar el color del contorno.', zoom_level: 'Cambiar el nivel de zoom', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.et.js b/src/editor/locale/lang.et.js index 3d5c6c1d..5d10396b 100644 --- a/src/editor/locale/lang.et.js +++ b/src/editor/locale/lang.et.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Click muuta täitke värvi, Shift-nuppu, et muuta insult värvi', zoom_level: 'Muuda suumi taset', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.fa.js b/src/editor/locale/lang.fa.js index c456d3db..bb3cadb8 100644 --- a/src/editor/locale/lang.fa.js +++ b/src/editor/locale/lang.fa.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: '‫برای تغییر رنگ، کلیک کنید. برای تغییر رنگ لبه، کلید تبدیل (shift) را فشرده و کلیک کنید‬', zoom_level: '‫تغییر بزرگ نمایی‬', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.fi.js b/src/editor/locale/lang.fi.js index 25ecff6b..168958f6 100644 --- a/src/editor/locale/lang.fi.js +++ b/src/editor/locale/lang.fi.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klikkaa muuttaa täyttöväri, Shift-click vaihtaa aivohalvauksen väriä', zoom_level: 'Muuta suurennustaso', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.fr.js b/src/editor/locale/lang.fr.js index 7df5bcab..e29ca84f 100644 --- a/src/editor/locale/lang.fr.js +++ b/src/editor/locale/lang.fr.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: "Montrer/cacher plus d'outils de contour", palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour', zoom_level: 'Changer le niveau de zoom', - panel_drag: 'Tirer vers la gauche/droite pour redimensionner le panneau', + panel_action: 'Cliquer pour ouvrir le panel de côté', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.fy.js b/src/editor/locale/lang.fy.js index a82592e3..ae0a903f 100644 --- a/src/editor/locale/lang.fy.js +++ b/src/editor/locale/lang.fy.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klik om de folkleur te feroarjen, shift-klik om de linekleur te feroarjen.', zoom_level: 'Yn-/útzoome', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ga.js b/src/editor/locale/lang.ga.js index 5f874aec..f15eb4fe 100644 --- a/src/editor/locale/lang.ga.js +++ b/src/editor/locale/lang.ga.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Cliceáil chun athrú a líonadh dath, aistriú-cliceáil chun dath a athrú stróc', zoom_level: 'Athraigh súmáil leibhéal', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.gl.js b/src/editor/locale/lang.gl.js index 98079f04..ee9134be 100644 --- a/src/editor/locale/lang.gl.js +++ b/src/editor/locale/lang.gl.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Preme aquí para cambiar a cor de recheo, Shift-clic para cambiar a cor do curso', zoom_level: 'Cambiar o nivel de zoom', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.he.js b/src/editor/locale/lang.he.js index 9942eab7..bcfe4f62 100755 --- a/src/editor/locale/lang.he.js +++ b/src/editor/locale/lang.he.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'לחץ כדי לשנות צבע מילוי, לחץ על Shift-לשנות צבע שבץ', zoom_level: 'שינוי גודל תצוגה', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.hi.js b/src/editor/locale/lang.hi.js index 5f594c07..056ecb18 100644 --- a/src/editor/locale/lang.hi.js +++ b/src/editor/locale/lang.hi.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'रंग बदलने पर क्लिक करें, बदलाव भरने के क्लिक करने के लिए स्ट्रोक का रंग बदलने के लिए', zoom_level: 'बदलें स्तर ज़ूम', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.hr.js b/src/editor/locale/lang.hr.js index 4863869a..f3c2850c 100644 --- a/src/editor/locale/lang.hr.js +++ b/src/editor/locale/lang.hr.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Kliknite promijeniti boju ispune, shift-click to promijeniti boju moždanog udara', zoom_level: 'Promjena razine zumiranja', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.hu.js b/src/editor/locale/lang.hu.js index 6b3df52c..a540bcb3 100644 --- a/src/editor/locale/lang.hu.js +++ b/src/editor/locale/lang.hu.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Kattints ide a változások töltse szín, shift-click változtatni stroke color', zoom_level: 'Change nagyítási', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.hy.js b/src/editor/locale/lang.hy.js index fcf8f37f..bdebebb4 100644 --- a/src/editor/locale/lang.hy.js +++ b/src/editor/locale/lang.hy.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Click to change fill color, shift-click to change stroke color', zoom_level: 'Change zoom level', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.id.js b/src/editor/locale/lang.id.js index e3b1eceb..0d23baba 100644 --- a/src/editor/locale/lang.id.js +++ b/src/editor/locale/lang.id.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klik untuk mengubah warna mengisi, shift-klik untuk mengubah warna stroke', zoom_level: 'Mengubah tingkat pembesaran', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.is.js b/src/editor/locale/lang.is.js index 7cfd44fa..ebe482a3 100644 --- a/src/editor/locale/lang.is.js +++ b/src/editor/locale/lang.is.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Smelltu hér til að breyta fylla lit, Shift-smelltu til að breyta högg lit', zoom_level: 'Breyta Stækkunarstig', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.it.js b/src/editor/locale/lang.it.js index 13527b7c..b0c31bd9 100644 --- a/src/editor/locale/lang.it.js +++ b/src/editor/locale/lang.it.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Mostra/nascondi strumenti per il tratto', palette_info: 'Fare clic per cambiare il colore di riempimento, shift-click per cambiare colore del tratto', zoom_level: 'Cambia il livello di zoom', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ja.js b/src/editor/locale/lang.ja.js index ba20b09c..1d4ccf4b 100644 --- a/src/editor/locale/lang.ja.js +++ b/src/editor/locale/lang.ja.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'クリックで塗りの色を選択、Shift+クリックで線の色を選択', zoom_level: 'ズーム倍率の変更', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ko.js b/src/editor/locale/lang.ko.js index b0772cef..5200387c 100644 --- a/src/editor/locale/lang.ko.js +++ b/src/editor/locale/lang.ko.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: '색상을 클릭, 근무 시간 채우기 스트로크 색상을 변경하려면 변경하려면', zoom_level: '변경 수준으로 확대', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.lt.js b/src/editor/locale/lang.lt.js index 2ff0d2a2..11e4d980 100644 --- a/src/editor/locale/lang.lt.js +++ b/src/editor/locale/lang.lt.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Spustelėkite norėdami keisti užpildo spalvą, perėjimo spustelėkite pakeisti insultas spalva', zoom_level: 'Keisti mastelį', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.lv.js b/src/editor/locale/lang.lv.js index 734b906a..79c6b845 100644 --- a/src/editor/locale/lang.lv.js +++ b/src/editor/locale/lang.lv.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Noklikšķiniet, lai mainītu aizpildījuma krāsu, shift-click to mainīt stroke krāsa', zoom_level: 'Pārmaiņu mērogu', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.mk.js b/src/editor/locale/lang.mk.js index 08d4f1cf..7de7cee2 100644 --- a/src/editor/locale/lang.mk.js +++ b/src/editor/locale/lang.mk.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Кликни за да внесете промени бојата, промена клик да се промени бојата удар', zoom_level: 'Промена зум ниво', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ms.js b/src/editor/locale/lang.ms.js index 2a2a788a..d4d6c64d 100644 --- a/src/editor/locale/lang.ms.js +++ b/src/editor/locale/lang.ms.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klik untuk menukar warna mengisi, shift-klik untuk menukar warna stroke', zoom_level: 'Mengubah peringkat pembesaran', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.mt.js b/src/editor/locale/lang.mt.js index 8338d49e..4f50c796 100644 --- a/src/editor/locale/lang.mt.js +++ b/src/editor/locale/lang.mt.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Ikklikkja biex timla l-bidla fil-kulur, ikklikkja-bidla għall-bidla color stroke', zoom_level: 'Bidla zoom livell', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.nl.js b/src/editor/locale/lang.nl.js index 013d5b47..a489168e 100644 --- a/src/editor/locale/lang.nl.js +++ b/src/editor/locale/lang.nl.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Toon/verberg meer lijn gereedschap', palette_info: 'Klik om de vul kleur te veranderen, shift-klik om de lijn kleur te veranderen', zoom_level: 'In-/uitzoomen', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.no.js b/src/editor/locale/lang.no.js index 13d03883..4315dafb 100644 --- a/src/editor/locale/lang.no.js +++ b/src/editor/locale/lang.no.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Click å endre fyllfarge, shift-klikke for å endre slag farge', zoom_level: 'Endre zoomnivå', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.pl.js b/src/editor/locale/lang.pl.js index 8ba0107e..98c3ffae 100644 --- a/src/editor/locale/lang.pl.js +++ b/src/editor/locale/lang.pl.js @@ -21,7 +21,7 @@ export default { toggle_stroke_tools: 'Pokaż/ukryj więcej opcji obramowania', palette_info: 'Kliknij aby zmienić kolor wypełnienia, przytrzymaj shift aby zmienić kolor obramowania', zoom_level: 'Zmiana powiększenia', - panel_drag: 'Przeciągnij w lewo/prawo aby zmienić szerokość panelu', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.pt-BR.js b/src/editor/locale/lang.pt-BR.js index 675a8f0f..a1ac8852 100644 --- a/src/editor/locale/lang.pt-BR.js +++ b/src/editor/locale/lang.pt-BR.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Mais opções de traço', palette_info: 'Click para mudar a cor de preenchimento, shift-click para mudar a cor do traço', zoom_level: 'Mudar zoom', - panel_drag: 'Arraste para redimensionar o painel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.pt-PT.js b/src/editor/locale/lang.pt-PT.js index 643088a2..1f8e3a3a 100644 --- a/src/editor/locale/lang.pt-PT.js +++ b/src/editor/locale/lang.pt-PT.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Clique para mudar a cor de preenchimento, shift-clique para mudar a cor do curso', zoom_level: 'Alterar o nível de zoom', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ro.js b/src/editor/locale/lang.ro.js index e92922c1..91d8236c 100644 --- a/src/editor/locale/lang.ro.js +++ b/src/editor/locale/lang.ro.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Arătaţi/ascundeţi mai multe unelte de contur', palette_info: 'Faceţi clic pentru a schimba culoarea de umplere, Shift-clic pentru a schimba culoarea de contur', zoom_level: 'Schimbarea nivelului de zoom', - panel_drag: 'Trageţi la stanga/dreapta pentru redimensionare panou lateral', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.ru.js b/src/editor/locale/lang.ru.js index 134f6cc7..c0c1eb2a 100644 --- a/src/editor/locale/lang.ru.js +++ b/src/editor/locale/lang.ru.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Показать/скрыть инструменты обводки', palette_info: 'Нажмите для изменения цвета заливки, Shift-Click изменить цвета обводки', zoom_level: 'Изменить масштаб', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Качество:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.sk.js b/src/editor/locale/lang.sk.js index 077ac4d2..903a2f8e 100644 --- a/src/editor/locale/lang.sk.js +++ b/src/editor/locale/lang.sk.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Skryť/ukázať viac nástrojov pre krivku', palette_info: 'Kliknutím zmeníte farbu výplne, so Shiftom zmeníte farbu obrysu', zoom_level: 'Zmena priblíženia', - panel_drag: 'Potiahnutie vľavo/vpravo na zmenu veľkosti bočného panela', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.sl.js b/src/editor/locale/lang.sl.js index 87c37f51..72171ae0 100644 --- a/src/editor/locale/lang.sl.js +++ b/src/editor/locale/lang.sl.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Pokaži/skrij več orodij za oris', palette_info: 'Kliknite, če želite spremeniti barvo polnila, kliknite+Shift, če želite spremeniti barvo orisa', zoom_level: 'Povečava', - panel_drag: 'Povlecite levo/desno za ogled stranske vrstice', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.sq.js b/src/editor/locale/lang.sq.js index e319a02a..663b458b 100644 --- a/src/editor/locale/lang.sq.js +++ b/src/editor/locale/lang.sq.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klikoni për të ndryshuar mbushur me ngjyra, shift-klikoni për të ndryshuar ngjyrën pash', zoom_level: 'Ndryshimi zoom nivel', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.sr.js b/src/editor/locale/lang.sr.js index 9a8eac77..1685384b 100644 --- a/src/editor/locale/lang.sr.js +++ b/src/editor/locale/lang.sr.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Кликните да бисте променили боју попуне, Схифт-кликните да промените боју удар', zoom_level: 'Промените ниво зумирања', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.sv.js b/src/editor/locale/lang.sv.js index a17db58e..a370367e 100644 --- a/src/editor/locale/lang.sv.js +++ b/src/editor/locale/lang.sv.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Klicka för att ändra fyllningsfärg, shift-klicka för att ändra färgar', zoom_level: 'Ändra zoomnivå', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.sw.js b/src/editor/locale/lang.sw.js index a58f7d26..12dc3c5d 100644 --- a/src/editor/locale/lang.sw.js +++ b/src/editor/locale/lang.sw.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Click kubadili kujaza color, skiftarbete-click kubadili kiharusi color', zoom_level: 'Change zoom ngazi', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.test.js b/src/editor/locale/lang.test.js index 7c3c2697..fa606987 100644 --- a/src/editor/locale/lang.test.js +++ b/src/editor/locale/lang.test.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Click to change fill color, shift-click to change stroke color', zoom_level: 'Change zoom level', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.th.js b/src/editor/locale/lang.th.js index 8a203808..48f5c859 100644 --- a/src/editor/locale/lang.th.js +++ b/src/editor/locale/lang.th.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'คลิกเพื่อเปลี่ยนใส่สีกะคลิกเปลี่ยนสีจังหวะ', zoom_level: 'เปลี่ยนระดับการซูม', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.tl.js b/src/editor/locale/lang.tl.js index 0e09fbba..7a026afc 100644 --- a/src/editor/locale/lang.tl.js +++ b/src/editor/locale/lang.tl.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'I-click upang baguhin ang punan ang kulay, paglilipat-click upang baguhin ang paghampas ng kulay', zoom_level: 'Baguhin ang antas ng zoom', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.tr.js b/src/editor/locale/lang.tr.js index c703aafa..a1643c3e 100644 --- a/src/editor/locale/lang.tr.js +++ b/src/editor/locale/lang.tr.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Tıklatın renk, vardiya dolgu zamanlı rengini değiştirmek için tıklayın değiştirmek için', zoom_level: 'Yakınlaştırma düzeyini değiştirebilirsiniz', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.uk.js b/src/editor/locale/lang.uk.js index e20ee914..378a4105 100644 --- a/src/editor/locale/lang.uk.js +++ b/src/editor/locale/lang.uk.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Натисніть для зміни кольору заливки, Shift-Click змінити обвід', zoom_level: 'Зміна масштабу', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.vi.js b/src/editor/locale/lang.vi.js index 8eebdf8f..16aca1a6 100644 --- a/src/editor/locale/lang.vi.js +++ b/src/editor/locale/lang.vi.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'Nhấn vào đây để thay đổi đầy màu sắc, thay đổi nhấp chuột để thay đổi màu sắc đột quỵ', zoom_level: 'Thay đổi mức độ phóng', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.yi.js b/src/editor/locale/lang.yi.js index 7b871d9a..5c207466 100644 --- a/src/editor/locale/lang.yi.js +++ b/src/editor/locale/lang.yi.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: 'גיט צו ענדערן אָנעסן קאָליר, יבעררוק-גיט צו טוישן מאַך קאָליר', zoom_level: 'ענדערן פארגרעסער הייך', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.zh-CN.js b/src/editor/locale/lang.zh-CN.js index eee150b5..ce0c0077 100644 --- a/src/editor/locale/lang.zh-CN.js +++ b/src/editor/locale/lang.zh-CN.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: '显示/隐藏更式边线工具', palette_info: '点击更改填充颜色，按住Shift键单击更改线条颜色', zoom_level: '更改缩放级别', - panel_drag: '左右拖拽调整面板大小', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.zh-HK.js b/src/editor/locale/lang.zh-HK.js index a5103227..93a7a189 100644 --- a/src/editor/locale/lang.zh-HK.js +++ b/src/editor/locale/lang.zh-HK.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: '点击更改填充颜色，按住Shift键单击更改颜色中风', zoom_level: '更改缩放级别', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/locale/lang.zh-TW.js b/src/editor/locale/lang.zh-TW.js index da6ea554..5c67e718 100644 --- a/src/editor/locale/lang.zh-TW.js +++ b/src/editor/locale/lang.zh-TW.js @@ -20,7 +20,7 @@ export default { toggle_stroke_tools: 'Show/hide more stroke tools', palette_info: '點擊更改填充顏色，按住Shift鍵單擊更改線條顏色', zoom_level: '更改縮放級別', - panel_drag: 'Drag left/right to resize side panel', + panel_action: 'Click to open side panel', quality: 'Quality:', pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type', pathCtrlPtTooltip: 'Drag control point to adjust curve properties', diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 2137ec5c..4fd14c87 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -186,14 +186,14 @@ class BottomPanel { - + — ... - - - . - .. - + - + SIDEPANEL_MAXWIDTH) { - deltaX = SIDEPANEL_MAXWIDTH - sideWidth; - // sideWidth = SIDEPANEL_MAXWIDTH; - } else if (sideWidth + deltaX < 2) { - deltaX = 2 - sideWidth; - // sideWidth = 2; - } - if (deltaX === 0) { - return; - } - this.sidedrag -= deltaX; - this.changeSidePanelWidth(deltaX); - } - - /** - * If width is non-zero, then fully close it; otherwise fully open it. - * @param {boolean} close Forces the side panel closed - * @returns {void} - */ - toggleSidePanel(close) { - const dpr = window.devicePixelRatio || 1; - const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")); - const isOpened = (dpr < 1 ? w : w / dpr) > 2; - const zoomAdjustedSidepanelWidth = - (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH; - const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w; - this.changeSidePanelWidth(deltaX); - } /** * @param {PlainObject} e event * @returns {void} @@ -119,30 +49,31 @@ class LayersPanel { // eslint-disable-next-line no-unsanitized/property template.innerHTML = `
-
-

${i18next.t('layers.layers')}

-
- - - - - - - -
-
- - - - -
Layer 1
- ${i18next.t('layers.move_elems_to')} - -
-
L a y e r s -
+
${i18next.t('ui.panel')}
+
+
+

${i18next.t('layers.layers')}

+
+ + + + + + + +
+ + + + + +
Layer 1
+ ${i18next.t('layers.move_elems_to')} + +
+
`; this.editor.$svgEditor.append(template.content.cloneNode(true)); @@ -182,36 +113,18 @@ class LayersPanel { this.lmenuFunc(e); }); $id("sidepanel_handle").addEventListener( - "click", - this.toggleSidePanel.bind(this) + "click", () => this.toggleSidePanel() ); - if (this.editor.configObj.curConfig.showlayers) { - this.toggleSidePanel(); + this.toggleSidePanel(this.editor.configObj.curConfig.showlayers); + } + toggleSidePanel(displayFlag) { + if (displayFlag === undefined) { + this.editor.$svgEditor.classList.toggle('open'); + } else if (displayFlag) { + this.editor.$svgEditor.classList.add('open'); + } else { + this.editor.$svgEditor.classList.remove('open'); } - $id("sidepanel_handle").addEventListener("mousedown", (evt) => { - this.sidedrag = evt.pageX; - window.addEventListener("mousemove", this.resizeSidePanel.bind(this)); - this.allowmove = false; - // Silly hack for Chrome, which always runs mousemove right after mousedown - setTimeout(() => { - this.allowmove = true; - }, 20); - }); - $id("sidepanel_handle").addEventListener("mouseup", (_evt) => { - if (!this.sidedragging) { - this.toggleSidePanel(); - } - this.sidedrag = -1; - this.sidedragging = false; - }); - window.addEventListener("mouseup", (_evt) => { - this.sidedrag = -1; - this.sidedragging = false; - this.editor.$svgEditor.removeEventListener( - "mousemove", - this.resizeSidePanel.bind(this) - ); - }); } /** * @returns {void} diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 4d9736d9..348c2a31 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -17,7 +17,7 @@ .svg_editor { display: grid; grid-template-rows: auto 15px 1fr 40px; - grid-template-columns: 34px 15px 1fr 10px; + grid-template-columns: 34px 15px 1fr 15px; grid-template-areas: "top top top top" "left corner rulerX side" @@ -32,12 +32,17 @@ height: 100%; } +.svg_editor.open { + grid-template-columns: 34px 15px 1fr 150px; +} + /* on smaller screen, allow 2 lines for the toolbar */ + @media screen and (max-width:1250px) { .svg_editor { grid-template-rows: minmax(80px, auto) 15px 1fr 40px; } -} +} #svgroot { user-select: none; @@ -60,7 +65,24 @@ background: var(--canvas-bg-color); text-align: center; vertical-align: middle; - position:relative; + position: relative; +} + +#sidepanels { + grid-area: side; +} + +#sidepanel_handle { + writing-mode: vertical-rl; + text-orientation: upright; + color: white; + position: absolute; + cursor: pointer; + top:50%; +} + +.svg_editor:not(.open) #sidepanel_content { + display: none; } a { @@ -77,53 +99,13 @@ hr { padding-top: 4px; } -#sidepanels { - display: inline-block; - position: absolute; - top: 40px; - bottom: 40px; - right: 0; - width: 2px; - padding: 10px; - border-color: var(--border-color); - border-style: solid; - border-width: 1px; - border-left: none; - overflow-x: hidden; - overflow-y: visible; +#layersLabel { + color: white; } #layerpanel { - display: inline-block; - position: relative; - top: 0px; - bottom: 0; - left: 12px; - width: 0; - overflow: hidden; - margin: 0; - user-select: none; -} - -#sidepanel_handle { - display: inline-block; - position: absolute; - background-color: --main-bg-color; - color: #fff; - font-weight: 100; - left: 0; - top: 40%; - width: 1em; - padding: 5px 5px 5px 5px; - margin-left: 6px; - cursor: pointer; - border-radius: 5px; - user-select: none; -} - -#sidepanel_handle * { - cursor: pointer; user-select: none; + padding-left: 15px; } #layerbuttons { @@ -133,10 +115,7 @@ hr { padding-right: 2px; width: 125px; height: 20px; - border-right: 1px solid #FFFFFF; - border-bottom: 1px solid #FFFFFF; - border-left: 1px solid var(--border-color); - border-top: 1px solid var(--border-color); + border: 0px; overflow: hidden; display: flex; justify-content: center; @@ -146,7 +125,7 @@ hr { #layerlist { margin: 1px; padding: 0; - width: 127px; + width: 132px; border-collapse: collapse; border: 1px solid var(--border-color); background-color: #FFFFFF; @@ -319,16 +298,18 @@ hr { display: flex; flex-direction: row; flex-wrap: wrap; - /* leave space for the main menu */ + /* leave space for the main menu */ position: relative; background-color: var(--main-bg-color); } -#tools_top > *{ - display:flex; + +#tools_top>* { + display: flex; flex-direction: row; flex-wrap: wrap; background-color: var(--main-bg-color); } + /*—————————————————————————————*/ #tools_bottom { @@ -338,6 +319,11 @@ hr { align-items: center; } +#tools_bottom se-list { + margin-bottom: 8px; +} + + /*—————————————————————————————*/ #tools_left { @@ -525,7 +511,7 @@ input[type=text] { } #palette { - margin-left:auto; + margin-left: auto; } #stroke_expand { @@ -606,4 +592,4 @@ ul li.current { .dropdown li.tool_button { width: 24px; -} +} \ No newline at end of file