@gravity-ui/page-constructor 8.15.0 → 8.17.0

package/build/cjs/demo/ComponentMap/draw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw.js","sourceRoot":"../../../../src","sources":["demo/ComponentMap/draw.ts"],"names":[],"mappings":"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","sourcesContent":["import {getEdgeGeometry, orderEdgesForInteraction} from './edgeGeometry';\nimport {getEdgeKey} from './graph';\nimport {NODE_LABEL_FONT} from './layout';\nimport type {\n    ComponentMapEmphasis,\n    ComponentMapLayout,\n    LayoutEdge,\n    LayoutNode,\n    Point,\n    ViewportSize,\n    ViewportTransform,\n} from './model';\n\nexport const PALETTE = {\n    bandHeading: '#4d5562',\n    edge: '#7d8798',\n    label: '#1f2733',\n    nodeFill: {\n        block: '#d9e8ff',\n        'sub-block': '#e5ddff',\n        component: '#e4ebf2',\n    },\n    nodeOutline: '#748094',\n    selectedFill: '#ffbe5c',\n    selectedOutline: '#9a5700',\n} as const;\n\nconst NODE_RADIUS = 10;\nconst NODE_DIMMED_OPACITY = 0.16;\nconst EDGE_DIMMED_OPACITY = 0.1;\nconst EDGE_WIDTH = 1.5;\nconst INTERACTIVE_EDGE_WIDTH = 3;\nconst INTERACTIVE_EDGE_COLOR = '#ffbe5c';\n\nexport interface ComponentMapDrawOptions {\n    viewport: ViewportSize;\n    devicePixelRatio: number;\n    selectedNodeId?: string;\n    hoveredEdgeKey?: string;\n    selectedEdgeKeys: ReadonlySet<string>;\n    emphasis: ComponentMapEmphasis;\n}\n\ninterface DrawEdgeOptions {\n    active: boolean;\n    hovered: boolean;\n    selected: boolean;\n}\n\nfunction roundedRect(\n    context: CanvasRenderingContext2D,\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    radius: number,\n) {\n    const right = x + width;\n    const bottom = y + height;\n\n    context.beginPath();\n    context.moveTo(x + radius, y);\n    context.lineTo(right - radius, y);\n    context.quadraticCurveTo(right, y, right, y + radius);\n    context.lineTo(right, bottom - radius);\n    context.quadraticCurveTo(right, bottom, right - radius, bottom);\n    context.lineTo(x + radius, bottom);\n    context.quadraticCurveTo(x, bottom, x, bottom - radius);\n    context.lineTo(x, y + radius);\n    context.quadraticCurveTo(x, y, x + radius, y);\n    context.closePath();\n}\n\nfunction drawArrowhead(context: CanvasRenderingContext2D, arrowhead: [Point, Point, Point]) {\n    context.beginPath();\n    context.moveTo(arrowhead[0].x, arrowhead[0].y);\n    context.lineTo(arrowhead[1].x, arrowhead[1].y);\n    context.lineTo(arrowhead[2].x, arrowhead[2].y);\n    context.closePath();\n    context.fill();\n}\n\nfunction drawEdge(\n    canvasContext: CanvasRenderingContext2D,\n    source: LayoutNode,\n    target: LayoutNode,\n    {active, hovered, selected}: DrawEdgeOptions,\n) {\n    const context = canvasContext;\n    const {start, end, firstControl, secondControl, arrowhead} = getEdgeGeometry(source, target);\n    const color = selected || hovered ? INTERACTIVE_EDGE_COLOR : PALETTE.edge;\n\n    context.save();\n    context.globalAlpha = selected || active ? 1 : EDGE_DIMMED_OPACITY;\n    context.strokeStyle = color;\n    context.fillStyle = color;\n    context.lineWidth = selected || hovered ? INTERACTIVE_EDGE_WIDTH : EDGE_WIDTH;\n    context.beginPath();\n    context.moveTo(start.x, start.y);\n    context.bezierCurveTo(\n        firstControl.x,\n        firstControl.y,\n        secondControl.x,\n        secondControl.y,\n        end.x,\n        end.y,\n    );\n    context.stroke();\n    drawArrowhead(context, arrowhead);\n    context.restore();\n}\n\nfunction drawNode(\n    canvasContext: CanvasRenderingContext2D,\n    node: LayoutNode,\n    active: boolean,\n    selected: boolean,\n) {\n    const context = canvasContext;\n    const {x, y, width, height} = node.rect;\n\n    context.save();\n    context.globalAlpha = active ? 1 : NODE_DIMMED_OPACITY;\n    context.fillStyle = selected ? PALETTE.selectedFill : PALETTE.nodeFill[node.kind];\n    context.strokeStyle = selected ? PALETTE.selectedOutline : PALETTE.nodeOutline;\n    context.lineWidth = selected ? 3 : 1.5;\n    roundedRect(context, x, y, width, height, NODE_RADIUS);\n    context.fill();\n    context.stroke();\n    context.restore();\n}\n\nfunction drawLabel(canvasContext: CanvasRenderingContext2D, node: LayoutNode, active: boolean) {\n    const context = canvasContext;\n    const {x, y, width, height} = node.rect;\n\n    context.save();\n    context.globalAlpha = active ? 1 : NODE_DIMMED_OPACITY;\n    context.fillStyle = PALETTE.label;\n    context.font = NODE_LABEL_FONT;\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.fillText(node.label, x + width / 2, y + height / 2);\n    context.restore();\n}\n\nexport function drawComponentMap(\n    canvasContext: CanvasRenderingContext2D,\n    layout: ComponentMapLayout,\n    transform: ViewportTransform,\n    options: ComponentMapDrawOptions,\n) {\n    const context = canvasContext;\n    const {viewport, devicePixelRatio, selectedNodeId, hoveredEdgeKey, selectedEdgeKeys, emphasis} =\n        options;\n    const hasEmphasis = emphasis.mode !== 'none';\n\n    context.resetTransform();\n    context.scale(devicePixelRatio, devicePixelRatio);\n    context.clearRect(0, 0, viewport.width, viewport.height);\n    context.translate(transform.x, transform.y);\n    context.scale(transform.scale, transform.scale);\n\n    context.save();\n    context.fillStyle = PALETTE.bandHeading;\n    context.font = '700 18px sans-serif';\n    context.textAlign = 'left';\n    context.textBaseline = 'top';\n    for (const band of layout.bands) {\n        context.fillText(band.label, band.bounds.x, band.bounds.y);\n    }\n    context.restore();\n\n    const edgeState = ({source, target}: LayoutEdge) => {\n        const key = getEdgeKey(source.id, target.id);\n        return {\n            key,\n            selected: selectedEdgeKeys.has(key),\n            hovered: key === hoveredEdgeKey,\n        };\n    };\n    const orderedEdges = orderEdgesForInteraction(layout.edges, hoveredEdgeKey, selectedEdgeKeys);\n\n    for (const edge of orderedEdges) {\n        const {source, target} = edge;\n        const {key, selected, hovered} = edgeState(edge);\n        const active =\n            emphasis.mode === 'none' ||\n            (emphasis.mode === 'selection' && emphasis.activeEdgeIds.has(key));\n        drawEdge(context, source, target, {active, hovered, selected});\n    }\n\n    for (const node of layout.nodes) {\n        const active = !hasEmphasis || emphasis.activeNodeIds.has(node.id);\n        drawNode(\n            context,\n            node,\n            active,\n            emphasis.mode === 'selection' && node.id === selectedNodeId,\n        );\n    }\n\n    for (const node of layout.nodes) {\n        const active = !hasEmphasis || emphasis.activeNodeIds.has(node.id);\n        drawLabel(context, node, active);\n    }\n}\n"]}

package/build/cjs/demo/ComponentMap/edgeGeometry.d.ts

@@ -0,0 +1,20 @@
+import type { LayoutEdge, LayoutNode, Point } from "./model.js";
+export declare const ARROW_SIZE = 12;
+export declare const EDGE_CURVE_SEGMENTS = 24;
+export declare const EDGE_HIT_TOLERANCE = 6;
+export declare const SAME_GROUP_ARC_MIN_OUTSET = 64;
+export declare const SAME_GROUP_ARC_SPAN_FACTOR = 0.25;
+export interface EdgeGeometry {
+    start: Point;
+    end: Point;
+    firstControl: Point;
+    secondControl: Point;
+    arrowhead: [Point, Point, Point];
+}
+export declare function getSameGroupArcOutset(source: LayoutNode, target: LayoutNode): number;
+export declare function getEdgeGeometry(source: LayoutNode, target: LayoutNode): EdgeGeometry;
+export declare function getCubicBezierPoint(geometry: EdgeGeometry, ratio: number): Point;
+export declare function getEdgeDistance(point: Point, geometry: EdgeGeometry): number;
+export declare const getEdgeHitTolerance: (scale: number) => number;
+export declare function orderEdgesForInteraction(edges: LayoutEdge[], hoveredEdgeKey: string | undefined, selectedEdgeKeys: ReadonlySet<string>): LayoutEdge[];
+export declare function hitTestEdge(edges: LayoutEdge[], point: Point, tolerance: number): LayoutEdge | undefined;

package/build/cjs/demo/ComponentMap/edgeGeometry.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEdgeHitTolerance = exports.SAME_GROUP_ARC_SPAN_FACTOR = exports.SAME_GROUP_ARC_MIN_OUTSET = exports.EDGE_HIT_TOLERANCE = exports.EDGE_CURVE_SEGMENTS = exports.ARROW_SIZE = void 0;
+exports.getSameGroupArcOutset = getSameGroupArcOutset;
+exports.getEdgeGeometry = getEdgeGeometry;
+exports.getCubicBezierPoint = getCubicBezierPoint;
+exports.getEdgeDistance = getEdgeDistance;
+exports.orderEdgesForInteraction = orderEdgesForInteraction;
+exports.hitTestEdge = hitTestEdge;
+const graph_1 = require("./graph.js");
+exports.ARROW_SIZE = 12;
+exports.EDGE_CURVE_SEGMENTS = 24;
+exports.EDGE_HIT_TOLERANCE = 6;
+exports.SAME_GROUP_ARC_MIN_OUTSET = 64;
+exports.SAME_GROUP_ARC_SPAN_FACTOR = 0.25;
+const distance = (left, right) => Math.hypot(left.x - right.x, left.y - right.y);
+const getNodeCenter = (node) => ({
+    x: node.rect.x + node.rect.width / 2,
+    y: node.rect.y + node.rect.height / 2,
+});
+function getSameGroupArcOutset(source, target) {
+    const sourceCenter = getNodeCenter(source);
+    const targetCenter = getNodeCenter(target);
+    return Math.max(exports.SAME_GROUP_ARC_MIN_OUTSET, Math.abs(targetCenter.y - sourceCenter.y) * exports.SAME_GROUP_ARC_SPAN_FACTOR);
+}
+function distanceToSegment(point, start, end) {
+    const deltaX = end.x - start.x;
+    const deltaY = end.y - start.y;
+    const lengthSquared = deltaX * deltaX + deltaY * deltaY;
+    if (lengthSquared === 0) {
+        return distance(point, start);
+    }
+    const ratio = Math.max(0, Math.min(1, ((point.x - start.x) * deltaX + (point.y - start.y) * deltaY) / lengthSquared));
+    return distance(point, { x: start.x + ratio * deltaX, y: start.y + ratio * deltaY });
+}
+function triangleSign(point, first, second) {
+    return ((point.x - second.x) * (first.y - second.y) - (first.x - second.x) * (point.y - second.y));
+}
+function isInsideTriangle(point, [first, second, third]) {
+    const firstSign = triangleSign(point, first, second);
+    const secondSign = triangleSign(point, second, third);
+    const thirdSign = triangleSign(point, third, first);
+    const hasNegative = firstSign < 0 || secondSign < 0 || thirdSign < 0;
+    const hasPositive = firstSign > 0 || secondSign > 0 || thirdSign > 0;
+    return !(hasNegative && hasPositive);
+}
+function getEdgeGeometry(source, target) {
+    const sourceCenter = getNodeCenter(source);
+    const targetCenter = getNodeCenter(target);
+    let start;
+    let end;
+    let firstControl;
+    let secondControl;
+    if (source.kind === target.kind) {
+        start = { x: source.rect.x + source.rect.width, y: sourceCenter.y };
+        end = { x: target.rect.x + target.rect.width, y: targetCenter.y };
+        const arcX = Math.max(start.x, end.x) + getSameGroupArcOutset(source, target);
+        firstControl = { x: arcX, y: start.y };
+        secondControl = { x: arcX, y: end.y };
+    }
+    else {
+        const direction = targetCenter.x >= sourceCenter.x ? 1 : -1;
+        start = {
+            x: sourceCenter.x + (source.rect.width / 2) * direction,
+            y: sourceCenter.y,
+        };
+        end = {
+            x: targetCenter.x - (target.rect.width / 2) * direction,
+            y: targetCenter.y,
+        };
+        const controlX = (start.x + end.x) / 2;
+        firstControl = { x: controlX, y: start.y };
+        secondControl = { x: controlX, y: end.y };
+    }
+    const angle = Math.atan2(end.y - secondControl.y, end.x - secondControl.x);
+    const arrowhead = [
+        end,
+        {
+            x: end.x - exports.ARROW_SIZE * Math.cos(angle - Math.PI / 6),
+            y: end.y - exports.ARROW_SIZE * Math.sin(angle - Math.PI / 6),
+        },
+        {
+            x: end.x - exports.ARROW_SIZE * Math.cos(angle + Math.PI / 6),
+            y: end.y - exports.ARROW_SIZE * Math.sin(angle + Math.PI / 6),
+        },
+    ];
+    return { start, end, firstControl, secondControl, arrowhead };
+}
+function getCubicBezierPoint(geometry, ratio) {
+    const inverse = 1 - ratio;
+    return {
+        x: inverse ** 3 * geometry.start.x +
+            3 * inverse ** 2 * ratio * geometry.firstControl.x +
+            3 * inverse * ratio ** 2 * geometry.secondControl.x +
+            ratio ** 3 * geometry.end.x,
+        y: inverse ** 3 * geometry.start.y +
+            3 * inverse ** 2 * ratio * geometry.firstControl.y +
+            3 * inverse * ratio ** 2 * geometry.secondControl.y +
+            ratio ** 3 * geometry.end.y,
+    };
+}
+function getEdgeDistance(point, geometry) {
+    if (isInsideTriangle(point, geometry.arrowhead)) {
+        return 0;
+    }
+    let minimum = Number.POSITIVE_INFINITY;
+    let previous = geometry.start;
+    for (let index = 1; index <= exports.EDGE_CURVE_SEGMENTS; index += 1) {
+        const current = getCubicBezierPoint(geometry, index / exports.EDGE_CURVE_SEGMENTS);
+        minimum = Math.min(minimum, distanceToSegment(point, previous, current));
+        previous = current;
+    }
+    for (let index = 0; index < geometry.arrowhead.length; index += 1) {
+        minimum = Math.min(minimum, distanceToSegment(point, geometry.arrowhead[index], geometry.arrowhead[(index + 1) % geometry.arrowhead.length]));
+    }
+    return minimum;
+}
+const getEdgeHitTolerance = (scale) => exports.EDGE_HIT_TOLERANCE / Math.max(scale, Number.EPSILON);
+exports.getEdgeHitTolerance = getEdgeHitTolerance;
+function orderEdgesForInteraction(edges, hoveredEdgeKey, selectedEdgeKeys) {
+    const priority = (edge) => {
+        const key = (0, graph_1.getEdgeKey)(edge.source.id, edge.target.id);
+        if (selectedEdgeKeys.has(key)) {
+            return 2;
+        }
+        return key === hoveredEdgeKey ? 1 : 0;
+    };
+    return edges
+        .map((edge, index) => ({ edge, index, priority: priority(edge) }))
+        .sort((left, right) => left.priority - right.priority || left.index - right.index)
+        .map(({ edge }) => edge);
+}
+function hitTestEdge(edges, point, tolerance) {
+    let closest;
+    let closestDistance = Number.POSITIVE_INFINITY;
+    for (let index = edges.length - 1; index >= 0; index -= 1) {
+        const edge = edges[index];
+        const edgeDistance = getEdgeDistance(point, getEdgeGeometry(edge.source, edge.target));
+        if (edgeDistance <= tolerance && (!closest || edgeDistance < closestDistance)) {
+            closest = edge;
+            closestDistance = edgeDistance;
+        }
+    }
+    return closest;
+}
+//# sourceMappingURL=edgeGeometry.js.map

package/build/cjs/demo/ComponentMap/edgeGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edgeGeometry.js","sourceRoot":"../../../../src","sources":["demo/ComponentMap/edgeGeometry.ts"],"names":[],"mappings":"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","sourcesContent":["import {getEdgeKey} from './graph';\nimport type {LayoutEdge, LayoutNode, Point} from './model';\n\nexport const ARROW_SIZE = 12;\nexport const EDGE_CURVE_SEGMENTS = 24;\nexport const EDGE_HIT_TOLERANCE = 6;\nexport const SAME_GROUP_ARC_MIN_OUTSET = 64;\nexport const SAME_GROUP_ARC_SPAN_FACTOR = 0.25;\n\nexport interface EdgeGeometry {\n    start: Point;\n    end: Point;\n    firstControl: Point;\n    secondControl: Point;\n    arrowhead: [Point, Point, Point];\n}\n\nconst distance = (left: Point, right: Point) => Math.hypot(left.x - right.x, left.y - right.y);\n\nconst getNodeCenter = (node: LayoutNode): Point => ({\n    x: node.rect.x + node.rect.width / 2,\n    y: node.rect.y + node.rect.height / 2,\n});\n\nexport function getSameGroupArcOutset(source: LayoutNode, target: LayoutNode): number {\n    const sourceCenter = getNodeCenter(source);\n    const targetCenter = getNodeCenter(target);\n    return Math.max(\n        SAME_GROUP_ARC_MIN_OUTSET,\n        Math.abs(targetCenter.y - sourceCenter.y) * SAME_GROUP_ARC_SPAN_FACTOR,\n    );\n}\n\nfunction distanceToSegment(point: Point, start: Point, end: Point) {\n    const deltaX = end.x - start.x;\n    const deltaY = end.y - start.y;\n    const lengthSquared = deltaX * deltaX + deltaY * deltaY;\n    if (lengthSquared === 0) {\n        return distance(point, start);\n    }\n    const ratio = Math.max(\n        0,\n        Math.min(1, ((point.x - start.x) * deltaX + (point.y - start.y) * deltaY) / lengthSquared),\n    );\n    return distance(point, {x: start.x + ratio * deltaX, y: start.y + ratio * deltaY});\n}\n\nfunction triangleSign(point: Point, first: Point, second: Point) {\n    return (\n        (point.x - second.x) * (first.y - second.y) - (first.x - second.x) * (point.y - second.y)\n    );\n}\n\nfunction isInsideTriangle(point: Point, [first, second, third]: [Point, Point, Point]) {\n    const firstSign = triangleSign(point, first, second);\n    const secondSign = triangleSign(point, second, third);\n    const thirdSign = triangleSign(point, third, first);\n    const hasNegative = firstSign < 0 || secondSign < 0 || thirdSign < 0;\n    const hasPositive = firstSign > 0 || secondSign > 0 || thirdSign > 0;\n    return !(hasNegative && hasPositive);\n}\n\nexport function getEdgeGeometry(source: LayoutNode, target: LayoutNode): EdgeGeometry {\n    const sourceCenter = getNodeCenter(source);\n    const targetCenter = getNodeCenter(target);\n    let start: Point;\n    let end: Point;\n    let firstControl: Point;\n    let secondControl: Point;\n\n    if (source.kind === target.kind) {\n        start = {x: source.rect.x + source.rect.width, y: sourceCenter.y};\n        end = {x: target.rect.x + target.rect.width, y: targetCenter.y};\n        const arcX = Math.max(start.x, end.x) + getSameGroupArcOutset(source, target);\n        firstControl = {x: arcX, y: start.y};\n        secondControl = {x: arcX, y: end.y};\n    } else {\n        const direction = targetCenter.x >= sourceCenter.x ? 1 : -1;\n        start = {\n            x: sourceCenter.x + (source.rect.width / 2) * direction,\n            y: sourceCenter.y,\n        };\n        end = {\n            x: targetCenter.x - (target.rect.width / 2) * direction,\n            y: targetCenter.y,\n        };\n        const controlX = (start.x + end.x) / 2;\n        firstControl = {x: controlX, y: start.y};\n        secondControl = {x: controlX, y: end.y};\n    }\n    const angle = Math.atan2(end.y - secondControl.y, end.x - secondControl.x);\n    const arrowhead: [Point, Point, Point] = [\n        end,\n        {\n            x: end.x - ARROW_SIZE * Math.cos(angle - Math.PI / 6),\n            y: end.y - ARROW_SIZE * Math.sin(angle - Math.PI / 6),\n        },\n        {\n            x: end.x - ARROW_SIZE * Math.cos(angle + Math.PI / 6),\n            y: end.y - ARROW_SIZE * Math.sin(angle + Math.PI / 6),\n        },\n    ];\n\n    return {start, end, firstControl, secondControl, arrowhead};\n}\n\nexport function getCubicBezierPoint(geometry: EdgeGeometry, ratio: number): Point {\n    const inverse = 1 - ratio;\n    return {\n        x:\n            inverse ** 3 * geometry.start.x +\n            3 * inverse ** 2 * ratio * geometry.firstControl.x +\n            3 * inverse * ratio ** 2 * geometry.secondControl.x +\n            ratio ** 3 * geometry.end.x,\n        y:\n            inverse ** 3 * geometry.start.y +\n            3 * inverse ** 2 * ratio * geometry.firstControl.y +\n            3 * inverse * ratio ** 2 * geometry.secondControl.y +\n            ratio ** 3 * geometry.end.y,\n    };\n}\n\nexport function getEdgeDistance(point: Point, geometry: EdgeGeometry): number {\n    if (isInsideTriangle(point, geometry.arrowhead)) {\n        return 0;\n    }\n\n    let minimum = Number.POSITIVE_INFINITY;\n    let previous = geometry.start;\n    for (let index = 1; index <= EDGE_CURVE_SEGMENTS; index += 1) {\n        const current = getCubicBezierPoint(geometry, index / EDGE_CURVE_SEGMENTS);\n        minimum = Math.min(minimum, distanceToSegment(point, previous, current));\n        previous = current;\n    }\n\n    for (let index = 0; index < geometry.arrowhead.length; index += 1) {\n        minimum = Math.min(\n            minimum,\n            distanceToSegment(\n                point,\n                geometry.arrowhead[index],\n                geometry.arrowhead[(index + 1) % geometry.arrowhead.length],\n            ),\n        );\n    }\n    return minimum;\n}\n\nexport const getEdgeHitTolerance = (scale: number) =>\n    EDGE_HIT_TOLERANCE / Math.max(scale, Number.EPSILON);\n\nexport function orderEdgesForInteraction(\n    edges: LayoutEdge[],\n    hoveredEdgeKey: string | undefined,\n    selectedEdgeKeys: ReadonlySet<string>,\n): LayoutEdge[] {\n    const priority = (edge: LayoutEdge) => {\n        const key = getEdgeKey(edge.source.id, edge.target.id);\n        if (selectedEdgeKeys.has(key)) {\n            return 2;\n        }\n        return key === hoveredEdgeKey ? 1 : 0;\n    };\n\n    return edges\n        .map((edge, index) => ({edge, index, priority: priority(edge)}))\n        .sort((left, right) => left.priority - right.priority || left.index - right.index)\n        .map(({edge}) => edge);\n}\n\nexport function hitTestEdge(\n    edges: LayoutEdge[],\n    point: Point,\n    tolerance: number,\n): LayoutEdge | undefined {\n    let closest: LayoutEdge | undefined;\n    let closestDistance = Number.POSITIVE_INFINITY;\n    for (let index = edges.length - 1; index >= 0; index -= 1) {\n        const edge = edges[index];\n        const edgeDistance = getEdgeDistance(point, getEdgeGeometry(edge.source, edge.target));\n        if (edgeDistance <= tolerance && (!closest || edgeDistance < closestDistance)) {\n            closest = edge;\n            closestDistance = edgeDistance;\n        }\n    }\n    return closest;\n}\n"]}

package/build/cjs/demo/ComponentMap/graph.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentMapData, ComponentMapEmphasis } from "./model.js";
+export declare const getEdgeKey: (source: string, target: string) => string;
+interface ComponentMapEmphasisRequest {
+    selectedNodeId?: string;
+    searchQuery?: string;
+}
+export declare function getRelatedNodeIds(data: ComponentMapData, selectedId: string): Set<string>;
+export declare function getEmphasis(data: ComponentMapData, { selectedNodeId, searchQuery }?: ComponentMapEmphasisRequest): ComponentMapEmphasis;
+export {};

package/build/cjs/demo/ComponentMap/graph.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEdgeKey = void 0;
+exports.getRelatedNodeIds = getRelatedNodeIds;
+exports.getEmphasis = getEmphasis;
+const getEdgeKey = (source, target) => `${source}\0${target}`;
+exports.getEdgeKey = getEdgeKey;
+const normalizeSearchValue = (value) => value.trim().toLowerCase();
+function createAdjacency(data) {
+    const incoming = new Map();
+    const outgoing = new Map();
+    for (const { source, target } of data.edges) {
+        const outgoingTargets = outgoing.get(source) ?? [];
+        outgoingTargets.push(target);
+        outgoing.set(source, outgoingTargets);
+        const incomingSources = incoming.get(target) ?? [];
+        incomingSources.push(source);
+        incoming.set(target, incomingSources);
+    }
+    return { incoming, outgoing };
+}
+function visit(start, adjacency, result) {
+    const queue = [start];
+    while (queue.length) {
+        const current = queue.shift();
+        for (const next of adjacency.get(current) ?? []) {
+            if (!result.has(next)) {
+                result.add(next);
+                queue.push(next);
+            }
+        }
+    }
+}
+function getRelatedNodeIds(data, selectedId) {
+    if (!data.nodes.some(({ id }) => id === selectedId)) {
+        return new Set();
+    }
+    const { incoming, outgoing } = createAdjacency(data);
+    const ancestorIds = new Set([selectedId]);
+    const descendantIds = new Set([selectedId]);
+    visit(selectedId, incoming, ancestorIds);
+    visit(selectedId, outgoing, descendantIds);
+    return new Set([...ancestorIds, ...descendantIds]);
+}
+function getEmphasis(data, { selectedNodeId, searchQuery = '' } = {}) {
+    const normalizedQuery = normalizeSearchValue(searchQuery);
+    if (normalizedQuery) {
+        return {
+            mode: 'search',
+            activeNodeIds: new Set(data.nodes
+                .filter(({ label }) => normalizeSearchValue(label).includes(normalizedQuery))
+                .map(({ id }) => id)),
+            activeEdgeIds: new Set(),
+        };
+    }
+    if (!selectedNodeId) {
+        return { mode: 'none', activeNodeIds: new Set(), activeEdgeIds: new Set() };
+    }
+    const activeNodeIds = getRelatedNodeIds(data, selectedNodeId);
+    return {
+        mode: 'selection',
+        activeNodeIds,
+        activeEdgeIds: new Set(data.edges
+            .filter(({ source, target }) => activeNodeIds.has(source) && activeNodeIds.has(target))
+            .map(({ source, target }) => (0, exports.getEdgeKey)(source, target))),
+    };
+}
+//# sourceMappingURL=graph.js.map

package/build/cjs/demo/ComponentMap/graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph.js","sourceRoot":"../../../../src","sources":["demo/ComponentMap/graph.ts"],"names":[],"mappings":";;;AAyCA,8CAaC;AAED,kCAiCC;AAvFM,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,EAAE,CAAC,GAAG,MAAM,KAAK,MAAM,EAAE,CAAC;AAAxE,QAAA,UAAU,cAA8D;AAOrF,MAAM,oBAAoB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;AAE3E,SAAS,eAAe,CAAC,IAAsB;IAC3C,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAoB,CAAC;IAC7C,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAoB,CAAC;IAE7C,KAAK,MAAM,EAAC,MAAM,EAAE,MAAM,EAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACxC,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnD,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7B,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;QAEtC,MAAM,eAAe,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnD,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7B,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;AAChC,CAAC;AAED,SAAS,KAAK,CAAC,KAAa,EAAE,SAAgC,EAAE,MAAmB;IAC/E,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;IACtB,OAAO,KAAK,CAAC,MAAM,EAAE,CAAC;QAClB,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAY,CAAC;QACxC,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;YAC9C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;gBACpB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBACjB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACrB,CAAC;QACL,CAAC;IACL,CAAC;AACL,CAAC;AAED,SAAgB,iBAAiB,CAAC,IAAsB,EAAE,UAAkB;IACxE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,KAAK,UAAU,CAAC,EAAE,CAAC;QAChD,OAAO,IAAI,GAAG,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAC,QAAQ,EAAE,QAAQ,EAAC,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;IAC1C,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;IAE5C,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;IAE3C,OAAO,IAAI,GAAG,CAAC,CAAC,GAAG,WAAW,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC;AACvD,CAAC;AAED,SAAgB,WAAW,CACvB,IAAsB,EACtB,EAAC,cAAc,EAAE,WAAW,GAAG,EAAE,KAAiC,EAAE;IAEpE,MAAM,eAAe,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC1D,IAAI,eAAe,EAAE,CAAC;QAClB,OAAO;YACH,IAAI,EAAE,QAAQ;YACd,aAAa,EAAE,IAAI,GAAG,CAClB,IAAI,CAAC,KAAK;iBACL,MAAM,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;iBAC1E,GAAG,CAAC,CAAC,EAAC,EAAE,EAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CACzB;YACD,aAAa,EAAE,IAAI,GAAG,EAAE;SAC3B,CAAC;IACN,CAAC;IAED,IAAI,CAAC,cAAc,EAAE,CAAC;QAClB,OAAO,EAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,GAAG,EAAE,EAAE,aAAa,EAAE,IAAI,GAAG,EAAE,EAAC,CAAC;IAC9E,CAAC;IAED,MAAM,aAAa,GAAG,iBAAiB,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC9D,OAAO;QACH,IAAI,EAAE,WAAW;QACjB,aAAa;QACb,aAAa,EAAE,IAAI,GAAG,CAClB,IAAI,CAAC,KAAK;aACL,MAAM,CACH,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAC/E;aACA,GAAG,CAAC,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC,EAAE,EAAE,CAAC,IAAA,kBAAU,EAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAC7D;KACJ,CAAC;AACN,CAAC","sourcesContent":["import type {ComponentMapData, ComponentMapEmphasis} from './model';\n\nexport const getEdgeKey = (source: string, target: string) => `${source}\\0${target}`;\n\ninterface ComponentMapEmphasisRequest {\n    selectedNodeId?: string;\n    searchQuery?: string;\n}\n\nconst normalizeSearchValue = (value: string) => value.trim().toLowerCase();\n\nfunction createAdjacency(data: ComponentMapData) {\n    const incoming = new Map<string, string[]>();\n    const outgoing = new Map<string, string[]>();\n\n    for (const {source, target} of data.edges) {\n        const outgoingTargets = outgoing.get(source) ?? [];\n        outgoingTargets.push(target);\n        outgoing.set(source, outgoingTargets);\n\n        const incomingSources = incoming.get(target) ?? [];\n        incomingSources.push(source);\n        incoming.set(target, incomingSources);\n    }\n\n    return {incoming, outgoing};\n}\n\nfunction visit(start: string, adjacency: Map<string, string[]>, result: Set<string>) {\n    const queue = [start];\n    while (queue.length) {\n        const current = queue.shift() as string;\n        for (const next of adjacency.get(current) ?? []) {\n            if (!result.has(next)) {\n                result.add(next);\n                queue.push(next);\n            }\n        }\n    }\n}\n\nexport function getRelatedNodeIds(data: ComponentMapData, selectedId: string): Set<string> {\n    if (!data.nodes.some(({id}) => id === selectedId)) {\n        return new Set();\n    }\n\n    const {incoming, outgoing} = createAdjacency(data);\n    const ancestorIds = new Set([selectedId]);\n    const descendantIds = new Set([selectedId]);\n\n    visit(selectedId, incoming, ancestorIds);\n    visit(selectedId, outgoing, descendantIds);\n\n    return new Set([...ancestorIds, ...descendantIds]);\n}\n\nexport function getEmphasis(\n    data: ComponentMapData,\n    {selectedNodeId, searchQuery = ''}: ComponentMapEmphasisRequest = {},\n): ComponentMapEmphasis {\n    const normalizedQuery = normalizeSearchValue(searchQuery);\n    if (normalizedQuery) {\n        return {\n            mode: 'search',\n            activeNodeIds: new Set(\n                data.nodes\n                    .filter(({label}) => normalizeSearchValue(label).includes(normalizedQuery))\n                    .map(({id}) => id),\n            ),\n            activeEdgeIds: new Set(),\n        };\n    }\n\n    if (!selectedNodeId) {\n        return {mode: 'none', activeNodeIds: new Set(), activeEdgeIds: new Set()};\n    }\n\n    const activeNodeIds = getRelatedNodeIds(data, selectedNodeId);\n    return {\n        mode: 'selection',\n        activeNodeIds,\n        activeEdgeIds: new Set(\n            data.edges\n                .filter(\n                    ({source, target}) => activeNodeIds.has(source) && activeNodeIds.has(target),\n                )\n                .map(({source, target}) => getEdgeKey(source, target)),\n        ),\n    };\n}\n"]}

package/build/cjs/demo/ComponentMap/layout.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentMapData, ComponentMapLayout, LayoutNode, Point } from "./model.js";
+export declare const NODE_MIN_WIDTH = 208;
+export declare const NODE_HEIGHT = 48;
+export declare const NODE_LABEL_FONT = "600 13px sans-serif";
+export declare const NODE_LABEL_PADDING = 16;
+export declare const VERTICAL_GAP = 32;
+export declare const GROUP_GAP = 112;
+export declare const BAND_HEADER_HEIGHT = 36;
+export declare const WORLD_PADDING = 56;
+export declare const KIND_ORDER: readonly ["block", "sub-block", "component"];
+export declare function layoutComponentMap(data: ComponentMapData): ComponentMapLayout;
+export declare function hitTest(layoutOrNodes: ComponentMapLayout | LayoutNode[], point: Point): LayoutNode | undefined;

package/build/cjs/demo/ComponentMap/layout.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KIND_ORDER = exports.WORLD_PADDING = exports.BAND_HEADER_HEIGHT = exports.GROUP_GAP = exports.VERTICAL_GAP = exports.NODE_LABEL_PADDING = exports.NODE_LABEL_FONT = exports.NODE_HEIGHT = exports.NODE_MIN_WIDTH = void 0;
+exports.layoutComponentMap = layoutComponentMap;
+exports.hitTest = hitTest;
+const edgeGeometry_1 = require("./edgeGeometry.js");
+exports.NODE_MIN_WIDTH = 208;
+exports.NODE_HEIGHT = 48;
+exports.NODE_LABEL_FONT = '600 13px sans-serif';
+exports.NODE_LABEL_PADDING = 16;
+exports.VERTICAL_GAP = 32;
+exports.GROUP_GAP = 112;
+exports.BAND_HEADER_HEIGHT = 36;
+exports.WORLD_PADDING = 56;
+exports.KIND_ORDER = ['block', 'sub-block', 'component'];
+const BAND_LABELS = {
+    block: 'Blocks',
+    'sub-block': 'Sub-blocks',
+    component: 'Components',
+};
+function sortByLabel(nodes) {
+    return [...nodes].sort((left, right) => left.label.localeCompare(right.label));
+}
+function createLabelMeasurer() {
+    if (typeof CanvasRenderingContext2D !== 'undefined' && typeof document !== 'undefined') {
+        try {
+            const context = document.createElement('canvas').getContext('2d');
+            if (context) {
+                context.font = exports.NODE_LABEL_FONT;
+                return (label) => context.measureText(label).width;
+            }
+        }
+        catch {
+            // Use deterministic metrics when Canvas is unavailable (for example during SSR).
+        }
+    }
+    return (label) => Array.from(label).length * 7;
+}
+const getNodesHeight = (count) => count === 0 ? 0 : count * exports.NODE_HEIGHT + (count - 1) * exports.VERTICAL_GAP;
+function measureGroup(kind, nodes, measureLabel) {
+    const sortedNodes = sortByLabel(nodes);
+    const nodeWidth = Math.max(exports.NODE_MIN_WIDTH, ...sortedNodes.map(({ label }) => measureLabel(label) + exports.NODE_LABEL_PADDING * 2));
+    return {
+        kind,
+        label: BAND_LABELS[kind],
+        nodes: sortedNodes,
+        nodeWidth,
+        visibleHeight: exports.BAND_HEADER_HEIGHT + getNodesHeight(sortedNodes.length),
+    };
+}
+function createBand(group, x, y) {
+    return {
+        kind: group.kind,
+        label: group.label,
+        bounds: {
+            x,
+            y,
+            width: group.nodeWidth,
+            height: group.visibleHeight,
+        },
+        nodes: group.nodes.map((node, index) => ({
+            ...node,
+            rect: {
+                x,
+                y: y + exports.BAND_HEADER_HEIGHT + index * (exports.NODE_HEIGHT + exports.VERTICAL_GAP),
+                width: group.nodeWidth,
+                height: exports.NODE_HEIGHT,
+            },
+        })),
+    };
+}
+function resolveEdges(edges, nodeById) {
+    return edges.map(({ source, target }) => {
+        const sourceNode = nodeById.get(source);
+        const targetNode = nodeById.get(target);
+        if (!sourceNode || !targetNode) {
+            throw new Error(`Component map edge references unknown node: ${source} -> ${target}`);
+        }
+        return { source: sourceNode, target: targetNode };
+    });
+}
+function layoutComponentMap(data) {
+    const nodesByKind = new Map(exports.KIND_ORDER.map((kind) => [kind, []]));
+    for (const node of data.nodes) {
+        nodesByKind.get(node.kind)?.push(node);
+    }
+    const measureLabel = createLabelMeasurer();
+    const measuredGroups = exports.KIND_ORDER.map((kind) => measureGroup(kind, nodesByKind.get(kind) ?? [], measureLabel));
+    const maximumGroupHeight = Math.max(...measuredGroups.map(({ visibleHeight }) => visibleHeight));
+    const commonCenterY = exports.WORLD_PADDING + maximumGroupHeight / 2;
+    const provisionalBands = measuredGroups.map((group) => createBand(group, 0, commonCenterY - group.visibleHeight / 2));
+    const provisionalNodes = provisionalBands.flatMap(({ nodes }) => nodes);
+    const provisionalNodeById = new Map(provisionalNodes.map((node) => [node.id, node]));
+    const provisionalEdges = resolveEdges(data.edges, provisionalNodeById);
+    const corridorByKind = new Map(exports.KIND_ORDER.map((kind) => [kind, 0]));
+    for (const edge of provisionalEdges) {
+        if (edge.source.kind === edge.target.kind) {
+            corridorByKind.set(edge.source.kind, Math.max(corridorByKind.get(edge.source.kind) ?? 0, (0, edgeGeometry_1.getSameGroupArcOutset)(edge.source, edge.target) + edgeGeometry_1.ARROW_SIZE));
+        }
+    }
+    let nextGroupX = exports.WORLD_PADDING;
+    const bands = provisionalBands.map((band, index) => {
+        const x = nextGroupX;
+        const placedBand = {
+            ...band,
+            bounds: { ...band.bounds, x },
+            nodes: band.nodes.map((node) => ({
+                ...node,
+                rect: { ...node.rect, x },
+            })),
+        };
+        nextGroupX =
+            x +
+                band.bounds.width +
+                (corridorByKind.get(band.kind) ?? 0) +
+                (index === provisionalBands.length - 1 ? 0 : exports.GROUP_GAP);
+        return placedBand;
+    });
+    const nodes = bands.flatMap((band) => band.nodes);
+    const nodeById = new Map(nodes.map((node) => [node.id, node]));
+    const edges = resolveEdges(data.edges, nodeById);
+    const rightmostBand = bands[bands.length - 1];
+    const rightmost = rightmostBand.bounds.x +
+        rightmostBand.bounds.width +
+        (corridorByKind.get(rightmostBand.kind) ?? 0);
+    return {
+        bands,
+        nodes,
+        edges,
+        bounds: {
+            x: 0,
+            y: 0,
+            width: rightmost + exports.WORLD_PADDING,
+            height: maximumGroupHeight + exports.WORLD_PADDING * 2,
+        },
+    };
+}
+function hitTest(layoutOrNodes, point) {
+    const nodes = Array.isArray(layoutOrNodes) ? layoutOrNodes : layoutOrNodes.nodes;
+    for (let index = nodes.length - 1; index >= 0; index -= 1) {
+        const node = nodes[index];
+        const { x, y, width, height } = node.rect;
+        if (point.x >= x && point.x <= x + width && point.y >= y && point.y <= y + height) {
+            return node;
+        }
+    }
+    return undefined;
+}
+//# sourceMappingURL=layout.js.map

package/build/cjs/demo/ComponentMap/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"../../../../src","sources":["demo/ComponentMap/layout.ts"],"names":[],"mappings":";;;AAmHA,gDAyEC;AAED,0BAeC;AA7MD,oDAAiE;AAapD,QAAA,cAAc,GAAG,GAAG,CAAC;AACrB,QAAA,WAAW,GAAG,EAAE,CAAC;AACjB,QAAA,eAAe,GAAG,qBAAqB,CAAC;AACxC,QAAA,kBAAkB,GAAG,EAAE,CAAC;AACxB,QAAA,YAAY,GAAG,EAAE,CAAC;AAClB,QAAA,SAAS,GAAG,GAAG,CAAC;AAChB,QAAA,kBAAkB,GAAG,EAAE,CAAC;AACxB,QAAA,aAAa,GAAG,EAAE,CAAC;AACnB,QAAA,UAAU,GAAG,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,CAAU,CAAC;AAEvE,MAAM,WAAW,GAAyC;IACtD,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,YAAY;IACzB,SAAS,EAAE,YAAY;CAC1B,CAAC;AAEF,SAAS,WAAW,CAAC,KAAyB;IAC1C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACnF,CAAC;AAED,SAAS,mBAAmB;IACxB,IAAI,OAAO,wBAAwB,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACrF,IAAI,CAAC;YACD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAClE,IAAI,OAAO,EAAE,CAAC;gBACV,OAAO,CAAC,IAAI,GAAG,uBAAe,CAAC;gBAC/B,OAAO,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;YAC/D,CAAC;QACL,CAAC;QAAC,MAAM,CAAC;YACL,iFAAiF;QACrF,CAAC;IACL,CAAC;IAED,OAAO,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;AAC3D,CAAC;AAUD,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE,CACrC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,mBAAW,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,oBAAY,CAAC;AAEvE,SAAS,YAAY,CACjB,IAA0B,EAC1B,KAAyB,EACzB,YAAuC;IAEvC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CACtB,sBAAc,EACd,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,0BAAkB,GAAG,CAAC,CAAC,CAChF,CAAC;IACF,OAAO;QACH,IAAI;QACJ,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;QACxB,KAAK,EAAE,WAAW;QAClB,SAAS;QACT,aAAa,EAAE,0BAAkB,GAAG,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC;KACzE,CAAC;AACN,CAAC;AAED,SAAS,UAAU,CAAC,KAAoB,EAAE,CAAS,EAAE,CAAS;IAC1D,OAAO;QACH,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,MAAM,EAAE;YACJ,CAAC;YACD,CAAC;YACD,KAAK,EAAE,KAAK,CAAC,SAAS;YACtB,MAAM,EAAE,KAAK,CAAC,aAAa;SAC9B;QACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YACrC,GAAG,IAAI;YACP,IAAI,EAAE;gBACF,CAAC;gBACD,CAAC,EAAE,CAAC,GAAG,0BAAkB,GAAG,KAAK,GAAG,CAAC,mBAAW,GAAG,oBAAY,CAAC;gBAChE,KAAK,EAAE,KAAK,CAAC,SAAS;gBACtB,MAAM,EAAE,mBAAW;aACtB;SACJ,CAAC,CAAC;KACN,CAAC;AACN,CAAC;AAED,SAAS,YAAY,CACjB,KAAyB,EACzB,QAAyC;IAEzC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC,EAAE,EAAE;QAClC,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACxC,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,+CAA+C,MAAM,OAAO,MAAM,EAAE,CAAC,CAAC;QAC1F,CAAC;QACD,OAAO,EAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAC,CAAC;IACpD,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAgB,kBAAkB,CAAC,IAAsB;IACrD,MAAM,WAAW,GAAG,IAAI,GAAG,CACvB,kBAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CACvC,CAAC;IACF,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QAC5B,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAC3C,MAAM,cAAc,GAAG,kBAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3C,YAAY,CAAC,IAAI,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,YAAY,CAAC,CAChE,CAAC;IACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,EAAC,aAAa,EAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAC/F,MAAM,aAAa,GAAG,qBAAa,GAAG,kBAAkB,GAAG,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAClD,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,CAChE,CAAC;IACF,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,mBAAmB,GAAG,IAAI,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACrF,MAAM,gBAAgB,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,GAAG,CAC1B,kBAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CACtC,CAAC;IACF,KAAK,MAAM,IAAI,IAAI,gBAAgB,EAAE,CAAC;QAClC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACxC,cAAc,CAAC,GAAG,CACd,IAAI,CAAC,MAAM,CAAC,IAAI,EAChB,IAAI,CAAC,GAAG,CACJ,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAA,oCAAqB,EAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,yBAAU,CAC/D,CACJ,CAAC;QACN,CAAC;IACL,CAAC;IAED,IAAI,UAAU,GAAG,qBAAa,CAAC;IAC/B,MAAM,KAAK,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC/C,MAAM,CAAC,GAAG,UAAU,CAAC;QACrB,MAAM,UAAU,GAAe;YAC3B,GAAG,IAAI;YACP,MAAM,EAAE,EAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAC;YAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBAC7B,GAAG,IAAI;gBACP,IAAI,EAAE,EAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAC;aAC1B,CAAC,CAAC;SACN,CAAC;QACF,UAAU;YACN,CAAC;gBACD,IAAI,CAAC,MAAM,CAAC,KAAK;gBACjB,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC,KAAK,KAAK,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAS,CAAC,CAAC;QAC5D,OAAO,UAAU,CAAC;IACtB,CAAC,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,SAAS,GACX,aAAa,CAAC,MAAM,CAAC,CAAC;QACtB,aAAa,CAAC,MAAM,CAAC,KAAK;QAC1B,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAElD,OAAO;QACH,KAAK;QACL,KAAK;QACL,KAAK;QACL,MAAM,EAAE;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,KAAK,EAAE,SAAS,GAAG,qBAAa;YAChC,MAAM,EAAE,kBAAkB,GAAG,qBAAa,GAAG,CAAC;SACjD;KACJ,CAAC;AACN,CAAC;AAED,SAAgB,OAAO,CACnB,aAAgD,EAChD,KAAY;IAEZ,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;IAEjF,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;QACxD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAM,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QACxC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC;YAChF,OAAO,IAAI,CAAC;QAChB,CAAC;IACL,CAAC;IAED,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import {ARROW_SIZE, getSameGroupArcOutset} from './edgeGeometry';\nimport type {\n    ComponentMapData,\n    ComponentMapEdge,\n    ComponentMapLayout,\n    ComponentMapNode,\n    ComponentMapNodeKind,\n    LayoutBand,\n    LayoutEdge,\n    LayoutNode,\n    Point,\n} from './model';\n\nexport const NODE_MIN_WIDTH = 208;\nexport const NODE_HEIGHT = 48;\nexport const NODE_LABEL_FONT = '600 13px sans-serif';\nexport const NODE_LABEL_PADDING = 16;\nexport const VERTICAL_GAP = 32;\nexport const GROUP_GAP = 112;\nexport const BAND_HEADER_HEIGHT = 36;\nexport const WORLD_PADDING = 56;\nexport const KIND_ORDER = ['block', 'sub-block', 'component'] as const;\n\nconst BAND_LABELS: Record<ComponentMapNodeKind, string> = {\n    block: 'Blocks',\n    'sub-block': 'Sub-blocks',\n    component: 'Components',\n};\n\nfunction sortByLabel(nodes: ComponentMapNode[]) {\n    return [...nodes].sort((left, right) => left.label.localeCompare(right.label));\n}\n\nfunction createLabelMeasurer() {\n    if (typeof CanvasRenderingContext2D !== 'undefined' && typeof document !== 'undefined') {\n        try {\n            const context = document.createElement('canvas').getContext('2d');\n            if (context) {\n                context.font = NODE_LABEL_FONT;\n                return (label: string) => context.measureText(label).width;\n            }\n        } catch {\n            // Use deterministic metrics when Canvas is unavailable (for example during SSR).\n        }\n    }\n\n    return (label: string) => Array.from(label).length * 7;\n}\n\ninterface MeasuredGroup {\n    kind: ComponentMapNodeKind;\n    label: string;\n    nodes: ComponentMapNode[];\n    nodeWidth: number;\n    visibleHeight: number;\n}\n\nconst getNodesHeight = (count: number) =>\n    count === 0 ? 0 : count * NODE_HEIGHT + (count - 1) * VERTICAL_GAP;\n\nfunction measureGroup(\n    kind: ComponentMapNodeKind,\n    nodes: ComponentMapNode[],\n    measureLabel: (label: string) => number,\n): MeasuredGroup {\n    const sortedNodes = sortByLabel(nodes);\n    const nodeWidth = Math.max(\n        NODE_MIN_WIDTH,\n        ...sortedNodes.map(({label}) => measureLabel(label) + NODE_LABEL_PADDING * 2),\n    );\n    return {\n        kind,\n        label: BAND_LABELS[kind],\n        nodes: sortedNodes,\n        nodeWidth,\n        visibleHeight: BAND_HEADER_HEIGHT + getNodesHeight(sortedNodes.length),\n    };\n}\n\nfunction createBand(group: MeasuredGroup, x: number, y: number): LayoutBand {\n    return {\n        kind: group.kind,\n        label: group.label,\n        bounds: {\n            x,\n            y,\n            width: group.nodeWidth,\n            height: group.visibleHeight,\n        },\n        nodes: group.nodes.map((node, index) => ({\n            ...node,\n            rect: {\n                x,\n                y: y + BAND_HEADER_HEIGHT + index * (NODE_HEIGHT + VERTICAL_GAP),\n                width: group.nodeWidth,\n                height: NODE_HEIGHT,\n            },\n        })),\n    };\n}\n\nfunction resolveEdges(\n    edges: ComponentMapEdge[],\n    nodeById: ReadonlyMap<string, LayoutNode>,\n): LayoutEdge[] {\n    return edges.map(({source, target}) => {\n        const sourceNode = nodeById.get(source);\n        const targetNode = nodeById.get(target);\n        if (!sourceNode || !targetNode) {\n            throw new Error(`Component map edge references unknown node: ${source} -> ${target}`);\n        }\n        return {source: sourceNode, target: targetNode};\n    });\n}\n\nexport function layoutComponentMap(data: ComponentMapData): ComponentMapLayout {\n    const nodesByKind = new Map<ComponentMapNodeKind, ComponentMapNode[]>(\n        KIND_ORDER.map((kind) => [kind, []]),\n    );\n    for (const node of data.nodes) {\n        nodesByKind.get(node.kind)?.push(node);\n    }\n\n    const measureLabel = createLabelMeasurer();\n    const measuredGroups = KIND_ORDER.map((kind) =>\n        measureGroup(kind, nodesByKind.get(kind) ?? [], measureLabel),\n    );\n    const maximumGroupHeight = Math.max(...measuredGroups.map(({visibleHeight}) => visibleHeight));\n    const commonCenterY = WORLD_PADDING + maximumGroupHeight / 2;\n    const provisionalBands = measuredGroups.map((group) =>\n        createBand(group, 0, commonCenterY - group.visibleHeight / 2),\n    );\n    const provisionalNodes = provisionalBands.flatMap(({nodes}) => nodes);\n    const provisionalNodeById = new Map(provisionalNodes.map((node) => [node.id, node]));\n    const provisionalEdges = resolveEdges(data.edges, provisionalNodeById);\n    const corridorByKind = new Map<ComponentMapNodeKind, number>(\n        KIND_ORDER.map((kind) => [kind, 0]),\n    );\n    for (const edge of provisionalEdges) {\n        if (edge.source.kind === edge.target.kind) {\n            corridorByKind.set(\n                edge.source.kind,\n                Math.max(\n                    corridorByKind.get(edge.source.kind) ?? 0,\n                    getSameGroupArcOutset(edge.source, edge.target) + ARROW_SIZE,\n                ),\n            );\n        }\n    }\n\n    let nextGroupX = WORLD_PADDING;\n    const bands = provisionalBands.map((band, index) => {\n        const x = nextGroupX;\n        const placedBand: LayoutBand = {\n            ...band,\n            bounds: {...band.bounds, x},\n            nodes: band.nodes.map((node) => ({\n                ...node,\n                rect: {...node.rect, x},\n            })),\n        };\n        nextGroupX =\n            x +\n            band.bounds.width +\n            (corridorByKind.get(band.kind) ?? 0) +\n            (index === provisionalBands.length - 1 ? 0 : GROUP_GAP);\n        return placedBand;\n    });\n    const nodes = bands.flatMap((band) => band.nodes);\n    const nodeById = new Map(nodes.map((node) => [node.id, node]));\n    const edges = resolveEdges(data.edges, nodeById);\n    const rightmostBand = bands[bands.length - 1];\n    const rightmost =\n        rightmostBand.bounds.x +\n        rightmostBand.bounds.width +\n        (corridorByKind.get(rightmostBand.kind) ?? 0);\n\n    return {\n        bands,\n        nodes,\n        edges,\n        bounds: {\n            x: 0,\n            y: 0,\n            width: rightmost + WORLD_PADDING,\n            height: maximumGroupHeight + WORLD_PADDING * 2,\n        },\n    };\n}\n\nexport function hitTest(\n    layoutOrNodes: ComponentMapLayout | LayoutNode[],\n    point: Point,\n): LayoutNode | undefined {\n    const nodes = Array.isArray(layoutOrNodes) ? layoutOrNodes : layoutOrNodes.nodes;\n\n    for (let index = nodes.length - 1; index >= 0; index -= 1) {\n        const node = nodes[index];\n        const {x, y, width, height} = node.rect;\n        if (point.x >= x && point.x <= x + width && point.y >= y && point.y <= y + height) {\n            return node;\n        }\n    }\n\n    return undefined;\n}\n"]}

package/build/cjs/demo/ComponentMap/model.d.ts

@@ -0,0 +1,55 @@
+export type ComponentMapNodeKind = 'block' | 'sub-block' | 'component';
+export interface ComponentMapNode {
+    id: string;
+    kind: ComponentMapNodeKind;
+    exportName: string;
+    label: string;
+}
+export interface ComponentMapEdge {
+    source: string;
+    target: string;
+}
+export interface ComponentMapData {
+    nodes: ComponentMapNode[];
+    edges: ComponentMapEdge[];
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Rect extends Point {
+    width: number;
+    height: number;
+}
+export interface LayoutNode extends ComponentMapNode {
+    rect: Rect;
+}
+export interface LayoutBand {
+    kind: ComponentMapNodeKind;
+    label: string;
+    bounds: Rect;
+    nodes: LayoutNode[];
+}
+export interface LayoutEdge {
+    source: LayoutNode;
+    target: LayoutNode;
+}
+export interface ComponentMapLayout {
+    nodes: LayoutNode[];
+    bands: LayoutBand[];
+    edges: LayoutEdge[];
+    bounds: Rect;
+}
+export interface ViewportSize {
+    width: number;
+    height: number;
+}
+export interface ViewportTransform extends Point {
+    scale: number;
+}
+export type ComponentMapEmphasisMode = 'none' | 'selection' | 'search';
+export interface ComponentMapEmphasis {
+    mode: ComponentMapEmphasisMode;
+    activeNodeIds: Set<string>;
+    activeEdgeIds: Set<string>;
+}

package/build/cjs/demo/ComponentMap/model.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=model.js.map

package/build/cjs/demo/ComponentMap/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"../../../../src","sources":["demo/ComponentMap/model.ts"],"names":[],"mappings":"","sourcesContent":["export type ComponentMapNodeKind = 'block' | 'sub-block' | 'component';\n\nexport interface ComponentMapNode {\n    id: string;\n    kind: ComponentMapNodeKind;\n    exportName: string;\n    label: string;\n}\n\nexport interface ComponentMapEdge {\n    source: string;\n    target: string;\n}\n\nexport interface ComponentMapData {\n    nodes: ComponentMapNode[];\n    edges: ComponentMapEdge[];\n}\n\nexport interface Point {\n    x: number;\n    y: number;\n}\n\nexport interface Rect extends Point {\n    width: number;\n    height: number;\n}\n\nexport interface LayoutNode extends ComponentMapNode {\n    rect: Rect;\n}\n\nexport interface LayoutBand {\n    kind: ComponentMapNodeKind;\n    label: string;\n    bounds: Rect;\n    nodes: LayoutNode[];\n}\n\nexport interface LayoutEdge {\n    source: LayoutNode;\n    target: LayoutNode;\n}\n\nexport interface ComponentMapLayout {\n    nodes: LayoutNode[];\n    bands: LayoutBand[];\n    edges: LayoutEdge[];\n    bounds: Rect;\n}\n\nexport interface ViewportSize {\n    width: number;\n    height: number;\n}\n\nexport interface ViewportTransform extends Point {\n    scale: number;\n}\n\nexport type ComponentMapEmphasisMode = 'none' | 'selection' | 'search';\n\nexport interface ComponentMapEmphasis {\n    mode: ComponentMapEmphasisMode;\n    activeNodeIds: Set<string>;\n    activeEdgeIds: Set<string>;\n}\n"]}

package/build/cjs/demo/ComponentMap/viewport.d.ts

@@ -0,0 +1,7 @@
+import type { Point, Rect, ViewportSize, ViewportTransform } from "./model.js";
+export declare const VIEWPORT_PADDING = 24;
+export declare const MINIMUM_VIEWPORT_SCALE = 0.01;
+export declare const worldToScreen: (point: Point, transform: ViewportTransform) => Point;
+export declare const screenToWorld: (point: Point, transform: ViewportTransform) => Point;
+export declare function fitToViewport(bounds: Rect, viewport: ViewportSize, padding?: number): ViewportTransform;
+export declare function zoomAtPoint(transform: ViewportTransform, factor: number, point: Point, minScale: number, maxScale: number): ViewportTransform;

package/build/cjs/demo/ComponentMap/viewport.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.screenToWorld = exports.worldToScreen = exports.MINIMUM_VIEWPORT_SCALE = exports.VIEWPORT_PADDING = void 0;
+exports.fitToViewport = fitToViewport;
+exports.zoomAtPoint = zoomAtPoint;
+exports.VIEWPORT_PADDING = 24;
+exports.MINIMUM_VIEWPORT_SCALE = 0.01;
+const worldToScreen = (point, transform) => ({
+    x: point.x * transform.scale + transform.x,
+    y: point.y * transform.scale + transform.y,
+});
+exports.worldToScreen = worldToScreen;
+const screenToWorld = (point, transform) => ({
+    x: (point.x - transform.x) / transform.scale,
+    y: (point.y - transform.y) / transform.scale,
+});
+exports.screenToWorld = screenToWorld;
+function fitToViewport(bounds, viewport, padding = exports.VIEWPORT_PADDING) {
+    const availableWidth = Math.max(0, viewport.width - padding * 2);
+    const availableHeight = Math.max(0, viewport.height - padding * 2);
+    const widthScale = bounds.width > 0 ? availableWidth / bounds.width : 1;
+    const heightScale = bounds.height > 0 ? availableHeight / bounds.height : 1;
+    // React postpones fitting until it has a positive canvas size. Keep this pure fallback
+    // invertible as well for callers that receive an empty or padding-sized viewport.
+    const scale = Math.max(exports.MINIMUM_VIEWPORT_SCALE, Math.min(1, widthScale, heightScale));
+    return {
+        scale,
+        x: viewport.width / 2 - (bounds.x + bounds.width / 2) * scale,
+        y: viewport.height / 2 - (bounds.y + bounds.height / 2) * scale,
+    };
+}
+function zoomAtPoint(transform, factor, point, minScale, maxScale) {
+    const world = (0, exports.screenToWorld)(point, transform);
+    const scale = Math.min(maxScale, Math.max(minScale, transform.scale * factor));
+    return {
+        scale,
+        x: point.x - world.x * scale,
+        y: point.y - world.y * scale,
+    };
+}
+//# sourceMappingURL=viewport.js.map