From 483468407d05f55e407e61879794898fc72bd4c9 Mon Sep 17 00:00:00 2001 From: sanine Date: Thu, 2 Jun 2022 01:58:29 -0500 Subject: fully implement layer ui --- src/Map/Layer.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) diff --git a/src/Map/Layer.js b/src/Map/Layer.js index 93e5799..1f486ad 100644 --- a/src/Map/Layer.js +++ b/src/Map/Layer.js @@ -72,6 +72,60 @@ class LayerData { after.subLayers.push(container[index]); container.splice(index, 1); } + + popLayer(idChain) { + const parentChain = idChain.slice(1); + const [ container, id ] = this._getContainerAndId(idChain); + const index = this._idToIndex(container, id); + const layer = container[index]; + container.splice(index, 1); + + const [ parentContainer, parentId ] = this._getContainerAndId(parentChain); + const parentIndex = this._idToIndex(parentContainer, parentId); + parentContainer.splice(parentIndex, 0, layer); + } + + + moveUp(idChain) { + const [ container, id ] = this._getContainerAndId(idChain); + const index = this._idToIndex(container, id); + if (index === container.length-1) return; + + const layer = container[index]; + container.splice(index, 1); + container.splice(index+1, 0, layer); + } + + moveDown(idChain) { + const [ container, id ] = this._getContainerAndId(idChain); + const index = this._idToIndex(container, id); + if (index === 0) return; + + const layer = container[index]; + container.splice(index, 1); + container.splice(index-1, 0, layer); + } + + toggleVisible(idChain) { + const [ container, id ] = this._getContainerAndId(idChain); + const index = this._idToIndex(container, id); + const layer = container[index]; + const visible = !layer.visible; + + const recursiveToggle = layer => { + layer.visible = visible; + for (let subLayer of layer.subLayers) + recursiveToggle(subLayer); + } + recursiveToggle(layer); + } + + rename(idChain, name) { + const [ container, id ] = this._getContainerAndId(idChain); + const index = this._idToIndex(container, id); + const layer = container[index]; + layer.name = name; + } } @@ -174,8 +228,18 @@ class LayerController { const respond = f => ( idChain => { f(idChain); this.updateView(); } ); this.view.onAddLayer = idChain => { this.data.insertLayer(idChain); this.updateView(); }; - this.view.onPushLayer = idChain => { this.data.pushLayer(idChain); this.updateView(); }; this.view.onRemoveLayer = idChain => { this.data.removeLayer(idChain); this.updateView(); } + this.view.onPushLayer = idChain => { this.data.pushLayer(idChain); this.updateView(); }; + this.view.onPopLayer = idChain => { this.data.popLayer(idChain); this.updateView(); }; + + this.view.onMoveUp = idChain => { this.data.moveUp(idChain); this.updateView(); }; + this.view.onMoveDown = idChain => { this.data.moveDown(idChain); this.updateView(); }; + this.view.onShowHideLayer = idChain => { this.data.toggleVisible(idChain); this.updateView(); }; + this.view.onRenameLayer = idChain => { + const newName = prompt("New layer name"); + this.data.rename(idChain, newName); + this.updateView(); + } } updateView() { -- cgit v1.2.1