@hectasquare/medusa-plugin-category-tree 1.0.2 → 1.0.6

package/src/admin/components/category-tree/category-tree-canvas.tsx

@@ -228,6 +228,9 @@ const CanvasInner: React.FC = () => {
           source: cat.parent_category_id,
           target: cat.id,
           type: "smoothstep",
+          data: {
+            branchColor: cat.branch_color,
+          },
           style: {
             stroke: cat.branch_color || "#64748b",
             strokeWidth: 2,
@@ -340,8 +343,14 @@ const CanvasInner: React.FC = () => {
   }
 
   return (
-    <div className="relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]">
-      <div className="absolute top-4 left-1/2 -translate-x-1/2 z-30 pointer-events-none">
+      <div className="relative w-full h-[calc(100vh-56px)] overflow-hidden bg-[#fafafa] dark:bg-[#09090b]">
+      <div
+        className={`absolute top-4 left-1/2 -translate-x-1/2 z-10 transition-all duration-200 pointer-events-none ${
+          editDrawerOpen || createDrawerOpen
+            ? "opacity-0 -translate-y-6 scale-95 pointer-events-none"
+            : "opacity-100"
+        }`}
+      >
         <CanvasDock
           salesChannels={salesChannels}
           selectedStorefront={selectedStorefront}

package/src/admin/components/category-tree/custom-edge.tsx

@@ -11,10 +11,13 @@ export const CustomSmoothStepEdge = memo((props: EdgeProps) => {
     sourcePosition,
     targetPosition,
     style = {},
+    data,
     markerEnd,
     selected,
   } = props
 
+  const branchColor = (data as any)?.branchColor || (style as any)?.stroke || "#64748b"
+
   const [edgePath] = getSmoothStepPath({
     sourceX,
     sourceY,
@@ -41,8 +44,9 @@ export const CustomSmoothStepEdge = memo((props: EdgeProps) => {
         markerEnd={markerEnd}
         style={{
           ...style,
-          stroke: selected ? "var(--bg-interactive, #3b82f6)" : "var(--border-strong, #cbd5e1)",
-          strokeWidth: selected ? 2.5 : 1.75,
+          stroke: selected ? "#2563eb" : branchColor,
+          strokeWidth: selected ? 2.75 : 2,
+          strokeOpacity: 0.95,
           transition: "stroke 0.2s, stroke-width 0.2s",
         }}
       />