@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/organisms/Card/EntityNode.tsx

@@ -1,259 +1,259 @@
-import { Node, useNodeId } from '@xyflow/react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ICardNodeData } from '../../types/card-node';
-import { NodeContextMenu } from '../NodeContextMenu';
-import {
-  useRegisterEvent,
-  useRegisterEventCallback,
-  useTriggerEvent,
-} from '../../utils/event-hooks';
-import { useDeleteNodeByEvent, useUpdateNode } from '../../utils/node-hooks';
-import { Box, Drawer, IconButton, Paper } from '@mui/material';
-import { useDroppable } from '@dnd-kit/core';
-import { SideHandles } from '../../molecules/SideHandles';
-import CardEditableTitle from '../../atoms/CardEditableTitle';
-import EntityNodeCoverContent from '../../atoms/CardMainContent';
-import { EntityNodeBlocks } from '../../molecules/EntityNodeBlocks';
-import AddNodeAnchorForCardNodes from '../../atoms/AddNodeAnchor';
-import { useCustomReactFlow } from '../../hooks/customUseReactFlow';
-import { RiCodeSSlashLine } from 'react-icons/ri';
-import ReactJson from 'react-json-view';
-import { useDiagram, useSelectedNode } from '../../contexts/DiagramProvider';
-import {
-  CardDataProvider,
-  useDraggedCard,
-  useNodeIsPinned,
-  useSetAddingBlock,
-  useSetDraggedCard,
-} from '../../contexts/CardDataProvider';
-import constantLengths from '../../utils/constant-lengths';
-import { RiPushpin2Fill, RiPushpin2Line } from 'react-icons/ri';
-import { useResizeObserver } from '../../hooks/useResizeObserver';
-import { NodeMouseHandler } from '../../utils/event-store';
-
-// Memoized subcomponent for the JSON Drawer
-const JsonDrawer = React.memo(
-  ({
-    isOpen,
-    onClose,
-    nodeId,
-  }: {
-    isOpen: boolean;
-    onClose: () => void;
-    nodeId: string;
-  }) => {
-    const nodes = useCustomReactFlow().getNodes();
-
-    return (
-      <Drawer
-        anchor="right"
-        open={isOpen}
-        onClose={onClose}
-        sx={{
-          '& .MuiDrawer-paper': {
-            width: '400px',
-            padding: 2,
-          },
-        }}
-      >
-        <ReactJson
-          src={nodes.find((node) => node.id === nodeId) ?? {}}
-          theme="monokai"
-          displayDataTypes={false}
-          collapsed={2}
-        />
-      </Drawer>
-    );
-  },
-);
-
-// Memoized subcomponent for the JSON View Icon Button
-const JsonViewButton = React.memo(({ onClick }: { onClick: () => void }) => {
-  return (
-    <IconButton
-      onClick={onClick}
-      sx={{
-        position: 'absolute',
-        top: 20,
-        right: 10,
-        zIndex: 10,
-      }}
-    >
-      <RiCodeSSlashLine color="#FFFF" />
-    </IconButton>
-  );
-});
-
-// Memoized subcomponent for the Node Content
-const NodeContent = React.memo(() => {
-  console.log('NodeContent re-rendered');
-
-  const { getNodes, getEdges } = useCustomReactFlow();
-  const nodeId = useNodeId(); // Use selector for nodeId
-  const isPinned = useNodeIsPinned();
-  const { register: registerPaneClick, unregister: unregisterPaneClick } =
-    useRegisterEvent('onPaneClick');
-  const draggedCard = useDraggedCard(); // Use selector if available
-  const setDraggedCard = useSetDraggedCard(); // Use selector if available
-  const selectedNode = useSelectedNode();
-  const setIsPannable = useDiagram((state) => state.setPannable);
-  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
-  const setContentHeight = useDiagram((state) => state.setContentHeight);
-
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [isJsonDrawerOpen, setIsJsonDrawerOpen] = useState(false);
-  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
-
-  const dragData = useRef([]);
-  const handleOnNodeDragStart: NodeMouseHandler = useCallback(
-    (_event: React.MouseEvent, node: Node) => {
-      if (node.id === nodeId) {
-        setDraggedCard(nodeId);
-        dragData.current = [
-          JSON.parse(JSON.stringify(getNodes())),
-          JSON.parse(JSON.stringify(getEdges())),
-        ] as never;
-      }
-    },
-    [nodeId, getNodes, getEdges],
-  );
-
-  const handleOnNodeDragEnd: NodeMouseHandler = useCallback(
-    (_event: React.MouseEvent, node: Node) => {
-      if (node.id === nodeId) {
-        setDraggedCard(null);
-        if (dragData.current) {
-          dragData.current = [];
-        }
-      }
-    },
-    [nodeId, draggedCard],
-  );
-
-  useRegisterEventCallback('onNodeDragStart', handleOnNodeDragStart);
-  useRegisterEventCallback('onNodeDragStop', handleOnNodeDragEnd);
-
-  const handleOpenToolbar = useTriggerEvent('onOpenToolbar');
-  const handleKeyEvents = useDeleteNodeByEvent(nodeId || '');
-  const setAddingBlock = useSetAddingBlock();
-  const onUnselect = useCallback(() => {
-    setSelectedNode(null);
-    setAddingBlock(false); // Use selector if available
-    unregisterPaneClick();
-  }, [unregisterPaneClick]);
-
-  const onSelect = useCallback(() => {
-    if (!nodeId) return;
-    handleOpenToolbar();
-
-    setSelectedNode(nodeId);
-    registerPaneClick(onUnselect);
-  }, [registerPaneClick, handleOpenToolbar, setSelectedNode, setIsPannable]);
-
-  const { setNodeRef, isOver } = useDroppable({ id: `node-${nodeId}` });
-
-  const toggleJsonDrawer = useCallback(() => {
-    setIsJsonDrawerOpen((prev) => !prev);
-  }, []);
-
-  const handleResize = React.useCallback(
-    ({ height }: { height: number }) => {
-      if (nodeId) {
-        const safeHeight = height || constantLengths.SUB_NODE_HEIGHT;
-        setContentHeight(nodeId, safeHeight + 15);
-      }
-    },
-    [nodeId, setContentHeight]
-  );
-
-  useResizeObserver(contentRef, handleResize);
-
-  const updateNode = useUpdateNode();
-
-  const togglePin = useCallback(() => {
-    updateNode(nodeId!, (node) => {
-      const isCurrentlyPinned = node?.data?.isPinned ?? false;
-      return {
-        data: {
-          ...node.data,
-          isPinned: !isCurrentlyPinned,
-        },
-      };
-    });
-  }, [updateNode, nodeId]);
-
-  return (
-    <>
-      <Paper
-        ref={setNodeRef}
-        variant={
-          (draggedCard === nodeId ? 'draggedDiagramCard' : 'diagramCard') as 'elevation' | 'outlined'
-        }
-        onClick={onSelect}
-        sx={{
-          border: `5px solid ${isOver ? '#0059ff' : '#3688A2'}`,
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-          zIndex: selectedNode === nodeId ? 2 : 1,
-          transition: 'z-index 0.2s ease',
-          '& .react-flow__handle': {
-            zIndex: 3
-          },
-          backgroundColor: '#232323'
-        }}
-      >
-        <IconButton
-          onClick={togglePin}
-          sx={{
-            position: 'absolute',
-            top: 20,
-            right: 50,
-            zIndex: 10,
-          }}
-        >
-          {isPinned ? <RiPushpin2Fill color="#FFFF" /> : <RiPushpin2Line color="#FFFF" />}
-        </IconButton>
-        {enableJson && <JsonViewButton onClick={toggleJsonDrawer} />}
-        <SideHandles />
-        <NodeContextMenu />
-        <Box onKeyDown={handleKeyEvents} tabIndex={0} ref={contentRef}>
-          <div
-            style={{
-              borderColor: selectedNode === nodeId ? '#0059ff' : undefined,
-            }}
-          >
-            <CardEditableTitle />
-            <EntityNodeCoverContent />
-            <EntityNodeBlocks />
-            {selectedNode === nodeId && (
-              <AddNodeAnchorForCardNodes direction={'right'} />
-            )}
-          </div>
-        </Box>
-        {selectedNode === nodeId && (
-          <AddNodeAnchorForCardNodes direction={'bottom'} />
-        )}
-      </Paper>
-
-      {enableJson && (
-        <JsonDrawer
-          isOpen={isJsonDrawerOpen}
-          onClose={toggleJsonDrawer}
-          nodeId={nodeId ?? ''}
-        />
-      )}
-    </>
-  );
-});
-
-// Main EntityNode component
-const EntityNode = React.memo(({ id }: { id: string }) => {
-  return (
-    <CardDataProvider nodeId={id}>
-      <NodeContent />
-    </CardDataProvider>
-  );
-});
-
-export { EntityNode };
+import { Node, useNodeId } from '@xyflow/react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ICardNodeData } from '../../types/card-node';
+import { NodeContextMenu } from '../NodeContextMenu';
+import {
+  useRegisterEvent,
+  useRegisterEventCallback,
+  useTriggerEvent,
+} from '../../utils/event-hooks';
+import { useDeleteNodeByEvent, useUpdateNode } from '../../utils/node-hooks';
+import { Box, Drawer, IconButton, Paper } from '@mui/material';
+import { useDroppable } from '@dnd-kit/core';
+import { SideHandles } from '../../molecules/SideHandles';
+import CardEditableTitle from '../../atoms/CardEditableTitle';
+import EntityNodeCoverContent from '../../atoms/CardMainContent';
+import { EntityNodeBlocks } from '../../molecules/EntityNodeBlocks';
+import AddNodeAnchorForCardNodes from '../../atoms/AddNodeAnchor';
+import { useCustomReactFlow } from '../../hooks/customUseReactFlow';
+import { RiCodeSSlashLine } from 'react-icons/ri';
+import ReactJson from 'react-json-view';
+import { useDiagram, useSelectedNode } from '../../contexts/DiagramProvider';
+import {
+  CardDataProvider,
+  useDraggedCard,
+  useNodeIsPinned,
+  useSetAddingBlock,
+  useSetDraggedCard,
+} from '../../contexts/CardDataProvider';
+import constantLengths from '../../utils/constant-lengths';
+import { RiPushpin2Fill, RiPushpin2Line } from 'react-icons/ri';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { NodeMouseHandler } from '../../utils/event-store';
+
+// Memoized subcomponent for the JSON Drawer
+const JsonDrawer = React.memo(
+  ({
+    isOpen,
+    onClose,
+    nodeId,
+  }: {
+    isOpen: boolean;
+    onClose: () => void;
+    nodeId: string;
+  }) => {
+    const nodes = useCustomReactFlow().getNodes();
+
+    return (
+      <Drawer
+        anchor="right"
+        open={isOpen}
+        onClose={onClose}
+        sx={{
+          '& .MuiDrawer-paper': {
+            width: '400px',
+            padding: 2,
+          },
+        }}
+      >
+        <ReactJson
+          src={nodes.find((node) => node.id === nodeId) ?? {}}
+          theme="monokai"
+          displayDataTypes={false}
+          collapsed={2}
+        />
+      </Drawer>
+    );
+  },
+);
+
+// Memoized subcomponent for the JSON View Icon Button
+const JsonViewButton = React.memo(({ onClick }: { onClick: () => void }) => {
+  return (
+    <IconButton
+      onClick={onClick}
+      sx={{
+        position: 'absolute',
+        top: 20,
+        right: 10,
+        zIndex: 10,
+      }}
+    >
+      <RiCodeSSlashLine color="#FFFF" />
+    </IconButton>
+  );
+});
+
+// Memoized subcomponent for the Node Content
+const NodeContent = React.memo(() => {
+  console.log('NodeContent re-rendered');
+
+  const { getNodes, getEdges } = useCustomReactFlow();
+  const nodeId = useNodeId(); // Use selector for nodeId
+  const isPinned = useNodeIsPinned();
+  const { register: registerPaneClick, unregister: unregisterPaneClick } =
+    useRegisterEvent('onPaneClick');
+  const draggedCard = useDraggedCard(); // Use selector if available
+  const setDraggedCard = useSetDraggedCard(); // Use selector if available
+  const selectedNode = useSelectedNode();
+  const setIsPannable = useDiagram((state) => state.setPannable);
+  const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+  const setContentHeight = useDiagram((state) => state.setContentHeight);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isJsonDrawerOpen, setIsJsonDrawerOpen] = useState(false);
+  const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+
+  const dragData = useRef([]);
+  const handleOnNodeDragStart: NodeMouseHandler = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      if (node.id === nodeId) {
+        setDraggedCard(nodeId);
+        dragData.current = [
+          JSON.parse(JSON.stringify(getNodes())),
+          JSON.parse(JSON.stringify(getEdges())),
+        ] as never;
+      }
+    },
+    [nodeId, getNodes, getEdges],
+  );
+
+  const handleOnNodeDragEnd: NodeMouseHandler = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      if (node.id === nodeId) {
+        setDraggedCard(null);
+        if (dragData.current) {
+          dragData.current = [];
+        }
+      }
+    },
+    [nodeId, draggedCard],
+  );
+
+  useRegisterEventCallback('onNodeDragStart', handleOnNodeDragStart);
+  useRegisterEventCallback('onNodeDragStop', handleOnNodeDragEnd);
+
+  const handleOpenToolbar = useTriggerEvent('onOpenToolbar');
+  const handleKeyEvents = useDeleteNodeByEvent(nodeId || '');
+  const setAddingBlock = useSetAddingBlock();
+  const onUnselect = useCallback(() => {
+    setSelectedNode(null);
+    setAddingBlock(false); // Use selector if available
+    unregisterPaneClick();
+  }, [unregisterPaneClick]);
+
+  const onSelect = useCallback(() => {
+    if (!nodeId) return;
+    handleOpenToolbar();
+
+    setSelectedNode(nodeId);
+    registerPaneClick(onUnselect);
+  }, [registerPaneClick, handleOpenToolbar, setSelectedNode, setIsPannable]);
+
+  const { setNodeRef, isOver } = useDroppable({ id: `node-${nodeId}` });
+
+  const toggleJsonDrawer = useCallback(() => {
+    setIsJsonDrawerOpen((prev) => !prev);
+  }, []);
+
+  const handleResize = React.useCallback(
+    ({ height }: { height: number }) => {
+      if (nodeId) {
+        const safeHeight = height || constantLengths.SUB_NODE_HEIGHT;
+        setContentHeight(nodeId, safeHeight + 15);
+      }
+    },
+    [nodeId, setContentHeight]
+  );
+
+  useResizeObserver(contentRef, handleResize);
+
+  const updateNode = useUpdateNode();
+
+  const togglePin = useCallback(() => {
+    updateNode(nodeId!, (node) => {
+      const isCurrentlyPinned = node?.data?.isPinned ?? false;
+      return {
+        data: {
+          ...node.data,
+          isPinned: !isCurrentlyPinned,
+        },
+      };
+    });
+  }, [updateNode, nodeId]);
+
+  return (
+    <>
+      <Paper
+        ref={setNodeRef}
+        variant={
+          (draggedCard === nodeId ? 'draggedDiagramCard' : 'diagramCard') as 'elevation' | 'outlined'
+        }
+        onClick={onSelect}
+        sx={{
+          border: `5px solid ${isOver ? '#0059ff' : '#3688A2'}`,
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          zIndex: selectedNode === nodeId ? 2 : 1,
+          transition: 'z-index 0.2s ease',
+          '& .react-flow__handle': {
+            zIndex: 3
+          },
+          backgroundColor: '#232323'
+        }}
+      >
+        <IconButton
+          onClick={togglePin}
+          sx={{
+            position: 'absolute',
+            top: 20,
+            right: 50,
+            zIndex: 10,
+          }}
+        >
+          {isPinned ? <RiPushpin2Fill color="#FFFF" /> : <RiPushpin2Line color="#FFFF" />}
+        </IconButton>
+        {enableJson && <JsonViewButton onClick={toggleJsonDrawer} />}
+        <SideHandles />
+        <NodeContextMenu />
+        <Box onKeyDown={handleKeyEvents} tabIndex={0} ref={contentRef}>
+          <div
+            style={{
+              borderColor: selectedNode === nodeId ? '#0059ff' : undefined,
+            }}
+          >
+            <CardEditableTitle />
+            <EntityNodeCoverContent />
+            <EntityNodeBlocks />
+            {selectedNode === nodeId && (
+              <AddNodeAnchorForCardNodes direction={'right'} />
+            )}
+          </div>
+        </Box>
+        {selectedNode === nodeId && (
+          <AddNodeAnchorForCardNodes direction={'bottom'} />
+        )}
+      </Paper>
+
+      {enableJson && (
+        <JsonDrawer
+          isOpen={isJsonDrawerOpen}
+          onClose={toggleJsonDrawer}
+          nodeId={nodeId ?? ''}
+        />
+      )}
+    </>
+  );
+});
+
+// Main EntityNode component
+const EntityNode = React.memo(({ id }: { id: string }) => {
+  return (
+    <CardDataProvider nodeId={id}>
+      <NodeContent />
+    </CardDataProvider>
+  );
+});
+
+export { EntityNode };

package/packages/diagrams/src/lib/organisms/Card/card.params.ts

@@ -1,29 +1,29 @@
-import { IBlockType } from '../../types/card-node';
-
-export const blockTypes = {
-  String: String,
-  Number: Number,
-  Object: Object,
-  Array: Array,
-  Map: Map,
-  Set: Set,
-  Int16: Int16Array,
-  Date: Date,
-  null: null,
-  Boolean: Boolean,
-};
-
-export const BlockTypesKeys = Object.keys(blockTypes) as IBlockType[];
-export const fieldTypes = [
-  'STRING', // Variable-length character string
-  'CHAR', // Fixed-length character string
-  'INT', // Integer
-  'FLOAT', // Floating-point number
-  'DATE', // Date
-  'TIME', // Time
-  'DATETIME', // Date and time
-  'BOOLEAN', // Boolean (true/false)
-  'ENUM', // Enumeration (a predefined set of values)
-  'BLOB', // Binary Large Object (for storing binary data)
-  'TEXT', // Text
-];
+import { IBlockType } from '../../types/card-node';
+
+export const blockTypes = {
+  String: String,
+  Number: Number,
+  Object: Object,
+  Array: Array,
+  Map: Map,
+  Set: Set,
+  Int16: Int16Array,
+  Date: Date,
+  null: null,
+  Boolean: Boolean,
+};
+
+export const BlockTypesKeys = Object.keys(blockTypes) as IBlockType[];
+export const fieldTypes = [
+  'STRING', // Variable-length character string
+  'CHAR', // Fixed-length character string
+  'INT', // Integer
+  'FLOAT', // Floating-point number
+  'DATE', // Date
+  'TIME', // Time
+  'DATETIME', // Date and time
+  'BOOLEAN', // Boolean (true/false)
+  'ENUM', // Enumeration (a predefined set of values)
+  'BLOB', // Binary Large Object (for storing binary data)
+  'TEXT', // Text
+];

package/packages/diagrams/src/lib/organisms/Card/card.types.ts

@@ -1,5 +1,5 @@
-export interface CardBlockTypesProps {
-  onChange: React.ChangeEventHandler<HTMLSelectElement>;
-  value?: string;
-  id: string;
-}
+export interface CardBlockTypesProps {
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+  value?: string;
+  id: string;
+}