@logicflow/react-node-registry 1.2.0-alpha.2 → 1.2.0-alpha.4

package/src/style/index.less

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

@@ -0,0 +1,129 @@
+/* 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,12 +1,28 @@
 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}`
@@ -18,17 +34,25 @@ export class ReactNodeView extends HtmlNode {
   }
 
   setHtml(rootEl: SVGForeignObjectElement) {
-    const el = document.createElement('div')
-    el.className = 'custom-react-node-content'
-
-    this.renderReactComponent(el)
-    rootEl.appendChild(el)
+    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)
-  }
+  // confirmUpdate(_rootEl: SVGForeignObjectElement) {
+  //   // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
+  //   console.log('_rootEl', _rootEl)
+  // }
 
   protected renderReactComponent(container: HTMLElement) {
     this.unmountReactComponent()
@@ -55,6 +79,7 @@ export class ReactNodeView extends HtmlNode {
 
   protected unmountReactComponent() {
     if (this.rootEl && this.root) {
+      this.stopResizeObserver()
       this.root.unmount()
       this.root = undefined
       this.rootEl.innerHTML = ''
@@ -66,6 +91,74 @@ export class ReactNodeView extends HtmlNode {
     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

package/src/wrapper.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import { BaseNodeModel, EventType, GraphModel } from '@logicflow/core'
 import { reactNodesMap } from './registry'
+import Container from './components/Container'
 
 export interface IWrapperProps {
   node: BaseNodeModel
@@ -49,12 +50,26 @@ export class Wrapper extends PureComponent<IWrapperProps, IWrapperState> {
 
     if (!content) return null
 
+    const { _showTitle = false } = node.properties || {}
+
     const { component } = content
     if (React.isValidElement(component)) {
-      return this.clone(component)
+      return _showTitle ? (
+        <Container node={this.props.node} graph={this.props.graph}>
+          {this.clone(component)}
+        </Container>
+      ) : (
+        this.clone(component)
+      )
     }
     const FC = component as React.FC
-    return this.clone(<FC />)
+    return _showTitle ? (
+      <Container node={this.props.node} graph={this.props.graph}>
+        {this.clone(<FC />)}
+      </Container>
+    ) : (
+      this.clone(<FC />)
+    )
   }
 }