@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

@@ -1,259 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export interface CardBlockTypesProps {
-  onChange: React.ChangeEventHandler<HTMLSelectElement>;
-  value?: string;
-  id: string;
-}

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

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

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

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