feat(canvas): set default tool to Move and refine canvas navigation interactions

This commit is contained in:
HouYunFei
2026-08-18 14:37:25 +08:00
parent e44c0c4b3e
commit 693639838c
4 changed files with 4 additions and 3 deletions
+1
View File
@@ -4,6 +4,7 @@
+ [新增] 提示词来源新增 Freestylefly GPT Image 2 内置来源。
+ [优化] 画布多图展开状态改为由用户主动控制,操作画布其他区域时不再自动收起。
+ [调整] 画布默认使用移动工具,可直接拖动元素或空白画布,按住 Control 可临时框选节点。
## v0.15.1 - 2026-08-07
+1 -1
View File
@@ -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.
@@ -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();
+1 -1
View File
@@ -199,7 +199,7 @@ function InfiniteCanvasPage() {
const [chatSessions, setChatSessions] = useState<CanvasAssistantSession[]>([]);
const [activeChatId, setActiveChatId] = useState<string | null>(null);
const [viewport, setViewport] = useState<ViewportTransform>({ 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<Set<string>>(new Set());
const [selectedConnectionId, setSelectedConnectionId] = useState<string | null>(null);