Merge pull request #300 from ajthinking/diagram-updates

Add DataStory onChange
ajthinking · Sep 18, 2024 · dc5299f · dc5299f
2 parents a7e0fca + 0178151
commit dc5299f
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 10 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@data-story/core",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "main": "dist/main/index.js",
   "type": "commonjs",
   "types": "dist/main/index.d.ts",

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,4 +1,5 @@
 export { get } from './utils/get'
+export { debounce } from './utils/debounce'
 export { sleep } from './utils/sleep'
 export { stringifyError } from './utils/stringifyError'
 export { serializeError } from './utils/serializeError'

diff --git a/packages/core/src/utils/debounce.ts b/packages/core/src/utils/debounce.ts
@@ -0,0 +1,13 @@
+export function debounce<T extends (...args: any[]) => Promise<void>>(func: T, wait: number) {
+  let timeout: NodeJS.Timeout;
+
+  return (...args: Parameters<T>): Promise<void> => {
+    return new Promise((resolve) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(async () => {
+        await func(...args);  // Call the original function
+        resolve();  // Resolve the promise
+      }, wait);
+    });
+  };
+}
diff --git a/packages/nodejs/package.json b/packages/nodejs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@data-story/nodejs",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "main": "dist/index.js",
   "type": "commonjs",
   "types": "dist/index.d.ts",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@data-story/ui",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "main": "./dist/bundle.js",
   "types": "./dist/src/index.d.ts",
   "exports": {

diff --git a/packages/ui/src/components/DataStory/DataStory.tsx b/packages/ui/src/components/DataStory/DataStory.tsx
@@ -9,7 +9,7 @@ import { DataStoryCanvasProvider } from './store/store';
 import { DataStoryCanvas } from './DataStoryCanvas';
 import { useRequest } from 'ahooks';
 import { LoadingMask } from './common/loadingMask';
-import { Diagram } from '@data-story/core';
+import { debounce, Diagram,  } from '@data-story/core';
 import { LocalStorageKey } from './common/method';
 
 function handleRequestError(requestError?: Error): void {
@@ -19,7 +19,7 @@ function handleRequestError(requestError?: Error): void {
 export const DataStoryComponent = (
   props: DataStoryProps
 ) => {
-  const { client, initSidebarKey, children, initDiagram } = props;
+  const { client, initSidebarKey, children, initDiagram, onChange } = props;
   const [selectedNode, setSelectedNode] = useState<ReactFlowNode>();
   const [isSidebarClose, setIsSidebarClose] = useState(!!props.hideSidebar);
   const [updateSelectedNodeData, setUpdateSelectedNodeData] = useState<ReactFlowNode['data']>();
@@ -92,6 +92,7 @@ export const DataStoryComponent = (
                   selectedNode={selectedNode}
                   selectedNodeData={updateSelectedNodeData}
                   onNodeSelected={setSelectedNode}
+                  onChange={onChange}
                 />
               </Allotment.Pane>
             </Allotment>

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -1,6 +1,6 @@
 import { DataStoryControls } from './dataStoryControls';
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Background, BackgroundVariant, ReactFlow, ReactFlowProvider, } from '@xyflow/react';
+import { Background, BackgroundVariant, EdgeChange, NodeChange, ReactFlow, ReactFlowProvider, } from '@xyflow/react';
 import NodeComponent from '../Node/NodeComponent';
 import { useGetStore, useStore } from './store/store';
 import { shallow } from 'zustand/shallow';
@@ -50,7 +50,8 @@ const Flow = ({
   selectedNodeData,
   selectedNode,
   onSave,
-  client
+  client,
+  onChange,
 }: DataStoryCanvasProps) => {
   const selector = (state: StoreSchema) => ({
     nodes: state.nodes,
@@ -64,6 +65,7 @@ const Flow = ({
     addNodeFromDescription: state.addNodeFromDescription,
     setOpenNodeSidebarId: state.setOpenNodeSidebarId,
     traverseNodes: state.traverseNodes,
+    toDiagram: state.toDiagram,
   });
 
   const {
@@ -77,7 +79,8 @@ const Flow = ({
     setObservers,
     addNodeFromDescription,
     setOpenNodeSidebarId,
-    traverseNodes
+    traverseNodes,
+    toDiagram,
   } = useStore(selector, shallow);
 
   useSelectedNodeSettings({
@@ -128,8 +131,14 @@ const Flow = ({
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes as NodeTypes}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
+        onNodesChange={(changes: NodeChange[]) => {
+          onNodesChange(changes);
+          if(onChange) onChange(toDiagram())
+        }}
+        onEdgesChange={(changes: EdgeChange[]) => {
+          onEdgesChange(changes);
+          if(onChange) onChange(toDiagram())
+        }}
         onConnect={connect}
         onInit={(rfInstance: StoreInitOptions['rfInstance']) => {
           onInit({

diff --git a/packages/ui/src/components/DataStory/types.ts b/packages/ui/src/components/DataStory/types.ts
@@ -73,6 +73,7 @@ export type DataStoryProps = {
    * initSidebarKey: 'explorer' (open the explorer sidebar by default)
    */
   initSidebarKey?: string;
+  onChange?: (diagram: Diagram) => Promise<void>
 }
 
 export type DataStoryCanvasProps = {
@@ -82,6 +83,7 @@ export type DataStoryCanvasProps = {
   setSidebarKey?: React.Dispatch<React.SetStateAction<string>>;
   sidebarKey?: string;
   onSave?:  () => Promise<void>;
+  onChange?: (diagram: Diagram) => Promise<void>
 } & DataStoryProps;
 
 export type StoreInitOptions = {