@canmingir/link 1.2.8 → 1.2.11

package/src/lib/Flow/index.js

@@ -1 +1 @@
-export { default as Flow } from "./Flow";
+export { default as Flow } from "./core/Flow";

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>
   );
 };

package/src/lib/Flow/nodes/DefaultCard.jsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { Box, Card, Typography } from "@mui/material";
+
+const DefaultNodeCard = ({
+  title,
+  subtitle,
+  metaEntries,
+  nodeStyle,
+  baseStyle,
+  variant,
+  borderWidth,
+  borderColor,
+  cardWidth,
+  shape,
+  shadowLevel,
+  minHeight,
+  nodeSx = {},
+}) => {
+  const effectiveWidth = cardWidth || 220;
+  const effectiveBorderWidth = borderWidth || 1;
+  const effectiveRadius =
+    typeof shape === "number" ? shape : baseStyle.shape || 4;
+
+  const effectiveShadow =
+    typeof shadowLevel === "number" ? shadowLevel : variant === "card" ? 2 : 1;
+
+  const effectiveMinHeight = minHeight || 80;
+
+  return (
+    <Card
+      sx={{
+        p: 2,
+        width: effectiveWidth,
+        minHeight: effectiveMinHeight,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        position: "relative",
+        borderRadius: effectiveRadius,
+        bgcolor: nodeStyle.bg || "background.paper",
+        border: `${effectiveBorderWidth}px solid ${
+          borderColor || "transparent"
+        }`,
+        boxShadow: effectiveShadow,
+        transition: "background-color 0.3s ease, box-shadow 0.3s ease",
+        "&:hover": {
+          bgcolor: nodeStyle.hoverBg || nodeStyle.bg || "grey.100",
+          boxShadow: effectiveShadow + 1,
+          cursor: "pointer",
+        },
+        ...nodeSx,
+      }}
+    >
+      <Box sx={{ textAlign: "left", width: "100%" }}>
+        <Typography
+          variant="subtitle2"
+          sx={{
+            textAlign: "center",
+            fontWeight: 600,
+            fontSize: 13,
+            mb: subtitle ? 0.5 : 0,
+          }}
+        >
+          {title}
+        </Typography>
+
+        {subtitle && (
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              textAlign: "center",
+              fontSize: 11,
+              mb: metaEntries.length ? 0.5 : 0,
+            }}
+          >
+            {subtitle}
+          </Typography>
+        )}
+
+        {metaEntries.length > 0 && (
+          <Box sx={{ mt: 0.25 }}>
+            {metaEntries.map(([key, value]) => (
+              <Typography
+                key={key}
+                variant="caption"
+                color="text.secondary"
+                sx={{
+                  textAlign: "center",
+                  display: "block",
+                  fontSize: 10,
+                }}
+              >
+                {key}: {String(value)}
+              </Typography>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </Card>
+  );
+};
+
+export default DefaultNodeCard;

package/src/lib/Flow/nodes/DraggableNode.jsx

@@ -0,0 +1,162 @@
+import { Box } from "@mui/material";
+import { useSelection } from "../selection/SelectionContext";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+const DraggableNode = ({
+  children,
+  registerRef,
+  onDrag,
+  nodeId,
+  selectionColor = "#64748b",
+  initialPosition,
+  onConnect,
+}) => {
+  const [offset, setOffset] = useState(() =>
+    initialPosition ? { ...initialPosition } : { x: 0, y: 0 }
+  );
+
+  useEffect(() => {
+    if (initialPosition) {
+      setOffset({ ...initialPosition });
+    } else {
+      setOffset({ x: 0, y: 0 });
+    }
+  }, [initialPosition]);
+
+  const localRef = useRef(null);
+  const lastDeltaRef = useRef({ x: 0, y: 0 });
+  const onDragRef = useRef(onDrag);
+
+  const {
+    isSelected,
+    selectNode,
+    toggleSelection,
+    clearSelection,
+    registerNodeHandlers,
+    moveSelectedNodes,
+    selectedIds,
+  } = useSelection();
+
+  const selected = isSelected(nodeId);
+
+  useEffect(() => {
+    onDragRef.current = onDrag;
+  }, [onDrag]);
+
+  useEffect(() => {
+    if (!nodeId) return;
+
+    return registerNodeHandlers(nodeId, {
+      setOffset,
+      onDrag: () => onDragRef.current?.(),
+    });
+  }, [nodeId, registerNodeHandlers]);
+
+  const setRef = useCallback(
+    (el) => {
+      localRef.current = el;
+      registerRef?.(el);
+    },
+    [registerRef]
+  );
+
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.stopPropagation();
+
+      if (onConnect && e.altKey) {
+        e.preventDefault();
+        onConnect(nodeId, [...selectedIds]);
+        return;
+      }
+
+      if (e.shiftKey || e.ctrlKey || e.metaKey) {
+        toggleSelection(nodeId);
+        return;
+      }
+
+      if (!selected) {
+        clearSelection();
+        selectNode(nodeId);
+      }
+
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startOffset = { ...offset };
+      lastDeltaRef.current = { x: 0, y: 0 };
+
+      const handleMove = (ev) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+
+        const deltaDx = dx - lastDeltaRef.current.x;
+        const deltaDy = dy - lastDeltaRef.current.y;
+        lastDeltaRef.current = { x: dx, y: dy };
+
+        setOffset({
+          x: startOffset.x + dx,
+          y: startOffset.y + dy,
+        });
+
+        if (selectedIds.size > 1) {
+          moveSelectedNodes(deltaDx, deltaDy, nodeId);
+        }
+
+        onDragRef.current?.();
+      };
+
+      const handleUp = () => {
+        window.removeEventListener("mousemove", handleMove);
+        window.removeEventListener("mouseup", handleUp);
+      };
+
+      window.addEventListener("mousemove", handleMove);
+      window.addEventListener("mouseup", handleUp);
+    },
+    [
+      nodeId,
+      offset,
+      selected,
+      selectedIds,
+      selectNode,
+      toggleSelection,
+      clearSelection,
+      moveSelectedNodes,
+      onConnect,
+    ]
+  );
+
+  return (
+    <Box
+      ref={setRef}
+      data-node-id={nodeId}
+      onMouseDown={handleMouseDown}
+      sx={{
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        transform: `translate(${offset.x}px, ${offset.y}px)`,
+        cursor: "grab",
+        "&:active": { cursor: "grabbing" },
+        ...(selected && {
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: -6,
+            border: `2px solid ${selectionColor}`,
+            borderRadius: "12px",
+            pointerEvents: "none",
+            boxShadow: `0 0 8px ${selectionColor}66`,
+          },
+        }),
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default DraggableNode;