Move node visibility flag from NodeNetwork to DocumentNode (#1708)

* protonode -> proto node

* Move node visibility flag from NodeNetwork to DocumentNode

* Add serde default for new field

* Logic improvements

frontend/.eslintrc.cjs

@@ -50,7 +50,7 @@ module.exports = {
 		camelcase: ["error", { properties: "always" }],
 		"linebreak-style": ["error", "unix"],
 		"eol-last": ["error", "always"],
-		"max-len": ["error", { code: 200, tabWidth: 4 }],
+		"max-len": ["error", { code: 200, tabWidth: 4, ignorePattern: `d="([\\s\\S]*?)"` }],
 		"prefer-destructuring": "off",
 		"no-console": "warn",
 		"no-debugger": "warn",
@@ -81,6 +81,8 @@ module.exports = {
 
 		// Import plugin config (for intelligently validating module import statements)
 		"import/no-unresolved": "error",
+		// `no-duplicates` disabled due to <https://github.com/import-js/eslint-plugin-import/issues/1479#issuecomment-1789527447>. Reenable if that issue gets fixed.
+		"import/no-duplicates": "off",
 		"import/prefer-default-export": "off",
 		"import/no-relative-packages": "error",
 		"import/order": [

frontend/src/components/panels/Layers.svelte

@@ -417,8 +417,8 @@
 						class={"visibility"}
 						action={(e) => (toggleLayerVisibility(listing.entry.id), e?.stopPropagation())}
 						size={24}
-						icon={listing.entry.disabled ? "EyeHidden" : "EyeVisible"}
-						tooltip={listing.entry.disabled ? "Disabled" : "Enabled"}
+						icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
+						tooltip={listing.entry.visible ? "Visible" : "Hidden"}
 					/>
 				</LayoutRow>
 			{/each}

frontend/src/components/views/Graph.svelte

@@ -795,7 +795,7 @@
 				class="layer"
 				class:selected={showSelected($nodeGraph.selected, boxSelection, node.id, nodeIndex)}
 				class:previewed={node.previewed}
-				class:disabled={node.disabled}
+				class:disabled={!node.visible}
 				style:--offset-left={(node.position?.x || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)}
 				style:--offset-top={(node.position?.y || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)}
 				style:--clip-path-id={`url(#${clipPathId})`}
@@ -891,8 +891,8 @@
 					class={"visibility"}
 					action={(e) => (toggleLayerVisibility(node.id), e?.stopPropagation())}
 					size={24}
-					icon={node.disabled ? "EyeHidden" : "EyeVisible"}
-					tooltip={node.disabled ? "Disabled" : "Enabled"}
+					icon={node.visible ? "EyeVisible" : "EyeHidden"}
+					tooltip={node.visible ? "Visible" : "Hidden"}
 				/>
 
 				<svg class="border-mask" width="0" height="0">
@@ -913,7 +913,7 @@
 				class="node"
 				class:selected={showSelected($nodeGraph.selected, boxSelection, node.id, nodeIndex)}
 				class:previewed={node.previewed}
-				class:disabled={node.disabled}
+				class:disabled={!node.visible}
 				style:--offset-left={(node.position?.x || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)}
 				style:--offset-top={(node.position?.y || 0) + ($nodeGraph.selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)}
 				style:--clip-path-id={`url(#${clipPathId})`}

frontend/src/wasm-communication/messages.ts

@@ -124,7 +124,7 @@ export class FrontendNode {
 
 	readonly previewed!: boolean;
 
-	readonly disabled!: boolean;
+	readonly visible!: boolean;
 
 	readonly errors!: string | undefined;
 }
@@ -613,7 +613,7 @@ export class LayerPanelEntry {
 
 	expanded!: boolean;
 
-	disabled!: boolean;
+	visible!: boolean;
 
 	parentId!: bigint | undefined;
 

frontend/wasm/src/editor_api.rs

@@ -757,8 +757,8 @@ impl JsEditorHandle {
 	/// Toggle visibility of a layer from the layer list
 	#[wasm_bindgen(js_name = toggleLayerVisibility)]
 	pub fn toggle_layer_visibility(&self, id: u64) {
-		let id = NodeId(id);
-		let message = NodeGraphMessage::ToggleHidden { node_id: id };
+		let node_id = NodeId(id);
+		let message = NodeGraphMessage::ToggleVisibility { node_id };
 		self.dispatch(message);
 	}