From 399cd8a99e87b0eb2bcae4fa8c97bdc3646629ac Mon Sep 17 00:00:00 2001
From: Annonnymmousss <jatin02012006@gmail.com>
Date: Sat, 17 Jan 2026 03:26:23 +0530
Subject: [PATCH 1/2] feat : Multi toggle layer visibility through click and
 drag on eye-icon

---
 frontend/src/components/panels/Layers.svelte | 81 +++++++++++++++++---
 1 file changed, 71 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index c65691fd67..5d42a57038 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -66,6 +66,11 @@
 	let justFinishedDrag = false; // Used to prevent click events after a drag
 	let dragInPanel = false;
 
+	let eyeDragActive = false;
+
+	let eyeDragInitialVisibility: boolean | undefined = undefined;
+	let eyeDragToggledLayers = new Set<bigint>();
+
 	// Interactive clipping
 	let layerToClipUponClick: LayerListingInfo | undefined = undefined;
 	let layerToClipAltKeyPressed = false;
@@ -404,7 +409,55 @@
 		};
 	}
 
+	function eyeIconPointerDown(e: PointerEvent, listing: LayerListingInfo) {
+		if (e.button !== 0) return;
+		eyeDragActive = true;
+
+		eyeDragInitialVisibility = listing.entry.visible;
+		eyeDragToggledLayers.clear();
+		eyeDragToggledLayers.add(listing.entry.id);
+		toggleNodeVisibilityLayerPanel(listing.entry.id);
+
+		e.stopPropagation();
+	}
+
+	function eyeIconGlobalPointerMove(e: PointerEvent) {
+		if (!eyeDragActive) return;
+
+		const target = document.elementFromPoint(e.clientX, e.clientY);
+		if (!target) return;
+
+		const layerRow = target.closest("[data-layer]");
+		if (!layerRow) return;
+
+		const indexAttr = layerRow.getAttribute("data-index");
+		if (!indexAttr) return;
+
+		const index = parseInt(indexAttr, 10);
+		const listing = layers[index];
+		if (!listing) return;
+
+		// Toggle if not already toggled and matches initial visibility
+		if (!eyeDragToggledLayers.has(listing.entry.id)) {
+			if (listing.entry.visible === eyeDragInitialVisibility) {
+				eyeDragToggledLayers.add(listing.entry.id);
+				toggleNodeVisibilityLayerPanel(listing.entry.id);
+			}
+		}
+	}
+
+	function eyeIconPointerUp() {
+		if (!eyeDragActive) return;
+
+		eyeDragActive = false;
+
+		eyeDragInitialVisibility = undefined;
+		eyeDragToggledLayers.clear();
+	}
+
 	function layerPointerDown(e: PointerEvent, listing: LayerListingInfo) {
+		if (eyeDragActive) return;
+
 		// Only left click drags
 		if (e.button !== 0 || !draggable) return;
 
@@ -418,6 +471,10 @@
 	}
 
 	function draggingPointerMove(e: PointerEvent) {
+		eyeIconGlobalPointerMove(e);
+
+		if (eyeDragActive) return;
+
 		if (!internalDragState || !list) return;
 
 		// Calculate distance moved
@@ -449,6 +506,8 @@
 	}
 
 	function draggingPointerUp() {
+		eyeIconPointerUp();
+
 		if (internalDragState?.active && draggingData) {
 			const { select, insertParentId, insertIndex } = draggingData;
 
@@ -673,16 +732,18 @@
 							tooltipDescription={!listing.entry.parentsUnlocked ? "A parent of this layer is locked and that status is being inherited." : ""}
 						/>
 					{/if}
-					<IconButton
-						class="status-toggle"
-						classes={{ inherited: !listing.entry.parentsVisible }}
-						action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
-						size={24}
-						icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
-						hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"}
-						tooltipLabel={listing.entry.visible ? "Hide" : "Show"}
-						tooltipDescription={!listing.entry.parentsVisible ? "A parent of this layer is hidden and that status is being inherited." : ""}
-					/>
+					<div on:pointerdown={(e) => eyeIconPointerDown(e, listing)}>
+						<IconButton
+							class="status-toggle"
+							classes={{ inherited: !listing.entry.parentsVisible }}
+							action={(e) => (toggleNodeVisibilityLayerPanel(listing.entry.id), e?.stopPropagation())}
+							size={24}
+							icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
+							hoverIcon={listing.entry.visible ? "EyeHide" : "EyeShow"}
+							tooltipLabel={listing.entry.visible ? "Hide" : "Show"}
+							tooltipDescription={!listing.entry.parentsVisible ? "A parent of this layer is hidden and that status is being inherited." : ""}
+						/>
+					</div>
 				</LayoutRow>
 			{/each}
 		</LayoutCol>

From cfbbe41f41649583b70ca0cd2648ea3ec103d1b5 Mon Sep 17 00:00:00 2001
From: Annonnymmousss <jatin02012006@gmail.com>
Date: Sun, 18 Jan 2026 20:20:28 +0530
Subject: [PATCH 2/2] fix : lint error

---
 frontend/src/components/panels/Layers.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 5d42a57038..65bb1351ce 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy, tick } from "svelte";
-	import { SvelteMap } from "svelte/reactivity";
+	import { SvelteMap, SvelteSet } from "svelte/reactivity";
 
 	import type { Editor } from "@graphite/editor";
 	import {
@@ -69,7 +69,7 @@
 	let eyeDragActive = false;
 
 	let eyeDragInitialVisibility: boolean | undefined = undefined;
-	let eyeDragToggledLayers = new Set<bigint>();
+	let eyeDragToggledLayers = new SvelteSet<bigint>();
 
 	// Interactive clipping
 	let layerToClipUponClick: LayerListingInfo | undefined = undefined;