Home Explore Help
Register Sign In
open_flow
/
bytedance-flowgram
mirror of https://github.com/bytedance/flowgram.ai.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Feat/support react 16 (#221)

* chore: support react 16

* chore: support react 16
xiamidaxia 8 months ago
parent
c11a995040
commit
a98244c6a3
54 changed files with 824 additions and 131 deletions
Split View Show Diff Stats
  1. 16 0
      apps/demo-react-16/.eslintrc.js
  2. 12 0
      apps/demo-react-16/index.html
  3. 54 0
      apps/demo-react-16/package.json
  4. 28 0
      apps/demo-react-16/rsbuild.config.ts
  5. 7 0
      apps/demo-react-16/src/app.tsx
  6. 37 0
      apps/demo-react-16/src/components/minimap.tsx
  7. 30 0
      apps/demo-react-16/src/components/node-add-panel.tsx
  8. 37 0
      apps/demo-react-16/src/components/tools.tsx
  9. 26 0
      apps/demo-react-16/src/editor.tsx
  10. 155 0
      apps/demo-react-16/src/hooks/use-editor-props.tsx
  11. 107 0
      apps/demo-react-16/src/index.css
  12. 1 0
      apps/demo-react-16/src/index.tsx
  13. 49 0
      apps/demo-react-16/src/initial-data.ts
  14. 30 0
      apps/demo-react-16/src/node-registries.ts
  15. 23 0
      apps/demo-react-16/tsconfig.json
  16. 5 1
      common/config/rush/common-versions.json
  17. 129 58
      common/config/rush/pnpm-lock.yaml
  18. 2 2
      packages/canvas-engine/core/package.json
  19. 2 2
      packages/canvas-engine/fixed-layout-core/package.json
  20. 2 2
      packages/canvas-engine/free-layout-core/package.json
  21. 2 2
      packages/canvas-engine/renderer/package.json
  22. 2 2
      packages/client/editor/package.json
  23. 2 2
      packages/client/fixed-layout-editor/package.json
  24. 2 2
      packages/client/free-layout-editor/package.json
  25. 2 2
      packages/client/playground-react/package.json
  26. 2 2
      packages/common/command/package.json
  27. 2 2
      packages/common/reactive/package.json
  28. 2 2
      packages/common/utils/package.json
  29. 2 2
      packages/materials/fixed-semi-materials/package.json
  30. 2 2
      packages/materials/form-materials/package.json
  31. 2 2
      packages/node-engine/form-core/package.json
  32. 2 2
      packages/node-engine/form/package.json
  33. 2 2
      packages/node-engine/node/package.json
  34. 2 2
      packages/plugins/background-plugin/package.json
  35. 2 2
      packages/plugins/fixed-drag-plugin/package.json
  36. 2 2
      packages/plugins/fixed-reactor-plugin/package.json
  37. 2 2
      packages/plugins/free-auto-layout-plugin/package.json
  38. 2 2
      packages/plugins/free-container-plugin/package.json
  39. 2 2
      packages/plugins/free-group-plugin/package.json
  40. 2 2
      packages/plugins/free-history-plugin/package.json
  41. 2 2
      packages/plugins/free-hover-plugin/package.json
  42. 2 2
      packages/plugins/free-lines-plugin/package.json
  43. 2 2
      packages/plugins/free-node-panel-plugin/package.json
  44. 2 2
      packages/plugins/free-snap-plugin/package.json
  45. 2 2
      packages/plugins/free-stack-plugin/package.json
  46. 2 2
      packages/plugins/group-plugin/package.json
  47. 2 2
      packages/plugins/history-node-plugin/package.json
  48. 2 2
      packages/plugins/materials-plugin/package.json
  49. 2 2
      packages/plugins/minimap-plugin/package.json
  50. 2 2
      packages/plugins/node-core-plugin/package.json
  51. 2 2
      packages/plugins/node-variable-plugin/package.json
  52. 2 2
      packages/plugins/select-box-plugin/package.json
  53. 2 2
      packages/variable-engine/variable-core/package.json
  54. 6 0
      rush.json

+ 16 - 0
apps/demo-react-16/.eslintrc.js
View File 

@@ -0,0 +1,16 @@
 
+const { defineConfig } = require('@flowgram.ai/eslint-config');
 
+
 
+module.exports = defineConfig({
 
+  preset: 'web',
 
+  packageRoot: __dirname,
 
+  rules: {
 
+    'no-console': 'off',
 
+    'react/prop-types': 'off',
 
+    'react/no-deprecated': 'off',
 
+  },
 
+  settings: {
 
+    react: {
 
+      version: '16.8.6', // React version. "detect" automatically picks the version you have installed.
 
+    },
 
+  },
 
+});

+ 12 - 0
apps/demo-react-16/index.html
View File 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html lang="en" data-bundler="rspack">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Flow FreeLayoutEditor Demo</title>
 
+  </head>
 
+  <body>
 
+    <div id="root"></div>
 
+  </body>
 
+</html>

+ 54 - 0
apps/demo-react-16/package.json
View File 

@@ -0,0 +1,54 @@
 
+{
 
+  "name": "@flowgram.ai/demo-react-16",
 
+  "version": "0.1.0",
 
+  "description": "",
 
+  "keywords": [],
 
+  "license": "MIT",
 
+  "main": "./src/index.tsx",
 
+  "files": [
 
+    "src/",
 
+    ".eslintrc.js",
 
+    ".gitignore",
 
+    "index.html",
 
+    "package.json",
 
+    "rsbuild.config.ts",
 
+    "tsconfig.json"
 
+  ],
 
+  "scripts": {
 
+    "build": "exit 0",
 
+    "build:fast": "exit 0",
 
+    "build:watch": "exit 0",
 
+    "clean": "rimraf dist",
 
+    "dev": "MODE=app NODE_ENV=development rsbuild dev --open",
 
+    "lint": "eslint ./src --cache",
 
+    "lint:fix": "eslint ./src --fix",
 
+    "start": "NODE_ENV=development rsbuild dev --open",
 
+    "test": "exit",
 
+    "test:cov": "exit",
 
+    "watch": "exit 0"
 
+  },
 
+  "dependencies": {
 
+    "@flowgram.ai/free-layout-editor": "workspace:*",
 
+    "@flowgram.ai/free-snap-plugin": "workspace:*",
 
+    "@flowgram.ai/minimap-plugin": "workspace:*",
 
+    "react": "^16.8.6",
 
+    "react-dom": "^16.8.6"
 
+  },
 
+  "devDependencies": {
 
+    "@flowgram.ai/ts-config": "workspace:*",
 
+    "@flowgram.ai/eslint-config": "workspace:*",
 
+    "@rsbuild/core": "^1.2.16",
 
+    "@rsbuild/plugin-react": "^1.1.1",
 
+    "@types/lodash-es": "^4.17.12",
 
+    "@types/node": "^18",
 
+    "@types/react": "^16.8.6",
 
+    "@types/react-dom": "^16.8.6",
 
+    "@types/styled-components": "^5",
 
+    "eslint": "^8.54.0",
 
+    "cross-env": "~7.0.3"
 
+  },
 
+  "publishConfig": {
 
+    "access": "public",
 
+    "registry": "https://registry.npmjs.org/"
 
+  }
 
+}

+ 28 - 0
apps/demo-react-16/rsbuild.config.ts
View File 

@@ -0,0 +1,28 @@
 
+import path from 'node:path';
 
+
 
+import { pluginReact } from '@rsbuild/plugin-react';
 
+import { defineConfig } from '@rsbuild/core';
 
+
 
+export default defineConfig({
 
+  plugins: [
 
+    pluginReact({
 
+      swcReactOptions: {
 
+        runtime: 'classic',
 
+      },
 
+    }),
 
+  ],
 
+  source: {
 
+    entry: {
 
+      index: './src/app.tsx',
 
+    },
 
+  },
 
+  resolve: {
 
+    alias: {
 
+      react: path.resolve(__dirname, './node_modules/react'),
 
+      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
 
+    },
 
+  },
 
+  html: {
 
+    title: 'demo-free-layout-simple',
 
+  },
 
+});

+ 7 - 0
apps/demo-react-16/src/app.tsx
View File 

@@ -0,0 +1,7 @@
 
+import ReactDOM from 'react-dom';
 
+import React from 'react';
 
+console.log(React.version);
 
+
 
+import { Editor } from './editor';
 
+
 
+ReactDOM.render(<Editor />, document.getElementById('root'));

+ 37 - 0
apps/demo-react-16/src/components/minimap.tsx
View File 

@@ -0,0 +1,37 @@
 
+import React from 'react';
 
+
 
+import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
 
+import { useService } from '@flowgram.ai/free-layout-editor';
 
+
 
+export const Minimap = () => {
 
+  const minimapService = useService(FlowMinimapService);
 
+  return (
 
+    <div
 
+      style={{
 
+        position: 'absolute',
 
+        left: 226,
 
+        bottom: 51,
 
+        zIndex: 100,
 
+        width: 198,
 
+      }}
 
+    >
 
+      <MinimapRender
 
+        service={minimapService}
 
+        containerStyles={{
 
+          pointerEvents: 'auto',
 
+          position: 'relative',
 
+          top: 'unset',
 
+          right: 'unset',
 
+          bottom: 'unset',
 
+          left: 'unset',
 
+        }}
 
+        inactiveStyle={{
 
+          opacity: 1,
 
+          scale: 1,
 
+          translateX: 0,
 
+          translateY: 0,
 
+        }}
 
+      />
 
+    </div>
 
+  );
 
+};

+ 30 - 0
apps/demo-react-16/src/components/node-add-panel.tsx
View File 

@@ -0,0 +1,30 @@
 
+import React from 'react';
 
+
 
+import { WorkflowDragService, useService } from '@flowgram.ai/free-layout-editor';
 
+
 
+const cardkeys = ['Node1', 'Node2'];
 
+
 
+export const NodeAddPanel: React.FC = (props) => {
 
+  const startDragSerivce = useService<WorkflowDragService>(WorkflowDragService);
 
+
 
+  return (
 
+    <div className="demo-free-sidebar">
 
+      {cardkeys.map((nodeType) => (
 
+        <div
 
+          key={nodeType}
 
+          className="demo-free-card"
 
+          onMouseDown={(e) =>
 
+            startDragSerivce.startDragCard(nodeType, e, {
 
+              data: {
 
+                title: `New ${nodeType}`,
 
+                content: 'xxxx',
 
+              },
 
+            })
 
+          }
 
+        >
 
+          {nodeType}
 
+        </div>
 
+      ))}
 
+    </div>
 
+  );
 
+};

+ 37 - 0
apps/demo-react-16/src/components/tools.tsx
View File 

@@ -0,0 +1,37 @@
 
+import React from 'react';
 
+import { useEffect, useState } from 'react';
 
+
 
+import { usePlaygroundTools, useClientContext } from '@flowgram.ai/free-layout-editor';
 
+
 
+export function Tools() {
 
+  const { history } = useClientContext();
 
+  const tools = usePlaygroundTools();
 
+  const [canUndo, setCanUndo] = useState(false);
 
+  const [canRedo, setCanRedo] = useState(false);
 
+
 
+  useEffect(() => {
 
+    const disposable = history.undoRedoService.onChange(() => {
 
+      setCanUndo(history.canUndo());
 
+      setCanRedo(history.canRedo());
 
+    });
 
+    return () => disposable.dispose();
 
+  }, [history]);
 
+
 
+  return (
 
+    <div
 
+      style={{ position: 'absolute', zIndex: 10, bottom: 16, left: 226, display: 'flex', gap: 8 }}
 
+    >
 
+      <button onClick={() => tools.zoomin()}>ZoomIn</button>
 
+      <button onClick={() => tools.zoomout()}>ZoomOut</button>
 
+      <button onClick={() => tools.fitView()}>Fitview</button>
 
+      <button onClick={() => tools.autoLayout()}>AutoLayout</button>
 
+      <button onClick={() => history.undo()} disabled={!canUndo}>
 
+        Undo
 
+      </button>
 
+      <button onClick={() => history.redo()} disabled={!canRedo}>
 
+        Redo
 
+      </button>
 
+      <span>{Math.floor(tools.zoom * 100)}%</span>
 
+    </div>
 
+  );
 
+}

+ 26 - 0
apps/demo-react-16/src/editor.tsx
View File 

@@ -0,0 +1,26 @@
 
+import React from 'react';
 
+
 
+import { EditorRenderer, FreeLayoutEditorProvider } from '@flowgram.ai/free-layout-editor';
 
+
 
+import { useEditorProps } from './hooks/use-editor-props';
 
+import { Tools } from './components/tools';
 
+import { NodeAddPanel } from './components/node-add-panel';
 
+import { Minimap } from './components/minimap';
 
+import '@flowgram.ai/free-layout-editor/index.css';
 
+import './index.css';
 
+
 
+export const Editor = () => {
 
+  const editorProps = useEditorProps();
 
+  return (
 
+    <FreeLayoutEditorProvider {...editorProps}>
 
+      <div className="demo-free-container">
 
+        <div className="demo-free-layout">
 
+          <NodeAddPanel />
 
+          <EditorRenderer className="demo-free-editor" />
 
+        </div>
 
+        <Tools />
 
+        <Minimap />
 
+      </div>
 
+    </FreeLayoutEditorProvider>
 
+  );
 
+};

+ 155 - 0
apps/demo-react-16/src/hooks/use-editor-props.tsx
View File 

@@ -0,0 +1,155 @@
 
+import React, { useMemo } from 'react';
 
+
 
+import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
 
+import { createFreeSnapPlugin } from '@flowgram.ai/free-snap-plugin';
 
+import {
 
+  FreeLayoutProps,
 
+  WorkflowNodeProps,
 
+  WorkflowNodeRenderer,
 
+  Field,
 
+  useNodeRender,
 
+} from '@flowgram.ai/free-layout-editor';
 
+
 
+import { nodeRegistries } from '../node-registries';
 
+import { initialData } from '../initial-data';
 
+
 
+export const useEditorProps = () =>
 
+  useMemo<FreeLayoutProps>(
 
+    () => ({
 
+      /**
 
+       * Whether to enable the background
 
+       */
 
+      background: true,
 
+      /**
 
+       * Whether it is read-only or not, the node cannot be dragged in read-only mode
 
+       */
 
+      readonly: false,
 
+      /**
 
+       * Initial data
 
+       * 初始化数据
 
+       */
 
+      initialData,
 
+      /**
 
+       * Node registries
 
+       * 节点注册
 
+       */
 
+      nodeRegistries,
 
+      /**
 
+       * Get the default node registry, which will be merged with the 'nodeRegistries'
 
+       * 提供默认的节点注册，这个会和 nodeRegistries 做合并
 
+       */
 
+      getNodeDefaultRegistry(type) {
 
+        return {
 
+          type,
 
+          meta: {
 
+            defaultExpanded: true,
 
+          },
 
+          formMeta: {
 
+            /**
 
+             * Render form
 
+             */
 
+            render: () => (
 
+              <>
 
+                <Field<string> name="title">
 
+                  {({ field }) => <div className="demo-free-node-title">{field.value}</div>}
 
+                </Field>
 
+                <div className="demo-free-node-content">
 
+                  <Field<string> name="content">
 
+                    <input />
 
+                  </Field>
 
+                </div>
 
+              </>
 
+            ),
 
+          },
 
+        };
 
+      },
 
+      materials: {
 
+        /**
 
+         * Render Node
 
+         */
 
+        renderDefaultNode: (props: WorkflowNodeProps) => {
 
+          const { form } = useNodeRender();
 
+          return (
 
+            <WorkflowNodeRenderer className="demo-free-node" node={props.node}>
 
+              {form?.render()}
 
+            </WorkflowNodeRenderer>
 
+          );
 
+        },
 
+      },
 
+      /**
 
+       * Content change
 
+       */
 
+      onContentChange(ctx, event) {
 
+        // console.log('Auto Save: ', event, ctx.document.toJSON());
 
+      },
 
+      // /**
 
+      //  * Node engine enable, you can configure formMeta in the FlowNodeRegistry
 
+      //  */
 
+      nodeEngine: {
 
+        enable: true,
 
+      },
 
+      /**
 
+       * Redo/Undo enable
 
+       */
 
+      history: {
 
+        enable: true,
 
+        enableChangeNode: true, // Listen Node engine data change
 
+      },
 
+      /**
 
+       * Playground init
 
+       */
 
+      onInit: (ctx) => {},
 
+      /**
 
+       * Playground render
 
+       */
 
+      onAllLayersRendered(ctx) {
 
+        //  Fitview
 
+        ctx.document.fitView(false);
 
+      },
 
+      /**
 
+       * Playground dispose
 
+       */
 
+      onDispose() {
 
+        console.log('---- Playground Dispose ----');
 
+      },
 
+      plugins: () => [
 
+        /**
 
+         * Minimap plugin
 
+         * 缩略图插件
 
+         */
 
+        createMinimapPlugin({
 
+          disableLayer: true,
 
+          canvasStyle: {
 
+            canvasWidth: 182,
 
+            canvasHeight: 102,
 
+            canvasPadding: 50,
 
+            canvasBackground: 'rgba(245, 245, 245, 1)',
 
+            canvasBorderRadius: 10,
 
+            viewportBackground: 'rgba(235, 235, 235, 1)',
 
+            viewportBorderRadius: 4,
 
+            viewportBorderColor: 'rgba(201, 201, 201, 1)',
 
+            viewportBorderWidth: 1,
 
+            viewportBorderDashLength: 2,
 
+            nodeColor: 'rgba(255, 255, 255, 1)',
 
+            nodeBorderRadius: 2,
 
+            nodeBorderWidth: 0.145,
 
+            nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
 
+            overlayColor: 'rgba(255, 255, 255, 0)',
 
+          },
 
+          inactiveDebounceTime: 1,
 
+        }),
 
+        /**
 
+         * Snap plugin
 
+         * 自动对齐及辅助线插件
 
+         */
 
+        createFreeSnapPlugin({
 
+          edgeColor: '#00B2B2',
 
+          alignColor: '#00B2B2',
 
+          edgeLineWidth: 1,
 
+          alignLineWidth: 1,
 
+          alignCrossWidth: 8,
 
+        }),
 
+      ],
 
+    }),
 
+    []
 
+  );

+ 107 - 0
apps/demo-react-16/src/index.css
View File 

@@ -0,0 +1,107 @@
 
+.demo-free-node {
 
+    display: flex;
 
+    min-width: 300px;
 
+    min-height: 100px;
 
+    flex-direction: column;
 
+    align-items: flex-start;
 
+    box-sizing: border-box;
 
+    border-radius: 8px;
 
+    border: 1px solid var(--light-usage-border-color-border, rgba(28, 31, 35, 0.08));
 
+    background: #fff;
 
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.demo-free-node-title {
 
+    background-color: #93bfe2;
 
+    width: 100%;
 
+    border-radius: 8px 8px 0 0;
 
+    padding: 4px 12px;
 
+}
 
+.demo-free-node-content {
 
+    padding: 4px 12px;
 
+    flex-grow: 1;
 
+    width: 100%;
 
+}
 
+.demo-free-node::before {
 
+    content: '';
 
+    position: absolute;
 
+    top: 0;
 
+    right: 0;
 
+    bottom: 0;
 
+    left: 0;
 
+    z-index: -1;
 
+    background-color: white;
 
+    border-radius: 7px;
 
+}
 
+
 
+.demo-free-node:hover:before {
 
+    -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
 
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
 
+}
 
+
 
+.demo-free-node.activated:before,
 
+.demo-free-node.selected:before {
 
+    outline: 2px solid var(--light-usage-primary-color-primary, #4d53e8);
 
+    -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
 
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
 
+}
 
+
 
+.demo-free-sidebar {
 
+    height: 100%;
 
+    overflow-y: auto;
 
+    padding: 12px 16px 0;
 
+    box-sizing: border-box;
 
+    background: #f7f7fa;
 
+    border-right: 1px solid rgba(29, 28, 35, 0.08);
 
+}
 
+
 
+.demo-free-right-top-panel {
 
+    position: fixed;
 
+    right: 10px;
 
+    top: 70px;
 
+    width: 300px;
 
+    z-index: 999;
 
+}
 
+
 
+.demo-free-card {
 
+    width: 140px;
 
+    height: 60px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    font-size: 20px;
 
+    background: #fff;
 
+    border-radius: 8px;
 
+    box-shadow: 0 6px 8px 0 rgba(28, 31, 35, 0.03);
 
+    cursor: -webkit-grab;
 
+    cursor: grab;
 
+    line-height: 16px;
 
+    margin-bottom: 12px;
 
+    overflow: hidden;
 
+    padding: 16px;
 
+    position: relative;
 
+    color: black;
 
+}
 
+
 
+.demo-free-layout {
 
+    display: flex;
 
+    flex-direction: row;
 
+    flex-grow: 1;
 
+}
 
+
 
+.demo-free-editor {
 
+    flex-grow: 1;
 
+    position: relative;
 
+    height: 100%;
 
+}
 
+
 
+.demo-free-container {
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    display: flex;
 
+    width: 100%;
 
+    height: 100%;
 
+    flex-direction: column;
 
+}
 
+

+ 1 - 0
apps/demo-react-16/src/index.tsx
View File 

@@ -0,0 +1 @@
 
+export { Editor as DemoFreeLayout } from './editor';

+ 49 - 0
apps/demo-react-16/src/initial-data.ts
View File 

@@ -0,0 +1,49 @@
 
+import { WorkflowJSON } from '@flowgram.ai/free-layout-editor';
 
+
 
+export const initialData: WorkflowJSON = {
 
+  nodes: [
 
+    {
 
+      id: 'start_0',
 
+      type: 'start',
 
+      meta: {
 
+        position: { x: 0, y: 0 },
 
+      },
 
+      data: {
 
+        title: 'Start',
 
+        content: 'Start content',
 
+      },
 
+    },
 
+    {
 
+      id: 'node_0',
 
+      type: 'custom',
 
+      meta: {
 
+        position: { x: 400, y: 0 },
 
+      },
 
+      data: {
 
+        title: 'Custom',
 
+        content: 'Custom node content',
 
+      },
 
+    },
 
+    {
 
+      id: 'end_0',
 
+      type: 'end',
 
+      meta: {
 
+        position: { x: 800, y: 0 },
 
+      },
 
+      data: {
 
+        title: 'End',
 
+        content: 'End content',
 
+      },
 
+    },
 
+  ],
 
+  edges: [
 
+    {
 
+      sourceNodeID: 'start_0',
 
+      targetNodeID: 'node_0',
 
+    },
 
+    {
 
+      sourceNodeID: 'node_0',
 
+      targetNodeID: 'end_0',
 
+    },
 
+  ],
 
+};

+ 30 - 0
apps/demo-react-16/src/node-registries.ts
View File 

@@ -0,0 +1,30 @@
 
+import { WorkflowNodeRegistry } from '@flowgram.ai/free-layout-editor';
 
+
 
+/**
 
+ * You can customize your own node registry
 
+ * 你可以自定义节点的注册器
 
+ */
 
+export const nodeRegistries: WorkflowNodeRegistry[] = [
 
+  {
 
+    type: 'start',
 
+    meta: {
 
+      isStart: true, // Mark as start
 
+      deleteDisable: true, // The start node cannot be deleted
 
+      copyDisable: true, // The start node cannot be copied
 
+      defaultPorts: [{ type: 'output' }], // Used to define the input and output ports, the start node only has the output port
 
+    },
 
+  },
 
+  {
 
+    type: 'end',
 
+    meta: {
 
+      deleteDisable: true,
 
+      copyDisable: true,
 
+      defaultPorts: [{ type: 'input' }],
 
+    },
 
+  },
 
+  {
 
+    type: 'custom',
 
+    meta: {},
 
+    defaultPorts: [{ type: 'output' }, { type: 'input' }], // A normal node has two ports
 
+  },
 
+];

+ 23 - 0
apps/demo-react-16/tsconfig.json
View File 

@@ -0,0 +1,23 @@
 
+{
 
+  "extends": "@flowgram.ai/ts-config/tsconfig.flow.path.json",
 
+  "compilerOptions": {
 
+    "rootDir": "./src",
 
+    "outDir": "./dist",
 
+    "experimentalDecorators": true,
 
+    "target": "es2020",
 
+    "module": "esnext",
 
+    "strictPropertyInitialization": false,
 
+    "strict": true,
 
+    "esModuleInterop": true,
 
+    "moduleResolution": "node",
 
+    "skipLibCheck": true,
 
+    "noUnusedLocals": true,
 
+    "noImplicitAny": true,
 
+    "allowJs": true,
 
+    "resolveJsonModule": true,
 
+    "types": ["node"],
 
+    "jsx": "react-jsx",
 
+    "lib": ["es6", "dom", "es2020", "es2019.Array"]
 
+  },
 
+  "include": ["./src"],
 
+}

+ 5 - 1
common/config/rush/common-versions.json
View File 

@@ -70,5 +70,9 @@
 
      * For example, allow some projects to use an older TypeScript compiler
 
      * (in addition to whatever "usual" version is being used by other projects in the repo):
 
      */
 
+    "react": ["^16.8.6"],
 
+    "react-dom": ["^16.8.6"],
 
+    "@types/react": ["^16.8.6"],
 
+    "@types/react-dom": ["^16.8.6"]
 
   }
 
-}
 
+}

+ 129 - 58
common/config/rush/pnpm-lock.yaml
View File 

@@ -480,6 +480,58 @@ importers:
 
         specifier: ^8.54.0
 
         version: 8.57.1
 
 
+  ../../apps/demo-react-16:
 
+    dependencies:
 
+      '@flowgram.ai/free-layout-editor':
 
+        specifier: workspace:*
 
+        version: link:../../packages/client/free-layout-editor
 
+      '@flowgram.ai/free-snap-plugin':
 
+        specifier: workspace:*
 
+        version: link:../../packages/plugins/free-snap-plugin
 
+      '@flowgram.ai/minimap-plugin':
 
+        specifier: workspace:*
 
+        version: link:../../packages/plugins/minimap-plugin
 
+      react:
 
+        specifier: ^16.8.6
 
+        version: 16.14.0
 
+      react-dom:
 
+        specifier: ^16.8.6
 
+        version: 16.8.6(react@16.14.0)
 
+    devDependencies:
 
+      '@flowgram.ai/eslint-config':
 
+        specifier: workspace:*
 
+        version: link:../../config/eslint-config
 
+      '@flowgram.ai/ts-config':
 
+        specifier: workspace:*
 
+        version: link:../../config/ts-config
 
+      '@rsbuild/core':
 
+        specifier: ^1.2.16
 
+        version: 1.2.19
 
+      '@rsbuild/plugin-react':
 
+        specifier: ^1.1.1
 
+        version: 1.1.1(@rsbuild/core@1.2.19)
 
+      '@types/lodash-es':
 
+        specifier: ^4.17.12
 
+        version: 4.17.12
 
+      '@types/node':
 
+        specifier: ^18
 
+        version: 18.19.68
 
+      '@types/react':
 
+        specifier: ^16.8.6
 
+        version: 16.14.63
 
+      '@types/react-dom':
 
+        specifier: ^16.8.6
 
+        version: 16.9.25(@types/react@16.14.63)
 
+      '@types/styled-components':
 
+        specifier: ^5
 
+        version: 5.1.34
 
+      cross-env:
 
+        specifier: ~7.0.3
 
+        version: 7.0.3
 
+      eslint:
 
+        specifier: ^8.54.0
 
+        version: 8.57.1
 
+
 
   ../../apps/docs:
 
     dependencies:
 
       '@codesandbox/sandpack-react':
 
@@ -743,10 +795,10 @@ importers:
 
         specifier: ^4.0.2
 
         version: 4.0.2
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -856,10 +908,10 @@ importers:
 
         specifier: ^6.0.1
 
         version: 6.2.0(reflect-metadata@0.2.2)
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -923,10 +975,10 @@ importers:
 
         specifier: ^4.0.2
 
         version: 4.0.2
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -993,10 +1045,10 @@ importers:
 
         specifier: ^4.17.21
 
         version: 4.17.21
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -1382,10 +1434,10 @@ importers:
 
         specifier: ^6.0.1
 
         version: 6.2.0(reflect-metadata@0.2.2)
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -1552,10 +1604,10 @@ importers:
 
         version: link:../../../config/ts-config
 
       '@testing-library/react':
 
         specifier: ^12
 
-        version: 12.1.5(@types/react@18.3.16)(react-dom@17.0.2)(react@17.0.2)
 
+        version: 12.1.5(@types/react@18.3.16)(react-dom@16.8.6)(react@16.14.0)
 
       '@testing-library/react-hooks':
 
         specifier: ^8.0.1
 
-        version: 8.0.1(@types/react@18.3.16)(react-dom@17.0.2)(react@17.0.2)
 
+        version: 8.0.1(@types/react@18.3.16)(react-dom@16.8.6)(react@16.14.0)
 
       '@types/lodash':
 
         specifier: ^4.14.137
 
         version: 4.17.13
 
@@ -1828,10 +1880,10 @@ importers:
 
         specifier: ^4.0.2
 
         version: 4.0.2
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
     devDependencies:
 
       '@flowgram.ai/eslint-config':
 
@@ -1886,10 +1938,10 @@ importers:
 
         specifier: ^4.17.21
 
         version: 4.17.21
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -1956,10 +2008,10 @@ importers:
 
         specifier: ^4.0.2
 
         version: 4.0.2
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -2008,10 +2060,10 @@ importers:
 
         specifier: ^6.0.1
 
         version: 6.2.0(reflect-metadata@0.2.2)
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -2060,10 +2112,10 @@ importers:
 
         specifier: ^6.0.1
 
         version: 6.2.0(reflect-metadata@0.2.2)
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -2170,10 +2222,10 @@ importers:
 
         specifier: ^4.17.21
 
         version: 4.17.21
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -2477,10 +2529,10 @@ importers:
 
         specifier: ^4.17.21
 
         version: 4.17.21
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -2900,10 +2952,10 @@ importers:
 
         specifier: ^6.0.1
 
         version: 6.2.0(reflect-metadata@0.2.2)
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -3409,10 +3461,10 @@ importers:
 
         specifier: ^6.0.1
 
         version: 6.2.0(reflect-metadata@0.2.2)
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -3562,10 +3614,10 @@ importers:
 
         specifier: ^4.0.2
 
         version: 4.0.2
 
       react:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1
 
       react-dom:
 
-        specifier: '>=17'
 
+        specifier: '>=16.8'
 
         version: 18.3.1(react@18.3.1)
 
       reflect-metadata:
 
         specifier: ~0.2.2
 
@@ -7580,7 +7632,7 @@ packages:
 
       pretty-format: 27.5.1
 
     dev: true
 
 
-  /@testing-library/react-hooks@8.0.1(@types/react@18.3.16)(react-dom@17.0.2)(react@17.0.2):
 
+  /@testing-library/react-hooks@8.0.1(@types/react@18.3.16)(react-dom@16.8.6)(react@16.14.0):
 
     resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
 
     engines: {node: '>=12'}
 
     peerDependencies:
 
@@ -7598,9 +7650,9 @@ packages:
 
     dependencies:
 
       '@babel/runtime': 7.26.0
 
       '@types/react': 18.3.16
 
-      react: 17.0.2
 
-      react-dom: 17.0.2(react@17.0.2)
 
-      react-error-boundary: 3.1.4(react@17.0.2)
 
+      react: 16.14.0
 
+      react-dom: 16.8.6(react@16.14.0)
 
+      react-error-boundary: 3.1.4(react@16.14.0)
 
     dev: true
 
 
   /@testing-library/react-hooks@8.0.1(@types/react@18.3.16)(react-dom@18.3.1)(react@18.3.1):
 
@@ -7626,7 +7678,7 @@ packages:
 
       react-error-boundary: 3.1.4(react@18.3.1)
 
     dev: true
 
 
-  /@testing-library/react@12.1.5(@types/react@18.3.16)(react-dom@17.0.2)(react@17.0.2):
 
+  /@testing-library/react@12.1.5(@types/react@18.3.16)(react-dom@16.8.6)(react@16.14.0):
 
     resolution: {integrity: sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==}
 
     engines: {node: '>=12'}
 
     peerDependencies:
 
@@ -7635,9 +7687,9 @@ packages:
 
     dependencies:
 
       '@babel/runtime': 7.26.0
 
       '@testing-library/dom': 8.20.1
 
-      '@types/react-dom': 17.0.26(@types/react@18.3.16)
 
-      react: 17.0.2
 
-      react-dom: 17.0.2(react@17.0.2)
 
+      '@types/react-dom': 16.9.25(@types/react@18.3.16)
 
+      react: 16.14.0
 
+      react-dom: 16.8.6(react@16.14.0)
 
     transitivePeerDependencies:
 
       - '@types/react'
 
     dev: true
 
@@ -7651,7 +7703,7 @@ packages:
 
     dependencies:
 
       '@babel/runtime': 7.26.0
 
       '@testing-library/dom': 8.20.1
 
-      '@types/react-dom': 17.0.26(@types/react@18.3.16)
 
+      '@types/react-dom': 16.9.25(@types/react@18.3.16)
 
       react: 18.3.1
 
       react-dom: 18.3.1(react@18.3.1)
 
     transitivePeerDependencies:
 
@@ -7864,10 +7916,18 @@ packages:
 
   /@types/prop-types@15.7.14:
 
     resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
 
 
-  /@types/react-dom@17.0.26(@types/react@18.3.16):
 
-    resolution: {integrity: sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==}
 
+  /@types/react-dom@16.9.25(@types/react@16.14.63):
 
+    resolution: {integrity: sha512-ZK//eAPhwft9Ul2/Zj+6O11YR6L4JX0J2sVeBC9Ft7x7HFN7xk7yUV/zDxqV6rjvqgl6r8Dq7oQImxtyf/Mzcw==}
 
     peerDependencies:
 
-      '@types/react': ^17.0.0
 
+      '@types/react': ^16.0.0
 
+    dependencies:
 
+      '@types/react': 16.14.63
 
+    dev: true
 
+
 
+  /@types/react-dom@16.9.25(@types/react@18.3.16):
 
+    resolution: {integrity: sha512-ZK//eAPhwft9Ul2/Zj+6O11YR6L4JX0J2sVeBC9Ft7x7HFN7xk7yUV/zDxqV6rjvqgl6r8Dq7oQImxtyf/Mzcw==}
 
+    peerDependencies:
 
+      '@types/react': ^16.0.0
 
     dependencies:
 
       '@types/react': 18.3.16
 
     dev: true
 
@@ -7880,12 +7940,24 @@ packages:
 
       '@types/react': 18.3.16
 
     dev: true
 
 
+  /@types/react@16.14.63:
 
+    resolution: {integrity: sha512-s83gano0fRBVEw3ejdLpjgvU83F0LIeeuXqdxfPZF/Sc2bhr60tEqCK1zZ+aLirBwRSD6V5zCtOsEjcwKow3JQ==}
 
+    dependencies:
 
+      '@types/prop-types': 15.7.14
 
+      '@types/scheduler': 0.16.8
 
+      csstype: 3.1.3
 
+    dev: true
 
+
 
   /@types/react@18.3.16:
 
     resolution: {integrity: sha512-oh8AMIC4Y2ciKufU8hnKgs+ufgbA/dhPTACaZPM86AbwX9QwnFtSoPWEeRUj8fge+v6kFt78BXcDhAU1SrrAsw==}
 
     dependencies:
 
       '@types/prop-types': 15.7.14
 
       csstype: 3.1.3
 
 
+  /@types/scheduler@0.16.8:
 
+    resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
 
+    dev: true
 
+
 
   /@types/semver@7.5.8:
 
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
 
@@ -14042,16 +14114,16 @@ packages:
 
       es6-symbol: 3.1.4
 
     dev: false
 
 
-  /react-dom@17.0.2(react@17.0.2):
 
-    resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
 
+  /react-dom@16.8.6(react@16.14.0):
 
+    resolution: {integrity: sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==}
 
     peerDependencies:
 
-      react: 17.0.2
 
+      react: ^16.0.0
 
     dependencies:
 
       loose-envify: 1.4.0
 
       object-assign: 4.1.1
 
-      react: 17.0.2
 
-      scheduler: 0.20.2
 
-    dev: true
 
+      prop-types: 15.8.1
 
+      react: 16.14.0
 
+      scheduler: 0.13.6
 
 
   /react-dom@18.3.1(react@18.3.1):
 
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
 
@@ -14074,14 +14146,14 @@ packages:
 
       react-dom: 18.3.1(react@18.3.1)
 
     dev: false
 
 
-  /react-error-boundary@3.1.4(react@17.0.2):
 
+  /react-error-boundary@3.1.4(react@16.14.0):
 
     resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
 
     engines: {node: '>=10', npm: '>=6'}
 
     peerDependencies:
 
       react: '>=16.13.1'
 
     dependencies:
 
       '@babel/runtime': 7.26.0
 
-      react: 17.0.2
 
+      react: 16.14.0
 
     dev: true
 
 
   /react-error-boundary@3.1.4(react@18.3.1):
 
@@ -14186,13 +14258,13 @@ packages:
 
       react-dom: 18.3.1(react@18.3.1)
 
     dev: false
 
 
-  /react@17.0.2:
 
-    resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
 
+  /react@16.14.0:
 
+    resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
 
     engines: {node: '>=0.10.0'}
 
     dependencies:
 
       loose-envify: 1.4.0
 
       object-assign: 4.1.1
 
-    dev: true
 
+      prop-types: 15.8.1
 
 
   /react@18.3.1:
 
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
 
@@ -14868,12 +14940,11 @@ packages:
 
       xmlchars: 2.2.0
 
     dev: true
 
 
-  /scheduler@0.20.2:
 
-    resolution: {integrity: sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==}
 
+  /scheduler@0.13.6:
 
+    resolution: {integrity: sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==}
 
     dependencies:
 
       loose-envify: 1.4.0
 
       object-assign: 4.1.1
 
-    dev: true
 
 
   /scheduler@0.23.2:
 
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}

+ 2 - 2
packages/canvas-engine/core/package.json
View File 

@@ -52,8 +52,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/canvas-engine/fixed-layout-core/package.json
View File 

@@ -45,8 +45,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/canvas-engine/free-layout-core/package.json
View File 

@@ -67,8 +67,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/canvas-engine/renderer/package.json
View File 

@@ -50,8 +50,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/client/editor/package.json
View File 

@@ -64,8 +64,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/client/fixed-layout-editor/package.json
View File 

@@ -61,8 +61,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/client/free-layout-editor/package.json
View File 

@@ -66,8 +66,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/client/playground-react/package.json
View File 

@@ -56,8 +56,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/common/command/package.json
View File 

@@ -43,8 +43,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/common/reactive/package.json
View File 

@@ -45,8 +45,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/common/utils/package.json
View File 

@@ -47,8 +47,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/materials/fixed-semi-materials/package.json
View File 

@@ -49,8 +49,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/materials/form-materials/package.json
View File 

@@ -58,8 +58,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/node-engine/form-core/package.json
View File 

@@ -52,8 +52,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/node-engine/form/package.json
View File 

@@ -50,8 +50,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/node-engine/node/package.json
View File 

@@ -55,8 +55,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/plugins/background-plugin/package.json
View File 

@@ -43,8 +43,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/plugins/fixed-drag-plugin/package.json
View File 

@@ -44,8 +44,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/plugins/fixed-reactor-plugin/package.json
View File 

@@ -47,8 +47,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/plugins/free-auto-layout-plugin/package.json
View File 

@@ -52,8 +52,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/free-container-plugin/package.json
View File 

@@ -56,8 +56,8 @@
 
         "vitest": "^0.34.6"
 
     },
 
     "peerDependencies": {
 
-        "react": ">=17",
 
-        "react-dom": ">=17",
 
+        "react": ">=16.8",
 
+        "react-dom": ">=16.8",
 
         "styled-components": ">=4"
 
     },
 
     "publishConfig": {

+ 2 - 2
packages/plugins/free-group-plugin/package.json
View File 

@@ -57,8 +57,8 @@
 
         "vitest": "^0.34.6"
 
     },
 
     "peerDependencies": {
 
-        "react": ">=17",
 
-        "react-dom": ">=17",
 
+        "react": ">=16.8",
 
+        "react-dom": ">=16.8",
 
         "styled-components": ">=4"
 
     },
 
     "publishConfig": {

+ 2 - 2
packages/plugins/free-history-plugin/package.json
View File 

@@ -49,8 +49,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/plugins/free-hover-plugin/package.json
View File 

@@ -51,8 +51,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/plugins/free-lines-plugin/package.json
View File 

@@ -54,8 +54,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/free-node-panel-plugin/package.json
View File 

@@ -54,8 +54,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/free-snap-plugin/package.json
View File 

@@ -53,8 +53,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/free-stack-plugin/package.json
View File 

@@ -53,8 +53,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/group-plugin/package.json
View File 

@@ -45,8 +45,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/plugins/history-node-plugin/package.json
View File 

@@ -55,8 +55,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/materials-plugin/package.json
View File 

@@ -51,8 +51,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/minimap-plugin/package.json
View File 

@@ -52,8 +52,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/node-core-plugin/package.json
View File 

@@ -53,8 +53,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/node-variable-plugin/package.json
View File 

@@ -54,8 +54,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17",
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8",
 
     "styled-components": ">=4"
 
   },
 
   "publishConfig": {

+ 2 - 2
packages/plugins/select-box-plugin/package.json
View File 

@@ -43,8 +43,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 2 - 2
packages/variable-engine/variable-core/package.json
View File 

@@ -55,8 +55,8 @@
 
     "vitest": "^0.34.6"
 
   },
 
   "peerDependencies": {
 
-    "react": ">=17",
 
-    "react-dom": ">=17"
 
+    "react": ">=16.8",
 
+    "react-dom": ">=16.8"
 
   },
 
   "publishConfig": {
 
     "access": "public",

+ 6 - 0
rush.json
View File 

@@ -765,6 +765,12 @@
 
             "projectFolder": "apps/demo-nextjs",
 
             "versionPolicyName": "appPolicy",
 
             "tags": ["level-1", "team-flow", "demo"]
 
+        },
 
+        {
 
+            "packageName": "@flowgram.ai/demo-react-16",
 
+            "projectFolder": "apps/demo-react-16",
 
+            "versionPolicyName": "appPolicy",
 
+            "tags": ["level-1", "team-flow", "demo"]
 
         }
 
     ]
 
 }