模块简介

提供 init 等方法

方法签名

1. init

初始化引擎

方法定义

  1. function init(container?: Element, options?: EngineOptions): void

初始化引擎的参数

  1. interface EngineOptions {
  2.   /**
  3.    * 指定初始化的 device
  4.    */
  5.   device?: 'default' | 'mobile';
  6.   /**
  7.    * 指定初始化的 deviceClassName，挂载到画布的顶层节点上
  8.    */
  9.   deviceClassName?: string;
  10.   /**
  11.    * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示
  12.    */
  13.   enableCondition?: boolean;
  14.   /**
  15.    * 开启拖拽组件时，即将被放入的容器是否有视觉反馈，默认值：false
  16.    */
  17.   enableReactiveContainer?: boolean;
  18.   /**
  19.    * 关闭画布自动渲染，在资产包多重异步加载的场景有效，默认值：false
  20.    */
  21.   disableAutoRender?: boolean;
  22.   /**
  23.    * 打开画布的锁定操作，默认值：false
  24.    */
  25.   enableCanvasLock?: boolean;
  26.   /**
  27.    * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效， 默认值为：false
  28.    */
  29.   enableLockedNodeSetting?: boolean;
  30.   /**
  31.    * 开启画布上的鼠标事件的冒泡，默认值：false
  32.    */
  33.   enableMouseEventPropagationInCanvas?: boolean;
  34.   /**
  35.    * 关闭拖拽组件时的虚线响应，性能考虑，默认值：false
  36.    */
  37.   disableDetecting?: boolean;
  38.   /**
  39.    * 定制画布中点击被忽略的 selectors，默认值：undefined
  40.    */
  41.   customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[]) => string[];
  42.   /**
  43.    * 禁止默认的设置面板，默认值：false
  44.    */
  45.   disableDefaultSettingPanel?: boolean;
  46.   /**
  47.    * 禁止默认的设置器，默认值：false
  48.    */
  49.   disableDefaultSetters?: boolean;
  50.   /**
  51.    * 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false
  52.    */
  53.   stayOnTheSameSettingTab?: boolean;
  54.   /**
  55.    * 自定义 loading 组件
  56.    */
  57.   loadingComponent?: ComponentType;
  58.   /**
  59.    * 指定大纲树的扩展参数，无默认值
  60.    */
  61.   defaultOutlinePaneProps?: Record<string, any>;
  62.   };
  64.   /**
  65.    * 工具类扩展
  66.    */
  67.   appHelper?: {
  68.     utils?: {};
  69.   }
  71.   [key: string]: any;
  72. }

使用示例

  1. import { init } from '@alilc/lowcode-engine';
  3. init(document.getElementById('engine'), {
  4.   enableCondition: false,
  5. });

默认打开移动端画布

  1. import { init } from '@alilc/lowcode-engine';
  3. init({
  4.   device: 'mobile',
  5. });

使用 utils 第三方工具扩展

  1. import { init } from '@alilc/lowcode-engine';
  3. init({
  4.   device: 'mobile',
  5.   appHelper: {
  6.     utils: {
  7.       xxx: () => {console.log('123')},
  8.     }
  9.   }
  10. });

在引擎中即可这样使用。
image.png