diff --git a/src/editor/ConfigObj.js b/src/editor/ConfigObj.js index 91127a6a1..f7706b1ae 100644 --- a/src/editor/ConfigObj.js +++ b/src/editor/ConfigObj.js @@ -104,6 +104,7 @@ export default class ConfigObj { * @property {boolean} [showGrid=false] Set by `ext-grid.js`; determines whether or not to show the grid by default * @property {boolean} [show_outside_canvas=true] Defines whether or not elements outside the canvas should be visible. Set and used in `svgcanvas.js`. * @property {boolean} [selectNew=true] If true, will replace the selection with the current element and automatically select element objects (when not in "path" mode) after they are created, showing their grips (v2.6). + * @property {boolean} [layerView=false] Set for 'ext-layer_view.js'; determines whether or not only current layer is shown by default * Set and used in `svgcanvas.js` (`mouseUp`). */ this.defaultConfig = { @@ -160,7 +161,8 @@ export default class ConfigObj { // EXTENSION (CLIENT VS. SERVER SAVING/OPENING) avoidClientSide: false, // Deprecated in favor of `avoidClientSideDownload` avoidClientSideDownload: false, - avoidClientSideOpen: false + avoidClientSideOpen: false, + layerView: false } this.curPrefs = {} @@ -184,7 +186,8 @@ export default class ConfigObj { 'ext-shapes', 'ext-polystar', 'ext-storage', - 'ext-opensave' + 'ext-opensave', + 'ext-layer_view' ] this.curConfig = { // We do not put on defaultConfig to simplify object copying diff --git a/src/editor/extensions/ext-layer_view/ext-layer_view.js b/src/editor/extensions/ext-layer_view/ext-layer_view.js new file mode 100644 index 000000000..9737ca03e --- /dev/null +++ b/src/editor/extensions/ext-layer_view/ext-layer_view.js @@ -0,0 +1,85 @@ +/** + * @file ext-layer_view.js + * + * @license MIT + * + * + */ + +const name = 'layer_view' + +const loadExtensionTranslation = async function (svgEditor) { + let translationModule + const lang = svgEditor.configObj.pref('lang') + try { + translationModule = await import(`./locale/${lang}.js`) + } catch (_error) { + console.warn(`Missing translation (${lang}) for ${name} - using 'en'`) + translationModule = await import('./locale/en.js') + } + svgEditor.i18next.addResourceBundle(lang, name, translationModule.default) +} + +export default { + name, + async init (_S) { + const svgEditor = this + const { svgCanvas } = svgEditor + const { $id, $click } = svgCanvas + await loadExtensionTranslation(svgEditor) + + const clickLayerView = (e) => { + $id('tool_layerView').pressed = !$id('tool_layerView').pressed + updateLayerView(e) + } + + const updateLayerView = (e) => { + const drawing = svgCanvas.getCurrentDrawing() + const curLayer = drawing.getCurrentLayerName() + let layer = drawing.getNumLayers() + while (layer--) { + const name = drawing.getLayerName(layer) + if (name !== curLayer && $id('tool_layerView').pressed) { + drawing.setLayerVisibility(name, false) + } else { + drawing.setLayerVisibility(name, true) + } + } + $id('layerlist').querySelectorAll('tr.layer').forEach( + function (el) { + const layervis = el.querySelector('td.layervis') + const vis = el.classList.contains('layersel') || !$id('tool_layerView').pressed ? 'layervis' : 'layerinvis layervis' + layervis.setAttribute('class', vis) + } + ) + } + + return { + name: svgEditor.i18next.t(`${name}:name`), + // The callback should be used to load the DOM with the appropriate UI items + layersChanged () { + if ($id('tool_layerView').pressed) { + updateLayerView() + } if (svgEditor.configObj.curConfig.layerView) { + svgEditor.configObj.curConfig.layerView = false + $id('tool_layerView').pressed = true + updateLayerView() + } + }, + layerVisChanged () { + if ($id('tool_layerView').pressed) { + $id('tool_layerView').pressed = !$id('tool_layerView').pressed + } + }, + callback () { + const buttonTemplate = document.createElement('template') + const title = `${name}:buttons.0.title` + const key = `${name}:buttons.0.key` + buttonTemplate.innerHTML = ` + ` + $id('editor_panel').append(buttonTemplate.content.cloneNode(true)) + $click($id('tool_layerView'), clickLayerView.bind(this)) + } + } + } +} diff --git a/src/editor/extensions/ext-layer_view/locale/en.js b/src/editor/extensions/ext-layer_view/locale/en.js new file mode 100644 index 000000000..fa1e81225 --- /dev/null +++ b/src/editor/extensions/ext-layer_view/locale/en.js @@ -0,0 +1,9 @@ +export default { + name: 'layerview', + buttons: [ + { + title: 'Enable/Disable Layer View', + key: 'Ctrl+Shift+L' + } + ] +} diff --git a/src/editor/images/layer_view.svg b/src/editor/images/layer_view.svg new file mode 100644 index 000000000..a1b765214 --- /dev/null +++ b/src/editor/images/layer_view.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 43668a380..ed70835dc 100644 --- a/src/editor/panels/LayersPanel.js +++ b/src/editor/panels/LayersPanel.js @@ -285,6 +285,10 @@ class LayersPanel { }) evt.currentTarget.parentNode.classList.add('layersel') self.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent) + // run extension when different layer is selected from listener + self.editor.svgCanvas.runExtensions( + 'layersChanged' + ) evt.preventDefault() }) element.addEventListener('mouseup', (evt) => { @@ -302,6 +306,10 @@ class LayersPanel { const vis = evt.currentTarget.classList.contains('layerinvis') self.editor.svgCanvas.setLayerVisibility(name, vis) evt.currentTarget.classList.toggle('layerinvis') + // run extension if layer visibility is changed from listener + self.editor.svgCanvas.runExtensions( + 'layerVisChanged' + ) }) }) @@ -313,6 +321,10 @@ class LayersPanel { tlayer.innerHTML = '_' layerlist.append(tlayer) } + // run extension when layer panel is populated + self.editor.svgCanvas.runExtensions( + 'layersChanged' + ) } }