Merge layer_view extension (#995)

* Add tested version of layer_view extension

* Fix linting errors

* Modify button style to SVG-Edit colour palette

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

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 = `
+      <se-button id="tool_layerView" title="${title}" shortcut="${key}" src="layer_view.svg"></se-button>`
+        $id('editor_panel').append(buttonTemplate.content.cloneNode(true))
+        $click($id('tool_layerView'), clickLayerView.bind(this))
+      }
+    }
+  }
+}

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'
+    }
+  ]
+}

src/editor/images/layer_view.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Modified from: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z" stroke="#f9ba00" stroke-width="1.5"/>
+<path d="M22 12C22 12 21.0071 12.8907 19.0212 13.6851L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L4.97883 13.6851C2.99294 12.8907 2 12 2 12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M22 16C22 16 21.0071 16.8907 19.0212 17.6851L16.2127 18.8085C14.2268 19.6028 13.2339 20 12 20C10.7661 20 9.77318 19.6028 7.7873 18.8085L4.97883 17.6851C2.99294 16.8907 2 16 2 16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

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 = '<td style="color:white">_</td><td/>'
       layerlist.append(tlayer)
     }
+    // run extension when layer panel is populated
+    self.editor.svgCanvas.runExtensions(
+      'layersChanged'
+    )
   }
 }