前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载OpenPencil开源 Figma 替代品、AI 原生设计编辑器的组件系统是一套主组件Main Component→ 实例Instance→ 覆盖Override→ 库Library的可复用设计基础设施修改主组件所有实例自动同步实例上被覆盖的属性则在同步中被保留。本文以官方用户指南为骨架结合packages/core与packages/scene-graph的源码实现完整讲解组件的浏览、创建、实例化、变体组合、实时同步与库的发布/更新流程读完后你将掌握从创建第一个组件到发布并跨文档更新组件库的端到端能力。组件是什么主组件与实例的关系组件Component是可复用的设计对象。你在画布上创建一个组件后从它派生的每一个实例Instance都保留指向主组件的链接。当主组件被编辑时所有实例自动更新——这正是组件系统与复制粘贴一份副本的本质区别副本之间没有联系而组件维护了一条持续生效的同步关系。从源码结构看这条关系被显式建模在场景图中INSTANCE节点通过componentId字段指向其COMPONENT源节点场景图还维护了一个instanceIndex组件 → 实例集合的反向索引见 packages/scene-graph/src/instances.ts 中的getInstances()与getMainComponent()。浏览与插入组件打开左侧面板的Risorse资源/Assets标签页即可浏览两类组件本地组件按来源页面source page分组已启用的库组件来自你启用过的发布库。面板提供网格/列表两种视图支持按组件名称搜索选中某个组件可以查看其详情。插入组件有三种方式任选其一单击组件选中后按Enter直接把它拖拽到画布上。已下载过修订revision的库资产在离线时依然可用——即便远程提供方暂时不可用也不会影响已缓存的资产。这一点在 packages/core/src/library/registry.ts 的MemoryLibraryCatalog与库缓存机制中得到了印证修订以库 ID 修订 ID为键做本地存储读取时若未指定修订则解析到latest指针。创建组件选中一个frame 或 group然后按下快捷键macOS⌥⌘KWindows / LinuxCtrlAltK选中内容随即变成一个可复用的组件。若一次选中多个节点OpenPencil 会以它们的包围盒bounding box为位置把它们包裹进一个新的组件容器。源码中这一行为由 packages/core/src/editor/components.ts 的createComponentFromSelection实现单个 frame/group 直接通过updateNode({ type: COMPONENT })就地转换多选则走wrapSelectionInContainer(COMPONENT, ...)路径。创建成功后组件上方会显示一个紫色标签 菱形图标这是组件在画布上的固定视觉标记。创建实例创建实例有两种途径在组件上右键 → 选择创建实例Create instance从Risorse面板插入该组件插入即生成实例。新实例会出现在源组件右侧 40 px处视觉上与组件完全一致。需要注意实例创建只通过右键上下文菜单提供工具栏没有对应按钮这是有意的交互设计。源码层面对应 packages/scene-graph/src/instances.ts 的createInstance()它复制主组件的同步属性集、建立componentId链接并通过cloneChildrenWithMapping()深克隆组件子树从而保证实例初始内容与主组件逐节点对应。同一文件中的cloneChildrenWithMapping还包含一项重要保护——拒绝把子树克隆进自身或其子孙防止自引用/循环组件例如INSTANCE的componentId指向某个祖先造成无限递归与内存耗尽。覆盖Override实例上的局部修改实例与副本的本质区别在于你可以在不切断同步链接的前提下修改实例的特定属性这些修改被记录为覆盖override。当某个属性在实例上被覆盖后该属性在同步时会被跳过不再跟随主组件其余未被覆盖的属性继续随主组件更新。覆盖信息被保存在每个实例的instanceOverrides状态中。数据结构上packages/scene-graph/src/instance-overrides.ts 将其建模为self实例自身的覆盖字段descendants按子节点 ID 索引的覆盖字段两张 Map并支持序列化/反序列化——这为.fig文件持久化与撤销/重做提供了基础。同步逻辑中的命中即跳过由hasNodeInstanceOverride()判断见syncInstances()主循环。可覆盖的属性子节点级child-level覆盖支持名称name文本内容text字号font size、字重font weight、字体族font family所有视觉与布局属性填充fills、描边strokes、效果effects、不透明度opacity、圆角corner radii、尺寸size。实例自身的同步字段全集定义于 packages/scene-graph/src/instances.ts 的INSTANCE_SYNC_PROPS/INSTANCE_SYNC_TEXT_PROPS包括宽高、min/max 约束、fills/strokes/effects、opacity、四角独立圆角、auto layout 全套属性layoutMode、主轴/交叉轴对齐与尺寸、间距、内边距、网格行列、clipsContent、独立描边粗细、变量绑定boundVariables、variableModes等——这是一个相当完整的可同步属性清单。新子节点自动克隆当你向主组件新增一个子节点时所有已存在的实例会自动获得一份克隆副本且实例中的子节点顺序始终与主组件保持一致。这是syncChildren()五趟流程的最后一步sortInstanceChildren它依据每个实例子节点的componentId/sourceComponentId映射回主组件的子节点顺序做重排。命中测试Hit Testing组件与实例都是不透明容器单击其内部的子元素选中的是组件/实例本身而不是子元素双击才能进入组件内部选中子元素继续编辑。这样的设计把整体操作与内部编辑两个层级明确分开。组件属性文本、可见性与实例交换组件和组件集支持以下可复用属性component properties把实例的差异化能力参数化文本text把某个文本子节点暴露为属性不同实例可填写不同文案布尔可见性boolean visibility控制某个子节点的显示/隐藏实例交换instance swap允许实例在多个组件之间切换变体variants多维取值组合见下一节。实现上这些属性被建模为ComponentPropertyDefinition与实例上的属性赋值componentPropertyValues分离存储。你可以把某个属性链接到组件的后代字段然后选中实例、直接编辑其赋值而无需先脱离detach实例。属性和赋值在保存并重新打开.fig文件时会被完整保留——底层由实例覆盖状态的序列化机制保证。组件集Component Set与变体Variants把两个或更多组件组合成一个组件集macOS⇧⌘KWindows / LinuxShiftCtrlK组件集是一个带虚线紫色边框的容器其子组件周围有40 px 内边距。集内的每个组件可以沿**多个变体维度variant dimension**取值例如SizeSmall | SizeLarge StateDefault | StateHover | StatePressed ThemeLight | ThemeDarkOpenPencil 支持稀疏组合sparse combinations组件集不必穷举所有维度组合只存在你用到的那些组合即可重复组合会被拒绝。当一次更新后某个精确组合不复存在时**左上角的变体top-left variant**被用作默认回退。在组件属性面板中你可以添加、重命名、重排和删除变体维度及其取值。源码中组件集的创建由 packages/core/src/editor/components.ts 的createComponentSetFromComponents完成选中节点全部为COMPONENT时包裹为COMPONENT_SET随后调用deriveSlashVariantProperties从组件的斜杠命名如Button/SizeSmall/StateHover自动派生变体定义见 packages/scene-graph/src/variant-properties.ts。实时同步Live Sync当你编辑主组件时所有实例自动更新。同步的属性覆盖了绝大多数设计属性官方文档列出的核心包括宽度与高度width / height填充、描边与效果fills / strokes / effects不透明度与圆角opacity / corner radii布局属性auto layout 设置裁剪内容设置clips content。同步在节点更新、移动、尺寸调整后自动触发。从实现看packages/core/src/editor/component-sync.ts 的createComponentSyncScheduler维护了一个待同步组件集合通过queueMicrotask合并在同一微任务内发生的多次编辑防抖刷新时先沿父链把被编辑节点归约到所属COMPONENT再调用graph.syncInstances(compId)最后只对实际受影响页面重算布局——跨页面使用实例时也不会全量重排。同步底层packages/scene-graph/src/instances.ts 的syncInstancessyncChildren还内置了两道防线循环同步保护isCyclicSync如果实例所在子树位于组件自身内部跳过同步避免组件克隆自身导致的无限递归覆盖保护对每个同步字段先检查hasNodeInstanceOverride被覆盖的字段一律跳过。此外主组件的修改在应用前会以一次修订revision预览的形式呈现实例上的覆盖在同步后保持完整。脱离实例与定位主组件脱离实例Detach Instance选中实例后按⌥⌘BWindows / Linux 为CtrlAltB。实例随即变成一个独立的普通 frame与主组件不再有任何链接所有覆盖被烘焙bake进节点本身。源码见detachInstance()它从instanceIndex移除映射、把type改为FRAME、清空componentId并clearInstanceOverrides()。转到主组件Go to Main Component右键实例 → 选择该项编辑器会导航到并选中主组件跨页面时自动切换页面。组件库Component Libraries组件库把可复用资产以**不可变修订immutable revision**的形式发布出去。每个已发布资产拥有稳定的库 ID、资产键asset key与修订 ID 三层身份标识因此不同实例可以停留在不同修订上直到你显式更新它们。发布一个库创建好要分享的组件与组件集打开RisorseAssets→ 管理库Manage libraries选择发布库Publish library输入稳定的库 ID与显示名称——库 ID 在首次发布后即被锁定不可更改可选在变更列表中搜索并填写修订描述勾选本次要包含的新增、修改、重命名或移除的资产确认目标位置点击发布库。后续再次发布时未勾选的变更保持 pending 状态未变更的资产沿用此前发布的定义被移除的定义在仍有文档引用其历史修订时继续可用。从源码看发布由 packages/core/src/library/revision.ts 的createLibraryRevision完成它提取资产快照对库 ID 上一修订 资产清单计算内容哈希作为新修订 ID生成带schemaVersion的ComponentLibraryManifest结构见 packages/core/src/library/types.ts。LibraryCatalog接口只暴露三个操作——listLibraries()、getRevision()、publishRevision()MemoryLibraryCatalog在发布时校验previousRevisionId是否仍等于latest否则抛出修订冲突错误从机制上防止两个发布者静默互相覆盖conditional latest pointer。启用并插入库资产打开Risorse → 管理库启用一个已发布的库其组件就会与本地组件一起出现在资源面板中可以单击、键盘选中或拖拽插入。发布定义published definitions在消费文档中是只读的要修改定义必须回到源文档编辑并发布一个新修订链接到这些定义的实例仍可通过组件属性与覆盖保持可编辑。从实现上看消费文档中的库组件通过node.librarySource.identitylibraryId assetKey revisionId定位源定义findLibraryDefinition()正是按这三元组在场景图中查找对应节点见 packages/core/src/library/definitions.ts。审查并接受更新打开管理库 → 更新Updates可以发现更新的修订。发现discovery不会修改文档你可以并排对比当前实例与更新后的实例在受影响的实例之间导航然后选择更新范围仅更新选中的实例更新某个资产的全部实例更新当前页面上的实例更新所有页面上的实例。OpenPencil 会保留兼容的文本、可见性与实例交换赋值若精确变体组合已不存在审查界面会在应用前指出左上角回退变体。应用更新会生成一条撤销记录undo entry。底层由 packages/core/src/library/update.ts 的planLibraryInstanceUpdates/summarizeLibraryUpdate完成对比两个修订清单diffLibraryManifests得到变更列表对每个资产在旧变体 → 新变体映射中寻找精确匹配sameVariant找不到则回退到按y → x排序后的左上角组件topLeft并把fallback标记写入更新计划packages/core/src/library/instance-updates.ts 的planOutdatedLibraryInstances则负责扫描全图中所有库修订落后于最新的实例。本地、存储与离线使用库可以使用本地浏览器目录local browser catalog或已配置的存储提供方storage provider。远程发布使用不可变修订对象 条件性 latest 指针避免两个发布者静默覆盖彼此见上文MemoryLibraryCatalog的冲突校验。下载过的修订会被本地缓存文档可以离线继续渲染与插入已下载的定义同时完整性校验失败会被如实报告而不是被缓存数据掩盖。保存消费文档启用的库绑定enabled-library bindings与**物化定义materialized definitions**会随.fig文档一起保存。重新打开消费文件时其链接的实例与修订身份会被完整保留——即使其远程库当前不可用。视觉处理对照表元素外观组件标签Component label紫色 菱形图标始终可见实例标签Instance label紫色 菱形图标始终可见组件集边框Component set border虚线紫色轮廓快捷键速查操作MacWindows / Linux创建组件⌥⌘KCtrlAltK创建组件集⇧⌘KShiftCtrlK脱离实例⌥⌘BCtrlAltB实用技巧在实例内部编辑文本会自动产生一个覆盖——主组件后续变化不会覆盖掉这段实例专属文案用组件集组织多维变体尺寸、状态、主题等配合稀疏组合避免无效穷举可复用资产从其源文档发布发布定义在消费文档中刻意只读保证一处定义、多处引用的单一事实来源当某次修订移除了精确变体组合时先审查再接受更新并留意左上角回退提示全部与组件相关的操作入口可查阅 上下文菜单指南。组件的各类操作创建、实例化、变体切换、库更新均有对应的引擎测试覆盖见 packages/scene-graph/src/instance-overrides.test.ts 与 packages/core/src/library 目录下的实现/校验模块组件库的端到端行为也在 src/app/libraries发布、审查、更新分组、目录服务中落地可作为进一步阅读与二次开发的入口。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战OpenPencil 组件系统深度指南组件、实例、变体覆盖与组件库实战 组件Components是 OpenPencil 中最核心的复用机制把一组设计元前端桌面应用AI 应用MCP 服务OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析 OpenPencil 是一款开源的 AI 原生设计编辑器Figma 替代方案。本文前端桌面应用AI 应用MCP 服务EnTT实体组件系统实战注册表、实体与组件操作EnTT实体组件系统实战注册表、实体与组件操作 本文深入探讨EnTT实体组件系统的核心功能涵盖注册表 Registry 的基本操作、实体生命周期管理、组件操上一篇终极指南如何用TensorFlow实现智能城市规划与交通优化下一篇强力指南用V-Charts打造专业级数据可视化解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考