@logicflow/react-node-registry 1.2.0 → 1.2.1

package/src/registry.ts

@@ -1,47 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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) {
-    this.unmountReactComponent()
-    const { model, graphModel } = this.props
-
-    if (container) {
-      // 基于自定义节点新建 React 元素
-      const elem = createElement(Wrapper, {
-        node: model,
-        graph: graphModel,
-      })
-
-      if (Portal.isActive()) {
-        // 使用 Portal
-        const portal = createPortal(elem, container, model.id) as ReactPortal
-        Portal.connect(this.targetId(), portal)
-      } else {
-        // 创建 Root 元素
-        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

@@ -1,61 +0,0 @@
-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