@flowuent-org/diagramming-core 1.4.0 → 1.4.1

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

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

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

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

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

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

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Tooltip,
+} from '@mui/material';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { RiDownloadLine, RiFileCopyLine } from 'react-icons/ri'; // Importing icons from react-icons/ri
+import jsBeautify from 'js-beautify';
+import { useTranslation } from 'react-i18next';
+
+interface CodeModalProps {
+  open: boolean;
+  onClose: () => void;
+  code: string;
+}
+
+const CodeModal: React.FC<CodeModalProps> = ({ open, onClose, code }) => {
+  const { t } = useTranslation();
+  const formattedCode = React.useMemo(() => {
+    try {
+      return jsBeautify.js(code, {
+        indent_size: 2,
+        space_in_empty_paren: true,
+      });
+    } catch (error) {
+      console.error('Failed to format code:', error);
+      return code;
+    }
+  }, [code]);
+
+  const handleDownload = () => {
+    const blob = new Blob([formattedCode], {
+      type: 'text/javascript;charset=utf-8',
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'exportedCode.js';
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(formattedCode);
+      alert(t('alert.codeCopied'));
+    } catch (error) {
+      console.error('Failed to copy code:', error);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="md"
+      fullWidth
+      sx={{
+        '& .MuiDialog-paper': {
+          backgroundColor: '#1e1e1e', // Dark background for the modal
+        },
+      }}
+    >
+      <DialogTitle>Exported Code</DialogTitle>
+      <DialogContent dividers>
+        <SyntaxHighlighter
+          language="javascript"
+          style={materialDark}
+          wrapLines={true}
+          wrapLongLines={true}
+          customStyle={{
+            backgroundColor: '#1e1e1e', // Dark background for the code block
+            padding: '16px',
+            borderRadius: '4px',
+          }}
+        >
+          {formattedCode}
+        </SyntaxHighlighter>
+      </DialogContent>
+      <DialogActions>
+        <Tooltip title={t('tooltip.copyToClipboard')}>
+          <IconButton onClick={handleCopy}>
+            <RiFileCopyLine /> {/* Replaced with react-icons/ri */}
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Download as .js file">
+          <IconButton onClick={handleDownload}>
+            <RiDownloadLine /> {/* Replaced with react-icons/ri */}
+          </IconButton>
+        </Tooltip>
+        <Button onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CodeModal;

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

@@ -0,0 +1,139 @@
+import { Box, Button, IconButton, MenuItem, Paper, PaperProps, Select } from "@mui/material";
+import { Delete } from '@mui/icons-material';
+import { Rule, RuleGroup } from "../types/condition-builder";
+import { Option } from "../atoms/ContentAssist";
+import React, { useCallback } from "react";
+import ConditionRule from "../molecules/ConditionRule";
+
+const ruleGroupWrapper = {
+  // padding: '16px',
+  border: 'unset',
+  boxShadow: 'unset',
+  backgroundColor: 'inherit',
+  marginTop: '5px',
+  marginBottom: '16px',
+  '.select-combinator': {
+    mr: 1, padding: '0px',
+    '.MuiSelect-select': {
+      padding: '7px',
+      paddingRight: '29px'
+    }
+  },
+  '.MuiButton-contained': {
+    padding: '6px'
+  },
+  '.rule-btn': {
+    mr: 1
+  },
+}
+
+type Props = {
+  value: RuleGroup,
+  onChange: (value: RuleGroup) => void,
+  onDelete?: () => void
+  options: Option[],
+  initialOptions: Option[];
+  optionsType: string;
+  setOptions: (value: Option[]) => void;
+  setOptionsType: (value: string) => void;
+  wrapperProps: PaperProps;
+}
+
+const defaultRuleValue = {
+  id: 0,
+  label: '',
+  type: 'env'
+}
+
+const ConditionRuleGroup: React.FC<Props> = React.memo((props: Props) => {
+  const { value, onChange, onDelete, options, initialOptions, optionsType, setOptions, setOptionsType, wrapperProps } = props;
+
+  const handleRuleChange = useCallback((index: number, newRule: Rule | RuleGroup) => {
+    const currentRule = value.rules[index];
+    if (JSON.stringify(currentRule) !== JSON.stringify(newRule)) {
+      const newRules = [...value.rules];
+      newRules[index] = newRule;
+      onChange({ ...value, rules: newRules });
+    }
+  }, [value, onChange]);
+
+  const handleAddRule = useCallback(() => {
+    onChange({ ...value, rules: [...value.rules, { field: defaultRuleValue, operator: '=', value: defaultRuleValue }] });
+  }, [value, onChange]);
+
+  const handleAddGroup = useCallback(() => {
+    onChange({ ...value, rules: [...value.rules, { combinator: 'and', rules: [] }] });
+  }, [value, onChange]);
+
+  const handleDeleteRule = useCallback((index: number) => {
+    const newRules = value.rules.filter((_, i) => i !== index);
+    onChange({ ...value, rules: newRules.length ? newRules : [] });
+  }, [value, onChange]);
+
+  return (
+    <Paper sx={ruleGroupWrapper} {...wrapperProps}>
+      <Select
+        value={value?.combinator}
+        onChange={e => onChange({ ...value, combinator: e.target.value as 'and' | 'or' })}
+        className="select-combinator nodrag nopan"
+        sx={{
+          color: '#FFFFFF',
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#8E8E93'
+          }
+        }}
+        MenuProps={{
+          PaperProps: {
+            sx: {
+              backgroundColor: '#393939',
+              color: '#FFFFFF',
+              '& .MuiMenuItem-root': {
+                backgroundColor: '#393939',
+                color: '#FFFFFF',
+                '&:hover': {
+                  backgroundColor: '#555555',
+                },
+              },
+            },
+          },
+        }}
+      >
+        <MenuItem value="and">AND</MenuItem>
+        <MenuItem value="or">OR</MenuItem>
+      </Select>
+      <Button onClick={handleAddRule} variant="contained" className="rule-btn">+ Rule</Button>
+      <Button onClick={handleAddGroup} variant="contained">+ Group</Button>
+      {onDelete ? <IconButton className="delete-btn" onClick={onDelete}><Delete /></IconButton> : null}
+      {value?.rules?.map((rule, index) => (
+        <Box key={index}>
+          {('combinator' in rule) ? (
+            <ConditionRuleGroup
+              wrapperProps={wrapperProps}
+              value={rule as RuleGroup}
+              onChange={newRuleGroup => handleRuleChange(index, newRuleGroup)}
+              onDelete={() => handleDeleteRule(index)}
+              options={options || []}
+              initialOptions={initialOptions}
+              setOptions={setOptions}
+              optionsType={optionsType}
+              setOptionsType={setOptionsType}
+            />
+          ) : (
+            <ConditionRule
+              rule={rule as Rule}
+              onChange={newRule => handleRuleChange(index, newRule)}
+              onDelete={() => handleDeleteRule(index)}
+              options={options || []}
+              initialOptions={initialOptions}
+              setOptions={setOptions}
+              optionsType={optionsType}
+              setOptionsType={setOptionsType}
+            />
+          )}
+        </Box>
+      ))}
+    </Paper>
+  );
+});
+
+export default ConditionRuleGroup;

package/packages/diagrams/src/lib/organisms/CustomEdge/EdgeMarkers.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { orientMap } from '../../assets/markers/markers.param';
+
+type EdgeMarkersProps = {
+  id: string;
+  sourcePosition: string;
+  targetPosition: string;
+  stroke?: string;
+  markerStart?: string;
+  markerEnd?: string;
+};
+
+export const EdgeMarkers = ({
+  id,
+  sourcePosition,
+  targetPosition,
+  stroke,
+  markerStart,
+  markerEnd,
+}: EdgeMarkersProps) => {
+  return (
+    <defs>
+      <marker
+        id={`${id}-marker-start`}
+        viewBox="0 0 100 100"
+        markerHeight={12}
+        markerWidth={10}
+        refX={orientMap[sourcePosition].refX}
+        refY={orientMap[sourcePosition].refY}
+        strokeWidth="10"
+        stroke={stroke}
+        fill="transparent"
+      >
+        {orientMap[sourcePosition].idPathMap[markerStart || 'one']}
+      </marker>
+      <marker
+        id={`${id}-marker-end`}
+        viewBox="0 0 100 100"
+        markerHeight={12}
+        markerWidth={10}
+        refX={orientMap[targetPosition].refX}
+        refY={orientMap[targetPosition].refY}
+        strokeWidth="10"
+        stroke={stroke}
+        fill="transparent"
+      >
+        {orientMap[targetPosition].idPathMap[markerEnd || 'one']}
+      </marker>
+    </defs>
+  );
+};