diff --git a/packages/frontend/src/components/Node.tsx b/packages/frontend/src/components/Node.tsx index 6606b62..dc60972 100644 --- a/packages/frontend/src/components/Node.tsx +++ b/packages/frontend/src/components/Node.tsx @@ -5,6 +5,8 @@ import { useNavigate } from "react-router-dom"; import Konva from "konva"; import { Vector2d } from "konva/lib/types"; +const RADIUS = 64; + type NodeProps = { id: string; x: number; @@ -103,12 +105,11 @@ export type HeadNodeProps = { } & NodeHandlers; export function HeadNode({ id, name, ...rest }: HeadNodeProps) { - const radius = 64; return ( - + navigate(`/note/${src}`)} + onClick={(e) => { + if (e.evt.button === 0) { + navigate(`/note/${src}`); + } + }} {...rest} > - - + + ); } @@ -169,8 +173,8 @@ export function SubspaceNode({ onClick={() => navigate(`/space/${src}`)} {...rest} > - - + + ); } diff --git a/packages/frontend/src/components/space/SpaceView.tsx b/packages/frontend/src/components/space/SpaceView.tsx index 201cd91..7b550e9 100644 --- a/packages/frontend/src/components/space/SpaceView.tsx +++ b/packages/frontend/src/components/space/SpaceView.tsx @@ -147,7 +147,6 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) { }, [autofitTo]); const handleContextMenu = (e: KonvaEventObject) => { - // e.evt.preventDefault(); // 브라우저 컨텍스트메뉴 표시 방지 clearSelection(); const { target } = e; @@ -180,6 +179,14 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) { selectNode({ id: nodeId, type: node.type }); }; + const handleHover = (e: KonvaEventObject) => { + const isEnter = e.type === "mouseenter"; + const cursorStyle = isEnter ? "pointer" : "default"; + + const container = e.target.getStage()?.container(); + if (container) container.style.cursor = cursorStyle; + }; + const nodeComponents = { head: (node: Node) => ( move.callbacks.startHold(node, e)} onTouchEnd={move.callbacks.endHold} onContextMenu={handleContextMenu} + onMouseEnter={handleHover} + onMouseLeave={handleHover} /> ), subspace: (node: Node) => ( @@ -240,6 +249,8 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) { onTouchStart={(e) => move.callbacks.startHold(node, e)} onTouchEnd={move.callbacks.endHold} onContextMenu={handleContextMenu} + onMouseEnter={handleHover} + onMouseLeave={handleHover} /> ), }; @@ -264,7 +275,9 @@ export default function SpaceView({ spaceId, autofitTo }: SpaceViewProps) { const nearIndicatorRenderer = !moveState.isMoving && drag.position && - drag.overlapNode && ( + drag.startNode && + drag.overlapNode && + drag.overlapNode.id !== drag.startNode.id && ( ); diff --git a/packages/frontend/src/hooks/useDragNode.ts b/packages/frontend/src/hooks/useDragNode.ts index 5ab6714..2f7c129 100644 --- a/packages/frontend/src/hooks/useDragNode.ts +++ b/packages/frontend/src/hooks/useDragNode.ts @@ -59,10 +59,7 @@ export default function useDragNode(nodes: Node[], spaceActions: spaceActions) { } animationFrameId.current = requestAnimationFrame(() => { - const filteredNodes = nodes.filter( - (node) => node.id !== dragState.startNode?.id, - ); - const overlapNodes = findOverlapNodes(position, filteredNodes); + const overlapNodes = findOverlapNodes(position, nodes); const selectedNode = overlapNodes.length > 0 ? findNearestNode(position, overlapNodes)