@gravity-ui/page-constructor 8.15.0 → 8.17.0

package/build/docs/sub-blocks/Quote.md

@@ -0,0 +1,74 @@
+# Quote
+
+Renders a customer testimonial / quote card: a logo, the quote body, an optional author (name + avatar + description), and an optional CTA button. Paired with a large image on the side.
+
+## Sub-block type
+
+`type: 'quote'`
+
+## Used in
+
+Accepted as `children` by `CardLayout`, `Slider`, `SliderOld`; also usable as a card payload in `FilterBlock` items.
+
+## Example
+
+```json
+{
+  "type": "quote",
+  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "quoteType": "chevron",
+  "theme": "light",
+  "image": {
+    "light": {"src": "/assets/img_6-12_light.png"},
+    "dark": {"src": "/assets/img_8-12_dark.png"}
+  },
+  "logo": {"src": "/assets/logo.png", "alt": "Company logo"},
+  "author": {
+    "firstName": "Lorem",
+    "secondName": "ipsum",
+    "description": "CEO, Acme",
+    "avatar": "/assets/avatar.png"
+  },
+  "button": {
+    "text": "Read the case study",
+    "theme": "outlined",
+    "url": "https://example.com"
+  }
+}
+```
+
+## Properties
+
+| Property           | Type                            | Default     | Description                                                                                                                                  |
+| ------------------ | ------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` _required_  | `'quote'`                       | —           | Sub-block discriminator.                                                                                                                     |
+| `when`             | `string`                        | —           | Conditional rendering expression.                                                                                                            |
+| `text`             | `string`                        | —           | Quote body (plain text). Prefer `yfmText` for Markdown.                                                                                      |
+| `yfmText`          | `string` (YFM)                  | —           | Quote body in YFM Markdown (overrides `text` when set).                                                                                      |
+| `image` _required_ | `ImageProps \| {light, dark}`   | —           | Large side image. Themed: `T \| {light: T, dark: T}`.                                                                                        |
+| `logo` _required_  | `ImageProps`                    | —           | Company/personal logo shown above the quote.                                                                                                 |
+| `color`            | `string`                        | —           | Custom card background color.                                                                                                                |
+| `url`              | `string`                        | —           | Link URL for the CTA. Deprecated, prefer `button`.                                                                                           |
+| `urlTitle`         | `string`                        | —           | Title/tooltip for the CTA link. Deprecated, prefer `button`.                                                                                 |
+| `buttonText`       | `string`                        | —           | CTA button text. Deprecated, prefer `button`.                                                                                                |
+| `button`           | `ButtonProps`                   | —           | Full button configuration (preferred over `url` / `urlTitle` / `buttonText`). Available on the component model; not part of the JSON schema. |
+| `theme`            | `'light' \| 'dark'`             | `'light'`   | Text color theme.                                                                                                                            |
+| `quoteType`        | `'chevron' \| 'english-double'` | `'chevron'` | Quotation mark style. `chevron` renders `« »`, `english-double` renders `“ ”`.                                                               |
+| `author`           | `object`                        | —           | Author block. See below.                                                                                                                     |
+
+### `author` object
+
+| Property                | Type                          | Default | Description                |
+| ----------------------- | ----------------------------- | ------- | -------------------------- |
+| `firstName` _required_  | `string`                      | —       | Author first name.         |
+| `secondName` _required_ | `string`                      | —       | Author second name.        |
+| `avatar`                | `ImageProps \| {light, dark}` | —       | Avatar image (themed).     |
+| `description`           | `string` (YFM)                | —       | Author role / description. |
+
+## Themed values
+
+`image` and `author.avatar` accept `T | {light: T, dark: T}` and are resolved at runtime via the active theme.
+
+## Storybook
+
+[Quote](https://preview.gravity-ui.com/page-constructor/?path=/docs/components-cards-quote--docs)

package/build/esm/constructor-items.d.ts

@@ -28,7 +28,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models/index.js").PriceDetailedProps) => import("react/jsx-runtime").JSX.Element;
     "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models/index.js").MediaCardProps) => import("react/jsx-runtime").JSX.Element;
     "banner-card": (props: import("./models/index.js").BannerCardProps) => import("react/jsx-runtime").JSX.Element;
-    "layout-item": ({ content: { links, ...content }, contentMargin, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models/index.js").LayoutItemProps) => import("react/jsx-runtime").JSX.Element;
+    "layout-item": ({ content: { links, ...content }, contentMargin, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, url, urlTitle, target, }: import("./models/index.js").LayoutItemProps) => import("react/jsx-runtime").JSX.Element;
     "background-card": (props: import("./models/index.js").BackgroundCardProps) => import("react/jsx-runtime").JSX.Element;
     "basic-card": (props: import("./models/index.js").BasicCardProps) => import("react/jsx-runtime").JSX.Element;
     content: (props: import("./sub-blocks/Content/Content.js").ContentProps) => import("react/jsx-runtime").JSX.Element;

package/build/esm/demo/ComponentMap/ComponentMap.css

@@ -0,0 +1,55 @@
+.pc-component-map {
+  position: relative;
+  width: 100%;
+  height: min(760px, 100vh - 96px);
+  min-height: 480px;
+  overflow: hidden;
+}
+.pc-component-map__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+}
+.pc-component-map__canvas_interactive {
+  cursor: pointer;
+}
+.pc-component-map__canvas_dragging {
+  cursor: grabbing;
+}
+.pc-component-map__canvas:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -3px;
+}
+.pc-component-map__toolbar {
+  position: absolute;
+  z-index: 1;
+  top: 12px;
+  right: 12px;
+  left: 12px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.pc-component-map__search {
+  flex: 1 1 200px;
+  width: 0;
+  max-width: 320px;
+  min-width: 0;
+}
+.pc-component-map__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.pc-component-map__empty {
+  margin: 0;
+  padding: 24px;
+}

package/build/esm/demo/ComponentMap/ComponentMap.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentMapData } from "./model.js";
+import './ComponentMap.css';
+interface ComponentMapProps {
+    data: ComponentMapData;
+}
+export declare function ComponentMap({ data }: ComponentMapProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/esm/demo/ComponentMap/ComponentMap.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button, TextInput } from '@gravity-ui/uikit';
+import { block } from "../../utils/cn.js";
+import { drawComponentMap } from "./draw.js";
+import { getEdgeHitTolerance, hitTestEdge, orderEdgesForInteraction } from "./edgeGeometry.js";
+import { getEdgeKey, getEmphasis } from "./graph.js";
+import { hitTest, layoutComponentMap } from "./layout.js";
+import { fitToViewport, screenToWorld, zoomAtPoint } from "./viewport.js";
+import './ComponentMap.css';
+const b = block('component-map');
+const { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } = React;
+const TOOLBAR_ZOOM_FACTOR = 1.2;
+const WHEEL_ZOOM_SENSITIVITY = 0.002;
+const CLICK_MOVEMENT_THRESHOLD = 4;
+const NON_PASSIVE_WHEEL_OPTIONS = { passive: false };
+const EMPTY_SIZE = { width: 0, height: 0, devicePixelRatio: 1 };
+export function ComponentMap({ data }) {
+    const rootRef = useRef(null);
+    const canvasRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const pointerDragRef = useRef(null);
+    const layout = useMemo(() => layoutComponentMap(data), [data]);
+    const [size, setSize] = useState(EMPTY_SIZE);
+    const [transform, setTransform] = useState(null);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedNodeId, setSelectedNodeId] = useState();
+    const [selectedEdgeKeys, setSelectedEdgeKeys] = useState(() => new Set());
+    const [hoveredNodeId, setHoveredNodeId] = useState();
+    const [hoveredEdgeKey, setHoveredEdgeKey] = useState();
+    const [dragging, setDragging] = useState(false);
+    const fit = useMemo(() => (size.width > 0 && size.height > 0 ? fitToViewport(layout.bounds, size) : undefined), [layout, size]);
+    const emphasis = useMemo(() => getEmphasis(data, { selectedNodeId, searchQuery }), [data, searchQuery, selectedNodeId]);
+    const selectedNode = layout.nodes.find(({ id }) => id === selectedNodeId);
+    const validEdgeKeys = useMemo(() => new Set(layout.edges.map(({ source, target }) => getEdgeKey(source.id, target.id))), [layout]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root) {
+            return undefined;
+        }
+        const updateSize = ({ width, height }) => {
+            setSize({
+                width,
+                height,
+                devicePixelRatio: window.devicePixelRatio || 1,
+            });
+        };
+        const observer = new ResizeObserver(([entry]) => updateSize(entry.contentRect));
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (fit) {
+            setTransform(fit);
+        }
+    }, [fit]);
+    useEffect(() => {
+        setSelectedNodeId((current) => current && layout.nodes.some(({ id }) => id === current) ? current : undefined);
+        setSelectedEdgeKeys((current) => {
+            const next = new Set([...current].filter((key) => validEdgeKeys.has(key)));
+            return next.size === current.size ? current : next;
+        });
+        setHoveredNodeId((current) => current && layout.nodes.some(({ id }) => id === current) ? current : undefined);
+        setHoveredEdgeKey((current) => current && validEdgeKeys.has(current) ? current : undefined);
+    }, [layout, validEdgeKeys]);
+    useLayoutEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || size.width <= 0 || size.height <= 0) {
+            return;
+        }
+        canvas.width = Math.max(1, Math.round(size.width * size.devicePixelRatio));
+        canvas.height = Math.max(1, Math.round(size.height * size.devicePixelRatio));
+    }, [data.nodes.length, size]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || !transform || size.width <= 0 || size.height <= 0) {
+            return undefined;
+        }
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = -1;
+        const frame = requestAnimationFrame(() => {
+            animationFrameRef.current = null;
+            const context = canvas.getContext('2d');
+            if (context) {
+                drawComponentMap(context, layout, transform, {
+                    viewport: size,
+                    devicePixelRatio: size.devicePixelRatio,
+                    selectedNodeId,
+                    hoveredEdgeKey,
+                    selectedEdgeKeys,
+                    emphasis,
+                });
+            }
+        });
+        if (animationFrameRef.current !== null) {
+            animationFrameRef.current = frame;
+        }
+        return () => {
+            if (animationFrameRef.current !== null) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    }, [emphasis, hoveredEdgeKey, layout, selectedEdgeKeys, selectedNodeId, size, transform]);
+    const getCanvasPoint = useCallback((clientX, clientY) => {
+        const bounds = canvasRef.current?.getBoundingClientRect();
+        return {
+            x: clientX - (bounds?.left ?? 0),
+            y: clientY - (bounds?.top ?? 0),
+        };
+    }, []);
+    const zoom = useCallback((factor, point) => {
+        if (!fit) {
+            return;
+        }
+        setTransform((current) => current
+            ? zoomAtPoint(current, factor, point, fit.scale * 0.5, fit.scale * 8)
+            : current);
+    }, [fit]);
+    const zoomFromToolbar = useCallback((factor) => zoom(factor, { x: size.width / 2, y: size.height / 2 }), [size, zoom]);
+    const selectNode = useCallback((nodeId) => {
+        if (nodeId) {
+            setSearchQuery('');
+        }
+        setSelectedNodeId(nodeId);
+        setSelectedEdgeKeys((current) => (current.size ? new Set() : current));
+    }, []);
+    const selectEdge = useCallback((edgeKey, additive) => {
+        setSelectedEdgeKeys((current) => {
+            if (!additive) {
+                return new Set([edgeKey]);
+            }
+            const next = new Set(current);
+            if (next.has(edgeKey)) {
+                next.delete(edgeKey);
+            }
+            else {
+                next.add(edgeKey);
+            }
+            return next;
+        });
+    }, []);
+    const getHitTarget = useCallback((point, camera) => {
+        const worldPoint = screenToWorld(point, camera);
+        const node = hitTest(layout, worldPoint);
+        if (node) {
+            return { node, edge: undefined };
+        }
+        const orderedEdges = orderEdgesForInteraction(layout.edges, hoveredEdgeKey, selectedEdgeKeys);
+        return {
+            node: undefined,
+            edge: hitTestEdge(orderedEdges, worldPoint, getEdgeHitTolerance(camera.scale)),
+        };
+    }, [hoveredEdgeKey, layout, selectedEdgeKeys]);
+    const updateHover = useCallback((point, camera) => {
+        const { node, edge } = getHitTarget(point, camera);
+        setHoveredNodeId(node?.id);
+        setHoveredEdgeKey(edge ? getEdgeKey(edge.source.id, edge.target.id) : undefined);
+    }, [getHitTarget]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return undefined;
+        }
+        const handleWheel = (event) => {
+            event.preventDefault();
+            const factor = Math.exp(-event.deltaY * WHEEL_ZOOM_SENSITIVITY);
+            zoom(factor, getCanvasPoint(event.clientX, event.clientY));
+        };
+        canvas.addEventListener('wheel', handleWheel, NON_PASSIVE_WHEEL_OPTIONS);
+        return () => canvas.removeEventListener('wheel', handleWheel, false);
+    }, [data.nodes.length, getCanvasPoint, zoom]);
+    const handlePointerDown = useCallback((event) => {
+        if (!transform) {
+            return;
+        }
+        const point = getCanvasPoint(event.clientX, event.clientY);
+        pointerDragRef.current = {
+            pointerId: event.pointerId,
+            canvas: event.currentTarget,
+            start: point,
+            startTransform: transform,
+            moved: false,
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }, [getCanvasPoint, transform]);
+    const handlePointerMove = useCallback((event) => {
+        const point = getCanvasPoint(event.clientX, event.clientY);
+        const drag = pointerDragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            if (transform) {
+                updateHover(point, transform);
+            }
+            return;
+        }
+        const deltaX = point.x - drag.start.x;
+        const deltaY = point.y - drag.start.y;
+        const moved = drag.moved || Math.hypot(deltaX, deltaY) >= CLICK_MOVEMENT_THRESHOLD;
+        if (!moved) {
+            return;
+        }
+        if (!drag.moved) {
+            drag.moved = true;
+            setHoveredNodeId(undefined);
+            setHoveredEdgeKey(undefined);
+            setDragging(true);
+        }
+        setTransform({
+            ...drag.startTransform,
+            x: drag.startTransform.x + deltaX,
+            y: drag.startTransform.y + deltaY,
+        });
+    }, [getCanvasPoint, transform, updateHover]);
+    const releasePointer = useCallback((canvas, pointerId) => {
+        if (canvas.hasPointerCapture(pointerId)) {
+            canvas.releasePointerCapture(pointerId);
+        }
+    }, []);
+    const finishPointer = useCallback((event, cancelled) => {
+        const drag = pointerDragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        const point = getCanvasPoint(event.clientX, event.clientY);
+        const deltaX = point.x - drag.start.x;
+        const deltaY = point.y - drag.start.y;
+        const moved = drag.moved || Math.hypot(deltaX, deltaY) >= CLICK_MOVEMENT_THRESHOLD;
+        if (!cancelled) {
+            if (moved) {
+                setTransform({
+                    ...drag.startTransform,
+                    x: drag.startTransform.x + deltaX,
+                    y: drag.startTransform.y + deltaY,
+                });
+            }
+            else {
+                const { node, edge } = getHitTarget(point, drag.startTransform);
+                if (node) {
+                    selectNode(node.id);
+                }
+                else if (edge) {
+                    selectEdge(getEdgeKey(edge.source.id, edge.target.id), event.ctrlKey || event.metaKey);
+                }
+                else {
+                    selectNode(undefined);
+                }
+            }
+        }
+        releasePointer(event.currentTarget, event.pointerId);
+        pointerDragRef.current = null;
+        setDragging(false);
+    }, [getCanvasPoint, getHitTarget, releasePointer, selectEdge, selectNode]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            setSelectedNodeId(undefined);
+            setSelectedEdgeKeys(new Set());
+        }
+    }, []);
+    useEffect(() => () => {
+        const drag = pointerDragRef.current;
+        if (drag) {
+            releasePointer(drag.canvas, drag.pointerId);
+        }
+        pointerDragRef.current = null;
+    }, [releasePointer]);
+    if (!data.nodes.length) {
+        return (_jsx("div", { ref: rootRef, className: b(), children: _jsx("p", { className: b('empty'), children: "No significant components found" }) }));
+    }
+    return (_jsxs("div", { ref: rootRef, className: b(), children: [_jsx("canvas", { ref: canvasRef, className: b('canvas', {
+                    dragging,
+                    interactive: Boolean(hoveredNodeId || hoveredEdgeKey),
+                }), role: "img", "aria-label": "Significant component dependency map", tabIndex: 0, onKeyDown: handleKeyDown, onPointerCancel: (event) => finishPointer(event, true), onPointerDown: handlePointerDown, onPointerLeave: () => {
+                    setHoveredNodeId(undefined);
+                    setHoveredEdgeKey(undefined);
+                }, onPointerMove: handlePointerMove, onPointerUp: (event) => finishPointer(event, false) }), _jsxs("div", { className: b('toolbar'), children: [_jsx(TextInput, { className: b('search'), size: "l", hasClear: true, placeholder: "Search components", value: searchQuery, controlProps: { 'aria-label': 'Search components' }, onUpdate: setSearchQuery, onFocus: () => {
+                            setSelectedNodeId(undefined);
+                            setSelectedEdgeKeys(new Set());
+                        } }), _jsx(Button, { className: b('control'), size: "l", view: "outlined", "aria-label": "Zoom in", onClick: () => zoomFromToolbar(TOOLBAR_ZOOM_FACTOR), children: "+" }), _jsx(Button, { className: b('control'), size: "l", view: "outlined", "aria-label": "Zoom out", onClick: () => zoomFromToolbar(1 / TOOLBAR_ZOOM_FACTOR), children: "\u2212" }), _jsx(Button, { className: b('control'), size: "l", view: "outlined", "aria-label": "Fit graph", onClick: () => setTransform(fit ?? null), children: "Fit" })] }), _jsx("output", { className: b('live'), "aria-live": "polite", children: selectedNode ? `Selected ${selectedNode.label}` : '' })] }));
+}
+//# sourceMappingURL=ComponentMap.js.map

package/build/esm/demo/ComponentMap/ComponentMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentMap.js","sourceRoot":"../../../../src","sources":["demo/ComponentMap/ComponentMap.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Button, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\n\nimport {drawComponentMap} from './draw';\nimport {getEdgeHitTolerance, hitTestEdge, orderEdgesForInteraction} from './edgeGeometry';\nimport {getEdgeKey, getEmphasis} from './graph';\nimport {hitTest, layoutComponentMap} from './layout';\nimport type {ComponentMapData, Point, ViewportSize, ViewportTransform} from './model';\nimport {fitToViewport, screenToWorld, zoomAtPoint} from './viewport';\n\nimport './ComponentMap.scss';\n\nconst b = block('component-map');\nconst {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} = React;\nconst TOOLBAR_ZOOM_FACTOR = 1.2;\nconst WHEEL_ZOOM_SENSITIVITY = 0.002;\nconst CLICK_MOVEMENT_THRESHOLD = 4;\nconst NON_PASSIVE_WHEEL_OPTIONS = {passive: false} as const;\n\ninterface ComponentMapProps {\n    data: ComponentMapData;\n}\n\ninterface CanvasSize extends ViewportSize {\n    devicePixelRatio: number;\n}\n\ninterface PointerDrag {\n    pointerId: number;\n    canvas: HTMLCanvasElement;\n    start: Point;\n    startTransform: ViewportTransform;\n    moved: boolean;\n}\n\nconst EMPTY_SIZE: CanvasSize = {width: 0, height: 0, devicePixelRatio: 1};\n\nexport function ComponentMap({data}: ComponentMapProps) {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const animationFrameRef = useRef<number | null>(null);\n    const pointerDragRef = useRef<PointerDrag | null>(null);\n    const layout = useMemo(() => layoutComponentMap(data), [data]);\n    const [size, setSize] = useState<CanvasSize>(EMPTY_SIZE);\n    const [transform, setTransform] = useState<ViewportTransform | null>(null);\n    const [searchQuery, setSearchQuery] = useState('');\n    const [selectedNodeId, setSelectedNodeId] = useState<string>();\n    const [selectedEdgeKeys, setSelectedEdgeKeys] = useState<Set<string>>(() => new Set());\n    const [hoveredNodeId, setHoveredNodeId] = useState<string>();\n    const [hoveredEdgeKey, setHoveredEdgeKey] = useState<string>();\n    const [dragging, setDragging] = useState(false);\n    const fit = useMemo(\n        () => (size.width > 0 && size.height > 0 ? fitToViewport(layout.bounds, size) : undefined),\n        [layout, size],\n    );\n    const emphasis = useMemo(\n        () => getEmphasis(data, {selectedNodeId, searchQuery}),\n        [data, searchQuery, selectedNodeId],\n    );\n    const selectedNode = layout.nodes.find(({id}) => id === selectedNodeId);\n    const validEdgeKeys = useMemo(\n        () => new Set(layout.edges.map(({source, target}) => getEdgeKey(source.id, target.id))),\n        [layout],\n    );\n\n    useEffect(() => {\n        const root = rootRef.current;\n        if (!root) {\n            return undefined;\n        }\n\n        const updateSize = ({width, height}: Pick<DOMRectReadOnly, 'width' | 'height'>) => {\n            setSize({\n                width,\n                height,\n                devicePixelRatio: window.devicePixelRatio || 1,\n            });\n        };\n        const observer = new ResizeObserver(([entry]) => updateSize(entry.contentRect));\n        observer.observe(root);\n\n        return () => observer.disconnect();\n    }, []);\n\n    useEffect(() => {\n        if (fit) {\n            setTransform(fit);\n        }\n    }, [fit]);\n\n    useEffect(() => {\n        setSelectedNodeId((current) =>\n            current && layout.nodes.some(({id}) => id === current) ? current : undefined,\n        );\n        setSelectedEdgeKeys((current) => {\n            const next = new Set([...current].filter((key) => validEdgeKeys.has(key)));\n            return next.size === current.size ? current : next;\n        });\n        setHoveredNodeId((current) =>\n            current && layout.nodes.some(({id}) => id === current) ? current : undefined,\n        );\n        setHoveredEdgeKey((current) =>\n            current && validEdgeKeys.has(current) ? current : undefined,\n        );\n    }, [layout, validEdgeKeys]);\n\n    useLayoutEffect(() => {\n        const canvas = canvasRef.current;\n        if (!canvas || size.width <= 0 || size.height <= 0) {\n            return;\n        }\n\n        canvas.width = Math.max(1, Math.round(size.width * size.devicePixelRatio));\n        canvas.height = Math.max(1, Math.round(size.height * size.devicePixelRatio));\n    }, [data.nodes.length, size]);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        if (!canvas || !transform || size.width <= 0 || size.height <= 0) {\n            return undefined;\n        }\n\n        if (animationFrameRef.current !== null) {\n            cancelAnimationFrame(animationFrameRef.current);\n        }\n\n        animationFrameRef.current = -1;\n        const frame = requestAnimationFrame(() => {\n            animationFrameRef.current = null;\n            const context = canvas.getContext('2d');\n            if (context) {\n                drawComponentMap(context, layout, transform, {\n                    viewport: size,\n                    devicePixelRatio: size.devicePixelRatio,\n                    selectedNodeId,\n                    hoveredEdgeKey,\n                    selectedEdgeKeys,\n                    emphasis,\n                });\n            }\n        });\n        if (animationFrameRef.current !== null) {\n            animationFrameRef.current = frame;\n        }\n\n        return () => {\n            if (animationFrameRef.current !== null) {\n                cancelAnimationFrame(animationFrameRef.current);\n                animationFrameRef.current = null;\n            }\n        };\n    }, [emphasis, hoveredEdgeKey, layout, selectedEdgeKeys, selectedNodeId, size, transform]);\n\n    const getCanvasPoint = useCallback((clientX: number, clientY: number) => {\n        const bounds = canvasRef.current?.getBoundingClientRect();\n        return {\n            x: clientX - (bounds?.left ?? 0),\n            y: clientY - (bounds?.top ?? 0),\n        };\n    }, []);\n\n    const zoom = useCallback(\n        (factor: number, point: Point) => {\n            if (!fit) {\n                return;\n            }\n            setTransform((current) =>\n                current\n                    ? zoomAtPoint(current, factor, point, fit.scale * 0.5, fit.scale * 8)\n                    : current,\n            );\n        },\n        [fit],\n    );\n\n    const zoomFromToolbar = useCallback(\n        (factor: number) => zoom(factor, {x: size.width / 2, y: size.height / 2}),\n        [size, zoom],\n    );\n\n    const selectNode = useCallback((nodeId?: string) => {\n        if (nodeId) {\n            setSearchQuery('');\n        }\n        setSelectedNodeId(nodeId);\n        setSelectedEdgeKeys((current) => (current.size ? new Set() : current));\n    }, []);\n\n    const selectEdge = useCallback((edgeKey: string, additive: boolean) => {\n        setSelectedEdgeKeys((current) => {\n            if (!additive) {\n                return new Set([edgeKey]);\n            }\n            const next = new Set(current);\n            if (next.has(edgeKey)) {\n                next.delete(edgeKey);\n            } else {\n                next.add(edgeKey);\n            }\n            return next;\n        });\n    }, []);\n\n    const getHitTarget = useCallback(\n        (point: Point, camera: ViewportTransform) => {\n            const worldPoint = screenToWorld(point, camera);\n            const node = hitTest(layout, worldPoint);\n            if (node) {\n                return {node, edge: undefined};\n            }\n            const orderedEdges = orderEdgesForInteraction(\n                layout.edges,\n                hoveredEdgeKey,\n                selectedEdgeKeys,\n            );\n            return {\n                node: undefined,\n                edge: hitTestEdge(orderedEdges, worldPoint, getEdgeHitTolerance(camera.scale)),\n            };\n        },\n        [hoveredEdgeKey, layout, selectedEdgeKeys],\n    );\n\n    const updateHover = useCallback(\n        (point: Point, camera: ViewportTransform) => {\n            const {node, edge} = getHitTarget(point, camera);\n            setHoveredNodeId(node?.id);\n            setHoveredEdgeKey(edge ? getEdgeKey(edge.source.id, edge.target.id) : undefined);\n        },\n        [getHitTarget],\n    );\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        if (!canvas) {\n            return undefined;\n        }\n\n        const handleWheel = (event: WheelEvent) => {\n            event.preventDefault();\n            const factor = Math.exp(-event.deltaY * WHEEL_ZOOM_SENSITIVITY);\n            zoom(factor, getCanvasPoint(event.clientX, event.clientY));\n        };\n        canvas.addEventListener('wheel', handleWheel, NON_PASSIVE_WHEEL_OPTIONS);\n\n        return () => canvas.removeEventListener('wheel', handleWheel, false);\n    }, [data.nodes.length, getCanvasPoint, zoom]);\n\n    const handlePointerDown = useCallback(\n        (event: React.PointerEvent<HTMLCanvasElement>) => {\n            if (!transform) {\n                return;\n            }\n            const point = getCanvasPoint(event.clientX, event.clientY);\n            pointerDragRef.current = {\n                pointerId: event.pointerId,\n                canvas: event.currentTarget,\n                start: point,\n                startTransform: transform,\n                moved: false,\n            };\n            event.currentTarget.setPointerCapture(event.pointerId);\n        },\n        [getCanvasPoint, transform],\n    );\n\n    const handlePointerMove = useCallback(\n        (event: React.PointerEvent<HTMLCanvasElement>) => {\n            const point = getCanvasPoint(event.clientX, event.clientY);\n            const drag = pointerDragRef.current;\n            if (!drag || drag.pointerId !== event.pointerId) {\n                if (transform) {\n                    updateHover(point, transform);\n                }\n                return;\n            }\n\n            const deltaX = point.x - drag.start.x;\n            const deltaY = point.y - drag.start.y;\n            const moved = drag.moved || Math.hypot(deltaX, deltaY) >= CLICK_MOVEMENT_THRESHOLD;\n            if (!moved) {\n                return;\n            }\n            if (!drag.moved) {\n                drag.moved = true;\n                setHoveredNodeId(undefined);\n                setHoveredEdgeKey(undefined);\n                setDragging(true);\n            }\n            setTransform({\n                ...drag.startTransform,\n                x: drag.startTransform.x + deltaX,\n                y: drag.startTransform.y + deltaY,\n            });\n        },\n        [getCanvasPoint, transform, updateHover],\n    );\n\n    const releasePointer = useCallback((canvas: HTMLCanvasElement, pointerId: number) => {\n        if (canvas.hasPointerCapture(pointerId)) {\n            canvas.releasePointerCapture(pointerId);\n        }\n    }, []);\n\n    const finishPointer = useCallback(\n        (event: React.PointerEvent<HTMLCanvasElement>, cancelled: boolean) => {\n            const drag = pointerDragRef.current;\n            if (!drag || drag.pointerId !== event.pointerId) {\n                return;\n            }\n\n            const point = getCanvasPoint(event.clientX, event.clientY);\n            const deltaX = point.x - drag.start.x;\n            const deltaY = point.y - drag.start.y;\n            const moved = drag.moved || Math.hypot(deltaX, deltaY) >= CLICK_MOVEMENT_THRESHOLD;\n            if (!cancelled) {\n                if (moved) {\n                    setTransform({\n                        ...drag.startTransform,\n                        x: drag.startTransform.x + deltaX,\n                        y: drag.startTransform.y + deltaY,\n                    });\n                } else {\n                    const {node, edge} = getHitTarget(point, drag.startTransform);\n                    if (node) {\n                        selectNode(node.id);\n                    } else if (edge) {\n                        selectEdge(\n                            getEdgeKey(edge.source.id, edge.target.id),\n                            event.ctrlKey || event.metaKey,\n                        );\n                    } else {\n                        selectNode(undefined);\n                    }\n                }\n            }\n\n            releasePointer(event.currentTarget, event.pointerId);\n            pointerDragRef.current = null;\n            setDragging(false);\n        },\n        [getCanvasPoint, getHitTarget, releasePointer, selectEdge, selectNode],\n    );\n\n    const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLCanvasElement>) => {\n        if (event.key === 'Escape') {\n            event.preventDefault();\n            setSelectedNodeId(undefined);\n            setSelectedEdgeKeys(new Set());\n        }\n    }, []);\n\n    useEffect(\n        () => () => {\n            const drag = pointerDragRef.current;\n            if (drag) {\n                releasePointer(drag.canvas, drag.pointerId);\n            }\n            pointerDragRef.current = null;\n        },\n        [releasePointer],\n    );\n\n    if (!data.nodes.length) {\n        return (\n            <div ref={rootRef} className={b()}>\n                <p className={b('empty')}>No significant components found</p>\n            </div>\n        );\n    }\n\n    return (\n        <div ref={rootRef} className={b()}>\n            <canvas\n                ref={canvasRef}\n                className={b('canvas', {\n                    dragging,\n                    interactive: Boolean(hoveredNodeId || hoveredEdgeKey),\n                })}\n                role=\"img\"\n                aria-label=\"Significant component dependency map\"\n                tabIndex={0}\n                onKeyDown={handleKeyDown}\n                onPointerCancel={(event) => finishPointer(event, true)}\n                onPointerDown={handlePointerDown}\n                onPointerLeave={() => {\n                    setHoveredNodeId(undefined);\n                    setHoveredEdgeKey(undefined);\n                }}\n                onPointerMove={handlePointerMove}\n                onPointerUp={(event) => finishPointer(event, false)}\n            />\n            <div className={b('toolbar')}>\n                <TextInput\n                    className={b('search')}\n                    size=\"l\"\n                    hasClear\n                    placeholder=\"Search components\"\n                    value={searchQuery}\n                    controlProps={{'aria-label': 'Search components'}}\n                    onUpdate={setSearchQuery}\n                    onFocus={() => {\n                        setSelectedNodeId(undefined);\n                        setSelectedEdgeKeys(new Set());\n                    }}\n                />\n                <Button\n                    className={b('control')}\n                    size=\"l\"\n                    view=\"outlined\"\n                    aria-label=\"Zoom in\"\n                    onClick={() => zoomFromToolbar(TOOLBAR_ZOOM_FACTOR)}\n                >\n                    +\n                </Button>\n                <Button\n                    className={b('control')}\n                    size=\"l\"\n                    view=\"outlined\"\n                    aria-label=\"Zoom out\"\n                    onClick={() => zoomFromToolbar(1 / TOOLBAR_ZOOM_FACTOR)}\n                >\n                    −\n                </Button>\n                <Button\n                    className={b('control')}\n                    size=\"l\"\n                    view=\"outlined\"\n                    aria-label=\"Fit graph\"\n                    onClick={() => setTransform(fit ?? null)}\n                >\n                    Fit\n                </Button>\n            </div>\n            <output className={b('live')} aria-live=\"polite\">\n                {selectedNode ? `Selected ${selectedNode.label}` : ''}\n            </output>\n        </div>\n    );\n}\n"]}

package/build/esm/demo/ComponentMap/draw.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentMapEmphasis, ComponentMapLayout, ViewportSize, ViewportTransform } from "./model.js";
+export declare const PALETTE: {
+    readonly bandHeading: "#4d5562";
+    readonly edge: "#7d8798";
+    readonly label: "#1f2733";
+    readonly nodeFill: {
+        readonly block: "#d9e8ff";
+        readonly 'sub-block': "#e5ddff";
+        readonly component: "#e4ebf2";
+    };
+    readonly nodeOutline: "#748094";
+    readonly selectedFill: "#ffbe5c";
+    readonly selectedOutline: "#9a5700";
+};
+export interface ComponentMapDrawOptions {
+    viewport: ViewportSize;
+    devicePixelRatio: number;
+    selectedNodeId?: string;
+    hoveredEdgeKey?: string;
+    selectedEdgeKeys: ReadonlySet<string>;
+    emphasis: ComponentMapEmphasis;
+}
+export declare function drawComponentMap(canvasContext: CanvasRenderingContext2D, layout: ComponentMapLayout, transform: ViewportTransform, options: ComponentMapDrawOptions): void;

package/build/esm/demo/ComponentMap/draw.js

@@ -0,0 +1,130 @@
+import { getEdgeGeometry, orderEdgesForInteraction } from "./edgeGeometry.js";
+import { getEdgeKey } from "./graph.js";
+import { NODE_LABEL_FONT } from "./layout.js";
+export const PALETTE = {
+    bandHeading: '#4d5562',
+    edge: '#7d8798',
+    label: '#1f2733',
+    nodeFill: {
+        block: '#d9e8ff',
+        'sub-block': '#e5ddff',
+        component: '#e4ebf2',
+    },
+    nodeOutline: '#748094',
+    selectedFill: '#ffbe5c',
+    selectedOutline: '#9a5700',
+};
+const NODE_RADIUS = 10;
+const NODE_DIMMED_OPACITY = 0.16;
+const EDGE_DIMMED_OPACITY = 0.1;
+const EDGE_WIDTH = 1.5;
+const INTERACTIVE_EDGE_WIDTH = 3;
+const INTERACTIVE_EDGE_COLOR = '#ffbe5c';
+function roundedRect(context, x, y, width, height, radius) {
+    const right = x + width;
+    const bottom = y + height;
+    context.beginPath();
+    context.moveTo(x + radius, y);
+    context.lineTo(right - radius, y);
+    context.quadraticCurveTo(right, y, right, y + radius);
+    context.lineTo(right, bottom - radius);
+    context.quadraticCurveTo(right, bottom, right - radius, bottom);
+    context.lineTo(x + radius, bottom);
+    context.quadraticCurveTo(x, bottom, x, bottom - radius);
+    context.lineTo(x, y + radius);
+    context.quadraticCurveTo(x, y, x + radius, y);
+    context.closePath();
+}
+function drawArrowhead(context, arrowhead) {
+    context.beginPath();
+    context.moveTo(arrowhead[0].x, arrowhead[0].y);
+    context.lineTo(arrowhead[1].x, arrowhead[1].y);
+    context.lineTo(arrowhead[2].x, arrowhead[2].y);
+    context.closePath();
+    context.fill();
+}
+function drawEdge(canvasContext, source, target, { active, hovered, selected }) {
+    const context = canvasContext;
+    const { start, end, firstControl, secondControl, arrowhead } = getEdgeGeometry(source, target);
+    const color = selected || hovered ? INTERACTIVE_EDGE_COLOR : PALETTE.edge;
+    context.save();
+    context.globalAlpha = selected || active ? 1 : EDGE_DIMMED_OPACITY;
+    context.strokeStyle = color;
+    context.fillStyle = color;
+    context.lineWidth = selected || hovered ? INTERACTIVE_EDGE_WIDTH : EDGE_WIDTH;
+    context.beginPath();
+    context.moveTo(start.x, start.y);
+    context.bezierCurveTo(firstControl.x, firstControl.y, secondControl.x, secondControl.y, end.x, end.y);
+    context.stroke();
+    drawArrowhead(context, arrowhead);
+    context.restore();
+}
+function drawNode(canvasContext, node, active, selected) {
+    const context = canvasContext;
+    const { x, y, width, height } = node.rect;
+    context.save();
+    context.globalAlpha = active ? 1 : NODE_DIMMED_OPACITY;
+    context.fillStyle = selected ? PALETTE.selectedFill : PALETTE.nodeFill[node.kind];
+    context.strokeStyle = selected ? PALETTE.selectedOutline : PALETTE.nodeOutline;
+    context.lineWidth = selected ? 3 : 1.5;
+    roundedRect(context, x, y, width, height, NODE_RADIUS);
+    context.fill();
+    context.stroke();
+    context.restore();
+}
+function drawLabel(canvasContext, node, active) {
+    const context = canvasContext;
+    const { x, y, width, height } = node.rect;
+    context.save();
+    context.globalAlpha = active ? 1 : NODE_DIMMED_OPACITY;
+    context.fillStyle = PALETTE.label;
+    context.font = NODE_LABEL_FONT;
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.fillText(node.label, x + width / 2, y + height / 2);
+    context.restore();
+}
+export function drawComponentMap(canvasContext, layout, transform, options) {
+    const context = canvasContext;
+    const { viewport, devicePixelRatio, selectedNodeId, hoveredEdgeKey, selectedEdgeKeys, emphasis } = options;
+    const hasEmphasis = emphasis.mode !== 'none';
+    context.resetTransform();
+    context.scale(devicePixelRatio, devicePixelRatio);
+    context.clearRect(0, 0, viewport.width, viewport.height);
+    context.translate(transform.x, transform.y);
+    context.scale(transform.scale, transform.scale);
+    context.save();
+    context.fillStyle = PALETTE.bandHeading;
+    context.font = '700 18px sans-serif';
+    context.textAlign = 'left';
+    context.textBaseline = 'top';
+    for (const band of layout.bands) {
+        context.fillText(band.label, band.bounds.x, band.bounds.y);
+    }
+    context.restore();
+    const edgeState = ({ source, target }) => {
+        const key = getEdgeKey(source.id, target.id);
+        return {
+            key,
+            selected: selectedEdgeKeys.has(key),
+            hovered: key === hoveredEdgeKey,
+        };
+    };
+    const orderedEdges = orderEdgesForInteraction(layout.edges, hoveredEdgeKey, selectedEdgeKeys);
+    for (const edge of orderedEdges) {
+        const { source, target } = edge;
+        const { key, selected, hovered } = edgeState(edge);
+        const active = emphasis.mode === 'none' ||
+            (emphasis.mode === 'selection' && emphasis.activeEdgeIds.has(key));
+        drawEdge(context, source, target, { active, hovered, selected });
+    }
+    for (const node of layout.nodes) {
+        const active = !hasEmphasis || emphasis.activeNodeIds.has(node.id);
+        drawNode(context, node, active, emphasis.mode === 'selection' && node.id === selectedNodeId);
+    }
+    for (const node of layout.nodes) {
+        const active = !hasEmphasis || emphasis.activeNodeIds.has(node.id);
+        drawLabel(context, node, active);
+    }
+}
+//# sourceMappingURL=draw.js.map