From a69a41875d3420ce3fd16ea38de05d0caf7a1e94 Mon Sep 17 00:00:00 2001
From: hyper <hypercross@hyperdeMacBook-Air.local>
Date: Fri, 7 Aug 2026 11:24:57 +0800
Subject: [PATCH] fix: Prevent layer interactions when not editing

Guard layer selection, cursor, and resize interactions behind
the editing state to avoid unintended modifications in view mode.
---
 src/components/md-deck/CardLayer.tsx                | 10 +++++++---
 src/components/md-deck/hooks/useLayerInteraction.ts |  4 ++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/md-deck/CardLayer.tsx b/src/components/md-deck/CardLayer.tsx
index 5d4a751..c1e249e 100644
--- a/src/components/md-deck/CardLayer.tsx
+++ b/src/components/md-deck/CardLayer.tsx
@@ -40,6 +40,9 @@ export function CardLayer(props: CardLayerProps) {
   const isLayerSelected = (layerIndex: number) =>
     selectedLayer() === layerIndex;
 
+  const isEditing = () =>
+    props.store.state.isEditing && !props.store.state.fixed;
+
   const getFrameBounds = (layer: LayerConfig) => {
     const dims = dimensions();
     const left = (layer.x1 - 1) * dims.cellWidth;
@@ -75,10 +78,11 @@ export function CardLayer(props: CardLayerProps) {
         return (
           <>
             <article
-              class="absolute flex flex-col items-stretch justify-center prose text-black prose-sm cursor-pointer"
+              class="absolute flex flex-col items-stretch justify-center prose text-black prose-sm"
               classList={{
+                "cursor-pointer": isEditing(),
                 "ring-2 ring-blue-500 ring-offset-1":
-                  isSelected() && !draggingState(),
+                  isSelected() && !draggingState() && isEditing(),
               }}
               style={{
                 ...getLayerStyle(layer, dimensions()),
@@ -88,7 +92,7 @@ export function CardLayer(props: CardLayerProps) {
               innerHTML={renderLayerContent(props.cardData[layer.prop])}
               onClick={(e) => handleLayerClick(index(), e)}
             />
-            <Show when={isSelected()}>
+            <Show when={isSelected() && isEditing()}>
               <div
                 class="absolute border-2 border-blue-500 pointer-events-none z-10"
                 style={{
diff --git a/src/components/md-deck/hooks/useLayerInteraction.ts b/src/components/md-deck/hooks/useLayerInteraction.ts
index 8089daf..5c25f91 100644
--- a/src/components/md-deck/hooks/useLayerInteraction.ts
+++ b/src/components/md-deck/hooks/useLayerInteraction.ts
@@ -87,6 +87,8 @@ export function useLayerInteraction(
   const handleLayerClick = (index: number, e: MouseEvent) => {
     e.stopPropagation();
 
+    if (!store.state.isEditing || store.state.fixed) return;
+
     const currentlySelected = store.state.selectedLayer;
 
     if (currentlySelected === index) {
@@ -100,6 +102,7 @@ export function useLayerInteraction(
 
   const handleCardClick = (e: MouseEvent, cardEl: HTMLElement) => {
     if (store.state.draggingState) return;
+    if (!store.state.isEditing || store.state.fixed) return;
 
     const { gridX, gridY } = calculateGridCoords(e, cardEl);
     const overlapping = getOverlappingLayers(gridX, gridY);
@@ -147,6 +150,7 @@ export function useLayerInteraction(
     edge?: "n" | "s" | "e" | "w",
     e?: MouseEvent,
   ) => {
+    if (!store.state.isEditing || store.state.fixed) return;
     if (store.state.selectedLayer === null) return;
     if (e) e.stopPropagation();