@flowuent-org/diagramming-core 1.1.8 → 1.2.0

package/packages/diagrams/src/lib/molecules/SideHandles.tsx

@@ -7,24 +7,93 @@ import { useSelectedNode } from '../contexts/DiagramProvider';
 // Define the props type for the component
 interface SideHandlesProps {
   className?: string;
+  /** Show all handles regardless of selection state */
+  alwaysShow?: boolean;
+  /** Which positions to show handles on */
+  positions?: ('top' | 'bottom' | 'left' | 'right')[];
 }
 
+// Connection point handle styles
+const handleBaseStyle: React.CSSProperties = {
+  width: '14px',
+  height: '14px',
+  borderRadius: '50%',
+  border: '3px solid #10B981',
+  backgroundColor: '#1a1a2e',
+  transition: 'all 0.2s ease-in-out',
+  cursor: 'crosshair',
+  zIndex: 10,
+};
+
+// Hidden handle style for the duplicate (allows bidirectional but only shows one visual handle)
+const hiddenHandleStyle: React.CSSProperties = {
+  ...handleBaseStyle,
+  opacity: 0,
+  pointerEvents: 'all',
+};
+
+const handleHoverStyle = `
+  .connection-handle:hover {
+    transform: scale(1.3);
+    background-color: #10B981 !important;
+    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
+  }
+  .connection-handle:active {
+    transform: scale(1.1);
+    background-color: #059669 !important;
+  }
+`;
+
 export const SideHandles: React.FC<SideHandlesProps> = React.memo(
-  ({ className }) => {
+  ({ className, alwaysShow = false, positions = ['top', 'bottom', 'left', 'right'] }) => {
     const sideHandles = useNodeSideHandles();
     const nodeId = useNodeId();
     const selectedNode = useSelectedNode();
+    
+    const isSelected = selectedNode === nodeId;
+    const shouldShow = alwaysShow || isSelected;
+
+    // Inject hover styles
+    React.useEffect(() => {
+      const styleId = 'connection-handle-styles';
+      if (!document.getElementById(styleId)) {
+        const styleSheet = document.createElement('style');
+        styleSheet.id = styleId;
+        styleSheet.textContent = handleHoverStyle;
+        document.head.appendChild(styleSheet);
+      }
+    }, []);
 
     if (sideHandles) {
       return (
         <div>
+          {/* Left - Bidirectional */}
           <Handle
             type="source"
+            id={`${nodeId}-left-source`}
+            position={Position.Left}
+            className="connection-handle"
+            style={handleBaseStyle}
+          />
+          <Handle
+            type="target"
+            id={`${nodeId}-left-target`}
             position={Position.Left}
+            style={hiddenHandleStyle}
           />
+          {/* Right - Bidirectional */}
           <Handle
             type="source"
+            id={`${nodeId}-right-source`}
+            position={Position.Right}
+            className="connection-handle"
+            style={handleBaseStyle}
+          />
+          <Handle
+            type="target"
+            id={`${nodeId}-right-target`}
             position={Position.Right}
+            style={hiddenHandleStyle}
           />
         </div>
       );
@@ -32,18 +101,114 @@ export const SideHandles: React.FC<SideHandlesProps> = React.memo(
 
     return (
       <Box
-        display={selectedNode ? undefined : 'none'}
+        sx={{
+          opacity: shouldShow ? 1 : 0,
+          transition: 'opacity 0.2s ease-in-out',
+          pointerEvents: shouldShow ? 'auto' : 'none',
+          '& .react-flow__handle': {
+            visibility: shouldShow ? 'visible' : 'hidden',
+          }
+        }}
       >
-        <Handle
-          type="source"
-          id={`${nodeId}-bottom`}
-          position={Position.Bottom}
-        />
-        <Handle
-          type="target"
-          id={`${nodeId}-top`}
-          position={Position.Top}
-        />
+        {/* Top Handle - Bidirectional (source + target) */}
+        {positions.includes('top') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-top-source`}
+              position={Position.Top}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                top: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-top-target`}
+              position={Position.Top}
+              style={{
+                ...hiddenHandleStyle,
+                top: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Bottom Handle - Bidirectional (source + target) */}
+        {positions.includes('bottom') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-bottom-source`}
+              position={Position.Bottom}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                bottom: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-bottom-target`}
+              position={Position.Bottom}
+              style={{
+                ...hiddenHandleStyle,
+                bottom: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Left Handle - Bidirectional (source + target) */}
+        {positions.includes('left') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-left-source`}
+              position={Position.Left}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                left: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-left-target`}
+              position={Position.Left}
+              style={{
+                ...hiddenHandleStyle,
+                left: '-8px',
+              }}
+            />
+          </>
+        )}
+        
+        {/* Right Handle - Bidirectional (source + target) */}
+        {positions.includes('right') && (
+          <>
+            <Handle
+              type="source"
+              id={`${nodeId}-right-source`}
+              position={Position.Right}
+              className="connection-handle"
+              style={{
+                ...handleBaseStyle,
+                right: '-8px',
+              }}
+            />
+            <Handle
+              type="target"
+              id={`${nodeId}-right-target`}
+              position={Position.Right}
+              style={{
+                ...hiddenHandleStyle,
+                right: '-8px',
+              }}
+            />
+          </>
+        )}
       </Box>
     );
   },

package/packages/diagrams/src/lib/organisms/CustomEdge/custom-edge-generator.tsx

@@ -94,21 +94,26 @@ export const CustomEdgeGenerator = (type: EdgeTypes = EdgeTypes.Default) => {
             onDoubleClick={createBendPoint}
             style={{
               ...style,
-              strokeWidth: (Number(style?.strokeWidth) || 1) * 4,
-              strokeOpacity: selectedEdgeId === id ? 0.1 : 0,
+              strokeWidth: (Number(style?.strokeWidth) || 2) * 4,
+              strokeOpacity: selectedEdgeId === id ? 0.2 : 0.05,
+              stroke: style?.stroke || '#10B981',
             }}
             fill="none"
           />
 
-          {/* Main path for the edge */}
+          {/* Main path for the edge - always visible */}
           <path
             id={id}
             d={edgePath}
             onClick={() => isErDiagram && toggleModal(setSelectedEdgeId)}
             onDoubleClick={createBendPoint}
-            style={{ ...style }}
+            style={{ 
+              ...style,
+              stroke: style?.stroke || '#10B981',
+              strokeWidth: style?.strokeWidth || 2,
+            }}
             markerStart={isErDiagram ? `url(#${id}-marker-start)` : markerStart}
-            markerEnd={isErDiagram ? `url(#${id}-marker-end)` : markerEnd}
+            markerEnd={isErDiagram ? `url(#${id}-marker-end)` : (markerEnd || 'url(#arrow)')}
             fill="none"
           />
         </g>

package/packages/diagrams/src/lib/styles.css

@@ -1,3 +1,56 @@
 .react-flow__edges {
   z-index: 20 !important;
 }
+
+/* Connection Handle Styles */
+.react-flow__handle {
+  transition: all 0.2s ease-in-out;
+}
+
+.react-flow__handle.connection-handle {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 3px solid #10B981;
+  background-color: #1a1a2e;
+  cursor: crosshair;
+  z-index: 10;
+}
+
+.react-flow__handle.connection-handle:hover {
+  transform: scale(1.3);
+  background-color: #10B981;
+  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
+}
+
+.react-flow__handle.connection-handle:active,
+.react-flow__handle.connection-handle.connecting {
+  transform: scale(1.1);
+  background-color: #059669;
+}
+
+/* Pulse animation for selected node handles */
+@keyframes handle-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+}
+
+.react-flow__node.selected .connection-handle {
+  animation: handle-pulse 1.5s ease-in-out infinite;
+}
+
+/* Connection line styles when drawing */
+.react-flow__connectionline {
+  stroke: #10B981;
+  stroke-width: 2;
+}
+
+/* Valid connection target highlight */
+.react-flow__handle.connectionindicator {
+  background-color: #10B981;
+  border-color: #fff;
+}

package/packages/diagrams/src/lib/templates/DiagramContainer.tsx

@@ -8,9 +8,68 @@ interface DiagramContainerProps
   showAutomationExecutionPanel?: boolean;
 }
 
+// Default arrow marker definitions for edges
+const EdgeMarkerDefinitions = () => (
+  <svg style={{ position: 'absolute', width: 0, height: 0 }}>
+    <defs>
+      {/* Arrow marker - Green */}
+      <marker
+        id="arrow"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#10B981" />
+      </marker>
+      
+      {/* Arrow marker - Blue */}
+      <marker
+        id="arrow-blue"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#4858E9" />
+      </marker>
+      
+      {/* Arrow marker - White */}
+      <marker
+        id="arrow-white"
+        viewBox="0 0 10 10"
+        refX="8"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto-start-reverse"
+      >
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="#ffffff" />
+      </marker>
+      
+      {/* Circle marker */}
+      <marker
+        id="circle"
+        viewBox="0 0 10 10"
+        refX="5"
+        refY="5"
+        markerWidth="5"
+        markerHeight="5"
+      >
+        <circle cx="5" cy="5" r="4" fill="#10B981" />
+      </marker>
+    </defs>
+  </svg>
+);
+
 export const DiagramContainer: React.FC<DiagramContainerProps> = (props) => {
   return (
     <ReactFlowProvider>
+      <EdgeMarkerDefinitions />
       <DiagramContent {...props} />
     </ReactFlowProvider>
   );