@theoremjs/studio 0.3.4-next.468.ge2da06f → 0.3.4-next.472.gd209e07

package/ui/tree-map.d.ts

@@ -15,5 +15,7 @@ export interface StudioTreeMapProps {
         width: number;
         height: number;
     } | undefined;
+    /** A token dragged moves to where it is dropped, its lines with it; the field dragged moves the whole map. */
+    draggable?: boolean | undefined;
 }
-export declare function StudioTreeMap({ workspace, agents, grow, fit }: StudioTreeMapProps): import("react").JSX.Element;
+export declare function StudioTreeMap({ workspace, agents, grow, fit, draggable, }: StudioTreeMapProps): import("react").JSX.Element;

package/ui/tree-map.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconAdjustments, IconArrowsMinimize, IconChecks, IconCloud, IconEngine, IconFlag, IconKey, IconRepeat, IconSettingsAutomation, IconShieldCheck, IconTimeline, IconTool, } from '@tabler/icons-react';
-import { useMemo, useRef } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { mapCurve } from "../map-line.js";
 import { createBlankDraft, libraryDraft } from "../mod.js";
 import { drawnAt, HALF, INDENT, PAD, placeAt, rowId, treeMapLayout, } from "./lib/tree-map-layout.js";
 import { toolTypeIcon } from "./lib/type-icons.js";
 import { MapToken, useTokenWidths } from "./map-token.js";
 import { nodeIcon } from "./node-icon.js";
+import { drags, follow } from "./pan.js";
 import './tree-map.css';
 /** Where under a token its children's line runs: the middle of its icon. */
 const TRUNK = 13;
@@ -68,8 +69,12 @@ function underPath(from, to) {
         ` Q ${trunk} ${to.y} ${trunk + TURN} ${to.y} H ${to.x - LINE_GAP}`);
 }
 const clamp = (value) => Math.min(Math.max(value, 0), 1);
-export function StudioTreeMap({ workspace, agents, grow = 0, fit }) {
+const NONE = { x: 0, y: 0 };
+export function StudioTreeMap({ workspace, agents, grow = 0, fit, draggable = false, }) {
     const root = useRef(null);
+    const [moved, setMoved] = useState({});
+    const [field, setField] = useState(NONE);
+    const [dragging, setDragging] = useState(false);
     // why: Every token is drawn from the start, the undrawn ones unseen, so each is measured before it shows.
     const widths = useTokenWidths(root, workspace);
     const layout = useMemo(() => treeMapLayout(workspace, agents, (id) => widths[id] ?? GUESS), [workspace, agents, widths]);
@@ -79,7 +84,11 @@ export function StudioTreeMap({ workspace, agents, grow = 0, fit }) {
         libraryDraft(workspace, agent.key) ?? createBlankDraft(),
     ]));
     const { rows, feeds } = layout;
-    const at = (id) => placeAt(layout, id, grow);
+    const at = (id) => {
+        const place = placeAt(layout, id, grow);
+        const by = moved[id] ?? NONE;
+        return { ...place, x: place.x + by.x, y: place.y + by.y };
+    };
     const drawn = (id) => drawnAt(layout, id, grow);
     const feedById = new Map(feeds.map((feed) => [feed.id, feed]));
     const lineDrawn = (id) => {
@@ -116,7 +125,35 @@ export function StudioTreeMap({ workspace, agents, grow = 0, fit }) {
     }, [layout, widths]);
     const fits = fit ? Math.min(1, fit.width / grown.width, fit.height / grown.height) : 1;
     const scale = 1 + (fits - 1) * clamp(grow);
-    return (_jsxs("div", { ref: root, className: "studio-tree-map", style: { width: mapWidth, height, ...(scale < 1 ? { scale: String(scale) } : {}) }, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: mapWidth, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(at(row.parent), at(rowId(row))) }, rowId(row)))), shown.flatMap((feed) => feed.into.map((id) => {
+    // why: The pointer moves in the page's pixels; the map is scaled, so a move is divided back into its own.
+    const drag = (event) => {
+        if (!draggable || !drags(event))
+            return;
+        event.preventDefault();
+        const token = event.target.closest('[data-map-token]')?.dataset['mapToken'];
+        const from = token === undefined ? field : (moved[token] ?? NONE);
+        const put = (to) => {
+            if (token === undefined)
+                setField(to);
+            else
+                setMoved((last) => ({ ...last, [token]: to }));
+        };
+        setDragging(true);
+        follow(event, (x, y) => {
+            put(token === undefined
+                ? { x: from.x + x, y: from.y + y }
+                : { x: from.x + x / scale, y: from.y + y / scale });
+        }, () => {
+            setDragging(false);
+        });
+    };
+    const translate = field.x || field.y ? { translate: `${field.x}px ${field.y}px` } : {};
+    return (_jsxs("div", { ref: root, className: "studio-tree-map", style: {
+            width: mapWidth,
+            height,
+            ...translate,
+            ...(scale < 1 ? { scale: String(scale) } : {}),
+        }, "data-draggable": draggable ? '' : undefined, "data-dragging": dragging ? '' : undefined, onPointerDown: drag, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: mapWidth, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(at(row.parent), at(rowId(row))) }, rowId(row)))), shown.flatMap((feed) => feed.into.map((id) => {
                         const from = at(feed.id);
                         const { d } = mapCurve({ x: from.x - LINE_GAP, y: from.y }, { x: right(id) + LINE_GAP, y: at(id).y });
                         return _jsx("path", { className: "map-line", d: d }, `${feed.id}>${id}`);