lowcode-engine 画布详解组件操作、Slot 区块与组件编辑态的完整指南【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine本篇技术指南围绕 lowcode-engine 编辑器核心交互面——「画布Canvas」展开系统讲解组件选中、拖拽排序、复制删除、键盘切换选择、Slot 区块拖入与锁定以及组件编辑态__designMode与editUrls双方案的底层实现。读者读完可以完整掌握画布交互的用法并理解这些交互在 designer 与 renderer-core 源码中的落地机制为扩展画布能力自定义快捷键、自定义操作辅助区提供直接依据。组件操作画布操作点击组件右侧面板显示属性配置在画布中点击任意组件该组件即被选中右侧面板会同步显示出对应组件的属性配置选项属性、样式、事件等配置项均来源于该组件的物料元数据componentMeta。这一交互的底层依赖 designer 的「边框选中」机制BEM Tools 中的BorderSelecting。当选中态变化时border-selecting.tsx 会为当前节点渲染高亮边框与操作辅助区同时通过 offset observer 实时计算组件在画布中的位置与尺寸保证选中框跟随组件移动、缩放。拖拽修改组件的排列顺序直接拖拽画布中的组件即可调整其在容器内的排列顺序。拖拽动作由 designer 的Dragon拖拽引擎接管拖拽开始时组件进入悬浮态落点由Location模块计算并高亮展示可放置位置松手后节点被移动到新的位置兄弟节点之间插入或跨容器移动。拖拽时右侧提示当前组件树拖拽过程中右侧大纲树Outline Pane会实时提示当前被拖拽的组件在组件树中的目标位置——高亮显示将要插入的层级与顺序方便你在复杂嵌套结构中精准放置。组件控制选中组件后其右上角会出现操作辅助区Toolbar内置复制与删除等快捷操作复制点击组件右上角的复制按钮或按下ctrl c后再按下ctrl v即可复制该组件删除点击组件右上角的删除按钮或直接使用Delete键即可将其删除。内置操作的实现集中在 component-actions.ts其中remove操作component-actions.ts 第 26-36 行内部执行node.remove()直接将该节点从文档树中移除copy操作component-actions.ts 第 54-85 行通过doc.insertNode(parent, node, (index ?? 0) 1, true)在目标父节点下、原节点之后的相邻位置插入一个深拷贝节点随后newNode.select()让新节点成为选中态并自动对拷贝子树中的ref做去重处理deduplicateRef避免引用冲突若被复制节点位于 RGL 磁贴布局容器中复制动作还会同步复制其 layout 信息fieldId与布局项保证复制出的磁贴块位置正确。操作辅助区的渲染逻辑位于 border-selecting.tsx 第 102-119 行遍历node.componentMeta.availableActions对满足important且condition条件的操作渲染按钮点击后通过createAction执行对应 action 并向编辑器事件总线发出designer.border.action事件。选择组件切换除了用鼠标点击选中还可以用键盘方向键在组件间切换选择↑向上选择组件↓向下选择组件←向左选择组件→向右选择组件此外将鼠标 hover 到组件操作辅助区的第一项即 NodeSelector 下拉项可以选中当前组件的父级节点。在嵌套层级较深时这是快速「向上跳一级」选择的高效手段对应的 NodeSelector 实现位于 node-selector。可扩展项简述画布交互并非写死快捷键、操作辅助区均支持扩展操作辅助区扩展操作按钮来自componentMeta.availableActions你可以通过物料的configure元数据注册自定义操作advanced.callbacks中的钩子如onMouseDownHook也会介入选中交互同时 ComponentActions 类对外提供removeBuiltinComponentAction(name)方法可移除内置的remove/copy/lock/unlock等操作实现按需裁剪快捷键扩展编辑器快捷键通过 editor-core 的 hotkey 模块 注册与分发开发者可自由绑定新的组合键来触发自定义命令。Slot 区块什么是 Slot在 React 中组件可以定义一个 prop 选项为JSXElement或(...args) JSXElement的形式渲染函数形式的 prop 被称为「插槽」。在低代码画布中这种形式被定义为Slot插槽区块它是一块独立的、可拖入组件的占位区域允许直接往其内部拖入组件进行符合直觉的所见即所得操作。从源码看Slot 是文档树中的一种特殊节点Node 模型通过isSlot()判断节点是否为插槽节点node.ts 第 502-506 行同一个组件下相同slotName的 Slot 具有唯一性参见 utils/slot.ts 的includeSlot/removeSlot逻辑。Slot 节点在操作辅助区上有特殊待遇在 border-selecting.tsx 第 106-109 行 中if (node.isSlot() (name copy || name remove))会跳过 Slot 节点的复制与删除操作避免误操作破坏组件结构。锁定 Slot可以对 Slot 进行锁定操作锁定后Slot 内部的内容无法被选中无法点击选中、无法 hover 高亮内部组件如需恢复可以在组件树大纲树中解除锁定。锁定的底层实现是节点的一个扩展属性Node.lock(flag true)会通过setExtraProp(isLocked, flag)写入锁定状态get isLocked()读取该属性node.ts 第 636-648 行。在画布侧border-detecting.tsx 会查找最近的锁定节点并为其显示「已锁定locked」状态角标同时画布与大纲树都会跳过锁定节点及其子树的选中/悬停响应Node 的isLocked语义即「cannot select / hover on canvas and outline」见 node.ts 第 183 行 注释。值得说明的是画布上的组件锁定按钮默认不显示需要开启配置开关后才可用内置lock/unlock操作的condition为engineConfig.get(enableCanvasLock, false)component-actions.ts 第 96-115 行即通过enableCanvasLock配置项控制画布锁定能力是否启用。组件编辑态低代码引擎允许组件在编辑状态下表现得和渲染时不一样编辑态下可以提供更直观的布局操作工具例如 pro-layout 这类布局组件在编辑态展示专属的操作面板而运行时保持正常渲染。其背后有两种实现方法方法一侵入型__designMode属性组件编辑态下渲染器会往组件内部传入__designMode: design组件可以在自身代码中判断该属性进行相应处理如渲染操作 UI、禁用运行时逻辑。这一机制在渲染核心中有完整实现链renderer-core 的 base.tsx 中get __designModeIsDesign()读取engine?.props?.designMode design第 791-794 行作为编辑态开关解析 props 时otherProps.__designMode engine.props.designMode第 605 行将设计态标识注入组件 props在 react-simulator-renderer 中customCreateElement从 props 中剥离__id、__designMode等内部字段renderer.ts 第 475 行避免内部标记泄漏到业务逻辑其余 props 原样传递给真实组件。因此对于采用侵入型的组件只需要在组件代码中判断props.__designMode design即可渲染编辑态专属内容无需额外加载资源。方法二双入口型editUrls配置通过配置物料的editUrls加载专属于编辑态组件的物料一套独立的编辑态 JS/CSS 资源运行时与编辑态各自加载不同的组件实现互不干扰。pro-layout 使用的即是这种方式物料配置示例{ package: alifd/pro-layout, version: 1.0.1-beta.6, library: AlifdProLayout, urls: [ https://alifd.alicdn.com/npm/alifd/pro-layout1.0.1-beta.6/dist/AlifdProLayout.js, https://alifd.alicdn.com/npm/alifd/pro-layout1.0.1-beta.6/dist/AlifdProLayout.css ], editUrls: [ https://alifd.alicdn.com/npm/alifd/pro-layout1.0.1-beta.6/build/lowcode/view.js, https://alifd.alicdn.com/npm/alifd/pro-layout1.0.1-beta.6/build/lowcode/view.css ] }其中urls运行时渲染加载的组件资源JS 与 CSSeditUrls编辑态加载的专属资源通常指向低代码平台专用的编辑器视图产物。editUrls的字段定义见 types 的 package 类型editUrls?: string[] | any。在模拟器宿主加载资源时host.ts 第 419-423 行 会按优先级处理如果物料声明了editUrls则编辑态优先加载editUrls指定的资源否则回退加载urlsif (item.editUrls) { libraryAsset.push(item.editUrls); } else if (item.urls) { libraryAsset.push(item.urls); }两种方案的选型建议侵入型实现简单、无需额外构建产物适合编辑态只是「加一层操作 UI / 开关」的组件代价是组件代码需要感知设计态标识双入口型职责分离最彻底编辑态与运行时是完全独立的两套实现适合编辑态交互复杂的布局类组件代价是需要额外构建并发布一套editUrls产物且资源体积翻倍。总结画布是 lowcode-engine 编辑器的核心交互界面本文覆盖了从基础操作选中、拖拽、复制删除、键盘切换到进阶能力Slot 拖入与锁定、组件编辑态的完整链路。其底层均由 designer 的节点模型Node、拖拽引擎Dragon、BEM 工具边框选中/检测与 renderer-core 的渲染管线协同完成isLocked/isSlot决定了节点在画布上的交互边界availableActions与engineConfig决定了操作辅助区的形态与开关__designMode/editUrls则让「编辑态 ≠ 运行态」成为可能。理解这些机制后无论是扩展快捷键、定制操作按钮还是为自家组件实现编辑态体验都能在源码层面找到明确抓手。更多画布相关配置可继续阅读 panels 面板系列文档其中 settings.md 介绍了与画布选中联动的右侧属性配置面板component.md 介绍了组件库面板与拖入画布的完整流程。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
