Add locking layer feature

frontend/assets/icon-16px-solid/lock.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M8,3C3,3,0,8,0,8s3,5,8,5s8-5,8-5S13,3,8,3z M8,12c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S10.2,12,8,12z" />
+	<circle cx="9" cy="7" r="1.2" />
+</svg>

frontend/assets/icon-16px-solid/unlock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path d="M8,4c3.5,0,5.9,2.8,6.8,4c-0.9,1.2-3.3,4-6.8,4S2.1,9.2,1.2,8C2.1,6.8,4.5,4,8,4 M8,3C3,3,0,8,0,8s3,5,8,5s8-5,8-5S13,3,8,3L8,3z" />
+</svg>

frontend/src/components/panels/Layers.svelte

@@ -133,6 +133,10 @@
 		editor.instance.toggleLayerVisibility(id);
 	}
 
+	function toggleLayerLock(id: bigint) {
+		editor.instance.toggleLayerLock(id);
+	}
+
 	function handleExpandArrowClick(id: bigint) {
 		editor.instance.toggleLayerExpansion(id);
 	}
@@ -420,6 +424,13 @@
 						icon={listing.entry.disabled ? "EyeHidden" : "EyeVisible"}
 						tooltip={listing.entry.disabled ? "Disabled" : "Enabled"}
 					/>
+					<IconButton
+						class={"visibility"}
+						action={(e) => (toggleLayerLock(listing.entry.id), e?.stopPropagation())}
+						size={24}
+						icon={listing.entry.locked ? "Lock" : "Unlock"}
+						tooltip={listing.entry.locked ? "Locked" : "Unlocked"}
+					/>
 				</LayoutRow>
 			{/each}
 		</LayoutCol>

frontend/src/utility-functions/icons.ts

@@ -119,6 +119,7 @@ import IconsGrid from "@graphite-frontend/assets/icon-16px-solid/icons-grid.svg"
 import Image from "@graphite-frontend/assets/icon-16px-solid/image.svg";
 import Layer from "@graphite-frontend/assets/icon-16px-solid/layer.svg";
 import License from "@graphite-frontend/assets/icon-16px-solid/license.svg";
+import Lock from "@graphite-frontend/assets/icon-16px-solid/lock.svg";
 import NodeBlur from "@graphite-frontend/assets/icon-16px-solid/node-blur.svg";
 import NodeBrushwork from "@graphite-frontend/assets/icon-16px-solid/node-brushwork.svg";
 import NodeColorCorrection from "@graphite-frontend/assets/icon-16px-solid/node-color-correction.svg";
@@ -140,6 +141,7 @@ import Rescale from "@graphite-frontend/assets/icon-16px-solid/rescale.svg";
 import Reset from "@graphite-frontend/assets/icon-16px-solid/reset.svg";
 import Settings from "@graphite-frontend/assets/icon-16px-solid/settings.svg";
 import Trash from "@graphite-frontend/assets/icon-16px-solid/trash.svg";
+import Unlock from "@graphite-frontend/assets/icon-16px-solid/unlock.svg";
 import ViewModeNormal from "@graphite-frontend/assets/icon-16px-solid/view-mode-normal.svg";
 import ViewModeOutline from "@graphite-frontend/assets/icon-16px-solid/view-mode-outline.svg";
 import ViewModePixels from "@graphite-frontend/assets/icon-16px-solid/view-mode-pixels.svg";
@@ -187,6 +189,7 @@ const SOLID_16PX = {
 	Image: { svg: Image, size: 16 },
 	Layer: { svg: Layer, size: 16 },
 	License: { svg: License, size: 16 },
+	Lock: { svg: Lock, size: 16 },
 	NodeBlur: { svg: NodeBlur, size: 16 },
 	NodeBrushwork: { svg: NodeBrushwork, size: 16 },
 	NodeColorCorrection: { svg: NodeColorCorrection, size: 16 },
@@ -208,6 +211,7 @@ const SOLID_16PX = {
 	Reset: { svg: Reset, size: 16 },
 	Settings: { svg: Settings, size: 16 },
 	Trash: { svg: Trash, size: 16 },
+	Unlock: { svg: Unlock, size: 16 },
 	ViewModeNormal: { svg: ViewModeNormal, size: 16 },
 	ViewModeOutline: { svg: ViewModeOutline, size: 16 },
 	ViewModePixels: { svg: ViewModePixels, size: 16 },

frontend/src/wasm-communication/messages.ts

@@ -126,6 +126,8 @@ export class FrontendNode {
 
 	readonly disabled!: boolean;
 
+	readonly locked!: boolean;
+
 	readonly errors!: string | undefined;
 }
 
@@ -615,6 +617,8 @@ export class LayerPanelEntry {
 
 	disabled!: boolean;
 
+	locked!: boolean;
+
 	parentId!: bigint | undefined;
 
 	id!: bigint;

frontend/wasm/src/editor_api.rs

@@ -762,6 +762,14 @@ impl JsEditorHandle {
 		self.dispatch(message);
 	}
 
+	/// Toggle lock state of a layer from the layer list
+	#[wasm_bindgen(js_name = toggleLayerLock)]
+	pub fn toggle_layer_lock(&self, id: u64) {
+		let id = NodeId(id);
+		let message = NodeGraphMessage::ToggleLocked { node_id: id };
+		self.dispatch(message);
+	}
+
 	/// Toggle expansions state of a layer from the layer list
 	#[wasm_bindgen(js_name = toggleLayerExpansion)]
 	pub fn toggle_layer_expansion(&self, id: u64) {