flowbook 0.2.8 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbook",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "type": "module",
   "bin": {
     "flowbook": "dist/cli.js"

package/src/client/components/MermaidRenderer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useId } from "react";
+import { useEffect, useRef, useState, useId, useCallback } from "react";
 import mermaid from "mermaid";
 
 let initialized = false;
@@ -14,9 +14,9 @@ function ensureInit() {
       darkMode: true,
       background: "#131a2b",
       mainBkg: "#1e2740",
-      primaryColor: "#6366f1",
+      primaryColor: "#4f46e5",
       primaryTextColor: "#e2e8f0",
-      primaryBorderColor: "#4f46e5",
+      primaryBorderColor: "#6366f1",
       secondaryColor: "#1e293b",
       secondaryTextColor: "#cbd5e1",
       secondaryBorderColor: "#334155",
@@ -26,7 +26,7 @@ function ensureInit() {
       lineColor: "#6366f1",
       textColor: "#e2e8f0",
       nodeTextColor: "#e2e8f0",
-      nodeBorder: "#4f46e5",
+      nodeBorder: "#6366f1",
       clusterBkg: "#0f172a",
       clusterBorder: "#1e293b",
       edgeLabelBackground: "#131a2b",
@@ -35,6 +35,49 @@ function ensureInit() {
   initialized = true;
 }
 
+const MIN_ZOOM = 0.25;
+const MAX_ZOOM = 4;
+const ZOOM_SPEED = 0.002;
+
+/**
+ * Post-process SVG to add CSS classes based on node shape type.
+ * - polygon → node-decision (diamond, hexagon, etc.)
+ * - 2+ rects → node-subroutine (double-bordered)
+ * - path with arc commands → node-database (cylinder)
+ * - circle → node-circle
+ */
+function classifyNodes(svgString: string): string {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, "image/svg+xml");
+    const svg = doc.documentElement;
+
+    svg.querySelectorAll(".node").forEach((node) => {
+      if (node.querySelector("polygon")) {
+        node.classList.add("node-decision");
+      } else if (node.querySelectorAll("rect").length >= 2) {
+        node.classList.add("node-subroutine");
+      } else if (node.querySelector("circle")) {
+        node.classList.add("node-circle");
+      } else {
+        const paths = node.querySelectorAll("path");
+        let hasArcs = false;
+        paths.forEach((p) => {
+          const d = p.getAttribute("d") || "";
+          if (/[Aa]\s*[\d.]/.test(d)) hasArcs = true;
+        });
+        if (hasArcs) {
+          node.classList.add("node-database");
+        }
+      }
+    });
+
+    return new XMLSerializer().serializeToString(svg);
+  } catch {
+    return svgString;
+  }
+}
+
 interface Props {
   code: string;
   className?: string;
@@ -47,16 +90,22 @@ export function MermaidRenderer({ code, className }: Props) {
   const rawId = useId();
   const safeId = "mermaid" + rawId.replace(/:/g, "-");
 
+  // Zoom & pan state
+  const [scale, setScale] = useState(1);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const dragging = useRef(false);
+  const dragOrigin = useRef({ x: 0, y: 0, px: 0, py: 0 });
+
+  // Render mermaid diagram
   useEffect(() => {
     ensureInit();
-
     let cancelled = false;
 
     mermaid
       .render(safeId, code)
       .then(({ svg: rendered }) => {
         if (!cancelled) {
-          setSvg(rendered);
+          setSvg(classifyNodes(rendered));
           setError("");
         }
       })
@@ -72,20 +121,98 @@ export function MermaidRenderer({ code, className }: Props) {
     };
   }, [code, safeId]);
 
+  // Wheel zoom (non-passive to allow preventDefault)
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !svg) return;
+
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+
+      setScale((prev) => {
+        const next = Math.min(
+          MAX_ZOOM,
+          Math.max(MIN_ZOOM, prev * (1 - e.deltaY * ZOOM_SPEED)),
+        );
+        const ratio = next / prev;
+        setPos((p) => ({
+          x: cx - (cx - p.x) * ratio,
+          y: cy - (cy - p.y) * ratio,
+        }));
+        return next;
+      });
+    };
+
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [svg]);
+
+  // Mouse drag to pan
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.button !== 0) return;
+      dragging.current = true;
+      dragOrigin.current = {
+        x: e.clientX,
+        y: e.clientY,
+        px: pos.x,
+        py: pos.y,
+      };
+    },
+    [pos],
+  );
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!dragging.current) return;
+      setPos({
+        x: dragOrigin.current.px + (e.clientX - dragOrigin.current.x),
+        y: dragOrigin.current.py + (e.clientY - dragOrigin.current.y),
+      });
+    };
+    const onUp = () => {
+      dragging.current = false;
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  // Double-click to reset
+  const onDoubleClick = useCallback(() => {
+    setScale(1);
+    setPos({ x: 0, y: 0 });
+  }, []);
+
   if (error) {
     return (
       <div
         className={`rounded-lg p-4 border ${className ?? ""}`}
         style={{
-          background: 'rgba(239, 68, 68, 0.08)',
-          borderColor: 'rgba(239, 68, 68, 0.2)',
+          background: "rgba(239, 68, 68, 0.08)",
+          borderColor: "rgba(239, 68, 68, 0.2)",
         }}
       >
-        <p className="text-sm font-medium mb-2" style={{ color: '#f87171' }}>
+        <p className="text-sm font-medium mb-2" style={{ color: "#f87171" }}>
           Render error
         </p>
-        <p className="text-xs font-mono mb-3" style={{ color: 'rgba(248, 113, 113, 0.7)' }}>{error}</p>
-        <pre className="text-xs overflow-x-auto whitespace-pre-wrap" style={{ color: 'var(--fb-text-muted)' }}>
+        <p
+          className="text-xs font-mono mb-3"
+          style={{ color: "rgba(248, 113, 113, 0.7)" }}
+        >
+          {error}
+        </p>
+        <pre
+          className="text-xs overflow-x-auto whitespace-pre-wrap"
+          style={{ color: "var(--fb-text-muted)" }}
+        >
           {code}
         </pre>
       </div>
@@ -97,7 +224,13 @@ export function MermaidRenderer({ code, className }: Props) {
       <div
         className={`flex items-center justify-center py-12 ${className ?? ""}`}
       >
-        <div className="w-5 h-5 border-2 rounded-full animate-spin" style={{ borderColor: 'rgba(99, 102, 241, 0.3)', borderTopColor: '#6366f1' }} />
+        <div
+          className="w-5 h-5 border-2 rounded-full animate-spin"
+          style={{
+            borderColor: "rgba(99, 102, 241, 0.3)",
+            borderTopColor: "#6366f1",
+          }}
+        />
       </div>
     );
   }
@@ -105,8 +238,18 @@ export function MermaidRenderer({ code, className }: Props) {
   return (
     <div
       ref={containerRef}
-      className={`flowbook-mermaid overflow-x-auto ${className ?? ""}`}
-      dangerouslySetInnerHTML={{ __html: svg }}
-    />
+      className={`flowbook-zoom-container ${className ?? ""}`}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+    >
+      <div
+        className="flowbook-mermaid"
+        style={{
+          transform: `translate(${pos.x}px, ${pos.y}px) scale(${scale})`,
+          transformOrigin: "0 0",
+        }}
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+    </div>
   );
 }

package/src/client/styles/globals.css

@@ -25,13 +25,63 @@ body {
   background: var(--fb-bg-outer);
 }
 
-/* Mermaid SVG sizing */
+/* ── Zoom container ── */
+.flowbook-zoom-container {
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  width: 100%;
+  height: 100%;
+}
+
+.flowbook-zoom-container:active {
+  cursor: grabbing;
+}
+
+/* Remove max-width limit so zoom works beyond container */
+.flowbook-zoom-container .flowbook-mermaid svg {
+  max-width: none;
+  height: auto;
+}
+
+/* ── Mermaid SVG sizing (non-zoom fallback) ── */
 .flowbook-mermaid svg {
   max-width: 100%;
   height: auto;
 }
 
-/* Scrollbar */
+/* ── Per-node-type coloring ── */
+
+/* Decision nodes: diamond, hexagon, etc. (polygon shapes) → dark rose */
+.flowbook-mermaid .node-decision polygon {
+  fill: #6b2142 !important;
+  stroke: #8b3a5c !important;
+}
+
+/* Database / cylinder nodes → dark teal-green */
+.flowbook-mermaid .node-database path {
+  fill: #1a4731 !important;
+  stroke: #2d6b47 !important;
+}
+.flowbook-mermaid .node-database rect {
+  fill: #1a4731 !important;
+  stroke: #2d6b47 !important;
+}
+
+/* Subroutine nodes (double-bordered rect) → dark slate */
+.flowbook-mermaid .node-subroutine rect {
+  fill: #1e2740 !important;
+  stroke: #2d3456 !important;
+}
+
+/* Circle nodes → indigo */
+.flowbook-mermaid .node-circle circle {
+  fill: #4f46e5 !important;
+  stroke: #6366f1 !important;
+}
+
+/* ── Scrollbar ── */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;