Merge pull request #540 from Lemoncode/feature/thumb-no-click

Feature/thumb no click
Lemoncode · Nov 17, 2024 · dd52481 · dd52481
2 parents 1aa807b + b0e9692
commit dd52481
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/src/pods/thumb-pages/components/thumb-page.module.css b/src/pods/thumb-pages/components/thumb-page.module.css
@@ -24,3 +24,7 @@
 .icon-container > svg:hover {
   background-color: var(--primary-100);
 }
+
+.noclick {
+  pointer-events: none;
+}
diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx
@@ -87,33 +87,36 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
         onContextMenu={handleShowContextMenu}
         key={key}
       >
-        <Stage
-          width={canvasSize.width}
-          height={canvasSize.height}
-          scaleX={finalScale}
-          scaleY={finalScale}
-        >
-          <Layer>
-            {shapes.map(shape => {
-              if (!fakeShapeRefs.current[shape.id]) {
-                fakeShapeRefs.current[shape.id] = createRef();
-              }
-              return renderShapeComponent(shape, {
-                handleSelected: () => {},
-                shapeRefs: fakeShapeRefs,
-                handleDragEnd:
-                  (_: string) => (_: KonvaEventObject<DragEvent>) => {},
-                handleTransform: () => {},
-              });
-            })}
-          </Layer>
-        </Stage>
+        <div className={classes.noclick}>
+          <Stage
+            width={canvasSize.width}
+            height={canvasSize.height}
+            scaleX={finalScale}
+            scaleY={finalScale}
+          >
+            <Layer>
+              {shapes.map(shape => {
+                if (!fakeShapeRefs.current[shape.id]) {
+                  fakeShapeRefs.current[shape.id] = createRef();
+                }
+                return renderShapeComponent(shape, {
+                  handleSelected: () => {},
+                  shapeRefs: fakeShapeRefs,
+                  handleDragEnd:
+                    (_: string) => (_: KonvaEventObject<DragEvent>) => {},
+                  handleTransform: () => {},
+                });
+              })}
+            </Layer>
+          </Stage>
+        </div>
         <span
           onClick={handleShowContextMenu}
           className={classes['icon-container']}
         >
           <CaretDown />
         </span>
+
         {showContextMenu && (
           <ThumbPageContextMenu
             contextMenuRef={contextMenuRef}