@flowuent-org/diagramming-core 1.1.8 → 1.2.0

package/package.json

@@ -1,116 +1,116 @@
-{
-  "name": "@flowuent-org/diagramming-core",
-  "version": "1.1.8",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev-diagramming": "nx serve diagramming",
-    "build-diagrams": "nx build diagrams"
-  },
-  "dependencies": {
-    "@dnd-kit/core": "^6.2.0",
-    "@dnd-kit/modifiers": "^8.0.0",
-    "@dnd-kit/sortable": "^9.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@fontsource/roboto": "^5.1.0",
-    "@hookform/resolvers": "^3.9.1",
-    "@mui/base": "5.0.0-beta.62",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
-    "@mui/types": "^7.2.19",
-    "@mui/x-data-grid": "^7.22.3",
-    "@tabler/icons-react": "^3.22.0",
-    "@welldone-software/why-did-you-render": "^8.0.3",
-    "@xyflow/react": "^12.3.5",
-    "axios": "^1.7.8",
-    "elkjs": "^0.9.3",
-    "file-saver": "^2.0.5",
-    "formik": "^2.4.6",
-    "framer-motion": "^11.11.17",
-    "gapi-script": "^1.2.0",
-    "html-to-image": "^1.11.11",
-    "i18next": "^24.0.2",
-    "immer": "^10.1.1",
-    "jotai": "^2.10.3",
-    "js-beautify": "^1.15.1",
-    "lodash": "^4.17.21",
-    "nanoid": "^5.0.9",
-    "react": "19.0.0",
-    "react-color": "^2.19.3",
-    "react-dnd": "^16.0.1",
-    "react-dom": "19.0.0",
-    "react-from-json": "^0.8.0",
-    "react-hook-form": "^7.53.2",
-    "react-i18next": "^15.1.2",
-    "react-icons": "^5.3.0",
-    "react-json-view": "^1.21.3",
-    "react-rnd": "^10.4.13",
-    "react-router-dom": "^7.0.1",
-    "react-syntax-highlighter": "^15.6.1",
-    "reactflow": "^11.11.4",
-    "tslib": "^2.8.1",
-    "use-undo": "^1.1.1",
-    "uuid": "^11.1.0",
-    "xlsx": "^0.18.5",
-    "yup": "^1.4.0",
-    "zustand": "^5.0.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@nx/cypress": "20.6.4",
-    "@nx/eslint": "20.6.4",
-    "@nx/eslint-plugin": "20.6.4",
-    "@nx/js": "20.6.4",
-    "@nx/react": "20.6.4",
-    "@nx/rollup": "20.6.4",
-    "@nx/vite": "20.6.4",
-    "@nx/web": "20.6.4",
-    "@nx/webpack": "20.6.4",
-    "@nx/workspace": "20.6.4",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@rollup/plugin-url": "^8.0.2",
-    "@svgr/rollup": "^8.1.0",
-    "@svgr/webpack": "^8.1.0",
-    "@swc-node/register": "~1.10.9",
-    "@swc/cli": "~0.5.1",
-    "@swc/core": "~1.9.3",
-    "@swc/helpers": "~0.5.15",
-    "@testing-library/react": "16.1.0",
-    "@types/file-saver": "^2.0.7",
-    "@types/jest": "^29.5.14",
-    "@types/js-beautify": "^1.14.3",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "22.10.0",
-    "@types/react": "18.3.12",
-    "@types/react-color": "^3.0.12",
-    "@types/react-dom": "18.3.1",
-    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.6",
-    "@vitest/ui": "^2.1.6",
-    "eslint": "~9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "jsdom": "~25.0.1",
-    "nx": "20.6.4",
-    "prettier": "^3.4.1",
-    "rollup-preserve-directives": "^1.1.3",
-    "swc-loader": "0.1.15",
-    "typescript": "~5.7.2",
-    "vite": "^6.3.6",
-    "vitest": "^2.1.6",
-    "webpack-cli": "^5.1.4"
-  }
-}
+{
+  "name": "@flowuent-org/diagramming-core",
+  "version": "1.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev-diagramming": "nx serve diagramming",
+    "build-diagrams": "nx build diagrams"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/modifiers": "^8.0.0",
+    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@fontsource/roboto": "^5.1.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@mui/base": "5.0.0-beta.62",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@mui/types": "^7.2.19",
+    "@mui/x-data-grid": "^7.22.3",
+    "@tabler/icons-react": "^3.22.0",
+    "@welldone-software/why-did-you-render": "^8.0.3",
+    "@xyflow/react": "^12.3.5",
+    "axios": "^1.7.8",
+    "elkjs": "^0.9.3",
+    "file-saver": "^2.0.5",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.11.17",
+    "gapi-script": "^1.2.0",
+    "html-to-image": "^1.11.11",
+    "i18next": "^24.0.2",
+    "immer": "^10.1.1",
+    "jotai": "^2.10.3",
+    "js-beautify": "^1.15.1",
+    "lodash": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "react": "19.0.0",
+    "react-color": "^2.19.3",
+    "react-dnd": "^16.0.1",
+    "react-dom": "19.0.0",
+    "react-from-json": "^0.8.0",
+    "react-hook-form": "^7.53.2",
+    "react-i18next": "^15.1.2",
+    "react-icons": "^5.3.0",
+    "react-json-view": "^1.21.3",
+    "react-rnd": "^10.4.13",
+    "react-router-dom": "^7.0.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "reactflow": "^11.11.4",
+    "tslib": "^2.8.1",
+    "use-undo": "^1.1.1",
+    "uuid": "^11.1.0",
+    "xlsx": "^0.18.5",
+    "yup": "^1.4.0",
+    "zustand": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@nx/cypress": "20.6.4",
+    "@nx/eslint": "20.6.4",
+    "@nx/eslint-plugin": "20.6.4",
+    "@nx/js": "20.6.4",
+    "@nx/react": "20.6.4",
+    "@nx/rollup": "20.6.4",
+    "@nx/vite": "20.6.4",
+    "@nx/web": "20.6.4",
+    "@nx/webpack": "20.6.4",
+    "@nx/workspace": "20.6.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-url": "^8.0.2",
+    "@svgr/rollup": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
+    "@swc-node/register": "~1.10.9",
+    "@swc/cli": "~0.5.1",
+    "@swc/core": "~1.9.3",
+    "@swc/helpers": "~0.5.15",
+    "@testing-library/react": "16.1.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.14",
+    "@types/js-beautify": "^1.14.3",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "22.10.0",
+    "@types/react": "18.3.12",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "18.3.1",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.6",
+    "@vitest/ui": "^2.1.6",
+    "eslint": "~9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "jsdom": "~25.0.1",
+    "nx": "20.6.4",
+    "prettier": "^3.4.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "swc-loader": "0.1.15",
+    "typescript": "~5.7.2",
+    "vite": "^6.3.6",
+    "vitest": "^2.1.6",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/packages/diagrams/src/index.ts

@@ -7,6 +7,7 @@ export * from './lib/atoms/AddParallelColButton';
 export * from './lib/atoms/BendpointNode';
 export * from './lib/atoms/CardBlockTypeSelector';
 export * from './lib/atoms/CardMainContent';
+export * from './lib/atoms/ConnectionPoints';
 export * from './lib/atoms/FloatingConnectionLine';
 export * from './lib/atoms/MarkerSelector';
 export * from './lib/atoms/PropertyInput';

package/packages/diagrams/src/lib/atoms/ConnectionPoints.tsx

@@ -0,0 +1,149 @@
+import React, { useMemo } from 'react';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box } from '@mui/material';
+import { useSelectedNode } from '../contexts/DiagramProvider';
+
+export type ConnectionPointPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface ConnectionPointConfig {
+  position: ConnectionPointPosition;
+  type: 'source' | 'target' | 'both';
+  offset?: number;
+}
+
+interface ConnectionPointsProps {
+  /** Show handles regardless of node selection */
+  alwaysVisible?: boolean;
+  /** Custom positions configuration */
+  positions?: ConnectionPointConfig[];
+  /** Custom handle size */
+  handleSize?: number;
+  /** Custom handle color */
+  handleColor?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+}
+
+const positionMap: Record<ConnectionPointPosition, Position> = {
+  top: Position.Top,
+  bottom: Position.Bottom,
+  left: Position.Left,
+  right: Position.Right,
+};
+
+const defaultPositions: ConnectionPointConfig[] = [
+  { position: 'top', type: 'target' },
+  { position: 'bottom', type: 'source' },
+  { position: 'left', type: 'target' },
+  { position: 'right', type: 'source' },
+];
+
+/**
+ * ConnectionPoints component displays interactive connection handles
+ * on a node when it's selected. Users can drag from these points to
+ * create edges connecting to other nodes.
+ */
+export const ConnectionPoints: React.FC<ConnectionPointsProps> = React.memo(({
+  alwaysVisible = false,
+  positions = defaultPositions,
+  handleSize = 14,
+  handleColor = '#10B981',
+  backgroundColor = '#1a1a2e',
+}) => {
+  const nodeId = useNodeId();
+  const selectedNode = useSelectedNode();
+  
+  const isSelected = selectedNode === nodeId;
+  const shouldShow = alwaysVisible || isSelected;
+
+  const handleStyle = useMemo(() => ({
+    width: `${handleSize}px`,
+    height: `${handleSize}px`,
+    borderRadius: '50%',
+    border: `3px solid ${handleColor}`,
+    backgroundColor: backgroundColor,
+    transition: 'all 0.2s ease-in-out',
+    cursor: 'crosshair',
+    zIndex: 10,
+  }), [handleSize, handleColor, backgroundColor]);
+
+  const getPositionStyle = (position: ConnectionPointPosition): React.CSSProperties => {
+    const offset = -Math.floor(handleSize / 2);
+    switch (position) {
+      case 'top': return { top: `${offset}px` };
+      case 'bottom': return { bottom: `${offset}px` };
+      case 'left': return { left: `${offset}px` };
+      case 'right': return { right: `${offset}px` };
+    }
+  };
+
+  const renderHandle = (config: ConnectionPointConfig, index: number) => {
+    const { position, type, offset } = config;
+    const baseId = `${nodeId}-${position}`;
+
+    if (type === 'both') {
+      // Render both source and target handles at the same position
+      return (
+        <React.Fragment key={`${position}-${index}`}>
+          <Handle
+            type="source"
+            id={`${baseId}-source`}
+            position={positionMap[position]}
+            className="connection-handle"
+            style={{
+              ...handleStyle,
+              ...getPositionStyle(position),
+            }}
+          />
+          <Handle
+            type="target"
+            id={`${baseId}-target`}
+            position={positionMap[position]}
+            className="connection-handle"
+            style={{
+              ...handleStyle,
+              ...getPositionStyle(position),
+              opacity: 0, // Hidden but functional
+              pointerEvents: shouldShow ? 'auto' : 'none',
+            }}
+          />
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <Handle
+        key={`${position}-${type}-${index}`}
+        type={type}
+        id={baseId}
+        position={positionMap[position]}
+        className="connection-handle"
+        style={{
+          ...handleStyle,
+          ...getPositionStyle(position),
+        }}
+      />
+    );
+  };
+
+  return (
+    <Box
+      className="connection-points-container"
+      sx={{
+        opacity: shouldShow ? 1 : 0,
+        transition: 'opacity 0.2s ease-in-out',
+        pointerEvents: shouldShow ? 'auto' : 'none',
+        '& .react-flow__handle': {
+          visibility: shouldShow ? 'visible' : 'hidden',
+        },
+      }}
+    >
+      {positions.map((config, index) => renderHandle(config, index))}
+    </Box>
+  );
+});
+
+ConnectionPoints.displayName = 'ConnectionPoints';
+
+export default ConnectionPoints;
+