@logicflow/react-node-registry 1.2.0-alpha.7 → 1.2.1

package/src/model.ts

@@ -1,140 +0,0 @@
-import LogicFlow, {
-  HtmlNodeModel,
-  IHtmlNodeProperties,
-  BaseNodeModel,
-  GraphModel,
-} from '@logicflow/core'
-import { cloneDeep, isNil, isArray, isEmpty } from 'lodash-es'
-
-import NodeConfig = LogicFlow.NodeConfig
-
-export type NodeAction = {
-  name: string
-  callback?: (node: BaseNodeModel, graph: GraphModel) => void
-}
-
-export interface ReactCustomProperties extends IHtmlNodeProperties {
-  // 形状属性
-  width?: number
-  height?: number
-  radius?: number
-
-  // 文字位置属性
-  refX?: number
-  refY?: number
-
-  // 样式属性
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.TextNodeTheme
-  // 标题配置
-  _showTitle?: boolean
-  _title?: string
-  _icon?: string
-  _titleHeight?: number
-  _expanded?: boolean
-}
-
-export class ReactNodeModel<
-  P extends ReactCustomProperties = ReactCustomProperties,
-> extends HtmlNodeModel<P> {
-  private __baseHeight?: number
-  public __actions?: {
-    name: string
-    callback?: (node: BaseNodeModel, graph: GraphModel) => void
-  }[]
-  constructor(data: NodeConfig<P>, graphModel: GraphModel) {
-    super(data, graphModel)
-    const { properties } = data
-    if (properties) {
-      const { _showTitle = false, style = {} } = properties
-      if (_showTitle) {
-        this.minWidth = 160
-        this.minHeight = 80
-        this.text.editable = false
-        // 判断当前节点宽高是否小于最小宽高，如果是，强制设置为最小宽高
-        const newWidth = this.width < this.minWidth ? this.minWidth : this.width
-        const newHeight =
-          this.height < this.minHeight ? this.minHeight : this.height
-
-        this.setProperties({
-          _expanded: false,
-          ...properties,
-          style: {
-            overflow: 'visible',
-            ...cloneDeep(style),
-          },
-          width: newWidth,
-          height: newHeight,
-        })
-        this.setNodeActions([
-          {
-            name: '复制',
-            callback: (nodeModel: BaseNodeModel, graphModel: GraphModel) => {
-              graphModel.cloneNode(nodeModel.id)
-            },
-          },
-          {
-            name: '删除',
-            callback: (nodeModel: BaseNodeModel, graphModel: GraphModel) => {
-              graphModel.deleteNode(nodeModel.id)
-            },
-          },
-        ])
-      }
-    }
-  }
-
-  setAttributes() {
-    const { width, height, radius, _showTitle, _titleHeight } = this.properties
-    if (!isNil(width)) {
-      this.width = width
-    }
-    if (!isNil(height)) {
-      this.height = height
-    }
-    if (!isNil(radius)) {
-      this.radius = radius
-    }
-    if (this.__baseHeight === undefined) {
-      this.__baseHeight = isNil(height) ? this.height : height
-    }
-    const extra = _showTitle ? (_titleHeight ?? 28) : 0
-    const base = isNil(height) ? this.__baseHeight : height
-    this.height = base + extra
-  }
-
-  getTextStyle(): LogicFlow.TextNodeTheme {
-    // const { x, y, width, height } = this
-    const { refX = 0, refY = 0, textStyle } = this.properties
-    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
-
-    return {
-      ...style,
-      ...(cloneDeep(customNodeStyle) || {}),
-      // rx: radius,
-      // ry: radius,
-    }
-  }
-
-  setNodeActions(actions: NodeAction[]) {
-    this.__actions =
-      isArray(actions) && !isEmpty(actions) ? cloneDeep(actions) : []
-  }
-}
-
-export default ReactNodeModel

package/src/portal.ts

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

@@ -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/style/index.less

@@ -1,140 +0,0 @@
-.lf-vue-node-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 6px;
-  color: #474747;
-  border-radius: 12px;
-  box-shadow: 0 0 10px #cad2e15f;
-}
-
-.lf-vue-node-content-wrap {
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: center;
-}
-
-.lf-vue-node-title {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  box-sizing: border-box;
-  margin-bottom: 4px;
-  padding: 0 8px;
-  backdrop-filter: saturate(180%) blur(4px);
-
-  &-expanded {
-    margin-bottom: 6px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #eaeaea;
-  }
-}
-
-@supports not (backdrop-filter: blur(1px)) {
-  .lf-vue-node-title {
-    backdrop-filter: none;
-  }
-}
-
-.lf-vue-node-title-left {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  min-width: 0;
-}
-
-.lf-vue-node-title-icon {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  color: #666;
-  font-style: normal;
-  line-height: 16px;
-  text-align: center;
-}
-
-.lf-vue-node-title-text {
-  overflow: hidden;
-  color: #333;
-  font-weight: 500;
-  font-size: 14px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.lf-vue-node-title-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.lf-vue-node-title-expand,
-.lf-vue-node-title-more {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s ease;
-  appearance: none;
-}
-
-.lf-vue-node-title-expand:hover,
-.lf-vue-node-title-more:hover {
-  background: rgb(0 0 0 / 6%);
-}
-
-.lf-vue-node-title-expand-icon {
-  color: #666;
-  font-style: normal;
-  transition: transform 0.3s ease;
-}
-
-.lf-vue-node-title-more-icon {
-  color: #666;
-  font-style: normal;
-}
-
-.lf-vue-node-title-tooltip {
-  position: absolute;
-  top: -50px;
-  right: -135px;
-  min-width: 120px;
-  max-width: 240px;
-  padding: 6px 8px;
-  background: #fff;
-  border: 1px solid rgb(0 0 0 / 10%);
-  border-radius: 6px;
-  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
-  transform: translateY(calc(100% + 4px));
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease;
-}
-
-.lf-vue-node-title-tooltip-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.lf-vue-node-title-tooltip-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 6px;
-  color: #333;
-  font-size: 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.lf-vue-node-title-tooltip-item:hover {
-  background: rgb(0 0 0 / 5%);
-}

package/src/style/raw.ts

@@ -1,129 +0,0 @@
-/* eslint-disable */
-
-/**
- * Auto generated file, do not modify it!
- */
-
-export const content = `.lf-vue-node-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 6px;
-  color: #474747;
-  border-radius: 12px;
-  box-shadow: 0 0 10px #cad2e15f;
-}
-.lf-vue-node-content-wrap {
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: center;
-}
-.lf-vue-node-title {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  box-sizing: border-box;
-  margin-bottom: 4px;
-  padding: 0 8px;
-  backdrop-filter: saturate(180%) blur(4px);
-}
-.lf-vue-node-title-expanded {
-  margin-bottom: 6px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #eaeaea;
-}
-@supports not (backdrop-filter: blur(1px)) {
-  .lf-vue-node-title {
-    backdrop-filter: none;
-  }
-}
-.lf-vue-node-title-left {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  min-width: 0;
-}
-.lf-vue-node-title-icon {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  color: #666;
-  font-style: normal;
-  line-height: 16px;
-  text-align: center;
-}
-.lf-vue-node-title-text {
-  overflow: hidden;
-  color: #333;
-  font-weight: 500;
-  font-size: 14px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.lf-vue-node-title-actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-.lf-vue-node-title-expand,
-.lf-vue-node-title-more {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s ease;
-  appearance: none;
-}
-.lf-vue-node-title-expand:hover,
-.lf-vue-node-title-more:hover {
-  background: rgba(0, 0, 0, 0.06);
-}
-.lf-vue-node-title-expand-icon {
-  color: #666;
-  font-style: normal;
-  transition: transform 0.3s ease;
-}
-.lf-vue-node-title-more-icon {
-  color: #666;
-  font-style: normal;
-}
-.lf-vue-node-title-tooltip {
-  position: absolute;
-  top: -50px;
-  right: -135px;
-  min-width: 120px;
-  max-width: 240px;
-  padding: 6px 8px;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
-  transform: translateY(calc(100% + 4px));
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-.lf-vue-node-title-tooltip-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.lf-vue-node-title-tooltip-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 6px;
-  color: #333;
-  font-size: 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.lf-vue-node-title-tooltip-item:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-`

package/src/view.ts

@@ -1,190 +0,0 @@
-import { createElement, ReactPortal } from 'react'
-import { createRoot, Root } from 'react-dom/client'
-import { HtmlNode } from '@logicflow/core'
-import {
-  throttle,
-  round,
-  get,
-  isFunction,
-  isArray,
-  clamp,
-  isNumber,
-} from 'lodash-es'
-import { Wrapper } from './wrapper'
-import { Portal } from './portal'
-import { createPortal } from 'react-dom'
-
-export class ReactNodeView extends HtmlNode {
-  root?: Root
-  private containerEl?: HTMLElement
-  private __resizeObserver?: ResizeObserver
-  private __resizeRafId?: number
-  private __lastWidth?: number
-  private __lastHeight?: number
-  private __fallbackUnlisten?: () => void
-  private __throttledUpdate = throttle(() => this.measureAndUpdate(), 80)
-
-  protected targetId() {
-    return `${this.props.graphModel.flowId}:${this.props.model.id}`
-  }
-
-  componentWillUnmount() {
-    super.componentWillUnmount()
-    this.unmount()
-  }
-
-  setHtml(rootEl: SVGForeignObjectElement) {
-    const existed = rootEl.querySelector(
-      '.custom-react-node-content',
-    ) as HTMLElement | null
-    if (existed) {
-      this.containerEl = existed
-    } else {
-      const el = document.createElement('div')
-      el.className = 'custom-react-node-content'
-      this.containerEl = el
-      this.renderReactComponent(el)
-      rootEl.appendChild(el)
-    }
-    this.startResizeObserver()
-  }
-
-  // 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.stopResizeObserver()
-      this.root.unmount()
-      this.root = undefined
-      this.rootEl.innerHTML = ''
-    }
-  }
-
-  // DONE: 是否需要 unmount 或 destroy 方法，在销毁后做一些处理
-  unmount() {
-    this.unmountReactComponent()
-  }
-
-  private measureAndUpdate = () => {
-    try {
-      const root = this.containerEl as HTMLElement
-      if (!root) return
-      const target = (root.firstElementChild as HTMLElement) || root
-      const rect = target.getBoundingClientRect()
-      const width = round(rect.width)
-      const height = round(rect.height)
-      if (width <= 0 || height <= 0) return
-      if (width === this.__lastWidth && height === this.__lastHeight) return
-      this.__lastWidth = width
-      this.__lastHeight = height
-      const props = this.props.model.properties as any
-      const extra = get(props, '_showTitle')
-        ? isNumber(get(props, '_titleHeight'))
-          ? get(props, '_titleHeight')
-          : 28
-        : 0
-      const baseHeight = clamp(height - extra, 1, Number.MAX_SAFE_INTEGER)
-      this.props.model.setProperties({ width, height: baseHeight })
-    } catch (err) {
-      console.error('measureAndUpdate error', err)
-    }
-  }
-
-  private startResizeObserver() {
-    const root = this.containerEl as HTMLElement
-    if (!root) return
-    try {
-      if (isFunction((window as any).ResizeObserver)) {
-        this.__resizeObserver = new (window as any).ResizeObserver(
-          (entries: any[]) => {
-            if (!isArray(entries) || !entries.length) return
-            if (this.__resizeRafId) cancelAnimationFrame(this.__resizeRafId)
-            this.__resizeRafId = requestAnimationFrame(this.__throttledUpdate)
-          },
-        )
-        const target = (root.firstElementChild as HTMLElement) || root
-        this.__resizeObserver?.observe(target)
-      } else {
-        window.addEventListener('resize', () => this.__throttledUpdate())
-        this.__fallbackUnlisten = () =>
-          window.removeEventListener('resize', () => this.__throttledUpdate())
-      }
-    } catch (err) {
-      console.error('startResizeObserver error', err)
-    }
-  }
-
-  private stopResizeObserver() {
-    try {
-      if (this.__resizeObserver) {
-        this.__resizeObserver.disconnect()
-        this.__resizeObserver = undefined
-      }
-      if (this.__resizeRafId) {
-        cancelAnimationFrame(this.__resizeRafId)
-        this.__resizeRafId = undefined
-      }
-      if (this.__fallbackUnlisten) {
-        this.__fallbackUnlisten()
-        this.__fallbackUnlisten = undefined
-      }
-    } catch (err) {
-      console.error('stopResizeObserver error', err)
-    }
-  }
-
-  // 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