@canmingir/link 1.2.7 → 1.2.10

package/src/lib/Flow/FlowNode.jsx

@@ -4,6 +4,7 @@ import { getContentParts } from "./flowUtils";
 
 import { Box, Card, Typography } from "@mui/material";
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { SelectionProvider, useSelection } from "./SelectionContext";
 import {
   applySemanticTokens,
   getBaseStyleForVariant,
@@ -61,6 +62,7 @@ const NodeContent = ({
   const nodeStyle = applySemanticTokens(rawNodeStyle, baseStyle);
 
   const {
+    direction = "vertical",
     lineColor = baseStyle.lineColor,
     lineWidth = baseStyle.lineWidth,
     lineStyle = baseStyle.lineStyle,
@@ -73,9 +75,20 @@ const NodeContent = ({
     shape,
     shadowLevel,
     minHeight,
-    connectorType = baseStyle.connectorType ?? "default",
+    showDots = baseStyle.showDots ?? false,
+    dotRadius = baseStyle.dotRadius ?? 4,
+    dotColor = baseStyle.dotColor,
+    showArrow = baseStyle.showArrow ?? true,
+    arrowSize = baseStyle.arrowSize ?? 6,
+    animated = baseStyle.animated ?? false,
+    animationSpeed = baseStyle.animationSpeed ?? 1,
+    gradient = baseStyle.gradient ?? null,
+    curvature = baseStyle.curvature ?? 0.5,
+    selectionColor = baseStyle.selectionColor ?? "#64748b",
   } = nodeStyle;
 
+  const isHorizontal = direction === "horizontal";
+
   const strokeWidth = toPxNumber(lineWidth, 1.5);
   const dashStyle =
     lineStyle === "dashed" || lineStyle === "dotted" ? lineStyle : "solid";
@@ -220,7 +233,7 @@ const NodeContent = ({
       ref={containerRef}
       sx={{
         display: "inline-flex",
-        flexDirection: "column",
+        flexDirection: isHorizontal ? "row" : "column",
         alignItems: "center",
         position: "relative",
       }}
@@ -231,6 +244,8 @@ const NodeContent = ({
           if (registerRef) registerRef(el);
         }}
         onDrag={handleDrag}
+        nodeId={node.id}
+        selectionColor={selectionColor}
       >
         {renderContent()}
       </DraggableNode>
@@ -244,16 +259,32 @@ const NodeContent = ({
             stroke={lineColor}
             strokeWidth={strokeWidth}
             lineStyle={dashStyle}
-            connectorType={connectorType}
             tick={connectorTick}
+            orientation={direction}
+            showDots={showDots}
+            dotRadius={dotRadius}
+            dotColor={dotColor}
+            showArrow={showArrow}
+            arrowSize={arrowSize}
+            animated={animated}
+            animationSpeed={animationSpeed}
+            gradient={gradient}
+            curvature={curvature}
           />
 
           <Box
             sx={{
               display: "flex",
-              flexDirection: "row",
-              columnGap: gap,
-              marginTop: levelGap,
+              flexDirection: isHorizontal ? "column" : "row",
+              ...(isHorizontal
+                ? {
+                    marginLeft: levelGap,
+                    rowGap: gap,
+                  }
+                : {
+                    marginTop: levelGap,
+                    columnGap: gap,
+                  }),
               position: "relative",
               alignItems: "flex-start",
               justifyContent: "center",
@@ -279,15 +310,49 @@ const NodeContent = ({
   );
 };
 
-const FlowNode = ({ isRoot = false, ...props }) => {
-  if (!isRoot) {
-    return <NodeContent {...props} />;
-  }
+const hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+const SelectionBox = ({ box, selectionColor = "#64748b" }) => {
+  if (!box) return null;
 
+  const { startX, startY, currentX, currentY } = box;
+  const left = Math.min(startX, currentX);
+  const top = Math.min(startY, currentY);
+  const width = Math.abs(currentX - startX);
+  const height = Math.abs(currentY - startY);
+
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        left,
+        top,
+        width,
+        height,
+        border: `2px solid ${selectionColor}`,
+        backgroundColor: hexToRgba(selectionColor, 0.1),
+        pointerEvents: "none",
+        zIndex: 9999,
+        borderRadius: "4px",
+      }}
+    />
+  );
+};
+
+const FlowCanvas = ({ children, selectionColor = "#64748b" }) => {
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
-
   const [zoom, setZoom] = useState(1);
+  const [selectionBox, setSelectionBox] = useState(null);
+  const containerRef = useRef(null);
+  const selectionBoxRef = useRef(null);
+
+  const { clearSelection, selectMultiple, addToSelection } = useSelection();
 
   const clampZoom = (z) => Math.min(2.5, Math.max(0.25, z));
 
@@ -295,28 +360,92 @@ const FlowNode = ({ isRoot = false, ...props }) => {
     const onWheel = (e) => {
       const wantsZoom = e.ctrlKey || e.metaKey;
       if (!wantsZoom) return;
-
       e.preventDefault();
-
       const direction = e.deltaY > 0 ? -1 : 1;
       const factor = direction > 0 ? 1.1 : 1 / 1.1;
-
       setZoom((z) => clampZoom(z * factor));
     };
-
     window.addEventListener("wheel", onWheel, { passive: false });
     return () => window.removeEventListener("wheel", onWheel);
   }, []);
 
   const handleCanvasMouseDown = (e) => {
-    if (e.target?.closest?.('[data-flow-zoom="true"]')) return;
+    if (e.target?.closest?.(".MuiCard-root") || e.target?.closest?.("button"))
+      return;
 
     if (e.button !== 0) return;
 
-    setIsDragging(true);
-
     const startX = e.clientX;
     const startY = e.clientY;
+
+    if (e.shiftKey || e.ctrlKey || e.metaKey) {
+      setSelectionBox({ startX, startY, currentX: startX, currentY: startY });
+      selectionBoxRef.current = {
+        startX,
+        startY,
+        currentX: startX,
+        currentY: startY,
+      };
+
+      const onMove = (ev) => {
+        const newBox = {
+          startX,
+          startY,
+          currentX: ev.clientX,
+          currentY: ev.clientY,
+        };
+        setSelectionBox(newBox);
+        selectionBoxRef.current = newBox;
+      };
+
+      const onUp = () => {
+        if (containerRef.current && selectionBoxRef.current) {
+          const box = selectionBoxRef.current;
+          const nodes = containerRef.current.querySelectorAll("[data-node-id]");
+          const selectedNodeIds = [];
+
+          const boxLeft = Math.min(box.startX, box.currentX);
+          const boxRight = Math.max(box.startX, box.currentX);
+          const boxTop = Math.min(box.startY, box.currentY);
+          const boxBottom = Math.max(box.startY, box.currentY);
+
+          nodes.forEach((node) => {
+            const rect = node.getBoundingClientRect();
+
+            if (
+              rect.left < boxRight &&
+              rect.right > boxLeft &&
+              rect.top < boxBottom &&
+              rect.bottom > boxTop
+            ) {
+              const nodeId = node.getAttribute("data-node-id");
+              if (nodeId) selectedNodeIds.push(nodeId);
+            }
+          });
+
+          if (selectedNodeIds.length > 0) {
+            if (e.shiftKey) {
+              addToSelection(selectedNodeIds);
+            } else {
+              selectMultiple(selectedNodeIds);
+            }
+          }
+        }
+
+        setSelectionBox(null);
+        selectionBoxRef.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+      return;
+    }
+
+    clearSelection();
+
+    setIsDragging(true);
     const startOffset = { ...offset };
 
     const onMove = (ev) => {
@@ -338,6 +467,7 @@ const FlowNode = ({ isRoot = false, ...props }) => {
 
   return (
     <Box
+      ref={containerRef}
       onMouseDown={handleCanvasMouseDown}
       sx={{
         width: "100vw",
@@ -349,6 +479,7 @@ const FlowNode = ({ isRoot = false, ...props }) => {
         position: "relative",
       }}
     >
+      <SelectionBox box={selectionBox} selectionColor={selectionColor} />
       <Box
         sx={{
           transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
@@ -362,10 +493,27 @@ const FlowNode = ({ isRoot = false, ...props }) => {
           pointerEvents: "auto",
         }}
       >
-        <NodeContent {...props} />
+        {children}
       </Box>
     </Box>
   );
 };
 
+const FlowNode = ({ isRoot = false, onAddNode, variant, ...props }) => {
+  if (!isRoot) {
+    return <NodeContent onAddNode={onAddNode} variant={variant} {...props} />;
+  }
+
+  const baseStyle = getBaseStyleForVariant(variant);
+  const selectionColor = baseStyle.selectionColor ?? "#64748b";
+
+  return (
+    <SelectionProvider>
+      <FlowCanvas selectionColor={selectionColor}>
+        <NodeContent onAddNode={onAddNode} variant={variant} {...props} />
+      </FlowCanvas>
+    </SelectionProvider>
+  );
+};
+
 export default FlowNode;

package/src/lib/Flow/SelectionContext.jsx

@@ -0,0 +1,123 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+
+const SelectionContext = createContext(null);
+
+export const SelectionProvider = ({ children }) => {
+  const [selectedIds, setSelectedIds] = useState(new Set());
+  const nodeHandlersRef = useRef(new Map());
+
+  const selectNode = useCallback((id, addToSelection = false) => {
+    setSelectedIds((prev) => {
+      const next = new Set(addToSelection ? prev : []);
+      next.add(id);
+      return next;
+    });
+  }, []);
+
+  const deselectNode = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const toggleSelection = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedIds(new Set());
+  }, []);
+
+  const selectMultiple = useCallback((ids) => {
+    setSelectedIds(new Set(ids));
+  }, []);
+
+  const addToSelection = useCallback((ids) => {
+    setSelectedIds((prev) => new Set([...prev, ...ids]));
+  }, []);
+
+  const isSelected = useCallback((id) => selectedIds.has(id), [selectedIds]);
+
+  const registerNodeHandlers = useCallback((id, handlers) => {
+    nodeHandlersRef.current.set(id, handlers);
+    return () => nodeHandlersRef.current.delete(id);
+  }, []);
+
+  const moveSelectedNodes = useCallback(
+    (deltaX, deltaY, excludeId = null) => {
+      selectedIds.forEach((id) => {
+        if (id !== excludeId) {
+          const handlers = nodeHandlersRef.current.get(id);
+          if (handlers) {
+            if (handlers.setOffset) {
+              handlers.setOffset((prev) => ({
+                x: prev.x + deltaX,
+                y: prev.y + deltaY,
+              }));
+            }
+            if (handlers.onDrag) {
+              handlers.onDrag();
+            }
+          }
+        }
+      });
+    },
+    [selectedIds]
+  );
+
+  return (
+    <SelectionContext.Provider
+      value={{
+        selectedIds,
+        selectNode,
+        deselectNode,
+        toggleSelection,
+        clearSelection,
+        selectMultiple,
+        addToSelection,
+        isSelected,
+        registerNodeHandlers,
+        moveSelectedNodes,
+      }}
+    >
+      {children}
+    </SelectionContext.Provider>
+  );
+};
+
+export const useSelection = () => {
+  const context = useContext(SelectionContext);
+  if (!context) {
+    return {
+      selectedIds: new Set(),
+      selectNode: () => {},
+      deselectNode: () => {},
+      toggleSelection: () => {},
+      clearSelection: () => {},
+      selectMultiple: () => {},
+      addToSelection: () => {},
+      isSelected: () => false,
+      registerNodeHandlers: () => () => {},
+      moveSelectedNodes: () => {},
+    };
+  }
+  return context;
+};
+
+export default SelectionContext;

package/src/lib/Flow/layouts/InfoNode.jsx

@@ -9,12 +9,12 @@ const MainContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "$style",
 })(({ theme, $style = {} }) => {
   const {
-    minWidth = 120,
-    minHeight = 120,
-    maxWidth = 160,
-    maxHeight = 160,
-    borderRadius = 16,
-    borderColor = "rgba(255, 255, 255, 0.2)",
+    minWidth = 280,
+    minHeight = 220,
+    maxWidth = 320,
+    maxHeight = "auto",
+    borderRadius = 20,
+    borderColor = "rgba(255, 255, 255, 0.08)",
     bgFrom,
     bgTo,
   } = $style;
@@ -28,10 +28,11 @@ const MainContainer = styled("div", {
   return {
     display: "flex",
     flexDirection: "column",
-    alignItems: "center",
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
     color: "#ffffff",
     borderRadius,
-    padding: "16px 20px",
+    padding: "24px",
     border: `1px solid ${borderColor}`,
     backdropFilter: "blur(10px)",
     transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
@@ -56,26 +57,38 @@ const MainContainer = styled("div", {
   };
 });
 
+const HeaderRow = styled("div")({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  width: "100%",
+  gap: "16px",
+  marginBottom: "16px",
+  minHeight: "44px",
+});
+
 const IconContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "$style",
 })(({ $style = {} }) => {
   const {
     bg = "rgba(255, 255, 255, 0.1)",
-    hoverBg = "rgba(255, 255, 255, 0.15)",
-    borderRadius = 12,
-    padding = 8,
-    borderColor = "rgba(255, 255, 255, 0.3)",
-    marginBottom = 12,
+    hoverBg = "rgba(255, 255, 255, 0.2)",
+    borderRadius = 14,
+    padding = 10,
+    borderColor = "rgba(255, 255, 255, 0.1)",
   } = $style;
 
   return {
     backgroundColor: bg,
     borderRadius,
     padding,
-    marginBottom,
     transition: "all 0.4s ease",
     backdropFilter: "blur(5px)",
     border: `1px solid ${borderColor}`,
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
 
     '[data-hovered="true"] &': {
       backgroundColor: hoverBg,
@@ -88,44 +101,90 @@ const LabelText = styled("div", {
 })(({ $style = {} }) => {
   const {
     color = "#ffffff",
-    fontWeight = 600,
-    fontSize = 13,
-    letterSpacing = 0.5,
+    fontWeight = 700,
+    fontSize = 15,
+    letterSpacing = 0.3,
   } = $style;
 
   return {
     fontWeight,
     fontSize,
     letterSpacing: `${letterSpacing}px`,
-    textAlign: "center",
+    textAlign: "left",
     transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
-    textShadow: "none",
-    lineHeight: "1.4",
+    lineHeight: "1.2",
     opacity: 0,
-    transform: "translateY(10px)",
+    transform: "translateX(10px)",
     color,
+    flex: 1,
 
     '&[data-animated="true"]': {
       opacity: 1,
-      transform: "translateY(0)",
+      transform: "translateX(0)",
     },
   };
 });
 
+const DescriptionText = styled("div")(({ theme }) => ({
+  fontSize: "12px",
+  fontWeight: 400,
+  color: alpha("#fff", 0.6),
+  textAlign: "left",
+  lineHeight: "1.5",
+  width: "100%",
+  flex: 1,
+  opacity: 0,
+  transform: "translateY(10px)",
+  transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s",
+  marginBottom: "16px",
+  display: "-webkit-box",
+  WebkitLineClamp: 4,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+
+  '&[data-animated="true"]': {
+    opacity: 1,
+    transform: "translateY(0)",
+  },
+}));
+
+const ActionText = styled("div")(({ theme }) => ({
+  fontSize: "10px",
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "1px",
+  color: alpha("#fff", 0.4),
+  marginTop: "auto",
+  textAlign: "left",
+  width: "100%",
+  fontFamily: "monospace",
+  opacity: 0,
+  transform: "translateY(5px)",
+  transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s",
+
+  '&[data-animated="true"]': {
+    opacity: 1,
+    transform: "translateY(0)",
+  },
+}));
+
 const getIcon = (node) => {
   if (node.icon) return node.icon;
   if (node.type === "CONDITION" || node.type === "decision")
     return "mdi:help-circle-outline";
   if (node.type === "NORMAL") return "mdi:checkbox-blank-circle-outline";
-  return "mdi:cube-outline";
+  return "mdi:map-marker";
 };
 
-const InfoNode = ({ node, nodeStyle = {} }) => {
+const InfoNode = ({ node, nodeStyle = {}, children }) => {
   const [animated, setAnimated] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
 
-  const label =
-    node.label || node.title || node.name || node.id || "Responsibility";
+  const label = node.label || node.title || node.name || node.id || "Get Data";
+
+  const action = node.action || "SYSTEM:DEFAULT_ACTION";
+  const description =
+    node.description || "Description of the operation goes here.";
 
   useEffect(() => {
     const timer = setTimeout(() => setAnimated(true), ANIMATION_DELAY_MS);
@@ -133,14 +192,9 @@ const InfoNode = ({ node, nodeStyle = {} }) => {
   }, []);
 
   const layoutStyle = {
-    minWidth: nodeStyle.cardWidth || nodeStyle.minWidth || 120,
-    minHeight: nodeStyle.minHeight || 120,
-    maxWidth: nodeStyle.maxWidth || 160,
-    maxHeight: nodeStyle.maxHeight || 160,
-    borderRadius: typeof nodeStyle.shape === "number" ? nodeStyle.shape : 16,
-    borderColor: nodeStyle.borderColor || "rgba(255, 255, 255, 0.2)",
-    bgFrom: nodeStyle.bgFrom,
-    bgTo: nodeStyle.bgTo,
+    ...nodeStyle,
+    minWidth: nodeStyle.cardWidth || nodeStyle.minWidth || 280,
+    minHeight: nodeStyle.minHeight || 220,
   };
 
   const iconContainerStyle = {
@@ -149,7 +203,6 @@ const InfoNode = ({ node, nodeStyle = {} }) => {
     iconBorderRadius: nodeStyle.iconRadius,
     iconPadding: nodeStyle.iconPadding,
     iconBorderColor: nodeStyle.iconBorderColor,
-    iconMarginBottom: nodeStyle.iconMarginBottom,
   };
 
   const labelStyle = {
@@ -168,27 +221,33 @@ const InfoNode = ({ node, nodeStyle = {} }) => {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <IconContainer $style={iconContainerStyle}>
-        <Iconify
-          icon={icon}
-          width={28}
-          height={28}
-          sx={{
-            transition: "all 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
-            transform: animated
-              ? isHovered
-                ? "rotate(360deg) scale(1.1)"
-                : "rotate(0deg) scale(1)"
-              : "rotate(-90deg) scale(0.8)",
-            filter: "none",
-            color: nodeStyle.iconColor || "#ffffff",
-          }}
-        />
-      </IconContainer>
-
-      <LabelText data-animated={animated} $style={labelStyle}>
-        {label}
-      </LabelText>
+      <HeaderRow>
+        <IconContainer $style={iconContainerStyle}>
+          <Iconify
+            icon={icon}
+            width={24}
+            height={24}
+            sx={{
+              filter: "none",
+              color: nodeStyle.iconColor || "#ffffff",
+            }}
+          />
+        </IconContainer>
+
+        <LabelText data-animated={animated} $style={labelStyle}>
+          {label}
+        </LabelText>
+      </HeaderRow>
+
+      {description && (
+        <DescriptionText data-animated={animated}>
+          {description}
+        </DescriptionText>
+      )}
+
+      {action && <ActionText data-animated={animated}>{action}</ActionText>}
+
+      {children}
     </MainContainer>
   );
 };