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 = `
+