refactor(core): 完善 BaseEdge 和 BaseNode 泛型类型，内置节点 props 定义更新

 - feature-examples 类型完善

.vscode/settings.json

@@ -1,6 +1,3 @@
 {
- "cSpell.words": [
- "Logicflow",
- "preact"
- ]
-}
+ "cSpell.words": ["Logicflow", "preact", "Snapline"]
+}

examples/feature-examples/src/pages/graph/index.tsx

@@ -92,7 +92,7 @@ export default function BasicNode() {
  const containerRef = useRef<HTMLDivElement>(null)
 
  const registerElements = (lf: LogicFlow) => {
- const elements = [
+ const elements: LogicFlow.RegisterConfig[] = [
  // edges
  animation,
  connection,
@@ -105,7 +105,7 @@ export default function BasicNode() {
  ]
 
  map(elements, (customElement) => {
- lf.register(customElement)
+ lf.register(customElement as LogicFlow.RegisterConfig)
  })
  }
  const registerEvents = (lf: LogicFlow) => {

examples/feature-examples/src/pages/graph/nodes/combine.ts

@@ -1,6 +1,11 @@
-import { h, BaseNode, BaseNodeModel } from '@logicflow/core'
+import { h, BaseNode, BaseNodeModel, GraphModel } from '@logicflow/core'
 
-export class CombineNode extends BaseNode {
+export type ICombineNodeProps = {
+ model: CombineModel
+ graphModel: GraphModel
+}
+
+export class CombineNode extends BaseNode<ICombineNodeProps> {
  getShape() {
  const { x, y } = this.props.model
  const { fill } = this.props.model.getNodeStyle()

examples/vue3-app/src/views/LogicFlowView.vue

@@ -5,9 +5,9 @@ import LogicFlow, { ElementState, LogicFlowUtil } from '@logicflow/core'
 import { register, getTeleport } from '@logicflow/vue-node-registry'
 import '@logicflow/core/es/index.css'
 
+import ProgressNode from '@/components/LFElements/ProgressNode.vue'
 import { combine, square, star, uml, user } from '../components/LFElements/nodes'
 import { animation, connection } from '../components/LFElements/edges'
-import ProgressNode from '@/components/LFElements/ProgressNode.vue'
 
 const config: Partial<LogicFlow.Options> = {
  isSilentMode: false,

packages/core/src/index.ts

@@ -1,4 +1,3 @@
-// 统一对外导出
 import { observer as mobxObserver } from 'mobx-preact'
 import { createElement as h, createRef, Component } from 'preact/compat'
 import LogicFlow from './LogicFlow'

packages/core/src/view/Anchor.tsx

@@ -22,7 +22,7 @@ interface IProps {
  // y: number;
  // id?: string;
  anchorData: AnchorConfig
- node: BaseNode
+ node: BaseNode<any>
  style?: Record<string, any>
  hoverStyle?: Record<string, any>
  edgeStyle?: Record<string, any>

packages/core/src/view/edge/BaseEdge.tsx

@@ -22,12 +22,22 @@ export type IEdgeState = {
  hover: boolean
 }
 
-export class BaseEdge extends Component<IProps> {
+export abstract class BaseEdge<P extends IProps> extends Component<
+ P,
+ IEdgeState
+> {
+ static isObserved: boolean = false
+ static extendsKey?: string
+
  startTime?: number
  contextMenuTime?: number
  clickTimer?: number
  textRef = createRef()
 
+ constructor() {
+ super()
+ }
+
  /**
  * 不支持重写，请使用getEdge
  */

packages/core/src/view/edge/BezierEdge.tsx

@@ -2,11 +2,16 @@ import BaseEdge, { IEdgeState } from './BaseEdge'
 import { Path } from '../shape'
 import LogicFlow from '../../LogicFlow'
 import { getEndTangent } from '../../util'
-import { BezierEdgeModel } from '../../model'
+import { BezierEdgeModel, GraphModel } from '../../model'
 
 import ArrowInfo = LogicFlow.ArrowInfo
 
-export class BezierEdge extends BaseEdge {
+export type IBezierEdgeProps = {
+ model: BezierEdgeModel
+ graphModel: GraphModel
+}
+
+export class BezierEdge extends BaseEdge<IBezierEdgeProps> {
  /**
  * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
  * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9

packages/core/src/view/edge/LineEdge.tsx

@@ -1,8 +1,14 @@
 import BaseEdge from './BaseEdge'
 import { Line, Path } from '../shape'
 import { getAppendAttributes } from '../../util'
+import { GraphModel, LineEdgeModel } from '../../model'
 
-export class LineEdge extends BaseEdge {
+export type ILineEdgeProps = {
+ model: LineEdgeModel
+ graphModel: GraphModel
+}
+
+export class LineEdge extends BaseEdge<ILineEdgeProps> {
  /**
  * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
  * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9

packages/core/src/view/edge/PolylineEdge.tsx

@@ -2,7 +2,7 @@ import { createElement as h } from 'preact/compat'
 import BaseEdge, { IEdgeState } from './BaseEdge'
 import { Polyline, Path } from '../shape'
 import LogicFlow from '../../LogicFlow'
-import { PolylineEdgeModel } from '../../model'
+import { GraphModel, PolylineEdgeModel } from '../../model'
 import { EventType, SegmentDirection } from '../../constant'
 import { StepDrag, points2PointsList } from '../../util'
 import { getVerticalPointOfLine } from '../../algorithm'
@@ -18,7 +18,12 @@ type AppendAttributesType = {
  strokeDasharray: string
 }
 
-export class PolylineEdge extends BaseEdge {
+export type IPolylineEdgeProps = {
+ model: PolylineEdgeModel
+ graphModel: GraphModel
+}
+
+export class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
  drag
  isDragging?: boolean
  isShowAdjustPointTemp?: boolean

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

@@ -29,13 +29,15 @@ type IState = {
  isDragging?: boolean
 }
 
-export abstract class BaseNode extends Component<IProps, IState> {
+export abstract class BaseNode<P extends IProps> extends Component<P, IState> {
  t: any
  moveOffset?: LogicFlow.OffsetData
 
  static getModel(defaultModel) {
  return defaultModel
  }
+ static isObserved: boolean = false
+ static extendsKey?: string
 
  stepDrag: StepDrag
  mouseUpDrag?: boolean

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

@@ -1,7 +1,13 @@
 import Circle from '../shape/Circle'
 import BaseNode from './BaseNode'
+import { GraphModel, CircleNodeModel } from '../../model'
 
-export class CircleNode extends BaseNode {
+export type ICircleNodeProps = {
+ model: CircleNodeModel
+ graphModel: GraphModel
+}
+
+export class CircleNode extends BaseNode<ICircleNodeProps> {
  getShape() {
  const { model } = this.props
  const { x, y, r } = model

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

@@ -1,7 +1,13 @@
 import BaseNode from './BaseNode'
 import Polygon from '../shape/Polygon'
+import { GraphModel, DiamondNodeModel } from '../../model'
 
-export class DiamondNode extends BaseNode {
+export type IDiamondNodeProps = {
+ model: DiamondNodeModel
+ graphModel: GraphModel
+}
+
+export class DiamondNode extends BaseNode<IDiamondNodeProps> {
  getShape() {
  const { model } = this.props
  const style = model.getNodeStyle()

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

@@ -1,7 +1,13 @@
 import BaseNode from './BaseNode'
 import Ellipse from '../shape/Ellipse'
+import { GraphModel, EllipseNodeModel } from '../../model'
 
-export class EllipseNode extends BaseNode {
+export type IEllipseNodeProps = {
+ model: EllipseNodeModel
+ graphModel: GraphModel
+}
+
+export class EllipseNode extends BaseNode<IEllipseNodeProps> {
  getShape() {
  const { model } = this.props
  const style = model.getNodeStyle()

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

@@ -1,7 +1,13 @@
 import { createRef } from 'preact/compat'
 import BaseNode from './BaseNode'
+import { GraphModel, HtmlNodeModel } from '../../model'
 
-export class HtmlNode extends BaseNode {
+export type IHtmlNodeProps = {
+ model: HtmlNodeModel
+ graphModel: GraphModel
+}
+
+export class HtmlNode extends BaseNode<IHtmlNodeProps> {
  ref = createRef()
  currentProperties?: string
  preProperties?: string

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

@@ -1,8 +1,13 @@
 import BaseNode from './BaseNode'
 import { Polygon } from '../shape'
-import { PolygonNodeModel } from '../../model'
+import { GraphModel, PolygonNodeModel } from '../../model'
 
-export class PolygonNode extends BaseNode {
+export type IPolygonNodeProps = {
+ model: PolygonNodeModel
+ graphModel: GraphModel
+}
+
+export class PolygonNode extends BaseNode<IPolygonNodeProps> {
  getShape() {
  const { model } = this.props
  const { x, y, width, height, points } = model as PolygonNodeModel

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

@@ -1,8 +1,14 @@
 import { createElement as h } from 'preact/compat'
 import BaseNode from './BaseNode'
 import { Rect } from '../shape'
+import { GraphModel, RectNodeModel } from '../../model'
 
-export class RectNode extends BaseNode {
+export type IRectNodeProps = {
+ model: RectNodeModel
+ graphModel: GraphModel
+}
+
+export class RectNode extends BaseNode<IRectNodeProps> {
  getShape(): h.JSX.Element | null {
  const { model } = this.props
  const style = model.getNodeStyle()

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

@@ -1,7 +1,13 @@
 import Rect from '../shape/Rect'
 import BaseNode from './BaseNode'
+import { GraphModel, TextNodeModel } from '../../model'
 
-export class TextNode extends BaseNode {
+export type ITextNodeProps = {
+ model: TextNodeModel
+ graphModel: GraphModel
+}
+
+export class TextNode extends BaseNode<ITextNodeProps> {
  getBackground() {
  const { model } = this.props
  const style = model.getTextStyle()