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

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

@@ -1,22 +0,0 @@
-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))
-}