From 693639838ca87b474f9b61d739c40c45e56cc1a9 Mon Sep 17 00:00:00 2001 From: HouYunFei <1844025705@qq.com> Date: Tue, 18 Aug 2026 14:37:25 +0800 Subject: [PATCH] feat(canvas): set default tool to Move and refine canvas navigation interactions --- CHANGELOG.md | 1 + docs/content/docs/progress/pending-test.mdx | 2 +- web/src/components/canvas/infinite-canvas.tsx | 2 +- web/src/pages/canvas/project.tsx | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e071c2c..6440b74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ + [新增] 提示词来源新增 Freestylefly GPT Image 2 内置来源。 + [优化] 画布多图展开状态改为由用户主动控制，操作画布其他区域时不再自动收起。 ++ [调整] 画布默认使用移动工具，可直接拖动元素或空白画布，按住 Control 可临时框选节点。 ## v0.15.1 - 2026-08-07 diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx index 5994754..15b2270 100644 --- a/docs/content/docs/progress/pending-test.mdx +++ b/docs/content/docs/progress/pending-test.mdx @@ -7,7 +7,7 @@ description: Implemented changes that still need manual verification The current release needs manual verification in these areas: -- Canvas navigation: the bottom toolbar should switch between Select and Move modes and reflect the active mode with its icon; Select should draw a clearly spaced dashed range whose dash length, gap, and stroke width remain visually constant at every zoom level, while Move should pan from either the background or a node. Clicking blank canvas space in either mode should deselect the current node and close its top toolbar and lower prompt panel. Holding Control or Space should temporarily invert the active tool without changing the toolbar mode: Select becomes Move, and Move becomes range selection. After clicking any canvas-page button, pressing Space should only invert the tool and must not trigger that button again. Middle-button panning and additive node selection with Shift/Cmd should continue to work, while Space remains available inside text inputs and editable content. +- Canvas navigation: the canvas should open in Move mode by default, and the bottom toolbar should switch between Select and Move modes and reflect the active mode with its icon; Select should draw a clearly spaced dashed range whose dash length, gap, and stroke width remain visually constant at every zoom level, while Move should drag elements directly and pan only when dragging the blank background. Clicking blank canvas space in either mode should deselect the current node and close its top toolbar and lower prompt panel. Holding Control or Space should temporarily invert the active tool without changing the toolbar mode: Select becomes Move, and Move becomes range selection. After clicking any canvas-page button, pressing Space should only invert the tool and must not trigger that button again. Middle-button panning from any position and additive node selection with Shift/Cmd should continue to work, while Space remains available inside text inputs and editable content. - English and Simplified Chinese switching across navigation, settings, titles, descriptions, Ant Design components, and persisted preferences. - Global Dropdown, Menu, Select, Cascader, and TreeSelect popup backgrounds, hover states, and selected states in both light and dark themes. - Canvas node resize stability, prompt scrolling, generated-prompt restoration, edit-prompt persistence after closing an existing image or text node panel, expanded prompt editing with live synchronization and `@` references, image editing, drag-and-drop references, and generation configuration. diff --git a/web/src/components/canvas/infinite-canvas.tsx b/web/src/components/canvas/infinite-canvas.tsx index 31cbbbf..aeae59d 100644 --- a/web/src/components/canvas/infinite-canvas.tsx +++ b/web/src/components/canvas/infinite-canvas.tsx @@ -113,7 +113,7 @@ export function InfiniteCanvas({ containerRef, viewport, tool, backgroundMode = const isBackgroundClick = !target?.closest("[data-node-id],[data-connection-id]"); const temporaryTool = event.ctrlKey || isSpacePressed; const activeTool = temporaryTool ? (tool === "select" ? "pan" : "select") : tool; - const shouldPan = event.button === 1 || (event.button === 0 && activeTool === "pan"); + const shouldPan = event.button === 1 || (event.button === 0 && activeTool === "pan" && isBackgroundClick); if (shouldPan) { event.preventDefault(); diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx index bdb0942..385f753 100644 --- a/web/src/pages/canvas/project.tsx +++ b/web/src/pages/canvas/project.tsx @@ -199,7 +199,7 @@ function InfiniteCanvasPage() { const [chatSessions, setChatSessions] = useState([]); const [activeChatId, setActiveChatId] = useState(null); const [viewport, setViewport] = useState({ x: 0, y: 0, k: 1 }); - const [canvasTool, setCanvasTool] = useState<"select" | "pan">("select"); + const [canvasTool, setCanvasTool] = useState<"select" | "pan">("pan"); const [size, setSize] = useState({ width: 1200, height: 720 }); const [selectedNodeIds, setSelectedNodeIds] = useState>(new Set()); const [selectedConnectionId, setSelectedConnectionId] = useState(null);