@canmingir/link 1.2.54 → 1.2.55

package/package.json

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

package/src/components/logo/logo.jsx

@@ -1,66 +1,30 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
 
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { RouterLink } from "../../routes/components";
 import config from "../../config/config";
 
-const resolvedDimensions = {};
-
 const Logo = ({ disabledLink = false, sx, maxSize = 65, isLogin = false }) => {
   const { icon } = config().template.login;
-  const key = `${icon}_${maxSize}_${isLogin}`;
-
-  const [dimensions, setDimensions] = useState(
-    resolvedDimensions[key] || { width: maxSize, height: maxSize },
-  );
-
-  useEffect(() => {
-    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 {
-          const aspectRatio = naturalWidth / naturalHeight;
-          if (naturalWidth >= naturalHeight) {
-            newDimensions = {
-              width: maxSize,
-              height: Math.round(maxSize / aspectRatio),
-            };
-          } else {
-            newDimensions = {
-              width: Math.round(maxSize * aspectRatio),
-              height: maxSize,
-            };
-          }
-        }
-      } else {
-        newDimensions = { width: naturalWidth, height: naturalHeight };
-      }
-
-      resolvedDimensions[key] = newDimensions;
-      setDimensions(newDimensions);
-    };
-    img.src = icon;
-  }, [icon, maxSize, key]);
+  const [isSquare, setIsSquare] = useState(false);
+  const squareCap = isSquare && !isLogin ? 40 : maxSize;
 
   const logo = (
     <Box
       component="img"
       src={icon}
+      onLoad={(e) => {
+        const { naturalWidth, naturalHeight } = e.currentTarget;
+        setIsSquare(naturalWidth === naturalHeight);
+      }}
       sx={{
-        width: dimensions.width,
-        height: dimensions.height,
+        maxWidth: squareCap,
+        maxHeight: squareCap,
+        width: "auto",
+        height: "auto",
+        objectFit: "contain",
         cursor: "pointer",
         ...sx,
       }}

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

@@ -14,6 +14,7 @@ export const Flow = ({
   onChange,
   height,
   initialZoom,
+  centered = false,
 }) => {
   const [floatingNodes, setFloatingNodes] = useState([]);
 
@@ -90,6 +91,7 @@ export const Flow = ({
         floatingNodes={floatingNodes}
         height={height}
         initialZoom={initialZoom}
+        centered={centered}
       />
     </Box>
   );

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

@@ -18,6 +18,7 @@ const FlowNode = ({
   node,
   height,
   initialZoom,
+  centered,
   ...props
 }) => {
   if (!isRoot) {
@@ -52,6 +53,7 @@ const FlowNode = ({
         plugin={plugin}
         height={height}
         initialZoom={initialZoom}
+        centered={centered}
       >
         {node && (
           <FlowNodeView

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

@@ -18,6 +18,7 @@ const FlowViewport = ({
   plugin,
   height = "100vh",
   initialZoom = 1,
+  centered = false,
   sx = {},
   ...rest
 }) => {
@@ -45,6 +46,8 @@ const FlowViewport = ({
   } = useSelection();
 
   useEffect(() => {
+    if (centered) return;
+
     const container = containerRef.current;
     const inner = innerRef.current;
     if (!container || !inner) return;
@@ -64,7 +67,7 @@ const FlowViewport = ({
     observer.observe(container);
 
     return () => observer.disconnect();
-  }, []);
+  }, [centered]);
 
   useEffect(() => {
     const handleMouseMove = (e) => {
@@ -310,11 +313,11 @@ const FlowViewport = ({
           height: height,
           display: "flex",
           alignItems: "center",
-          justifyContent: shouldCenter ? "center" : "flex-start",
+          justifyContent: centered || shouldCenter ? "center" : "flex-start",
           transition: isDragging ? "none" : "transform 0.1s ease-out",
           pointerEvents: "auto",
           position: "relative",
-          pl: variant === "horizontal" ? 4 : 0,
+          pl: centered ? 0 : variant === "horizontal" ? 4 : 0,
         }}
       >
         {children}