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

package/CHANGELOG.md

@@ -1,272 +0,0 @@
-# @logicflow/vue-node-registry
-
-## 1.2.0-alpha.7
-
-### Patch Changes
-
-- fix: 修复issue反馈的问题
-  - fix: 修复vue2自定义节点获取props错误
-- Updated dependencies
-  - @logicflow/core@2.2.0-alpha.7
-
-## 1.2.0-alpha.6
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.2.0-alpha.6
-
-## 1.2.0-alpha.5
-
-### Patch Changes
-
-- fix: 修复已知问题
-  - 删除多余console.log
-  - 修复拖拽创建vue-node-registry节点时控制台报错问题
-- Updated dependencies
-  - @logicflow/core@2.2.0
-
-## 1.2.0-alpha.4
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.2.0-alpha.4
-
-## 1.2.0-alpha.3
-
-### Patch Changes
-
-- feat: 整体UI美化,并丰富可配置的UI项
-- Updated dependencies
-  - @logicflow/core@2.2.0-alpha.3
-
-## 1.2.0-alpha.2
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.2.0-alpha.2
-
-## 1.2.0-alpha.1
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.2.0
-
-## 1.2.0-alpha.0
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.2.0-alpha.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/rollup.config.js

@@ -1,52 +0,0 @@
-import path from 'node:path'
-import postcss from 'rollup-plugin-postcss'
-import postcssUrl from 'postcss-url'
-import postcssImport from 'postcss-import'
-import { rollupConfig } from '../../rollup.config'
-
-export default [
-  {
-    input: 'src/index.less',
-    output: [
-      {
-        file: 'dist/index.css',
-      },
-      {
-        file: 'lib/index.css',
-      },
-      {
-        file: 'lib/style/index.css',
-      },
-      {
-        file: 'es/index.css',
-      },
-      {
-        file: 'es/style/index.css',
-      },
-    ],
-    plugins: [
-      postcss({
-        plugins: [
-          postcssImport({
-            resolve: (id) => {
-              if (id.startsWith('~')) {
-                return path.resolve('node_modules', id.slice(1))
-              }
-              return id
-            },
-          }),
-          postcssUrl({
-            url: 'inline', // 选择 'inline' 选项将外部资源内联到最终的 CSS 文件中
-            // maxSize: 10, // 以KB为单位的最大文件大小，超过此大小的文件将不会被内联
-          }),
-        ],
-        use: [['less', { javascriptEnabled: true }]],
-        extract: true,
-        // extract: 'index.css', // 提取到一个单独的 CSS 文件
-        // extract: path.resolve('dist/index.css'), // 提取到一个单独的 CSS 文件
-        minimize: true,
-      }),
-    ],
-  },
-  rollupConfig(),
-]

package/src/assets/arrow.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="14" height="12.5" viewBox="0 0 14 12.5">
-<g>
-  <g>
-    <path d="M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z" fill="#474747" fill-opacity="1"/>
-  </g>
-  <g>
-  <path d="M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z" fill="#9B9B9B" fill-opacity="1"/>
-  </g>
-</g>
-</svg>

package/src/components/container.ts

@@ -1,36 +0,0 @@
-import { defineComponent, h } from 'vue-demi'
-import { TitleBar } from './titleBar'
-
-export const Container = defineComponent({
-  name: 'LFVueNodeContainer',
-  props: {
-    node: { type: Object, required: true },
-    graph: { type: Object, required: true },
-  },
-  render(this: any) {
-    const props = this.node?.properties || {}
-    const children: any[] = []
-    const titleColor = props.style.titleColor || '#E5EEFC'
-    if (props._showTitle) {
-      children.push(h(TitleBar, { node: this.node, graph: this.graph }))
-    }
-    console.log('props._expanded', props._expanded)
-    if (props._expanded === true) {
-      children.push(
-        h(
-          'div',
-          { class: 'lf-vue-node-content-wrap' },
-          this.$slots?.default ? this.$slots.default() : [],
-        ),
-      )
-    }
-    return h(
-      'div',
-      {
-        class: 'lf-vue-node-container',
-        style: ` background: linear-gradient(180deg, ${titleColor} 0%, #FFFFFF 24px)`,
-      },
-      children,
-    )
-  },
-})

package/src/components/titleBar.ts

@@ -1,189 +0,0 @@
-import { defineComponent, h } from 'vue-demi'
-import { isNumber, isEmpty } from 'lodash-es'
-
-export const TitleBar = defineComponent({
-  name: 'LFVueNodeTitleBar',
-  props: {
-    node: { type: Object, required: true },
-    graph: { type: Object, required: true },
-  },
-  data() {
-    return {
-      showTooltip: false as boolean,
-    }
-  },
-  mounted() {
-    const trigger =
-      (this as any).node?.properties?.titleTrigger === 'hover'
-        ? 'hover'
-        : 'click'
-    const moreBtn: HTMLElement | null = (this.$refs as any).moreBtn || null
-    const tooltip: HTMLElement | null = (this.$refs as any).tooltip || null
-    const onDoc = (e: MouseEvent) => {
-      if (!tooltip || !moreBtn) return
-      const t = e.target as Node
-      if (this.showTooltip && !tooltip.contains(t) && !moreBtn.contains(t)) {
-        this.showTooltip = false
-      }
-    }
-    if (trigger === 'hover' && moreBtn && tooltip) {
-      moreBtn.addEventListener('mouseenter', () => {
-        this.showTooltip = true
-      })
-      moreBtn.addEventListener('mouseleave', () => {
-        this.showTooltip = false
-      })
-    } else if (trigger === 'click' && moreBtn) {
-      moreBtn.addEventListener('click', (e) => {
-        e.stopPropagation()
-        this.showTooltip = !this.showTooltip
-      })
-      document.addEventListener('click', onDoc)
-      ;(this as any).$once &&
-        (this as any).$once('hook:beforeDestroy', () => {
-          document.removeEventListener('click', onDoc)
-        })
-    }
-  },
-  methods: {
-    toggleExpand() {
-      const cur = !!this.node?.properties?._expanded
-      this.node?.setProperty('_expanded', !cur)
-    },
-    runAction(act: any) {
-      try {
-        typeof act?.callback === 'function' &&
-          act.callback((this as any).node, (this as any).graph)
-      } finally {
-        this.showTooltip = false
-      }
-    },
-  },
-  render(this: any) {
-    const props = this.node?.properties || {}
-    const icon = props._icon
-    const title = props._title || ''
-    const expanded = !!props._expanded
-    const _titleHeight = isNumber(props._titleHeight) ? props._titleHeight : 28
-    const actions = (this as any).node?.__actions || []
-    const showMoreAction = !isEmpty(actions)
-    console.log('showMoreAction', actions, props._titleActions)
-    const bar = h(
-      'div',
-      {
-        class: expanded
-          ? 'lf-vue-node-title lf-vue-node-title-expanded'
-          : 'lf-vue-node-title',
-        style: `height:${expanded ? _titleHeight : 18}px;`,
-        title,
-      },
-      [
-        h('div', { class: 'lf-vue-node-title-left' }, [
-          icon
-            ? h(
-                'i',
-                {
-                  class: 'lf-vue-node-title-icon',
-                },
-                icon,
-              )
-            : null,
-          h(
-            'span',
-            {
-              class: 'lf-vue-node-title-text',
-            },
-            title,
-          ),
-        ]),
-        h('div', { class: 'lf-vue-node-title-actions' }, [
-          h(
-            'button',
-            {
-              ref: 'expandBtn',
-              class: 'lf-vue-node-title-expand',
-              onClick: (e: MouseEvent) => {
-                console.log('expandClicked')
-                e.stopPropagation()
-                this.toggleExpand()
-              },
-              on: {
-                click: (e: MouseEvent) => {
-                  console.log('expandClicked')
-                  e.stopPropagation()
-                  this.toggleExpand()
-                },
-              },
-            },
-            [
-              h(
-                'svg',
-                {
-                  width: 14,
-                  height: 12,
-                  viewBox: '0 0 14 12',
-                  xmlns: 'http://www.w3.org/2000/svg',
-                  class: 'lf-vue-node-title-expand-icon',
-                  style: `transform:${expanded ? 'rotate(180deg)' : 'rotate(0deg)'};`,
-                },
-                [
-                  h('path', {
-                    d: 'M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z',
-                    fill: '#474747',
-                  }),
-                  h('path', {
-                    d: 'M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z',
-                    fill: '#9B9B9B',
-                  }),
-                ],
-              ),
-            ],
-          ),
-          showMoreAction &&
-            h(
-              'button',
-              {
-                ref: 'moreBtn',
-                class: 'lf-vue-node-title-more',
-              },
-              [h('i', { class: 'lf-vue-node-title-more-icon' }, '⋯')],
-            ),
-          h(
-            'div',
-            {
-              ref: 'tooltip',
-              class: 'lf-vue-node-title-tooltip',
-              style: `opacity:${this.showTooltip ? 1 : 0};pointer-events:${this.showTooltip ? 'auto' : 'none'};`,
-            },
-            [
-              h(
-                'div',
-                { class: 'lf-vue-node-title-tooltip-list' },
-                actions.map((act: any) =>
-                  h(
-                    'div',
-                    {
-                      class: 'lf-vue-node-title-tooltip-item',
-                      onClick: (e: MouseEvent) => {
-                        e.stopPropagation()
-                        this.runAction(act)
-                      },
-                      on: {
-                        click: (e: MouseEvent) => {
-                          e.stopPropagation()
-                          this.runAction(act)
-                        },
-                      },
-                    },
-                    act?.name || '',
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ]),
-      ],
-    )
-    return bar
-  },
-})

package/src/index.less

@@ -1 +0,0 @@
-@import url('./style/index.less');

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,141 +0,0 @@
-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 {
-  // 形状属性
-  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 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)
-            },
-          },
-        ])
-      }
-    }
-  }
-  setAttributes() {
-    // DONE: 解决 width、height、radius 为 0 时的问题
-    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 as number) : height
-    this.height = base + extra
-  }
-
-  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,
-    }
-  }
-
-  setNodeActions(actions: NodeAction[]) {
-    this.__actions =
-      isArray(actions) && !isEmpty(actions) ? cloneDeep(actions) : []
-  }
-}
-
-export default VueNodeModel