前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载useSelectionState()是open-pencil/vue提供的核心响应式组合式函数composable用于把编辑器当前的选择状态是否有选中对象、选中数量、主选中对象及其节点类型转化为可直接驱动 UI 的响应式数据。无论你在开发属性面板、工具栏按钮、右键菜单还是状态栏提示都可以用它替代手动读取场景图状态从而让界面与选择变化自动保持同步。读完本文你将掌握该 API 的完整返回值语义、底层实现原理以及如何与useSelectionCapabilities、useEditorCommands配合构建选择驱动的界面。useSelectionState 是什么useSelectionState()从当前编辑器中暴露与选择派生selection-derived的响应式状态覆盖四种典型 UI 需求当前是否选中了任何对象hasSelection当前选中了多少个对象selectedCount当前的主选中对象是谁selectedNode当前选择的对象类型是实例Instance、组件Component还是编组GroupisInstance/isComponent/isGroup。官方对它的定位是用选择状态驱动 UI而不必在每个组件中手动读取图形graph状态。这与该 SDK 中“为界面消费方提供声明式状态”的整体设计一致——packages/vue/src/editor/selection-state/use.ts中的实现注释也明确写道Returns reactive selection-derived state for the current editor. Use this composable to drive UI from the current selection without manually reading graph state in every component.引入方式与基础用法useSelectionState是open-pencil/vue包对外公开的 API 之一与useEditor、useCanvas、useSelectionCapabilities、useEditorCommands等并列为核心组合式函数见 composables 索引。在 Vue 组件中直接引入即可import { useSelectionState } from open-pencil/vue const selection useSelectionState()一个典型的基础示例来自官方文档的 use-selection-state 页面用于在界面一角显示当前选择概况script setup langts import { useSelectionState } from open-pencil/vue const { hasSelection, selectedCount, isInstance } useSelectionState() /script template div classtext-xs text-muted span v-if!hasSelectionNo selection/span span v-else {{ selectedCount }} selected span v-ifisInstance· instance/span /span /div /template当你需要基于“是否选中、选了几个、主选中对象、是否为实例/组件/编组”来渲染 UI 时都应该优先考虑useSelectionState()。返回值逐项解析useSelectionState()返回以下响应式值以computed/useSceneComputed实现全部随编辑器状态自动更新返回值含义底层实现packages/vue/src/editor/selection-state/use.tsselectedIds当前选中节点 ID 的响应式集合SetstringuseSceneComputed(() editor.state.selectedIds)直接订阅编辑器内部选中集合hasSelection是否有选中对象布尔computed(() selectedIds.value.size 0)selectedNode主选中节点仅当恰好选中 1 个时返回该节点多选时返回null由useSelectedNodeState提供见下文“节点副本机制”selectedCount选中节点数量computed(() selectedIds.value.size)selectedNodeType主选中节点的类型字符串无选中时为nullcomputed(() selectedNode.value?.type ?? null)isInstance主选中节点是否为实例selectedNodeType.value INSTANCEisComponent主选中节点是否为组件selectedNodeType.value COMPONENTisGroup主选中节点是否为编组selectedNodeType.value GROUPcanCreateComponentSet是否可以把当前选择创建为组件集Component Set至少选中 2 个且所有选中节点均为COMPONENT类型其中canCreateComponentSet的实现是理解“选择类型驱动能力判断”的关键示例见 use.tsconst canCreateComponentSet useSceneComputed(() { if (selectedIds.value.size 2) return false for (const id of selectedIds.value) { if (editor.graph.getNode(id)?.type ! COMPONENT) return false } return true })即组件集需要以多个组件为基础因此选中数量少于 2或存在非组件节点时该能力为false。此外返回值中还包含editor实例本身便于在需要时直接调用编辑器 API。实战场景一仅对实例展示的操作在设计工具中很多操作如“取消实例链接”“跳转到主组件”只对实例有意义。借助isInstance可以直接控制这类 UI 的显隐const { isInstance } useSelectionState()button v-ifisInstance clickrunCommand(selection.detachInstance) Detach instance /buttonselection.detachInstance是useEditorCommands暴露的编辑器命令 ID 之一完整命令集合见 use-editor-commands 文档。实战场景二启用组件集创建 UI当用户选中多个组件时界面应允许“创建组件集”否则按钮应禁用或隐藏const { canCreateComponentSet } useSelectionState()button :disabled!canCreateComponentSet clickrunCommand(selection.createComponentSet) Create component set /button这恰好体现了useSelectionState与useEditorCommands的协作模式前者负责“能否”后者负责“执行”。底层原理场景计算、节点副本与事件驱动刷新场景计算useSceneComputedselectedIds与canCreateComponentSet都通过useSceneComputed构建。这是 SDK 内部基于场景scene版本的记忆化计算机制位于 packages/vue/src/internal/scene-computed它把计算绑定到编辑器状态/场景版本号上使得任何影响选择的场景变更都会触发相应响应式值失效并重新求值。selectedNode 的“副本”机制selectedNode并非直接暴露场景图上的原节点而是通过useSelectedNodeState得到的一份带属性级预览跟踪的选中节点副本。其实现位于 nodes.tsnodes是一个computed返回editor.getSelectedNodes()的深拷贝列表每个节点经structuredClone后包一层shallowReactive注释明确说明“从不代理图形本身”never proxies the graphnode仅在选中数量恰好为 1 时返回第一个节点否则为null当编辑器停用如组件卸载/页面切换导致的 activity 禁用且已有缓存时直接复用上一次结果避免不必要的计算。这意味着你可以安全地读取选中节点的属性用于渲染而不会破坏场景图的内部一致性。事件驱动的刷新与自动清理为确保副本与真实场景同步createSelectedNodeState内部通过watchImmediate订阅了一系列编辑器事件nodes.tsnode:previewUpdated属性预览更新时同步更新副本用于拖拽调整等实时预览场景node:updated/node:created/node:deleted/node:reparented/node:reordered节点增删改与层级变化selection:changed选择变化graph:replaced/page:changed整图替换与页面切换。所有订阅在tryOnScopeDispose中随组件作用域自动清理因此你无需手动管理监听器生命周期。与相关 API 的协作useSelectionState在 SDK 的“选择与命令”组合式函数族中处于基础位置官方文档含意大利语版 use-selection-state将其与以下 API 关联useSelectionCapabilities计算当前选择“可做什么”能否分组、解除编组、创建组件、组合变体、分离实例、排序、删除等其实现packages/vue/src/editor/selection-capabilities/use.ts内部正是直接复用了useSelectionState()的返回值——例如canGroup依赖selectedCount 2canUngroup依赖isGroupcanCreateComponentSet直接透传selection.canCreateComponentSetcanDetachInstance依赖isInstance。官方建议用它来启用或隐藏命令而无需在每个地方重复类型判断规则useEditorCommands在编辑器动作之上提供命令层用于构建应用菜单、右键菜单、工具栏与快捷键适配配合useSelectionState即可实现“根据选择状态控制命令可用性”的完整交互闭环useEditoruseSelectionState内部通过useEditor()获取当前编辑器上下文因此使用时必须先通过provideEditor提供编辑器实例参见 provide-editor。小结useSelectionState()是 OpenPencil Vue SDK 中面向“选择驱动 UI”的基石 API它以最少的样板把选择存在性、数量、主节点与类型判断包装成响应式状态底层通过场景计算与事件订阅保证一致性并通过节点副本机制安全暴露选中节点。实际开发中建议按以下分工使用状态来源一律使用useSelectionState读取选择相关数据避免在多个组件中各自手动读取editor.state.selectedIds能力判断需要“某个操作当前是否可执行”时优先使用useSelectionCapabilities它已基于选择状态内置全部规则动作执行通过useEditorCommands的runCommand/menuItem统一触发命令。三者组合即可低成本构建出与 Figma 类设计工具一致的、选择状态完全联动的属性面板与工具栏体验。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 响应式选择状态useSelectionState 组合式 API 实战与源码解析OpenPencil 响应式选择状态useSelectionState 组合式 API 实战与源码解析 导读 useSelectionState 是 Open前端桌面应用AI 应用MCP 服务OpenPencil 开发实战useSelectionState 选择状态组合式函数完全指南OpenPencil 开发实战useSelectionState 选择状态组合式函数完全指南 useSelectionState 是 OpenPencil 的前端桌面应用AI 应用MCP 服务OpenPencil Vue SDK 无样式外观控件AppearanceControlsRoot 插槽 API 与属性面板实战OpenPencil Vue SDK 无样式外观控件AppearanceControlsRoot 插槽 API 与属性面板实战 AppearanceContr前端桌面应用AI 应用MCP 服务上一篇es-toolkit BigInt sum 函数全解析任意精度求和的正确打开方式下一篇Yakit 图标库迁移实战基于 yakit-libs/yakit-ui-icons 的本地 SVG 留存审查与改造清单创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考