admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-04 16:14:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(canvas): stabilize node resizing by hiding toolbar during resize to prevent rendering issues

Browse Source
This commit is contained in:
HouYunFei
2026-08-03 11:37:19 +08:00
parent 8efd714221
commit 1e92157a23
4 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/canvas/canvas-node.tsx
+9 -2
View File
@@ -44,7 +44,9 @@ type CanvasNodeProps = {
onHoverStart: (nodeId: string) => void;
onHoverEnd: (nodeId: string) => void;
onConnectStart: (event: React.MouseEvent, nodeId: string, handleType: "source" | "target") => void;
onResizeStart: (nodeId: string) => void;
onResize: (nodeId: string, width: number, height: number, position?: Position) => void;
onResizeEnd: (nodeId: string) => void;
onContentChange: (nodeId: string, content: string) => void;
onTitleChange: (nodeId: string, title: string) => void;
onToggleBatch?: (nodeId: string) => void;
@@ -105,7 +107,9 @@ export const CanvasNode = React.memo(function CanvasNode({
onHoverStart,
onHoverEnd,
onConnectStart,
onResizeStart,
onResize,
onResizeEnd,
onContentChange,
onTitleChange,
onToggleBatch,
@@ -261,11 +265,13 @@ export const CanvasNode = React.memo(function CanvasNode({
resizeRef.current.isResizing = false;
window.removeEventListener("mousemove", handleResizeMove);
window.removeEventListener("mouseup", handleResizeUp);
}, [handleResizeMove]);
onResizeEnd(data.id);
}, [data.id, handleResizeMove, onResizeEnd]);
const handleResizeMouseDown = (event: React.MouseEvent, corner: ResizeCorner) => {
event.stopPropagation();
event.preventDefault();
onResizeStart(data.id);
resizeRef.current = {
isResizing: true,
corner,
@@ -286,8 +292,9 @@ export const CanvasNode = React.memo(function CanvasNode({
return () => {
window.removeEventListener("mousemove", handleResizeMove);
window.removeEventListener("mouseup", handleResizeUp);
if (resizeRef.current.isResizing) onResizeEnd(data.id);
};
}, [handleResizeMove, handleResizeUp]);
}, [data.id, handleResizeMove, handleResizeUp, onResizeEnd]);
return (
<div
web/src/pages/canvas/project.tsx
+7 -1
View File
@@ -241,6 +241,7 @@ function InfiniteCanvasPage() {
const [collapsingBatchIds, setCollapsingBatchIds] = useState<Set<string>>(new Set());
const [openingBatchIds, setOpeningBatchIds] = useState<Set<string>>(new Set());
const [isNodeDragging, setIsNodeDragging] = useState(false);
const [isNodeResizing, setIsNodeResizing] = useState(false);
const [dropTargetGroupId, setDropTargetGroupId] = useState<string | null>(null);
const nodesRef = useRef(nodes);
@@ -1463,6 +1464,9 @@ function InfiniteCanvasPage() {
setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, width, height, position: position || node.position } : node)));
}, []);
const handleNodeResizeStart = useCallback(() => setIsNodeResizing(true), []);
const handleNodeResizeEnd = useCallback(() => setIsNodeResizing(false), []);
const toggleNodeFreeResize = useCallback((nodeId: string) => {
setNodes((prev) =>
prev.map((node) => {
@@ -2871,7 +2875,9 @@ function InfiniteCanvasPage() {
onHoverStart={handleNodeHoverStart}
onHoverEnd={handleNodeHoverEnd}
onConnectStart={handleConnectStart}
onResizeStart={handleNodeResizeStart}
onResize={handleNodeResize}
onResizeEnd={handleNodeResizeEnd}
onContentChange={handleNodeContentChange}
onTitleChange={handleNodeTitleChange}
onToggleBatch={toggleBatchExpanded}
@@ -2910,7 +2916,7 @@ function InfiniteCanvasPage() {
</InfiniteCanvas>
<CanvasNodeHoverToolbar
node={isNodeDragging || nodeImageSettingsOpen ? null : toolbarNode}
node={isNodeDragging || isNodeResizing || nodeImageSettingsOpen ? null : toolbarNode}
viewport={viewport}
extraTools={toolbarNode ? buildNodeToolbarItems(toolbarNode) : undefined}
onKeep={keepNodeToolbar}