@canmingir/link 1.2.51 → 1.2.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.51",
+  "version": "1.2.53",
   "type": "module",
   "bin": {
     "link-server": "./server/server.ts"

package/src/http/index.js

@@ -40,9 +40,8 @@ instance.interceptors.response.use(
   async (error) => {
     publish("LOADED", { loading: false });
     const statusCode = error.response?.status;
-    const identityProvider = storage.get("link", "identityProvider");
 
-    if (statusCode === 500 && identityProvider === "DEMO") {
+    if (statusCode === 500) {
       const token = storage.get("link", "accessToken");
       try {
         const decodedToken = jwtDecode(token);
@@ -155,22 +154,18 @@ refreshInterceptor(instance, refreshAuthLogic, {
       return false;
     }
 
-if (identityProvider === "DEMO") {
-  if (statusCode !== 500) {
-    return true;
-  }
-
-  try {
-    const decodedToken = jwtDecode(token);
-    return decodedToken.exp * 1000 < Date.now();
-  } catch (_) {
-    // If we can't decode, attempt refresh once.
-    return true;
-  }
-}
+    if (identityProvider === "DEMO") {
+      if (statusCode !== 500) {
+        return true;
+      }
 
-    if (statusCode === 500) {
-      return false;
+      try {
+        const decodedToken = jwtDecode(token);
+        return decodedToken.exp * 1000 < Date.now();
+      } catch (_) {
+        // If we can't decode, attempt refresh once.
+        return true;
+      }
     }
 
     try {

package/src/layouts/DashboardLayout/header.jsx

@@ -46,11 +46,7 @@ export default function Header({ onOpenNav }) {
         </IconButton>
       )}
       {projectBar && <ProjectBar />}
-      {TopBar && (
-        <Box sx={{ flexGrow: 1, mx: 2 }}>
-          <TopBar />
-        </Box>
-      )}
+      {TopBar && <TopBar />}
 
       <Stack
         direction="row"

package/src/layouts/common/nav-toggle-button.jsx

@@ -26,7 +26,7 @@ export default function NavToggleButton({ sx, ...other }) {
       onClick={() =>
         settings.onUpdate(
           "themeLayout",
-          settings.themeLayout === "vertical" ? "mini" : "vertical"
+          settings.themeLayout === "vertical" ? "mini" : "vertical",
         )
       }
       sx={{
@@ -34,7 +34,7 @@ export default function NavToggleButton({ sx, ...other }) {
         top: 32,
         position: "fixed",
         left: NAV.W_VERTICAL - 12,
-        zIndex: 0,
+        zIndex: theme.zIndex.appBar + 1,
         border: `dashed 1px ${theme.palette.divider}`,
         ...bgBlur({ opacity: 0.48, color: theme.palette.background.default }),
         "&:hover": {

package/src/lib/Flow/connectors/DynamicConnector.jsx

@@ -1,7 +1,7 @@
-import { Box } from "@mui/material";
-
 import React, { useId, useLayoutEffect, useMemo, useState } from "react";
 
+import { Box } from "@mui/material";
+
 const DynamicConnector = ({
   containerEl,
   parentEl,
@@ -43,41 +43,48 @@ const DynamicConnector = ({
       const cRect = containerEl.getBoundingClientRect();
       const pRect = parentEl.getBoundingClientRect();
 
+      const scaleX = containerEl.offsetWidth
+        ? cRect.width / containerEl.offsetWidth || 1
+        : 1;
+      const scaleY = containerEl.offsetHeight
+        ? cRect.height / containerEl.offsetHeight || 1
+        : 1;
+
       let parentPoint;
       let childPoints = [];
 
       if (isHorizontal) {
         parentPoint = {
-          x: pRect.right - cRect.left,
-          y: pRect.top + pRect.height / 2 - cRect.top,
+          x: (pRect.right - cRect.left) / scaleX,
+          y: (pRect.top + pRect.height / 2 - cRect.top) / scaleY,
         };
 
         childPoints = childEls.map((el) => {
           if (!el) return { x: parentPoint.x + 100, y: parentPoint.y };
           const r = el.getBoundingClientRect();
           return {
-            x: r.left - cRect.left,
-            y: r.top + r.height / 2 - cRect.top,
+            x: (r.left - cRect.left) / scaleX,
+            y: (r.top + r.height / 2 - cRect.top) / scaleY,
           };
         });
       } else {
         parentPoint = {
-          x: pRect.left + pRect.width / 2 - cRect.left,
-          y: pRect.bottom - cRect.top,
+          x: (pRect.left + pRect.width / 2 - cRect.left) / scaleX,
+          y: (pRect.bottom - cRect.top) / scaleY,
         };
 
         childPoints = childEls.map((el) => {
           if (!el) return { x: parentPoint.x, y: parentPoint.y + 100 };
           const r = el.getBoundingClientRect();
           return {
-            x: r.left + r.width / 2 - cRect.left,
-            y: r.top - cRect.top,
+            x: (r.left + r.width / 2 - cRect.left) / scaleX,
+            y: (r.top - cRect.top) / scaleY,
           };
         });
       }
 
       setPoints({ parent: parentPoint, children: childPoints });
-      setDims({ w: cRect.width, h: cRect.height });
+      setDims({ w: cRect.width / scaleX, h: cRect.height / scaleY });
     };
 
     update();
@@ -95,7 +102,7 @@ const DynamicConnector = ({
       gradient: `gradient-${uniqueId}`,
       arrow: `arrow-${uniqueId}`,
     }),
-    [uniqueId]
+    [uniqueId],
   );
 
   const getPath = (from, to) => {

package/src/lib/Flow/core/Flow.jsx

@@ -1,10 +1,10 @@
-import FlowNode from "./FlowNode";
-import { useGraphOperations } from "../hooks/useGraphOperations";
-
 import { Box, alpha } from "@mui/material";
 import React, { useMemo, useState } from "react";
 import { assertLinkedGraph, buildTreeFromLinked } from "../utils/flowUtils";
 
+import FlowNode from "./FlowNode";
+import { useGraphOperations } from "../hooks/useGraphOperations";
+
 export const Flow = ({
   data,
   variant = "simple",
@@ -13,6 +13,7 @@ export const Flow = ({
   editable = false,
   onChange,
   height,
+  initialZoom,
 }) => {
   const [floatingNodes, setFloatingNodes] = useState([]);
 
@@ -65,6 +66,8 @@ export const Flow = ({
   return (
     <Box
       sx={{
+        height,
+        flexShrink: 0,
         backgroundImage: (theme) => `
                           radial-gradient(
                             ${alpha(theme.palette.divider, 0.08)} 1px,
@@ -86,6 +89,7 @@ export const Flow = ({
         onConnect={editable ? handleConnect : undefined}
         floatingNodes={floatingNodes}
         height={height}
+        initialZoom={initialZoom}
       />
     </Box>
   );

package/src/lib/Flow/core/FlowBoard.jsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+
+import FlowBoardItem from "./FlowBoardItem";
+import FlowViewport from "./FlowViewport";
+import { SelectionProvider } from "../selection/SelectionContext";
+import { getBaseStyleForVariant } from "../styles";
+
+export const FlowBoard = ({
+  flows = [],
+  variant = "simple",
+  style,
+  plugin,
+  initialZoom = 1,
+  height = "100vh",
+  gap = 480,
+  onFlowPositionChange,
+}) => {
+  const baseStyle = getBaseStyleForVariant(variant);
+  const selectionColor = baseStyle.selectionColor ?? "#64748b";
+
+  const positionedFlows = useMemo(() => {
+    const count = flows.length;
+    return flows.map((flow, index) => {
+      const fallback = {
+        x: (index - (count - 1) / 2) * gap,
+        y: 0,
+      };
+      return {
+        flow,
+        id: flow?.id ?? index,
+        position: flow?.position ?? fallback,
+      };
+    });
+  }, [flows, gap]);
+
+  const mergedNodesById = useMemo(() => {
+    const merged = {};
+    for (const { flow } of positionedFlows) {
+      if (flow?.nodes) Object.assign(merged, flow.nodes);
+    }
+    return merged;
+  }, [positionedFlows]);
+
+  return (
+    <SelectionProvider>
+      <FlowViewport
+        selectionColor={selectionColor}
+        nodesById={mergedNodesById}
+        variant={variant}
+        style={style}
+        plugin={plugin}
+        height={height}
+        initialZoom={initialZoom}
+      >
+        {positionedFlows.map(({ flow, id, position }) => (
+          <FlowBoardItem
+            key={id}
+            flow={flow}
+            flowId={id}
+            label={flow?.label}
+            divider={flow?.divider}
+            position={position}
+            onPositionChange={
+              onFlowPositionChange
+                ? (pos) => onFlowPositionChange(id, pos)
+                : undefined
+            }
+            variant={flow?.variant ?? variant}
+            style={style}
+            plugin={plugin}
+          />
+        ))}
+      </FlowViewport>
+    </SelectionProvider>
+  );
+};
+
+export default FlowBoard;

package/src/lib/Flow/core/FlowBoardItem.jsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { assertLinkedGraph, buildTreeFromLinked } from "../utils/flowUtils";
+
+import { Box } from "@mui/material";
+import FlowNodeView from "../nodes/FlowNodeView";
+
+const FlowBoardItem = ({
+  flow,
+  flowId,
+  position: initialPosition,
+  onPositionChange,
+  variant,
+  style,
+  plugin,
+  label,
+  divider,
+}) => {
+  const [position, setPosition] = useState(
+    () => initialPosition || { x: 0, y: 0 },
+  );
+
+  useEffect(() => {
+    if (initialPosition) setPosition({ ...initialPosition });
+  }, [initialPosition?.x, initialPosition?.y]);
+
+  const didDragRef = useRef(false);
+
+  const namespacedFlow = useMemo(() => {
+    if (flowId == null) return flow;
+    const prefix = `${flowId}::`;
+    const ns = (id) =>
+      typeof id === "string" && !id.startsWith(prefix) ? `${prefix}${id}` : id;
+
+    const nodes = {};
+    for (const [id, node] of Object.entries(flow?.nodes || {})) {
+      const nextArr = Array.isArray(node.next)
+        ? node.next.map((n) => (typeof n === "string" ? ns(n) : n))
+        : node.next != null
+          ? ns(node.next)
+          : undefined;
+      nodes[ns(id)] = {
+        ...node,
+        id: ns(id),
+        next: nextArr,
+        previous: node.previous != null ? ns(node.previous) : undefined,
+      };
+    }
+    const roots = Array.isArray(flow?.roots) ? flow.roots.map(ns) : flow?.roots;
+    return { ...flow, nodes, roots };
+  }, [flow, flowId]);
+
+  const { nodesById, roots } = useMemo(
+    () => assertLinkedGraph(namespacedFlow),
+    [namespacedFlow],
+  );
+
+  const treesData = useMemo(() => {
+    if (!roots?.length) return [];
+    return roots
+      .map((rootId) => buildTreeFromLinked(rootId, nodesById))
+      .filter(Boolean);
+  }, [nodesById, roots]);
+
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) return;
+    if (e.target?.closest?.(".MuiCard-root") || e.target?.closest?.("button"))
+      return;
+
+    e.stopPropagation();
+    didDragRef.current = false;
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startPosition = { ...position };
+    let lastPosition = startPosition;
+
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      if (!didDragRef.current && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+        didDragRef.current = true;
+      }
+      lastPosition = { x: startPosition.x + dx, y: startPosition.y + dy };
+      setPosition(lastPosition);
+    };
+
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      if (didDragRef.current) onPositionChange?.(lastPosition);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  if (!treesData.length) return null;
+
+  return (
+    <Box
+      data-flow-id={label}
+      onMouseDown={handleMouseDown}
+      sx={{
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        cursor: "grab",
+        "&:active": { cursor: "grabbing" },
+      }}
+    >
+      {label != null && (
+        <Box
+          sx={{
+            position: "absolute",
+            top: -28,
+            left: 0,
+            fontSize: 12,
+            fontWeight: 600,
+            opacity: 0.6,
+            pointerEvents: "none",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {label}
+        </Box>
+      )}
+      {divider != null && <Box sx={{ width: "100%", mb: 1 }}>{divider}</Box>}
+      <Box sx={{ display: "flex", gap: 4, alignItems: "flex-start" }}>
+        {treesData.map((tree, idx) => (
+          <FlowNodeView
+            key={tree.id || `tree-${idx}`}
+            node={tree}
+            variant={variant}
+            style={style}
+            plugin={plugin}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default FlowBoardItem;

package/src/lib/Flow/core/FlowNode.jsx

@@ -17,6 +17,7 @@ const FlowNode = ({
   plugin,
   node,
   height,
+  initialZoom,
   ...props
 }) => {
   if (!isRoot) {
@@ -50,6 +51,7 @@ const FlowNode = ({
         style={style}
         plugin={plugin}
         height={height}
+        initialZoom={initialZoom}
       >
         {node && (
           <FlowNodeView

package/src/lib/Flow/core/FlowViewport.jsx

@@ -17,13 +17,14 @@ const FlowViewport = ({
   style,
   plugin,
   height = "100vh",
+  initialZoom = 1,
   sx = {},
   ...rest
 }) => {
   const clampZoom = (zoom) => Math.min(2.5, Math.max(0.25, zoom));
 
   const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
+  const [zoom, setZoom] = useState(initialZoom);
   const [isDragging, setIsDragging] = useState(false);
   const [selectionBox, setSelectionBox] = useState(null);
   const [shouldCenter, setShouldCenter] = useState(true);
@@ -291,7 +292,7 @@ const FlowViewport = ({
       onContextMenu={(e) => e.preventDefault()}
       sx={{
         width: "100%",
-        height: "100vh",
+        height: height,
         overflow: "hidden",
         bgcolor: "none",
         cursor: isDragging ? "grabbing" : "default",

package/src/lib/Flow/index.js

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

package/src/lib/index.js

@@ -23,7 +23,7 @@ export { default as useTable } from "./useTable/useTable";
 export { default as useChart } from "./useChart/useChart";
 
 export { default as Flow } from "./Flow/core/Flow";
-
+export { default as FlowBoard } from "./Flow/core/FlowBoard";
 export {
   HeaderCard,
   MediaAvatarCard,