@logicflow/vue-node-registry 1.2.0 → 1.2.1

package/.turbo/turbo-build.log

@@ -1,34 +0,0 @@
-
-> @logicflow/vue-node-registry@1.1.5 prebuild /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
-> rss
-
-> [prebuild] run-s -s clean:build 
-> [clean:build] rimraf dist es lib 
-
-> @logicflow/vue-node-registry@1.1.5 build /Users/didi/Desktop/github/LogicFlow/packages/vue-node-registry
-> rss
-
-> [build] run-p -s build:dev build:umd 
-> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs 
-> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm 
-> [build:less] ./scripts/build-less
-> [build:less] ./scripts/build-less
-
-./src/index.ts → dist/index.min.js...
-+----------------------------------------------+
-|                                              |
-|   Bundle Format: umd                         |
-|   Bundle Name: VueNodeRegistry               |
-|   External Globals:                          |
-|    @logicflow/core: Core                     |
-|    @vue/composition-api: VueCompositionApi   |
-|    vue: Vue                                  |
-|                                              |
-|   Destination: dist/index.min.js             |
-|   Bundle   Size: 390 B                       |
-|   Minified Size: 351 B                       |
-|   GZipped  Size: 200 B                       |
-|                                              |
-+----------------------------------------------+
-(!) [plugin typescript] @rollup/plugin-typescript: Rollup requires that TypeScript produces ES Modules. Unfortunately your configuration specifies a "module" other than "esnext". Unless you know what you're doing, please change "module" to "esnext" in the target tsconfig.json file or plugin options.
-created dist/index.min.js in 5.7s

package/CHANGELOG.md

@@ -1,217 +0,0 @@
-# @logicflow/vue-node-registry
-
-## 1.2.0
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.2.0
-
-## 1.1.5
-
-### Patch Changes
-
-- fix: 修复issue反馈的问题
-  - fix: 修复extension包引入vue包问题 fix #2277
-  - Updated dependencies
-    - @logicflow/core@2.1.4
-
-## 1.1.4
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.1.3
-
-## 1.1.3
-
-### Patch Changes
-
-- fix: 修复小地图在vue自定义节点删除一个小地图中全部vue节点消失问题
-
-## 1.1.2
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.1.2
-
-## 1.1.1
-
-### Patch Changes
-
-- fix: 修复点击节点会触发多选的问题和vue-node-registry引入报错问题
-- Updated dependencies
-  - @logicflow/core@2.1.1
-
-## 1.1.0
-
-### Patch Changes
-
-- fix: 修复issue反馈的bug&支持小地图展示vue节点
-
-## 1.0.18
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.16
-
-## 1.0.17
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.15
-
-## 1.0.16
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.14
-
-## 1.0.15
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.13
-
-## 1.0.14
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.12
-
-## 1.0.13
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.11
-
-## 1.0.12
-
-### Patch Changes
-
-- fix: 修复issue反馈的bug
-- Updated dependencies
-  - @logicflow/core@2.0.10
-
-## 1.0.11
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.9
-
-## 1.0.10
-
-### Patch Changes
-
-- release react/vue-node-registry
-
-## 1.0.9
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.8
-
-## 1.0.8
-
-### Patch Changes
-
-- fix: 修复一些问题
-  - fix: 修复一些问题
-  - fix: 修复文本拖拽不符合预期的问题 by ChangeSuger
-  - feat: 支持动态修改 Grid 的配置 by ChangeSuger
-  - fix: 修复 2.x 与 1.x 下相同的网格线宽，Grid 表现不一致的问题 by ChangeSuger
-  - fix: node:dnd-drag 增加事件数据 by HeatonZ
-  - fix(extension): 【dynamic-group】修复mousemove和isCollapsed相关问题 by wbccb
-  - fix: 修复 windows 系统 node20 环境下样式文件打包失败的问题 by ChangeSuger
-  - fix: 修复 node:dnd-drag 事件的类型检查问题 by ChangeSuger
-  - fix(example): 修复文档中vue3自定义组件不能正常显示bug by zkt2002
-  - fix(core): 在没有拖拽的情况下，Control组件突然销毁，不触发cancelDrag(#1926) by wbccb
-  - fix(core): 修复笔记本触摸板点击边事件失效 by wuchenguang1998
-  - feat(examples): 添加动画边demo by DymoneLewis
-  - fix(core): 类型定义 properties:change 改为 node:properties-change by HeatonZ
-  - feat: node-registry 自定义properties类型 by HeatonZ
-  - fix(core): 修复 polyline 与多边形节点的交点不正确的问题 by Yuan-ZW
-- Updated dependencies
-  - @logicflow/core@2.0.7
-
-## 1.0.7
-
-### Patch Changes
-
-- fix(vue-node-registry): 修复Teleport+KeepAlive场景下DOM重复渲染的问题 close #1768 #1862
-
-- Updated dependencies
-  - @logicflow/core@2.0.6
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.5
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies
-- Updated dependencies
-  - @logicflow/core@2.0.4
-
-## 1.0.4
-
-### Patch Changes
-
-- fix: bugs from issues
-
-  - fix: 移除 vue-node-registry view 中无用 console，close #1856
-
-## 1.0.3
-
-### Patch Changes: Release 1.0.3 Version
-
-- Updated dependencies
-  - @logicflow/core@2.0.3
-
-## 1.0.2
-
-### Patch Changes
-
-- Release New Version，移除多余 console
-
-- Updated dependencies
-  - @logicflow/core@2.0.2
-
-## 1.0.1
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.1
-
-## 1.0.0
-
-### Patch Changes
-
-- Release 2.0 New Version 🎉🎉🎉🎉
-- Updated dependencies
-
-  - @logicflow/core@2.0.0
-
-- feat: 开发 vue-node-registry 包用于用户自定义 vue 节点
-
-  - 通过监听 properties 变化的事件，触发节点的更新
-  - 利用 Teleport 将组件内部的一部分模板传送到组件的 DOM 结构外层的位置去
-  - 修复 vue-node-registry 包在 vue2 项目中渲染失效的问题
-    - 更新 extension 包的 package.json
-    - 修复 vue-node-registry 渲染顺序，先 appendChild，再 new Vue
-    - 修复渲染自定义节点 new Vue2 实例时未传 el 的问题

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './view'
-export * from './model'
-export * from './registry'
-export * from './teleport'

package/src/model.ts

@@ -1,64 +0,0 @@
-import LogicFlow, { HtmlNodeModel, IHtmlNodeProperties } from '@logicflow/core'
-import { cloneDeep, isNil } from 'lodash-es'
-
-export interface VueCustomProperties extends IHtmlNodeProperties {
-  // 形状属性
-  width?: number
-  height?: number
-  radius?: number
-
-  // 文字位置属性
-  refX?: number
-  refY?: number
-
-  // 样式属性
-  style?: LogicFlow.CommonTheme
-  textStyle?: LogicFlow.TextNodeTheme
-}
-
-export class VueNodeModel<
-  P extends VueCustomProperties = VueCustomProperties,
-> extends HtmlNodeModel<P> {
-  setAttributes() {
-    // DONE: 解决 width、height、radius 为 0 时的问题
-    const { width, height, radius } = this.properties
-    if (!isNil(width)) {
-      this.width = width
-    }
-    if (!isNil(height)) {
-      this.height = height
-    }
-    if (!isNil(radius)) {
-      this.radius = radius
-    }
-  }
-
-  getTextStyle(): LogicFlow.TextNodeTheme {
-    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,
-    }
-  }
-}
-
-export default VueNodeModel

package/src/registry.ts

@@ -1,43 +0,0 @@
-import LogicFlow from '@logicflow/core'
-import { VueNodeView } from './view'
-import { VueNodeModel } from './model'
-
-import RegisterConfig = LogicFlow.RegisterConfig
-
-export type VueNodeConfig = {
-  type: string
-  component: any
-  effect?: (keyof LogicFlow.PropertiesType)[]
-} & Partial<RegisterConfig>
-
-export const vueNodesMap: Record<
-  string,
-  {
-    component: any
-    effect?: (keyof LogicFlow.PropertiesType)[]
-  }
-> = {}
-
-export function register(config: VueNodeConfig, lf: LogicFlow) {
-  const {
-    type,
-    component,
-    effect,
-    view: CustomNodeView,
-    model: CustomNodeModel,
-  } = config
-
-  if (!type) {
-    throw new Error('You should specify type in config')
-  }
-  vueNodesMap[type] = {
-    component,
-    effect,
-  }
-
-  lf.register({
-    type,
-    view: CustomNodeView || VueNodeView,
-    model: CustomNodeModel || VueNodeModel,
-  })
-}

package/src/teleport.ts

@@ -1,155 +0,0 @@
-import { BaseNodeModel, GraphModel } from '@logicflow/core'
-import {
-  defineComponent,
-  h,
-  createApp,
-  reactive,
-  isVue3,
-  Teleport,
-  markRaw,
-  Fragment,
-} from 'vue-demi'
-
-let active = false
-const appInstances = new Map<string, InstanceType<any>>()
-const appNodesMap = new Map<string, any>() // 用于储存当前流程图节点id当节点都销毁时同时卸载vueApp实例
-const items = reactive<{ [key: string]: any }>({})
-
-export function connect(
-  id: string,
-  component: any,
-  container: HTMLDivElement,
-  node: BaseNodeModel,
-  graph: GraphModel,
-) {
-  if (active) {
-    if (graph.isMiniMap) {
-      createTeleportContainer(container, graph.flowId)
-    }
-    items[id] = markRaw(
-      defineComponent({
-        render: () =>
-          h(Teleport, { to: container } as any, [
-            h(component, { node, graph }),
-          ]),
-        provide: () => ({
-          getNode: () => node,
-          getGraph: () => graph,
-        }),
-      }),
-    )
-  }
-}
-
-export function disconnect(id: string, flowId: string) {
-  if (active) {
-    delete items[id]
-    if (appInstances.has(flowId)) {
-      const appNodeList = appNodesMap.get(flowId) || []
-      const index = appNodeList.indexOf(id)
-      if (index > -1) {
-        appNodeList.splice(index, 1)
-        if (appNodeList.length === 0) {
-          destroyTeleportContainer(flowId)
-        } else {
-          appNodesMap.set(flowId, appNodeList)
-        }
-      }
-    }
-  }
-}
-
-export function isActive() {
-  return active
-}
-
-export function getTeleport(): any {
-  if (!isVue3) {
-    throw new Error('teleport is only available in Vue3')
-  }
-  active = true
-
-  return defineComponent({
-    props: {
-      flowId: {
-        type: String,
-        required: true,
-      },
-    },
-    setup(props) {
-      return () => {
-        const children: Record<string, any>[] = []
-        Object.keys(items).forEach((id) => {
-          // https://github.com/didi/LogicFlow/issues/1768
-          // 多个不同的VueNodeView都会connect注册到items中，因此items存储了可能有多个flowId流程图的数据
-          // 当使用多个LogicFlow时，会创建多个flowId + 同时使用KeepAlive
-          // 每一次items改变，会触发不同flowId持有的setup()执行，由于每次setup()执行就是遍历items，因此存在多次重复渲染元素的问题
-          // 即items[0]会在Page1的setup()执行，items[0]也会在Page2的setup()执行，从而生成两个items[0]
-
-          // 比对当前界面显示的flowId，只更新items[当前页面flowId:nodeId]的数据
-          // 比如items[0]属于Page1的数据，那么Page2无论active=true/false，都无法执行items[0]
-
-          if (id.startsWith(props.flowId)) {
-            if (appInstances.has(props.flowId)) {
-              const appNodeList = appNodesMap.get(props.flowId) || []
-              if (!appNodeList.includes(id)) {
-                appNodeList.push(id)
-                appNodesMap.set(props.flowId, appNodeList)
-              }
-            }
-            children.push(items[id])
-          }
-        })
-        return h(
-          Fragment,
-          {},
-          children.map((item) => h(item)),
-        )
-      }
-    },
-  })
-}
-
-/**
- * 创建并挂载 Teleport 容器组件
- * @param container 目标容器元素
- * @param flowId 当前流程图的唯一标识
- */
-export function createTeleportContainer(
-  container: HTMLElement,
-  flowId: string | undefined,
-): void {
-  if (!isVue3 || !flowId || !container || !active) return
-
-  // 获取 Teleport 组件
-  const TeleportContainer = getTeleport()
-
-  // 不重新创建 Teleport 容器组件
-  if (appInstances.has(flowId)) {
-    return
-  }
-
-  // ✅ 1. 创建独立容器放到目标容器中
-  const mountPoint = document.createElement('div')
-  container.appendChild(mountPoint)
-
-  // ✅ 2. 创建并挂载 Vue 应用到新容器
-  const app = createApp(TeleportContainer, { flowId })
-  app.mount(mountPoint)
-
-  appInstances.set(flowId, app)
-  appNodesMap.set(flowId, [])
-}
-/**
- * 卸载 Teleport 容器组件
- * @param flowId 需要卸载流程图的唯一标识
- */
-export function destroyTeleportContainer(flowId: string | undefined): void {
-  if (!isVue3 || !flowId || !active) return
-  const app = appInstances.get(flowId)
-  if (app) {
-    app.unmount()
-    appInstances.delete(flowId)
-    appNodesMap.delete(flowId)
-  }
-}

package/src/view.ts

@@ -1,109 +0,0 @@
-import { isVue2, isVue3, createApp, h, Vue2 } from 'vue-demi'
-import { HtmlNode } from '@logicflow/core'
-import { vueNodesMap } from './registry'
-import { isActive, connect, disconnect } from './teleport'
-
-export class VueNodeView extends HtmlNode {
-  root?: any
-  private vm: any
-
-  getComponentContainer() {
-    return this.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-vue-node-content'
-    this.root = el
-    rootEl.appendChild(el)
-
-    this.renderVueComponent()
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  confirmUpdate(_rootEl: SVGForeignObjectElement) {
-    // TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
-    // console.log('_rootEl', _rootEl)
-  }
-
-  protected renderVueComponent() {
-    this.unmountVueComponent()
-    const root = this.getComponentContainer()
-    const { model, graphModel } = this.props
-
-    if (root) {
-      const { component } = vueNodesMap[model.type]
-      if (component) {
-        if (isVue2) {
-          const Vue = Vue2 as any
-          this.vm = new Vue({
-            el: root,
-            render(h: any) {
-              return h(component, {
-                node: model,
-                graph: graphModel,
-              })
-            },
-            provide() {
-              return {
-                getNode: () => model,
-                getGraph: () => graphModel,
-              }
-            },
-          })
-        } else if (isVue3) {
-          if (isActive()) {
-            connect(this.targetId(), component, root, model, graphModel)
-          } else {
-            this.vm = createApp({
-              render() {
-                return h(component, {
-                  node: model,
-                  graph: graphModel,
-                })
-              },
-              provide() {
-                return {
-                  getNode: () => model,
-                  getGraph: () => graphModel,
-                }
-              },
-            })
-            this.vm?.mount(root)
-          }
-        }
-      }
-    }
-  }
-
-  protected unmountVueComponent() {
-    const root = this.getComponentContainer()
-    if (this.vm) {
-      isVue2 && this.vm.$destroy()
-      isVue3 && this.vm.unmount()
-      this.vm = null
-    }
-    if (root) {
-      root.innerHTML = ''
-    }
-    return root
-  }
-
-  unmount() {
-    if (isActive()) {
-      disconnect(this.targetId(), this.props.graphModel.flowId as string)
-    }
-    this.unmountVueComponent()
-  }
-}
-
-export default VueNodeView