Skip to content

Commit d3f86de

Browse files
boyongjiongboyongjiong
committed
refactor(core): 重构 core 包中 properties 类型定义，通过泛型的方式约束其类型
1 parent e12a8dc commit d3f86de

17 files changed

+87
-51
lines changed

‎packages/core/src/LogicFlow.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1386,12 +1386,14 @@ export namespace LogicFlow {
13861386
[key: string]: string | undefined
13871387
}
13881388

1389-
export type PropertiesType = {
1389+
export interface PropertiesType {
13901390
width?: number
13911391
height?: number
13921392
rx?: number
13931393
ry?: number
1394-
} & Record<string, any>
1394+
1395+
[key: string]: any
1396+
}
13951397
export type AttributesType = Record<string, any>
13961398

13971399
export type VectorData = {
@@ -1490,14 +1492,14 @@ export namespace LogicFlow {
14901492
[key: string]: any
14911493
}
14921494

1493-
export interface NodeConfig {
1495+
export interface NodeConfig<P extends PropertiesType = PropertiesType> {
14941496
id?: string
14951497
type: string
14961498
x: number
14971499
y: number
14981500
text?: TextConfig | string
14991501
zIndex?: number
1500-
properties?: PropertiesType
1502+
properties?: P
15011503
virtual?: boolean // 是否虚拟节点
15021504
rotate?: number
15031505

@@ -1793,7 +1795,7 @@ export namespace LogicFlow {
17931795
}
17941796
export type FocusOnArgsType = FocusOnById | FocusOnByCoordinate
17951797

1796-
export type BaseNodeModelCtor = typeof BaseNodeModel
1798+
export type BaseNodeModelCtor = typeof BaseNodeModel<PropertiesType>
17971799
export type BaseEdgeModelCtor = typeof BaseEdgeModel
17981800

17991801
export type GraphElementCtor = BaseNodeModelCtor | BaseEdgeModelCtor

‎packages/core/src/model/BaseModel.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import LogicFlow from '../LogicFlow'
44
import { ElementState } from '../constant'
55

66
export namespace Model {
7+
import PropertiesType = LogicFlow.PropertiesType
78
export type AdditionStateDataType = Record<string, unknown>
89
export type PropertyType = Record<string, unknown>
910
export type VectorType = [number, number]
@@ -90,7 +91,7 @@ export namespace Model {
9091
centerY: number
9192
}
9293

93-
export interface BaseModel {
94+
export interface BaseModel<P extends PropertiesType = PropertiesType> {
9495
/**
9596
* 节点或边对应的 ID.
9697
*
@@ -143,7 +144,7 @@ export namespace Model {
143144
* 此属性控制的是第二种。节点和边在删除、调整的同时，其关联的文本也会对应删除、调整。
144145
*/
145146
text: LogicFlow.TextConfig
146-
properties: Record<string, unknown>
147+
properties: P
147148

148149
isSelected: boolean // 元素是否被选中
149150
isHovered: boolean // 鼠标是否悬停在元素上

‎packages/core/src/model/node/BaseNodeModel.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,19 @@ import NodeConfig = LogicFlow.NodeConfig
2626
import NodeData = LogicFlow.NodeData
2727
import Point = LogicFlow.Point
2828
import CommonTheme = LogicFlow.CommonTheme
29+
import PropertiesType = LogicFlow.PropertiesType
2930

3031
import ResizeInfo = ResizeControl.ResizeInfo
3132
import ResizeNodeData = ResizeControl.ResizeNodeData
3233
import PCTResizeParams = ResizeControl.PCTResizeParams
3334

34-
export interface IBaseNodeModel extends Model.BaseModel {
35+
export interface IBaseNodeModel<P extends PropertiesType>
36+
extends Model.BaseModel<P> {
3537
/**
3638
* model基础类型，固定为node
3739
*/
3840
readonly BaseType: ElementType.NODE
41+
properties: P
3942

4043
isDragging: boolean
4144
isShowAnchor: boolean
@@ -45,7 +48,9 @@ export interface IBaseNodeModel extends Model.BaseModel {
4548
setIsShowAnchor: (isShowAnchor: boolean) => void
4649
}
4750

48-
export class BaseNodeModel implements IBaseNodeModel {
51+
export class BaseNodeModel<P extends PropertiesType = PropertiesType>
52+
implements IBaseNodeModel<P>
53+
{
4954
readonly BaseType = ElementType.NODE
5055
static BaseType: ElementType = ElementType.NODE
5156

@@ -61,7 +66,7 @@ export class BaseNodeModel implements IBaseNodeModel {
6166
draggable: false,
6267
editable: true,
6368
}
64-
@observable properties: Record<string, unknown> = {}
69+
@observable properties: P
6570
// 形状属性
6671
@observable private _width = 100
6772
public get width() {
@@ -138,9 +143,9 @@ export class BaseNodeModel implements IBaseNodeModel {
138143
hasSetSourceRules = false; // 用来限制rules的重复值
139144
[propName: string]: any // 支持用户自定义属性
140145

141-
constructor(data: NodeConfig, graphModel: GraphModel) {
146+
constructor(data: NodeConfig<P>, graphModel: GraphModel) {
142147
this.graphModel = graphModel
143-
this.properties = data.properties || {}
148+
this.properties = data.properties ?? ({} as P)
144149

145150
this.initNodeData(data)
146151
this.setAttributes()

‎packages/core/src/model/node/CircleNodeModel.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@ export type ICircleNodeProperties = {
1818
[key: string]: any
1919
}
2020

21-
export class CircleNodeModel extends BaseNodeModel {
21+
export class CircleNodeModel<
22+
P extends ICircleNodeProperties = ICircleNodeProperties,
23+
> extends BaseNodeModel<P> {
2224
modelType = ModelType.CIRCLE_NODE
23-
@observable properties: ICircleNodeProperties = {}
25+
// @observable properties: ICircleNodeProperties = {}
2426
@observable r = 50
2527

2628
@computed get width(): number {
@@ -31,9 +33,9 @@ export class CircleNodeModel extends BaseNodeModel {
3133
return this.r * 2
3234
}
3335

34-
constructor(data: NodeConfig, graphModel: GraphModel) {
36+
constructor(data: NodeConfig<P>, graphModel: GraphModel) {
3537
super(data, graphModel)
36-
this.properties = data.properties || {}
38+
// this.properties = data.properties || {}
3739

3840
this.setAttributes()
3941
}

‎packages/core/src/model/node/DiamondNodeModel.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,20 @@ export type IDiamondNodeProperties = {
1818
style?: LogicFlow.CommonTheme
1919
textStyle?: LogicFlow.CommonTheme
2020

21-
[key: string]: any
21+
[key: string]: unknown
2222
}
2323

24-
export class DiamondNodeModel extends BaseNodeModel {
24+
export class DiamondNodeModel<
25+
P extends IDiamondNodeProperties = IDiamondNodeProperties,
26+
> extends BaseNodeModel<P> {
2527
modelType = ModelType.DIAMOND_NODE
2628
@observable rx = 30
2729
@observable ry = 50
28-
@observable properties: IDiamondNodeProperties = {}
30+
// @observable properties: IDiamondNodeProperties = {}
2931

30-
constructor(data: NodeConfig, graphModel: GraphModel) {
32+
constructor(data: NodeConfig<P>, graphModel: GraphModel) {
3133
super(data, graphModel)
32-
this.properties = data.properties || {}
34+
// this.properties = data.properties || {}
3335

3436
this.setAttributes()
3537
}

‎packages/core/src/model/node/EllipseNodeModel.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,20 @@ export type IEllipseNodeProperties = {
1616
style?: LogicFlow.CommonTheme
1717
textStyle?: LogicFlow.CommonTheme
1818

19-
[key: string]: any
19+
[key: string]: unknown
2020
}
2121

22-
export class EllipseNodeModel extends BaseNodeModel {
22+
export class EllipseNodeModel<
23+
P extends IEllipseNodeProperties = IEllipseNodeProperties,
24+
> extends BaseNodeModel<P> {
2325
modelType = ModelType.ELLIPSE_NODE
2426
@observable rx = 30
2527
@observable ry = 45
26-
@observable properties: IEllipseNodeProperties = {}
28+
// @observable properties: IEllipseNodeProperties = {}
2729

28-
constructor(data: NodeConfig, graphModel: GraphModel) {
30+
constructor(data: NodeConfig<P>, graphModel: GraphModel) {
2931
super(data, graphModel)
30-
this.properties = data.properties || {}
32+
// this.properties = data.properties || {}
3133

3234
this.setAttributes()
3335
}

‎packages/core/src/model/node/HtmlNodeModel.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Model } from '../BaseModel'
33
import { ModelType } from '../../constant'
44

55
import AnchorConfig = Model.AnchorConfig
6-
import { observable } from 'mobx'
76
import LogicFlow from '../../LogicFlow'
87
import GraphModel from '../GraphModel'
98

@@ -13,16 +12,18 @@ export type IHtmlNodeProperties = {
1312
style?: LogicFlow.CommonTheme
1413
textStyle?: LogicFlow.CommonTheme
1514

16-
[key: string]: any
15+
[key: string]: unknown
1716
}
1817

19-
export class HtmlNodeModel extends BaseNodeModel {
18+
export class HtmlNodeModel<
19+
P extends IHtmlNodeProperties = IHtmlNodeProperties,
20+
> extends BaseNodeModel<P> {
2021
modelType = ModelType.HTML_NODE
21-
@observable properties: IHtmlNodeProperties = {}
22+
// @observable properties: IHtmlNodeProperties = {}
2223

23-
constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
24+
constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel) {
2425
super(data, graphModel)
25-
this.properties = data.properties || {}
26+
// this.properties = data.properties || {}
2627

2728
this.setAttributes()
2829
}

‎packages/core/src/model/node/PolygonNodeModel.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,12 @@ export type IPolygonNodeProperties = {
1919
style?: LogicFlow.CommonTheme
2020
textStyle?: LogicFlow.CommonTheme
2121

22-
[key: string]: any
22+
[key: string]: unknown
2323
}
2424

25-
export class PolygonNodeModel extends BaseNodeModel {
25+
export class PolygonNodeModel<
26+
P extends IPolygonNodeProperties = IPolygonNodeProperties,
27+
> extends BaseNodeModel<P> {
2628
modelType = ModelType.POLYGON_NODE
2729
@observable points: PointTuple[] = [
2830
[50, 0],
@@ -36,11 +38,11 @@ export class PolygonNodeModel extends BaseNodeModel {
3638
// [10, 78],
3739
// [160, 198], // 五角星
3840
]
39-
@observable properties: IPolygonNodeProperties = {}
41+
// @observable properties: IPolygonNodeProperties = {}
4042

41-
constructor(data: NodeConfig, graphModel: GraphModel) {
43+
constructor(data: NodeConfig<P>, graphModel: GraphModel) {
4244
super(data, graphModel)
43-
this.properties = data.properties || {}
45+
// this.properties = data.properties || {}
4446

4547
this.setAttributes()
4648
}

‎packages/core/src/model/node/RectNodeModel.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,28 @@ import GraphModel from '../GraphModel'
55
import LogicFlow from '../../LogicFlow'
66
import { ModelType } from '../../constant'
77

8-
export type IRectNodeModel = {
8+
export type IRectNodeProperties = {
99
width?: number
1010
height?: number
1111
radius?: number
1212
style?: LogicFlow.CommonTheme
1313
textStyle?: LogicFlow.CommonTheme
1414

15-
[key: string]: any
15+
[key: string]: unknown
1616
}
1717

18-
export class RectNodeModel extends BaseNodeModel {
18+
export class RectNodeModel<
19+
P extends IRectNodeProperties = IRectNodeProperties,
20+
> extends BaseNodeModel<P> {
1921
modelType = ModelType.RECT_NODE
2022
@observable radius = 0
21-
@observable properties: IRectNodeModel = {}
23+
// @observable properties: P
2224

23-
constructor(data: LogicFlow.NodeConfig, graphModel: GraphModel) {
25+
constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel) {
2426
super(data, graphModel)
2527

2628
// TODO：类字段初始化会覆盖 super、setAttributes 中设置的属性
27-
this.properties = data.properties || {}
29+
// this.properties = data.properties || {}
2830
// TODO: bug here, 上面更新 properties 会触发 setAttributes，下面再主动调用，会导致触发两次
2931
this.setAttributes()
3032
}

‎packages/core/src/view/node/BaseNode.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ type IState = {
2929
isDragging?: boolean
3030
}
3131

32-
export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
32+
export abstract class BaseNode<P extends IProps = IProps> extends Component<
33+
P,
34+
IState
35+
> {
3336
static isObserved: boolean = false
3437
static extendsKey?: string
3538

‎packages/core/src/view/node/CircleNode.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export type ICircleNodeProps = {
77
graphModel: GraphModel
88
}
99

10-
export class CircleNode extends BaseNode<ICircleNodeProps> {
10+
export class CircleNode<
11+
P extends ICircleNodeProps = ICircleNodeProps,
12+
> extends BaseNode<P> {
1113
getShape() {
1214
const { model } = this.props
1315
const { x, y, r } = model

‎packages/core/src/view/node/DiamondNode.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export type IDiamondNodeProps = {
77
graphModel: GraphModel
88
}
99

10-
export class DiamondNode extends BaseNode<IDiamondNodeProps> {
10+
export class DiamondNode<
11+
P extends IDiamondNodeProps = IDiamondNodeProps,
12+
> extends BaseNode<P> {
1113
getShape() {
1214
const { model } = this.props
1315
const style = model.getNodeStyle()

‎packages/core/src/view/node/EllipseNode.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export type IEllipseNodeProps = {
77
graphModel: GraphModel
88
}
99

10-
export class EllipseNode extends BaseNode<IEllipseNodeProps> {
10+
export class EllipseNode<
11+
P extends IEllipseNodeProps = IEllipseNodeProps,
12+
> extends BaseNode<P> {
1113
getShape() {
1214
const { model } = this.props
1315
const style = model.getNodeStyle()

‎packages/core/src/view/node/HtmlNode.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export type IHtmlNodeProps = {
77
graphModel: GraphModel
88
}
99

10-
export class HtmlNode extends BaseNode<IHtmlNodeProps> {
10+
export class HtmlNode<
11+
P extends IHtmlNodeProps = IHtmlNodeProps,
12+
> extends BaseNode<P> {
1113
ref = createRef()
1214
currentProperties?: string
1315
preProperties?: string

‎packages/core/src/view/node/PolygonNode.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export type IPolygonNodeProps = {
77
graphModel: GraphModel
88
}
99

10-
export class PolygonNode extends BaseNode<IPolygonNodeProps> {
10+
export class PolygonNode<
11+
P extends IPolygonNodeProps = IPolygonNodeProps,
12+
> extends BaseNode<P> {
1113
getShape() {
1214
const { model } = this.props
1315
const { x, y, width, height, points } = model as PolygonNodeModel

‎packages/core/src/view/node/RectNode.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ export type IRectNodeProps = {
88
graphModel: GraphModel
99
}
1010

11-
export class RectNode extends BaseNode<IRectNodeProps> {
11+
export class RectNode<
12+
P extends IRectNodeProps = IRectNodeProps,
13+
> extends BaseNode<P> {
1214
getShape(): h.JSX.Element | null {
1315
const { model } = this.props
1416
const style = model.getNodeStyle()

‎packages/core/src/view/node/TextNode.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ export type ITextNodeProps = {
77
graphModel: GraphModel
88
}
99

10-
export class TextNode extends BaseNode<ITextNodeProps> {
10+
export class TextNode<
11+
P extends ITextNodeProps = ITextNodeProps,
12+
> extends BaseNode<P> {
1113
getBackground() {
1214
const { model } = this.props
1315
const style = model.getTextStyle()

0 commit comments

Comments
 (0)