@canmingir/link 1.2.44 → 1.2.48

package/package.json

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

package/src/components/logo/logo.jsx

@@ -1,18 +1,18 @@
+import React, { useEffect, useRef, 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";
 
-import React, { useEffect, useRef, useState } from "react";
-
 const resolvedDimensions = {};
 
 const Logo = ({ disabledLink = false, sx, maxSize = 65, isLogin = false }) => {
   const { icon } = config().template.login;
-  const key = `${icon}`;
+  const key = `${icon}_${maxSize}_${isLogin}`;
 
   const [dimensions, setDimensions] = useState(
-    resolvedDimensions[key] || { width: maxSize, height: maxSize }
+    resolvedDimensions[key] || { width: maxSize, height: maxSize },
   );
 
   useEffect(() => {

package/src/lib/DevTool/DevTool.jsx

@@ -0,0 +1,117 @@
+import { Box, Divider } from "@mui/material";
+
+import React from "react";
+
+const DevTool = ({
+  width = 62,
+  height = "auto",
+  top = "50%",
+  open = true,
+  content,
+  header,
+  footer,
+  sx,
+}) => {
+  if (!open) return null;
+
+  return (
+    <Box
+      component="aside"
+      sx={{
+        position: "fixed",
+        top,
+        right: 0,
+        transform: "translateY(-50%)",
+        width,
+        height,
+        bgcolor: (theme) =>
+          theme.palette.mode === "dark"
+            ? "background.paper"
+            : "rgba(255, 255, 255, 0.85)",
+        backdropFilter: "blur(16px) saturate(180%)",
+        WebkitBackdropFilter: "blur(16px) saturate(180%)",
+        border: (theme) =>
+          `1px solid ${
+            theme.palette.mode === "dark"
+              ? "rgba(255,255,255,0.07)"
+              : "rgba(0,0,0,0.07)"
+          }`,
+        borderRadius: "4px",
+        boxShadow: (theme) =>
+          theme.palette.mode === "dark"
+            ? "0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)"
+            : "0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04)",
+        zIndex: (theme) => theme.zIndex.modal + 3,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        py: 1.5,
+        overflowY: "hidden",
+        overflowX: "hidden",
+        "&::-webkit-scrollbar": { display: "none" },
+        scrollbarWidth: "none",
+        ...(sx || {}),
+      }}
+    >
+      {header && (
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            flexShrink: 0,
+          }}
+        >
+          {header}
+        </Box>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          overflowY: "auto",
+          overflowX: "hidden",
+          "&::-webkit-scrollbar": { display: "none" },
+          scrollbarWidth: "none",
+        }}
+      >
+        {content}
+      </Box>
+
+      {footer && (
+        <>
+          <Divider
+            flexItem
+            sx={{
+              borderColor: (theme) =>
+                theme.palette.mode === "dark"
+                  ? "rgba(255,255,255,0.07)"
+                  : "rgba(0,0,0,0.07)",
+              width: "100%",
+              flexShrink: 0,
+            }}
+          />
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              flexShrink: 0,
+              pt: 0.5,
+            }}
+          >
+            {footer}
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default DevTool;

package/src/lib/DevTool/index.js

@@ -0,0 +1 @@
+export { default } from "./DevTool";

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

@@ -8,7 +8,7 @@ const DraggableNode = ({
   registerRef,
   onDrag,
   nodeId,
-  selectionColor = "#64748b",
+  selectionColor = "#373739",
   initialPosition,
   onConnect,
 }) => {
@@ -164,20 +164,55 @@ const DraggableNode = ({
         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}
+      {selected &&
+        selectedIds.size > 1 &&
+        [
+          {
+            top: -10,
+            left: -6,
+            borderTop: 2,
+            borderLeft: 2,
+            color: selectionColor,
+          },
+          {
+            top: -8,
+            right: -12,
+            borderTop: 2,
+            borderRight: 2,
+            color: selectionColor,
+          },
+          {
+            bottom: -14,
+            left: -6,
+            borderBottom: 2,
+            borderLeft: 2,
+            color: selectionColor,
+          },
+          {
+            bottom: -16,
+            right: -12,
+            borderBottom: 2,
+            borderRight: 2,
+            color: selectionColor,
+          },
+        ].map((pos, i) => (
+          <Box
+            key={i}
+            sx={{
+              position: "absolute",
+              width: 10,
+              height: 10,
+              borderStyle: "solid",
+              borderColor: selectionColor,
+              borderWidth: 0,
+              pointerEvents: "none",
+              ...pos,
+            }}
+          />
+        ))}
     </Box>
   );
 };

package/src/lib/Flow/selection/SelectionOverlay.jsx

@@ -1,6 +1,49 @@
 import { Box } from "@mui/material";
 import { hexToRgba } from "../utils/flowUtils";
 
+const HANDLE_SIZE = 10;
+const HANDLE_THICKNESS = 2;
+
+const cornerStyles = (placement) => {
+  const base = {
+    position: "absolute",
+    width: HANDLE_SIZE,
+    height: HANDLE_SIZE,
+    borderColor: "inherit",
+    borderStyle: "solid",
+    borderWidth: 0,
+  };
+
+  const map = {
+    topLeft: {
+      top: 0,
+      left: 0,
+      borderTopWidth: HANDLE_THICKNESS,
+      borderLeftWidth: HANDLE_THICKNESS,
+    },
+    topRight: {
+      top: 0,
+      right: 0,
+      borderTopWidth: HANDLE_THICKNESS,
+      borderRightWidth: HANDLE_THICKNESS,
+    },
+    bottomLeft: {
+      bottom: 0,
+      left: 0,
+      borderBottomWidth: HANDLE_THICKNESS,
+      borderLeftWidth: HANDLE_THICKNESS,
+    },
+    bottomRight: {
+      bottom: 0,
+      right: 0,
+      borderBottomWidth: HANDLE_THICKNESS,
+      borderRightWidth: HANDLE_THICKNESS,
+    },
+  };
+
+  return { ...base, ...map[placement] };
+};
+
 const SelectionOverlay = ({ box, selectionColor = "#64748b" }) => {
   if (!box) return null;
 
@@ -18,13 +61,17 @@ const SelectionOverlay = ({ box, selectionColor = "#64748b" }) => {
         top,
         width,
         height,
-        border: `2px solid ${selectionColor}`,
-        backgroundColor: hexToRgba(selectionColor, 0.1),
+        backgroundColor: hexToRgba(selectionColor, 0.08),
         pointerEvents: "none",
         zIndex: 9999,
         borderRadius: "4px",
+        color: selectionColor,
       }}
-    />
+    >
+      {["topLeft", "topRight", "bottomLeft", "bottomRight"].map((placement) => (
+        <Box key={placement} sx={cornerStyles(placement)} />
+      ))}
+    </Box>
   );
 };
 

package/src/lib/index.js

@@ -55,3 +55,4 @@ export {
   GlassCardContent,
   GlassCardActions,
 } from "./GlassCard/GlassCard";
+export { default as DevTool } from "./DevTool";