@logicflow/vue-node-registry 1.2.0-alpha.2 → 1.2.0-alpha.3

package/src/model.ts

@@ -1,5 +1,17 @@
-import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core'
-import { cloneDeep, isNil } from 'lodash-es'
+import LogicFlow, {
+  GraphModel,
+  BaseNodeModel,
+  HtmlNodeModel,
+  IHtmlNodeProperties,
+} 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 VueCustomProperties extends IHtmlNodeProperties {
   // 形状属性
@@ -14,14 +26,69 @@ export interface VueCustomProperties extends IHtmlNodeProperties {
   // 样式属性
   style?: LogicFlow.CommonTheme
   textStyle?: LogicFlow.TextNodeTheme
+
+  // 标题配置
+  _showTitle?: boolean
+  _title?: string
+  _icon?: string
+  _titleHeight?: number
+  _expanded?: boolean
 }
 
 export class VueNodeModel<
   P extends VueCustomProperties = VueCustomProperties,
 > 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 + 8,
+          height: newHeight + 8,
+        })
+        this.setNodeActions([
+          {
+            name: '复制',
+            callback: (nodeModel, graphModel) => {
+              graphModel.cloneNode(nodeModel.id)
+            },
+          },
+          {
+            name: '删除',
+            callback: (nodeModel, graphModel) => {
+              graphModel.deleteNode(nodeModel.id)
+            },
+          },
+        ])
+      }
+    }
+    console.log('nodeModel', this)
+  }
   setAttributes() {
     // DONE: 解决 width、height、radius 为 0 时的问题
-    const { width, height, radius } = this.properties
+    const { width, height, radius, _showTitle, _titleHeight } = this.properties
     if (!isNil(width)) {
       this.width = width
     }
@@ -31,6 +98,12 @@ export class VueNodeModel<
     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 as number) : height
+    this.height = base + extra
   }
 
   getTextStyle(): LogicFlow.TextNodeTheme {
@@ -59,6 +132,11 @@ export class VueNodeModel<
       // ry: radius,
     }
   }
+
+  setNodeActions(actions: NodeAction[]) {
+    this.__actions =
+      isArray(actions) && !isEmpty(actions) ? cloneDeep(actions) : []
+  }
 }
 
 export default VueNodeModel

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/utils/size.ts

@@ -0,0 +1,22 @@
+export function computeBaseHeight(
+  measuredHeight: number,
+  _showTitle?: boolean,
+  _titleHeight?: number,
+) {
+  const extra = _showTitle
+    ? typeof _titleHeight === 'number'
+      ? _titleHeight
+      : 28
+    : 0
+  return Math.max(1, Math.round(measuredHeight) - extra)
+}
+
+export function shouldUpdateSize(
+  prevW?: number,
+  prevH?: number,
+  w?: number,
+  h?: number,
+) {
+  if (!w || !h) return false
+  return !(prevW === Math.round(w) && prevH === Math.round(h))
+}

package/src/view.ts

@@ -1,11 +1,30 @@
-import { isVue2, isVue3, createApp, h, Vue2 } from 'vue-demi'
+import { isVue2, isVue3, createApp, h, Vue2, defineComponent } from 'vue-demi'
+// Vue2/3 兼容 API；使用 vue-demi 保持两端一致
+import {
+  throttle,
+  round,
+  get,
+  isFunction,
+  isArray,
+  clamp,
+  isNumber,
+} from 'lodash-es'
 import { HtmlNode } from '@logicflow/core'
 import { vueNodesMap } from './registry'
 import { isActive, connect, disconnect } from './teleport'
+import { Container } from './components/container'
 
 export class VueNodeView extends HtmlNode {
   root?: any
   private vm: any
+  // 尺寸监听相关状态
+  private __resizeObserver?: ResizeObserver
+  private __resizeRafId?: number
+  private __lastWidth?: number
+  private __lastHeight?: number
+  private __fallbackUnlisten?: () => void
+  private __throttledUpdate = throttle(() => this.measureAndUpdate(), 80)
+  // private isMounted: boolean = false
 
   getComponentContainer() {
     return this.root
@@ -21,34 +40,62 @@ export class VueNodeView extends HtmlNode {
   }
 
   setHtml(rootEl: SVGForeignObjectElement) {
-    const el = document.createElement('div')
-    el.className = 'custom-vue-node-content'
-    this.root = el
-    rootEl.appendChild(el)
-
+    // 创建节点内容容器并注入到 foreignObject（若已存在则复用）
+    const existed = rootEl.querySelector('.custom-vue-node-content')
+    if (!existed) {
+      const el = document.createElement('div')
+      el.className = 'custom-vue-node-content'
+      this.root = el
+      rootEl.appendChild(el)
+    }
+    // 渲染 Vue 组件并启用尺寸监听
     this.renderVueComponent()
+    this.startResizeObserver()
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   confirmUpdate(_rootEl: SVGForeignObjectElement) {
     // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
-    // console.log('_rootEl', _rootEl)
+    const { model } = this.props
+    const { _showTitle = false } = model.properties || {}
+    if (_showTitle) {
+      this.setHtml(_rootEl)
+    }
   }
 
   protected renderVueComponent() {
     this.unmountVueComponent()
     const root = this.getComponentContainer()
     const { model, graphModel } = this.props
+    const { _showTitle = false } = model.properties || {}
+    const wrapWithContainer = (child: any) =>
+      defineComponent({
+        name: 'LFVueNodeContainerWrapper',
+        props: {
+          node: { type: Object, required: true },
+          graph: { type: Object, required: true },
+        },
+        render(this: any) {
+          // 根据 _showTitle 决定是否用 Container 包裹，避免无标题时额外结构
+          if (!_showTitle) {
+            return h(child, { node: this.node, graph: this.graph })
+          }
+          return h(Container, { node: this.node, graph: this.graph }, [
+            h(child, { node: this.node, graph: this.graph }),
+          ])
+        },
+      })
 
     if (root) {
       const { component } = vueNodesMap[model.type]
       if (component) {
         if (isVue2) {
           const Vue = Vue2 as any
+          const Composed = wrapWithContainer(component)
           this.vm = new Vue({
             el: root,
             render(h: any) {
-              return h(component, {
+              return h(Composed, {
                 node: model,
                 graph: graphModel,
               })
@@ -61,12 +108,15 @@ export class VueNodeView extends HtmlNode {
             },
           })
         } else if (isVue3) {
+          console.log('isActive', isActive())
           if (isActive()) {
-            connect(this.targetId(), component, root, model, graphModel)
+            const Composed = wrapWithContainer(component)
+            connect(this.targetId(), Composed, root, model, graphModel)
           } else {
+            const Composed = wrapWithContainer(component)
             this.vm = createApp({
               render() {
-                return h(component, {
+                return h(Composed, {
                   node: model,
                   graph: graphModel,
                 })
@@ -79,14 +129,91 @@ export class VueNodeView extends HtmlNode {
               },
             })
             this.vm?.mount(root)
+            // this.isMounted = true
           }
         }
       }
     }
   }
 
+  private measureAndUpdate = () => {
+    try {
+      // 读取子组件（或容器本身）的实际尺寸并更新模型属性
+      const root = this.getComponentContainer() 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) {
+      // swallow error
+    }
+  }
+
+  private startResizeObserver() {
+    // 启动尺寸监听：优先使用 ResizeObserver，退化到 window.resize
+    const root = this.getComponentContainer() 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)
+            // 使用 RAF 对齐绘制帧，再用节流函数合并频繁变更
+            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) {
+      // swallow error
+    }
+  }
+
+  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) {
+      // swallow error
+    }
+  }
+
   protected unmountVueComponent() {
     const root = this.getComponentContainer()
+    // 在卸载 Vue 实例前先停止尺寸监听
+    this.stopResizeObserver()
     if (this.vm) {
       isVue2 && this.vm.$destroy()
       isVue3 && this.vm.unmount()
@@ -99,6 +226,7 @@ export class VueNodeView extends HtmlNode {
   }
 
   unmount() {
+    // Teleport 模式下断开连接，并清理视图与监听
     if (isActive()) {
       disconnect(this.targetId(), this.props.graphModel.flowId as string)
     }