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

package/src/admin/components/category-tree/lib/layout-engine.ts

@@ -1,4 +1,3 @@
-import dagre from "@dagrejs/dagre"
 import { Node, Edge, Position } from "@xyflow/react"
 
 export const CARD_WIDTH = 270
@@ -10,47 +9,175 @@ export interface LayoutOptions {
   rankSep?: number
 }
 
-export function computeDagreLayout(
+interface TreeLayoutNode {
+  id: string
+  node: Node
+  children: TreeLayoutNode[]
+  depth: number
+  span: number // width in TB, height in LR
+  primaryCoord: number // x in TB, y in LR
+  secondaryCoord: number // y in TB, x in LR
+}
+
+/**
+ * AAA Clustered Hierarchical Tree Layout (Buchheim/Walker style)
+ * - Guarantees each parent is positioned at the exact midpoint/center of its children
+ * - Guarantees subtrees never overlap and stay tightly clustered
+ * - Completely eliminates long spanning cross-canvas threads
+ * - Sibling order is preserved strictly according to category rank
+ */
+export function computeTreeLayout(
   nodes: Node[],
   edges: Edge[],
   options: LayoutOptions = {}
 ): { nodes: Node[]; edges: Edge[] } {
+  if (nodes.length === 0) return { nodes: [], edges: [] }
+
   const direction = options.direction || "TB"
   const isTB = direction === "TB"
 
-  const g = new dagre.graphlib.Graph()
-  g.setDefaultEdgeLabel(() => ({}))
+  const nodeSep = options.nodeSep ?? (isTB ? 40 : 28)
+  const rankSep = options.rankSep ?? (isTB ? 70 : 80)
+  const treeGap = isTB ? 80 : 64
 
-  g.setGraph({
-    rankdir: direction,
-    nodesep: options.nodeSep ?? (isTB ? 45 : 32),
-    ranksep: options.rankSep ?? (isTB ? 65 : 75),
-    align: "UL",
-    ranker: "network-simplex",
-  })
+  const nodeMap = new Map<string, Node>(nodes.map((n) => [n.id, n]))
+  const childrenMap = new Map<string, string[]>()
+  const parentMap = new Map<string, string>()
 
-  nodes.forEach((node) => {
-    g.setNode(node.id, { width: CARD_WIDTH, height: CARD_HEIGHT })
+  edges.forEach((edge) => {
+    if (nodeMap.has(edge.source) && nodeMap.has(edge.target)) {
+      const list = childrenMap.get(edge.source) || []
+      list.push(edge.target)
+      childrenMap.set(edge.source, list)
+      parentMap.set(edge.target, edge.source)
+    }
   })
 
-  edges.forEach((edge) => {
-    g.setEdge(edge.source, edge.target)
+  // Identify roots (nodes with no incoming edge in the visible graph)
+  const rootNodes = nodes.filter((n) => !parentMap.has(n.id))
+
+  // Sort children by their category rank
+  const getRank = (id: string): number => {
+    const raw = (nodeMap.get(id)?.data as any)?.category?.rank
+    return typeof raw === "number" ? raw : 0
+  }
+
+  function buildTree(id: string, depth: number): TreeLayoutNode {
+    const rawNode = nodeMap.get(id)!
+    const childIds = (childrenMap.get(id) || []).sort(
+      (a, b) => getRank(a) - getRank(b) || a.localeCompare(b)
+    )
+
+    const children = childIds.map((childId) => buildTree(childId, depth + 1))
+
+    return {
+      id,
+      node: rawNode,
+      children,
+      depth,
+      span: 0,
+      primaryCoord: 0,
+      secondaryCoord: 0,
+    }
+  }
+
+  // 1. Post-order pass: Compute subtree span (width in TB, height in LR)
+  function computeSpan(treeNode: TreeLayoutNode): number {
+    const baseSpan = isTB ? CARD_WIDTH : CARD_HEIGHT
+    if (treeNode.children.length === 0) {
+      treeNode.span = baseSpan
+      return baseSpan
+    }
+
+    let childrenSpanTotal = 0
+    treeNode.children.forEach((child, index) => {
+      const childSpan = computeSpan(child)
+      childrenSpanTotal += childSpan + (index > 0 ? nodeSep : 0)
+    })
+
+    treeNode.span = Math.max(baseSpan, childrenSpanTotal)
+    return treeNode.span
+  }
+
+  // 2. Pre-order pass: Position nodes
+  function assignPositions(
+    treeNode: TreeLayoutNode,
+    startOffset: number,
+    depth: number
+  ) {
+    const baseSpan = isTB ? CARD_WIDTH : CARD_HEIGHT
+    const baseSecondary = isTB ? CARD_HEIGHT : CARD_WIDTH
+
+    treeNode.secondaryCoord = depth * (baseSecondary + rankSep)
+
+    if (treeNode.children.length === 0) {
+      treeNode.primaryCoord = startOffset + (treeNode.span - baseSpan) / 2
+      return
+    }
+
+    let currentOffset = startOffset
+    treeNode.children.forEach((child) => {
+      assignPositions(child, currentOffset, depth + 1)
+      currentOffset += child.span + nodeSep
+    })
+
+    // Center parent directly between first and last child
+    const firstChild = treeNode.children[0]
+    const lastChild = treeNode.children[treeNode.children.length - 1]
+    const centerOfChildren = (firstChild.primaryCoord + lastChild.primaryCoord) / 2
+
+    treeNode.primaryCoord = centerOfChildren
+  }
+
+  // Sort roots by their rank
+  rootNodes.sort((a, b) => getRank(a.id) - getRank(b.id) || a.id.localeCompare(b.id))
+
+  const positionedNodes: Node[] = []
+  let globalOffset = 0
+
+  rootNodes.forEach((root) => {
+    const tree = buildTree(root.id, 0)
+    computeSpan(tree)
+    assignPositions(tree, globalOffset, 0)
+    globalOffset += tree.span + treeGap
+
+    // Flatten tree
+    function collect(node: TreeLayoutNode) {
+      const x = isTB ? node.primaryCoord : node.secondaryCoord
+      const y = isTB ? node.secondaryCoord : node.primaryCoord
+
+      positionedNodes.push({
+        ...node.node,
+        targetPosition: isTB ? Position.Top : Position.Left,
+        sourcePosition: isTB ? Position.Bottom : Position.Right,
+        position: { x, y },
+      })
+
+      node.children.forEach(collect)
+    }
+
+    collect(tree)
   })
 
-  dagre.layout(g)
+  // Style edges to match source branch color if available
+  const styledEdges: Edge[] = edges.map((e) => {
+    const sourceNode = nodeMap.get(e.source)
+    const branchColor = (sourceNode?.data as any)?.branchColor || "#64748b"
 
-  const layoutedNodes: Node[] = nodes.map((node) => {
-    const pos = g.node(node.id)
     return {
-      ...node,
-      targetPosition: isTB ? Position.Top : Position.Left,
-      sourcePosition: isTB ? Position.Bottom : Position.Right,
-      position: {
-        x: pos.x - CARD_WIDTH / 2,
-        y: pos.y - CARD_HEIGHT / 2,
+      ...e,
+      style: {
+        stroke: branchColor,
+        strokeWidth: 2,
+        opacity: 0.85,
+        ...e.style,
       },
     }
   })
 
-  return { nodes: layoutedNodes, edges }
+  return { nodes: positionedNodes, edges: styledEdges }
 }
+
+// Keep computeDagreLayout as alias to guarantee backwards compatibility
+export const computeDagreLayout = computeTreeLayout
+

package/src/admin/components/category-tree/lib/tree-state.ts

@@ -165,3 +165,115 @@ export function computeMoves(
 
   return moves
 }
+
+export const BRANCH_PALETTE: { name: string; hex: string }[] = [
+  { name: "Emerald", hex: "#10b981" },
+  { name: "Indigo", hex: "#6366f1" },
+  { name: "Amber", hex: "#f59e0b" },
+  { name: "Rose", hex: "#f43f5e" },
+  { name: "Cyan", hex: "#06b6d4" },
+  { name: "Violet", hex: "#8b5cf6" },
+  { name: "Pink", hex: "#ec4899" },
+  { name: "Lime", hex: "#84cc16" },
+  { name: "Sky", hex: "#0ea5e9" },
+  { name: "Orange", hex: "#f97316" },
+  { name: "Teal", hex: "#14b8a6" },
+  { name: "Purple", hex: "#a855f7" },
+]
+
+/**
+ * Assigns a deterministic branch color to each category based on its top-level root ancestor.
+ * All descendants in a root branch share the exact same branch color.
+ */
+export function computeBranchColors(
+  categories: CategoryTreeNode[]
+): Map<string, string> {
+  const catMap = new Map(categories.map((c) => [c.id, c]))
+  const rootMap = new Map<string, string>()
+
+  function findRootId(id: string, visited: Set<string>): string {
+    if (rootMap.has(id)) return rootMap.get(id)!
+    if (visited.has(id)) return id
+    visited.add(id)
+
+    const cat = catMap.get(id)
+    if (!cat || !cat.parent_category_id || !catMap.has(cat.parent_category_id)) {
+      rootMap.set(id, id)
+      return id
+    }
+
+    const root = findRootId(cat.parent_category_id, visited)
+    rootMap.set(id, root)
+    return root
+  }
+
+  for (const c of categories) {
+    findRootId(c.id, new Set())
+  }
+
+  const rootIds = Array.from(
+    new Set(categories.filter((c) => !c.parent_category_id).map((c) => c.id))
+  ).sort((a, b) => {
+    const catA = catMap.get(a)
+    const catB = catMap.get(b)
+    return (catA?.rank ?? 0) - (catB?.rank ?? 0) || a.localeCompare(b)
+  })
+
+  const rootColorMap = new Map<string, string>()
+  rootIds.forEach((id, index) => {
+    rootColorMap.set(id, BRANCH_PALETTE[index % BRANCH_PALETTE.length].hex)
+  })
+
+  const result = new Map<string, string>()
+  for (const c of categories) {
+    const rootId = rootMap.get(c.id) || c.id
+    const color = rootColorMap.get(rootId) || BRANCH_PALETTE[0].hex
+    result.set(c.id, color)
+  }
+
+  return result
+}
+
+/**
+ * Swaps sibling ranking (up or down). Modifies rank property among siblings
+ * and returns a new categories array ready for preview and commit.
+ */
+export function moveSiblingRank(
+  categories: CategoryTreeNode[],
+  targetId: string,
+  direction: "up" | "down"
+): CategoryTreeNode[] {
+  const target = categories.find((c) => c.id === targetId)
+  if (!target) return categories
+
+  const parentId = target.parent_category_id || null
+  const siblings = categories
+    .filter((c) => (c.parent_category_id || null) === parentId)
+    .sort((a, b) => a.rank - b.rank)
+
+  const currentIndex = siblings.findIndex((s) => s.id === targetId)
+  if (currentIndex === -1) return categories
+
+  const targetIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1
+  if (targetIndex < 0 || targetIndex >= siblings.length) return categories
+
+  const adjacent = siblings[targetIndex]
+  // Normalize ranks if they are identical or uninitialized
+  const updatedRanks = new Map<string, number>()
+  siblings.forEach((s, idx) => {
+    updatedRanks.set(s.id, idx * 10)
+  })
+
+  // Swap target and adjacent
+  const targetNewRank = targetIndex * 10
+  const adjacentNewRank = currentIndex * 10
+  updatedRanks.set(target.id, targetNewRank)
+  updatedRanks.set(adjacent.id, adjacentNewRank)
+
+  return categories.map((c) => {
+    if (updatedRanks.has(c.id)) {
+      return { ...c, rank: updatedRanks.get(c.id)! }
+    }
+    return c
+  })
+}

package/src/admin/components/category-tree/tier-bars.tsx

@@ -2,28 +2,35 @@ import React from "react"
 
 export interface TierBarsProps {
   tier: number
+  color?: string
 }
 
 /**
- * Renders N vertical black bars on the left edge of each category card,
- * separated by crisp white spacing, providing an immediate tactile hierarchy indicator:
+ * Renders N vertical colored bars on the left edge of each category card,
+ * providing an immediate tactile hierarchy indicator:
  * Tier 1 = 1 bar (Root/Main)
  * Tier 2 = 2 bars (Sub)
  * Tier 3 = 3 bars (Sub-Sub)
  * Tier N = N bars
+ * Bar color matches the branch lineage for instant visual identification.
  */
-export const TierBars: React.FC<TierBarsProps> = ({ tier }) => {
+export const TierBars: React.FC<TierBarsProps> = ({ tier, color }) => {
   const count = Math.max(1, tier)
+  const barColor = color || "var(--fg-interactive, #3b82f6)"
 
   return (
     <div
       className="flex h-full py-2 pl-2 pr-1.5 gap-[2.5px] items-stretch flex-shrink-0 select-none bg-neutral-50 dark:bg-neutral-900/60 rounded-l-xl border-r border-ui-border-base/50"
-      title={`Tier ${tier} (${tier === 1 ? "Main Root Category" : tier === 2 ? "Subcategory" : "Sub-subcategory"})`}
+      title={`Tier ${tier} (${tier === 1 ? "Main Root Category" : tier === 2 ? "Subcategory" : "Sub-subcategory"}) - Branch Color: ${barColor}`}
     >
       {Array.from({ length: count }).map((_, index) => (
         <span
           key={index}
-          className="w-[3px] bg-neutral-950 dark:bg-neutral-100 rounded-full shadow-sm"
+          className="w-[3.5px] rounded-full shadow-xs transition-colors"
+          style={{
+            backgroundColor: barColor,
+            boxShadow: `0 0 4px ${barColor}40`,
+          }}
         />
       ))}
     </div>

package/src/admin/components/category-tree/types.ts

@@ -20,6 +20,7 @@ export type CategoryTreeNode = {
   sibling_rank: number
   children_count: number
   has_children: boolean
+  branch_color?: string
 }
 
 export type CategoryTreeResponse = {
@@ -39,6 +40,7 @@ export type CategoryNodeData = {
   tier: number
   siblingRank: number
   superscriptRank: string
+  branchColor?: string
   salesChannels: SalesChannelInfo[]
   isCollapsed: boolean
   hiddenDescendantCount: number
@@ -48,4 +50,6 @@ export type CategoryNodeData = {
   onAddChild: (parent: CategoryTreeNode) => void
   onEdit: (category: CategoryTreeNode) => void
   onDetach: (id: string) => void
+  onMoveSiblingUp?: (id: string) => void
+  onMoveSiblingDown?: (id: string) => void
 }