@logicflow/react-node-registry 0.0.1-beta.0

package/src/model.ts

@@ -0,0 +1,67 @@
+import LogicFlow, { HtmlNodeModel } from '@logicflow/core'
+import { cloneDeep } from 'lodash-es'
+
+export type CustomProperties = {
+  // 形状属性
+  width?: number
+  height?: number
+  radius?: number
+
+  // 文字位置属性
+  refX?: number
+  refY?: number
+
+  // 样式属性
+  style?: LogicFlow.CommonTheme
+  textStyle?: LogicFlow.TextNodeTheme
+}
+
+export class ReactNodeModel extends HtmlNodeModel {
+  setAttributes() {
+    console.log('this.properties', this.properties)
+    const { width, height, radius } = this.properties as CustomProperties
+    if (width) {
+      this.width = width
+    }
+    if (height) {
+      this.height = height
+    }
+    if (radius) {
+      this.radius = radius
+    }
+  }
+
+  getTextStyle(): LogicFlow.TextNodeTheme {
+    // const { x, y, width, height } = this
+    const {
+      refX = 0,
+      refY = 0,
+      textStyle,
+    } = this.properties as CustomProperties
+    const style = super.getTextStyle()
+
+    // 通过 transform 重新设置 text 的位置
+    return {
+      ...style,
+      ...(cloneDeep(textStyle) || {}),
+      transform: `matrix(1 0 0 1 ${refX} ${refY})`,
+    }
+  }
+
+  getNodeStyle(): LogicFlow.CommonTheme {
+    const style = super.getNodeStyle()
+    const {
+      style: customNodeStyle,
+      // radius = 0, // 第二种方式，设置圆角
+    } = this.properties as CustomProperties
+
+    return {
+      ...style,
+      ...(cloneDeep(customNodeStyle) || {}),
+      // rx: radius,
+      // ry: radius,
+    }
+  }
+}
+
+export default ReactNodeModel

package/src/portal.ts

@@ -0,0 +1,79 @@
+import React, { useReducer } from 'react'
+
+export namespace Portal {
+  let active = false
+  let dispatch: React.Dispatch<Action>
+
+  interface Action {
+    type: 'add' | 'remove'
+    payload: Partial<Payload>
+  }
+
+  interface Payload {
+    id: string
+    portal: React.ReactPortal
+  }
+
+  const reducer = (state: Payload[], action: Action) => {
+    const payload = action.payload as Payload
+    switch (action.type) {
+      case 'add': {
+        const index = state.findIndex((item) => item.id === payload.id)
+        if (index >= 0) {
+          state[index] = payload
+          return [...state]
+        }
+        return [...state, payload]
+      }
+      case 'remove': {
+        const index = state.findIndex((item) => item.id === payload.id)
+        if (index >= 0) {
+          const result = [...state]
+          result.splice(index, 1)
+          return result
+        }
+        break
+      }
+      default: {
+        break
+      }
+    }
+    return state
+  }
+
+  export function connect(id: string, portal: React.ReactPortal) {
+    if (active) {
+      dispatch({
+        type: 'add',
+        payload: {
+          id,
+          portal,
+        },
+      })
+    }
+  }
+
+  export function disconnect(id: string) {
+    if (active) {
+      dispatch({
+        type: 'remove',
+        payload: { id },
+      })
+    }
+  }
+
+  export function isActive() {
+    return active
+  }
+
+  export function getProvider() {
+    return () => {
+      active = true
+      const [items, mutate] = useReducer(reducer, [])
+      dispatch = mutate
+      return React.createElement(React.Fragment, {
+        children: items.map((item) => item.portal),
+      })
+    }
+  }
+}

package/src/registry.ts

@@ -0,0 +1,47 @@
+import LogicFlow, { BaseNodeModel, GraphModel } from '@logicflow/core'
+import ReactNodeView from './view'
+import ReactNodeModel from './model'
+import RegisterConfig = LogicFlow.RegisterConfig
+
+export type ReactNodeProps = {
+  node: BaseNodeModel
+  graph: GraphModel
+}
+
+export type ReactNodeConfig = {
+  type: string
+  component: React.ComponentType<ReactNodeProps>
+  effect?: (keyof LogicFlow.PropertiesType)[]
+} & Partial<RegisterConfig>
+
+export const reactNodesMap: Record<
+  string,
+  {
+    component: React.ComponentType<ReactNodeProps>
+    effect?: (keyof LogicFlow.PropertiesType)[]
+  }
+> = {}
+
+export function register(config: ReactNodeConfig, lf: LogicFlow) {
+  const {
+    type,
+    component,
+    effect,
+    view: CustomNodeView,
+    model: CustomNodeModel,
+  } = config
+
+  if (!type) {
+    throw new Error('You should specify type in config')
+  }
+  reactNodesMap[type] = {
+    component,
+    effect,
+  }
+
+  lf.register({
+    type,
+    view: CustomNodeView || ReactNodeView,
+    model: CustomNodeModel || ReactNodeModel,
+  })
+}

package/src/view.ts

@@ -0,0 +1,95 @@
+import { createElement, ReactPortal } from 'react'
+import { createRoot, Root } from 'react-dom/client'
+import { HtmlNode } from '@logicflow/core'
+import { Wrapper } from './wrapper'
+import { Portal } from './portal'
+import { createPortal } from 'react-dom'
+
+export class ReactNodeView extends HtmlNode {
+  root?: Root
+
+  protected targetId() {
+    return `${this.props.graphModel.flowId}:${this.props.model.id}`
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount()
+    this.unmount()
+  }
+
+  setHtml(rootEl: SVGForeignObjectElement) {
+    const el = document.createElement('div')
+    el.className = 'custom-react-node-content'
+
+    this.renderReactComponent(el)
+    rootEl.appendChild(el)
+  }
+
+  confirmUpdate(_rootEl: SVGForeignObjectElement) {
+    // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
+    console.log('_rootEl', _rootEl)
+  }
+
+  protected renderReactComponent(container: HTMLElement) {
+    console.log('render render render ===>>>')
+    this.unmountReactComponent()
+    const { model, graphModel } = this.props
+
+    if (container) {
+      const elem = createElement(Wrapper, {
+        node: model,
+        graph: graphModel,
+      })
+
+      if (Portal.isActive()) {
+        const portal = createPortal(elem, container, model.id) as ReactPortal
+        Portal.connect(this.targetId(), portal)
+      } else {
+        this.root = createRoot(container)
+        this.root.render(elem)
+      }
+    }
+  }
+
+  protected unmountReactComponent() {
+    if (this.rootEl && this.root) {
+      this.root.unmount()
+      this.root = undefined
+      this.rootEl.innerHTML = ''
+    }
+  }
+
+  // DONE: 是否需要 unmount 或 destroy 方法，在销毁后做一些处理
+  unmount() {
+    this.unmountReactComponent()
+  }
+
+  // TODO: 确认是否需要重写 onMouseDown 方法
+  // handleMouseDown(ev: MouseEvent, x: number, y: number) {
+  //   const target = ev.target as Element
+  //   const tagName = target.tagName.toLowerCase()
+  //   if (tagName === 'input') {
+  //     const type = target.getAttribute('type')
+  //     if (
+  //       type == null ||
+  //       [
+  //         'text',
+  //         'password',
+  //         'number',
+  //         'email',
+  //         'search',
+  //         'tel',
+  //         'url',
+  //       ].includes(type)
+  //     ) {
+  //       return
+  //     }
+  //   }
+  //
+  //   console.log('pointer position, x:', x, 'y: ', y)
+  //   // TODO
+  //   // super.handleMouseDown(ev)
+  // }
+}
+
+export default ReactNodeView

package/src/wrapper.tsx

@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react'
+import { BaseNodeModel, EventType, GraphModel } from '@logicflow/core'
+import { reactNodesMap } from './registry'
+
+export interface IWrapperProps {
+  node: BaseNodeModel
+  graph: GraphModel
+}
+
+export interface IWrapperState {
+  tick: number
+}
+
+export class Wrapper extends PureComponent<IWrapperProps, IWrapperState> {
+  constructor(props: IWrapperProps) {
+    super(props)
+    this.state = { tick: 0 }
+  }
+
+  componentDidMount() {
+    // TODO: 讨论设计，如果节点有「副作用」属性配置的处理逻辑
+    const { node, graph } = this.props
+    graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData) => {
+      const keys = eventData.keys as string[]
+      const content = reactNodesMap[node.type]
+
+      if (content && eventData.id === node.id) {
+        const { effect } = content
+
+        // 如果没有定义 effect，则默认更新；如果定义了 effect，则只有在 effect 中的属性发生变化时才更新
+        if (!effect || keys.some((key) => effect.includes(key))) {
+          this.setState({ tick: this.state.tick + 1 })
+        }
+      }
+    })
+  }
+
+  clone(elem: React.ReactElement) {
+    const { node, graph } = this.props
+
+    return typeof elem.type === 'string'
+      ? React.cloneElement(elem)
+      : React.cloneElement(elem, { node, graph })
+  }
+
+  render() {
+    const { node } = this.props
+    const content = reactNodesMap[node.type]
+
+    if (!content) return null
+
+    const { component } = content
+    if (React.isValidElement(component)) {
+      return this.clone(component)
+    }
+    const FC = component as React.FC
+    return this.clone(<FC />)
+  }
+}
+
+export default Wrapper

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
+    "jsx": "react",
+    "target": "es6",
+    "lib": ["DOM", "ES2020"]
+  },
+  "include": ["src/**/*", "**/*.d.ts"],
+  "exclude": ["node_modules", "**/*.spec.ts", "es", "lib", "dist"]
+}