@ngroznykh/papirus 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Papirus Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,177 @@
+# Papirus
+
+[![npm version](https://img.shields.io/npm/v/papirus.svg)](https://www.npmjs.com/package/papirus)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+TypeScript library for building interactive 2D diagrams and flowcharts on HTML Canvas. Supports nodes, edges, groups, styling, serialization, export, and interactivity.
+
+[Русская версия](./README.ru.md)
+
+## About
+
+Papirus is a diagram rendering and interaction engine designed to be embedded in any UI (SPA, static pages, design systems). The library provides:
+
+- `DiagramRenderer` with coordinate system, zoom, and panning
+- Set of elements (nodes/edges/groups) and base types
+- Interaction managers (selection, drag, connection, history)
+- Context menu and search/filtering
+- Basic animations and animated edge flow
+- Theming and styling via `StyleManager`
+- Overlays (grid, minimap, rulers, guides) and export utilities
+
+## Installation
+
+```bash
+npm install papirus
+```
+
+## Quick Start
+
+```ts
+import { DiagramRenderer, RectangleNode, Edge } from 'papirus';
+
+const renderer = new DiagramRenderer('#canvas', {
+  width: 900,
+  height: 600,
+  backgroundColor: '#fafafa',
+});
+
+const nodeA = new RectangleNode({ x: 100, y: 100, width: 140, height: 60, label: 'Start' });
+const nodeB = new RectangleNode({ x: 360, y: 100, width: 140, height: 60, label: 'Process' });
+
+renderer.addNode(nodeA);
+renderer.addNode(nodeB);
+renderer.addEdge(new Edge({
+  from: { nodeId: nodeA.id },
+  to: { nodeId: nodeB.id },
+  type: 'bezier',
+}));
+
+renderer.enableInteractions();
+```
+
+## Documentation
+
+- [API Overview](./docs/api.md)
+- [Elements](./docs/elements.md)
+- [Interactions](./docs/interactions.md)
+- [Overlays](./docs/overlays.md)
+- [Utils](./docs/utils.md)
+
+## Features
+
+### Interactivity
+
+Built-in `InteractionManager` includes:
+- drag/select/connect/undo/redo/copy/paste
+- Pan on empty canvas area
+- Zoom with mouse wheel, pinch-to-zoom, two-finger pan
+
+```ts
+const interactions = renderer.enableInteractions({ gridSize: 20, snapToGrid: true });
+interactions.navigation.fitToView();
+```
+
+Default edge creation: `Shift + drag` from node to node (to avoid interfering with regular drag).
+
+### Elements & Groups
+
+```ts
+const group = new Group({ label: 'Main Flow', padding: 16 });
+group.addChild(nodeA);
+group.addChild(nodeB);
+renderer.addGroup(group);
+
+const node = new RectangleNode({
+  x: 20, y: 20, width: 120, height: 60,
+  ports: [{ type: 'input', position: 'left' }],
+  icon: { source: '/icons/start.svg', fit: 'contain', scaleWithBounds: true },
+});
+```
+
+### Styling
+
+`StyleManager` applies themes and classes to nodes/edges/text/ports/groups.
+
+```ts
+const styles = new StyleManager('dark');
+styles.registerClass({
+  name: 'error',
+  node: { fillColor: '#fee2e2', strokeColor: '#dc2626' },
+  text: { color: '#991b1b' },
+});
+renderer.setStyleManager(styles);
+```
+
+Built-in themes: `DEFAULT_THEME`, `DARK_THEME`.
+
+### Serialization
+
+```ts
+import { Serializer } from 'papirus';
+
+const serializer = new Serializer(renderer, {
+  nodeFactory: (data) => new RectangleNode(data),
+  edgeFactory: (data) => new Edge(data),
+});
+
+const json = serializer.toJSON(true);
+serializer.fromJSON(json);
+```
+
+### Export
+
+```ts
+import { ImageExporter, SvgExporter } from 'papirus';
+
+const imageExporter = new ImageExporter(renderer);
+await imageExporter.download('diagram.png', { scale: 2 });
+
+const svgExporter = new SvgExporter(renderer);
+await svgExporter.download('diagram.svg');
+```
+
+### Overlays
+
+```ts
+import { GridOverlay, MiniMap } from 'papirus';
+
+renderer.use(new GridOverlay({ gridSize: 20 }));
+renderer.use(new MiniMap({ width: 180, height: 120, padding: 12 }));
+```
+
+Also available: `RulersOverlay`, `GuidesOverlay`, `AutoLayout`, `AutoRouting`, `alignNodes`, `distributeNodes`.
+
+## Framework Integrations
+
+- [Vue 3](./packages/vue)
+
+## Example
+
+See [`examples/index.html`](./examples/index.html) for a complete interactive demo.
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+Useful commands:
+
+```bash
+npm run typecheck       # TypeScript type checking
+npm run lint            # ESLint
+npm run format          # Prettier formatting
+npm run build           # Build library
+npm run test            # Run tests
+npm run test:coverage   # Tests with coverage
+```
+
+## Contributing
+
+Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.

package/README.ru.md

@@ -0,0 +1,178 @@
+# Papirus
+
+[![npm version](https://img.shields.io/npm/v/papirus.svg)](https://www.npmjs.com/package/papirus)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+Papirus — библиотека на TypeScript для построения интерактивных 2D‑схем на HTML Canvas. Поддерживает узлы, связи, группы, стили, сериализацию, экспорт и интерактивность.
+
+[English version](./README.md)
+
+## О проекте
+
+Papirus — это движок рендера и взаимодействия с диаграммами, рассчитанный на встраивание в любой UI (SPA, статические страницы, дизайн‑системы). Библиотека поставляет:
+
+- Рендерер (`DiagramRenderer`) с системой координат, масштабированием и панорамированием.
+- Набор элементов (узлы/рёбра/группы) и базовые типы.
+- Менеджеры взаимодействий (выделение, перемещение, соединение, история).
+- Контекстное меню и поиск/фильтрация.
+- Базовые анимации и анимированный поток рёбер.
+- Темизацию и стили через `StyleManager`.
+- Оверлеи (сетка, миникарта, линейки, направляющие) и утилиты экспорта.
+
+## Установка
+
+```bash
+npm install papirus
+```
+
+## Быстрый старт
+
+```ts
+import { DiagramRenderer, RectangleNode, Edge } from 'papirus';
+
+const renderer = new DiagramRenderer('#canvas', {
+  width: 900,
+  height: 600,
+  backgroundColor: '#fafafa',
+});
+
+const nodeA = new RectangleNode({ x: 100, y: 100, width: 140, height: 60, label: 'Start' });
+const nodeB = new RectangleNode({ x: 360, y: 100, width: 140, height: 60, label: 'Process' });
+
+renderer.addNode(nodeA);
+renderer.addNode(nodeB);
+renderer.addEdge(new Edge({
+  from: { nodeId: nodeA.id },
+  to: { nodeId: nodeB.id },
+  type: 'bezier',
+}));
+
+renderer.enableInteractions();
+```
+
+## Документация
+
+- [Обзор API](./docs/api.md)
+- [Элементы](./docs/elements.md)
+- [Интерактивность](./docs/interactions.md)
+- [Оверлеи](./docs/overlays.md)
+- [Утилиты](./docs/utils.md)
+
+## Возможности
+
+### Интерактивность
+
+Встроенный `InteractionManager` включает:
+
+- drag/select/connect/undo/redo/copy/paste
+- Панорамирование по пустому месту канваса
+- Zoom колесом, pinch‑to‑zoom, two‑finger pan
+
+```ts
+const interactions = renderer.enableInteractions({ gridSize: 20, snapToGrid: true });
+interactions.navigation.fitToView();
+```
+
+Создание связи по умолчанию: `Shift + drag` от узла к узлу.
+
+### Элементы и группы
+
+```ts
+const group = new Group({ label: 'Main Flow', padding: 16 });
+group.addChild(nodeA);
+group.addChild(nodeB);
+renderer.addGroup(group);
+
+const node = new RectangleNode({
+  x: 20, y: 20, width: 120, height: 60,
+  ports: [{ type: 'input', position: 'left' }],
+  icon: { source: '/icons/start.svg', fit: 'contain', scaleWithBounds: true },
+});
+```
+
+### Стили
+
+`StyleManager` применяет темы и классы к узлам/рёбрам/тексту/портам/группам.
+
+```ts
+const styles = new StyleManager('dark');
+styles.registerClass({
+  name: 'error',
+  node: { fillColor: '#fee2e2', strokeColor: '#dc2626' },
+  text: { color: '#991b1b' },
+});
+renderer.setStyleManager(styles);
+```
+
+Доступны готовые темы: `DEFAULT_THEME`, `DARK_THEME`.
+
+### Сериализация
+
+```ts
+import { Serializer } from 'papirus';
+
+const serializer = new Serializer(renderer, {
+  nodeFactory: (data) => new RectangleNode(data),
+  edgeFactory: (data) => new Edge(data),
+});
+
+const json = serializer.toJSON(true);
+serializer.fromJSON(json);
+```
+
+### Экспорт
+
+```ts
+import { ImageExporter, SvgExporter } from 'papirus';
+
+const imageExporter = new ImageExporter(renderer);
+await imageExporter.download('diagram.png', { scale: 2 });
+
+const svgExporter = new SvgExporter(renderer);
+await svgExporter.download('diagram.svg');
+```
+
+### Оверлеи
+
+```ts
+import { GridOverlay, MiniMap } from 'papirus';
+
+renderer.use(new GridOverlay({ gridSize: 20 }));
+renderer.use(new MiniMap({ width: 180, height: 120, padding: 12 }));
+```
+
+Доступны также `RulersOverlay`, `GuidesOverlay`, `AutoLayout`, `AutoRouting`, `alignNodes`, `distributeNodes`.
+
+## Интеграции
+
+- [Vue 3](./packages/vue)
+
+## Пример
+
+См. [`examples/index.html`](./examples/index.html).
+
+## Разработка
+
+```bash
+npm install
+npm run dev
+```
+
+Полезные команды:
+
+```bash
+npm run typecheck       # Проверка типов TypeScript
+npm run lint            # ESLint
+npm run format          # Форматирование Prettier
+npm run build           # Сборка библиотеки
+npm run test            # Запуск тестов
+npm run test:coverage   # Тесты с покрытием
+```
+
+## Contributing
+
+См. [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## Лицензия
+
+MIT — см. [LICENSE](./LICENSE).

package/dist/constants.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Centralized constants for the diagram library
+ */
+export declare const EDGE_HANDLE_RADIUS = 6;
+export declare const ARROW_SIZE = 10;
+export declare const ARROW_ANGLE: number;
+export declare const MARKER_SIZES: Record<string, number>;
+export declare const EDGE_LABEL_BACKGROUND_PADDING = 4;
+export declare const EDGE_LABEL_BACKGROUND_RADIUS = 2;
+export declare const RESIZE_HANDLE_SIZE = 8;
+export declare const RESIZE_HANDLE_OFFSET = 6;
+export declare const ANCHOR_POINT_RADIUS = 4;
+export declare const ANCHOR_POINT_HOVER_RADIUS = 6;
+export declare const ANCHOR_POINT_HITBOX_RADIUS = 10;
+export declare const NODE_HITBOX_PADDING = 10;
+export declare const ANCHOR_PORT_PREFIX = "anchor:";
+export declare const BEZIER_MAX_OFFSET = 100;
+export declare const SELECTION_RECT_MIN_SIZE = 1;
+export declare const DEFAULT_SELECTION_COLOR = "#3b82f6";
+export declare const DEFAULT_HOVER_COLOR = "#6366f1";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,WAAW,QAAc,CAAC;AAGvC,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK/C,CAAC;AAGF,eAAO,MAAM,6BAA6B,IAAI,CAAC;AAC/C,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAG9C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAGtC,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAC7C,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAGtC,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAG5C,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAGrC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,YAAY,CAAC;AACjD,eAAO,MAAM,mBAAmB,YAAY,CAAC"}

package/dist/core/AnimationManager.d.ts

@@ -0,0 +1,24 @@
+import { AnimationOptions } from '../types';
+export interface AnimationState {
+    opacity: number;
+    scale: number;
+    highlight: number;
+}
+export declare class AnimationManager {
+    private options;
+    private enter;
+    private exit;
+    private highlight;
+    constructor(options?: AnimationOptions);
+    configure(options: AnimationOptions): void;
+    get enabled(): boolean;
+    registerEnter(id: string, now?: number): void;
+    registerExit(id: string, onComplete?: () => void, now?: number): void;
+    registerHighlight(id: string, now?: number): void;
+    isExiting(id: string): boolean;
+    hasActive(): boolean;
+    update(now?: number): boolean;
+    getState(id: string, now?: number): AnimationState;
+    private lerp;
+}
+//# sourceMappingURL=AnimationManager.d.ts.map

package/dist/core/AnimationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationManager.d.ts","sourceRoot":"","sources":["../../src/core/AnimationManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB;AAgBD,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,OAAO,CAA6B;IAC5C,OAAO,CAAC,KAAK,CAA6B;IAC1C,OAAO,CAAC,IAAI,CAAgC;IAC5C,OAAO,CAAC,SAAS,CAA6B;gBAElC,OAAO,GAAE,gBAAqB;IAI1C,SAAS,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI1C,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,SAAoB,GAAG,IAAI;IAOxD,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,IAAI,EAAE,GAAG,SAAoB,GAAG,IAAI;IAWhF,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,SAAoB,GAAG,IAAI;IAO5D,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAI9B,SAAS,IAAI,OAAO;IAIpB,MAAM,CAAC,GAAG,SAAoB,GAAG,OAAO;IAgCxC,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,SAAoB,GAAG,cAAc;IA8B7D,OAAO,CAAC,IAAI;CAGb"}

package/dist/core/ConnectionManager.d.ts

@@ -0,0 +1,139 @@
+import { EventEmitter } from '../events/EventEmitter';
+import { DiagramRenderer } from './DiagramRenderer';
+import { InputEvent } from '../events/InputHandler';
+import { Node } from '../elements/Node';
+import { Edge } from '../elements/Edge';
+import { EdgeEndpoint, Point } from '../types';
+/**
+ * Connection events
+ */
+export interface ConnectionEvents {
+    connectionStart: [fromNode: Node];
+    connectionMove: [fromPoint: Point, toPoint: Point];
+    connectionEnd: [edge: Edge | null];
+    connect: [edge: Edge];
+    edgeReconnectStart: [edge: Edge, endpoint: 'start' | 'end', original: EdgeEndpoint];
+    edgeReconnect: [edge: Edge, endpoint: 'start' | 'end'];
+}
+export type ConnectionValidator = (sourceNodeId: string, targetNodeId: string) => boolean;
+export interface ConnectionManagerOptions {
+    renderer: DiagramRenderer;
+    createEdge: (from: EdgeEndpoint, to: EdgeEndpoint) => Edge;
+    addEdge?: (edge: Edge) => void;
+}
+/**
+ * Manages port-to-port connection creation
+ */
+export declare class ConnectionManager extends EventEmitter<ConnectionEvents> {
+    private renderer;
+    private readonly createEdge;
+    private readonly addEdge;
+    private _connectionValidator;
+    private isConnecting;
+    private sourceNode;
+    private sourcePoint;
+    private previewEndpoint;
+    private sourceAnchorId;
+    private hoverNodeId;
+    private hoverAnchorId;
+    private hoverDisabled;
+    private reconnectPoint;
+    private previewTargetAnchorId;
+    private isReconnecting;
+    private reconnectingEdge;
+    private reconnectingEndpoint;
+    private originalEdgeEndpoint;
+    constructor(options: ConnectionManagerOptions);
+    /**
+     * Set a validator that determines whether a connection between two nodes is allowed.
+     * When set, disallowed targets show forbidden styling and connections are blocked.
+     */
+    set connectionValidator(validator: ConnectionValidator | null);
+    /**
+     * Check if currently creating a connection
+     */
+    get connecting(): boolean;
+    /**
+     * Check if currently reconnecting an edge
+     */
+    get reconnecting(): boolean;
+    /**
+     * Get the edge being reconnected (to hide it during preview)
+     */
+    get reconnectingEdgeId(): string | null;
+    /**
+     * Current preview endpoint
+     */
+    get previewEnd(): Point | null;
+    /**
+     * Disable hover and clear state (used when dragging starts)
+     */
+    disableHover(): void;
+    /**
+     * Re-enable hover (used when dragging ends)
+     */
+    enableHover(): void;
+    /**
+     * Handle mouse down on a node
+     */
+    handleNodeMouseDown(event: InputEvent, node: Node): boolean;
+    /**
+     * Check if mouse is over a port and start connection
+     */
+    tryStartConnection(event: InputEvent): boolean;
+    /**
+     * Try to start connection from a hovered anchor point
+     */
+    tryStartConnectionAtPoint(event: InputEvent): boolean;
+    /**
+     * Try to start edge reconnection from handle
+     */
+    tryStartReconnection(event: InputEvent): boolean;
+    /**
+     * Update the reconnecting edge to follow cursor
+     */
+    private updateReconnectingEdge;
+    /**
+     * Handle mouse move during connection
+     */
+    handleMouseMove(event: InputEvent): boolean;
+    /**
+     * Get the node ID at the other end of the reconnecting edge
+     */
+    private getOtherNodeId;
+    /**
+     * Handle mouse up to complete or cancel connection
+     */
+    handleMouseUp(event: InputEvent): boolean;
+    /**
+     * Cancel current connection
+     */
+    cancelConnection(): void;
+    /**
+     * Render connection preview
+     */
+    renderPreview(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Get control point offset based on direction
+     */
+    private getDirectionOffset;
+    /**
+     * Draw a Bézier curve preview between two points
+     */
+    private drawBezierPreview;
+    private isCompatibleTarget;
+    private setCursor;
+    private reset;
+    private resetReconnection;
+    /**
+     * Render anchors when hovering a node (not connecting)
+     */
+    renderHoverAnchors(ctx: CanvasRenderingContext2D): void;
+    private drawPlus;
+    private renderAnchorHighlights;
+    private drawCross;
+    private getNodeAtPoint;
+    private updateHover;
+    private getAnchorAtPoint;
+}
+//# sourceMappingURL=ConnectionManager.d.ts.map

package/dist/core/ConnectionManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionManager.d.ts","sourceRoot":"","sources":["../../src/core/ConnectionManager.ts"],"names":[],"mappings":"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"}

package/dist/core/ContextMenuManager.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from '../events/EventEmitter';
+import { DiagramRenderer } from './DiagramRenderer';
+import { Point } from '../types';
+import { Node } from '../elements/Node';
+import { Edge } from '../elements/Edge';
+export type ContextMenuIcon = string | {
+    type: 'text' | 'svg' | 'html';
+    value: string;
+};
+export interface ContextMenuItem {
+    label?: string;
+    icon?: ContextMenuIcon;
+    action?: (target: ContextMenuTarget) => void;
+    items?: ContextMenuItem[];
+    enabled?: boolean;
+    visible?: boolean;
+    separator?: boolean;
+}
+export type ContextMenuTarget = {
+    type: 'node';
+    node: Node;
+    point: Point;
+    screenPoint: Point;
+    originalEvent: MouseEvent;
+} | {
+    type: 'edge';
+    edge: Edge;
+    point: Point;
+    screenPoint: Point;
+    originalEvent: MouseEvent;
+} | {
+    type: 'canvas';
+    point: Point;
+    screenPoint: Point;
+    originalEvent: MouseEvent;
+};
+export type ContextMenuProvider = ContextMenuItem[] | ((target: ContextMenuTarget) => ContextMenuItem[]);
+export interface ContextMenuConfig {
+    node?: ContextMenuProvider;
+    edge?: ContextMenuProvider;
+    canvas?: ContextMenuProvider;
+}
+export interface ContextMenuOptions {
+    menu: ContextMenuConfig;
+    container?: HTMLElement;
+    className?: string;
+    minWidth?: number;
+    closeOnSelect?: boolean;
+}
+export interface ContextMenuEvents {
+    open: [target: ContextMenuTarget];
+    close: [];
+}
+export declare class ContextMenuManager extends EventEmitter<ContextMenuEvents> {
+    private renderer;
+    private options;
+    private menuElement;
+    private cleanupHandlers;
+    constructor(renderer: DiagramRenderer, options: ContextMenuOptions);
+    setMenu(menu: ContextMenuConfig): void;
+    destroy(): void;
+    private attachListeners;
+    private resolveItems;
+    private open;
+    private close;
+    private buildMenu;
+    private buildList;
+    private createIconElement;
+    private isSvgString;
+    private adjustPosition;
+}
+//# sourceMappingURL=ContextMenuManager.d.ts.map

package/dist/core/ContextMenuManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuManager.d.ts","sourceRoot":"","sources":["../../src/core/ContextMenuManager.ts"],"names":[],"mappings":"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"}