Skip to content

Commit 4d4a8a6

Browse files
liujupingJackLian
liujuping
authored and
JackLian
committed
feat: fix designer:entry ts errors
1 parent 4433b2e commit 4d4a8a6

35 files changed

Lines changed: 533 additions & 502 deletions

‎docs/docs/specs/material-spec.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -833,11 +833,11 @@ props 数组下对象字段描述：
833833
| name | 属性名 | String | type = 'field' 生效 |
834834
| defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 |
835835
| supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 |
836-
| condition | 配置当前 prop 是否展示 | (target: SettingTarget) => boolean; | - |
836+
| condition | 配置当前 prop 是否展示 | (target: IPublicModelSettingField) => boolean; | - |
837837
| setter | 单个控件 (setter) 描述，搭建基础协议组件的描述对象，支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 |
838838
| extraProps | 其他配置属性（不做流通要求） | Object | 其他配置 |
839-
| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: SettingTarget, value: any) => any; |
840-
| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: SettingTarget, value: any) => void; |
839+
| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: IPublicModelSettingField, value: any) => any; |
840+
| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: IPublicModelSettingField, value: any) => void; |
841841

842842

843843
根据属性值类型 propType，确定对应控件类型 (setter) 。
@@ -922,7 +922,7 @@ props 数组下对象字段描述：
922922

923923
| 字段 | 用途 | 类型 | 备注 |
924924
| ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | --- |
925-
|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: SettingTarget) => NodeData[]);|
925+
|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);|
926926
|getResizingHandlers| 用于配置设计器中组件 resize 操作工具的样式和内容 | Function| (currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[];
927927
|callbacks| 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 | Callback| -
928928
|callbacks.onNodeAdd| 在容器中拖入组件时触发的事件回调 | Function| (e: MouseEvent, currentNode: any) => any
@@ -1098,7 +1098,7 @@ export interface Advanced {
10981098
/**
10991099
* 拖入容器时，自动带入 children 列表
11001100
*/
1101-
initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]);
1101+
initialChildren?: NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);
11021102
/**
11031103
* @todo 待补充文档
11041104
*/

‎packages/designer/src/component-meta.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import {
88
IPublicTypeTransformedComponentMetadata,
99
IPublicTypeNestingFilter,
1010
IPublicTypeI18nData,
11-
IPublicTypePluginConfig,
1211
IPublicTypeFieldConfig,
1312
IPublicModelComponentMeta,
1413
IPublicTypeAdvanced,
14+
IPublicTypeDisposable,
15+
IPublicTypeLiveTextEditingConfig,
1516
} from '@alilc/lowcode-types';
1617
import { deprecate, isRegExp, isTitleConfig, isNode } from '@alilc/lowcode-utils';
1718
import { computed, createModuleEventBus, IEventBus } from '@alilc/lowcode-editor-core';
@@ -59,9 +60,11 @@ export function buildFilter(rule?: string | string[] | RegExp | IPublicTypeNesti
5960
export interface IComponentMeta extends IPublicModelComponentMeta<INode> {
6061
prototype?: any;
6162

63+
get rootSelector(): string | undefined;
64+
6265
setMetadata(metadata: IPublicTypeComponentMetadata): void;
6366

64-
get rootSelector(): string | undefined;
67+
onMetadataChange(fn: (args: any) => void): IPublicTypeDisposable;
6568
}
6669

6770
export class ComponentMeta implements IComponentMeta {
@@ -120,7 +123,7 @@ export class ComponentMeta implements IComponentMeta {
120123
return config?.combined || config?.props || [];
121124
}
122125

123-
private _liveTextEditing?: IPublicTypePluginConfig[];
126+
private _liveTextEditing?: IPublicTypeLiveTextEditingConfig[];
124127

125128
get liveTextEditing() {
126129
return this._liveTextEditing;
@@ -357,7 +360,7 @@ export class ComponentMeta implements IComponentMeta {
357360
return true;
358361
}
359362

360-
onMetadataChange(fn: (args: any) => void): () => void {
363+
onMetadataChange(fn: (args: any) => void): IPublicTypeDisposable {
361364
this.emitter.on('metadata_change', fn);
362365
return () => {
363366
this.emitter.removeListener('metadata_change', fn);

‎packages/designer/src/designer/designer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export class Designer implements IDesigner {
140140

141141
@obx.ref private _simulatorComponent?: ComponentType<any>;
142142

143-
@obx.ref private _simulatorProps?: object | ((project: Project) => object);
143+
@obx.ref private _simulatorProps?: Record<string, any> | ((project: Project) => object);
144144

145145
@obx.ref private _suspensed = false;
146146

‎packages/designer/src/designer/setting/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './setting-field';
22
export * from './setting-top-entry';
3-
export * from './setting-entry';
3+
export * from './setting-entry-type';
4+
export * from './setting-prop-entry';

‎packages/designer/src/designer/setting/setting-entry-type.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { IPublicApiSetters, IPublicModelEditor } from '@alilc/lowcode-types';
2+
import { IDesigner } from '../designer';
3+
import { INode } from '../../document';
4+
import { ISettingField } from './setting-field';
5+
6+
export interface ISettingEntry {
7+
readonly designer: IDesigner | undefined;
8+
9+
readonly id: string;
10+
11+
/**
12+
* 同样类型的节点
13+
*/
14+
readonly isSameComponent: boolean;
15+
16+
/**
17+
* 一个
18+
*/
19+
readonly isSingle: boolean;
20+
21+
/**
22+
* 多个
23+
*/
24+
readonly isMultiple: boolean;
25+
26+
/**
27+
* 编辑器引用
28+
*/
29+
readonly editor: IPublicModelEditor;
30+
31+
readonly setters: IPublicApiSetters;
32+
33+
/**
34+
* 取得子项
35+
*/
36+
get: (propName: string | number) => ISettingField | null;
37+
38+
readonly nodes: INode[];
39+
40+
// @todo 补充 node 定义
41+
/**
42+
* 获取 node 中的第一项
43+
*/
44+
getNode: () => any;
45+
}

‎packages/designer/src/designer/setting/setting-entry.ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎packages/designer/src/designer/setting/setting-field.ts‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@ import {
77
IPublicTypeFieldConfig,
88
IPublicTypeCustomView,
99
IPublicTypeSetValueOptions,
10+
IPublicTypeDisposable,
11+
IPublicModelSettingField,
12+
IBaseModelSettingField,
1013
} from '@alilc/lowcode-types';
1114
import { Transducer } from './utils';
12-
import { SettingPropEntry } from './setting-prop-entry';
13-
import { ISettingEntry } from './setting-entry';
15+
import { ISettingPropEntry, SettingPropEntry } from './setting-prop-entry';
1416
import { computed, obx, makeObservable, action, untracked, intl } from '@alilc/lowcode-editor-core';
1517
import { cloneDeep, isCustomView, isDynamicSetter } from '@alilc/lowcode-utils';
18+
import { ISettingTopEntry } from './setting-top-entry';
19+
import { IComponentMeta, INode } from '@alilc/lowcode-designer';
1620

17-
function getSettingFieldCollectorKey(parent: ISettingEntry, config: IPublicTypeFieldConfig) {
21+
function getSettingFieldCollectorKey(parent: ISettingTopEntry | ISettingField, config: IPublicTypeFieldConfig) {
1822
let cur = parent;
1923
const path = [config.name];
2024
while (cur !== parent.top) {
@@ -26,11 +30,18 @@ function getSettingFieldCollectorKey(parent: ISettingEntry, config: IPublicTypeF
2630
return path.join('.');
2731
}
2832

29-
export interface ISettingField extends Omit<ISettingEntry, 'setValue'> {
33+
export interface ISettingField extends ISettingPropEntry, Omit<IBaseModelSettingField<
34+
ISettingTopEntry,
35+
ISettingField,
36+
IComponentMeta,
37+
INode
38+
>, 'setValue' | 'key' | 'node'> {
3039
get items(): Array<ISettingField | IPublicTypeCustomView>;
3140

3241
get title(): string | ReactNode | undefined;
3342

43+
readonly isSettingField: true;
44+
3445
purge(): void;
3546

3647
extraProps: IPublicTypeFieldExtraProps;
@@ -41,6 +52,10 @@ export interface ISettingField extends Omit<ISettingEntry, 'setValue'> {
4152

4253
readonly isRequired: boolean;
4354

55+
readonly isGroup: boolean;
56+
57+
get valueState(): number;
58+
4459
setExpanded(value: boolean): void;
4560

4661
setValue(
@@ -49,6 +64,16 @@ export interface ISettingField extends Omit<ISettingEntry, 'setValue'> {
4964
force?: boolean,
5065
extraOptions?: IPublicTypeSetValueOptions,
5166
): void;
67+
68+
clearValue(): void;
69+
70+
valueChange(options: IPublicTypeSetValueOptions): void;
71+
72+
createField(config: IPublicTypeFieldConfig): ISettingField;
73+
74+
onEffect(action: () => void): IPublicTypeDisposable;
75+
76+
internalToShell(): IPublicModelSettingField;
5277
}
5378

5479
export class SettingField extends SettingPropEntry implements ISettingField {
@@ -62,7 +87,7 @@ export class SettingField extends SettingPropEntry implements ISettingField {
6287

6388
private hotValue: any;
6489

65-
parent: ISettingEntry;
90+
parent: ISettingTopEntry | ISettingField;
6691

6792
extraProps: IPublicTypeFieldExtraProps;
6893

@@ -82,7 +107,7 @@ export class SettingField extends SettingPropEntry implements ISettingField {
82107
private _items: Array<ISettingField | IPublicTypeCustomView> = [];
83108

84109
constructor(
85-
parent: ISettingEntry,
110+
parent: ISettingTopEntry | ISettingField,
86111
config: IPublicTypeFieldConfig,
87112
private settingFieldCollector?: (name: string | number, field: ISettingField) => void,
88113
) {
@@ -118,8 +143,8 @@ export class SettingField extends SettingPropEntry implements ISettingField {
118143
}
119144
if (isDynamicSetter(this._setter)) {
120145
return untracked(() => {
121-
const shellThis = this.internalToShellPropEntry();
122-
return (this._setter as IPublicTypeDynamicSetter)?.call(shellThis, shellThis);
146+
const shellThis = this.internalToShell();
147+
return (this._setter as IPublicTypeDynamicSetter)?.call(shellThis, shellThis!);
123148
});
124149
}
125150
return this._setter;
@@ -266,8 +291,13 @@ export class SettingField extends SettingPropEntry implements ISettingField {
266291
this.valueChange(options);
267292
}
268293

269-
onEffect(action: () => void): () => void {
270-
return this.designer.autorun(action, true);
294+
onEffect(action: () => void): IPublicTypeDisposable {
295+
return this.designer!.autorun(action, true);
296+
}
297+
298+
299+
internalToShell() {
300+
return this.designer!.shellModelFactory.createSettingField(this);
271301
}
272302
}
273303

‎packages/designer/src/designer/setting/setting-prop-entry.ts‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,44 @@
11
import { obx, computed, makeObservable, runInAction, IEventBus, createModuleEventBus } from '@alilc/lowcode-editor-core';
2-
import { GlobalEvent, IPublicApiSetters, IPublicModelEditor, IPublicTypeSetValueOptions } from '@alilc/lowcode-types';
3-
import { uniqueId, isJSExpression, isSettingField } from '@alilc/lowcode-utils';
4-
import { ISettingEntry } from './setting-entry';
2+
import { GlobalEvent, IPublicApiSetters, IPublicModelEditor, IPublicModelSettingField, IPublicTypeFieldExtraProps, IPublicTypeSetValueOptions } from '@alilc/lowcode-types';
3+
import { uniqueId, isJSExpression } from '@alilc/lowcode-utils';
4+
import { ISettingEntry } from './setting-entry-type';
55
import { INode } from '../../document';
66
import { IComponentMeta } from '../../component-meta';
77
import { IDesigner } from '../designer';
8-
import { ISettingField } from './setting-field';
8+
import { ISettingTopEntry } from './setting-top-entry';
9+
import { ISettingField, isSettingField } from './setting-field';
910

10-
export class SettingPropEntry implements ISettingEntry {
11+
export interface ISettingPropEntry extends ISettingEntry {
12+
get props(): ISettingTopEntry;
13+
14+
readonly isGroup: boolean;
15+
16+
get name(): string | number | undefined;
17+
18+
valueChange(options: IPublicTypeSetValueOptions): void;
19+
20+
getKey(): string | number | undefined;
21+
22+
setKey(key: string | number): void;
23+
24+
getDefaultValue(): any;
25+
26+
setUseVariable(flag: boolean): void;
27+
28+
getProps(): ISettingTopEntry;
29+
30+
isUseVariable(): boolean;
31+
32+
getMockOrValue(): any;
33+
34+
remove(): void;
35+
36+
setValue(val: any, isHotValue?: boolean, force?: boolean, extraOptions?: IPublicTypeSetValueOptions): void;
37+
38+
internalToShell(): IPublicModelSettingField;
39+
}
40+
41+
export class SettingPropEntry implements ISettingPropEntry {
1142
// === static properties ===
1243
readonly editor: IPublicModelEditor;
1344

@@ -23,9 +54,9 @@ export class SettingPropEntry implements ISettingEntry {
2354

2455
readonly componentMeta: IComponentMeta | null;
2556

26-
readonly designer: IDesigner;
57+
readonly designer: IDesigner | undefined;
2758

28-
readonly top: ISettingEntry;
59+
readonly top: ISettingTopEntry;
2960

3061
readonly isGroup: boolean;
3162

@@ -50,9 +81,9 @@ export class SettingPropEntry implements ISettingEntry {
5081
return path;
5182
}
5283

53-
extraProps: any = {};
84+
extraProps: IPublicTypeFieldExtraProps = {};
5485

55-
constructor(readonly parent: ISettingEntry | ISettingField, name: string | number | undefined, type?: 'field' | 'group') {
86+
constructor(readonly parent: ISettingTopEntry | ISettingField, name: string | number | undefined, type?: 'field' | 'group') {
5687
makeObservable(this);
5788
if (type == null) {
5889
const c = typeof name === 'string' ? name.slice(0, 1) : '';
@@ -126,7 +157,7 @@ export class SettingPropEntry implements ISettingEntry {
126157
if (this.type !== 'field') {
127158
const { getValue } = this.extraProps;
128159
return getValue
129-
? getValue(this.internalToShellPropEntry(), undefined) === undefined
160+
? getValue(this.internalToShell()!, undefined) === undefined
130161
? 0
131162
: 1
132163
: 0;
@@ -165,7 +196,7 @@ export class SettingPropEntry implements ISettingEntry {
165196
}
166197
const { getValue } = this.extraProps;
167198
try {
168-
return getValue ? getValue(this.internalToShellPropEntry(), val) : val;
199+
return getValue ? getValue(this.internalToShell()!, val) : val;
169200
} catch (e) {
170201
console.warn(e);
171202
return val;
@@ -184,7 +215,7 @@ export class SettingPropEntry implements ISettingEntry {
184215
const { setValue } = this.extraProps;
185216
if (setValue && !extraOptions?.disableMutator) {
186217
try {
187-
setValue(this.internalToShellPropEntry(), val);
218+
setValue(this.internalToShell()!, val);
188219
} catch (e) {
189220
/* istanbul ignore next */
190221
console.warn(e);
@@ -207,7 +238,7 @@ export class SettingPropEntry implements ISettingEntry {
207238
const { setValue } = this.extraProps;
208239
if (setValue) {
209240
try {
210-
setValue(this.internalToShellPropEntry(), undefined);
241+
setValue(this.internalToShell()!, undefined);
211242
} catch (e) {
212243
/* istanbul ignore next */
213244
console.warn(e);
@@ -363,7 +394,7 @@ export class SettingPropEntry implements ISettingEntry {
363394
return v;
364395
}
365396

366-
internalToShellPropEntry() {
367-
return this.designer.shellModelFactory.createSettingPropEntry(this);
397+
internalToShell(): IPublicModelSettingField {
398+
return this.designer!.shellModelFactory.createSettingField(this);;
368399
}
369400
}

0 commit comments

Comments
 (0)