@visualli/react 0.1.7 → 0.2.1

package/src/components/KonvaContainer.tsx

@@ -1,254 +1,45 @@
-// ─── KonvaContainer ──────────────────────────────────────────────────────────
+// ─── KonvaContainer ───────────────────────────────────────────────────────────
 //
-// Renders a smooth dashed hull around a group of nodes with an inverse-scaled
-// pill label — matches the visualli.ai KonvaContainer exactly.
-//
-//   • 48-point ellipse sampling per node (not bounding box corners)
-//   • Graham-scan convex hull → 6-pass Chaikin smoothing
-//   • Dashed stroke "#747270", no fill
-//   • Pill label: parchment bg (#ddd9d0), Playpen Sans 800, inverse-zoom-scaled
-//   • Label anchored to the hull edge (bottom for horizontal, top for vertical)
+// One container — the design system's dashed hull around a group of ideas, with
+// its name as a pill on the hull's edge — for composing custom Konva scenes.
+// It only knows its own members, so the name avoids them (not other ideas or
+// connectors); the canvas uses KonvaContainerLayer + KonvaContainerLabelLayer,
+// which place names against the whole layer.
 
 import React, { memo, useMemo } from 'react';
-import {
-  KGroup as Group,
-  KLine as Line,
-  KRect as Rect,
-  KText as Text,
-} from '../konvaCompat';
+import { KShape as Shape } from '../konvaCompat';
 import type { FlatNode } from '@visualli/core';
-import { NODE_HEIGHT, TEXT_LABEL_HIDE_BELOW_ZOOM } from '@visualli/core';
-import { useViewportStore }           from '../stores/useViewportStore';
-import {
-  CONTAINER_LABEL_BASE_FONT_PX,
-  computeNodeTextScreenScale,
-} from '../config/textScaling';
-
-// ── Constants (mirrors visualli.ai) ──────────────────────────────────────────
-
-const CONTAINER_PADDING   = 50;
-const CONTAINER_DASH      = [10, 5] as const;
-const LABEL_BG            = '#ddd9d0';
-const LABEL_BORDER_RADIUS = 20;
-const LABEL_FONT_SIZE     = CONTAINER_LABEL_BASE_FONT_PX;
-const LABEL_FONT_WEIGHT   = '800';
-const LABEL_FONT_FAMILY   = "'Playpen Sans', Quicksand, sans-serif";
-const LABEL_PAD_H         = 20;
-const LABEL_PAD_V         = 10;
-const LABEL_LINE_HEIGHT   = 1.2;
-// Max normalized blob extents — Shape 5 reaches ±1.275 X, ±1.234 Y
-const MAX_BLOB_EXTENT_X   = 1.275;
-const MAX_BLOB_EXTENT_Y   = 1.234;
-
-// ── Text measurement ──────────────────────────────────────────────────────────
-
-let _labelCtx: CanvasRenderingContext2D | null = null;
-function measureLabelBoxWidth(text: string, fontSize: number): number {
-  if (!_labelCtx) {
-    const c = document.createElement('canvas');
-    _labelCtx = c.getContext('2d');
-  }
-  if (!_labelCtx) return Math.ceil(text.length * fontSize * 0.65 + 2 * LABEL_PAD_H);
-  _labelCtx.font = `${LABEL_FONT_WEIGHT} ${fontSize}px ${LABEL_FONT_FAMILY}`;
-  return Math.ceil(_labelCtx.measureText(text).width + 2 * LABEL_PAD_H);
-}
-
-// ── Convex hull (Graham scan) ─────────────────────────────────────────────────
-
-type Pt = { x: number; y: number };
-
-function isLeftTurn(p1: Pt, p2: Pt, p3: Pt): boolean {
-  return (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x) > 0;
-}
-
-function convexHull(points: Pt[]): Pt[] {
-  if (points.length < 3) return points;
-  let start = 0;
-  for (let i = 1; i < points.length; i++) {
-    if (points[i].y < points[start].y ||
-       (points[i].y === points[start].y && points[i].x < points[start].x)) start = i;
-  }
-  const sorted = [...points];
-  const sp = sorted.splice(start, 1)[0];
-  sorted.sort((a, b) => {
-    const da = Math.atan2(a.y - sp.y, a.x - sp.x);
-    const db = Math.atan2(b.y - sp.y, b.x - sp.x);
-    if (da !== db) return da - db;
-    return Math.hypot(a.x - sp.x, a.y - sp.y) - Math.hypot(b.x - sp.x, b.y - sp.y);
-  });
-  const hull: Pt[] = [sp, sorted[0]];
-  for (let i = 1; i < sorted.length; i++) {
-    while (hull.length > 1 && !isLeftTurn(hull[hull.length - 2], hull[hull.length - 1], sorted[i])) hull.pop();
-    hull.push(sorted[i]);
-  }
-  return hull;
-}
-
-// ── Chaikin smoothing (6 passes, returns flat [x,y,…] array) ─────────────────
-
-function chaikinSmooth(pts: Pt[], passes = 6): number[] {
-  let cur = pts;
-  for (let iter = 0; iter < passes; iter++) {
-    const next: Pt[] = [];
-    const n = cur.length;
-    for (let i = 0; i < n; i++) {
-      const a = cur[i], b = cur[(i + 1) % n];
-      next.push({ x: 0.75 * a.x + 0.25 * b.x, y: 0.75 * a.y + 0.25 * b.y });
-      next.push({ x: 0.25 * a.x + 0.75 * b.x, y: 0.25 * a.y + 0.75 * b.y });
-    }
-    cur = next;
-  }
-  return cur.flatMap(p => [p.x, p.y]);
-}
-
-// ── Hull edge Y at a given X (for label anchor) ───────────────────────────────
-
-function hullEdgeYAtX(points: number[], targetX: number, isBottom: boolean): number {
-  const n = points.length;
-  let result = isBottom ? -Infinity : Infinity;
-  for (let i = 0; i < n; i += 2) {
-    const x1 = points[i],     y1 = points[i + 1];
-    const x2 = points[(i + 2) % n], y2 = points[(i + 3) % n];
-    if ((x1 < targetX && x2 >= targetX) || (x2 < targetX && x1 >= targetX)) {
-      const t = (targetX - x1) / (x2 - x1);
-      const y = y1 + t * (y2 - y1);
-      if (isBottom) result = Math.max(result, y); else result = Math.min(result, y);
-    }
-  }
-  if (!isFinite(result)) {
-    for (let i = 1; i < n; i += 2) {
-      if (isBottom) result = Math.max(result, points[i]); else result = Math.min(result, points[i]);
-    }
-  }
-  return result;
-}
-
-// ── Hull calculation ──────────────────────────────────────────────────────────
-
-function calculateHull(
-  containerNodes: FlatNode[],
-): { points: number[]; anchorX: number; anchorEdgeY: number } | null {
-  if (containerNodes.length === 0) return null;
-
-  const NUM_SAMPLES = 48;
-  const samples: Pt[] = [];
-  for (const node of containerNodes) {
-    const baseRX = node.width / 2;
-    const baseRY = Math.max((NODE_HEIGHT * 1.6) / 2, baseRX * 0.74);
-    const halfW = baseRX * MAX_BLOB_EXTENT_X + CONTAINER_PADDING;
-    const halfH = baseRY * MAX_BLOB_EXTENT_Y + CONTAINER_PADDING;
-    for (let j = 0; j < NUM_SAMPLES; j++) {
-      const angle = (j / NUM_SAMPLES) * Math.PI * 2;
-      samples.push({ x: node.x + halfW * Math.cos(angle), y: node.y + halfH * Math.sin(angle) });
-    }
-  }
-
-  const hull    = convexHull(samples);
-  const points  = chaikinSmooth(hull, 6);
-
-  const xs = containerNodes.map(n => n.x);
-  const ys = containerNodes.map(n => n.y);
-  const spanX = Math.max(...xs) - Math.min(...xs);
-  const spanY = Math.max(...ys) - Math.min(...ys);
-  const useTopEdge = spanY > spanX * 2.0;
-
-  let hullMinX = Infinity, hullMaxX = -Infinity;
-  for (let i = 0; i < points.length; i += 2) {
-    if (points[i] < hullMinX) hullMinX = points[i];
-    if (points[i] > hullMaxX) hullMaxX = points[i];
-  }
-  const anchorX     = (hullMinX + hullMaxX) / 2;
-  const anchorEdgeY = hullEdgeYAtX(points, anchorX, !useTopEdge);
-
-  return { points, anchorX, anchorEdgeY };
-}
-
-// ── Props ─────────────────────────────────────────────────────────────────────
+import { DEFAULT_DESIGN, type Design } from '../design/design';
+import { drawHull, drawPill, layoutContainers } from '../design/containers';
 
 export interface KonvaContainerProps {
   /** All nodes in this container group (already resolved from nodeMap). */
   nodes: FlatNode[];
-  /** Label text shown on the pill badge. */
+  /** The group's name, drawn as a pill on the hull. */
   label?: string;
-  /** Unused – kept for API compat; stroke is always #747270. */
+  /** @deprecated unused: the hull and name use the design system's container style. */
   color?: string;
+  /** @deprecated pass `design`. */
   isDark?: boolean;
+  zoomLevel?: number;
+  design?: Design;
 }
 
-// ── Component ─────────────────────────────────────────────────────────────────
-
-const KonvaContainer = memo(function KonvaContainer({
-  nodes,
-  label = '',
-}: KonvaContainerProps) {
-  const zoomLevel = useViewportStore(s => s.zoomLevel);
-
-  const hullData = useMemo(() => calculateHull(nodes), [nodes]);
-
-  if (!hullData) return null;
-
-  // Inverse-scaled label metrics
-  const refNode      = nodes[0];
-  const screenScale  = refNode ? computeNodeTextScreenScale(refNode.width, zoomLevel) : 1;
-  const labelFontSize   = LABEL_FONT_SIZE * screenScale;
-  const labelBoxHeight  = Math.ceil(labelFontSize * LABEL_LINE_HEIGHT + 2 * LABEL_PAD_V);
-  const boxWidth        = label ? measureLabelBoxWidth(label, labelFontSize) : 0;
-  const boxX            = hullData.anchorX - boxWidth / 2;
-  const boxY            = hullData.anchorEdgeY - labelBoxHeight / 2;
-
+const KonvaContainer = memo(function KonvaContainer({ nodes, label = '', zoomLevel = 1, design = DEFAULT_DESIGN }: KonvaContainerProps) {
+  const placed = useMemo(() => {
+    const map = new Map(nodes.map((n) => [n.id, n] as const));
+    return layoutContainers([{ id: 'c', label: label || undefined, nodeIds: nodes.map((n) => n.id) }], map, [], design)[0] ?? null;
+  }, [nodes, label, design]);
+  if (!placed) return null;
   return (
-    <Group listening={false}>
-      {/* Dashed hull outline */}
-      <Line
-        points={hullData.points}
-        stroke="#747270"
-        strokeWidth={1}
-        dash={CONTAINER_DASH}
-        closed={true}
-        tension={0}
-        listening={false}
-        perfectDrawEnabled={false}
-      />
-
-      {/* Inverse-scaled pill label */}
-      {label.length > 0 && (
-        <Group
-          x={boxX + boxWidth / 2}
-          y={boxY + labelBoxHeight / 2}
-          offsetX={boxWidth / 2}
-          offsetY={labelBoxHeight / 2}
-          scaleX={1 / zoomLevel}
-          scaleY={1 / zoomLevel}
-          visible={zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM}
-          listening={false}
-        >
-          <Rect
-            width={boxWidth}
-            height={labelBoxHeight}
-            fill={LABEL_BG}
-            cornerRadius={LABEL_BORDER_RADIUS}
-            shadowEnabled={false}
-            perfectDrawEnabled={false}
-          />
-          <Text
-            x={LABEL_PAD_H}
-            y={LABEL_PAD_V}
-            width={boxWidth - 2 * LABEL_PAD_H}
-            height={labelBoxHeight - 2 * LABEL_PAD_V}
-            text={label}
-            fontSize={labelFontSize}
-            fontFamily={LABEL_FONT_FAMILY}
-            fontStyle={LABEL_FONT_WEIGHT}
-            fill="rgba(0,0,0,1)"
-            align="center"
-            verticalAlign="middle"
-            lineHeight={LABEL_LINE_HEIGHT}
-            perfectDrawEnabled={false}
-            listening={false}
-          />
-        </Group>
-      )}
-    </Group>
+    <Shape
+      listening={false}
+      perfectDrawEnabled={false}
+      sceneFunc={(ctx: { _context: CanvasRenderingContext2D }) => {
+        drawHull(ctx._context, placed.hull, design);
+        if (placed.pill) drawPill(ctx._context, placed.pill, design, zoomLevel);
+      }}
+    />
   );
 });
 

package/src/components/KonvaContainerLabelLayer.tsx

@@ -0,0 +1,41 @@
+// ─── KonvaContainerLabelLayer ────────────────────────────────────────────────
+//
+// Container names: pills straddling their hull's edge, at the spot the design
+// system's placeContainerLabel picks (clear of ideas, connectors and other
+// names). Painted above connectors and ideas so nothing runs over a name
+// (non-interactive). Shares its layout with KonvaContainerLayer.
+
+import React, { useRef, useLayoutEffect } from 'react';
+import { KLayer as Layer, KShape as Shape } from '../konvaCompat';
+import type Konva from 'konva';
+import { DEFAULT_DESIGN, type Design } from '../design/design';
+import { drawPill, type ConnectionInput } from '../design/containers';
+import { useContainerLayout, type ContainerGroup } from './KonvaContainerLayer';
+
+export interface KonvaContainerLabelLayerProps {
+  containers: ContainerGroup[];
+  connections?: ConnectionInput[];
+  design?: Design;
+}
+
+export default function KonvaContainerLabelLayer({ containers, connections = [], design = DEFAULT_DESIGN }: KonvaContainerLabelLayerProps) {
+  const layerRef = useRef<Konva.Layer | null>(null);
+  const placed = useContainerLayout(containers, connections, design);
+
+  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [placed, design]);
+
+  if (!placed.some((p) => p.pill)) return null;
+
+  return (
+    <Layer ref={layerRef} listening={false}>
+      <Shape
+        listening={false}
+        perfectDrawEnabled={false}
+        sceneFunc={(ctx: { _context: CanvasRenderingContext2D }, shape: Konva.Shape) => {
+          const zoom = shape.getStage()?.scaleX() || 1;
+          for (const p of placed) if (p.pill) drawPill(ctx._context, p.pill, design, zoom);
+        }}
+      />
+    </Layer>
+  );
+}

package/src/components/KonvaContainerLayer.tsx

@@ -1,16 +1,18 @@
 // ─── KonvaContainerLayer ─────────────────────────────────────────────────────
 //
-// Renders container outlines beneath nodes (non-interactive).
-//
-// Node positions are read from useNodeStore (live), matching the visualli.ai
-// reference — containers follow dragged nodes in real-time every RAF frame.
+// Container hulls (the design system's dashed hull, geometry/container.ts),
+// beneath connectors and ideas (non-interactive). Their names are painted above
+// the ideas by KonvaContainerLabelLayer from the same layout. Member positions
+// come from the live node store so hulls follow dragged ideas.
 
-import React, { useRef, useLayoutEffect } from 'react';
-import { KLayer as Layer } from '../konvaCompat';
+import React, { useRef, useLayoutEffect, useMemo } from 'react';
+import { KLayer as Layer, KShape as Shape } from '../konvaCompat';
 import type Konva from 'konva';
 import type { FlatNode } from '@visualli/core';
 import { useNodeStore } from '../stores/useNodeStore';
-import KonvaContainer from './KonvaContainer';
+import { DEFAULT_DESIGN, type Design } from '../design/design';
+import { useFontsEpoch } from '../design/runtime';
+import { drawHull, layoutContainers, type ConnectionInput, type PlacedContainer } from '../design/containers';
 
 export interface ContainerGroup {
   id: string;
@@ -20,44 +22,43 @@ export interface ContainerGroup {
 }
 
 export interface KonvaContainerLayerProps {
-  /** Layout-snapshot nodes — used only as a seed for initial IDs. */
+  /** Layout-snapshot nodes (kept for API compatibility). */
   nodes: FlatNode[];
   containers: ContainerGroup[];
+  /** The layer's connections: container names are placed clear of them. */
+  connections?: ConnectionInput[];
+  /** @deprecated pass `design`. */
   isDark?: boolean;
+  design?: Design;
 }
 
-export default function KonvaContainerLayer({ nodes, containers, isDark = false }: KonvaContainerLayerProps) {
-  const layerRef = useRef<Konva.Layer | null>(null);
+/** Hulls and name positions for the current layer, from the live node store (shared by both container layers). */
+export function useContainerLayout(containers: ContainerGroup[], connections: ConnectionInput[] = [], design: Design = DEFAULT_DESIGN): PlacedContainer[] {
+  const fonts = useFontsEpoch();
+  const storeNodes = useNodeStore((s) => s.nodes);
+  return useMemo(
+    () => layoutContainers(containers, storeNodes, connections, design),
+    // fonts: the names are measured, so measure again once the web fonts are in.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [containers, connections, storeNodes, design, fonts],
+  );
+}
 
-  // Subscribe to live store — updated every RAF frame during drag.
-  // This is the same pattern used by KonvaEdgeLayer so containers and edges
-  // both track dragged nodes in real-time.
-  const storeNodes = useNodeStore(s => s.nodes);
+export default function KonvaContainerLayer({ containers, connections = [], design = DEFAULT_DESIGN }: KonvaContainerLayerProps) {
+  const layerRef = useRef<Konva.Layer | null>(null);
+  const placed = useContainerLayout(containers, connections, design);
 
-  // batchDraw deps include storeNodes so the layer redraws whenever any node
-  // position changes (including mid-drag RAF updates).
-  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [containers, isDark, storeNodes]);
+  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [placed, design]);
 
   if (containers.length === 0) return null;
 
   return (
     <Layer ref={layerRef} listening={false}>
-      {containers.map(c => {
-        // Read positions from live store — not from the layout snapshot
-        const groupNodes = c.nodeIds
-          .map(id => storeNodes.get(id))
-          .filter((n): n is FlatNode => !!n);
-        if (groupNodes.length === 0) return null;
-
-        return (
-          <KonvaContainer
-            key={c.id}
-            nodes={groupNodes}
-            label={c.label}
-            isDark={isDark}
-          />
-        );
-      })}
+      <Shape
+        listening={false}
+        perfectDrawEnabled={false}
+        sceneFunc={(ctx: { _context: CanvasRenderingContext2D }) => { for (const p of placed) drawHull(ctx._context, p.hull, design); }}
+      />
     </Layer>
   );
 }