feat: release @logicflow/core & extension 2.0.0-beta.8

- 解决 BaseEdgeModel properties 类型的问题
didi · Jul 31, 2024 · 0c39da4 · 0c39da4
1 parent 40176c5
commit 0c39da4
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 13 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/core/src/LogicFlow.tsx b/packages/core/src/LogicFlow.tsx
@@ -1389,6 +1389,9 @@ export namespace LogicFlow {
     rx?: number
     ry?: number
 
+    style?: LogicFlow.CommonTheme
+    textStyle?: LogicFlow.CommonTheme
+
     [key: string]: any
   }
   export type AttributesType = Record<string, any>
@@ -1551,7 +1554,7 @@ export namespace LogicFlow {
     [key: string]: unknown
   }
 
-  export interface EdgeConfig {
+  export interface EdgeConfig<P extends PropertiesType = PropertiesType> {
     id?: string
     type?: string // TODO: 将所有类型选项列出来；LogicFlow 内部默认为 polyline
 
@@ -1564,7 +1567,7 @@ export namespace LogicFlow {
     text?: TextConfig | string
     pointsList?: Point[]
     zIndex?: number
-    properties?: PropertiesType
+    properties?: P
   }
 
   export interface EdgeData extends EdgeConfig {
@@ -1830,7 +1833,7 @@ export namespace LogicFlow {
   export type FocusOnArgsType = FocusOnById | FocusOnByCoordinate
 
   export type BaseNodeModelCtor = typeof BaseNodeModel<PropertiesType>
-  export type BaseEdgeModelCtor = typeof BaseEdgeModel
+  export type BaseEdgeModelCtor = typeof BaseEdgeModel<PropertiesType>
 
   export type GraphElementCtor = BaseNodeModelCtor | BaseEdgeModelCtor
   export type GraphElement = BaseNodeModel | BaseEdgeModel

diff --git a/packages/core/src/model/edge/BaseEdgeModel.ts b/packages/core/src/model/edge/BaseEdgeModel.ts
@@ -22,12 +22,15 @@ import Point = LogicFlow.Point
 import EdgeData = LogicFlow.EdgeData
 import EdgeConfig = LogicFlow.EdgeConfig
 import TextConfig = LogicFlow.TextConfig
+import PropertiesType = LogicFlow.PropertiesType
 
-export interface IBaseEdgeModel extends Model.BaseModel {
+export interface IBaseEdgeModel<P extends PropertiesType>
+  extends Model.BaseModel<P> {
   /**
    * model 基础类型，固定为 edge
    */
   readonly BaseType: ElementType.EDGE
+  properties: P
 
   sourceNodeId: string
   targetNodeId: string
@@ -46,7 +49,9 @@ export interface IBaseEdgeModel extends Model.BaseModel {
   arrowConfig?: LogicFlow.ArrowConfig
 }
 
-export class BaseEdgeModel implements IBaseEdgeModel {
+export class BaseEdgeModel<P extends PropertiesType = PropertiesType>
+  implements IBaseEdgeModel<P>
+{
   readonly BaseType = ElementType.EDGE
   static BaseType: ElementType = ElementType.EDGE
 
@@ -66,7 +71,7 @@ export class BaseEdgeModel implements IBaseEdgeModel {
     draggable: false,
     editable: true,
   }
-  @observable properties: Record<string, unknown> = {}
+  @observable properties: P
   @observable points = ''
   @observable pointsList: Point[] = []
 
@@ -104,8 +109,10 @@ export class BaseEdgeModel implements IBaseEdgeModel {
   };
   [propName: string]: unknown // 支持自定义
 
-  constructor(data: EdgeConfig, graphModel: GraphModel) {
+  constructor(data: EdgeConfig<P>, graphModel: GraphModel) {
     this.graphModel = graphModel
+    this.properties = data.properties ?? ({} as P)
+
     this.initEdgeData(data)
     this.setAttributes()
   }
@@ -420,7 +427,12 @@ export class BaseEdgeModel implements IBaseEdgeModel {
    */
   @action
   setProperty(key: string, val: any): void {
-    this.properties[key] = formatData(val)
+    const preProperties = toJS(this.properties)
+    this.properties = {
+      ...preProperties,
+      [key]: formatData(val),
+    }
+
     this.setAttributes()
   }
 

diff --git a/packages/core/src/model/node/BaseNodeModel.ts b/packages/core/src/model/node/BaseNodeModel.ts
@@ -370,7 +370,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
     const { textStyle = {} } = this.properties
     return {
       ...cloneDeep(nodeText),
-      ...cloneDeep(textStyle as object),
+      ...cloneDeep(textStyle),
     }
   }
 

diff --git a/packages/core/src/model/node/TextNodeModel.ts b/packages/core/src/model/node/TextNodeModel.ts
@@ -3,8 +3,18 @@ import { computed } from 'mobx'
 import BaseNodeModel from './BaseNodeModel'
 import { ModelType } from '../../constant'
 import { getSvgTextWidthHeight } from '../../util'
+import LogicFlow from '../../LogicFlow'
 
-export class TextNodeModel extends BaseNodeModel {
+export type ITextNodeProperties = {
+  style?: LogicFlow.CommonTheme
+  textStyle?: LogicFlow.CommonTheme
+
+  [key: string]: unknown
+}
+
+export class TextNodeModel<
+  P extends ITextNodeProperties = ITextNodeProperties,
+> extends BaseNodeModel<P> {
   modelType = ModelType.TEXT_NODE
 
   getTextStyle() {
@@ -14,9 +24,10 @@ export class TextNodeModel extends BaseNodeModel {
     return {
       ...style,
       ...cloneDeep(text),
-      ...cloneDeep(textStyle as object),
+      ...cloneDeep(textStyle),
     }
   }
+
   @computed get width(): number {
     const rows = String(this.text.value).split(/[\r\n]/g)
     const { fontSize } = this.getTextStyle()

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.8",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",