@canmingir/link 1.2.6 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/lib/Flow/DynamicConnector.jsx

@@ -30,6 +30,7 @@ const DynamicConnector = ({
       };
 
       const children = childEls.map((el) => {
+        if (!el) return { x: parent.x, y: parent.y };
         const r = el.getBoundingClientRect();
         return {
           x: r.left + r.width / 2 - cRect.left,
@@ -45,12 +46,13 @@ const DynamicConnector = ({
       setDims({ w: cRect.width, h: cRect.height });
     };
 
+    update();
+
     const ro = new ResizeObserver(update);
     ro.observe(containerEl);
     ro.observe(parentEl);
     childEls.forEach((el) => el && ro.observe(el));
 
-    update();
     return () => ro.disconnect();
   }, [containerEl, parentEl, childEls, tick]);
 
@@ -65,6 +67,18 @@ const DynamicConnector = ({
 
   const onlyOne = points.children.length === 1;
 
+  const svgProps = {
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      overflow: "visible",
+    },
+    width: "100%",
+    height: "100%",
+    viewBox: `0 0 ${dims.w} ${dims.h}`,
+  };
+
   if (connectorType === "curved" || connectorType === "n8n") {
     const createN8nPath = (from, to) => {
       const v = Math.max(32, Math.abs(to.y - from.y) * 0.35);
@@ -83,12 +97,7 @@ const DynamicConnector = ({
     };
 
     return (
-      <svg
-        style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
-        width="100%"
-        height="100%"
-        viewBox={`0 0 ${dims.w} ${dims.h}`}
-      >
+      <svg {...svgProps}>
         {points.children.map((child, i) => (
           <path
             key={i}
@@ -106,12 +115,7 @@ const DynamicConnector = ({
   }
 
   return (
-    <svg
-      style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
-      width="100%"
-      height="100%"
-      viewBox={`0 0 ${dims.w} ${dims.h}`}
-    >
+    <svg {...svgProps}>
       {onlyOne ? (
         <line
           x1={points.parent.x}
@@ -136,8 +140,8 @@ const DynamicConnector = ({
 
           {(() => {
             const xs = points.children.map((c) => c.x);
-            const xMin = Math.min(...xs);
-            const xMax = Math.max(...xs);
+            const xMin = Math.min(...xs, points.parent.x);
+            const xMax = Math.max(...xs, points.parent.x);
             return (
               <line
                 x1={xMin}

package/src/lib/Flow/Flow.jsx

@@ -27,7 +27,13 @@ export const Flow = ({ data, variant = "simple", style, plugin }) => {
   }, [nodesById, roots]);
 
   return (
-    <FlowNode node={treeData} variant={variant} style={style} plugin={plugin} />
+    <FlowNode
+      node={treeData}
+      variant={variant}
+      style={style}
+      plugin={plugin}
+      isRoot={true}
+    />
   );
 };
 

package/src/lib/Flow/FlowNode.jsx

@@ -11,7 +11,15 @@ import {
   toPxNumber,
 } from "./styles";
 
-const FlowNode = ({ node, type, variant, style, plugin }) => {
+const NodeContent = ({
+  node,
+  type,
+  variant,
+  style,
+  plugin,
+  registerRef,
+  onDrag,
+}) => {
   const baseStyle = getBaseStyleForVariant(variant);
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
 
@@ -78,7 +86,11 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
   const [childElList, setChildElList] = useState([]);
 
   const [connectorTick, setConnectorTick] = useState(0);
-  const notifyDrag = () => setConnectorTick((t) => t + 1);
+
+  const handleDrag = (newOffset) => {
+    setConnectorTick((t) => t + 1);
+    if (onDrag) onDrag(newOffset);
+  };
 
   useLayoutEffect(() => {
     const els = (node.children || [])
@@ -213,9 +225,15 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
         position: "relative",
       }}
     >
-      <Box ref={parentRef} sx={{ position: "relative" }}>
+      <DraggableNode
+        registerRef={(el) => {
+          parentRef.current = el;
+          if (registerRef) registerRef(el);
+        }}
+        onDrag={handleDrag}
+      >
         {renderContent()}
-      </Box>
+      </DraggableNode>
 
       {hasChildren && (
         <>
@@ -242,19 +260,17 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
             }}
           >
             {node.children.map((child) => (
-              <DraggableNode
+              <FlowNode
                 key={child.id}
+                node={child}
+                type={type}
+                variant={variant}
+                style={style}
+                plugin={plugin}
                 registerRef={(el) => (childRefs.current[child.id] = el)}
-                onDrag={notifyDrag}
-              >
-                <FlowNode
-                  node={child}
-                  type={type}
-                  variant={variant}
-                  style={style}
-                  plugin={plugin}
-                />
-              </DraggableNode>
+                onDrag={() => setConnectorTick((t) => t + 1)}
+                isRoot={false}
+              />
             ))}
           </Box>
         </>
@@ -263,4 +279,93 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
   );
 };
 
+const FlowNode = ({ isRoot = false, ...props }) => {
+  if (!isRoot) {
+    return <NodeContent {...props} />;
+  }
+
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+
+  const [zoom, setZoom] = useState(1);
+
+  const clampZoom = (z) => Math.min(2.5, Math.max(0.25, z));
+
+  useEffect(() => {
+    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.button !== 0) return;
+
+    setIsDragging(true);
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startOffset = { ...offset };
+
+    const onMove = (ev) => {
+      setOffset({
+        x: startOffset.x + (ev.clientX - startX),
+        y: startOffset.y + (ev.clientY - startY),
+      });
+    };
+
+    const onUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  return (
+    <Box
+      onMouseDown={handleCanvasMouseDown}
+      sx={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        bgcolor: "none",
+        cursor: isDragging ? "grabbing" : "default",
+        userSelect: "none",
+        position: "relative",
+      }}
+    >
+      <Box
+        sx={{
+          transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
+          transformOrigin: "center center",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: isDragging ? "none" : "transform 0.1s ease-out",
+          pointerEvents: "auto",
+        }}
+      >
+        <NodeContent {...props} />
+      </Box>
+    </Box>
+  );
+};
+
 export default FlowNode;

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

@@ -1,12 +1,27 @@
 import React from "react";
 
-import { Box, Card, Stack } from "@mui/material";
+import { Box, Card, Stack, Typography } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
 
+const STYLES = {
+  width: "100%",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-word",
+  lineHeight: 1.3,
+  opacity: 0.85,
+};
+
 export function MediaAvatarCard({
   sx,
   leftContent,
   rightContent,
+  title,
+  description,
+  footer,
   background,
   overlayColor,
   backgroundClassName = "animated-background-image",
@@ -25,6 +40,9 @@ export function MediaAvatarCard({
         position: "relative",
         display: "flex",
         flexDirection: "row",
+        fontSize: 12,
+        color: "rgba(255,255,255,0.82)",
+        lineHeight: 1.3,
         boxShadow: (theme) => theme.shadows[3],
         "&:hover": {
           boxShadow: (theme) => theme.shadows[6],
@@ -82,75 +100,44 @@ export function MediaAvatarCard({
 
       <Stack
         direction="column"
-        spacing={1}
         sx={{
           flex: 1,
           padding: 2,
           zIndex: 1,
           position: "relative",
+          height: "100%",
+          justifyContent: "space-between",
         }}
       >
-        {rightContent}
-      </Stack>
-    </Card>
-  );
-}
+        {rightContent ? (
+          rightContent
+        ) : (
+          <>
+            <Stack spacing={1} sx={{ width: "100%", minWidth: 0 }}>
+              <Box>{title}</Box>
 
-export function HeaderCard({
-  sx,
-  header,
-  children,
-  height = 140,
-  padding = 2,
-}) {
-  const theme = useTheme();
+              {description && (
+                <Typography variant="inherit" sx={STYLES}>
+                  {description}
+                </Typography>
+              )}
+            </Stack>
 
-  return (
-    <Card
-      sx={{
-        p: padding,
-        minWidth: 200,
-        maxWidth: 420,
-        height,
-        borderRadius: 3,
-        position: "relative",
-        overflow: "hidden",
-        backgroundColor: theme.palette.background.paper,
-        transition: "all 0.3s ease-in-out",
-        "&:hover": {
-          transform: "translateY(-4px)",
-          boxShadow: theme.shadows[8],
-          "&:before": {
-            height: "100%",
-          },
-        },
-        "&:before": {
-          content: '""',
-          width: "100%",
-          height: "40%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          background: `linear-gradient(135deg, ${alpha(
-            theme.palette.secondary.light,
-            0.2
-          )}, ${alpha(theme.palette.primary.main, 0.3)})`,
-          borderRadius: "8px 8px 0 0",
-          transition: "height 0.3s ease-in-out",
-        },
-        ...sx,
-      }}
-    >
-      <Stack
-        spacing={2}
-        sx={{
-          height: "100%",
-          position: "relative",
-          zIndex: 1,
-        }}
-      >
-        {header}
-        {children}
+            {footer && (
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  gap: 0.5,
+                  mt: 0.5,
+                }}
+              >
+                {footer}
+              </Box>
+            )}
+          </>
+        )}
       </Stack>
     </Card>
   );
@@ -160,6 +147,9 @@ export function SideStripeCard({
   sx,
   stripeContent,
   mainContent,
+  title,
+  description,
+  footer,
   minWidth = 200,
   maxWidth = 290,
   height = 100,
@@ -168,11 +158,7 @@ export function SideStripeCard({
   const theme = useTheme();
 
   return (
-    <Box
-      sx={{
-        cursor: "pointer",
-      }}
-    >
+    <Box sx={{ cursor: "pointer" }}>
       <Card
         sx={{
           display: "flex",
@@ -185,6 +171,9 @@ export function SideStripeCard({
           boxShadow: 3,
           position: "relative",
           overflow: "hidden",
+          fontSize: 12,
+          lineHeight: 1.3,
+          color: "rgba(255,255,255,0.82)",
           "&:hover": {
             boxShadow: 6,
             "& .animated-background-selector": {
@@ -233,20 +222,118 @@ export function SideStripeCard({
 
         <Stack
           direction="column"
-          spacing={1}
           sx={{
             padding: 2,
             position: "relative",
             zIndex: 1,
+            flex: 1,
+            height: "100%",
+            justifyContent: "space-between",
           }}
         >
-          {mainContent}
+          {mainContent ? (
+            mainContent
+          ) : (
+            <>
+              <Box sx={{ minWidth: 0 }}>
+                {typeof title === "string" ? (
+                  <Typography
+                    variant="inherit"
+                    sx={{
+                      color: "text.primary",
+                      wordBreak: "break-word",
+                      hyphens: "auto",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {title}
+                  </Typography>
+                ) : (
+                  title
+                )}
+
+                {description && (
+                  <Typography
+                    variant="inherit"
+                    sx={{
+                      ...STYLES,
+                      mt: 0.5,
+                      color: "text.primary",
+                      opacity: 0.8,
+                    }}
+                  >
+                    {description}
+                  </Typography>
+                )}
+              </Box>
+
+              {footer && (
+                <Box sx={{ alignSelf: "flex-end", mt: 0.5 }}>{footer}</Box>
+              )}
+            </>
+          )}
         </Stack>
       </Card>
     </Box>
   );
 }
 
+export function HeaderCard({
+  sx,
+  header,
+  children,
+  height = 140,
+  padding = 2,
+}) {
+  const theme = useTheme();
+  return (
+    <Card
+      sx={{
+        p: padding,
+        minWidth: 200,
+        maxWidth: 420,
+        height,
+        borderRadius: 3,
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: theme.palette.background.paper,
+        fontSize: 12,
+        lineHeight: 1.3,
+        color: "rgba(255,255,255,0.82)",
+        transition: "all 0.3s ease-in-out",
+        "&:hover": {
+          transform: "translateY(-4px)",
+          boxShadow: theme.shadows[8],
+          "&:before": { height: "100%" },
+        },
+        "&:before": {
+          content: '""',
+          width: "100%",
+          height: "40%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          background: `linear-gradient(135deg, ${alpha(
+            theme.palette.secondary.light,
+            0.2
+          )}, ${alpha(theme.palette.primary.main, 0.3)})`,
+          borderRadius: "8px 8px 0 0",
+          transition: "height 0.3s ease-in-out",
+        },
+        ...sx,
+      }}
+    >
+      <Stack
+        spacing={2}
+        sx={{ height: "100%", position: "relative", zIndex: 1 }}
+      >
+        {header}
+        {children}
+      </Stack>
+    </Card>
+  );
+}
+
 export function AvatarRoleCard({
   sx,
   leftContent,
@@ -264,13 +351,14 @@ export function AvatarRoleCard({
         borderRadius: 2,
         position: "relative",
         backgroundColor: theme.palette.background.paper,
+        fontSize: 12,
+        lineHeight: 1.3,
+        color: "rgba(255,255,255,0.82)",
         transition: "all 0.3s ease-in-out",
         "&:hover": {
           transform: "translateY(-4px)",
           boxShadow: theme.shadows[8],
-          "&:before": {
-            height: "100%",
-          },
+          "&:before": { height: "100%" },
         },
         "&:before": {
           content: '""',
@@ -291,11 +379,7 @@ export function AvatarRoleCard({
     >
       <Stack
         spacing={1}
-        sx={{
-          height: "100%",
-          position: "relative",
-          zIndex: 1,
-        }}
+        sx={{ height: "100%", position: "relative", zIndex: 1 }}
       >
         <Stack
           direction="row"