设置器设计

设置器，又称为 Setter，是作为物料属性和用户交互的重要途径，在编辑器日常使用中有着非常重要的作用，本文重点介绍 Setter 的设计原理和使用方式，帮助用户更好的理解 Setter。

在编辑器的右边区域，Setter 的区块就展现在这里，如下图：

其中包含 属性、样式、事件、高级：

• 属性：展示该物料常规的属性；

• 样式：展示该物料样式的属性；

• 事件：如果该物料有声明事件，则会出现事件面板，用于绑定事件；

• 高级：两个逻辑相关的属性，条件渲染和循环。

npm 包与仓库信息

• npm 包：@alilc/lowcode-engine-ext
• 仓库：https://github.com/alibaba/lowcode-engine-ext

设置器模块原理

设置面板依赖于以下三块抽象

• 编辑器上下文 editor，主要包含：消息通知、插件引用等

• 设置对象 settingTarget，主要包含：选中的节点、是否同一值、值的储存等

• 设置列 settingField，主要和当前设置视图相关，包含视图的 ref、以及设置对象 settingTarget

SettingTarget 抽象

如果不是多选，可以直接暴露 Node 给到这，但涉及多选编辑的时候，大家的值时通常是不一样的，设置的时候需要批量设置进去，这里主要封装这些逻辑，把多选编辑的复杂性屏蔽掉。

所选节点所构成的设置对象抽象如下：

interface SettingTarget {
  // 所设置的节点集，至少一个
  readonly nodes: Node[];
  // 所有属性值数据
  readonly props: object;
  // 设置属性值
  setPropValue(propName: string, value: any): void;
  // 获取属性值
  getPropValue(propName: string): any;
  // 设置多个属性值，替换原有值
  setProps(data: object): void;
  // 设置多个属性值，和原有值合并
  mergeProps(data: object): void;
  // 绑定属性值发生变化时
  onPropsChange(fn: () => void): () => void;
}

基于设置对象所派生的设置目标属性抽象如下:

interface SettingTargetProp extends SettingTarget {
  // 当前属性名称
  readonly propName: string;
  // 当前属性值
  value: any;
  // 是否设置对象的值一致
  isSameValue(): boolean;
  // 是否是空值
  isEmpty(): boolean;
  // 设置属性值
  setValue(value: any): void;
  // 移除当前设置
  remove(): void;
}

SettingField 抽象

interface SettingField extends SettingTarget {
  // 当前 Field 设置的目标属性，为 group 时此值为空
  readonly prop?: SettingTargetProp;
  // 当前设置项的 ref 引用
  readonly ref?: ReactInstance;
  // 属性配置描述传入的配置
  readonly config: SettingConfig;
  // others....
}