@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/organisms/PropertiesPane.tsx

@@ -1,276 +1,276 @@
-import React, { useEffect, useMemo } from 'react';
-import { Box, BoxProps } from '@mui/material';
-import DraggablePane, { DraggablePaneProps } from '../molecules/DraggablePane';
-import { useCustomReactFlow } from '../hooks/customUseReactFlow';
-import { ExtendedEdge, useSelectedMarkers } from '../utils/edge-hooks';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import { ICardNode } from '../types/card-node';
-import { vhToPixels } from '../utils/vhToPixels';
-import { getColorOptions } from '../utils/color-options';
-import { colorMap } from '../types/colors';
-import { Markers } from '../assets/markers/markers.type';
-import SmartDynamicForm from './SmartDynamicForm';
-import { SmartDynamicFormField, FormValues } from '../types/SmartDynamicFormField';
-import {
-  useDiagram,
-  useSelectedEdge,
-  useSelectedNode,
-  useDiagramType,
-} from '../contexts/DiagramProvider';
-
-interface PropertiesPaneProps {
-  nodeSchema: SmartDynamicFormField[];
-  edgeSchema: SmartDynamicFormField[];
-  noSelectionBoxProps?: BoxProps;
-  onNodeUpdate?: (values: ICardNode) => void;
-  onEdgeUpdate?: (values: ExtendedEdge) => void;
-  draggablePaneProps?: Partial<DraggablePaneProps>;
-  className?: string;
-}
-
-export function PropertiesPane({
-  nodeSchema,
-  edgeSchema,
-  noSelectionBoxProps,
-  onNodeUpdate,
-  onEdgeUpdate,
-  draggablePaneProps,
-  className,
-}: PropertiesPaneProps) {
-  const selectedNodeId = useSelectedNode();
-  const selectedEdgeId = useSelectedEdge();
-  const diagramType = useDiagramType();
-  const isErdDiagram = diagramType === 'erd';
-
-  const getFieldOptions = (
-    option: string | { value: string; label: string | JSX.Element }[],
-  ): {
-    value: string;
-    label: React.ReactNode;
-  }[] => {
-    if (typeof option === 'string') {
-      if (option === 'getColorOptions') return getColorOptions(colorMap);
-      if (option === 'getMarkerOptions')
-        return Object.values(Markers).map((label) => ({
-          value: label,
-          label: label.toString(),
-        }));
-      return [];
-    } else {
-      return option.map((opt) => ({
-        ...opt,
-        label: typeof opt.label === 'string' ? opt.label : opt.label,
-      }));
-    }
-  };
-
-  const instance = useCustomReactFlow();
-
-  const selectedNode = selectedNodeId
-    ? instance.getNode(selectedNodeId)
-    : undefined;
-
-  const selectedEdge = selectedEdgeId
-    ? (instance.getEdge(selectedEdgeId) as ExtendedEdge | undefined)
-    : undefined;
-
-  const { selectedEdgeMarkerEnd, selectedEdgeMarkerStart, updateEdgeMarker } =
-    useSelectedMarkers(selectedEdge);
-
-  const formSchema: SmartDynamicFormField[] = useMemo(() => {
-    const schema: SmartDynamicFormField[] = selectedNode
-      ? nodeSchema
-      : selectedEdge
-        ? edgeSchema.filter((field) => {
-          // Only include marker fields for ERD diagrams
-          if (!isErdDiagram && (field.props.name === 'markerStart' || field.props.name === 'markerEnd')) {
-            return false;
-          }
-          return true;
-        })
-        : [];
-    return schema.map((field) => {
-      return {
-        ...field,
-        props: {
-          ...field.props,
-          options: Array.isArray(field.props.options)
-            ? field.props.options.map((option) => ({
-              ...option,
-              label: option.label,
-            }))
-            : getFieldOptions(field.props.options || ''),
-        },
-      };
-    });
-  }, [
-    selectedNode,
-    selectedEdge,
-    nodeSchema,
-    edgeSchema,
-    getFieldOptions,
-    selectedEdgeMarkerEnd,
-    isErdDiagram,
-  ]);
-
-  let initialValues = useMemo(() => {
-    const selected = selectedNode || selectedEdge;
-    if (!selected) return {};
-
-    if (selectedEdge) {
-      const values: FormValues = {};
-      formSchema.forEach((field) => {
-        const name = field.props.name as string;
-        if (name === 'markerStart') {
-          set(values, name, selectedEdgeMarkerStart?.toString() || '');
-        } else if (name === 'markerEnd') {
-          set(values, name, selectedEdgeMarkerEnd?.toString() || '');
-        } else {
-          set(values, name, get(selectedEdge, name));
-        }
-      });
-
-      // Set default values if not present
-      if (!get(selectedEdge, 'style.strokeWidth')) {
-        set(values, 'style.strokeWidth', 2);
-      }
-      if (!get(selectedEdge, 'style.stroke')) {
-        set(values, 'style.stroke', 'indigo');
-      }
-
-      return values;
-    }
-
-    // Handle node values
-    return formSchema.reduce((acc, field) => {
-      const name = field.props.name as string;
-      if (name === 'width' || name === 'height') {
-        if ('measured' in selected) {
-          set(acc, name, selected.measured?.[name]);
-        }
-      } else {
-        set(acc, name, get(selected, name));
-      }
-      return acc;
-    }, {} as FormValues);
-  }, [selectedNode, selectedEdge, formSchema, selectedEdgeMarkerStart, selectedEdgeMarkerEnd]);
-
-  useEffect(() => {
-    if (selectedEdge) {
-      const updatedEdge: ExtendedEdge = {
-        ...selectedEdge,
-      };
-
-      if (!updatedEdge.style?.strokeWidth) {
-        set(updatedEdge, 'style.strokeWidth', 2);
-      }
-      if (!updatedEdge.style?.stroke) {
-        set(updatedEdge, 'style.stroke', 'indigo');
-      }
-
-      if (selectedEdgeMarkerStart) {
-        updateEdgeMarker('markerStart', selectedEdgeMarkerStart.toString());
-      }
-      if (selectedEdgeMarkerEnd) {
-        updateEdgeMarker('markerEnd', selectedEdgeMarkerEnd.toString());
-      }
-
-      instance.setEdges((eds) =>
-        eds.map((edge) => (edge.id === selectedEdgeId ? updatedEdge : edge))
-      );
-
-      onEdgeUpdate && onEdgeUpdate(updatedEdge);
-    }
-  }, [selectedEdge, selectedEdgeMarkerStart, selectedEdgeMarkerEnd]);
-
-  const handleUpdate = (values: FormValues) => {
-    values.measured = {
-      height: parseInt(values.height as string),
-      width: parseInt(values.width as string),
-    };
-    if (selectedNode) {
-      const updatedNode: ICardNode = {
-        ...selectedNode,
-      };
-      formSchema.forEach((field) => {
-        const name = field.props.name as string;
-        if (name === 'width' || name === 'height') {
-          set(updatedNode, `measured.${name}`, parseInt(values[name] as string));
-        }
-
-        if (name === 'markerStart') {
-          updateEdgeMarker('markerStart', values.markerStart as string);
-        } else if (name === 'markerEnd') {
-          updateEdgeMarker('markerEnd', values.markerEnd as string);
-        }
-        set(updatedNode, name, get(values, name));
-      });
-
-      instance.setNodes((nds: ICardNode[]) =>
-        nds.map((node: ICardNode) =>
-          node.id === selectedNodeId ? updatedNode : node,
-        ),
-      );
-
-      onNodeUpdate && onNodeUpdate(updatedNode);
-    } else if (selectedEdge) {
-      const updatedEdge: ExtendedEdge = {
-        ...selectedEdge,
-      };
-
-      formSchema.forEach((field) => {
-        const name = field.props.name as string;
-        set(updatedEdge, name, get(values, name));
-      });
-      instance.setEdges((eds) =>
-        eds.map((edge) => (edge.id === selectedEdgeId ? updatedEdge : edge)),
-      );
-      onEdgeUpdate && onEdgeUpdate(updatedEdge);
-    }
-  };
-
-  const renderContent = () => {
-    if (selectedNode || selectedEdge) {
-      return (
-        <SmartDynamicForm
-          formSchema={formSchema}
-          initialValues={initialValues}
-          onSubmit={handleUpdate}
-        />
-      );
-    } else {
-      return (
-        <Box
-          sx={{
-            fontSize: 12,
-            lineHeight: 1.2,
-            textAlign: 'center',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            color: '#FFFFFF',
-          }}
-          {...noSelectionBoxProps}
-        >
-          Select a node or an edge to see the properties.
-        </Box>
-      );
-    }
-  };
-
-  return (
-    <DraggablePane
-      title="Properties"
-      x={draggablePaneProps?.x ?? 0}
-      y={draggablePaneProps?.y ?? vhToPixels(50)}
-      height={(window.innerHeight - 56) * 0.5}
-      anchorPoint="bottom-right"
-      {...draggablePaneProps}
-    >
-      {renderContent()}
-    </DraggablePane>
-  );
-}
-
-export default PropertiesPane;
+import React, { useEffect, useMemo } from 'react';
+import { Box, BoxProps } from '@mui/material';
+import DraggablePane, { DraggablePaneProps } from '../molecules/DraggablePane';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import { ExtendedEdge, useSelectedMarkers } from '../utils/edge-hooks';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import { ICardNode } from '../types/card-node';
+import { vhToPixels } from '../utils/vhToPixels';
+import { getColorOptions } from '../utils/color-options';
+import { colorMap } from '../types/colors';
+import { Markers } from '../assets/markers/markers.type';
+import SmartDynamicForm from './SmartDynamicForm';
+import { SmartDynamicFormField, FormValues } from '../types/SmartDynamicFormField';
+import {
+  useDiagram,
+  useSelectedEdge,
+  useSelectedNode,
+  useDiagramType,
+} from '../contexts/DiagramProvider';
+
+interface PropertiesPaneProps {
+  nodeSchema: SmartDynamicFormField[];
+  edgeSchema: SmartDynamicFormField[];
+  noSelectionBoxProps?: BoxProps;
+  onNodeUpdate?: (values: ICardNode) => void;
+  onEdgeUpdate?: (values: ExtendedEdge) => void;
+  draggablePaneProps?: Partial<DraggablePaneProps>;
+  className?: string;
+}
+
+export function PropertiesPane({
+  nodeSchema,
+  edgeSchema,
+  noSelectionBoxProps,
+  onNodeUpdate,
+  onEdgeUpdate,
+  draggablePaneProps,
+  className,
+}: PropertiesPaneProps) {
+  const selectedNodeId = useSelectedNode();
+  const selectedEdgeId = useSelectedEdge();
+  const diagramType = useDiagramType();
+  const isErdDiagram = diagramType === 'erd';
+
+  const getFieldOptions = (
+    option: string | { value: string; label: string | JSX.Element }[],
+  ): {
+    value: string;
+    label: React.ReactNode;
+  }[] => {
+    if (typeof option === 'string') {
+      if (option === 'getColorOptions') return getColorOptions(colorMap);
+      if (option === 'getMarkerOptions')
+        return Object.values(Markers).map((label) => ({
+          value: label,
+          label: label.toString(),
+        }));
+      return [];
+    } else {
+      return option.map((opt) => ({
+        ...opt,
+        label: typeof opt.label === 'string' ? opt.label : opt.label,
+      }));
+    }
+  };
+
+  const instance = useCustomReactFlow();
+
+  const selectedNode = selectedNodeId
+    ? instance.getNode(selectedNodeId)
+    : undefined;
+
+  const selectedEdge = selectedEdgeId
+    ? (instance.getEdge(selectedEdgeId) as ExtendedEdge | undefined)
+    : undefined;
+
+  const { selectedEdgeMarkerEnd, selectedEdgeMarkerStart, updateEdgeMarker } =
+    useSelectedMarkers(selectedEdge);
+
+  const formSchema: SmartDynamicFormField[] = useMemo(() => {
+    const schema: SmartDynamicFormField[] = selectedNode
+      ? nodeSchema
+      : selectedEdge
+        ? edgeSchema.filter((field) => {
+          // Only include marker fields for ERD diagrams
+          if (!isErdDiagram && (field.props.name === 'markerStart' || field.props.name === 'markerEnd')) {
+            return false;
+          }
+          return true;
+        })
+        : [];
+    return schema.map((field) => {
+      return {
+        ...field,
+        props: {
+          ...field.props,
+          options: Array.isArray(field.props.options)
+            ? field.props.options.map((option) => ({
+              ...option,
+              label: option.label,
+            }))
+            : getFieldOptions(field.props.options || ''),
+        },
+      };
+    });
+  }, [
+    selectedNode,
+    selectedEdge,
+    nodeSchema,
+    edgeSchema,
+    getFieldOptions,
+    selectedEdgeMarkerEnd,
+    isErdDiagram,
+  ]);
+
+  let initialValues = useMemo(() => {
+    const selected = selectedNode || selectedEdge;
+    if (!selected) return {};
+
+    if (selectedEdge) {
+      const values: FormValues = {};
+      formSchema.forEach((field) => {
+        const name = field.props.name as string;
+        if (name === 'markerStart') {
+          set(values, name, selectedEdgeMarkerStart?.toString() || '');
+        } else if (name === 'markerEnd') {
+          set(values, name, selectedEdgeMarkerEnd?.toString() || '');
+        } else {
+          set(values, name, get(selectedEdge, name));
+        }
+      });
+
+      // Set default values if not present
+      if (!get(selectedEdge, 'style.strokeWidth')) {
+        set(values, 'style.strokeWidth', 2);
+      }
+      if (!get(selectedEdge, 'style.stroke')) {
+        set(values, 'style.stroke', 'indigo');
+      }
+
+      return values;
+    }
+
+    // Handle node values
+    return formSchema.reduce((acc, field) => {
+      const name = field.props.name as string;
+      if (name === 'width' || name === 'height') {
+        if ('measured' in selected) {
+          set(acc, name, selected.measured?.[name]);
+        }
+      } else {
+        set(acc, name, get(selected, name));
+      }
+      return acc;
+    }, {} as FormValues);
+  }, [selectedNode, selectedEdge, formSchema, selectedEdgeMarkerStart, selectedEdgeMarkerEnd]);
+
+  useEffect(() => {
+    if (selectedEdge) {
+      const updatedEdge: ExtendedEdge = {
+        ...selectedEdge,
+      };
+
+      if (!updatedEdge.style?.strokeWidth) {
+        set(updatedEdge, 'style.strokeWidth', 2);
+      }
+      if (!updatedEdge.style?.stroke) {
+        set(updatedEdge, 'style.stroke', 'indigo');
+      }
+
+      if (selectedEdgeMarkerStart) {
+        updateEdgeMarker('markerStart', selectedEdgeMarkerStart.toString());
+      }
+      if (selectedEdgeMarkerEnd) {
+        updateEdgeMarker('markerEnd', selectedEdgeMarkerEnd.toString());
+      }
+
+      instance.setEdges((eds) =>
+        eds.map((edge) => (edge.id === selectedEdgeId ? updatedEdge : edge))
+      );
+
+      onEdgeUpdate && onEdgeUpdate(updatedEdge);
+    }
+  }, [selectedEdge, selectedEdgeMarkerStart, selectedEdgeMarkerEnd]);
+
+  const handleUpdate = (values: FormValues) => {
+    values.measured = {
+      height: parseInt(values.height as string),
+      width: parseInt(values.width as string),
+    };
+    if (selectedNode) {
+      const updatedNode: ICardNode = {
+        ...selectedNode,
+      };
+      formSchema.forEach((field) => {
+        const name = field.props.name as string;
+        if (name === 'width' || name === 'height') {
+          set(updatedNode, `measured.${name}`, parseInt(values[name] as string));
+        }
+
+        if (name === 'markerStart') {
+          updateEdgeMarker('markerStart', values.markerStart as string);
+        } else if (name === 'markerEnd') {
+          updateEdgeMarker('markerEnd', values.markerEnd as string);
+        }
+        set(updatedNode, name, get(values, name));
+      });
+
+      instance.setNodes((nds: ICardNode[]) =>
+        nds.map((node: ICardNode) =>
+          node.id === selectedNodeId ? updatedNode : node,
+        ),
+      );
+
+      onNodeUpdate && onNodeUpdate(updatedNode);
+    } else if (selectedEdge) {
+      const updatedEdge: ExtendedEdge = {
+        ...selectedEdge,
+      };
+
+      formSchema.forEach((field) => {
+        const name = field.props.name as string;
+        set(updatedEdge, name, get(values, name));
+      });
+      instance.setEdges((eds) =>
+        eds.map((edge) => (edge.id === selectedEdgeId ? updatedEdge : edge)),
+      );
+      onEdgeUpdate && onEdgeUpdate(updatedEdge);
+    }
+  };
+
+  const renderContent = () => {
+    if (selectedNode || selectedEdge) {
+      return (
+        <SmartDynamicForm
+          formSchema={formSchema}
+          initialValues={initialValues}
+          onSubmit={handleUpdate}
+        />
+      );
+    } else {
+      return (
+        <Box
+          sx={{
+            fontSize: 12,
+            lineHeight: 1.2,
+            textAlign: 'center',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            color: '#FFFFFF',
+          }}
+          {...noSelectionBoxProps}
+        >
+          Select a node or an edge to see the properties.
+        </Box>
+      );
+    }
+  };
+
+  return (
+    <DraggablePane
+      title="Properties"
+      x={draggablePaneProps?.x ?? 0}
+      y={draggablePaneProps?.y ?? vhToPixels(50)}
+      height={(window.innerHeight - 56) * 0.5}
+      anchorPoint="bottom-right"
+      {...draggablePaneProps}
+    >
+      {renderContent()}
+    </DraggablePane>
+  );
+}
+
+export default PropertiesPane;