@canmingir/link 1.2.38 → 1.2.40

package/package.json

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

package/src/components/logo/logo.jsx

@@ -3,36 +3,56 @@ import Link from "@mui/material/Link";
 import { RouterLink } from "../../routes/components";
 import config from "../../config/config";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-const Logo = ({ disabledLink = false, sx, maxSize = 99 }) => {
+const resolvedDimensions = {};
+
+const Logo = ({ disabledLink = false, sx, maxSize = 65, isLogin = false }) => {
   const { icon } = config().template.login;
-  const [dimensions, setDimensions] = useState({
-    width: maxSize,
-    height: maxSize,
-  });
+  const key = `${icon}`;
+
+  const [dimensions, setDimensions] = useState(
+    resolvedDimensions[key] || { width: maxSize, height: maxSize }
+  );
 
   useEffect(() => {
-    if (icon) {
-      const img = new Image();
-      img.onload = () => {
-        const { naturalWidth, naturalHeight } = img;
-
-        if (naturalWidth > maxSize || naturalHeight > maxSize) {
-          setDimensions({
-            width: 40,
-            height: 40,
-          });
+    if (!icon || resolvedDimensions[key]) return;
+
+    const img = new Image();
+    img.onload = () => {
+      const { naturalWidth, naturalHeight } = img;
+      const isSquare = naturalWidth === naturalHeight;
+      let newDimensions;
+
+      if (naturalWidth > maxSize || naturalHeight > maxSize) {
+        if (isSquare) {
+          newDimensions = {
+            width: isLogin ? maxSize : 40,
+            height: isLogin ? maxSize : 40,
+          };
         } else {
-          setDimensions({
-            width: naturalWidth,
-            height: naturalHeight,
-          });
+          const aspectRatio = naturalWidth / naturalHeight;
+          if (naturalWidth >= naturalHeight) {
+            newDimensions = {
+              width: maxSize,
+              height: Math.round(maxSize / aspectRatio),
+            };
+          } else {
+            newDimensions = {
+              width: Math.round(maxSize * aspectRatio),
+              height: maxSize,
+            };
+          }
         }
-      };
-      img.src = icon;
-    }
-  }, [icon, maxSize]);
+      } else {
+        newDimensions = { width: naturalWidth, height: naturalHeight };
+      }
+
+      resolvedDimensions[key] = newDimensions;
+      setDimensions(newDimensions);
+    };
+    img.src = icon;
+  }, [icon, maxSize, key]);
 
   const logo = (
     <Box
@@ -47,9 +67,7 @@ const Logo = ({ disabledLink = false, sx, maxSize = 99 }) => {
     />
   );
 
-  if (disabledLink) {
-    return logo;
-  }
+  if (disabledLink) return logo;
 
   return (
     <Link component={RouterLink} href="/" sx={{ display: "contents" }}>

package/src/layouts/DashboardLayout/nav-vertical.jsx

@@ -104,7 +104,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
             mt: 3,
           }}
         >
-          <Logo sx={{ ml: 4, mb: 1 }} />
+          <Logo sx={{ ml: 4 }} />
           <Typography
             sx={{
               ml: 1,
@@ -130,8 +130,9 @@ export default function NavVertical({ openNav, onCloseNav }) {
           marginBottom: lgUp ? 3 : 0,
           position: lgUp ? "static" : "fixed",
           bottom: lgUp ? "auto" : 66,
-          width: "100%"
-        }}>
+          width: "100%",
+        }}
+      >
         {actionButtons &&
           actionButtons?.map((Action, index) => (
             <Box key={index} component={Action}></Box>
@@ -190,7 +191,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
               sx: {
                 width: NAV.W_VERTICAL,
               },
-            }
+            },
           }}
         >
           {renderContent}

package/src/layouts/auth/modern.jsx

@@ -46,11 +46,10 @@ export default function AuthModernLayout() {
         }}
       >
         <Logo
+          isLogin={true}
           maxSize={140}
           sx={{
             mb: 2,
-            width: 72,
-            height: 72,
             alignSelf: "center",
           }}
         />

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

@@ -58,7 +58,7 @@ export const Flow = ({
       .filter(Boolean);
 
     return children.length > 0
-      ? { id: "__root__", label: "Start", children }
+      ? { id: "__root__", label: "Start", virtual: true, children }
       : null;
   }, [nodesById, roots]);
 

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

@@ -26,10 +26,12 @@ const FlowViewport = ({
   const [zoom, setZoom] = useState(1);
   const [isDragging, setIsDragging] = useState(false);
   const [selectionBox, setSelectionBox] = useState(null);
+  const [shouldCenter, setShouldCenter] = useState(true);
 
   const containerRef = useRef(null);
   const selectionBoxRef = useRef(null);
   const mousePositionRef = useRef({ x: 0, y: 0 });
+  const innerRef = useRef(null);
 
   const {
     clearSelection,
@@ -40,6 +42,28 @@ const FlowViewport = ({
     selectedIds,
   } = useSelection();
 
+  useEffect(() => {
+    const container = containerRef.current;
+    const inner = innerRef.current;
+    if (!container || !inner) return;
+
+    const observer = new ResizeObserver(() => {
+      const contentWidth = inner.scrollWidth;
+      const contentHeight = inner.scrollHeight;
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+
+      const exceeds =
+        contentWidth > containerWidth || contentHeight > containerHeight;
+      setShouldCenter(!exceeds);
+    });
+
+    observer.observe(inner);
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const handleMouseMove = (e) => {
       mousePositionRef.current = { x: e.clientX, y: e.clientY };
@@ -241,7 +265,7 @@ const FlowViewport = ({
       ref={containerRef}
       onMouseDown={handleViewportMouseDown}
       sx={{
-        width: "100vw",
+        width: "100%",
         height: "100vh",
         overflow: "hidden",
         bgcolor: "none",
@@ -252,6 +276,7 @@ const FlowViewport = ({
     >
       <SelectionOverlay box={selectionBox} selectionColor={selectionColor} />
       <Box
+        ref={innerRef}
         sx={{
           transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
           transformOrigin: "center center",
@@ -259,7 +284,7 @@ const FlowViewport = ({
           height: height,
           display: "flex",
           alignItems: "center",
-          justifyContent: variant === "horizontal" ? "flex-start" : "center",
+          justifyContent: shouldCenter ? "center" : "flex-start",
           transition: isDragging ? "none" : "transform 0.1s ease-out",
           pointerEvents: "auto",
           position: "relative",

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

@@ -20,6 +20,7 @@ const FlowNodeView = ({
   onConnect,
 }) => {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+  const isVirtualRoot = !!node.virtual;
 
   const {
     baseStyle,
@@ -146,6 +147,36 @@ const FlowNodeView = ({
     );
   };
 
+  if (isVirtualRoot) {
+    return (
+      <Box
+        ref={containerRef}
+        sx={{
+          display: "flex",
+          flexDirection: isHorizontal ? "row" : "column",
+          alignItems: "flex-end",
+          gap,
+          position: "relative",
+        }}
+      >
+        {node.children.map((child) => (
+          <FlowNode
+            key={child.id}
+            node={child}
+            type={type}
+            variant={variant}
+            style={style}
+            plugin={plugin}
+            registerRef={(el) => (childRefs.current[child.id] = el)}
+            onDrag={() => setConnectorTick((t) => t + 1)}
+            isRoot={false}
+            onConnect={onConnect}
+          />
+        ))}
+      </Box>
+    );
+  }
+
   return (
     <Box
       ref={containerRef}