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.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
> **@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/article/index.md ================================================ # 官方文章 - [2023/11/09 UIPaaS | 基于 LowCodeEngine 的低代码平台孵化器](https://mp.weixin.qq.com/s/mKuv3_Wvgt5T3AGErUGBQQ) - [2023/04/04 什么？低代码引擎可以开发应用了](https://mp.weixin.qq.com/s/dwi40gJjGBHW9MVpag5Oxg) - [2023/03/23 低代码引擎 LowCodeEngine 茁壮成长的一年](https://mp.weixin.qq.com/s/DDt4LQLFUBQ2-F5ehZGBKg) - [2023/02/21 基于 LowCodeEngine 的低代码组件体系的建设和实践](https://mp.weixin.qq.com/s/rnvbGHImGt6oJuX2wCtaqw) - [2022/12/21 低代码多分支协同开发的建设与实践](https://mp.weixin.qq.com/s/DmwxL67htHfTUP1U966N-Q) - [2022/11/24 低代码引擎半岁啦，来跟大家唠唠嗑...](https://segmentfault.com/a/1190000042884409) - [2022/10/27 低代码技术在研发团队的应用模式探讨](https://mp.weixin.qq.com/s/Ynk_wjJbmNw7fEG6UtGZbQ) - [2022/08/23 基于 LowCodeEngine 的调试能力建设与实践](https://mp.weixin.qq.com/s/H8KvEOylmzLPgIuuBO0S9w) - [2022/06/23 低代码渲染那些事](https://mp.weixin.qq.com/s/yqYey76qLGYPfDtpGkVFfA) - [2022/06/16 关于 LowCode&ProCode 混合研发的思考](https://mp.weixin.qq.com/s/TY3VXjkSmsQoT47xma3wig) - [2022/04/07 磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw) - [2022/03/23 阿里低代码引擎 LowCodeEngine 正式开源！](https://mp.weixin.qq.com/s/T66LghtWLz2Oh048XqaniA) - [2022/01/10 阿里低代码引擎和生态建设实战及思考](https://mp.weixin.qq.com/s/MI6MrUKKydtnSdO4xq6jwA) - [2021/04/14 2B 领域下的低代码探索之路](https://mp.weixin.qq.com/s/HAxrMHLT43dPH488RiEIdw) ================================================ FILE: docs/docs/faq/faq001.md ================================================ --- title: build-scripts 的使用文档 sidebar_position: 1 tags: [FAQ] --- build-scripts 是一个开源项目，详见 [https://github.com/ice-lab/build-scripts](https://github.com/ice-lab/build-scripts) ================================================ FILE: docs/docs/faq/faq002.md ================================================ --- title: 渲染唯一标识（key） sidebar_position: 2 tags: [FAQ] --- 渲染唯一标识（key）和 React 中组件的 key 属性的原理是一致的，都是为了在渲染场景或者组件切换的场景中唯一标识一个组件。 你可以在组件右侧配置面板的「高级」中看到此配置项，该配置项一般配合「是否渲染」和「循环」功能使用。  ## 以下场景必需设置「渲染唯一标识」 #### 场景一：同类组件切换 以下场景中，当「爱好」选择「游戏」时显示「最喜欢的游戏」，选择「运动」时显示「最喜欢的运动」  配置方式如下： 1. 增加变量数据源：hobby 2. 「最喜欢的游戏」表单标识设置为 game，「是否渲染」绑定变量「state.hobby === '游戏'」  3. 「最喜欢的运动」表单标识设置为 sport，「是否渲染」绑定变量「state.hobby === '运动'」 4. 「爱好」设置 onChange 动作  5. 「提交」按钮绑定 onClick 动作  按以上配置（不配置渲染唯一标识），确实可以实现切换爱好时下方的文本框切换，但在提交数据时会发现，即使选择了「运动」，提交的时候 sport 字段是「最喜欢的游戏」的值。 原因：在进行文本框组件切换时，由于没有设置 key，底层会「复用」切换之前的组件 以上场景只需要给两个组件配置「渲染唯一标识」即可。 ================================================ FILE: docs/docs/faq/faq003.md ================================================ --- title: 点击事件如何添加参数 sidebar_position: 3 tags: [FAQ] --- 背景： - [Antd Table 下 button 点击事件怎么拿到行数据？](https://github.com/alibaba/lowcode-engine/issues/341) ## 方式 1  参考 fusion protable，将操作列直接耦合 button 组件，因为 col.render 函数能拿到 行数据 record，那么 pro-table 组件封装的时候，就可以在渲染操作列按钮的时候，将 col.render 参数透传给 button 组件 ## 方式 2 slot + 扩展参数  将扩展参数写成： ```json { record: this.record, index: this.index } ``` 那事件处理函数的第二个参数即可得到： ```json onClick_new_new(...args){ console.log(args) } ``` ================================================ FILE: docs/docs/faq/faq004.md ================================================ --- title: 最小渲染单元配置 sidebar_position: 4 tags: [FAQ] --- ## 背景 在低代码引擎画布中，每一个节点的更新是**增量更新**机制。也就是通过 API 监听到组件的参数配置变化的时候，只更新该节点。 一些场景下，父组件需要在子组件的属性变化，获取新的子组件的属性值，也就是从父组件开始渲染。 例如：父组件需要强制修改 children props 值。示例代码如下： ``` React.Children.forEach(children, (child: React.ReactElement) => { // 子元素的参数只有 behavior，且 behavior 为 'READONLY'; const newChild = React.cloneElement(child, { behavior: 'READONLY' }); }) ``` **对于这种场景，需要配置其为“最小渲染单元”****。**即： > **最小渲染单元下的组件渲染和更新都从单元的根节点开始渲染和更新。如果嵌套了多层最小渲染单元，渲染会从最外层的最小渲染单元开始渲染。** ### 组件能力配置 component | **字段** | **用途** | **类型** | | --- | --- | --- | | isContainer(A) | 是否容器组件 | Boolean | | **isMinimalRenderUnit** | **默认值：false** **是否是最小渲染单元** | **Boolean** | | ... | | | #### 配置示例 ##### 标准配置文件 configure.component.isMinimalRenderUnit ```json { "componentName": "Table", "title": "表格", "category": "数据展示", "props": [], "configure": { "supports": { }, "props": [], "component": { // 添加如下配置 "isMinimalRenderUnit": true }, "combined": [] }, "snippets": [], "npm": {} } ``` ## 更新机制说明 1. 没有任何组件被标识为**最小渲染单元**，则是每个组件都伴随自身属性变更而重新渲染； 2. 将根组件标识为**最小渲染单元**，则是整个页面重新渲染； 3. 组件树的分支节点被标识为**最小渲染单元**，则分支节点之下（包括自身）节点属性变更，触发分支节点整体的重新渲染；（若有多个**最小渲染单元**在同一条路径上，从最外层的**最小渲染单元**开始渲染） ================================================ FILE: docs/docs/faq/faq005.md ================================================ --- title: 如何通过 this.utils 使用第三方工具扩展 sidebar_position: 5 tags: [FAQ] --- ## 设计器 ### 通过引擎 API 配置 [API-init](/site/docs/api/init) ### 通过资产包  就可以在引擎代码中访问到 moment  PS：需要在 packages 中有相关的资源配置，例如：  否则在画布中可能会访问不到对应的资源。 ## 预览态 [参考资料](/site/docs/guide/expand/runtime/renderer#apphelper) ================================================ FILE: docs/docs/faq/faq006.md ================================================ --- title: 如何通过 API 手动调用数据源请求 sidebar_position: 6 tags: [FAQ] --- 参考：[DataSource API](/site/docs/demoUsage/appendix/api) ================================================ FILE: docs/docs/faq/faq007.md ================================================ --- title: 设置面板中的高级 tab 如何配置 sidebar_position: 7 tags: [FAQ] ---  默认这个 tab 下的内容为引擎内置，如需要定制，可以使用以下 API [https://lowcode-engine.cn/site/docs/api/material#物料元数据管道函数](https://lowcode-engine.cn/site/docs/api/material#物料元数据管道函数) ================================================ FILE: docs/docs/faq/faq008.md ================================================ --- title: 某某 npm 包对应的源码在哪里？ sidebar_position: 8 tags: [FAQ] --- 详见 [NPM 包对应源码位置汇总](/site/docs/guide/appendix/npms) ================================================ FILE: docs/docs/faq/faq009.md ================================================ --- title: 物料出现 Component Not Found 相关报错 sidebar_position: 9 tags: [FAQ] --- ## 预览态，antd 资产包按顺序加载，但是没有按顺序执行 资产包按顺序加载，但是没有按顺序执行，导致部分 js 执行的时候，依赖的资源没有准备好，报错了。 传给 @alilc/lowcode-react-renderer 的 components 值为空。 **解决方案** LowCodeEngine 升级到 1.0.8 > 相关 PR：[https://github.com/alibaba/lowcode-engine/pull/383](https://github.com/alibaba/lowcode-engine/pull/383) ## 编辑态，snippets 和注入组件不对应 1.在控制台中输入 ```json AliLowCodeEngine.material.componentsMap ``` 查看物料配置是否正常。  如果正常继续。 LowCodeEngine 需要升级到 1.0.10 ```json AliLowCodeEngine.project.simulator.renderer.components ``` 看看对应的物料是否存在，如果不存在，排查物料问题。 如果不正常，查看资产包配置，其中资产包中的 `components` 和 `material.componentsMap` 生成有关系。 例如，物料配置信息在 @alilc/lowcode-materials 包里面，即需要在 components 中加上下面的代码 ```javascript "components": [{ "exportName": "AlilcLowcodeMaterialsMeta", "npm": { "package": "@alilc/lowcode-materials" }, "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js", "urls": { "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js", "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.design.js" } }] ``` `material.componentsMap` 不存在相关的组件信息，原因有两个： - 没有添加对应的物料到 components 字段中 - components 配置不正确，需要查看 url 是否正常加载，查看 exportName 是否配置正确，即 `window.${exportName}` 是否存在。 2.选中组件，在控制台中输入 ```json AliLowCodeEngine.project.currentDocument.selection.getNodes()[0].exportSchema('render') ``` 查看 componentName 是否匹配。 3.调用 rerender 方法 ```json AliLowCodeEngine.project.simulator.rerender() ``` 看一下问题是否恢复。 ## 排查物料问题 找到对应组件的资产包，比如下图的资产包。 ```json { "package": "@yingzhi8/lowcode-public-package", "version": "0.1.2", "library": "BizComps", "urls": [ "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.js", "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.css" ], "editUrls": [ "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/view.js", "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/view.css" ], "advancedUrls": { "default": [ "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.js", "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.css" ] }, "advancedEditUrls": {} } ``` ### 查看 urls 是否加载 通过查看控制台，看加载的 urls ### library 配置是否正确 library 是可以在画布上访问到全局变量，确定 library 是否正确，在控制台输入： ```json AliLowCodeEngine.project.simulator.contentWindow.${library} ``` ================================================ FILE: docs/docs/faq/faq010.md ================================================ --- title: 插件面板如何调整位置 sidebar_position: 10 tags: [FAQ] --- 使用 index 配置来定义位置，内置的默认都是 0 ```json AliLowCodeEngine.skeleton.add({ area: 'leftArea', type: 'PanelDock', name: 'xxx', content: () => 'xxx', index: -1, // 使用 index 来定义位置，内置的默认都是 0 props: { icon: () => 'x' /* ReactElement 也可以 */ }, }); ``` 这里设置 index 为负数，可以将其调整到第一的位置。  ================================================ FILE: docs/docs/faq/faq011.md ================================================ --- title: 如何获取物料当前处于编辑态还是渲染态 sidebar_position: 11 tags: [FAQ] --- ## 简单场景 可以利用 props.__designMode  设计态中，__designMode 值为 "design" 渲染态中，__designMode 没有设置值 ## 复杂场景 在资产包里定义 editUrls  ### editUrls 在 lowcode/xx/ 下新建一个 view.tsx  再执行 ```json npm run lowcode:build ``` 之后，build/lowcode 目录下既有 view.js，可作为 editUrls 配置在资产包中。  ================================================ FILE: docs/docs/faq/faq012.md ================================================ --- title: Procode 物料如何调用数据源方法 sidebar_position: 12 tags: [FAQ] --- ## 解决方案 给物料插入如下配置，可以默认给物料提供 reloadDataSource 的参数。 ```json { title: { label: { type: 'i18n', 'en-US': 'reloadDataSource', 'zh-CN': 'reloadDataSource', }, }, name: 'reloadDataSource', setter: 'StringSetter', initialValue: () => ( { "type": "JSFunction", "value": "function(){ return this.reloadDataSource; }" } ), }, ``` 在物料组件中，即可掉用如下代码来获取到相关方法。 ```json const reloadDataSource = props.getReloadDataSource() ``` ## FAQ ### 希望该配置在配置面板中不展示 在配置中加上 ```json condition: () => false, ``` 完整示例 ```json { title: { label: { type: 'i18n', 'en-US': 'reloadDataSource', 'zh-CN': 'reloadDataSource', }, }, name: 'reloadDataSource', setter: 'StringSetter', condition: () => false, initialValue: () => ( { "type": "JSFunction", "value": "function(){ return this.reloadDataSource; }" } ), }, ``` ### 配置没有生效 查看组件中的 schema，对应的配置是否已经正确设置。  没有正确设置上可能的原因是 1.snippets 中没有默认值 需要按照如下的代码中，加上默认的参数配置 ```json const snippets: Snippet[] = [ { title: 'Field', screenshot: '', schema: { componentName: 'ProField', props: { type: 'textarea', value: '我是测试', getReloadDataSource: { "type": "JSFunction", "value": "function(){ return this.reloadDataSource; }" } }, }, }, ]; ``` ### 如何全局生效 通过 [registerMetadataTransducer API](/site/docs/api/material#registermetadatatransducer) 来修改元数据信息，注意如果有 snippets 相关配置也需要修改相关的配置。 ================================================ FILE: docs/docs/faq/faq013.md ================================================ --- title: Modal 类组件 hidden 属性被强制设置 true sidebar_position: 13 tags: [FAQ] --- ## 注意 弹窗的正确弹出方式请参考：[如何通过按钮展示/隐藏弹窗](/site/docs/demoUsage/makeStuff/dialog) ## 问题原因 由于 hidden 属性，导致 Modal 组件在预览的时候不渲染，也就无法获取到实例。 ## 处理方式 ### 【推荐】升级到 Engine Verison 1.0.11 以上 ### 新增 save propsReducer 通过新增 Save 态的 propsReducer，将 hidden props 去掉。可以参考下面的代码： ```typescript import { project } from '@alilc/lowcode-engine'; import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; export const deleteHiddenTransducer = (ctx: any) => { return { name: 'deleteHiddenTransducer', async init() { project.addPropsTransducer((props: any): any => { delete props.hidden; return props; }, IPublicEnumTransformStage.Save); }, }; } deleteHiddenTransducer.pluginName = 'deleteHiddenTransducer'; ``` ### 导出 schema 使用 Save 态 ```typescript import { TransformStage } from '@alilc/lowcode-types'; const schema = project.exportSchema(TransformStage.Save) ``` ================================================ FILE: docs/docs/faq/faq014.md ================================================ --- title: VERSION_PLACEHOLDER is not defined sidebar_position: 14 tags: [FAQ] --- # 问题原因 由于 lowcode-engine 目前只提供 cdn 的使用方式。如果是自己创建的项目，遇到这个报错了，主要是因为将 npm 包打包进去了。 # 解决方案 ## engine-demo 项目 在项目的 externals 配置里加[一行配置](https://github.com/alibaba/lowcode-demo/blob/f8afad0df3190565caccc0a1dfd750dbf84c680f/build.json#L16) ## 其他项目 [相关文档](/site/docs/guide/create/useEditor#引入-umd-包资源) ### webpack [https://webpack.docschina.org/configuration/externals/](https://webpack.docschina.org/configuration/externals/) ### 使用文档 待补充 ================================================ FILE: docs/docs/faq/faq015.md ================================================ --- title: 已有组件如何快速接入引擎 sidebar_position: 15 tags: [FAQ] --- 你可以通过在线工具「Parts 造物」生产物料描述协议，然后使用到你的项目中去。 文档地址：[利用 Parts 造物快速使用 react 组件](/site/docs/guide/expand/editor/parts/partsIntro) ================================================ FILE: docs/docs/faq/faq016.md ================================================ --- title: Cannot read property 'Icon' of Undefined sidebar_position: 16 tags: [FAQ] --- @alifd/next 是 React 画布下必须的资源，不能省略。 需要在资产包中检查是否有下列代码： ```typescript { "title": "fusion 组件库", "package": "@alifd/next", "version": "1.23.0", "urls": [ "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next.min.css", "https://g.alicdn.com/code/lib/alifd__next/1.23.18/next-with-locales.min.js" ], "library": "Next" }, ``` ================================================ FILE: docs/docs/faq/faq017.md ================================================ --- title: vue 画布支持说明 sidebar_position: 17 tags: [FAQ] --- #### 低代码引擎官方是否支持 Vue 画布 短期没有支持的计划 #### 社区研发的 Vue 画布 ##### 肯耐珂萨团队实现的 Vue 画布 github：[https://github.com/KNXCloud/lowcode-engine-vue](https://github.com/KNXCloud/lowcode-engine-vue) ================================================ FILE: docs/docs/faq/faq018.md ================================================ --- title: 是否可以生成 Vue 页面代码？ sidebar_position: 18 tags: [FAQ] --- 低代码引擎在架构上是和具体语言无关的，通过一定的扩展和插件是可以生成 Vue 页面代码的。 如果只是用现有的基于 React 的 fusion 物料来搭建，只是在最终出码的时候生成 Vue 页面代码，那您需要准备一套和 fusion 兼容的 vue 物料，并定制个出码方案，将[下面的一些出码插件](https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/src/solutions/icejs.ts)替换成生成 Vue 框架的即可：  详细定制方案可以参考下[《自定义出码》](/site/docs/guide/expand/runtime/codeGeneration#5自定义出码)。 如果您希望在搭建的时候也使用 Vue 的物料，则还需要扩展定制入料、画布和渲染器等模块，详细方案请参考下[《扩展低代码编辑器》](/site/docs/guide/expand/editor/summary) ================================================ FILE: docs/docs/faq/faq019.md ================================================ --- title: windows 下运行出现报错 sidebar_position: 19 tags: [FAQ] --- 由于阿里内部研发人员没有 windows 开发的诉求，windows 环境下相关的技术兼容短期内暂时没有支持计划。 辛苦使用 [WSL](https://docs.microsoft.com/zh-cn/windows/wsl/install) 在 windows 下进行低代码引擎相关的开发。 如果可以的话，欢迎大佬们提 PR 对 windows 开发环境进行兼容方面的支持。 ================================================ FILE: docs/docs/faq/faq020.md ================================================ --- title: Can't import the named export from non ECMAScript module sidebar_position: 20 tags: [FAQ] --- 如果您是自己配置的引擎打包，那么可能会遇到这个问题。  问题的根源是 code-editor 插件运行时直接依赖了 babel 来完成 jsx 编译，babel 从 7.17.0 开始依赖了使用 ESM 编写的 @ampproject/remapping@2.1.0。如果打包工具无法正确处理 ESM，则可能报错。 解决方案 1：锁定 babel 版本 如果您使用了 yarn，那么可以在 package.json 中： ```typescript "resolutions": { "@babel/core": "~7.16.7", "@babel/parser": "~7.16.7", "@babel/preset-env": "~7.16.7", "@babel/preset-react": "~7.16.7", "@babel/standalone": "~7.16.7", "@babel/traverse": "~7.16.7", "@babel/types": "~7.16.7" } ``` 解决方案 2：编译层面配置。本例使用 build-script 配置，您可以用类似方法来配置您的 webpack： ```typescript module.exports = ({ onGetWebpackConfig }) => { // see: https://github.com/ice-lab/build-scripts#%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91 onGetWebpackConfig((config) => { config.module // fixes https://github.com/graphql/graphql-js/issues/1272 .rule('mjs$') .test(/\.mjs$/) .include .add(/node_modules/) .end() .type('javascript/auto'); return config; }); }; ``` ================================================ FILE: docs/docs/faq/faq021.md ================================================ --- title: 提交 PR 时，明明签署过 CLA，仍被提示需要签署 sidebar_position: 21 tags: [FAQ] --- ## 问题原因 原因是：git commit 时，本地 git config 配置的 email 与 github 账号的 email 不一致，导致未被识别出来，检查方式 ```bash git config user.email ``` ## 解决办法 如何配置，可参考 [is-it-possible-to-have-different-git-configuration-for-different-projects](https://stackoverflow.com/questions/8801729/is-it-possible-to-have-different-git-configuration-for-different-projects) 配置好正确的 email 之后，已提交的代码需要以新的配置重新提交才可生效。 ================================================ FILE: docs/docs/faq/faq022.md ================================================ --- title: 节点无法拖拽到 Page 下 sidebar_position: 22 tags: [FAQ] --- 查看 Page 节点的 childWhitelist 配置，如果 Page 配置了 childWhitelist，且当前节点不在白名单下，是无法拖拽的。 ```typescript AliLowCodeEngine.material.getComponentMeta('Page').getMetadata().configure.component.nestingRule.childWhitelist ``` 比如在 [demo](https://lowcode-engine.cn/demo/demo-general/index.html) 中 Page 组件的 childWhitelist 为：['NextPage', 'ProDialog', 'Dialog', 'Drawer']，则只有这些组件可以拖拽到 Page 的 children 下，其他组件均不可以。 说明：1.0.15 之前 Page 组件的 childWhitelist 限制是失效的，在 1.0.16 版本进行了 bug 修复。 ### 解决办法 **方法 1：直接修改 Page 组件的 childWhitelist，比如删除**。 **方法 2：通过 **[**material.registerMetadataTransducer**](/site/docs/api/material#registermetadatatransducer)** 修改 Page 组件的 childWhitelist（适用于 Page 组件是其他人维护的）** ================================================ FILE: docs/docs/faq/faq023.md ================================================ --- title: Slot组件渲染报错问题 sidebar_position: 23 tags: [FAQ] --- ## 问题描述 在低代码引擎的页面渲染过程中，可能会遇到一个关于Slot组件的报错，提示“Slot找不到”。实际上，在渲染态时不应使用Slot组件。 ## 问题原因 低代码引擎渲染分为两个状态：设计态和渲染态。 - **设计态**：为了帮助插槽进行可视化设计，引入了Slot组件。 - **渲染态**：在此状态下，不需要使用Slot组件。 这个问题通常是因为在渲染态错误地使用了设计态的schema。 ## 解决方案 1. **区分设计态和渲染态**：通过`project.exportSchema(TransformStage.Save)`的参数来区分。 - `TransformStage.Save`代表渲染态的schema，其中不包含Slot组件。 - 【默认值】`TransformStage.Render`代表设计态的schema，其中包含Slot组件。 2. **使用正确的API和参数**：确保在渲染态使用正确的schema，避免引用设计态的Slot组件。 3. **处理脏数据问题**：如果问题是由脏数据导致，清除数据并重新拖拽组件以恢复正常。 ## 注意事项 - 确保在代码和配置中正确区分设计态和渲染态。 - 如果遇到持续的问题，检查是否有脏数据或配置错误，并进行相应的清理和调整。 ## 相关链接 - Issue链接：[Issue #1798](https://github.com/alibaba/lowcode-engine/issues/1798) --- ================================================ FILE: docs/docs/faq/faq024.md ================================================ --- title: workspace 模式常见问题 sidebar_position: 23 tags: [FAQ] --- #### 如何判断是否开启了IDE模式？ - **通过官方API判断**：您可以通过访问 [workspace.isActive](/site/docs/api/workspace#isactive) 来判断当前是否处于IDE模式。这是阿里低代码引擎提供的一个官方API，专门用于确认是否处于集成开发环境。 #### 如何使用插件的ctx来做判断在哪个模式下？ - **插件是否为应用级别**：可以通过 **ctx.isPluginRegisteredInWorkspace** 方法来判断一个插件是否是应用级别的插件。这有助于理解插件在阿里低代码引擎中的作用域和潜在的使用场景。 - **插件的注册级别**：您可以使用 **ctx.registerLevel** 属性来判断插件处于哪个级别。插件级别的值包括： - **Default**：默认级别。非 IDE 模式下的值 - **Workspace**：应用级别。 - **Resource**：资源级别。 - **EditorView**：编辑视图级别。 这些级别代表了插件可能的作用域和使用场景，有助于在开发和管理低代码应用时对插件进行更精确的控制和配置。 #### 如何在IDE模式下设置资源列表？ - **设置资源列表API**：在IDE模式下，可以通过访问 [workspace.setResourceList](/site/docs/api/workspace#setresourcelist) 来设置或更新IDE中的资源列表。这确保您在编辑器窗口中打开的资源是最新且可访问的。 #### 如何打开视图窗口？ - **使用推荐的方法**：使用 `openEditorWindow(resource: Resource, 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/design/datasourceEngine.md
================================================
---
title: 数据源引擎设计
sidebar_position: 7
---
## 核心原理
考虑之后的扩展性和兼容性，核心分为了 2 类包，一个是 **datasource-engine** ，另一个是 **datasource-engine-x-handler** ，x 的意思其实是对应数据源的 type，比如说 **datasource-engine-mtop-handler**，也就是说我们会将真正的请求工具放在 handler 里面去处理，engine 在使用的时候由使用方自身来决定需要注册哪些 handler，这样的目的有 2 个，一个是如果将所有的 handler 都放到一个包，对于端上来说这个包过大，有一些浪费资源和损耗性能的问题，另一个是如果有新的类型的数据源出现，只需要按照既定的格式去新增一个对应的 handler 处理器即可，达到了高扩展性的目的；
### DataSourceEngine
- engine：engine 主要分 2 类，一类是面向 render 引擎的，可以从 engine/interpret 引入，一类是面向出码或者说直接单纯使用数据源引擎的场景，可以从 engine/runtime 引入，代码如下
```typescript
import { createInterpret, createRuntime } from '@alilc/lowcode-datasource-engine';
```
create 方法定义如下
```typescript
interface IDataSourceEngineFactory {
create(dataSource: DataSource, context: Omit
基于 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/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
================================================
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/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/runtime/_category_.json
================================================
{
"label": "扩展运行时",
"position": 2,
"collapsed": false,
"collapsible": true
}
================================================
FILE: docs/docs/guide/expand/runtime/codeGeneration.md
================================================
---
title: 使用出码功能
sidebar_position: 1
---
## 出码简述
所谓出码，即将低代码编排出的 schema 进行解析并转换成最终可执行的代码的过程。
## 出码的适用范围
出码是为了更高效的运行和更灵活地定制渲染，相对而言，基于 Schema 的运行时渲染，有着能实时响应内容的变化和接入成本低的优点，但是也存在着实时解析运行的性能开销比较大和包大小比较大的问题，而且无法自由地进行扩展二次开发，功能自由度受到一定程度限制。
当然，出码也会存在一些限制：一方面需要额外的接入成本，另一方面通常需要额外的生成代码和打包构建的时间，难以做到基于 Schema 的运行时渲染那样保存即预览的效果。
所以不是所有场景都建议做出码，一般来说以下 3 个场景可以考虑使用出码进行优化。
### 场景一：想要极致的打开速度，降低 LCP/FID
这种场景比较常见的是 C 端应用，比如手淘上的页面和手机钉钉上的页面，要求能够尽快得响应用户操作，不要出现卡死的情况。当一个流入协议大小比较大的时候，前端进行解析时的开销也比较大。如果能把这部分负担转移到编译时去完成的话，前端依赖包大小就会减少许多。从而也提升了加载速度，降低了带宽消耗。页面越简单，这其中的 gap 就会越明显。
### 场景二：老项目 + 新需求，想用搭建产出
这是一个很常见的场景，毕竟迁移或者重构都是有一个过程的，阿里的业务都是一边跑一边换发动机。在这种场景中，我们不可能要求使用运行时方案来做实现，因为运行时是一个项目级别的能力，最好是项目中统一使用他这一种方式，保证体验的一致性与连贯性。所以我们可以只在低代码平台上搭建新的业务页面，然后通过出码模块导出这些页面的源码，连同一些全局依赖模块，一起 Merge 到老项目中。完成开发体验的优化。
### 场景三：协议不能描述部分代码逻辑（协议功能不足或特别定制化的逻辑）
当我们发现一些逻辑诉求不能在目前协议中很好地表达的时候，这其实是项目复杂度较高的一个信号。比较好的方式就是将低代码研发和源码研发结合起来。这种模式下最大的诉求点之一就是，需要将搭建的内容输出为可读性和确定性都比较良好的代码模块。这也就是出码模块需要支持好的使用场景了。
## 如何使用
### 1) 通过命令行快速体验
欢迎使用命令行工具快速体验：`npx @alilc/lowcode-code-generator -i example-schema.json -o generated -s icejs3`
--其中 example-schema.json 可以从[这里下载](https://alifd.alicdn.com/npm/@alilc/lowcode-code-generator@latest/example-schema.json)
### 2) 通过设计器插件快速体验
1. 安装依赖： `npm install --save @alilc/lowcode-plugin-code-generator`
2. 注册插件：
```typescript
import { plugins } from '@alilc/lowcode-engine';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
// 在你的初始化函数中：
await plugins.register(CodeGenPlugin);
// 如果您不希望自动加上出码按钮，则可以这样注册
await plugins.register(CodeGenPlugin, { disableCodeGenActionBtn: true });
```
然后运行你的低代码编辑器项目即可 -- 在设计器的右上角会出现一个“出码”按钮，点击即可在浏览器中出码并预览。
### 3）服务端出码接入
此代码生成器一开始就是为服务端出码设计的，你可以直接这样来在 node.js 环境中使用：
1. 安装依赖： `npm install --save @alilc/lowcode-code-generator`
2. 引入代码生成器：
```javascript
import CodeGenerator from '@alilc/lowcode-code-generator';
```
3. 创建项目构建器：
```javascript
const projectBuilder = CodeGenerator.solutions.icejs();
```
4. 生成代码
```javascript
const project = await projectBuilder.generateProject(
schema, // 编排搭建出来的 schema
);
```
5. 将生成的代码写入到磁盘中 (也可以生成一个 zip 包)
```javascript
// 写入磁盘
await CodeGenerator.publishers.disk().publish({
project, // 上一步生成的 project
outputPath: '/path/to/your/output/dir', // 输出目录
projectSlug: 'your-project-slug', // 项目标识
});
// 写入到 zip 包
await CodeGenerator.publishers.zip().publish({
project, // 上一步生成的 project
outputPath: '/path/to/your/output/dir', // 输出目录
projectSlug: 'your-project-slug', // 项目标识 -- 对应生成 your-project-slug.zip 文件
});
```
注：一般来说在服务端出码可以跟 github/gitlab, CI 和 CD 流程等一起串起来使用，通常用于优化性能。
### 4）浏览器中出码接入
随着现在电脑性能和浏览器技术的发展，出码其实已经不必非得在服务端做了，借助于 Web Worker 特性，可以在浏览器中进行出码：
1. 安装依赖： `npm install --save @alilc/lowcode-code-generator`
2. 引入代码生成器：
```javascript
import * as CodeGenerator from '@alilc/lowcode-code-generator/standalone-loader';
```
3. 【可选】提前初始化代码生成器：
```javascript
// 提前初始化下，这样后面用的时候更快 (这个 init 内部会提前准备好创建 worker 的一些资源)
await CodeGenerator.init();
```
4. 出码
```javascript
const result = await CodeGenerator.generateCode({
solution: 'icejs', // 出码方案 (目前内置有 icejs、icejs3 和 rax )
schema, // 编排搭建出来的 schema
});
console.log(result); // 出码结果 (默认是递归结构描述的，可以传 flattenResult: true 以生成扁平结构的结果)
```
注：一般来说在浏览器中出码适合做即时预览功能。
### 5）自定义出码
前端框架灵活多变，默认内置的出码方案很难满足所有人的需求，好在此代码生成器支持非常灵活的插件机制 -- 内置功能大多都是通过插件完成的（在 `src/plugins`下），比如：
所以您可以通过添加自己的插件或替换掉默认内置的插件来实现您的自定义功能。
为了方便自定义出码方案，出码模块还提供自定义出码方案的脚手架功能，即执行下面脚本即可生成一个自定义出码方案：
```shell
npx @alilc/lowcode-code-generator init-solution **对于 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: packages/designer/README.md
================================================
================================================
FILE: packages/designer/babel.config.js
================================================
module.exports = require('../../babel.config');
================================================
FILE: packages/designer/build.json
================================================
{
"plugins": [
"@alilc/build-plugin-lce"
]
}
================================================
FILE: packages/designer/build.test.json
================================================
{
"plugins": [
"@alilc/build-plugin-lce",
"@alilc/lowcode-test-mate/plugin/index.ts"
],
"babelPlugins": [
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
]
}
================================================
FILE: packages/designer/jest.config.js
================================================
const fs = require('fs');
const { join } = require('path');
const esModules = [].join('|');
const pkgNames = fs.readdirSync(join('..')).filter(pkgName => !pkgName.startsWith('.'));
const jestConfig = {
// transform: {
// '^.+\\.[jt]sx?$': 'babel-jest',
// // '^.+\\.(ts|tsx)$': 'ts-jest',
// // '^.+\\.(js|jsx)$': 'babel-jest',
// },
// testMatch: ['**/node-children.test.ts'],
// testMatch: ['**/plugin-manager.test.ts'],
// testMatch: ['**/history/history.test.ts'],
// testMatch: ['**/document-model.test.ts'],
// testMatch: ['**/prop.test.ts'],
// testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
// testMatch: ['**/document/node/node.add.test.ts'],
// testMatch: ['**/setting-field.test.ts'],
// testMatch: ['**/node.test.ts'],
// testMatch: ['**/builtin-hotkey.test.ts'],
// testMatch: ['**/selection.test.ts'],
// testMatch: ['**/plugin/sequencify.test.ts'],
// testMatch: ['**/builtin-simulator/utils/parse-metadata.test.ts'],
transformIgnorePatterns: [
`/node_modules/(?!${esModules})/`,
],
setupFiles: ['./tests/fixtures/unhandled-rejection.ts'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
collectCoverage: false,
collectCoverageFrom: [
'src/**/*.ts',
'!src/**/*.d.ts',
'!src/icons/**',
'!src/locale/**',
'!src/builtin-simulator/utils/**',
'!src/plugin/sequencify.ts',
'!src/document/node/exclusive-group.ts',
'!src/document/node/props/value-to-source.ts',
'!src/builtin-simulator/live-editing/live-editing.ts',
'!src/designer/offset-observer.ts',
'!src/designer/clipboard.ts',
'!src/designer/scroller.ts',
'!src/builtin-simulator/host.ts',
'!**/node_modules/**',
'!**/vendor/**',
],
};
// 只对本仓库内的 pkg 做 mapping
jestConfig.moduleNameMapper = {};
jestConfig.moduleNameMapper[`^@alilc/lowcode\\-(${pkgNames.join('|')})$`] = ' extends IPublicModelSensor
{/* progressing.visible ?
);
}
}
@observer
class Canvas extends Component<{ host: BuiltinSimulatorHost }> {
render() {
const sim = this.props.host;
let className = 'lc-simulator-canvas';
const { canvas = {}, viewport = {} } = sim.deviceStyle || {};
if (sim.deviceClassName) {
className += ` ${sim.deviceClassName}`;
} else if (sim.device) {
className += ` lc-simulator-device-${sim.device}`;
}
return (
);
}
}
@observer
class Content extends Component<{ host: BuiltinSimulatorHost }> {
state = {
disabledEvents: false,
};
private dispose?: () => void;
componentDidMount() {
const editor = this.props.host.designer.editor;
const onEnableEvents = (type: boolean) => {
this.setState({
disabledEvents: type,
});
};
editor.eventBus.on('designer.builtinSimulator.disabledEvents', onEnableEvents);
this.dispose = () => {
editor.removeListener('designer.builtinSimulator.disabledEvents', onEnableEvents);
};
}
componentWillUnmount() {
this.dispose?.();
}
render() {
const sim = this.props.host;
const { disabledEvents } = this.state;
const { viewport, designer } = sim;
const frameStyle: any = {
transform: `scale(${viewport.scale})`,
height: viewport.contentHeight,
width: viewport.contentWidth,
};
if (disabledEvents) {
frameStyle.pointerEvents = 'none';
}
const { viewName } = designer;
return (
sim.mountViewport(elmt)} className="lc-simulator-canvas-viewport" style={viewport}>