npm - @gravity-ui/page-constructor - Versions diffs - 8.16.0 → 8.17.0 - Mend

@gravity-ui/page-constructor 8.16.0 → 8.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/build/cjs/constructor-items.d.ts CHANGED Viewed

@@ -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/cjs/demo/ComponentMap/ComponentMap.css ADDED Viewed

@@ -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/cjs/demo/ComponentMap/ComponentMap.d.ts ADDED Viewed

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

package/build/cjs/demo/ComponentMap/ComponentMap.js ADDED Viewed

@@ -0,0 +1,286 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentMap = ComponentMap;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn.js");
+const draw_1 = require("./draw.js");
+const edgeGeometry_1 = require("./edgeGeometry.js");
+const graph_1 = require("./graph.js");
+const layout_1 = require("./layout.js");
+const viewport_1 = require("./viewport.js");
+const b = (0, cn_1.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 };
+function ComponentMap({ data }) {
+    const rootRef = useRef(null);
+    const canvasRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const pointerDragRef = useRef(null);
+    const layout = useMemo(() => (0, layout_1.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 ? (0, viewport_1.fitToViewport)(layout.bounds, size) : undefined), [layout, size]);
+    const emphasis = useMemo(() => (0, graph_1.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 }) => (0, graph_1.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) {
+                (0, draw_1.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
+            ? (0, viewport_1.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 = (0, viewport_1.screenToWorld)(point, camera);
+        const node = (0, layout_1.hitTest)(layout, worldPoint);
+        if (node) {
+            return { node, edge: undefined };
+        }
+        const orderedEdges = (0, edgeGeometry_1.orderEdgesForInteraction)(layout.edges, hoveredEdgeKey, selectedEdgeKeys);
+        return {
+            node: undefined,
+            edge: (0, edgeGeometry_1.hitTestEdge)(orderedEdges, worldPoint, (0, edgeGeometry_1.getEdgeHitTolerance)(camera.scale)),
+        };
+    }, [hoveredEdgeKey, layout, selectedEdgeKeys]);
+    const updateHover = useCallback((point, camera) => {
+        const { node, edge } = getHitTarget(point, camera);
+        setHoveredNodeId(node?.id);
+        setHoveredEdgeKey(edge ? (0, graph_1.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((0, graph_1.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 ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: b(), children: (0, jsx_runtime_1.jsx)("p", { className: b('empty'), children: "No significant components found" }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: b(), children: [(0, jsx_runtime_1.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) }), (0, jsx_runtime_1.jsxs)("div", { className: b('toolbar'), children: [(0, jsx_runtime_1.jsx)(uikit_1.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());
+                        } }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('control'), size: "l", view: "outlined", "aria-label": "Zoom in", onClick: () => zoomFromToolbar(TOOLBAR_ZOOM_FACTOR), children: "+" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('control'), size: "l", view: "outlined", "aria-label": "Zoom out", onClick: () => zoomFromToolbar(1 / TOOLBAR_ZOOM_FACTOR), children: "\u2212" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('control'), size: "l", view: "outlined", "aria-label": "Fit graph", onClick: () => setTransform(fit ?? null), children: "Fit" })] }), (0, jsx_runtime_1.jsx)("output", { className: b('live'), "aria-live": "polite", children: selectedNode ? `Selected ${selectedNode.label}` : '' })] }));
+}
+//# sourceMappingURL=ComponentMap.js.map

package/build/cjs/demo/ComponentMap/ComponentMap.js.map ADDED Viewed

@@ -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/cjs/demo/ComponentMap/draw.d.ts ADDED Viewed

@@ -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/cjs/demo/ComponentMap/draw.js ADDED Viewed

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PALETTE = void 0;
+exports.drawComponentMap = drawComponentMap;
+const edgeGeometry_1 = require("./edgeGeometry.js");
+const graph_1 = require("./graph.js");
+const layout_1 = require("./layout.js");
+exports.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 } = (0, edgeGeometry_1.getEdgeGeometry)(source, target);
+    const color = selected || hovered ? INTERACTIVE_EDGE_COLOR : exports.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 ? exports.PALETTE.selectedFill : exports.PALETTE.nodeFill[node.kind];
+    context.strokeStyle = selected ? exports.PALETTE.selectedOutline : exports.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 = exports.PALETTE.label;
+    context.font = layout_1.NODE_LABEL_FONT;
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.fillText(node.label, x + width / 2, y + height / 2);
+    context.restore();
+}
+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 = exports.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 = (0, graph_1.getEdgeKey)(source.id, target.id);
+        return {
+            key,
+            selected: selectedEdgeKeys.has(key),
+            hovered: key === hoveredEdgeKey,
+        };
+    };
+    const orderedEdges = (0, edgeGeometry_1.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

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

@@ -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 ADDED Viewed

@@ -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;