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

package/README.md

@@ -3,16 +3,19 @@
 LogicFlow Shape for rendering React components.
 
 ## Installation
+
+此包将 React 组件桥接到 LogicFlow 节点系统，`@logicflow/core`、`react`、`react-dom` 需要由使用方显式提供。
+
 ```shell
-npm install @logicflow/react-node-registry
+npm install @logicflow/core @logicflow/react-node-registry react react-dom
 ```
 or
 ```shell
-yarn add @logicflow/react-node-registry
+yarn add @logicflow/core @logicflow/react-node-registry react react-dom
 ```
 or
 ```shell
-pnpm add @logicflow/react-node-registry
+pnpm add @logicflow/core @logicflow/react-node-registry react react-dom
 ```
 
 ## Usage

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@logicflow/react-node-registry",
-  "version": "1.2.0-alpha.7",
+  "version": "1.2.1",
   "description": "LogicFlow React Shape",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "unpkg": "dist/index.js",
-  "jsdeliver": "dist/index.js",
+  "unpkg": "dist/index.min.js",
+  "jsdelivr": "dist/index.min.js",
   "types": "lib/index.d.ts",
   "keywords": [
     "@logicflow/react-node-registry",
@@ -18,16 +18,23 @@
   "peerDependencies": {
     "react": ">= 18.0.0",
     "react-dom": ">= 18.0.0",
-    "@logicflow/core": "2.2.0-alpha.7"
+    "@logicflow/core": "2.2.1"
   },
   "dependencies": {
+    "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "lodash-es": "^4.17.21",
-    "@logicflow/core": "2.2.0-alpha.7"
+    "@logicflow/core": "2.2.1"
   },
+  "files": [
+    "dist",
+    "es",
+    "lib"
+  ],
   "scripts": {
     "clean:turbo": "rss",
     "clean:build": "rss",

package/.turbo/turbo-build.log

@@ -1,34 +0,0 @@
-
-> @logicflow/react-node-registry@1.2.0-alpha.6 prebuild /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
-> rss
-
-> [prebuild] run-s -s clean:build 
-> [clean:build] rimraf dist es lib 
-
-> @logicflow/react-node-registry@1.2.0-alpha.6 build /Users/didi/Desktop/github/LogicFlow/packages/react-node-registry
-> rss
-
-> [build] run-p -s build:dev build:umd 
-> [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm 
-> [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs 
-> [build:less] ./scripts/build-less
-> [build:less] ./scripts/build-less
-
-./src/index.ts → dist/index.min.js...
-+------------------------------------+
-|                                    |
-|   Bundle Format: umd               |
-|   Bundle Name: ReactNodeRegistry   |
-|   External Globals:                |
-|    @logicflow/core: Core           |
-|    react: React                    |
-|    react-dom: ReactDom             |
-|                                    |
-|   Destination: dist/index.min.js   |
-|   Bundle   Size: 433 B             |
-|   Minified Size: 394 B             |
-|   GZipped  Size: 208 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 9.8s

package/CHANGELOG.md

@@ -1,251 +0,0 @@
-# @logicflow/react-node-registry
-
-## 1.2.0-alpha.7
-
-### Patch Changes
-
-- 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
-
-- Updated dependencies
-  - @logicflow/core@2.2.0-alpha.5
-
-## 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.4
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.1.4
-
-## 1.1.3
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.1.3
-
-## 1.1.2
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.1.2
-
-## 1.1.1
-
-### Patch Changes
-
-- 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
-
-- fix:(extension): 所有导出方式支持局部导出+修复相对路径导出问题 & 渐进连线+highlight优化
-
-## 1.0.14
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.13
-
-## 1.0.13
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.12
-
-## 1.0.12
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.11
-
-## 1.0.11
-
-### Patch Changes
-
-- fix: 修复issue反馈的bug
-- Updated dependencies
-  - @logicflow/core@2.0.10
-
-## 1.0.10
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.9
-
-## 1.0.9
-
-### Patch Changes
-
-- release react/vue-node-registry
-
-## 1.0.8
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.8
-
-## 1.0.7
-
-### 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.6
-
-### Patch Changes
-
-- Release New Version
-- Updated dependencies
-  - @logicflow/core@2.0.6
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies
-  - @logicflow/core@2.0.5
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies
-- Updated dependencies
-  - @logicflow/core@2.0.4
-
-## 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: 开发 react-node-registry 包用于用户自定义 react 节点
-  - 通过监听 properties 变化的事件，触发节点的更新
-  - 通过 Portal 的方式，可以获取到宿主系统的数据（比如状态），保持组件渲染和系统同步
-  - react-node-registry 包增加 LICENSE 文件

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/components/Container.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { BaseNodeModel, GraphModel } from '@logicflow/core'
-import TitleBar from './TitleBar'
-
-export type ContainerProps = {
-  node: BaseNodeModel
-  graph: GraphModel
-  children?: React.ReactNode
-}
-
-export const Container: React.FC<ContainerProps> = ({
-  node,
-  graph,
-  children,
-}) => {
-  const props: any = node?.properties || {}
-  const titleColor = props.style?.titleColor || '#E5EEFC'
-  const expanded = props._expanded === true
-
-  return (
-    <div
-      className="lf-vue-node-container"
-      style={{
-        background: `linear-gradient(180deg, ${titleColor} 0%, #FFFFFF 24px)`,
-      }}
-    >
-      {props._showTitle && <TitleBar node={node} graph={graph} />}
-      {expanded && <div className="lf-vue-node-content-wrap">{children}</div>}
-    </div>
-  )
-}
-
-export default Container

package/src/components/TitleBar.tsx

@@ -1,149 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { BaseNodeModel, GraphModel } from '@logicflow/core'
-import { isNumber } from 'lodash-es'
-
-export type TitleBarProps = {
-  node: BaseNodeModel
-  graph: GraphModel
-}
-
-export const TitleBar: React.FC<TitleBarProps> = ({ node, graph }) => {
-  const props: any = node?.properties || {}
-  const icon = props._icon
-  const title = props._title || ''
-  const expanded = !!props._expanded
-  const titleHeight = isNumber(props._titleHeight) ? props._titleHeight : 28
-  const actProps = props._titleActions || []
-  const privActs = (node as any).__actions || []
-  const actions =
-    Array.isArray(privActs) && privActs.length > 0 ? privActs : actProps
-  const showMoreAction = Array.isArray(actions) && actions.length > 0
-  const trigger = props.titleTrigger === 'hover' ? 'hover' : 'click'
-  const [showTooltip, setShowTooltip] = useState(false)
-  const moreBtnRef = useRef<HTMLButtonElement | null>(null)
-  const tooltipRef = useRef<HTMLDivElement | null>(null)
-
-  const toggleExpand = () => {
-    const cur = !!node?.properties?._expanded
-    node?.setProperty('_expanded', !cur)
-  }
-
-  const runAction = (act: any) => {
-    const fn =
-      act?.callback ||
-      (privActs || []).find((a: any) => a?.name === act?.name)?.callback
-    typeof fn === 'function' && fn(node, graph)
-  }
-
-  useEffect(() => {
-    if (trigger === 'hover') {
-      const mb = moreBtnRef.current
-      const tt = tooltipRef.current
-      const onEnter = () => setShowTooltip(true)
-      const onLeave = () => setShowTooltip(false)
-      mb?.addEventListener('mouseenter', onEnter)
-      mb?.addEventListener('mouseleave', onLeave)
-      tt?.addEventListener('mouseenter', onEnter)
-      tt?.addEventListener('mouseleave', onLeave)
-      return () => {
-        mb?.removeEventListener('mouseenter', onEnter)
-        mb?.removeEventListener('mouseleave', onLeave)
-        tt?.removeEventListener('mouseenter', onEnter)
-        tt?.removeEventListener('mouseleave', onLeave)
-      }
-    }
-    const onDoc = (e: MouseEvent) => {
-      const mb = moreBtnRef.current
-      const tt = tooltipRef.current
-      const t = e.target as Node
-      if (showTooltip && mb && tt && !mb.contains(t) && !tt.contains(t)) {
-        setShowTooltip(false)
-      }
-    }
-    document.addEventListener('click', onDoc)
-    return () => document.removeEventListener('click', onDoc)
-  }, [trigger, showTooltip])
-
-  return (
-    <div
-      className={
-        expanded
-          ? 'lf-vue-node-title lf-vue-node-title-expanded'
-          : 'lf-vue-node-title'
-      }
-      style={{ height: expanded ? titleHeight : 18 }}
-      title={title}
-    >
-      <div className="lf-vue-node-title-left">
-        {icon ? <i className="lf-vue-node-title-icon">{icon}</i> : null}
-        <span className="lf-vue-node-title-text">{title}</span>
-      </div>
-      <div className="lf-vue-node-title-actions">
-        <button
-          className="lf-vue-node-title-expand"
-          onClick={(e) => {
-            e.stopPropagation()
-            toggleExpand()
-          }}
-        >
-          <svg
-            width={14}
-            height={12}
-            viewBox="0 0 14 12"
-            xmlns="http://www.w3.org/2000/svg"
-            className="lf-vue-node-title-expand-icon"
-            style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
-          >
-            <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"
-            />
-            <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"
-            />
-          </svg>
-        </button>
-        {showMoreAction && (
-          <button
-            ref={moreBtnRef}
-            className="lf-vue-node-title-more"
-            onClick={(e) => {
-              e.stopPropagation()
-              if (trigger === 'click') setShowTooltip(!showTooltip)
-            }}
-          >
-            <i className="lf-vue-node-title-more-icon">⋯</i>
-          </button>
-        )}
-        {showMoreAction && (
-          <div
-            ref={tooltipRef}
-            className="lf-vue-node-title-tooltip"
-            style={{
-              opacity: showTooltip ? 1 : 0,
-              pointerEvents: showTooltip ? 'auto' : 'none',
-            }}
-          >
-            <div className="lf-vue-node-title-tooltip-list">
-              {actions.map((act: any, idx: number) => (
-                <div
-                  key={idx}
-                  className="lf-vue-node-title-tooltip-item"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    runAction(act)
-                  }}
-                >
-                  {act?.name || ''}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default TitleBar

package/src/index.less

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

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './view'
-export * from './model'
-export * from './registry'
-export * from './wrapper'
-export * from './portal'