Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | | | disabled | 禁用条件函数，可选
Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | | **ContextMenu 示例** ```typescript const App = () => { const menuItems: IPublicTypeContextMenuAction[] = [ { name: 'a', title: '选项 1', action: () => console.log('选项 1 被点击'), }, { name: 'b', title: '选项 2', action: () => console.log('选项 2 被点击'), }, ]; const ContextMenu = ctx.commonUI.ContextMenu; return (
右键点击这里
{
ContextMenu.create(menuItems, e);
}}>点击这里
> **@since** v1.0.0 ## 模块简介 配置模块，负责配置的读、写等操作。 ## 方法 ### get 获取指定 key 的值 ```typescript /** * 获取指定 key 的值 * get value by key * @param key * @param defaultValue * @returns */ get(key: string, defaultValue?: any): any; ``` **示例** ```typescript import { config } from '@alilc/lowcode-engine'; config.get('keyA', true); config.get('keyB', { a: 1 }); ``` ### set 设置指定 key 的值 ```typescript /** * 设置指定 key 的值 * set value for certain key * @param key * @param value */ set(key: string, value: any): void; ``` **示例** ```typescript import { config } from '@alilc/lowcode-engine'; config.set('keyC', 1); ``` ### has 判断指定 key 是否有值 ```typescript /** * 判断指定 key 是否有值 * check if config has certain key configed * @param key * @returns */ has(key: string): boolean; ``` **示例** ```typescript import { config } from '@alilc/lowcode-engine'; config.has('keyD'); ``` ### setConfig 批量设值，set 的对象版本 ```typescript /** * 批量设值，set 的对象版本 * set multiple config key-values * @param config */ setConfig(config: { [key: string]: any }): void; ``` **示例** ```typescript import { config } from '@alilc/lowcode-engine'; config.setConfig({ keyA: false, keyB: 2 }); ``` ### getPreference 获取全局 Preference 管理器，用于管理全局浏览器侧用户 Preference，如 Panel 是否钉住 ```typescript /** * 获取全局 Preference, 用于管理全局浏览器侧用户 Preference，如 Panel 是否钉住 * get global user preference manager, which can be use to store * user`s preference in user localstorage, such as a panel is pinned or not. * @returns {IPublicModelPreference} * @since v1.1.0 */ getPreference(): IPublicModelPreference; ``` 相关类型：[IPublicModelPreference](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/preference.ts) **@since v1.1.0** 示例 ```javascript import { config } from '@alilc/lowcode-engine'; const panelName = 'outline-master-pane'; // 设置大纲树面板钉住，在大纲树下次重新打开时生效 config.getPreference().set(`${panelName}-pinned-status-isFloat`, false, 'skeleton') ``` ## 事件 ### onceGot 获取指定 key 的值，若此时还未赋值，则等待，若已有值，则直接返回值 注：此函数返回 Promise 实例 ```typescript /** * 获取指定 key 的值，若此时还未赋值，则等待，若已有值，则直接返回值 * 注：此函数返回 Promise 实例，只会执行（fullfill）一次 * wait until value of certain key is set, will only be * triggered once. * @param key * @returns */ onceGot(key: string): Promise
## 配置方式 #### init API ```javascript import { init } from '@alilc/lowcode-engine'; init(document.getElementById('engine'), { enableCondition: false, }); ``` [**init api**](./init) #### config API ```javascript import { config } from '@alilc/lowcode-engine'; config.set('enableCondition', false) ``` [**config api**](./config) ## 配置详情 > 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts) ### 画布 #### locale - 语言 `@type {string}`、`@default {zh-CN}` 语言 #### device - 设备类型 `@type {string}` 引擎默认支持的 device 类型有 `default`、`mobile`、`iphonex`、`iphone6`。 插件 `@alilc/lowcode-plugin-simulator-select` 支持的 device 类型有 `default`、`phone`、`tablet`、`desktop`。 如果需要自定义的 device 类型，需要补充 device 类型对应的样式，例如 device 为 phone 时，需要补充样式如下： ```css .lc-simulator-device-phone { top: 16px; bottom: 16px; left: 50%; width: 375px; transform: translateX(-50%); margin: auto; } ``` #### deviceClassName `@type {string}` 指定初始化的 deviceClassName，挂载到画布的顶层节点上 #### appHelper 与 react-renderer 的 appHelper 一致，https://lowcode-engine.cn/site/docs/guide/expand/runtime/renderer#apphelper #### enableCondition `@type {boolean}` 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 #### disableAutoRender `@type {boolean}` `@default {false}` 关闭画布自动渲染，在资产包多重异步加载的场景有效 #### renderEnv - 渲染器类型 渲染器类型 `@type {string}`、`@default {react}` #### simulatorUrl `@type {string[]}` 设置 simulator 相关的 url #### enableStrictNotFoundMode `@type {boolean}` `@default {false}` 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件 ### 编排 #### focusNodeSelector - 指定根组件 配置指定节点为根组件 类型定义 ```typescript focusNodeSelector?: (rootNode: IPublicModelNode) => Node; ``` #### supportVariableGlobally - 全局变量配置 `@type {boolean}` `@default {false}` 设置所有属性支持变量配置 开启拖拽组件时，即将被放入的容器是否有视觉反馈 #### customizeIgnoreSelectors - 点击忽略 配置画布中，需要屏蔽点击事件的元素，即配置的元素默认点击行为均不生效。 类型定义: ```typescript customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[], e: MouseEvent) => string[]; ``` 默认值: ```javascript () => { return [ '.next-input-group', '.next-checkbox-group', '.next-checkbox-wrapper', '.next-date-picker', '.next-input', '.next-month-picker', '.next-number-picker', '.next-radio-group', '.next-range', '.next-range-picker', '.next-rating', '.next-select', '.next-switch', '.next-time-picker', '.next-upload', '.next-year-picker', '.next-breadcrumb-item', '.next-calendar-header', '.next-calendar-table', '.editor-container', // 富文本组件 ] } ``` #### enableCanvasLock `@type {boolean}` `@default {false}` 打开画布的锁定操作 #### enableLockedNodeSetting `@type {boolean}` `@default {false}` 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效 #### enableMouseEventPropagationInCanvas `@type {boolean}` `@default {false}` 鼠标事件（mouseover、mouseleave、mousemove）在画布中是否允许冒泡，默认不允许。 #### enableReactiveContainer `@type {boolean}` `@default {false}` #### enableContextMenu - 开启右键菜单 `@type {boolean}` `@default {false}` 是否开启右键菜单 #### disableDetecting `@type {boolean}` `@default {false}` 关闭拖拽组件时的虚线响应，性能考虑 #### disableDefaultSettingPanel `@type {boolean}` `@default {false}` 禁止默认的设置面板 #### disableDefaultSetters `@type {boolean}` `@default {false}` 禁止默认的设置器 #### stayOnTheSameSettingTab `@type {boolean}` `@default {false}` 当选中节点切换时，是否停留在相同的设置 tab 上 #### hideSettingsTabsWhenOnlyOneItem `@type {boolean}` `@default {false}` 是否在只有一个 item 的时候隐藏设置 tabs #### hideComponentAction `@type {boolean}` `@default {false}` 隐藏设计器辅助层 #### thisRequiredInJSE `@type {boolean}` `@default {true}` JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false ### 应用级设计器 #### enableWorkspaceMode - 应用级设计模式 `@type {boolean}` `@default {false}` 开启应用级设计模式 #### enableAutoOpenFirstWindow `@type {boolean}` `@default {true}` 应用级设计模式下，自动打开第一个窗口 #### workspaceEmptyComponent 应用级设计模式下，当窗口为空时，展示的占位组件 ### 定制组件 #### faultComponent 组件渲染错误时的占位组件 #### notFoundComponent 组件不存在时的占位组件 #### loadingComponent - loading 组件 自定义 loading 组件 ### 插件 #### defaultSettingPanelProps 内置设置面板插件的 panelProps #### defaultOutlinePaneProps 内置大纲树面板插件的 panelProps ### 其他 #### enableStrictPluginMode `@type {boolean}` 开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项 #### requestHandlersMap 数据源引擎的请求处理器映射 #### customPluginTransducer 插件处理中间件，方便提供插件调试能力 类型定义 ```typescript customPluginTransducer: async (originPlugin: IPublicTypePlugin, ctx: IPublicModelPluginContext, options): IPublicTypePlugin; ``` #### defaultOutlinePaneProps `@type {object}` 大纲树插件面板默认 props ================================================ FILE: docs/docs/api/event.md ================================================ --- title: event - 事件 API sidebar_position: 10 --- > **@types** [IPublicApiEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/event.ts)
> **@since** v1.0.0 ## 模块简介 负责事件处理 API，支持自定义监听事件、触发事件。 ## 方法 ### on 监听事件 ```typescript /** * 监听事件 * add monitor to a event * @param event 事件名称 * @param listener 事件回调 */ on(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### prependListener 监听事件，会在其他回调函数之前执行 ```typescript /** * 监听事件，会在其他回调函数之前执行 * @param event 事件名称 * @param listener 事件回调 */ prependListener(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### off 取消监听事件 ```typescript /** * 取消监听事件 * cancel a monitor from a event * @param event 事件名称 * @param listener 事件回调 */ off(event: string, listener: (...args: any[]) => void): void; ``` ### emit 触发事件 ```typescript /** * 触发事件 * emit a message for a event * @param event 事件名称 * @param args 事件参数 * @returns */ emit(event: string, ...args: any[]): void; ``` ## 使用示例 ### 事件触发和监听 ```typescript const eventName = 'eventName'; // 事件监听 // 插件中发出的事件，默认以 `common` 为前缀，监听时需要注意下 event.on(`common:${eventName}`); // 触发事件 event.emit(eventName); ``` ### setter 和 setter/plugin 之间的联动 在 A setter 中进行事件注册： ```typescript import { event } from '@alilc/lowcode-engine'; const SETTER_NAME = 'SetterA'; class SetterA extends React.Component { componentDidMount() { // 这里由于面板上会有多个 setter，使用 field.id 来标记 setter 名 this.emitEventName = `${SETTER_NAME}-${this.props.field.id}`; event.on(`common:${this.emitEventName}.bindEvent`, this.bindEvent) } bindEvent = (eventName) => { // do someting } componentWillUnmount() { // setter 是以实例为单位的，每个 setter 注销的时候需要把事件也注销掉，避免事件池过多 event.off(`common:${this.emitEventName}.bindEvent`, this.bindEvent) } } ``` 在 B setter 中触发事件，来完成通信： ```typescript import { event } from '@alilc/lowcode-engine'; class SetterB extends React.Component { bindFunction = () => { const { field, value } = this.props; // 这里展示的和插件进行通信，事件规则是插件名 + 方法 event.emit('eventBindDialog.openDialog', field.name, this.emitEventName); } } ``` ================================================ FILE: docs/docs/api/hotkey.md ================================================ --- title: hotkey - 快捷键 API sidebar_position: 10 --- > **@types** [IPublicApiHotkey](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/hotkey.ts)
> **@since** v1.0.0 ## 模块简介 绑定快捷键 API，可以自定义项目快捷键使用。 ## 方法 ### bind 绑定快捷键 ```typescript /** * 绑定快捷键 * bind hotkey/hotkeys, * @param combos 快捷键，格式如：['command + s'] 、['ctrl + shift + s'] 等 * @param callback 回调函数 * @param action * @returns */ bind( combos: string[] | string, callback: IPublicTypeHotkeyCallback, action?: string, ): IPublicTypeDisposable; ``` 相关 types - [IPublicTypeHotkeyCallback](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/hotkey-callback.ts) - [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ## 使用示例 ### 基础示例 ```typescript hotkey.bind('command+s', (e) => { e.preventDefault(); // command+s 快捷键按下时需要执行的逻辑 }); ``` ### 同时绑定多个快捷键 ```typescript hotkey.bind(['command+s', 'command+c'], (e) => { e.preventDefault(); // command+s 或者 command+c 快捷键按下时需要执行的逻辑 }); ``` ### 保存快捷键配置 ```typescript import { hotkey, } from '@alilc/lowcode-engine'; function saveSchema(schema) { // 保存 schema 相关操作 } const saveSampleHotKey = (ctx: IPublicModelPluginContext) => { return { name: 'saveSample', async init() { hotkey.bind('command+s', (e) => { e.preventDefault(); saveSchema(); }); }, }; } saveSampleHotKey.pluginName = 'saveSampleHotKey'; plugins.register(saveSampleHotKey); ``` ================================================ FILE: docs/docs/api/index.md ================================================ --- title: API 总览 sidebar_position: 0 --- 引擎提供的公开 API 分为`命名空间`和`模型`两类，其中`命名空间`用于聚合一大类的 API，`模型`为各 API 涉及到的对象模型。 ## 命名空间 引擎直接提供以下几大类 API - skeleton 面板 API - material 物料 API - project 模型 API - simulator-host 模拟器 API - hotkey 快捷键 API - setters 设置器 API - event 事件 API - config 配置 API - common 通用 API - logger 日志 API - init 初始化 API ## 模型 以下模型通过前面的 API 以返回值等形式间接透出。 - document-model 文档 - node 节点 - node-children 节点孩子 - props 属性集 - prop 属性 - setting-field 设置属性 - setting-top-entry 设置属性集 - component-meta 物料元数据 - selection 画布选中 - detecting 画布 hover - history 操作历史 - window 低代码设计器窗口模型 - detecting 画布节点悬停模型 - modal-nodes-manager 模态节点管理器模型 - plugin-instance 插件实例 - drop-location 拖拽放置位置模型 ## API 设计约定 一些 API 设计约定： 1. 所有 API 命名空间都按照 variables / functions / events 来组织 2. 事件（events）的命名格式为：on[Will|Did]VerbNoun?，参考 [https://code.visualstudio.com/api/references/vscode-api#events](https://code.visualstudio.com/api/references/vscode-api#events) 3. 基于 Disposable 模式，对于事件的绑定、快捷键的绑定函数，返回值则是解绑函数 4. 对于属性的导出，统一用 .xxx 的 getter 模式，（尽量）不使用 .getXxx() ## experimental 说明此模块处于公测阶段, API 可能会发生改变. ================================================ FILE: docs/docs/api/init.md ================================================ --- title: init - 初始化 API sidebar_position: 0 --- > **@since** v1.0.0 ## 模块简介 提供 init 等方法 ## 方法 #### init 初始化引擎 **方法定义** ```typescript function init(container?: Element, options?: IPublicTypeEngineOptions): void ``` [**初始化引擎配置参数列表**](./configOptions) ## 使用示例 ```typescript import { init } from '@alilc/lowcode-engine'; init(document.getElementById('engine'), { enableCondition: false, }); ``` ### 默认打开移动端画布 ```typescript import { init } from '@alilc/lowcode-engine'; init({ device: 'mobile', }); ``` ### 使用 utils 第三方工具扩展 ```json import { init } from '@alilc/lowcode-engine'; init({ device: 'mobile', appHelper: { utils: { xxx: () => {console.log('123')}, } } }); ``` 在引擎中即可这样使用。  ================================================ FILE: docs/docs/api/logger.md ================================================ --- title: logger - 日志 API sidebar_position: 10 --- > **@types** [IPublicApiLogger](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/logger.ts)
> **@since** v1.0.0 ## 模块简介 引擎日志模块，可以按照 **日志级别 **和** 业务类型 **两个维度来定制日志。 > 注：日志级别可以通过 url query 动态调整，详见下方[查看示例](#查看示例)。
> 参考 [zen-logger](https://web.npm.alibaba-inc.com/package/zen-logger) 实现进行封装 ## 方法 日志记录方法 ```typescript /** * debug info */ debug(...args: any | any[]): void; /** * normal info output */ info(...args: any | any[]): void; /** * warning info output */ warn(...args: any | any[]): void; /** * error info output */ error(...args: any | any[]): void; /** * log info output */ log(...args: any | any[]): void; ``` ## 输出示例 ```typescript import { Logger } from '@alilc/lowcode-utils'; const logger = new Logger({ level: 'warn', bizName: 'myPlugin:moduleA' }); logger.log('Awesome Low-Code Engine'); ``` ## 查看示例 开启查看方式： - 方式 1：所有 logger 创建时会有默认输出的 level, 默认为 warn , 即只展示 warn , error - 方式 2：url 上追加 __logConf__进行开启，示例如下 ``` https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn // 开启所有 bizName的 warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=debug // 开启所有 bizName的 debug, log, info, warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=log // 开启所有 bizName的 log, info, warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|* // 同 __logConf__=warn https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|bizName // 开启 bizName 的 debug, log, info, warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|partOfBizName // 开启 bizName like '%partOfBizName%' 的 debug, log, info, warn 和 error ``` ================================================ FILE: docs/docs/api/material.md ================================================ --- title: material - 物料 API sidebar_position: 10 --- > **@types** [IPublicApiMaterial](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/material.ts)
> **@since** v1.0.0 ## 模块简介 负责物料相关的 API，包括资产包、设计器辅助层、物料元数据和物料元数据管道函数。 ## 变量 ### componentsMap 获取组件 map 结构 ```typescript /** * 获取组件 map 结构 * get map of components */ get componentsMap(): { [key: string]: IPublicTypeNpmInfo | ComponentType
> **@since** v1.1.0 ## 方法 ### setData 给剪贴板赋值 ```typescript /** * 给剪贴板赋值 * set data to clipboard * * @param {*} data * @since v1.1.0 */ setData(data: any): void; ``` ### waitPasteData 设置剪贴板数据设置的回调 ```typescript /** * 设置剪贴板数据设置的回调 * set callback for clipboard provide paste data * * @param {KeyboardEvent} keyboardEvent * @param {(data: any, clipboardEvent: ClipboardEvent) => void} cb * @since v1.1.0 */ waitPasteData( keyboardEvent: KeyboardEvent, cb: (data: any, clipboardEvent: ClipboardEvent) => void, ): void; ``` ================================================ FILE: docs/docs/api/model/component-meta.md ================================================ --- title: ComponentMeta sidebar_position: 15 --- > **@types** [IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
> **@since** v1.0.0 ## 基本介绍 组件元数据信息模型 ## 属性 ### componentName 组件名 `@type {string}` ### isContainer 是否是「容器型」组件 `@type {boolean}` ### isMinimalRenderUnit 是否是最小渲染单元 当组件需要重新渲染时： - 若为最小渲染单元，则只渲染当前组件， - 若不为最小渲染单元，则寻找到上层最近的最小渲染单元进行重新渲染，直至根节点。 `@type {boolean}` ### isModal 是否为「模态框」组件 `@type {boolean}` ### configure 获取用于设置面板显示用的配置 `@type {IPublicTypeFieldConfig[]}` 相关类型：[IPublicTypeFieldConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/field-config.ts) ### title 标题 `@type {string | IPublicTypeI18nData | ReactElement}` 相关类型：[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts) ### icon 图标 `@type {IPublicTypeIconType}` 相关类型：[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts) ### npm 组件 npm 信息 `@type {IPublicTypeNpmInfo}` 相关类型：[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts) ### availableActions 获取元数据 `@type {IPublicTypeTransformedComponentMetadata}` 相关类型：[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts) ### advanced 组件元数据中高级配置部分 `@type {IPublicTypeAdvanced}` 相关类型：[IPublicTypeAdvanced](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/advanced.ts) ## 方法 ### setNpm 设置 npm 信息 ```typescript /** * 设置 npm 信息 * set method for npm inforamtion * @param npm */ setNpm(npm: IPublicTypeNpmInfo): void; ``` 相关类型：[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts) ### getMetadata 获取元数据 ```typescript /** * 获取元数据 * get component metadata */ getMetadata(): IPublicTypeTransformedComponentMetadata; ``` 相关类型：[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts) ### checkNestingUp 检测当前对应节点是否可被放置在父节点中 ```typescript /** * 检测当前对应节点是否可被放置在父节点中 * check if the current node could be placed in parent node * @param my 当前节点 * @param parent 父节点 */ checkNestingUp(my: IPublicModelNode | IPublicTypeNodeData, parent: any): boolean; ``` 相关类型： - [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) - [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts) ### checkNestingDown 检测目标节点是否可被放置在父节点中 ```typescript /** * 检测目标节点是否可被放置在父节点中 * check if the target node(s) could be placed in current node * @param my 当前节点 * @param parent 父节点 */ checkNestingDown( my: IPublicModelNode | IPublicTypeNodeData, target: IPublicTypeNodeSchema | IPublicModelNode | IPublicTypeNodeSchema[], ): boolean; ``` 相关类型： - [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) - [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts) - [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) ### refreshMetadata 刷新元数据，会触发元数据的重新解析和刷新 ```typescript /** * 刷新元数据，会触发元数据的重新解析和刷新 * refresh metadata */ refreshMetadata(): void; ``` ================================================ FILE: docs/docs/api/model/detecting.md ================================================ --- title: Detecting sidebar_position: 6 --- > **@types** [IPublicModelDetecting](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/detecting.ts)
> **@since** v1.0.0 ## 基本介绍 画布节点悬停模型 ## 属性 ### current 当前 hover 的节点 `@type {IPublicModelNode | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) **@since v1.0.16** ### enable 是否启用 `@type {boolean}` ## 方法 ### capture hover 指定节点 ```typescript /** * hover 指定节点 * capture node with nodeId * @param id 节点 id */ capture(id: string): void; ``` ### release hover 离开指定节点 ```typescript /** * hover 离开指定节点 * release node with nodeId * @param id 节点 id */ release(id: string): void; ``` ### leave 清空 hover 态 ```typescript /** * 清空 hover 态 * clear all hover state */ leave(): void; ``` ## 事件 ### onDetectingChange hover 节点变化事件 ```typescript /** * hover 节点变化事件 * set callback which will be called when hovering object changed. * @since v1.1.0 */ onDetectingChange(fn: (node: IPublicModelNode | null) => void): IPublicTypeDisposable; ``` 相关类型： - [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) - [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) **@since v1.1.0** ================================================ FILE: docs/docs/api/model/document-model.md ================================================ --- title: DocumentModel sidebar_position: 0 --- > **@types** [IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts)
> **@since** v1.0.0 ## 基本介绍 文档模型 ## 属性 ### id 唯一 ID `@type {string}` ### selection 画布节点选中区模型实例 `@type {IPublicModelSelection}` 相关章节：[节点选中区模型](./selection) 相关类型：[IPublicModelSelection](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/selection.ts) ### detecting 画布节点 hover 区模型实例 `@type {IPublicModelDetecting}` 相关章节：[画布节点悬停模型](./detecting) 相关类型：[IPublicModelDetecting](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/detecting.ts) ### history 操作历史模型实例 `@type {IPublicModelHistory}` 相关章节：[操作历史模型](./history) 相关类型：[IPublicModelHistory](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/history.ts) ### project 获取当前文档模型所属的 project `@type {IPublicApiProject}` 相关类型：[IPublicApiProject](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/project.ts) ### root 获取文档的根节点 `@type {IPublicModelNode | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### nodesMap 获取文档下所有节点 Map, key 为 nodeId `@type {Map
> **@since** v1.0.0 ## 基本介绍 拖拽对象 ### 对应接口 ```typescript import { IPublicModelDragon } from '@alilc/lowcode-types'; ``` ### 支持版本 **@since** v1.1.0 ## 属性 ### dragging 是否正在拖动 ```typescript /** * is dragging or not */ get dragging(): boolean; ``` ## 方法 ### onDragstart 绑定 dragstart 事件 ```typescript /** * 绑定 dragstart 事件 * bind a callback function which will be called on dragging start * @param func * @returns */ onDragstart(func: (e: IPublicModelLocateEvent) => any): () => void; ``` ### onDrag 绑定 drag 事件 ```typescript /** * 绑定 drag 事件 * bind a callback function which will be called on dragging * @param func * @returns */ onDrag(func: (e: IPublicModelLocateEvent) => any): () => void; ``` ### onDragend 绑定 dragend 事件 ```typescript /** * 绑定 dragend 事件 * bind a callback function which will be called on dragging end * @param func * @returns */ onDragend(func: (o: { dragObject: IPublicModelDragObject; copy?: boolean }) => any): () => void; ``` ### from 设置拖拽监听的区域 shell，以及自定义拖拽转换函数 boost ```typescript /** * 设置拖拽监听的区域 shell，以及自定义拖拽转换函数 boost * set a html element as shell to dragon as monitoring target, and * set boost function which is used to transform a MouseEvent to type * IPublicTypeDragNodeDataObject. * @param shell 拖拽监听的区域 * @param boost 拖拽转换函数 */ from(shell: Element, boost: (e: MouseEvent) => IPublicTypeDragNodeDataObject | null): any; ``` ### boost 发射拖拽对象 ```typescript /** * 发射拖拽对象 * boost your dragObject for dragging(flying) * * @param dragObject 拖拽对象 * @param boostEvent 拖拽初始时事件 */ boost(dragObject: IPublicTypeDragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: IPublicModelNode): void; ``` ### addSensor 添加投放感应区 ```typescript /** * 添加投放感应区 * add sensor area */ addSensor(sensor: any): void; ``` ### removeSensor 移除投放感应 ```typescript /** * 移除投放感应 * remove sensor area */ removeSensor(sensor: any): void; ``` ================================================ FILE: docs/docs/api/model/drop-location.md ================================================ --- title: DropLocation sidebar_position: 13 --- > **@types** [IPublicModelDropLocation](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/drop-location.ts)
> **@since** v1.1.0 ## 基本介绍 拖拽放置位置模型 ## 属性 ### target 拖拽放置位置目标 `@type {IPublicModelNode | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### detail 拖拽放置位置详情 `@type {IPublicTypeLocationDetail}` 相关类型：[IPublicTypeLocationDetail](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/location-detail.ts) ### event 拖拽放置位置对应的事件 `@type {IPublicTypeLocationDetail}` 相关类型：[IPublicModelLocateEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/location-event.ts) ## 方法 ### clone 获取一份当前对象的克隆 ```typescript /** * 获取一份当前对象的克隆 * get a clone object of current dropLocation */ clone(event: IPublicModelLocateEvent): IPublicModelDropLocation; ``` 相关类型：[IPublicModelLocateEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/location-event.ts) ================================================ FILE: docs/docs/api/model/editor-view.md ================================================ --- title: EditorView sidebar_position: 12 --- > **[@experimental](./#experimental)**
> **@types** [IPublicModelEditorView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/editor-view.ts)
> **@since** v1.1.7 窗口编辑视图 ## 类型定义 ``` import { IPublicModelPluginContext } from "./plugin-context"; export interface IPublicModelEditorView extends IPublicModelPluginContext {}; ``` 相关类型定义: [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts) ================================================ FILE: docs/docs/api/model/history.md ================================================ --- title: History sidebar_position: 5 --- > **@types** [IPublicModelHistory](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/history.ts)
> **@since** v1.0.0 ## 基本介绍 操作历史记录模型 ## 方法 ### go 历史记录跳转到指定位置 ```typescript /** * 历史记录跳转到指定位置 * go to a specific history * @param cursor */ go(cursor: number): void; ``` ### back 历史记录后退 ```typescript /** * 历史记录后退 * go backward in history */ back(): void; ``` ### forward forward() 历史记录前进 ```typescript /** * 历史记录前进 * go forward in history */ forward(): void; ``` ### savePoint 保存当前状态 ```typescript /** * 保存当前状态 * do save current change as a record in history */ savePoint(): void; ``` ### isSavePoint 当前是否是「保存点」，即是否有状态变更但未保存 ```typescript /** * 当前是否是「保存点」，即是否有状态变更但未保存 * check if there is unsaved change for history */ isSavePoint(): boolean; ``` ### getState 获取 state，判断当前是否为「可回退」、「可前进」的状态 ```typescript /** * 获取 state，判断当前是否为「可回退」、「可前进」的状态 * get flags in number which indicat current change state * * | 1 | 1 | 1 | * | -------- | -------- | -------- | * | modified | redoable | undoable | * eg: * 7 means : modified && redoable && undoable * 5 means : modified && undoable */ getState(): number; ``` ## 事件 ### onChangeState 监听 state 变更事件 ```typescript /** * 监听 state 变更事件 * monitor on stateChange event * @param func */ onChangeState(func: () => any): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onChangeCursor 监听历史记录游标位置变更事件 ```typescript /** * 监听历史记录游标位置变更事件 * monitor on cursorChange event * @param func */ onChangeCursor(func: () => any): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ================================================ FILE: docs/docs/api/model/modal-nodes-manager.md ================================================ --- title: ModalNodesManager sidebar_position: 7 --- > **@types** [IPublicModelModalNodesManager](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/modal-nodes-manager.ts)
> **@since** v1.0.0 ## 基本介绍 模态节点管理器模型 ## 方法 ### setNodes 设置模态节点，触发内部事件 ```typescript /** * 设置模态节点，触发内部事件 * set modal nodes, trigger internal events */ setNodes(): void; ``` ### getModalNodes 获取模态节点（们） ```typescript /** * 获取模态节点（们） * get modal nodes */ getModalNodes(): IPublicModelNode[]; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### getVisibleModalNode 获取当前可见的模态节点 ```typescript /** * 获取当前可见的模态节点 * get current visible modal node */ getVisibleModalNode(): IPublicModelNode | null; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### hideModalNodes 隐藏模态节点（们） ```typescript /** * 隐藏模态节点（们） * hide modal nodes */ hideModalNodes(): void; ``` ### setVisible 设置指定节点为可见态 ```typescript /** * 设置指定节点为可见态 * set specific model node as visible * @param node IPublicModelNode */ setVisible(node: IPublicModelNode): void; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### setInvisible 设置指定节点为不可见态 ```typescript /** * 设置指定节点为不可见态 * set specific model node as invisible * @param node IPublicModelNode */ setInvisible(node: IPublicModelNode): void; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ================================================ FILE: docs/docs/api/model/node-children.md ================================================ --- title: NodeChildren sidebar_position: 2 --- > **@types** [IPublicModelNodeChildren](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node-children.ts)
> **@since** v1.0.0 ## 基本介绍 节点孩子模型 ## 属性 ### owner 返回当前 children 实例所属的节点实例 `@type {IPublicModelNode | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### size children 内的节点实例数 `@type {number}` ### isEmptyNode 是否为空 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isEmpty` ### notEmptyNode 是否不为空 `@type {boolean}` **@since v1.1.0** ## 方法 ### delete 删除指定节点 ```typescript /** * 删除指定节点 * delete the node * @param node */ delete(node: IPublicModelNode): boolean; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### insert 插入一个节点 ```typescript /** * 插入一个节点 * insert the node * @param node */ insert(node: IPublicModelNode): boolean; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### indexOf 返回指定节点的下标 ```typescript /** * 返回指定节点的下标 * get index of node in current children * @param node * @returns */ indexOf(node: IPublicModelNode): number; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### splice 类似数组 splice 操作 ```typescript /** * 类似数组 splice 操作 * provide the same function with {Array.prototype.splice} * @param start * @param deleteCount * @param node */ splice(start: number, deleteCount: number, node?: IPublicModelNode): any; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### get 返回指定下标的节点 ```typescript /** * 返回指定下标的节点 * get node with index * @param index * @returns */ get(index: number): IPublicModelNode | null; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### has 是否包含指定节点 ```typescript /** * 是否包含指定节点 * check if node exists in current children * @param node * @returns */ has(node: IPublicModelNode): boolean; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### forEach 类似数组的 forEach ```typescript /** * 类似数组的 forEach * provide the same function with {Array.prototype.forEach} * @param fn */ forEach(fn: (node: IPublicModelNode, index: number) => void): void; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### reverse 类似数组的 reverse ```typescript /** * 类似数组的 reverse * provide the same function with {Array.prototype.reverse} */ reverse(): IPublicModelNode[]; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### map 类似数组的 map ```typescript /** * 类似数组的 map * provide the same function with {Array.prototype.map} * @param fn */ map
> **@since** v1.0.0 ## 基本介绍 节点模型 ## 属性 ### id 节点 id `@type {string}` ### title 节点标题 `@type {string | IPublicTypeI18nData | ReactElement}` 相关类型：[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts) ### isContainerNode 是否为「容器型」节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isContainer` ### isRootNode 是否为根节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isRoot` ### isEmptyNode 是否为空节点（无 children 或者 children 为空） `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isEmpty` ### isPageNode 是否为 Page 节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isPage` ### isComponentNode 是否为 Component 节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isComponent` ### isModalNode 是否为「模态框」节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isModal` ### isSlotNode 是否为插槽节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isSlot` ### isParentalNode 是否为父类/分支节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isParental` ### isLeafNode 是否为叶子节点 `@type {boolean}` **@since v1.1.0** > v1.1.0 之前请使用 `isLeaf` ### isLocked 获取当前节点的锁定状态 **@since v1.0.16** ### isRGLContainerNode 设置为磁贴布局节点，使用方式可参考：[磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw) `@type {boolean}` **@since v1.1.0** > v1.0.16 - v1.1.0 请使用 `isRGLContainer` ### index 下标 `@type {number}` ### icon 图标 `@type {IPublicTypeIconType}` 相关类型：[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts) ### zLevel 节点所在树的层级深度，根节点深度为 0 `@type {number}` ### componentName 节点 componentName `@type {string}` ### componentMeta 节点的物料元数据 `@type {IPublicModelComponentMeta | null}` 相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts) ### document 获取节点所属的[文档模型](./document-model)对象 `@type {IPublicModelDocumentModel | null}` 相关类型：[IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts) ### prevSibling 获取当前节点的前一个兄弟节点 `@type {IPublicModelNode | null}` ### nextSibling 获取当前节点的后一个兄弟节点 `@type {IPublicModelNode | null}` ### parent 获取当前节点的父亲节点 `@type {IPublicModelNode | null}` ### children 获取当前节点的孩子节点模型 `@type {IPublicModelNodeChildren | null}` 相关类型：[IPublicModelNodeChildren](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node-children.ts) ### slots 节点上挂载的插槽节点们 `@type {IPublicModelNode[]}` ### slotFor 当前节点为插槽节点时，返回节点对应的属性实例 `@type {IPublicModelProp | null}` 相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) ### props 返回节点的属性集 `@type {IPublicModelProps | null}` 相关类型：[IPublicModelProps](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/props.ts) ### propsData 返回节点的属性集值 `@type {IPublicTypePropsMap | IPublicTypePropsList | null}` 相关类型： - [IPublicTypePropsMap](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-map.ts) - [IPublicTypePropsList](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-list.ts) ### conditionGroup 获取条件组 `@type {IPublicModelExclusiveGroup | null}` 相关类型：[IPublicModelExclusiveGroup](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/exclusive-group.ts) **@since v1.1.0** ### schema 获取符合搭建协议 - 节点 schema 结构 `@type {IPublicTypeNodeSchema | null}` 相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) ### settingEntry 获取对应的 setting entry `@type {IPublicModelSettingTopEntry}` 相关章节：[设置器顶层操作对象](./setting-top-entry) 相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) ### visible 当前节点是否可见 `@type {boolean}` **@since v1.1.0** ## 方法 ### getRect 返回节点的尺寸、位置信息 ```typescript /** * 返回节点的尺寸、位置信息 * get rect information for this node */ getRect(): DOMRect | null; ``` ### hasSlots 是否有挂载插槽节点 ```typescript /** * 是否有挂载插槽节点 * check if current node has slots */ hasSlots(): boolean; ``` ### hasCondition 是否设定了渲染条件 ```typescript /** * 是否设定了渲染条件 * check if current node has condition value set */ hasCondition(): boolean; ``` ### hasLoop 是否设定了循环数据 ```typescript /** * 是否设定了循环数据 * check if loop is set for this node */ hasLoop(): boolean; ``` ### getProp 获取指定 path 的属性模型实例 ```typescript /** * 获取指定 path 的属性模型实例 * get prop by path * @param path 属性路径，支持 a / a.b / a.0 等格式 */ getProp(path: string, createIfNone: boolean): IPublicModelProp | null; ``` 相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) ### getPropValue 获取指定 path 的属性模型实例值 ```typescript /** * 获取指定 path 的属性模型实例值 * get prop value by path * @param path 属性路径，支持 a / a.b / a.0 等格式 */ getPropValue(path: string): any; ``` ### getExtraProp 获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 ```typescript /** * 获取指定 path 的属性模型实例， * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 * * get extra prop by path, an extra prop means a prop not exists in the `props` * but as siblint of the `props` * @param path 属性路径，支持 a / a.b / a.0 等格式 * @param createIfNone 当没有属性的时候，是否创建一个属性 */ getExtraProp(path: string, createIfNone?: boolean): IPublicModelProp | null; ``` 相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) ### getExtraPropValue 获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 ```typescript /** * 获取指定 path 的属性模型实例， * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 * * get extra prop value by path, an extra prop means a prop not exists in the `props` * but as siblint of the `props` * @param path 属性路径，支持 a / a.b / a.0 等格式 * @returns */ getExtraPropValue(path: string): any; ``` ### setPropValue setPropValue(path: string, value: CompositeValue) 设置指定 path 的属性模型实例值 ```typescript /** * 设置指定 path 的属性模型实例值 * set value for prop with path * @param path 属性路径，支持 a / a.b / a.0 等格式 * @param value 值 */ setPropValue(path: string, value: IPublicTypeCompositeValue): void; ``` 相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) ### setExtraPropValue 设置指定 path 的属性模型实例值 ```typescript /** * 设置指定 path 的属性模型实例值 * set value for extra prop with path * @param path 属性路径，支持 a / a.b / a.0 等格式 * @param value 值 */ setExtraPropValue(path: string, value: IPublicTypeCompositeValue): void; ``` 相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) ### importSchema 导入节点数据 ```typescript /** * 导入节点数据 * import node schema * @param data */ importSchema(data: IPublicTypeNodeSchema): void; ``` 相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) ### exportSchema 导出节点数据 ```typescript /** * 导出节点数据 * export schema from this node * @param stage * @param options */ exportSchema(stage: IPublicEnumTransformStage, options?: any): IPublicTypeNodeSchema; ``` 相关类型： - [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts) - [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) ### insertBefore 在指定位置之前插入一个节点 ```typescript /** * 在指定位置之前插入一个节点 * insert a node befor current node * @param node * @param ref * @param useMutator */ insertBefore( node: IPublicModelNode, ref?: IPublicModelNode | undefined, useMutator?: boolean, ): void; ``` ### insertAfter 在指定位置之后插入一个节点 ```typescript /** * 在指定位置之后插入一个节点 * insert a node after this node * @param node * @param ref * @param useMutator */ insertAfter( node: IPublicModelNode, ref?: IPublicModelNode | undefined, useMutator?: boolean, ): void; ``` ### replaceChild 替换指定子节点 ```typescript /** * 替换指定子节点 * replace a child node with data provided * @param node 待替换的子节点 * @param data 用作替换的节点对象或者节点描述 * @returns */ replaceChild(node: IPublicModelNode, data: any): IPublicModelNode | null; ``` ### replaceWith 将当前节点替换成指定节点描述 ```typescript /** * 将当前节点替换成指定节点描述 * replace current node with a new node schema * @param schema */ replaceWith(schema: IPublicTypeNodeSchema): any; ``` 相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) ### select 选中当前节点实例 ```typescript /** * 选中当前节点实例 * select current node */ select(): void; ``` ### hover 设置悬停态 ```typescript /** * 设置悬停态 * set hover value for current node * @param flag */ hover(flag: boolean): void; ``` ### lock 设置节点锁定状态 ```typescript /** * 设置节点锁定状态 * set lock value for current node * @param flag * @since v1.0.16 */ lock(flag?: boolean): void; ``` **@since v1.0.16** ### remove 删除当前节点实例 ```typescript /** * 删除当前节点实例 * remove current node */ remove(): void; ``` ### mergeChildren 执行新增、删除、排序等操作 ```typescript /** * 执行新增、删除、排序等操作 * excute remove/add/sort operations on node`s children * * @since v1.1.0 */ mergeChildren( remover: (node: IPublicModelNode, idx: number) => boolean, adder: (children: IPublicModelNode[]) => any, sorter: (firstNode: IPublicModelNode, secondNode: IPublicModelNode) => number ): any; ``` **@since v1.1.0** ### contains 当前节点是否包含某子节点 ```typescript /** * 当前节点是否包含某子节点 * check if current node contains another node as a child * @param node * @since v1.1.0 */ contains(node: IPublicModelNode): boolean; ``` **@since v1.1.0** ### canPerformAction 是否可执行某 action ```typescript /** * 是否可执行某 action * check if current node can perform certain aciton with actionName * @param actionName action 名字 * @since v1.1.0 */ canPerformAction(actionName: string): boolean; ``` **@since v1.1.0** ### isConditionalVisible 获取该节点的 ConditionalVisible 值 ```typescript /** * 获取该节点的 ConditionalVisible 值 * check if current node ConditionalVisible * @since v1.1.0 */ isConditionalVisible(): boolean | undefined; ``` **@since v1.1.0** ### setConditionalVisible 设置该节点的 ConditionalVisible 为 true ```typescript /** * 设置该节点的 ConditionalVisible 为 true * make this node as conditionalVisible === true * @since v1.1.0 */ setConditionalVisible(): void; ``` **@since v1.1.0** ### getDOMNode 获取节点实例对应的 dom 节点 ```typescript /** * 获取节点实例对应的 dom 节点 */ getDOMNode(): HTMLElement; ``` ### getRGL 获取磁贴相关信息 ```typescript /** * 获取磁贴相关信息 */ getRGL(): { isContainerNode: boolean; isEmptyNode: boolean; isRGLContainerNode: boolean; isRGLNode: boolean; isRGL: boolean; rglNode: IPublicModelNode | null; } ``` ================================================ FILE: docs/docs/api/model/plugin-instance.md ================================================ --- title: PluginInstance sidebar_position: 12 --- > **@types** [IPublicModelPluginInstance](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-instance.ts)
> **@since** v1.1.0 ## 基本介绍 插件实例 ## 属性 ### pluginName 插件名字 `@type {string}` ### dep 插件依赖 `@type {string[]}` ### disabled 插件是否禁用 `@type {boolean}` ### meta 插件 meta 信息 `@type {IPublicTypePluginMeta}` 相关类型：[IPublicTypePluginMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/plugin-meta.ts) ================================================ FILE: docs/docs/api/model/prop.md ================================================ --- title: Prop sidebar_position: 3 --- > **@types** [IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)
> **@since** v1.0.0 ## 基本介绍 属性模型 ## 属性 ### id id `@type {string}` ### key key 值 `@type {string | number | undefined}` ### path 返回当前 prop 的路径 `@type {string[]}` ### node 返回所属的节点实例 `@type {IPublicModelNode | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### slotNode 当本 prop 代表一个 Slot 时，返回对应的 slotNode `@type {IPublicModelNode | undefined | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ## 方法 ### setValue 设置值 ```typescript /** * 设置值 * set value for this prop * @param val */ setValue(val: IPublicTypeCompositeValue): void; ``` 相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) ### getValue 获取值 ```typescript /** * 获取值 * get value of this prop */ getValue(): any; ``` ### remove 移除值 ```typescript /** * 移除值 * remove value of this prop * @since v1.0.16 */ remove(): void; ``` **@since v1.0.16** ### exportSchema 导出值 ```typescript /** * 导出值 * export schema * @param stage */ exportSchema(stage: IPublicEnumTransformStage): IPublicTypeCompositeValue; ``` 相关类型： - [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts) - [IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) ================================================ FILE: docs/docs/api/model/props.md ================================================ --- title: Props sidebar_position: 4 --- > **@types** [IPublicModelProps](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/props.ts)
> **@since** v1.0.0 ## 基本介绍 属性集模型 ## 属性 ### id id `@type {string}` ### path 返回当前 props 的路径 `@type {string[]}` ### node 返回当前属性集所属的节点实例 `@type {IPublicModelNode | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ## 方法 ### getProp 获取指定 path 的属性模型实例 ```typescript /** * 获取指定 path 的属性模型实例 * get prop by path * @param path 属性路径，支持 a / a.b / a.0 等格式 */ getProp(path: string): IPublicModelProp | null; ``` 相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) ### getPropValue 获取指定 path 的属性模型实例值 ```typescript /** * 获取指定 path 的属性模型实例值 * get value of prop by path * @param path 属性路径，支持 a / a.b / a.0 等格式 */ getPropValue(path: string): any; ``` ### getExtraProp 获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 ```typescript /** * 获取指定 path 的属性模型实例， * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 * get extra prop by path * @param path 属性路径，支持 a / a.b / a.0 等格式 */ getExtraProp(path: string): IPublicModelProp | null; ``` 相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) ### getExtraPropValue 获取指定 path 的属性模型实例值，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 ```typescript /** * 获取指定 path 的属性模型实例值 * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 * get value of extra prop by path * @param path 属性路径，支持 a / a.b / a.0 等格式 */ getExtraPropValue(path: string): any; ``` ### setPropValue 设置指定 path 的属性模型实例值 ```typescript /** * 设置指定 path 的属性模型实例值 * set value of prop by path * @param path 属性路径，支持 a / a.b / a.0 等格式 * @param value 值 */ setPropValue(path: string, value: IPublicTypeCompositeValue): void; ``` 相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) ### setExtraPropValue 设置指定 path 的属性模型实例值 ```typescript /** * 设置指定 path 的属性模型实例值 * set value of extra prop by path * @param path 属性路径，支持 a / a.b / a.0 等格式 * @param value 值 */ setExtraPropValue(path: string, value: IPublicTypeCompositeValue): void; ``` 相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) ### has 当前 props 是否包含某 prop ```typescript /** * 当前 props 是否包含某 prop * check if the specified key is existing or not. * @param key * @since v1.1.0 */ has(key: string): boolean; ``` **@since v1.1.0** ### add 添加一个 prop ```typescript /** * 添加一个 prop * add a key with given value * @param value * @param key * @since v1.1.0 */ add(value: IPublicTypeCompositeValue, key?: string | number | undefined): any; ``` 相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) **@since v1.1.0** ================================================ FILE: docs/docs/api/model/resource.md ================================================ --- title: Resource sidebar_position: 13 --- > **[@experimental](./#experimental)**
> **@types** [IPublicModelResource](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)
> **@since** v1.1.0 ## 属性 ### title 资源标题 `@type {string}` ### id 资源 id `@type {string}` ### name 资源名字 `@type {string}` ### type 资源类型 `@type {string}` ### category 资源分类 `@type {string}` ### icon 资源 icon `@type {ReactElement}` ### options 资源配置信息 `@type {Object}` ### config 资源配置信息 `@type {Object}` ================================================ FILE: docs/docs/api/model/selection.md ================================================ --- title: Selection sidebar_position: 6 --- > **@types** [IPublicModelSelection](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/selection.ts)
> **@since** v1.0.0 ## 基本介绍 画布节点选中模型 ## 属性 ### selected 返回选中的节点 id `@type {string[]}` ### node 返回选中的节点（如多个节点只返回第一个） `@type {IPublicModelNode | null}` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) **@since v1.1.0** ## 方法 ### select 选中指定节点（覆盖方式） ```typescript /** * 选中指定节点（覆盖方式） * select node with id, this will override current selection * @param id */ select(id: string): void; ``` ### selectAll 批量选中指定节点们 ```typescript /** * 批量选中指定节点们 * select node with ids, this will override current selection * * @param ids */ selectAll(ids: string[]): void; ``` ### remove **取消选中**选中的指定节点，不会删除组件 ```typescript /** * 移除选中的指定节点 * remove node from selection with node id * @param id */ remove(id: string): void; ``` ### clear **取消选中**所有选中节点，不会删除组件 ```typescript /** * 清除所有选中节点 * clear current selection */ clear(): void; ``` ### has 判断是否选中了指定节点 ```typescript /** * 判断是否选中了指定节点 * check if node with specific id is selected * @param id */ has(id: string): boolean; ``` ### add 选中指定节点（增量方式） ```typescript /** * 选中指定节点（增量方式） * add node with specific id to selection * @param id */ add(id: string): void; ``` ### getNodes 获取选中的节点实例 ```typescript /** * 获取选中的节点实例 * get selected nodes */ getNodes(): IPublicModelNode[]; ``` 相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) ### getTopNodes 获取选区的顶层节点 例如选中的节点为： - DivA - ChildrenA - DivB getNodes 返回的是 [DivA、ChildrenA、DivB]，getTopNodes 返回的是 [DivA、DivB]，其中 ChildrenA 由于是二层节点，getTopNodes 不会返回 ```typescript /** * 获取选区的顶层节点 * get seleted top nodes * for example: * getNodes() returns [A, subA, B], then * getTopNodes() will return [A, B], subA will be removed * @since v1.0.16 */ getTopNodes(includeRoot?: boolean): IPublicModelNode[]; ``` **@since v1.0.16** ## 事件 ### onSelectionChange 注册 selection 变化事件回调 ```typescript /** * 注册 selection 变化事件回调 * set callback which will be called when selection is changed * @since v1.1.0 */ onSelectionChange(fn: (ids: string[]) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) **@since v1.1.0** ================================================ FILE: docs/docs/api/model/setting-field.md ================================================ --- title: SettingField sidebar_position: 6 --- > **@types** [IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts)
## 基本介绍 setter 设置器操作对象 ## 属性 #### isGroup 获取设置属性的 isGroup `@type {boolean}` #### id 获取设置属性的 id `@type {string}` #### name 获取设置属性的 name `@type {string | number | undefined}` #### key 获取设置属性的 key `@type {string | number | undefined}` #### path 获取设置属性的 path `@type {(string | number)[]}` #### title 获取设置属性的 title `@type {string}` #### setter 获取设置属性的 setter `@type {IPublicTypeSetterType | null}` #### expanded 获取设置属性的 expanded `@type {boolean}` #### extraProps 获取设置属性的 extraProps `@type {IPublicTypeFieldExtraProps}` #### props `@type {IPublicModelSettingTopEntry}` 相关章节：[设置器顶层操作对象](./setting-top-entry) 相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) #### node 获取设置属性对应的节点实例 `@type {IPublicModelNode | null}` #### parent 获取设置属性的父设置属性 `@type {IPublicModelSettingTopEntry | IPublicModelSettingField}` 相关章节：[设置器顶层操作对象](./setting-top-entry) 相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) #### top 获取顶级设置属性 `@type {IPublicModelSettingTopEntry}` 相关章节：[设置器顶层操作对象](./setting-top-entry) 相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) #### isSettingField 是否是 SettingField 实例 `@type {boolean}` #### componentMeta `@type {IPublicModelComponentMeta}` 相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts) #### items 获取设置属性的 items `@type {Array
## 基本介绍 setter 设置器顶层操作对象 ## 属性 #### node 返回所属的节点实例 `@type {IPublicModelNode | null}` ## 方法 #### get 获取子级属性对象 ``` /** * 获取子级属性对象 * @param propName * @returns */ get(propName: string | number): IPublicModelSettingField | null; ``` 相关章节：[设置器操作对象](./setting-field) 相关类型：[IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts) #### getPropValue 获取指定 propName 的值 ``` /** * 获取指定 propName 的值 * @param propName * @returns */ getPropValue(propName: string | number): any; ``` #### setPropValue 设置指定 propName 的值 ``` /** * 设置指定 propName 的值 * @param propName * @param value */ setPropValue(propName: string | number, value: any): void; ``` #### clearPropValue 清除指定 propName 的值 ``` /** * 清除指定 propName 的值 * @param propName */ clearPropValue(propName: string | number): void; ``` ================================================ FILE: docs/docs/api/model/simulatorRender.md ================================================ --- title: SimulatorRender sidebar_position: 6 --- > **@types** [IPublicModelSimulatorRender](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/simulator-render.ts)
> **@since** v1.0.0 ## 基本介绍 画布节点选中模型 ## 属性 ### components 画布组件列表 ```typescript /** * 画布组件列表 */ components: { [key: string]: any; } ``` ## 方法 ### rerender 触发画布重新渲染 ```typescript /** * 触发画布重新渲染 */ rerender: () => void; ``` ================================================ FILE: docs/docs/api/model/window.md ================================================ --- title: Window sidebar_position: 12 --- > **[@experimental](./#experimental)**
> **@types** [IPublicModelWindow](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/window.ts)
> **@since** v1.1.0 ## 基本介绍 低代码设计器窗口模型 ## 属性 ### id 窗口唯一 id `@type {string}` ### title 窗口标题 `@type {string}` ### icon `@type {ReactElement}` ### resource 窗口对应资源 `@type {IPublicModelResource}` 关联模型 [IPublicModelResource](./resource) ### currentEditorView 窗口当前视图 `@type {IPublicModelEditorView}` 关联模型 [IPublicModelEditorView](./editor-view) **@since v1.1.7** ### editorViews 窗口所有视图 `@type {IPublicModelEditorView[]}` 关联模型 [IPublicModelEditorView](./editor-view) **@since v1.1.7** ## 方法 ### importSchema 当前窗口导入 schema, 会调用当前窗口对应资源的 import 钩子 ```typescript function importSchema(schema: IPublicTypeNodeSchema): void ``` 相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) ### changeViewType 修改当前窗口视图类型 ```typescript function changeViewType(viewName: string): void ``` ### save 当前窗口的保存方法，会调用当前窗口对应资源的 save 钩子 ```typescript function save(): Promise(void) ``` ## 事件 ### onChangeViewType 窗口视图变更事件 ``` onChangeViewType(fn: (viewName: string) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onSave 窗口视图保存事件 ``` onSave(fn: () => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) **@since v1.1.7** ================================================ FILE: docs/docs/api/plugins.md ================================================ --- title: plugins - 插件 API sidebar_position: 2 --- > **@types** [IPublicApiPlugins](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/plugins.ts)
> **@since** v1.0.0 ## 模块简介 插件管理器，提供编排模块中管理插件的能力。 ## 方法 ### register 注册插件 ```typescript async function register( plugin: IPublicTypePlugin, options?: IPublicTypePluginRegisterOptions, ): Promise
> **@since** v1.0.0 ## 模块简介 负责注册设置器、管理设置器的 API。注册自定义设置器之后可以在物料中进行使用。 ## 方法 ### getSetter 获取指定 setter ```typescript /** * 获取指定 setter * get setter by type * @param type * @returns */ getSetter(type: string): IPublicTypeRegisteredSetter | null; ``` 相关类型：[IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts) ### getSettersMap 获取已注册的所有 settersMap ```typescript /** * 获取已注册的所有 settersMap * get map of all registered setters * @returns */ getSettersMap(): Map
> **@since** v1.0.0 ## 模块简介 负责模拟器相关的 API，包括画布尺寸、语言等。 ## 方法 ### set 设置 host 配置值 ```typescript /** * 设置若干用于画布渲染的变量，比如画布大小、locale 等。 * set config for simulator host, eg. device locale and so on. * @param key * @param value */ set(key: string, value: any): void; ``` **示例** 设置若干用于画布渲染的变量，比如画布大小、locale 等。 以设置画布大小为例： 目前支持 3 种定制方式： ```typescript // 直接使用内置设备类型 project.simulatorHost.set('device', 'mobile' / 'iphonex' / 'iphone6' / 'default'); // 定制 canvas 的样式类 project.simulatorHost.set('deviceClassName', 'my-canvas-class'); // 最灵活的方式，直接设置 canvas / viewport 的样式（canvas 是外框，viewport 是内框，可以在 canvas 设置手机 / 平板背景图） project.simulatorHost.set('deviceStyle', { canvas: { width: '300px', backgroundColor: 'red' }, viewport: { width: '280px' } }); ``` ### get 获取模拟器中设置的变量，比如画布大小、locale 等。 ```typescript /** * 获取模拟器中设置的变量，比如画布大小、locale 等。 * set config value by key * @param key * @returns */ get(key: string): any; ``` ### rerender 触发组件构建，并刷新渲染画布 ```typescript /** * 触发组件构建，并刷新渲染画布 * make simulator render again */ rerender(): void; ``` ### scrollToNode 滚动到指定节点 ```typescript /** * 滚动到指定节点 * scroll to specific node * @param node * @since v1.1.0 */ scrollToNode(node: IPublicModelNode): void; ``` **@since v1.1.0** ================================================ FILE: docs/docs/api/skeleton.md ================================================ --- title: skeleton - 面板 API sidebar_position: 10 --- > **@types** [IPublicApiSkeleton](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/skeleton.ts)
> **@since** v1.0.0 ## 模块简介 面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。  页面上可以扩展的区域共 5 个，具体如下：  ### 基本概念 #### 扩展区域位置 (area) ##### topArea 展示在设计器的顶部区域，常见的相关区域的插件主要是： 1. 注册设计器 Logo； 2. 设计器操作回退和撤销按钮； 3. 全局操作按钮，例如：保存、预览等； ##### leftArea 左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。 该区域相关插件的主要有： 1. 大纲树展示，展示该设计器设计页面的大纲。 2. 组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。 3. 数据源面板 4. JS 等代码面板。 可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。 ##### centerArea 画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有： 1. 画布大小修改 2. 物料选中扩展区域修改 ##### rightArea 右侧区域，常用于组件的配置。常见的扩展有：统一处理组件的配置项，例如统一删除某一个配置项，统一添加某一个配置项的。 ##### toolbar 跟 topArea 类似，按需放置面板插件~ #### 展示类型 (type) 展示类型用于区分插件在设计器内可操作的几种不同界面类型。主要的几种类型为 PanelDock、Widget、Dock，另有 Panel 类型目前不推荐使用。 ##### PanelDock PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。 下图是组件库插件的展示效果。  其中右上角可以进行固定，可以对弹出的宽度做设定 接入可以参考代码 ```javascript import { skeleton } from "@alilc/lowcode-engine"; skeleton.add({ area: "leftArea", // 插件区域 type: "PanelDock", // 插件类型，弹出面板 name: "sourceEditor", content: SourceEditor, // 插件组件实例 props: { align: "left", icon: "wenjian", title: '标题', // 图标下方展示的标题 description: "JS 面板", }, panelProps: { floatable: true, // 是否可浮动 height: 300, hideTitleBar: false, maxHeight: 800, maxWidth: 1200, title: "JS 面板", width: 600, }, }); ``` ##### Widget Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。  接入可以参考代码： ```javascript import { skeleton } from "@alilc/lowcode-engine"; // 注册 logo 面板 skeleton.add({ area: "topArea", type: "Widget", name: "logo", content: Logo, // Widget 组件实例 contentProps: { // Widget 插件 props logo: "https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png", href: "/", }, props: { align: "left", width: 100, }, }); ``` ##### Dock 一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景。 ```javascript import { skeleton } from "@alilc/lowcode-engine"; skeleton.add({ area: "leftArea", type: "Dock", name: "opener", props: { icon: Icon, // Icon 组件实例 align: "bottom", onClick: function () { // 打开外部链接 window.open('https://lowcode-engine.cn'); // 显示 widget skeleton.showWidget('xxx'); } } }); ``` ## 方法 ### add 往指定扩展区加入一块面板 ```typescript /** * 增加一个面板实例 * add a new panel * @param config * @param extraConfig * @returns */ add(config: IPublicTypeWidgetBaseConfig, extraConfig?: Record
icon: string | ReactElement; // icon 为字符串时，请确定当前 fusion 主题包中包含该 icon
description: string;
condition: Function; // 指定当前面板的显影状态 | | contentProps | 面板的实现类/节点的参数 | | | panelProps | 假如 type: 'Panel' | 'PanelDock' 时有效，传给 Panel 类的参数 | keepVisibleWhileDragging: boolean; // 当有元素在当前 panel 拖拽时，是否保持 panel 为展开状态，默认值：false
area: 'leftFloatArea' | 'leftFixedArea' // 指定 panel 位于浮动面板还是钉住面板 | | index | 面板的位置，不传默认按插件注册顺序 | | ### remove 移除一个面板实例 ```typescript /** * 移除一个面板实例 * remove a panel * @param config * @returns */ remove(config: IPublicTypeWidgetBaseConfig): number | undefined; ``` ### getPanel 获取面板实例 ```typescript /** * 获取面板实例 * @param name 面板名称 */ getPanel(name: string): IPublicModelSkeletonItem | undefined; ``` 相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) @since v1.1.10 ### showPanel 展示指定 Panel 实例 ```typescript /** * 展示指定 Panel 实例 * show panel by name * @param name */ showPanel(name: string): void; ``` ### hidePanel 隐藏面板 ```typescript /** * 隐藏面板 * hide panel by name * @param name */ hidePanel(name: string): void; ``` ### showWidget 展示指定 Widget 实例 ```typescript /** * 展示指定 Widget 实例 * show widget by name * @param name */ showWidget(name: string): void; ``` ### enableWidget 将 widget 启用。 ```typescript /** * 将 widget 启用 * enable widget * @param name */ enableWidget(name: string): void; ``` ### hideWidget 隐藏指定 widget 实例。 ```typescript /** * 隐藏指定 widget 实例 * hide widget by name * @param name */ hideWidget(name: string): void; ``` ### disableWidget 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。 适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。 ```typescript /** * 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。 * disable widget，and make it not responding any click event. * @param name */ disableWidget(name: string): void; ``` ### showArea 显示某个 Area ```typescript /** * 显示某个 Area * show area * @param areaName name of area */ showArea(areaName: string): void; ``` ### hideArea 隐藏某个 Area ```typescript /** * 隐藏某个 Area * hide area * @param areaName name of area */ hideArea(areaName: string): void; ``` ### getAreaItems 获取某个区域下的所有面板实例 ```typescript /** * 获取某个区域下的所有面板实例 * @param areaName IPublicTypeWidgetConfigArea */ getAreaItems(areaName: IPublicTypeWidgetConfigArea): IPublicModelSkeletonItem[] | undefined; ``` 相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) ### registerConfigTransducer 注册一个面板的配置转换器（transducer）。 ```typescript /** * 注册一个面板的配置转换器（transducer）。 * Registers a configuration transducer for a panel. * @param {IPublicTypeConfigTransducer} transducer * - 要注册的转换器函数。该函数接受一个配置对象（类型为 IPublicTypeSkeletonConfig）作为输入，并返回修改后的配置对象。 * - The transducer function to be registered. This function takes a configuration object * * @param {number} level * - 转换器的优先级。优先级较高的转换器会先执行。 * - The priority level of the transducer. Transducers with higher priority levels are executed first. * * @param {string} [id] * - （可选）转换器的唯一标识符。用于在需要时引用或操作特定的转换器。 * - (Optional) A unique identifier for the transducer. Used for referencing or manipulating a specific transducer when needed. */ registerConfigTransducer(transducer: IPublicTypeConfigTransducer, level: number, id?: string): void; ``` 使用示例 ```typescript import { IPublicModelPluginContext, IPublicTypeSkeletonConfig } from '@alilc/lowcode-types'; function updatePanelWidth(config: IPublicTypeSkeletonConfig) { if (config.type === 'PanelDock') { return { ...config, panelProps: { ...(config.panelProps || {}), width: 240, }, } } return config; } const controlPanelWidthPlugin = (ctx: IPublicModelPluginContext) => { const { skeleton } = ctx; (skeleton as any).registerConfigTransducer?.(updatePanelWidth, 1, 'update-panel-width'); return { init() {}, }; }; controlPanelWidthPlugin.pluginName = 'controlPanelWidthPlugin'; controlPanelWidthPlugin.meta = { dependencies: [], engines: { lowcodeEngine: '^1.2.3', // 插件需要配合 ^1.0.0 的引擎才可运行 }, }; export default controlPanelWidthPlugin; ``` ## 事件 ### onShowPanel 监听 Panel 实例显示事件 ```typescript /** * 监听 panel 显示事件 * set callback for panel shown event * @param listener * @returns */ onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onHidePanel 监听 Panel 实例隐藏事件 ```typescript /** * 监听 Panel 实例隐藏事件 * set callback for panel hidden event * @param listener * @returns */ onHidePanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onDisableWidget 监听 Widget 实例 Disable 事件 ```typescript /** * 监听 Widget 实例 Disable 事件 * @param listener */ onDisableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onEnableWidget 监听 Widget 实例 Enable 事件 ```typescript /** * 监听 Widget 实例 Enable 事件 * @param listener */ onEnableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onShowWidget 监听 Widget 实例显示事件 ```typescript /** * 监听 Widget 显示事件 * set callback for widget shown event * @param listener * @returns */ onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### onHideWidget 监听 Widget 实例隐藏事件 ```typescript /** * 监听 Widget 隐藏事件 * set callback for widget hidden event * @param listener * @returns */ onHideWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; ``` 相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ## 使用示例 ```typescript import { skeleton } from '@alilc/lowcode-engine'; skeleton.add({ name: 'logo', area: 'topArea', type: 'Widget', contentProps: {}, content: LogoContent, }); skeleton.add({ name: 'sourceEditor', type: 'PanelDock', area: 'leftArea', props: { align: 'top', icon: 'wenjian', description: 'JS 面板', }, panelProps: { floatable: true, height: 300, help: undefined, hideTitleBar: false, maxHeight: 800, maxWidth: 1200, title: 'JS 面板', width: 600, }, content: SourceEditor, }); // 显隐 panel skeleton.showPanel('sourceEditor'); skeleton.hidePanel('sourceEditor'); // 创建一个浮动的 widget skeleton.add({ name: 'floatingWidget', type: 'Widget', area: 'mainArea', props: {}, content: React.createElement('div', {}, 'haha'), contentProps: { style: { position: 'fixed', top: '200px', bottom: 0, width: 'calc(100% - 46px)', 'background-color': 'lightblue' } } }); // 显隐 widget skeleton.showWidget('floatingWidget'); skeleton.hideWidget('floatingWidget'); // 控制 widget 的可点击态 skeleton.enableWidget('sourceEditor'); skeleton.disableWidget('sourceEditor'); ``` ### bottomArea 示例 ```typescript import { skeleton } from '@alilc/lowcode-engine'; skeleton.add({ name: 'bottomAreaPanelName', area: 'bottomArea', type: 'Panel', content: () => 'demoText', }); skeleton.showPanel('bottomAreaPanelName'); ``` ### widget 示例 ```typescript // 注册 logo 面板 skeleton.add({ area: 'topArea', type: 'Widget', name: 'logo', content: Logo, contentProps: { logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', href: 'https://lowcode-engine.cn', }, props: { align: 'left', }, }); ``` ================================================ FILE: docs/docs/api/workspace.md ================================================ --- title: workspace - 应用级 API sidebar_position: 10 --- > **[@experimental](./#experimental)**
> **@types** [IPublicApiWorkspace](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/workspace.ts)
> **@since** v1.1.0 ## 模块简介 通过该模块可以开发应用级低代码设计器。 ## 变量 ### isActive 是否启用 workspace 模式 ### window 当前设计器窗口模型 ```typescript get window(): IPublicModelWindow ``` 关联模型 [IPublicModelWindow](./model/window) ### plugins 应用级别的插件注册 ```typescript get plugins(): IPublicApiPlugins ``` 关联模型 [IPublicApiPlugins](./plugins) ### skeleton 应用级别的面板管理 ```typescript get skeleton(): IPublicApiSkeleton ``` 关联模型 [IPublicApiSkeleton](./skeleton) ### windows 当前设计器的编辑窗口 ```typescript get window(): IPublicModelWindow[] ``` 关联模型 [IPublicModelWindow](./model/window) ### resourceList 当前设计器的资源列表数据 ``` get resourceList(): IPublicModelResource; ``` 关联模型 [IPublicModelResource](./model/resource) ## 方法 ### registerResourceType 注册资源 ```typescript /** 注册资源 */ registerResourceType(resourceTypeModel: IPublicTypeResourceType): void; ``` 相关类型：[IPublicTypeResourceType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-type.ts) ### setResourceList 设置设计器资源列表数据 ```typescript setResourceList(resourceList: IPublicResourceList) {} ``` 相关类型：[IPublicResourceData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-list.ts) ### openEditorWindow 打开视图窗口 ```typescript /** * 打开视图窗口 * @deprecated */ openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise
/* 组件内容 */
;
};
```
**定义全局插件**：定义一个函数，这个函数会在插件被注册时调用。这个函数通常接受一个上下文对象 **ctx**，它提供了对引擎功能的访问。
```javascript
const globalPlugin = (ctx) => {
const { skeleton } = ctx;
skeleton.add({
type: 'PanelDock',
name: 'datapool',
content: ProvideViewPluginContext((props) => {
// 组件内容
return (
## setter 配置
| 属性名 | 说明 |
| --- | --- |
| defaultValue | 默认值 |
## 返回类型
String
会返回 options 中的 value 值
================================================
FILE: docs/docs/guide/appendix/setterDetails/event.md
================================================
---
title: EventSetter
---
## 简介
可以将事件绑定在物料上
## 展示
## 组件自带事件列表
在物料协议的 configure.supports.events 中声明
```json
{
"configure ": {
"supports": {
"style": true,
"events": [{
"name": "onChange"
}, {
"name": "onExpand"
}, {
"name": "onVisibleChange"
}]
}
}
}
```
## 事件绑定
可以选择已有的事件 (schema 中的**methods**节点) 进行绑定，也可以选择新建事件，选择新建事件默认会增加_new 的事件后缀命名，点确定以后会跳转到对应代码插件对应区块。
## 参数设置
如果需要额外传参，需要将扩展参数设置打开，在代码面板中，编辑参数内容。
注意：
- 额外参数必须被包装成一个对象，如参数模板中所示
- 可以使用动态变量例如 (this.items，this.state.xxx)
```javascript
{
testKey: this.state.text,
}
```
- 该参数是额外参数，会加在原有参数后面，例如在 onClick 中加入扩展传参，最终函数消费的时候应该如下所示
```javascript
// e 为 onClick 原有函数传参，extParams 为自定义传参
onClick(e, extParams) {
this.setState({
isShowDialog: extParams.isShowDialog,
});
}
```
## 事件新建函数模板
有时候我们创建的函数会有用到一些通用的函数模板，我们可以在物料协议的 events.template 中创建一个模板，如下
```json
{
"configure ": {
"supports": {
"style": true,
"events": [{
"name": "onChange",
"template": "templeteTest(e,${extParams}){this.setState({isShowDialog: false})}"
}, {
"name": "onExpand"
}, {
"name": "onVisibleChange"
}]
}
}
}
```
其中 ${extParams} 为扩展参数占位符，如果用户没有声明扩展参数，会移除对应的参数声明，定义模板后，每次创建完函数会自动生成模板函数，如下图
================================================
FILE: docs/docs/guide/appendix/setterDetails/function.md
================================================
---
title: FunctionSetter
---
## 简介
可以将function绑定在物料上
## 设置器返回
设置器返回一个Function对象，调用function()运行Function对象得到运行结果。
如下是一个典型的使用案例：
```javascript
export type TestProps = React.ComponentProps
## setter 配置
| **属性名** | **类型** | **说明** |
| --- | --- | --- |
| type | String | 选择器返回类型 **可选值**: "string" \| "node" |
| defaultValue | String | ReactNode | 默认值 |
| hasClear | Boolean | 选择器是否显示清除按钮 |
| icons | Array | 自定义 icon 集合；默认值详见[图标可选值](#图标可选值) |
| placeholder | String | 没有值的时候的占位符 |
## 返回类型
String | ReactNode
## 图标可选值
```javascript
[
'smile',
'cry',
'success',
'warning',
'prompt',
'error',
'help',
'clock',
'success-filling',
'delete-filling',
'favorites-filling',
'add',
'minus',
'arrow-up',
'arrow-down',
'arrow-left',
'arrow-right',
'arrow-double-left',
'arrow-double-right',
'switch',
'sorting',
'descending',
'ascending',
'select',
'semi-select',
'loading',
'search',
'close',
'ellipsis',
'picture',
'calendar',
'ashbin',
'upload',
'download',
'set',
'edit',
'refresh',
'filter',
'attachment',
'account',
'email',
'atm',
'copy',
'exit',
'eye',
'eye-close',
'toggle-left',
'toggle-right',
'lock',
'unlock',
'chart-pie',
'chart-bar',
'form',
'detail',
'list',
'dashboard',
]
```
================================================
FILE: docs/docs/guide/appendix/setterDetails/mixed.md
================================================
---
title: MixedSetter
---
## 简介
可以让属性同时支持多个 setter
## 展示
## 配置
| **属性名** | **类型** | **说明** |
| --- | --- | --- |
| setters | Array
## setter 配置
| 属性名 | 说明 |
| --- | --- |
| min, max | 指定最大最小值 |
| defaultValue | 默认值 |
| step | 指定步长 number |
| units | 指定单位 string |
| precision | 设置小数位数 number |
## 返回类型
Number
会返回 value 值
================================================
FILE: docs/docs/guide/appendix/setterDetails/radioGroup.md
================================================
---
title: RadioGroupSetter
---
## 简介
用于直观的展示选择并选择。
## 展示
## setter 配置
| 属性名 | 说明 |
| --- | --- |
| defaultValue | 默认值 |
| options | 传入的数据源，**参数格式**: [{img: 'url', value: 'text', label/title: 'text'}, ...] \| [ 'text', 'text', ...] |
## 返回类型
String | Number | Boolean
会返回 options 中的 value 值
================================================
FILE: docs/docs/guide/appendix/setterDetails/select.md
================================================
---
title: SelectSetter
---
## 简介
用来选择组件。在限定的可选性内进行选择，核心能力是选择
## 展示
## setter 配置
| 属性名 | 说明 |
| --- | --- |
| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
| defaultValue | 默认值 |
| options | 传入的数据源，**参数格式**: [ {label/title: '文字', value: 'text'}, ...] |
## 返回类型
String | Number | Boolean
会返回 options 中的 value 值
================================================
FILE: docs/docs/guide/appendix/setterDetails/slot.md
================================================
---
title: SlotSetter
---
## 简介
通过一个开启一个 slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot 比较适合物料的局部自定义渲染。
## 展示
## setter 配置
| 属性名 | 类型 | 说明 |
| --- | --- | --- |
| initialValue | Object | 默认值 { "type": "JSSlot", "params": [ "module" ], "value": [] } params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 |
| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[]不同 |
| checkedText | string | switch 选中文案，默认显示"启用" |
| unCheckedText | string | switch 取消文案，默认显示"关闭" |
## 配置示例
### 配置
```typescript
{
name: 'propName',
title: 'propTitle',
setter: {
componentName: 'SlotSetter',
isRequired: true,
title: '组件坑位',
initialValue: {
type: 'JSSlot',
value: [],
},
}
}
```
### 组件
```typescript
function A(props) {
return props.propName;
}
```
## 带参数的插槽示例
### 配置
```typescript
{
name: 'propName',
title: 'propTitle',
setter: {
componentName: 'SlotSetter',
isRequired: true,
title: '组件坑位',
initialValue: {
type: 'JSSlot',
params: [ 'module'],
value: [],
},
}
}
```
### 组件
组件需要传参数进行渲染，和普通示例的使用不一样。
```typescript
function A(props) {
const module = [];
return props.propName(module);
}
```
### param 使用示例
1.开启插槽
2.拖拽组件到插槽中
3.在插槽内组件中使用变量绑定，绑定 this.xxx
xxx 入参的配置
================================================
FILE: docs/docs/guide/appendix/setterDetails/string.md
================================================
---
title: StringSetter
---
## 简介
用来展示和修改字符串类型的属性值，不可换行
## 展示
## setter 配置
| 属性名 | 说明 |
| --- | --- |
| placeholder | 输入提示 |
## 返回类型
String
================================================
FILE: docs/docs/guide/appendix/setterDetails/style.md
================================================
---
title: StyleSetter
---
## 简介
通过开启 StyleSetter，我们可以将样式配置面板来配置样式属性。
## 展示
## setter 配置
| 属性名 | 类型 | 说明 |
| --- | --- | --- |
| unit | String | 默认值 px 
|
| placeholderScale | Number | 默认计算尺寸缩放 默认值为 1 
在没有设定数值的时候，系统会通过 window.getComputedStyle 来计算展示的数值。在某些场景下，例如手机场景，在编辑器展示的是 375 的实际宽度，但是实际设计尺寸是 750 的宽度，这个时候需要对这个计算尺寸设成 2 |
| showModuleList | String[] | 默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。 例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 |
| isShowCssCode | Boolean | 默认值: true, 是否展示css源码编辑 |
| layoutPropsConfig | Object | 布局样式设置 |
| layoutPropsConfig.showDisPlayList | String[] | 默认值 ['inline', 'flex', 'block', 'inline-block', 'none'] 
可按需展示 |
| layoutPropsConfig.isShowPadding | String | 默认值 true 
是否展示内边距（四个边） ||
| layoutPropsConfig.isShowMargin | Boolean | 默认值 true 
是否展示外边距（四个边） ||
| layoutPropsConfig.isShowWidthHeight | Boolean | 默认值 true 
是否展示宽高 |
| fontPropsConfig | Object | 文字样式设置 |
| fontPropsConfig.fontFamilyList | Array | [ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' },] 可以定制文字字体选项 |
| positionPropsConfig | Object | 位置样式设置 |
| positionPropsConfig.isShowFloat | Boolean | 默认 true 是否展示浮动 |
| positionPropsConfig.isShowClear | Boolean | 默认 true 是否展示清除浮动 |
================================================
FILE: docs/docs/guide/appendix/setterDetails/textArea.md
================================================
---
title: TextAreaSetter
---
## 简介
表单输入组件。
## 展示
## setter 配置
| **属性名** | **类型** | **说明** |
| --- | --- | --- |
| placeholder | String | 输入提示 |
## 返回类型
String
================================================
FILE: docs/docs/guide/appendix/setterDetails/variable.md
================================================
---
title: VariableSetter
---
## 简介
用来给属性值设定变量
## 展示
## 变量列表
包含所有的在协议中的**state**(state 属性) 节点数据和**methods**(自定义处理函数) 节点数据
================================================
FILE: docs/docs/guide/appendix/setters.md
================================================
---
title: 预置设置器列表
sidebar_position: 4
---
| 预置 Setter | 返回类型 | 用途 | 截图 |
| --- | --- | --- | --- |
| [ArraySetter](./setterDetails/array) | T[] | 列表数组行数据设置器 |  |
| [BoolSetter](./setterDetails/behavior) | boolean | 布尔型数据设置器， |  |
| ClassNameSetter | string | 样式名设置器 |  |
| [ColorSetter](./setterDetails/color) | string | 颜色设置器 |  |
| DateMonthSetter | | 日期型 - 月数据设置器 | |
| DateRangeSetter | | 日期型数据设置器，可选择时间区间 | |
| DateSetter | | 日期型数据设置器 | |
| DateYearSetter || 日期型 - 年数据设置器 | |
| [EventSetter](./setterDetails/event) | function | 事件绑定设置器 |  |
| [IconSetter](./setterDetails/icon) | string | 图标设置器 |  |
| [FunctionSetter](./setterDetails/function) | function | 函数型数据设置器 |  |
| JsonSetter | object | json 型数据设置器 |  |
| [MixedSetter](./setterDetails/mixed) | any | 混合型数据设置器 |  |
| [NumberSetter](./setterDetails/number) | number | 数值型数据设置器 |  |
| ObjectSetter | Record
选择`编辑器`，并填写对应的问题，即可完成创建。
> 注 @alilc/create-element 版本需 >= 1.0.4，若看不到`编辑器`选项，请重新执行步骤 3
5. 进入创建后的目录
```bash
cd editor-project-name
```
6. 安装依赖
```bash
npm install
```
7. 安装依赖成功后，启动项目 (注意观察上一步的输出，如有 error 等失败信息，请先进行排查)
```bash
npm start
```
执行后如果看到这个界面，说明项目启动成功。您可以继续看后续章节了。本章节后续内容均为高级配置方式。
## 方法 2: 使用 UMD 包方式配置
如果您不是从零开始的项目，您可能需要手工引入低代码引擎。
### 引入 UMD 包资源
我们需要在启动前，正确在项目中通过 UMD 包方式直接依赖如下内容：
> 亦可使用异步加载工具，如果您按照正确的顺序进行加载
```html
```
> 注：如果 unpkg 的服务比较缓慢，您可以使用官方 CDN 来获得确定版本的低代码引擎，如对于引擎的 1.0.18 版本，可用以下官方 CDN 替代
> - [https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js](https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js)
### 配置打包
因为这些资源已经通过 UMD 方式引入，所以在 webpack 等构建工具中需要配置它们为 external，不再重复打包：
```javascript
{
"externals": {
"react": "var window.React",
"react-dom": "var window.ReactDOM",
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"moment": "var window.moment",
"lodash": "var window._"
}
}
```
### 初始化低代码编辑器
正确引入后，我们可以直接通过 window 上的变量进行引用，如 `window.AliLowCodeEngine.init`。您可以直接通过此方式初始化低代码引擎：
```javascript
// 确保在执行此命令前，在 中已有一个 id 为 lce-container 的
window.AliLowCodeEngine.init(document.getElementById('lce-container'), {
enableCondition: true,
enableCanvasLock: true,
});
```
如果您的项目中使用了 TypeScript，您可以通过如下 devDependencies 引入相关包，并获得对应的类型推断。
```javascript
// package.json
{
"devDependencies": {
"@alilc/lowcode-engine": "^1.0.0"
}
}
```
```javascript
// src/index.tsx
import { init } from '@alilc/lowcode-engine';
init(document.getElementById('lce-container'), {
enableCondition: true,
enableCanvasLock: true,
});
```
init 的功能包括但不限于：
1. 传递 options 并设置 config 对象；
2. 传递 preference 并设置 plugins 入参；
3. 初始化 Workbench；
> 本节中的低代码编辑器例子可以在 demo 中找到：[https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts](https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts)
## 配置低代码编辑器
详见[低代码扩展简述](/site/docs/guide/expand/editor/summary)章节。
================================================
FILE: docs/docs/guide/create/useRenderer.md
================================================
---
title: 接入运行时
sidebar_position: 1
---
低代码引擎的编辑器将产出两份数据：
- 资产包数据 assets：包含物料名称、包名及其获取方式，对应协议中的[《低代码引擎资产包协议规范》](/site/docs/specs/assets-spec)
- 页面数据 schema：包含页面结构信息、生命周期和代码信息，对应协议中的[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec)
经过上述两份数据，可以直接交由渲染模块或者出码模块来运行，二者的区别在于：
- 渲染模块：使用资产包数据、页面数据和低代码运行时，并且允许维护者在低代码编辑器中用 `低代码（LowCode）`的方式继续维护；
- 出码模块：不依赖低代码运行时和页面数据，直接生成可直接运行的代码，并且允许维护者用 `源码（ProCode）` 的方式继续维护，但无法再利用低代码编辑器；
> 渲染和出码的详细阐述可参考此文：[低代码技术在研发团队的应用模式探讨](https://mp.weixin.qq.com/s/Ynk_wjJbmNw7fEG6UtGZbQ)
## 渲染模块
[在 Demo 中](https://lowcode-engine.cn/demo/demo-general/index.html)，右上角有渲染模块的示例使用方式：
基于官方提供的渲染模块 [@alifd/lowcode-react-renderer](https://github.com/alibaba/lowcode-engine/tree/main/packages/react-renderer)，你可以在 React 上下文渲染低代码编辑器产出的页面。
### 构造渲染模块所需数据
渲染模块所需要的数据需要通过编辑器产出的数据进行一定的转换，规则如下：
- schema：从编辑器产出的 projectSchema 中拿到 componentsTree 中的首项，即 `projectSchema.componentsTree[0]`；
- components：需要根据编辑器产出的资产包 assets 中，根据页面 projectSchema 中声明依赖的 componentsMap，来加载所有依赖的资产包，最后获取资产包的实例并生成物料 - 资产包的键值对 components。
这个过程可以参考 demo 项目中的 `src/preview.tsx`：
```typescript
async function getSchemaAndComponents() {
const packages = JSON.parse(window.localStorage.getItem('packages') || '');
const projectSchema = JSON.parse(window.localStorage.getItem('projectSchema') || '');
const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
const componentsMap: any = {};
componentsMapArray.forEach((component: any) => {
componentsMap[component.componentName] = component;
});
const schema = componentsTree[0];
const libraryMap = {};
const libraryAsset = [];
packages.forEach(({ package: _package, library, urls, renderUrls }) => {
libraryMap[_package] = library;
if (renderUrls) {
libraryAsset.push(renderUrls);
} else if (urls) {
libraryAsset.push(urls);
}
});
const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];
const assetLoader = new AssetLoader();
await assetLoader.load(libraryAsset);
const components = await injectComponents(buildComponents(libraryMap, componentsMap));
return {
schema,
components,
};
}
```
### 进行渲染
拿到 schema 和 components 以后，您可以借由资产包数据和页面数据来完成页面的渲染：
```tsx
import React from 'react';
import ReactRenderer from '@alilc/lowcode-react-renderer';
const SamplePreview = () => {
return (
基于 Schema 和物料组件，如何渲染出我们的页面？这一节描述的就是这个。
## npm 包与仓库信息
- React 框架渲染 npm 包：@alilc/lowcode-react-renderer
- 仓库：[https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) 下的
- packages/renderer-core
- packages/react-renderer
- packages/react-simulator-renderer
## 渲染框架原理
### 整体架构
- 协议层：基于[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec) 产出的 Schema 作为我们的规范协议。
- 能力层：提供组件、区块、页面等渲染所需的核心能力，包括 Props 解析、样式注入、条件渲染等。
- 适配层：由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。能保障渲染层和能力层直接通过适配层连接起来，能起到独立可扩展的作用。
- 渲染层：提供核心的渲染方法，由于不同运行时框架提供的渲染方法是不同的，所以其通过适配层进行注入，只需要提供适配层所需的接口，即可实现渲染。
- 应用层：根据渲染层所提供的方法，可以应用到项目中，根据使用的方法和规模即可实现应用、页面、区块的渲染。
### 核心解析
这里主要解析一下刚刚提到的架构中的适配层和渲染层。
#### 适配层
适配层提供的是各个框架之间的差异项。比如 `React.createElement` 和 `Rax.createElement` 方法是不同的。所以需要在适配层对 API 进行抹平。
##### React
```typescript
import { createElement } from 'react';
import {
adapter,
} from '@ali/lowcode-renderer-core';
adapter.setRuntime({
createElement,
});
```
##### Rax
```typescript
import { createElement } from 'rax';
import {
adapter,
} from '@ali/lowcode-renderer-core';
adapter.setRuntime({
createElement,
});
```
这时，在核心层使用的 `createElement` 会基于使用不同的 renderer 而使用不同的方法，自动适配框架所需的运行时方法。
所需的方法包括：
- `setRuntime`：设置运行时相关方法
- `Component`：组件类，参考 React 的 `Component`。
- `PureComponent`：组件类，参考 React 的 `PureComponent`。
- `createContext`：创建一个 `Context` 对象的方法。例如，当 React 渲染一个订阅了这个 `Context` 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 `Provider` 中读取到当前的 `context` 值。
- `createElement`：创建 `Component` 元素，例如在 React 中即为创建 React 元素。
- `forwardRef`：ref 转发的方法。Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。
- `findDOMNode`：是一个访问底层 DOM 节点的方法。如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。
- `setRenderers`
- `PageRenderer`：页面渲染的方法。可以定制页面渲染的生命周期，定制导航，定制路由等。
- `ComponentRenderer`：组件渲染的方法。
- `BlockRenderer`：区块渲染的方法。
#### 渲染层
##### React Renderer
内部的技术栈统一都是 React，大多数适配层的 API 都是按照 React 来设计的，所以对于 React Renderer 来说，需要做的不多。
React Renderer 的代码量很少，主要是将 React API 注册到适配层中。
```typescript
import React, { Component, PureComponent, createElement, createContext, forwardRef, ReactInstance, ContextType } from 'react';
import ReactDOM from 'react-dom';
import {
adapter,
pageRendererFactory,
componentRendererFactory,
blockRendererFactory,
addonRendererFactory,
tempRendererFactory,
rendererFactory,
types,
} from '@ali/lowcode-renderer-core';
import ConfigProvider from '@alifd/next/lib/config-provider';
window.React = React;
(window as any).ReactDom = ReactDOM;
adapter.setRuntime({
Component,
PureComponent,
createContext,
createElement,
forwardRef,
findDOMNode: ReactDOM.findDOMNode,
});
adapter.setRenderers({
PageRenderer: pageRendererFactory(),
ComponentRenderer: componentRendererFactory(),
BlockRenderer: blockRendererFactory(),
AddonRenderer: addonRendererFactory(),
TempRenderer: tempRendererFactory(),
DivRenderer: blockRendererFactory(),
});
adapter.setConfigProvider(ConfigProvider);
```
##### Rax Renderer
Rax 的大多数 API 和 React 基本也是一致的，差异点在于重写了一些方法。
```typescript
import { Component, PureComponent, createElement, createContext, forwardRef } from 'rax';
import findDOMNode from 'rax-find-dom-node';
import {
adapter,
addonRendererFactory,
tempRendererFactory,
rendererFactory,
} from '@ali/lowcode-renderer-core';
import pageRendererFactory from './renderer/page';
import componentRendererFactory from './renderer/component';
import blockRendererFactory from './renderer/block';
import CompFactory from './hoc/compFactory';
adapter.setRuntime({
Component,
PureComponent,
createContext,
createElement,
forwardRef,
findDOMNode,
});
adapter.setRenderers({
PageRenderer: pageRendererFactory(),
ComponentRenderer: componentRendererFactory(),
BlockRenderer: blockRendererFactory(),
AddonRenderer: addonRendererFactory(),
TempRenderer: tempRendererFactory(),
});
```
### 多模式渲染
#### 预览模式渲染
预览模式的渲染，主要是通过 Schema、components 即可完成上述的页面渲染能力。
```typescript
import ReactRenderer from '@ali/lowcode-react-renderer';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
const schema = {
componentName: 'Page',
props: {},
children: [
{
componentName: 'Button',
props: {
type: 'primary',
style: {
color: '#2077ff'
},
},
children: '确定',
},
],
};
const components = {
Button,
};
ReactDOM.render((
自定义 react 标签
, content)
}
})
}
}
}
pluginX6DesignerExtension.pluginName = 'plugin-x6-designer-extension';
export default pluginX6DesignerExtension;
```
x6Designer为图实例暴露出来的一些接口，可基于此进行一些图的必要插件的封装，整个插件的封装完全follow低代码引擎的插件，详情可参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/pluginWidget
## 开发物料
```bash
npm init @alilc/element your-material-demo
```
仓库初始化完成
接下来即可编写物料内容了
图物料与低代码的dom场景存在画布的差异，因此暂不支持物料单独调试，须通过项目demo进行物料调试
### 资产描述
```bash
npm run lowcode:build
```
如果物料是个React组件，则在执行上述命令时会自动生成对应的meta.ts，但图物料很多时候并非一个React组件，因此须手动生产meta.ts
可参考： https://github.com/alibaba/lowcode-materials/blob/main/packages/graph-x6-materials/lowcode/send-email/meta.ts
同时会自动生成物料描述文件
### 物料调试
#### 物料侧
物料想要支持被项目动态inject调试，须在build.lowcode.js中加入
```javascript
[
'@alilc/build-plugin-alt',
{
type: 'component',
inject: true,
library
},
]
```
本地启动
```bash
npm run lowcode:dev
```
#### 项目侧
通过@alilc/lce-graph-core加载物料的天然支持了debug，因此无须特殊处理。
若项目中自行加载，则参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/cli
项目访问地址后拼接query "?debug"即可进入物料调试
================================================
FILE: docs/docs/guide/expand/editor/material.md
================================================
---
title: 物料扩展
sidebar_position: 1
---
## 物料简述
物料是页面搭建的原料，按照粒度可分为组件、区块和模板：
1. 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现；
2. 区块：区块是一小段符合低代码协议的 schema，其内部会包含一个或多个组件，用户向设计器中拖入一个区块后可以随意修改其内部内容；
3. 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面；
低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。
## 资产包配置
### 什么是低代码资产包
在低代码 Demo 中，我们可以看到，组件面板不只提供一个组件，组件是以集合的形式提供给低代码平台的，而低代码资产包正是这些组件构成集合的形式。
**_它背后的 Interface，_**[**_在引擎中的定义摘抄如下_**](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/assets.ts)**_：_**
```typescript
export interface Assets {
version: string; // 资产包协议版本号
packages?: Arraydumb
;
}
}
```
引入 parse 工具自动解析
```typescript
import parse from '@alilc/lowcode-material-parser';
(async () => {
const result = await parse({ entry: '/path/to/component' });
console.log(JSON.stringify(result, null, 2));
})();
```
因为一个组件可能输出多个子组件，所以解析结果是个数组。
```json
[
{
"componentName": "FusionForm",
"title": "",
"docUrl": "",
"screenshot": "",
"devMode": "proCode",
"npm": {
"package": "",
"version": "",
"exportName": "default",
"main": "",
"destructuring": false,
"subName": ""
},
"props": [
{
"name": "name",
"propType": "string",
"description": "这是用于描述姓名",
"defaultValue": "张三"
},
{
"name": "age",
"propType": "number",
"description": "这是用于描述年龄",
"defaultValue": 18
},
{
"name": "friends",
"propType": "array",
"description": "这是用于描述好友列表",
"defaultValue": [
"李四",
"王五",
"赵六"
]
}
]
}
]
```
## 手工配置物料描述
如果自动生成的物料无法满足需求，我们就需要手动配置物料描述。本节将分场景描述物料配置的内容。
### 常见配置
#### 组件的属性只有有限的值
增加一个 size 属性，只能从 'large'、'normal'、'small' 这个候选值中选择。
以上面自动解析的物料为例，在此基础上手工加上 size 属性：
```json
[
{
"componentName": "FusionForm",
"title": "",
"docUrl": "",
"screenshot": "",
"devMode": "proCode",
"npm": {
"package": "",
"version": "",
"exportName": "default",
"main": "",
"destructuring": false,
"subName": ""
},
"props": [
{
"name": "name",
"propType": "string",
"description": "这是用于描述姓名",
"defaultValue": "张三"
},
{
"name": "age",
"propType": "number",
"description": "这是用于描述年龄",
"defaultValue": 18
},
{
"name": "friends",
"propType": "array",
"description": "这是用于描述好友列表",
"defaultValue": [
"李四",
"王五",
"赵六"
]
}
],
// 手工增加的 size 属性
"configure": {
"isExtend": true,
"props": [
{
"title": "尺寸",
"name": "size",
"setter": {
"componentName": 'RadioGroupSetter',
"isRequired": true,
"props": {
"options": [
{ "title": "大", "value": "large" },
{ "title": "中", "value": "normal" },
{ "title": "小", "value": "small" }
]
},
}
}
]
}
}
]
```
#### 组件的属性既可以设置固定值，也可以绑定到变量
我们知道一种属性形式就需要一种 setter 来设置，如果想要将 value 属性允许输入字符串，那就需要设置为 `StringSetter`，如果允许绑定变量，就需要设置为 `VariableSetter`，具体设置器请参考[预置设置器列表](/site/docs/guide/appendix/setters)。
那如果都想要呢？可以使用 `MixedSetter` 来实现。
```javascript
{
// ...
configure: {
isExtend: true,
props: [
{
title: '输入框的值',
name: 'activeValue',
setter: {
componentName: 'MixedSetter',
isRequired: true,
props: {
setters: [
'StringSetter',
'NumberSetter',
'VariableSetter',
],
},
}
}
]
}
}
```
设置后，就会出现“切换设置器”的操作项了
#### 开启组件样式设置
```javascript
{
configure: {
// ...,
supports: {
style: true,
},
// ...
}
}
```
#### 设置组件的默认事件
```javascript
{
configure: {
// ...
supports: {
events: ['onPressEnter', 'onClear', 'onChange', 'onKeyDown', 'onFocus', 'onBlur'],
},
// ...
}
}
```
#### 设置 prop 标题的 tip
```javascript
{
name: 'label',
setter: 'StringSetter',
title: {
label: {
type: 'i18n',
zh_CN: '标签文本',
en_US: 'Label',
},
tip: {
type: 'i18n',
zh_CN: '属性：label | 说明：标签文本内容',
en_US: 'prop: label | description: label content',
},
},
}
```
#### 配置 prop 对应 setter 在配置面板的展示方式
##### inline
```javascript
{
configure: {
props: [{
description: '标签文本',
display: 'inline',
}]
}
}
```
##### block
```javascript
{
configure: {
props: [{
description: '高级',
display: 'block',
}]
}
}
```
##### accordion
```javascript
{
configure: {
props: [{
description: '表单项配置',
display: 'accordion',
}]
}
}
```
##### entry
```javascript
{
configure: {
props: [{
description: '风格与样式',
display: 'entry',
}]
}
}
```
##### plain
```javascript
{
configure: {
props: [{
description: '返回上级',
display: 'plain',
}]
}
}
```
### 进阶配置
#### 组件的 children 属性允许传入 ReactNode
例如有一个如下的 Tab 选项卡组件，每个 TabPane 的 children 都是一个组件
只需要增加 `isContainer` 配置即可
```javascript
{
// ...
configure: {
// ...
component: {
// 新增，设置组件为容器组件，可拖入组件
isContainer: true,
},
}
}
```
假设我们希望只允许拖拽 Table、Button 等内容放在 TabPane 里。配置白名单 `childWhitelist` 即可
```javascript
{
// ...
configure: {
// ...
component: {
isContainer: true,
nestingRule: {
// 允许拖入的组件白名单
childWhitelist: ['Table', 'Button'],
// 同理也可以设置该组件允许被拖入哪些父组件里
parentWhitelist: ['Tab'],
},
},
},
}
```
#### 组件的非 children 属性允许传入 ReactNode
这就需要使用 `SlotSetter` 开启插槽了，如下面示例，给 Tab 的 title 开启插槽，允许拖拽组件
```json
{
// ...
configure: {
isExtend: true,
props: [
{
title: '选项卡标题',
name: 'title',
setter: {
componentName: 'MixedSetter',
props: {
setters: [
'StringSetter',
'SlotSetter',
'VariableSetter',
],
},
},
},
],
},
}
```
#### 屏蔽组件在设计器中的操作按钮
正常情况下，组件允许复制：
如果希望禁止组件的复制行为，我们可以这样做：
```javascript
{
configure: {
component: {
disableBehaviors: ['copy'],
},
},
}
```
#### 实现一个 BackwardSetter
```javascript
{
name: 'back',
title: ' ',
display: 'plain',
setter: BackwardSetter,
}
// BackwardSetter
import { SettingTarget, DynamicSetter } from '@alilc/lowcode-types';
const BackwardSetter: DynamicSetter = (target: SettingTarget) => {
return {
componentName: (
),
};
};
```
### 高级配置
#### 不展现一个 prop 配置
- 始终隐藏当前 prop
```javascript
{
// 始终隐藏当前 prop 配置
condition: () => false,
}
```
- 根据其它 prop 的值展示/隐藏当前 prop
```javascript
{
// direction 为 hoz 则展示当前 prop 配置
condition: (target) => {
return target.getProps().getPropValue('direction') === 'hoz';
}
}
```
#### props 联动
```javascript
// 根据当前 prop 的值动态设置其它 prop 的值
{
name: 'labelAlign',
// ...
extraProps: {
setValue: (target, value) => {
if (value === 'inset') {
target.getProps().setPropValue('labelCol', null);
target.getProps().setPropValue('wrapperCol', null);
} else if (value === 'left') {
target.getProps().setPropValue('labelCol', { fixedSpan: 4 });
target.getProps().setPropValue('wrapperCol', null);
}
return target.getProps().setPropValue('labelAlign', value);
},
},
}
// 根据其它 prop 的值来设置当前 prop 的值
{
name: 'status',
// ...
extraProps: {
getValue: (target) => {
const isPreview = target.getProps().getPropValue('isPreview');
return isPreview ? 'readonly' : 'editable';
}
}
}
```
#### 动态 setter 配置
可以通过 DynamicSetter 传入的 target 获取一些引擎暴露的数据，例如当前有哪些组件被加载到引擎中，将这个数据作为 SelectSetter 的选项，让用户选择：
```javascript
{
setter: (target) => {
return {
componentName: 'SelectSetter',
props: {
options: target.designer.props.componentMetadatas.filter(
(item) => item.isFormItemComponent).map(
(item) => {
return {
title: item.title || item.componentName,
value: item.componentName,
};
}
),
),
},
};
}
}
```
================================================
FILE: docs/docs/guide/expand/editor/parts/_category_.json
================================================
{
"label": "Parts 造物",
"position": 1
}
================================================
FILE: docs/docs/guide/expand/editor/parts/partsIntro.md
================================================
---
title: 介绍
sidebar_position: 1
---
## 介绍
「Parts·造物」是基于开源低代码引擎打造的次时代物料研发和集成工具，一方面作为低代码引擎搭建低代码平台的一个样板展示开源生态下的各个组件如何集合在一起形成生产力，另一方面也可以生产低代码平台所需的物料。
目前「Parts·造物」主要提供两大产品功能：
1. React 组件导入低代码引擎：通过在线可视化的「物料描述」配置，任意工具开发的 React 组件都可以快速完成对低代码引擎的适配，导入到低代码引擎项目中进行使用。不必额外开发新的组件。
2. 低代码生产组件：通过低代码的形式生产组件，极低上手门槛，提供丰富的原子组件用于组合，完善的调试预览和组件生命周期控制。生产的组件既可以在低代码引擎项目中使用，也可以出码后在普通源码项目中使用。
## 联系我们
================================================
FILE: docs/docs/guide/expand/editor/parts/partsassets.md
================================================
---
title: 资产包管理
sidebar_position: 4
---
## 介绍
通过前述介绍，相信大家已经了解如何使用「[Parts·造物](https://parts.lowcode-engine.cn/)」来将已有的 React 组件快速接入低代码引擎，以及生产低代码组件。
大家在使用的过程中，可能会希望构建出来的资产包可以后续随时访问下载，或者希望构建资产包时各个组件的版本等信息可以持久化起来并且能够多人维护。
通过「[Parts·造物](https://parts.lowcode-engine.cn/)」的 `资产包` 管理功能帮助大家解决这个问题
## 新建资产包
首先，我们在 我的资产包 tab 中点击 `新建资产包`
- 填写资产包名称
- 配置资产包管理员，管理员拥有该资产包的所有权限，初始默认为资产包的创建者，还可以添加其他人作为管理员，
- 配置资产包描述 (可选)
- 点击 `确定`, 即可完成资产包的创建
接下来需要为资产包添加一个或者多个组件。
## 添加组件
第二步：新建完资产包以后，我们就可以为其添加组件了，如果是新建资产包流程，新建完成之后会自动弹出组件配置的弹窗，当然，你可可以通过点击资产包卡片的方式打开组件配置的弹窗。
- 点击弹窗中 `添加组件` 按钮，在弹出的组件选择面板中，选中需要添加的组件并点击 `下一步`。
- 进入组件版本以及描述协议版本选择界面，选择所需要的正确版本，点击 `安装` 即可完成一个组件的添加。
## 构建资产包
添加完组件以后就点击 `保存并构建资产包` 进入资产包构建配置弹窗
- `开启缓存` : 可充分利用之前的构建结果缓存来加速资产包的生成，我们会将每个组件的构建结果以 包名和版本号为 key 进行缓存。
- `任务描述` : 当前构建任务的一些描述信息。
点击 `确认` 按钮 会自动跳转到当前资产包的构建历史界面：
构建历史界面会显示当前资产包所有的构建历史记录，表格状态栏展示了构建的状态：`成功`,`失败`,`正在运行` 三种状态，操作列可以在构建成功时复制或者下载资产包结果
## 使用资产包
你可以在 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 中直接引用，可直接替换 demo 中原来的资产包文件：
例如，在 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/services/assets.json)，即可快速使用自己的物料了。
### 在编辑器中使用资产包
在使用含有低代码组件的资产包注意 注意引擎版本必须大于等于 `1.1.0-beta.9`。
然后直接替换 [lowcode-demo](https://github.com/alibaba/lowcode-demo) demo 中的 `assets.json` 文件即可。
### 在预览中使用资产包
在预览中使用资产包的整体思路是从 `资产包` 中提取并转换出 `ReactRenderer` 渲染所需要的 react 组件列表 (`components` 参数)，然后将 `schema` 以及 `components` 传入到 `ReactRenderer` 中进行渲染，需要注意的是，在 `资产包` 的转换过程中，我们也需要将 `低代码组件` 转换成 react 组件，具体逻辑可以参考下 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中 `src/parse-assets.ts` 文件的实现。
基于资产包进行预览的整体逻辑如下： [详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/preview.tsx)：
```ts
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Loading } from '@alifd/next';
import ReactRenderer from '@alilc/lowcode-react-renderer';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler';
import {
getProjectSchemaFromLocalStorage,
} from './services/mockService';
import assets from './services/assets.json';
import { parseAssets } from './parse-assets';
const getScenarioName = function () {
if (location.search) {
return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
}
return 'index';
};
const SamplePreview = () => {
const [data, setData] = useState({});
async function init() {
const scenarioName = getScenarioName();
const projectSchema = getProjectSchemaFromLocalStorage(scenarioName);
const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
const schema = componentsTree[0];
const componentsMap: any = {};
componentsMapArray.forEach((component: any) => {
componentsMap[component.componentName] = component;
});
// 特别提醒重点注意！！！：从资产包中解析出所有的 react 组件列表
const { components } = await parseAssets(assets);
setData({
schema,
components,
});
}
const { schema, components } = data;
if (!schema || !components) {
init();
return
================================================
FILE: docs/docs/guide/expand/editor/parts/partslcc.md
================================================
---
title: 低代码组件
sidebar_position: 2
---
## 什么是低代码组件
我们先了解一下什么是低代码组件，为什么要用低代码组件。
低代码组件是通过可视化的方式生产的组件，这些组件既可以用于低代码搭建体系，也可以用于 ProCode 开发体系（后续迭代）。
那么为什么我们要使用低代码的形式来开发组件：
* 首先：轻快，低代码组件只需通过浏览器秒级完成初始化工作，不需要 ProCode 繁重的环境准备；环境一致（低代码环境），同时能够保证物料的开发环境和真实的运行环境是一致的，不会存在开发和运行环境不一致的问题。
* 其次：通用能力可视化方式抽象，提升研发效能，比如获取远程数据、视图开发、依赖管理、生命周期、事件绑定等功能。
低代码组件不是用来替代 ProCode 的开发方式，而是让开发者可以从 ProCode 中重复的工作脱离出来，抽象更多业务垂直的能力，从而起到提效的作用。
## 创建组件
环境准备：我们可以通过 Parts 提供的通用[低代码组件开发环境](https://parts.lowcode-engine.cn/material#/)开发。
点击开发新组件 --> 填写组件标题 --> 填写组件名称 --> 点击确定，完成组件创建工作。
## 组件开发
一张图速览低代码组件开发的功能模块，其中大部分功能可以参考[低代码引擎文档](https://lowcode-engine.cn/site/docs/guide/quickStart/intro)。
### 依赖管理
依赖管理用于管理低代码组件本身的依赖（类似于 dependencies）。步骤：点击添加组件 --> 选择安装的组件 --> 保存并构建 (需要等待几分钟构建)。
### 属性定义
用于定义组件接收外部传入的 propTypes，组件内部可以通过this.props.${属性名称}的方式获取属性值。
属性定义前建议先阅读 [物料描述详解](https://lowcode-engine.cn/site/docs/guide/expand/editor/metaSpec)、[预置设置器](https://lowcode-engine.cn/site/docs/guide/appendix/setters)。
### 生命周期
低代码组件的开发支持 componentDidMount、componentDidUpdate、componentDidCatch、componentWillUnmount 几个生命周期
### 组件调试
我们提供了一套线上实时调试的方案，只需点击右上角的调试按钮，就能自动创建一个低代码应用，在这个应用中可以实时调试当前的低代码组件。
在低代码应用中使用，组件面板 --> 低代码组件，找到对应的低代码组件拖入画布即可。
### 组件发布
同时我们提供了组件发布的功能，用于组件版本管理，点击右上角的发布按钮即可发布组件
## 组件使用
组件的消费是通过资产包来管理的，详情请参考 [资产包管理](./partsassets)。
## 组件导出
开发好的低代码组件可以导出成为 React 组件，脱离低代码引擎独立使用。同时导出功能也为您的组件留出一份备份，您可以放心使用本产品的服务，而不用担心万一出现的不能服务的场景。
在物料列表页面，低代码组件会有一个导出的动作。
点击导出后，就会开启导出低代码组件的过程。这个过程持续 10s+，导出完成后会为您自动下载对应的 zip 包。
zip 包解压后可以看到一个完整的组件脚手架工程，您可以在这个工程里继续开发调试，或者发布到合适的 npm 源中。
注意：目前导出功能暂不支持 低代码组件嵌套。
## 联系我们
================================================
FILE: docs/docs/guide/expand/editor/parts/prototype.md
================================================
---
title: React 组件导入
sidebar_position: 3
---
## 介绍
大家在使用[低代码引擎](https://lowcode-engine.cn/)构建低代码应用平台时，遇到的一个主要问题是如何让已有的 React 组件能够快速低成本地接入进来。这个问题拆解下来主要包括两个子问题：
1. 如何给已有组件[配置物料描述](/site/docs/specs/material-spec)，
2. 如何构建出一个低代码引擎能够识别的资产包 (Assets)。
我们的产品「[Parts·造物](https://parts.lowcode-engine.cn/)」可以帮助大家解决这个问题。我们通过在线可视化的方式完成物料描述配置，并且提供一键打包的功能生成引擎可以识别的资产包。
## 导入物料
首先，我们需要在 [物料管理](/site/docs/specs/material-spec) 页面导入我们需要进行在线物料描述配置的物料。
- 点击列表左上方的 导入已有物料 按钮
- 在弹框中输入 npm 包名
- 点击 获取包信息 按钮，获取 npm 包基本信息
- 点击确定，导入成功
## 配置管理
第二步：物料导入以后，我们就可以为导入的物料新增[物料描述配置](/site/docs/specs/material-spec)，点击右侧的组件配置开始配置。
### 新增配置
- 点击配置管理右上角的 新增配置
- 选择组件的版本号
- 填写组件路径，一般和 npm 包的 package.json 里的 main 字段相同（如果填写错误，后面会渲染不出来）
- 描述字段用于给这份配置增加一些备注信息。
为了降低配置成本，第一次新增配置的时候会自动解析组件代码，生成一份初始化组件物料描述。所以需要等待片刻，用于代码解析。解析完成后，点击配置按钮即可进入在线配置界面。
### 组件描述配置
操作界面如下，接下来讲具体的配置流程
#### 新增组件
如果新增配置的过程中，代码自动解析失败或者解析出来的组件列表不满足开发要求，我们可以点击左侧组件列表插件 新增 按钮，添加新的组件，具体的字段描述可以参考提示内容，以 [react-color](https://github.com/casesandberg/react-color) 为例：
#### 给组件增加物料描述
- 打开左侧 Setter 面板
- 按照组件的属性拖入需要 Setter 类型（如图中组件的 width 属性，拖入数字 Setter）
- 各种 Setter 的介绍可以参看这篇文档：[预置设置器列表](/site/docs/guide/appendix/setters)
- 配置属性的基本信息（如图所示）
- 配置完成后点击右上角的保存
#### 高级配置（属性联动）
举个栗子：如图所示，如果期望“设置器”这个配置项的值“被修改”的时候，下面的“默认值”跟着变化。
如何使用
组件的属性配置目前支持 3 个基本的联动函数：
- 显示状态：返回 true | false，如果返回 true，表示组件配置显示，否则配置时不显示
- 获取值：当调用该配置节点的 getValue 方法时触发的方法
- 值变化：当调用该配置节点的 setValue 方法时触发的方法
方法的第一个参数都是当前配置节点的对象，常用到的有以下几个：
- getValue(): 获取当前节点的值，如果当前节点是子节点的话，否则为 undefined
- setValue(): 设置当前节点的值，如果当前节点是子节点的话
- parent: 当前节点的父节点
- getPropValue(propName): 父节点获取子节点的属性值，propName 为子节点的属性名称
- setPropValue(propName, value): 父节点设置子节点的属性值，propName 为子节点的属性名称，value 为设置的值
- getConfig: 获取当前节点的配置，如 title、setter 等
#### 调试物料描述
点击右上角的预览按钮，开始调试我们刚刚配置的属性，如果是组件的首次预览，会有一段组件构建的过程（构建出 umd 包的过程），构建完成后就可以调试我们的配置了。
#### 发布物料描述
物料描述调试没问题后，就可以到项目中去使用了，使用前需要先发布物料描述
- 点击右上角的发布按钮
- 选择需要发布的组件
- 点击确定发布完成
## 资产包
第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。
#### 资产包构建
有两种方式可以构建资产包：
- 一种是通过 [`我的资产包`] 资产包管理模块进行整个资产包生命周期的管理，当然也包括资产包的构建，可参考 [资产包管理](./partsassets)
- 一种是通过 [`我的物料`] 组件物料管理模块的 `资产包构建` 进行构建, 具体操作如下：
- 选择需要构建的组件
- 点击构建资产包按钮
- 选择刚刚的物料描述配置
- 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了
#### 资产包使用
详情请参考 [资产包管理](./partsassets#使用资产包)
## 联系我们
================================================
FILE: docs/docs/guide/expand/editor/pluginContextMenu.md
================================================
---
title: 插件扩展 - 编排扩展
sidebar_position: 6
---
## 场景一：扩展选中节点操作项
### 增加节点操作项
选中节点后，在选中框的右上角有操作按钮，编排模块默认实现了查看组件直系父节点、复制节点和删除节点按钮外，还可以通过相关 API 来扩展更多操作，如下代码：
```typescript
import { plugins } from '@alilc/lowcode-engine';
import { IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types';
import { Icon, Message } from '@alifd/next';
const addHelloAction = (ctx: IPublicModelPluginContext) => {
return {
async init() {
ctx.material.addBuiltinComponentAction({
name: 'hello',
content: {
icon: demo
,
});
ctx.logger.log('打个日志');
},
destroy() {
console.log('我被销毁了~');
},
};
};
pluginA.pluginName = 'pluginA';
plugins.register(pluginA, { key: 'test' });
```
> 如果您想了解抽取出来的插件如何封装成为一个 npm 包并提供给社区，可以参考[“低代码生态脚手架 & 调试机制”](./cli)章节。
## 面板插件配置说明
面板插件是作用于设计器的，主要是通过按钮、图标等展示在设计器的骨架中。设计器的骨架我们分为下面的几个区域，而我们的插件大多数都是作用于这几个区域的。
### 展示区域 area
#### topArea
展示在设计器的顶部区域，常见的相关区域的插件主要是：、
1. 注册设计器 Logo；
2. 设计器操作回退和撤销按钮；
3. 全局操作按钮，例如：保存、预览等；
#### leftArea
左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。
该区域相关插件的主要有：
1. 大纲树展示，展示该设计器设计页面的大纲。
2. 组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。
3. 数据源面板
4. JS 等代码面板。
可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。
#### centerArea
画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有：
1. 画布大小修改
2. 物料选中扩展区域修改
#### rightArea
右侧区域，常用于组件的配置。常见的扩展有：统一处理组件的配置项，例如统一删除某一个配置项，统一添加某一个配置项的。
#### toolbar
跟 topArea 类似，按需放置面板插件~
### 展示形式 type
#### PanelDock
PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。
下图是组件库插件的展示效果。
其中右上角可以进行固定，可以对弹出的宽度做设定
接入可以参考代码
```javascript
import { skeleton } from '@alilc/lowcode-engine';
skeleton.add({
area: 'leftArea', // 插件区域
type: 'PanelDock', // 插件类型，弹出面板
name: 'sourceEditor',
content: SourceEditor, // 插件组件实例
props: {
align: "left",
icon: "wenjian",
description: "JS 面板",
},
panelProps: {
floatable: true, // 是否可浮动
height: 300,
hideTitleBar: false,
maxHeight: 800,
maxWidth: 1200,
title: "JS 面板",
width: 600,
},
});
```
#### Widget
Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。
接入可以参考代码：
```javascript
import { skeleton } from '@alilc/lowcode-engine';
// 注册 logo 面板
skeleton.add({
area: 'topArea',
type: 'Widget',
name: 'logo',
content: Logo, // Widget 组件实例
contentProps: { // Widget 插件 props
logo:
"https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png",
href: "/",
},
props: {
align: 'left',
width: 100,
},
});
```
#### Dock
一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景。
```javascript
import { skeleton } from '@alilc/lowcode-engine';
skeleton.add({
area: 'leftArea',
type: 'Dock',
name: 'opener',
props: {
icon: Icon, // Icon 组件实例
align: 'bottom',
onClick: function () {
// 打开外部链接
window.open('https://lowcode-engine.cn');
// 显示 widget
skeleton.showWidget('xxx');
}
}
});
```
#### Panel
一般不建议单独使用，通过 PanelDock 使用~
## 实际案例
### 页面管理面板
- 仓库地址：[https://github.com/mark-ck/lowcode-portal](https://github.com/mark-ck/lowcode-portal)
- 具体代码：[https://github.com/mark-ck/lowcode-portal/blob/master/src/plugins/pages-plugin/index.tsx](https://github.com/mark-ck/lowcode-portal/blob/master/src/plugins/pages-plugin/index.tsx)
- 直播回放：
- [低代码引擎项目实战 (4)-自定义插件 - 页面管理](https://www.bilibili.com/video/BV17a411i73f/)
- [低代码引擎项目实战 (4)-自定义插件 - 页面管理 - 后端](https://www.bilibili.com/video/BV1uZ4y1U7Ly/)
- [低代码引擎项目实战 (4)-自定义插件 - 页面管理 - 前端](https://www.bilibili.com/video/BV1Yq4y1a74P/)
- [低代码引擎项目实战 (4)-自定义插件 - 页面管理 - 完结](https://www.bilibili.com/video/BV13Y4y1e7EV/)
### 区块面板
- 仓库地址：[https://github.com/alibaba/lowcode-plugins](https://github.com/alibaba/lowcode-plugins)
- 具体代码：[https://github.com/alibaba/lowcode-plugins/tree/main/packages/plugin-block](https://github.com/alibaba/lowcode-plugins/tree/main/packages/plugin-block)
- 直播回放：
- [低代码引擎项目实战 (9)-区块管理 (1)-保存为区块](https://www.bilibili.com/video/BV1YF411M7RK/)
- [低代码引擎项目实战 (10)-区块管理 - 区块面板](https://www.bilibili.com/video/BV1FB4y1S7tu/)
- [阿里巴巴低代码引擎项目实战 (11)-区块管理 - ICON 优化](https://www.bilibili.com/video/BV1zr4y1H7Km/)
- [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 自动截图](https://www.bilibili.com/video/BV1GZ4y117VH/)
- [阿里巴巴低代码引擎项目实战 (11)-区块管理 - 样式优化](https://www.bilibili.com/video/BV1Pi4y1S7ZT/)
- [阿里低代码引擎项目实战 (12)-区块管理 (完结)-给引擎插件提个 PR](https://www.bilibili.com/video/BV1hB4y1277o/)
================================================
FILE: docs/docs/guide/expand/editor/setter.md
================================================
---
title: 设置器扩展
sidebar_position: 7
---
## 设置器简述
设置器主要用于低代码组件属性值的设置，顾名思义叫"设置器"，又称为 Setter。由于组件的属性有各种类型，需要有与之对应的设置器支持，每一个设置器对应一个值的类型。
### 设计器展示位置
设置器展示在编辑器的右边区域，如下图：
其中包含四类设置器：
- 属性：展示该物料常规的属性
- 样式：展示该物料样式的属性
- 事件：如果该物料有声明事件，则会出现事件面板，用于绑定事件。
- 高级：两个逻辑相关的属性，**条件渲染**和**循环**
### 设置器类型
上述区域中是有多项设置器的，对于一个组件来说，每一项配置都对应一个设置器，比如我们的配置是一个文本，我们需要的是文本设置器，我们需要配置的是数字，我们需要的就是数字设置器。
下图中的标题和按钮类型配置就分别是文本设置器和下拉框设置器。
我们提供了常用的设置器作为内置设置器，也提供了定制能力帮助大家开发特定需求的设置器。
## 为物料配置设置器
我们提供了[常用的设置器](/site/docs/guide/appendix/setters)作为内置设置器。
我们可以将目标组件的属性值类型值配置到物料资源配置文件中：
```json
{
"componentName": "Message",
"title": "Message",
"configure": {
"props": [
{
"name": "type",
"setter": "InputSetter"
}
]
}
}
```
props 字段是入料模块扫描自动填入的类型，用户可以通过 configure 节点进行配置通过 override 节点对属性的声明重新定义，setter 就是注册在引擎中的 setter。
为物料配置引擎内置的 setter 时，均可以使用对应 setter 的高级功能，对应功能参考“全部内置设置器”章节下的对应 setter 文章。
### 对高级功能的配置如下：
例如我们需要在 NumberSetter 中配置 units 属性，可以在 asset.json 中声明。
```json
"configure": {
"component": {
"isContainer": true,
"nestingRule": {
"parentWhitelist": [
"NextP"
]
}
},
"props": [
{
"name": "width",
"title": "宽度",
"initialValue": "auto",
"defaultValue": "auto",
"condition": {
"type": "JSFunction",
"value": "() => false"
},
"setter": {
"componentName": "NumberSetter",
"props": {
"units": [
{
"type": "px",
"list": true
},
{
"type": "%",
"list": true
}
]
}
}
},
],
"supports": {
"style": true
}
},
```
## 自定义设置器
### 编写 AltStringSetter
我们编写一个简单的 Setter，它的功能如下：
**代码如下：**
```tsx
import * as React from "react";
import { Input } from "@alifd/next";
import "./index.scss";
interface AltStringSetterProps {
// 当前值
value: string;
// 默认值
defaultValue: string;
// setter 唯一输出
onChange: (val: string) => void;
// AltStringSetter 特殊配置
placeholder: string;
}
export default class AltStringSetter extends React.PureComponent**对于 Window 环境来说，之后所有需要执行命令的操作都是在 WSL 终端执行的。** ### Node node 版本推荐 16.18.0。 #### 查看 Node 版本  #### 通过 n 来管理 node 版本 可以安装 [n](https://www.npmjs.com/package/n) 来管理和变更 node 版本。 ##### 安装 n ```bash npm install -g n ``` ##### 变更 node 版本 ```bash n 14.17.0 ``` ### React 低代码引擎的扩展能力都是基于 React 来研发的，在继续阅读之前最好有一定的 React 基础，React 学习教程 ➡️ [React 快速开始教程](https://zh-hans.reactjs.org/docs/getting-started.html)。 ### 下载 Demo 可以前往 github（
这是一个 Demo 面板
,
});
ctx.logger.log('打个日志');
},
};
};
// 插件名，注册环境下唯一
LowcodePluginPluginDemo.pluginName = 'LowcodePluginPluginDemo';
LowcodePluginPluginDemo.meta = {
// 依赖的插件（插件名数组）
dependencies: [],
engines: {
lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行
},
};
export default LowcodePluginPluginDemo;
```
在 src/index.ts 中新增下面代码
这样在我们的设计器中就新增了一个 Demo 面板。
### 方式 2：在新的仓库下开发插件
初始化
```bash
npm init @alilc/element your-plugin-name
```
选择设计器插件（plugin）
根据操作完善信息
插件项目就初始化完成了
在插件项目下安装依赖
```bash
npm install
```
启动项目
```bash
npm run start
```
调试项目
在 Demo 中调试项目
在 build.json 下面新增 "inject": true，就可以在 [https://lowcode-engine.cn/demo/demo-general/index.html?debug](https://lowcode-engine.cn/demo/demo-general/index.html?debug) 页面下进行调试了。
## 开发一个自定义物料
### 初始化物料
```bash
npm init @alilc/element your-material-demo
```
选择组件/物料栏
配置其他信息
这样我们就初始化好了一个 React 物料。
### 启动并调试物料
#### 安装依赖
```bash
npm i
```
#### 启动
```bash
npm run lowcode:dev
```
我们就可以通过 [http://localhost:3333/](http://localhost:3333/) 看到我们的研发的物料了。
#### 在 Demo 中调试
```bash
npm i @alilc/build-plugin-alt
```
修改 build.lowcode.js
如图，新增如下代码
```javascript
[
'@alilc/build-plugin-alt',
{
type: 'component',
inject: true,
library,
// 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
// 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
openUrl: 'https://lowcode-engine.cn/demo/index.html?debug',
},
],
```
我们重新启动项目，就可以在 Demo 中找到我们的自定义组件。
### 发布
首先进行构建
```bash
npm run lowcode:build
```
发布组件
```bash
npm publish
```
这里我发布的组件是 [my-material-demo](https://www.npmjs.com/package/my-material-demo)。在发布之后我们就会有两个重要的文件：
- 低代码描述：[https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js)
- 组件代码：[https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js)
我们也可以从 [https://unpkg.com/my-material-demo@0.1.0/build/lowcode/assets-prod.json](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/assets-prod.json) 找到我们的资产包描述。
```bash
{
"packages": [
{
"package": "my-material-demo",
"version": "0.1.0",
"library": "BizComp",
"urls": [
"https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js",
"https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.css"
],
"editUrls": [
"https://unpkg.com/my-material-demo@0.1.0/build/lowcode/view.js",
"https://unpkg.com/my-material-demo@0.1.0/build/lowcode/view.css"
],
"advancedUrls": {
"default": [
"https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js",
"https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.css"
]
},
"advancedEditUrls": {}
}
],
"components": [
{
"exportName": "MyMaterialDemoMeta",
"npm": {
"package": "my-material-demo",
"version": "0.1.0"
},
"url": "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js",
"urls": {
"default": "https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js"
},
"advancedUrls": {
"default": [
"https://unpkg.com/my-material-demo@0.1.0/build/lowcode/meta.js"
]
}
}
],
}
```
### 使用
我们将刚刚发布的组件的 assets-prod.json 的内容放到 demo 的 src/universal/assets.json 中。
> 最好放到最后，防止因为资源加载顺序问题导致出现报错。
如图，新增 packages 配置
如图，新增 components 配置
这时候再启动 DEMO 项目，就会有新的低代码物料了。接下来就按照你们的需求，继续扩展物料吧。
## 总结
这里只是简单的介绍了一些低代码引擎的基础能力，带大家简单的对低代码 DEMO 进行扩展，定制一些新的功能。低代码引擎的能力还有很多很多，可以继续去探索更多的功能。
================================================
FILE: docs/docs/participate/code-specification.md
================================================
---
title: 编码规约
sidebar_position: 5
---
编码规约
---
### 命名
- 使用 `PascalCase` 为类型命名
- 使用 `I` 做为接口名前缀
- 使用 `PascalCase` 为枚举值命名
- 使用 `camelCase` 为函数命名
- 使用 `camelCase` 为属性或本地变量命名
- 不要为私有属性名添加 `_` 前缀
- 尽可能使用完整的单词拼写命名
- 文件夹/文件命名统一使用小写 `get-custom-data.ts`
### 组件
- 一个文件对应一个组件或类
### 类型
- 不要随意导出类型/函数，除非你要在不同的组件中共享它
- 不要在全局命名空间内定义类型/值
- 共享的类型应该在 `types.ts` 里定义
- 在一个文件里，类型定义应该出现在顶部
- interface 和 type 很类似，原则上能用 interface 实现，就用 interface , 如果不能才用 type
### 注释
- 为函数，接口，枚举类型和类使用 JSDoc 风格的注释
### 字符串
- 使用单引号 `''`
### 单元测试
- 单元测试文件根据文件目录结构来放置
================================================
FILE: docs/docs/participate/flow.md
================================================
---
title: 研发协作流程
sidebar_position: 2
---
## 代码风格
引擎项目配置了 eslint 和 stylelint，在每次 git commit 前都会检查代码风格，假如有报错，请修改后再提交。（**严禁 -n 提交，-n 也逃脱不了 github workflow 的 lint 检查，放弃吧，骚年~**）
## 测试机制
每次提交代码前，务必本地跑一次单元测试，通过后再提交 MR。
假如涉及新的功能，需要**补充相应的单元测试**，目前引擎核心模块的单测覆盖率都在 80%+，假如降低了覆盖率，将会不予以通过。
跑单测流程：
1. 项目根目录下执行 npm run build
2. 只改了一个包，比如 designer，则在 designer 目录下，执行 npm test
3. （or）改了多个包，则在根目录下执行 npm test
## commit 风格
几点要求：
1. commit message 格式遵循 [ConvensionalCommits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
2. 请按照一个 bugfix / feature 对应一个 commit，假如不是，请 rebase 后再提交 MR，不要一堆无用的、试验性的 commit。
好处：从引擎的整体 commit 历史来看，会很清晰，**每个 commit 完成一件确定的事，changelog 也能自动生成**。另外，假如因为某个 commit 导致了 bug，也很容易通过 rebase drop 等方式快速修复。
## 分支用途
- main 分支，最稳定的分支，跟 npm latest 包的内容保持一致
- develop 分支，开发分支，拥有最新的、已经验证过的 feature / bugfix，Pull Request 的**目标合入分支**
- release 分支
- 正式发布分支，命名规则为 release/x.y.z，一般从 develop 拉出来进行发布，x.y.z 为待发布的版本号
- beta 发布分支，命名规则为 release/x.y.z-beta(\.\d+)?，可以快速验证修改，发布 npm beta 版本。
验证通过后，因为 beta 发布分支上会存在无用的 commit（比如 lerna 修改 package.json 这种），所以不直接 PR 到 develop，而是从 develop 拉分支，从 beta 发布分支 cherry pick 有用的 commit 到新分支，然后 PR 到 develop。
## 引擎发布机制
日常迭代先从 develop 拉分支，然后自测、单测通过后，提交 PR 到 develop 分支，由发布负责人基于 develop 拉 release/1.0.z 分支~
### 版本规划
> 此处是理想节奏，实际情况可能会有调整
- 日常迭代 2 周，一般月中或月底，发版日两天前发最后一个 beta 版本，原则上不接受新 pr，灰度 2 天后，发正式版。
- 特殊情况紧急迭代随时发
- 大 Feature 迭代，每年 2 - 4 次
### 发布步骤
> **发布需要权限，如果提 PR 之后着急发布可以**[**加入贡献者交流群**](../participate/#核心贡献者交流)**。**
#### 发正式版
步骤如下（以发布 1.0.0 版本为例）：
1. git checkout develop
```bash
git checkout develop
```
2. 创建 release 分支
```bash
git checkout -b release/1.0.0
```
3. build
```bash
npm run build
```
4. 发布到 npm
```bash
npm run pub
```
5. 同步到 tnpm 源 & alifd CDN & uipaas CDN（此步骤将发布在 npm 源的包同步到阿里内网源，因为 alifd cdn 将依赖内网 npm 源）
```bash
tnpm run sync
tnpm run syncOss
```
6. 更新[发布日志](https://github.com/alibaba/lowcode-engine/releases)
7. 合并 release/x.x.x 到 main 分支
8. 合并 main 分支到 develop 分支
如果是发布 beta 版本，步骤如下（以发布 1.0.1 版本为例）：
#### 发某 y 位版本首个 beta，如 1.1.0-beta.0
1. 拉 develop 分支
```bash
git checkout develop
```
更新到最新（如需）
```bash
git pull
```
2. 拉 release 分支，此处以 1.1.0 版本做示例
```bash
git checkout -b release/1.1.0-beta
git push --set-upstream origin release/1.1.0-beta
```
3. build
```bash
npm run build
```
4. 发布，此处需有 @alilc scope 发包权限
```bash
npm run pub:preminor
```
5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
```bash
tnpm run sync
tnpm run syncOss
```
#### 发某 z 位版本首个 beta，如 1.0.1-beta.0
1. 拉 develop 分支
```bash
git checkout develop
```
更新到最新（如需）
```bash
git pull
```
2. 拉 release 分支，此处以 1.0.1 版本做示例
```bash
git checkout -b release/1.0.1-beta
git push --set-upstream origin release/1.0.1-beta
```
3. build
```bash
npm run build
```
4. 发布，此处需有 @alilc scope 发包权限
```bash
npm run pub:prepatch
```
5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
```bash
tnpm run sync
tnpm run syncOss
```
#### 发某版本非首个 beta，如 1.0.1-beta.0 -> 1.0.1-beta.1
1. 切换到 release 分支
```bash
git checkout release/1.0.1-beta
```
2. 更新到 develop 分支最新代码
```bash
git rebase origin/develop
```
3. build
```bash
npm run build
```
4. 发布，此处需有 @alilc scope 发包权限 ***此处命令与发首个 beta 时有变化***
```bash
npm run pub:prerelease
```
5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
```bash
tnpm run sync
tnpm run syncOss
```
## DEMO 发布机制
1. **修改版本号**
手动修改 package.json 的版本号
2. **build**
```bash
npm run build
```
3. publish（此步骤需要 npm 发包权限）
```bash
npm run pub
```
如发 beta 版
```bash
npm publish --tag beta
```
4. 同步到 tnpm 源 & alifd CDN & uipaas CDN
```bash
tnpm run sync
tnpm run syncOss
```
**官网生效**
需要在通过阿里内部系统更新 demo 版本
================================================
FILE: docs/docs/participate/index.md
================================================
---
title: 参与贡献
sidebar_position: 0
---
### 环境准备
开发 LowcodeEngine 需要 Node.js 16+。
推荐使用 nvm 管理 Node.js，避免权限问题的同时，还能够随时切换当前使用的 Node.js 的版本。
### 贡献低代码引擎
#### clone 项目
```
git clone git@github.com:alibaba/lowcode-engine.git
cd lowcode-engine
```
#### 安装依赖并构建
```
npm install && npm run setup
```
#### 调试环境配置
本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目，可以使用趁手的代理工具，这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。
本地开发代理规则如下：
```json
{
"proxy": [
[
"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/engine-core.js",
"http://localhost:5555/js/AliLowCodeEngine.js"
],
[
"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/engine-core.css",
"http://localhost:5555/css/AliLowCodeEngine.css"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js",
"http://localhost:5555/js/ReactSimulatorRenderer.js"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css",
"http://localhost:5555/css/ReactSimulatorRenderer.css"
]
]
}
```
#### 开发
```
npm start
```
选择一个环境进行调试，例如[低代码引擎在线 DEMO](https://lowcode-engine.cn/demo/demo-general/index.html)
开启代理之后，就可以进行开发调试了。
### 贡献低代码引擎文档
#### 开发文档
在 lowcode-engine 目录下执行下面命令
```
cd docs
npm start
```
#### 维护方式
- 官方文档通过 github 管理文档源，官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。
- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。
- 欢迎 PR，文档 PR 也会作为贡献者贡献，会用于贡献度统计。
- **文档同步到官方网站由官方人员进行操作**，如有需要可以通过 issue 或 贡献者群与相关人员沟通。
- 为了提供更好的阅读和使用体验，文档中的图片文件会定期转换成可信的 CDN 地址。
#### 文档格式
本项目文档参考[文档编写指南](https://github.com/sparanoid/chinese-copywriting-guidelines)。
使用 vscode 进行编辑的朋友可以安装 vscode 插件 [huacnlee.autocorrect](https://github.com/huacnlee/autocorrect) 辅助文档 lint。
### 贡献低代码引擎生态
相关源码详见[NPM 包对应源码位置汇总](/site/docs/guide/appendix/npms)
开发调试方式详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli)
### 发布
PR 被合并之后，我们会尽快发布相关的正式版本或者 beta 版本。
### 加入 Contributor 群
提交过 Bugfix 或 Feature 类 PR 的同学，如果有兴趣一起参与维护 LowcodeEngine，我们提供了一个核心贡献者交流群。
1. 可以通过[填写问卷](https://survey.taobao.com/apps/zhiliao/4YEtu9gHF)的方式，参与到其中。
2. 填写问卷后加微信号 `wxidvlalalalal` （注明 github id）我们会拉你到群里。
如果你不知道可以贡献什么，可以到源码里搜 TODO 或 FIXME 找找。
为了使你能够快速上手和熟悉贡献流程，我们这里有个列表 [good first issues](https://github.com/alibaba/lowcode-engine/issues?q=is:open+is:issue+label:%22good+first+issue%22)，里面有相对没那么笼统的漏洞，从这开始是个不错的选择。
### PR 提交注意事项
- lowcode-engine 仓库建议从 develop 创建分支，PR 指向 develop 分支。
- 其他仓库从 main 分支创建分支，PR 指向 main 分支
- 如果你修复了 bug 或者添加了代码，而这些内容需要测试，请添加测试！
- 确保通过测试套件（yarn test）。
- 请签订贡献者许可证协议（Contributor License Agreement）。
> 如已签署 CLA 仍被提示需要签署，[解决办法](/site/docs/faq/faq021)
================================================
FILE: docs/docs/participate/meet.md
================================================
---
title: 开源社区例会
sidebar_position: 0
---
## **简介**
低代码引擎开源社区致力于共同推动低代码技术的发展和创新。本社区汇集了低代码技术领域的开发者、技术专家和行业观察者，通过定期的例会来交流思想、分享经验、讨论新技术，并探索低代码技术的未来发展方向。
## 参与要求
为了确保例会的质量和效果，我们建议以下人员参加：
- **已参与低代码引擎贡献的成员**：那些对低代码引擎有实际贡献的社区成员。
- **参考贡献指南**：可查阅[贡献指南](https://lowcode-engine.cn/site/docs/participate/)获取更多信息。
- **提供过优秀建议的成员**：那些在过去为低代码引擎提供过有价值建议的成员。
## **时间周期**
- **周期性**：月例会
### **特别说明**
- 例会周期可根据成员反馈进行调整。如果讨论的议题较多，可增加例会频率；若议题较少，单次例会可能取消。若多次取消，可能会暂停例会。
## **例会流程**
### **准备阶段**
- **定期确定议题**：会前一周确定下一次会议的议题。
- **分发会议通知**：提前发送会议时间、议程和参与方式。
### **会议阶段**
- **开场和介绍**：简短开场和自我介绍，特别是新成员加入时。
- **议题讨论**：按照议程进行议题讨论，每个议题分配一定时间，并留足够时间供讨论和提问。
- **记录要点和决定**：记录讨论要点、决策和任何行动事项。
### **后续阶段**
- **分享会议纪要**：会后将会议纪要和行动计划分发给所有成员。
- **执行和跟进**：根据会议中的讨论和决策执行相关任务，并在下次会议中进行跟进汇报。
## **开源例会议题**
开源例会议题包括但不限于：
- **共建低代码行业发展**：探讨通过开源社区合作加速低代码行业发展。
- **改进建议和反馈收集**：讨论社区成员对低代码引擎的使用体验和改进建议。
- **前端技术与低代码的结合**：针对前端开发者，讨论将前端技术与低代码引擎结合的方式。
- **低代码业务场景和经验分享**：邀请社区成员分享低代码引擎的实际应用经验。
- **低代码技术原理介绍**：深入理解低代码引擎的技术原理和实现方式。
- **低代码引擎的最新进展**：分享低代码引擎的最新进展，包括新版本发布和新功能实现等。
- **低代码技术的未来展望**：讨论低代码技术的未来发展方向。
- **最新低代码平台功能和趋势分析**：分享和讨论当前低代码平台的新功能、趋势和发展方向。
================================================
FILE: docs/docs/specs/assets-spec.md
================================================
---
title: 《低代码引擎资产包协议规范》
sidebar_position: 2
---
## 1 介绍
### 1.1 本协议规范涉及的问题域
- 定义本协议版本号规范
- 定义本协议中每个子规范需要被支持的 Level
- 定义本协议相关的领域名词
- 定义低代码资产包协议版本号规范（A）
- 定义低代码资产包协议组件及依赖资源描述规范（A）
- 定义低代码资产包协议组件描述资源加载规范（A）
- 定义低代码资产包协议组件在面板展示规范（AA）
### 1.2 协议草案起草人
- 撰写：金禅、璿玑、彼洋
- 审阅：力皓、絮黎、光弘、戊子、潕量、游鹿
### 1.3 版本号
1.1.0
### 1.4 协议版本号规范（A）
本协议采用语义版本号，版本号格式为 `major.minor.patch` 的形式。
- major 是大版本号：用于发布不向下兼容的协议格式修改
- minor 是小版本号：用于发布向下兼容的协议功能新增
- patch 是补丁号：用于发布向下兼容的协议问题修正
### 1.5 协议中子规范 Level 定义
| 规范等级 | 实现要求 |
| -------- | ------------------------------------------------------------ |
| A | 基础规范，低代码引擎核心层支持； |
| AA | 推荐规范，由低代码引擎官方插件、setter 支持。 |
| AAA | 参考规范，需由基于引擎的上层搭建平台支持，实现可参考该规范。 |
### 1.6 名词术语
- **资产包**: 低代码引擎加载资源的动态数据集合，主要包含组件及其依赖的资源、组件低代码描述、动态插件/设置器资源等。
### 1.7 背景
根据低代码引擎的实现，一个组件要在引擎上渲染和配置，需要提供组件的 umd 资源以及组件的`低代码描述`，并且组件通常都是以集合的形式被引擎消费的；除了组件之外，还有组件的依赖资源、引擎的动态插件/设置器等资源也需要注册到引擎中；因此我们定义了“低代码资产包”这个数据结构，来描述引擎所需加载的动态资源的集合。
### 1.8 受众
本协议适用于使用“低代码引擎”构建搭建平台的开发者，通过本协议的定义来进行资源的分类和加载。阅读及使用本协议，需要对低代码搭建平台的交互和实现有一定的了解，对前端开发相关技术栈的熟悉也会有帮助，协议中对通用的前端相关术语不会做进一步的解释说明。
## 2 协议结构
协议最顶层结构如下，包含 7 方面的描述内容：
- version { String } 当前协议版本号
- packages { Array } 低代码编辑器中加载的资源列表
- components { Array } 所有组件的描述协议列表
- sort { Object } 用于描述组件面板中的 tab 和 category
- plugins { Array } 设计器插件描述协议列表
- setters { Array } 设计器中设置器描述协议列表
- extConfig { Object } 平台自定义扩展字段
### 2.1 version (A)
定义当前协议 schema 的版本号；
| 根属性名称 | 类型 | 说明 | 变量支持 | 默认值 |
| ---------- | ------ | ---------- | -------- | ------ |
| version | String | 协议版本号 | - | 1.1.0 |
### 2.2 packages (A)
定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等；
| 字段 | 字段描述 | 字段类型 | 规范等级 | 备注 |
| -------------------- | --------------------------------------------------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------- |
| packages[].id? | 资源唯一标识 | String | A | 资源唯一标识，如果为空，则以 package 为唯一标识 |
| packages[].title? | 资源标题 | String | A | 资源标题 |
| packages[].package | npm 包名 | String | A | 组件资源唯一标识 |
| packages[].version | npm 包版本号 | String | A | 组件资源版本号 |
| packages[].type | 资源包类型 | String | AA | 取值为: proCode（源码）、lowCode（低代码，默认为 proCode |
| packages[].schema | 低代码组件 schema 内容 | object | AA | 取值为: proCode（源码）、lowCode（低代码） |
| packages[].deps | 当前资源包的依赖资源的唯一标识列表 | Array