@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,118 @@
+import DraggablePane from '../molecules/DraggablePane';
+import {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material';
+import React, { memo } from 'react';
+import {
+  useDiagram,
+  useHistory,
+  useHistoryIndex,
+} from '../contexts/DiagramProvider';
+
+// Types for history event and list props
+interface HistoryEvent {
+  title: string;
+  forward: { type: string };
+  nodesAndEdges?: boolean;
+}
+
+interface HistoryListItemProps {
+  event: HistoryEvent;
+  index: number;
+  isDisabled: boolean;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+const HistoryListItem = memo(
+  ({
+    event,
+    index,
+    isDisabled,
+    isSelected,
+    onSelect,
+  }: HistoryListItemProps) => {
+    return (
+      <ListItem>
+        <ListItemButton
+          onClick={onSelect}
+          disabled={isDisabled}
+          selected={isSelected}
+        >
+          <ListItemIcon>({index})</ListItemIcon>
+          <ListItemText
+            primary={event.title}
+            secondary={`Change Type: ${'nodesAndEdges' in event ? 'Complex' : event.forward.type
+              }`}
+          />
+        </ListItemButton>
+      </ListItem>
+    );
+  },
+);
+
+interface HistoryListProps {
+  history: HistoryEvent[];
+  historyIndex: number;
+  goToHistoryIndex: (index: number) => void;
+}
+
+const HistoryList = memo(
+  ({
+    history,
+    historyIndex,
+    goToHistoryIndex,
+  }: HistoryListProps) => {
+    return (
+      <List dense>
+        {history.map((event, index) => (
+          <HistoryListItem
+            key={index}
+            event={event}
+            index={index}
+            isDisabled={index > historyIndex}
+            isSelected={index === historyIndex}
+            onSelect={() => goToHistoryIndex(index)}
+          />
+        ))}
+      </List>
+    );
+  },
+);
+
+HistoryList.displayName = 'HistoryList';
+
+interface HistoryPaneProps {
+  className?: string;
+}
+
+export const HistoryPane = memo(({ className }: HistoryPaneProps) => {
+  const history = useHistory();
+  const historyIndex = useHistoryIndex();
+  const goToHistoryIndex = useDiagram((state) => state.goToHistoryIndex);
+  const flushUndoStack = useDiagram((state) => state.flushUndoStack);
+
+  return (
+    <DraggablePane
+      title="History"
+      height={(window.innerHeight - 56) * 0.5}
+      anchorPoint="top-right"
+      x={0}
+      y={50}
+    >
+      <HistoryList
+        history={history}
+        historyIndex={historyIndex}
+        goToHistoryIndex={goToHistoryIndex}
+      />
+    </DraggablePane>
+  );
+});
+
+HistoryPane.displayName = 'HistoryPane';
+
+export default HistoryPane;

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

@@ -0,0 +1,259 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { IconPhoto, IconPlus, IconTrash } from '@tabler/icons-react';
+import { motion } from 'framer-motion';
+import { CirclePicker } from 'react-color';
+
+import { ICardNode } from '../types/card-node';
+
+import { compressImage } from '../utils/compress-img';
+import { colorMap } from '../types/colors';
+import { reverseObj } from '../utils/object';
+import { useDeleteNode, useUpdateNode } from '../utils/node-hooks';
+import { Box, Button, Input, InputLabel } from '@mui/material';
+import { useDiagramType, useSelectedNode } from '../contexts/DiagramProvider';
+import { useCustomReactFlow } from '../hooks/customUseReactFlow';
+import {
+  useNodeColor,
+  useNodeId,
+  useNodeImg,
+  useNodeIsBlock,
+  useSetAddingBlock,
+} from '../contexts/CardDataProvider';
+
+
+export const NodeContextMenu = React.memo(() => {
+  const diagramType = useDiagramType();
+  const isErDiagram = diagramType === 'erd';
+
+  // Use selectors instead of useCardData
+  const nodeId = useNodeId() || '';
+  const isBlock = useNodeIsBlock();
+  const color = useNodeColor();
+  const setAddingBlock = useSetAddingBlock();
+  const nodeImg = useNodeImg();
+
+  const deleteNode = useDeleteNode(nodeId);
+  const selectedNode = useSelectedNode(); // Specific hook for selectedNode
+
+  const selected = isBlock ? 'block' : 'cover';
+  const [colorToggle, setColorToggle] = useState<boolean>(false);
+  const [currentColor, setCurrentColor] = useState<string>(colorMap[color || 'red']);
+
+  const updateNode = useUpdateNode();
+  const setContentType = useCallback(
+    (type: string) => {
+      updateNode(nodeId, (node) => {
+        return { ...node, data: { ...node.data, isBlock: type === 'block' } };
+      });
+    },
+    [updateNode, nodeId],
+  );
+
+  const { setNodes, getNodes } = useCustomReactFlow();
+
+  async function handleImgChange(e: React.ChangeEvent<HTMLInputElement>) {
+    try {
+      const file = e.target.files ? e.target.files[0] : null;
+      if (!file) return;
+
+      const targetWidth = 300;
+      const targetHeight = 300;
+      const quality = 0.7;
+
+      const { blob: _blob, dataUrl } = await compressImage(
+        file,
+        targetWidth,
+        targetHeight,
+        quality,
+      );
+
+      const prevNodes = [...getNodes()] as ICardNode[];
+      const newNodes: ICardNode[] = prevNodes.map((node) => {
+        if (node.id === nodeId) {
+          return {
+            ...node,
+            data: { ...node.data, img: dataUrl },
+          };
+        } else return node;
+      });
+      setNodes(newNodes);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  function onColorChange(value: string): void {
+    const colToName = reverseObj(colorMap);
+    const color = colToName[value] || value;
+
+    const newNodes = [...getNodes()].map((node) => {
+      if (node.id === nodeId)
+        return { ...node, data: { ...node.data, color: color } } as ICardNode;
+      else return node;
+    });
+    setNodes(newNodes);
+  }
+
+  useEffect(() => {
+    const colToName = reverseObj(colorMap);
+    const c: string = colorMap[color ?? 'grey'];
+    setCurrentColor(c);
+  }, [color]);
+
+  if (selectedNode !== nodeId) {
+    return null;
+  }
+
+  const toolbtn_sx = {
+    border: 'none',
+    outline: 'none',
+    bgcolor: '#fff',
+    position: 'relative',
+    minWidth: 10,
+    p: 0,
+    m: 0,
+  };
+
+  const block_sx = {
+    p: '0.3rem',
+    borderRadius: '0.3rem',
+    transition: 'all 0.1s',
+  };
+
+  return (
+    <Box
+      component={motion.div}
+      initial={{ y: 20, scale: 0.7 }}
+      animate={{ y: 0, scale: 1 }}
+      bgcolor="#333131"
+      position="absolute"
+      top="-3.5rem"
+      boxShadow="rgba(0, 0, 0, 0.35) 0px 5px 15px"
+      fontSize="0.7rem"
+      borderRadius="0.4rem"
+      p="5px"
+      mb="0.5rem"
+      display="flex"
+      zIndex="9999999"
+      left={selected === 'cover' ? '-0.3rem' : '-2.6rem'}
+      sx={{
+        '& div, & button': {
+          cursor: 'pointer',
+        },
+      }}
+    >
+      {/* Cover, Block Box */}
+      {!isErDiagram && (
+        <>
+          <Box
+            sx={{
+              width: '6rem',
+              display: 'flex',
+              padding: '5px',
+              borderRadius: '0.5rem',
+              justifyContent: 'space-between',
+              backgroundColor: 'rgba(0, 0, 0, 0.04)',
+              gap: '5px',
+              boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
+            }}
+          >
+            <Box
+              sx={block_sx}
+              color="#fff"
+              bgcolor={selected === 'cover' ? '#000000' : 'transparent'}
+              onClick={() => setContentType('cover')}
+            >
+              Cover
+            </Box>
+            <Box
+              sx={block_sx}
+              color="#fff"
+              bgcolor={selected === 'block' ? '#000000' : 'transparent'}
+              onClick={() => setContentType('block')}
+            >
+              Block
+            </Box>
+          </Box>
+        </>
+      )}
+
+      <Box
+        display="flex"
+        bgcolor="#333131"
+        ml="0.75rem"
+        gap="0.5rem"
+        p="0rem 0.2rem"
+        alignItems="center"
+        position="relative"
+      >
+        {selected === 'block' && (
+          <Button sx={{ ...toolbtn_sx, bgcolor: '#333131' }} onClick={deleteNode}>
+            <IconTrash color="#FFFF" size={18} />
+          </Button>
+        )}
+        {selected === 'block' && (
+          <Button
+            sx={{ ...toolbtn_sx, bgcolor: '#333131' }}
+            onClick={() => {
+              setAddingBlock(true);
+            }}
+          >
+            <IconPlus color="#FFFF" size={18} />
+          </Button>
+        )}
+
+        {selected === 'cover' && (
+          <Box display="flex" alignItems="center">
+            <Input
+              type="file"
+              inputProps={{ accept: 'image/*' }}
+              id="uploadimg"
+              sx={{ display: 'none' }}
+              onChange={handleImgChange}
+            />
+            <InputLabel htmlFor="uploadimg" sx={{ ...toolbtn_sx, bgcolor: '#333131', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <IconPhoto color="#FFFF" size={20} />
+            </InputLabel>
+          </Box>
+        )}
+
+        {selected === 'block' && (
+          <>
+            <Button
+              sx={{ ...toolbtn_sx, bgcolor: '#333131' }}
+              onClick={() => setColorToggle(!colorToggle)}
+            >
+              <Box
+                width="14px"
+                height="14px"
+                position="relative"
+                bgcolor={currentColor}
+                sx={{ borderRadius: '50%' }}
+              />
+            </Button>
+            <Box
+              display={colorToggle ? 'flex' : 'none'}
+              position="absolute"
+              bgcolor="white"
+              top="1rem"
+              zIndex="100"
+              height="8rem"
+              padding="1rem"
+              sx={{
+                transform: 'scale(0.5)',
+                borderRadius: '19px',
+                boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
+              }}
+            >
+              <CirclePicker
+                colors={Object.values(colorMap)}
+                color={currentColor}
+                onChange={(e) => onColorChange(e.hex)}
+              />
+            </Box>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+});

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

@@ -0,0 +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;