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)