feat: node-registry 自定义properties类型

didi · Nov 7, 2024 · ae8bb8c · ae8bb8c
1 parent e9f097c
commit ae8bb8c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 21 deletions.
diff --git a/packages/core/src/model/node/HtmlNodeModel.ts b/packages/core/src/model/node/HtmlNodeModel.ts
@@ -6,7 +6,7 @@ import AnchorConfig = Model.AnchorConfig
 import LogicFlow from '../../LogicFlow'
 import GraphModel from '../GraphModel'
 
-export type IHtmlNodeProperties = {
+export interface IHtmlNodeProperties {
   width?: number
   height?: number
   style?: LogicFlow.CommonTheme

diff --git a/packages/react-node-registry/src/model.ts b/packages/react-node-registry/src/model.ts
@@ -1,7 +1,7 @@
-import LogicFlow, { HtmlNodeModel } from '@logicflow/core'
+import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core'
 import { cloneDeep } from 'lodash-es'
 
-export type CustomProperties = {
+export interface ReactCustomProperties extends IHtmlNodeProperties {
   // 形状属性
   width?: number
   height?: number
@@ -16,10 +16,12 @@ export type CustomProperties = {
   textStyle?: LogicFlow.TextNodeTheme
 }
 
-export class ReactNodeModel extends HtmlNodeModel {
+export class ReactNodeModel<
+  P extends ReactCustomProperties = ReactCustomProperties,
+> extends HtmlNodeModel<P> {
   setAttributes() {
     console.log('this.properties', this.properties)
-    const { width, height, radius } = this.properties as CustomProperties
+    const { width, height, radius } = this.properties
     if (width) {
       this.width = width
     }
@@ -33,11 +35,7 @@ export class ReactNodeModel extends HtmlNodeModel {
 
   getTextStyle(): LogicFlow.TextNodeTheme {
     // const { x, y, width, height } = this
-    const {
-      refX = 0,
-      refY = 0,
-      textStyle,
-    } = this.properties as CustomProperties
+    const { refX = 0, refY = 0, textStyle } = this.properties
     const style = super.getTextStyle()
 
     // 通过 transform 重新设置 text 的位置
@@ -53,7 +51,7 @@ export class ReactNodeModel extends HtmlNodeModel {
     const {
       style: customNodeStyle,
       // radius = 0, // 第二种方式，设置圆角
-    } = this.properties as CustomProperties
+    } = this.properties
 
     return {
       ...style,

diff --git a/packages/vue-node-registry/src/model.ts b/packages/vue-node-registry/src/model.ts
@@ -1,7 +1,7 @@
-import LogicFlow, { HtmlNodeModel } from '@logicflow/core'
+import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core'
 import { cloneDeep, isNil } from 'lodash-es'
 
-export type CustomProperties = {
+export interface VueCustomProperties extends IHtmlNodeProperties {
   // 形状属性
   width?: number
   height?: number
@@ -16,10 +16,12 @@ export type CustomProperties = {
   textStyle?: LogicFlow.TextNodeTheme
 }
 
-export class VueNodeModel extends HtmlNodeModel {
+export class VueNodeModel<
+  P extends VueCustomProperties = VueCustomProperties,
+> extends HtmlNodeModel<P> {
   setAttributes() {
     // DONE: 解决 width、height、radius 为 0 时的问题
-    const { width, height, radius } = this.properties as CustomProperties
+    const { width, height, radius } = this.properties
     if (!isNil(width)) {
       this.width = width
     }
@@ -32,11 +34,7 @@ export class VueNodeModel extends HtmlNodeModel {
   }
 
   getTextStyle(): LogicFlow.TextNodeTheme {
-    const {
-      refX = 0,
-      refY = 0,
-      textStyle,
-    } = this.properties as CustomProperties
+    const { refX = 0, refY = 0, textStyle } = this.properties
     const style = super.getTextStyle()
 
     // 通过 transform 重新设置 text 的位置
@@ -52,7 +50,7 @@ export class VueNodeModel extends HtmlNodeModel {
     const {
       style: customNodeStyle,
       // radius = 0, // 第二种方式，设置圆角
-    } = this.properties as CustomProperties
+    } = this.properties
 
     return {
       ...style,