From 4975a4e7370c8e262dc79d573077af9f74ba31fc Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Fri, 7 May 2021 16:57:45 -0700
Subject: [PATCH] Plumb frontend for layer visibility toggle

---
 .../web/src/components/panels/LayerTree.vue   | 26 +++++++------------
 core/editor/src/dispatcher/mod.rs             |  3 +++
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/client/web/src/components/panels/LayerTree.vue b/client/web/src/components/panels/LayerTree.vue
index 8996ca3a..9cd33be6 100644
--- a/client/web/src/components/panels/LayerTree.vue
+++ b/client/web/src/components/panels/LayerTree.vue
@@ -9,8 +9,10 @@
 			<LayoutCol :class="'list'">
 				<div class="layer-row" v-for="layer in layers" :key="layer.path">
 					<div class="layer-visibility">
-						<IconButton v-if="layer.visible" @click="hideLayer(layer)" :size="24" title="Visible"><EyeVisible /></IconButton>
-						<IconButton v-if="!layer.visible" @click="showLayer(layer)" :size="24" title="Hidden"><EyeHidden /></IconButton>
+						<IconButton @click="toggleLayerVisibility(layer)" :size="24" title="layer.visible ? 'Visible' : 'Hidden">
+							<EyeVisible v-if="layer.visible" />
+							<EyeHidden v-if="!layer.visible" />
+						</IconButton>
 					</div>
 					<div class="layer">
 						<div class="layer-thumbnail"></div>
@@ -82,6 +84,8 @@ import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-e
 import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg";
 import NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg";
 
+const wasm = import("../../../wasm/pkg");
+
 export default defineComponent({
 	components: {
 		LayoutRow,
@@ -96,21 +100,9 @@ export default defineComponent({
 	},
 	props: {},
 	methods: {
-		hideLayer(layerId: LayerPanelEntry) {
-			const layer = layerId as LayerPanelEntry;
-			if (layer) {
-				console.log(`Hidden layer ID: ${layer.path}`);
-			} else {
-				console.error("hideLayer did not receive valid arguments");
-			}
-		},
-		showLayer(layerId: LayerPanelEntry) {
-			const layer = layerId as LayerPanelEntry;
-			if (layer) {
-				console.log(`Shown layer: ${layer.path}`);
-			} else {
-				console.error("showLayer did not receive valid arguments");
-			}
+		async toggleLayerVisibility(path: BigUint64Array) {
+			const { toggle_layer_visibility } = await wasm;
+			toggle_layer_visibility(path);
 		},
 	},
 	mounted() {
diff --git a/core/editor/src/dispatcher/mod.rs b/core/editor/src/dispatcher/mod.rs
index 90cbefee..83485c19 100644
--- a/core/editor/src/dispatcher/mod.rs
+++ b/core/editor/src/dispatcher/mod.rs
@@ -36,6 +36,9 @@ impl Dispatcher {
 			Event::MouseMove(pos) => {
 				editor_state.tool_state.document_tool_data.mouse_state.position = *pos;
 			}
+			Event::ToggleLayerVisibility(path) => {
+				log::debug!("Toggling layer visibility not yet implemented in the Editor Library");
+			}
 			Event::KeyUp(_key) => (),
 			Event::KeyDown(key) => {
 				log::trace!("pressed key {:?}", key);