From ae8bb8cd41fae6143899899af6585e2c750bcff4 Mon Sep 17 00:00:00 2001
From: HeatonZ <905342035@qq.com>
Date: Mon, 4 Nov 2024 15:29:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20node-registry=20=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89properties=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/model/node/HtmlNodeModel.ts |  2 +-
 packages/react-node-registry/src/model.ts     | 18 ++++++++----------
 packages/vue-node-registry/src/model.ts       | 18 ++++++++----------
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/model/node/HtmlNodeModel.ts b/packages/core/src/model/node/HtmlNodeModel.ts
index 0486b7642..d715282c0 100644
--- 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
index 12654b148..a9bd64129 100644
--- 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
index 1e9738d43..b777ef39d 100644
--- 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,