makersclaw 0.2.0 → 0.3.1

package/registry/blocks/mind-map/topic.jsx

@@ -0,0 +1,143 @@
+"use client";
+
+// One topic on the map, as a FlowCanvas node type. It draws three things:
+// its box (the centre, a tinted main-branch pill, or words over a coloured
+// line for a subtopic), the curve back to its parent (an SVG that reaches
+// outside the box, so the canvas needs no connectors), and the small fold /
+// add button at its outer edge.
+//
+// Everything it knows about the map — who is selected or being edited,
+// what a click does — comes from MindContext, which MindMap provides
+// around the canvas.
+import { createContext, useContext } from "react";
+import { Icon, cx } from "../../ui";
+import { EditableText, colorClasses } from "../flow-canvas";
+import { UNDERLINE, branchPath, levelOf } from "./tree";
+
+export const MindContext = createContext(null);
+
+const STROKE_WIDTH = [0, 3, 2, 1.5];
+
+export function TopicNode({ id, data }) {
+  const m = useContext(MindContext);
+  if (!m) return null;
+  const { text, depth = 0, side = "right", color, kids = 0, collapsed = false, hidden = 0, link } = data ?? {};
+  const selected = m.selectedId === id;
+  const editing = !m.readOnly && m.editingId === id;
+  const isDrop = m.dropId === id;
+  const isDragged = m.dragId === id;
+  const L = levelOf(depth);
+  const cc = colorClasses(color ?? "muted");
+  const left = side === "left";
+
+  // Where lines to the children leave: the outer edge (a subtopic's foot).
+  const outY = depth >= 2 ? `calc(100% - ${UNDERLINE / 2}px)` : "50%";
+  const outer = left ? { right: "100%" } : { left: "100%" };
+
+  const box = cx(
+    "relative size-full whitespace-pre-wrap break-words outline-none",
+    "transition-[box-shadow,background-color,opacity,outline-color] duration-150 motion-reduce:transition-none",
+    m.coarse ? "" : "nopan",
+    editing ? "cursor-text" : "cursor-default",
+    depth === 0 && "rounded-2xl bg-primary text-center text-primary-foreground shadow-sm",
+    depth === 1 && cx("rounded-xl border bg-card text-foreground shadow-xs hover:shadow-sm", cc.edge, left ? "text-right" : "text-left"),
+    depth >= 2 && cx("rounded-md text-foreground hover:bg-muted/70", left ? "text-right" : "text-left"),
+    selected && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+    isDrop && "outline-2 outline-offset-4 outline-primary [outline-style:dashed]",
+    isDragged && "opacity-40",
+  );
+
+  return (
+    <div data-topic={id} className="group/topic relative size-full">
+      {link ? (
+        <svg aria-hidden="true" width="1" height="1" className="pointer-events-none absolute top-0 left-0 overflow-visible">
+          <path d={branchPath(link)} className={cx("fill-none", cc.stroke)} strokeWidth={STROKE_WIDTH[Math.min(depth, 3)]} strokeLinecap="round" />
+        </svg>
+      ) : null}
+      {/* raw: the topic's own box on the canvas — it takes the pointer
+          (select, drag onto another topic, double-click to rename); the
+          keys arrive through MindMap's handler on the canvas. */}
+      <div
+        className={box}
+        style={{ padding: `${L.padY}px ${L.padX}px ${L.padY + (depth >= 2 ? UNDERLINE : 0)}px`, fontSize: L.font, lineHeight: `${L.line}px`, fontWeight: L.weight }}
+        onPointerDown={(e) => {
+          if (editing || e.button !== 0) return;
+          m.onTopicPointerDown(e, id);
+        }}
+        onDoubleClick={(e) => {
+          e.stopPropagation();
+          if (!m.readOnly) m.startEdit(id);
+        }}
+      >
+        {depth === 1 ? <span aria-hidden="true" className={cx("pointer-events-none absolute inset-0 rounded-[inherit] opacity-60", cc.tint)} /> : null}
+        <EditableText
+          value={text}
+          editing={editing}
+          onChange={(v) => m.setText(id, v)}
+          onDone={() => m.finishEdit(id)}
+          placeholder={m.placeholder}
+          label={depth === 0 ? "Central topic" : "Topic"}
+          className="relative min-h-full"
+        />
+        {depth >= 2 ? <span aria-hidden="true" className={cx("pointer-events-none absolute inset-x-0 bottom-0 h-0.5 rounded-full", cc.solid)} /> : null}
+      </div>
+
+      {depth > 0 && kids > 0 ? (
+        // raw: a 20px chip on the branch's end, smaller than any kit
+        // button — the canvas is zoomed, and a 36px button would cover the
+        // line. Kept out of the tab order: the keys fold (⌘↑ / ⌘↓).
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-label={collapsed ? `Unfold, ${hidden} hidden` : "Fold branch"}
+          title={collapsed ? `${hidden} hidden · click to unfold` : "Fold branch"}
+          onMouseDown={(e) => e.preventDefault()}
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            e.stopPropagation();
+            m.toggleFold(id);
+          }}
+          className={cx(
+            "nodrag nopan absolute z-10 grid h-5 min-w-5 place-items-center rounded-full border bg-card px-1 text-[11px] leading-none font-medium tabular-nums text-foreground shadow-xs",
+            "transition-[opacity,scale] duration-150 hover:scale-110 motion-reduce:transition-none",
+            left ? "translate-x-[-6px]" : "translate-x-[6px]",
+            cc.edge,
+            collapsed ? "opacity-100" : "opacity-0 group-hover/topic:opacity-100 focus-visible:opacity-100",
+            !collapsed && selected && "opacity-100",
+          )}
+          style={{ ...outer, top: outY, marginTop: -10 }}
+        >
+          {collapsed ? hidden : <span aria-hidden="true" className="block h-0.5 w-2 rounded-full bg-muted-foreground" />}
+        </button>
+      ) : null}
+
+      {!m.readOnly && kids === 0 && !editing ? (
+        // raw: as the fold chip — a 20px "add a subtopic" dot at the end.
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-label="Add subtopic"
+          title="Add subtopic (Tab)"
+          onMouseDown={(e) => e.preventDefault()}
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            e.stopPropagation();
+            m.addChild(id);
+          }}
+          className={cx(
+            "nodrag nopan absolute z-10 grid size-5 place-items-center rounded-full border border-border bg-card text-muted-foreground shadow-xs",
+            "opacity-0 transition-[opacity,scale,color] duration-150 hover:scale-110 hover:text-foreground group-hover/topic:opacity-100 motion-reduce:transition-none",
+            selected && "opacity-100",
+            left ? "translate-x-[-8px]" : "translate-x-[8px]",
+            depth === 0 && "hidden",
+          )}
+          style={{ ...outer, top: outY, marginTop: -10 }}
+        >
+          <Icon name="plus" size={12} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export const NODE_TYPES = { topic: TopicNode };