前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载toolCursor(tool, override?)是 open-pencilAI-native 设计编辑器开源 Figma 替代方案Vue SDK 提供的一个轻量工具函数它将编辑器当前激活的工具映射为对应的 CSS 光标值并允许通过override参数显式替换结果。本篇围绕该 API 的签名、工具-光标映射表、覆盖机制以及它在 open-pencil 画布组件中的真实调用链展开帮助你在自研画布外壳或工具栏 UI 中实现与主编辑器一致的光标行为。一、API 签名与定位toolCursor定义于 tool-cursor/index.ts从 SDK 包入口 index.ts 导出并在 Vue 包 README 的 API 清单中列为顶层可用 API。其签名如下export function toolCursor(tool: Tool, override?: string | null): stringtool编辑器工具标识类型为Tool联合类型共 11 个成员定义于 editor/types.tsoverride可选的字符串覆盖值可为null返回值最终应应用的 CSScursor值字符串。实现本身只有三行核心逻辑export function toolCursor(tool: Tool, override?: string | null): string { if (override) return override return TOOL_CURSORS[tool] ?? default }从源码结构看该函数被归类于 Vue SDK 的横切内部工具ARCHITECTURE.md 提到toolCursor位于跨领域内部模块但其职责非常聚焦让自定义画布外壳custom canvas shell或工具栏 UI 无需自行维护「工具 → 光标」的映射即可获得与主编辑器一致的光标体验。二、完整的工具-光标映射表映射关系由源文件顶部的TOOL_CURSORS常量表给出index.ts完整覆盖Tool联合类型的所有 11 个成员工具Tool光标值语义说明SELECTdefault常规箭头光标用于选择与拖拽FRAMEcrosshair十字准星用于绘制画框SECTIONcrosshair十字准星用于绘制分区RECTANGLEcrosshair十字准星用于绘制矩形ELLIPSEcrosshair十字准星用于绘制椭圆LINEcrosshair十字准星用于绘制直线POLYGONcrosshair十字准星用于绘制多边形STARcrosshair十字准星用于绘制星形TEXTtext文本 I 形光标用于插入文字PENcrosshair十字准星用于钢笔路径绘制HANDgrab抓手光标用于画布平移可以看出映射规则相当直观所有“画东西”的工具形状、画框、钢笔统一用crosshair选择工具用default文本工具用text手型工具用grab。此外TOOL_CURSORS[tool] ?? default提供了一个兜底若传入的tool不在表中例如未来扩展了新工具而映射表尚未更新函数会安全地回退到default而不是返回undefined。三、override 机制显式覆盖优先第二个参数override遵循“真值优先”策略只要传入非空字符串就直接返回该值完全绕过工具映射if (override) return override这意味着toolCursor(SELECT, nwse-resize)返回nwse-resizetoolCursor(SELECT, null)或toolCursor(SELECT)返回defaultoverride传空字符串时按 falsy 处理仍走工具映射从源码的if (override)真值判断可以确认。这个设计对应的实际场景是工具只决定“基础光标”而瞬时的交互状态悬停命中可编辑区域、正在拖拽、正在绘制路径等可以临时覆盖它。open-pencil 的画布层正是这样使用的。四、真实调用链EditorCanvas 如何组合 toolCursor 与交互覆盖在主应用组件 EditorCanvas.vue 中光标由一个响应式计算属性产生const cursor computed(() toolCursor(store.state.activeTool, cursorOverride.value))其中两个输入各有来源store.state.activeTool编辑器共享状态中的当前激活工具类型即前文提到的ToolcursorOverride由画布输入组合式 useCanvasInput 返回的Refstring | null用于承载交互期间产生的临时光标。cursorOverride的典型写入点包括悬停命中检测指针移动时useCanvasInput在 refreshMeasurement 中调用updateHoverCursor(...)根据指针位置命中的节点类型例如可缩放的边、可拖拽的引导线写出对应的临时光标引导线拖拽通过createGuideInput的setCursor回调写入useCanvasInput.ts钢笔绘制过程pen/input.ts 在路径构建期间将cursorOverride置为crosshair保证即使底层工具状态有细微变化绘制中光标也稳定交互结束清理交互 cleanup 阶段会将其重置为nulluseCanvasInput.ts使光标回落到toolCursor的基础映射。由此形成的分层模型是activeTool决定基础光标cursorOverride在交互生命周期内做短时覆盖toolCursor负责把二者合并为最终值。自定义画布外壳只需复制「computed(() toolCursor(activeTool, override))」这一行组合逻辑就能获得与主编辑器一致的三层行为。五、在自定义画布外壳中使用结合上文调用链一个最小的自研工具栏/画布外壳集成示例如下script setup langts import { computed, ref } from vue import { toolCursor } from open-pencil/vue const activeTool ref(SELECT) // 由你的工具状态管理写入 const override refstring | null(null) // 交互期间临时写入 const cursor computed(() toolCursor(activeTool.value, override.value)) /script template div classmy-canvas :style{ cursor } !-- 自定义画布内容 -- /div /template要点activeTool的取值必须来自Tool联合类型的 11 个成员映射表与兜底逻辑见 tool-cursor/index.tsoverride建议只写入瞬时的交互光标交互结束后重置为null与 useCanvasInput.ts 中 cleanup 时的行为保持一致若需要配合画布与编辑器命令使用可参考 SDK 组合式 API useCanvas 与useEditorCommands的相关文档页。六、小结与延伸阅读toolCursor虽然只有十余行实现却浓缩了 open-pencil 处理工具光标的完整约定11 个工具到 CSS 光标的固定映射、default兜底以及“工具为基础、交互为覆盖”的两层模型。核心实现与证据路径如下便于继续深入实现packages/vue/src/editor/tool-cursor/index.tsTool类型定义packages/core/src/editor/types.ts应用侧调用src/components/EditorCanvas.vue覆盖值来源packages/vue/src/canvas/useCanvasInput.ts、packages/vue/src/canvas/pen/input.tsAPI 清单packages/vue/README.md赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐昇腾生态整合Open-LLaMA 3B模型与国产AI芯片的协同优化策略昇腾生态整合Open LLaMA 3B模型与国产AI芯片的协同优化策略 昇腾生态整合为国产AI芯片的应用带来了全新可能Open LLaMA 3B模型与昇腾芯Plate 编辑器行为标准落地mention/affinity 对齐与 mark 亲和性Affinity机制剖析Plate 编辑器行为标准落地mention/affinity 对齐与 mark 亲和性Affinity机制剖析 导读 本文基于仓库内执行记录 docs/前端富文本UI组件上一篇微服务持续集成paascloud-master Jenkins自动化部署流程下一篇FreeCAD 参数化建模安装指南3条路线快速跑起来的新手完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考