fix: 主要修复 TextEditTool 无效的 bug，后注原因

- TextEditTool 组件更新时，原先的 graphModel 和 LogicFlow props 不会触发组件的更新，通过将 textEditElement 传入触发组件更新 - 移除代码中无用的 console - 更新依赖 @babel/plugin-proposal-class-properties -> @babel/plugin-transform-class-properties - EventArgs 相关类型由 unknown 改为 any
didi · Jun 4, 2024 · 0800bfb · 0800bfb
1 parent e7b048b
commit 0800bfb
Show file tree

Hide file tree

Showing 15 changed files with 1,933 additions and 36 deletions.
diff --git a/examples/engine-browser-examples/src/pages/graph/index.tsx b/examples/engine-browser-examples/src/pages/graph/index.tsx
@@ -181,6 +181,7 @@ export default function BasicNode() {
         style: {
           inputText: {
             background: 'black',
+            color: 'white',
           },
         },
         // 全局自定义id

diff --git a/examples/feature-examples/src/pages/graph/index.tsx b/examples/feature-examples/src/pages/graph/index.tsx
@@ -168,6 +168,7 @@ export default function BasicNode() {
         style: {
           inputText: {
             background: 'black',
+            color: 'white',
           },
         },
         // 全局自定义id
@@ -190,6 +191,7 @@ export default function BasicNode() {
 
       lf.render(data)
       lfRef.current = lf
+      ;(window as any).lf = lf
     }
   }, [])
 

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "build:cjs": "tsc --module commonjs --target es6 --outDir ./lib",
     "build:umd": "pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs",
     "build:dev": "pnpm run --if-present build:less && run-p -s build:cjs build:esm",
-    "build:watch": "run-p -s build:less build:watch:esm",
+    "build:watch": "run-p -s build:less build:watch:esm build:watch:cjs",
     "build:watch:esm": "run-s -s 'build:esm -w'",
     "build:watch:cjs": "run-s -s 'build:cjs -w'",
     "build": "run-p -s build:dev build:umd",
@@ -73,7 +73,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.8",
-    "@babel/plugin-transform-class-properties": "7.24.6",
+    "@babel/plugin-transform-class-properties": "^7.24.6",
     "@babel/plugin-proposal-decorators": "^7.22.10",
     "@babel/plugin-transform-react-jsx": "^7.22.5",
     "@babel/preset-env": "^7.22.7",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -4,7 +4,7 @@
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "dist/index.js",
   "module": "es/index.js",
-  "types": "es/index.d.ts",
+  "types": "lib/index.d.ts",
   "scripts": {
     "clean:turbo": "rss",
     "clean:build": "rss",

diff --git a/packages/core/src/LogicFlow.tsx b/packages/core/src/LogicFlow.tsx
@@ -1,6 +1,6 @@
 import { createElement as h, render, Component } from 'preact/compat'
-import { observer } from 'mobx-preact'
 import { cloneDeep, forEach } from 'lodash-es'
+import { observer } from '.'
 import { Options as LFOptions } from './options'
 import {
   BaseNodeModel,

diff --git a/packages/core/src/event/eventEmitter.ts b/packages/core/src/event/eventEmitter.ts
@@ -2,9 +2,9 @@ export interface EventType {
   readonly callback: (params?: unknown) => unknown
   readonly once: boolean
 }
-export type EventArgs = Record<string, unknown>
-export type EventsType = Record<string, EventType[]>
-export type CallbackType = (...args: unknown[]) => void
+export type EventArgs = { [key: string]: any }
+export type EventsType = { [key: string]: EventType[] }
+export type CallbackType = (...args: any[]) => void
 
 const WILDCARD = '*'
 

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,6 +1,6 @@
 // 统一对外导出
 import { observer as mobxObserver } from 'mobx-preact'
-import { createElement as h, Component } from 'preact/compat'
+import { createElement as h, createRef, Component } from 'preact/compat'
 import LogicFlow from './LogicFlow'
 
 import * as LogicFlowUtil from './util'
@@ -9,7 +9,7 @@ export function observer<P>(props: P) {
   return mobxObserver(props as any)
 }
 
-export { LogicFlow, h, Component, LogicFlowUtil }
+export { LogicFlow, h, createRef, Component, LogicFlowUtil }
 
 export * from './view'
 export * from './model'

diff --git a/packages/core/src/model/GraphModel.ts b/packages/core/src/model/GraphModel.ts
@@ -875,7 +875,6 @@ export class GraphModel {
       },
       this,
     )
-    console.log('edgeModel', edgeModel)
 
     const edgeData = edgeModel.getData()
     this.edges.push(edgeModel)

diff --git a/packages/core/src/model/node/HtmlNodeModel.ts b/packages/core/src/model/node/HtmlNodeModel.ts
@@ -1,9 +1,12 @@
 import BaseNodeModel from './BaseNodeModel'
+import { Model } from '../BaseModel'
 import { ModelType } from '../../constant'
 
+import AnchorConfig = Model.AnchorConfig
+
 export class HtmlNodeModel extends BaseNodeModel {
   modelType = ModelType.HTML_NODE
-  getDefaultAnchor() {
+  getDefaultAnchor(): AnchorConfig[] {
     const { x, y, width, height } = this
     return [
       { x, y: y - height / 2, id: `${this.id}_0` },

diff --git a/packages/core/src/tool/TextEditTool.tsx b/packages/core/src/tool/TextEditTool.tsx
@@ -1,12 +1,13 @@
-import { createRef, Component } from 'preact/compat'
-import { ElementState, observer } from '..'
+import { createRef, Component } from 'preact'
+import { BaseEdgeModel, BaseNodeModel, ElementState, observer } from '..'
 import LogicFlow from '../LogicFlow'
 import { GraphModel } from '../model'
 import { ElementType, EventType, ModelType } from '../constant'
 
 type IProps = {
-  logicFlow: LogicFlow
+  textEditElement?: BaseNodeModel | BaseEdgeModel
   graphModel: GraphModel
+  logicFlow: LogicFlow
 }
 
 type IState = {
@@ -37,8 +38,8 @@ export class TextEditTool extends Component<IProps, IState> {
   }
 
   static getDerivedStateFromProps(props: IProps): IState | null {
-    const { graphModel } = props
-    const { textEditElement, transformModel, theme } = graphModel
+    const { textEditElement, graphModel } = props
+    const { transformModel, theme } = graphModel
     const { inputText } = theme
 
     let autoStyle
@@ -99,7 +100,6 @@ export class TextEditTool extends Component<IProps, IState> {
         }
       }
 
-      console.log('autoStyle --->>>', autoStyle)
       const { x, y } = textEditElement.text
       const [left, top] = transformModel.CanvasPointToHtmlPoint([x, y])
       return {

diff --git a/packages/core/src/view/Rotate.tsx b/packages/core/src/view/Rotate.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { Component } from 'preact/compat'
 import { map, reduce } from 'lodash-es'
 import Circle from './shape/Circle'

diff --git a/packages/core/src/view/edge/BaseEdge.tsx b/packages/core/src/view/edge/BaseEdge.tsx
@@ -104,8 +104,6 @@ export class BaseEdge extends Component<IProps> {
     const { id } = model
     const { refY = 0, refX = 2 } = model.getArrowStyle()
     const [start, end] = this.getLastTwoPoints()
-    console.log('start', start)
-    console.log('end', end)
     let theta: string | number = 'auto'
     if (start !== null && end !== null) {
       theta = degrees(
@@ -116,7 +114,6 @@ export class BaseEdge extends Component<IProps> {
         }),
       )
     }
-    console.log('theta', theta)
     return (
       <g>
         <defs>

diff --git a/packages/core/src/view/overlay/ToolOverlay.tsx b/packages/core/src/view/overlay/ToolOverlay.tsx
@@ -28,9 +28,11 @@ export class ToolOverlay extends Component<IProps> {
    */
   getTools() {
     const { tool, graphModel } = this.props
+    const { textEditElement } = graphModel
     const tools = tool.getTools()
-    const components = tools.map((item) =>
-      h(item, {
+    const components = tools.map((t) =>
+      h(t, {
+        textEditElement,
         graphModel,
         logicFlow: tool.instance,
       }),

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -4,7 +4,7 @@
   "description": "LogicFlow Extensions",
   "main": "dist/index.js",
   "module": "es/index.js",
-  "types": "es/index.d.ts",
+  "types": "lib/index.d.ts",
   "scripts": {
     "clean:turbo": "rss",
     "clean:build": "rss",