山海鲸可视化

Extension自定义属性

1.自定义属性

Extension 中自定义的公开属性会自动生成对应的设置项，私有属性则不会。
私有属性指以#开头的属性，公开属性包括直接定义的公开属性和通过 get 方法定义的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class ExtensionSample {
  //私有属性，不会生成设置项
  #a = 1;
  //公开属性，会生成设置项
  abc = "123";
  //公开的getter，会生成设置项
  get a() {
    return this.#a;
  }
  //没有setter的话，生成的设置项是只读的
  set a(a) {
    this.#a = a;
  }
}
export default ExtensionSample;

上面的代码会生成如下设置项：
Snipaste_2022-12-23_02-38-42.png

2.自定义属性类型

上面的示例中生成的设置项，abc 类型为字符串，a 类型为数字。下面介绍所有的类型。

2.1 数字

1
2
3
4
5
class PropertySample {
  //默认值赋值为一个数字即代表该属性将被认为是数字属性
  setting = 123;
}
export default PropertySample;

数字属性生成样式如下：
image.png

2.2 数字拖动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class PropertySample {
  //公开属性，会生成设置项
  setting = Decimal.default(10, {
    min: -180,
    max: 180,
    type: "int",
    step: 1, //拖动条每一步走多少
    unit: "度", //输入框后的单位
    showInput: true, //是否显示输入框
    inputWidth: 50, //输入框宽度
  });
  onPropertyChanged(property) {
    if (property == "setting") {
      //获取到int值
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;

数字拖动条属性生成效果如下：
image.png

2.3 字符串

1
2
3
4
5
class PropertySample {
  //默认值赋值为一个字符串即代表该属性将被认为是字符串属性
  setting = "Hello World";
}
export default PropertySample;

字符串属性生成样式如下：
image.png

2.4 组件

1
2
3
4
5
6
7
8
9
10
11
class PropertySample {
  //组件属性调用Element.empty()初始化，不支持设置具体组件作为默认值。
  setting = Element.empty();
  onPropertyChanged(property) {
    if (property == "setting") {
      const element = this.setting;
      console.log("element name is " + element.name);
    }
  }
}
export default PropertySample;

组件属性生成样式如下：
image.png

2.5 组件数组

1
2
3
4
5
6
7
8
9
10
11
12
13
class PropertySample {
  //组件属性调用ElementArray.empty()初始化，不支持设置具体组件作为默认值。
  setting = ElementArray.empty();
  onPropertyChanged(property) {
    if (property == "setting") {
      for (let i = 0; i < this.setting.length; i++) {
        const element = this.setting[i];
        console.log("element " + i + " name is " + element.name);
      }
    }
  }
}
export default PropertySample;

组件数组属性生成效果如下：
image.png

2.6 向量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class PropertySample {
  //公开属性，会生成设置项
  setting = Vector.default([0, 0], {
    generics: [
      { key: "x", type: "int" },
      { key: "y", type: "int" },
    ],
    //输入框后面显示的单位
    unit: "米",
    // 输入框前面是否隐藏key值
    // 在空间不够的时候 可以设置为true
    hideGeneric: false,
  });
  onPropertyChanged(property) {
    if (property == "setting") {
      // 值为数组形式 [0,0]
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;

向量属性生成效果如下：
image.png

2.7 数据字段

1
2
3
4
5
6
7
8
9
10
11
12
13
class PropertySample {
  //公开属性，会生成设置项，生成的设置项在“数据-二次开发数据字段”中
  setting = Field.default({
    minFields: 1, //最少需要几个字段
    maxFields: 3, //最多能放几个字段
  });
  async init() {
    //读取该数据字段中设置的数据
    const data = await this.setting.readDataAsync();
    console.log("data", data);
  }
}
export default PropertySample;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
class Field {
  /** 定义数据字段类型的设置项 */
  static default(options?: FieldOption);
  /**
   * 读取该字段中设置的数据
   * @since 4.2.0
   * @param callback 数据读取完时回调
   * @param options
   * * dataFormat 可选值有"row", "column", "object"。默认值为"row"
   * 对于以下示例表格数据:
   * | A  | B  | C  |
   * | a1 | b1 | c1 |
   * | a2 | b2 | c2 |
   * | a3 | b3 | c3 |
   * 返回结果如下
   * "object" : [{A:"a1", B:"b1", C:"c1"}, {A:"a2", B:"b2", C:"c2"}, {A:"a3", B:"b3", C:"c3"}]
   * "row" : [[a1, b1, c1], [a2, b2, c2], [a3, b3, c3]]
   * "column" : [[a1, a2, a3], [b1, b2, b3], [c1, c2, c3]]
   * * callbackOnDataChanged 为true时，监听数据变化，每次数据变化时都会回调callback
   */
  readData(callback: ReadDataCallback, options?: ReadDataOptions): void;
  /**
   * 异步读取该字段中设置的数据
   * @since 4.2.0
   * @param options
   * * dataFormat 可选值有"row", "column", "object"。默认值为"row"
   * 对于以下示例表格数据:
   * | A  | B  | C  |
   * | a1 | b1 | c1 |
   * | a2 | b2 | c2 |
   * | a3 | b3 | c3 |
   * 返回结果如下
   * "object" : [{A:"a1", B:"b1", C:"c1"}, {A:"a2", B:"b2", C:"c2"}, {A:"a3", B:"b3", C:"c3"}]
   * "row" : [[a1, b1, c1], [a2, b2, c2], [a3, b3, c3]]
   * "column" : [[a1, a2, a3], [b1, b2, b3], [c1, c2, c3]]
   * @returns resolve数据读取结果的Promise
   */
  async readDataAsync(options?: ReadDataAsyncOptions): Promise<any[]>;

  /**
   * 读取多个数据字段的数据
   * @since 4.2.0
   */
  static readData(
    fields: Field[],
    callback: ReadDataCallback,
    options?: ReadDataOptions
  ): void;
  /**
   * 异步读取多个数据字段的数据
   * @since 4.2.0
   */
  static async readDataAsync(
    fields: Field[],
    options?: ReadDataAsyncOptions
  ): Promise<any[]>;
}
type FieldOption = {
  minFields?: number; //最少需要设置几个字段
  maxFields?: number; //最多能设置几个字段
};

数据字段属性生成的效果如下：
image.png

2.8 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class PropertySample {
  //公开属性，会生成设置项
  //默认值可以给一个网络地址
  //也可以成一个字符串数组，如果默认给的是字符串数组 则isMultiple会被强制设为true
  setting = File.default(
    "https://www.shanhaibi.com/wp-content/themes/twentyseventeen/assets/images/header/home_icon_black.png",
    {
      format: "image|video|.pdf|model|.mp3",
      isMultiple: false,
    }
  );
  onPropertyChanged(property) {
    if (property == "setting") {
      // 文件属性的值是文件的地址
      // 如果设置了isMultiple:true
      // 则是地址的数组
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class File {
  /**
   * 定义文件类型的设置项
   */
  static default(value?: string | string[], option?: FileOption);
  /** 获取设置的文件地址 */
  get value(): string | string[];
  /** @since 4.2.0 以文本的方式读取文件内容，返回字符串 */
  async readAsText(): Promise<string>;
  /** @since 4.2.0 以JSON的方式读取文件内容，返回json对象 */
  async readAsJson(): Promise<any>;
  /** @since 4.2.0 以Blob的方式读取文件内容 */
  async readAsBlob(): Promise<Blob>;
  /** @since 4.2.0 以ArrayBuffer的方式读取文件内容 */
  async readAsArrayBuffer(): Promise<ArrayBuffer>;
}
type FileOption = {
  /**
   * 支持的文件类型，多个后缀名用"|"分隔，例如 ".jpg|.png|.gif"
   */
  format?: string;
  /** 是否支持选择多个文件，默认false */
  isMultiple?: boolean;
};

文件属性生成的效果如下：
image.png

2.9 下拉选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class PropertySample {
  //公开属性，会生成设置项
  setting = Select.default(2, {
    selectChoices: [
      { value: 2, label: "大" },
      { value: 1, label: "小" },
    ],
    isMultiple: false,
  });
  onPropertyChanged(property) {
    if (property == "setting") {
      //如果isMultiple是false 则直接返回选择value值 如2
      //如果isMultiple是true 则返回选择值的列表 [1,2]
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;

下拉选项属性生成的效果如下：
image.png

2.10 字体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class PropertySample {
  //公开属性，会生成设置项
  setting = Font.default(
    {
      family: "",
      size: 12,
      color: "#fff",
      bold: false,
      italic: false,
      underline: false,
      "line-through": false,
    },
    {
      bold: true, //启用加粗按钮
      italic: true, //启用斜体按钮
      underline: false, //停用下划线按钮
      "line-through": false, //停用删除线按钮
    }
  );
  onPropertyChanged(property) {
    if (property == "setting") {
      //{"family":"","size":22,"color":"#fff","bold":false,"italic":false,"underline":false,"line-through":false}
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;

字体属性生成结果如下：
image.png

2.11 段落

1
2
3
4
5
6
7
8
9
10
11
12
13
class PropertySample {
  //公开属性，会生成设置项
  setting = Paragraph.default("山海鲸是一站式可视化平台", {
    rows: 2, //输入框默认显示2行
  });
  onPropertyChanged(property) {
    if (property == "setting") {
      //返回填入的字符串
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;

段落属性生成样式如下：
image.png

2.12 颜色

1
2
3
4
5
6
7
8
9
10
11
class PropertySample {
  //公开属性，会生成设置项
  setting = Color.default("#00FF00");
  onPropertyChanged(property) {
    if (property == "setting") {
      //返回颜色字符串 #00FF00
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;

颜色属性生成的效果如下：

image.png

Copyright © 2021  多算科技, All Rights Reserved.  浙ICP备20006837号-5

回到顶部 滚到底部