json-canvas-viewer 3.1.1 → 3.2.1

package/dist/types/declarations.d.ts

@@ -0,0 +1,86 @@
+import type { GeneralModuleCtor } from './baseModule';
+declare global {
+    interface JSONCanvasGenericNode {
+        id: string;
+        type: 'group' | 'file' | 'text' | 'link';
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        styleAttributes?: Record<string, string>;
+        color?: string;
+    }
+    interface JSONCanvasGroupNode extends JSONCanvasGenericNode {
+        type: 'group';
+        label?: string;
+        background?: string;
+        backgroundStyle?: 'cover' | 'ratio' | 'repeat';
+    }
+    interface JSONCanvasFileNode extends JSONCanvasGenericNode {
+        type: 'file';
+        file: string;
+        subpath?: string;
+    }
+    interface JSONCanvasTextNode extends JSONCanvasGenericNode {
+        type: 'text';
+        text: string;
+    }
+    interface JSONCanvasLinkNode extends JSONCanvasGenericNode {
+        type: 'link';
+        url: string;
+    }
+    type JSONCanvasNode = JSONCanvasGroupNode | JSONCanvasFileNode | JSONCanvasTextNode | JSONCanvasLinkNode;
+    interface JSONCanvasEdge {
+        id: string;
+        fromNode: string;
+        toNode: string;
+        fromSide: 'right' | 'left' | 'top' | 'bottom';
+        toSide: 'right' | 'left' | 'top' | 'bottom';
+        toEnd?: 'arrow' | 'none';
+        label?: string;
+        styleAttributes?: Record<string, string>;
+        color?: string;
+    }
+    interface JSONCanvas {
+        nodes?: Array<JSONCanvasNode>;
+        edges?: Array<JSONCanvasEdge>;
+    }
+}
+export type Coordinates = {
+    x: number;
+    y: number;
+};
+export type RuntimeData = {
+    offsetX: number;
+    offsetY: number;
+    scale: number;
+    canvasData: JSONCanvas;
+    nodeMap: Record<string, JSONCanvasNode>;
+    canvasBaseDir: string;
+    nodeBounds: NodeBounds;
+    container: HTMLDivElement;
+};
+export type NodeBounds = {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+    centerX: number;
+    centerY: number;
+};
+export type GeneralArguments = Array<any>;
+export type GeneralObject = Record<Indexable, any>;
+export type GeneralFunction = (...args: GeneralArguments) => any;
+export type Empty = {};
+type Indexable = string | number | symbol;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type AllModuleInstances<T extends ModuleInput> = InstanceType<T[number]>;
+export type DefaultOptions = {
+    container: HTMLElement;
+    canvasPath: string;
+};
+export type ModuleInput = Array<GeneralModuleCtor>;
+export type Options<T extends ModuleInput> = Omit<UnionToIntersection<AllModuleInstances<T>['options']>, keyof DefaultOptions> & DefaultOptions;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,20 @@
+export { type BaseArgs, BaseModule } from './baseModule';
+export { JSONCanvasViewer } from './canvasViewer';
+export { default as Controls } from './controls';
+export { default as DebugPanel } from './debugPanel';
+export { default as Minimap } from './minimap';
+export { default as MistouchPreventer } from './mistouchPreventer';
+export { default as renderToString } from './renderToString';
+export { default as CanvasUtils } from './utilities';
+import Controller from './controller';
+import DataManager from './dataManager';
+import InteractionHandler from './interactionHandler';
+import OverlayManager from './overlayManager';
+import Renderer from './renderer';
+export declare const developerSuite: {
+    Controller: typeof Controller;
+    DataManager: typeof DataManager;
+    InteractionHandler: typeof InteractionHandler;
+    Renderer: typeof Renderer;
+    OverlayManager: typeof OverlayManager;
+};

package/dist/types/interactionHandler.d.ts

@@ -1,12 +1,24 @@
-export default class interactionHandler {
-    private interactor;
-    private registry;
-    constructor(data: runtimeData, registry: registry);
-    private stop;
-    private start;
-    private onLoad;
+import { Click, type Ctors, Drag, MultitouchPanZoom, Pointeract, type Options as PointeractOptions, PreventDefault, WheelPanZoom } from 'pointeract';
+import { type BaseArgs, BaseModule } from './baseModule';
+type Options = {
+    pointeract?: PointeractOptions<Ctors<[Click, Drag, WheelPanZoom, PreventDefault, MultitouchPanZoom]>>;
+};
+export default class InteractionHandler extends BaseModule<Options> {
+    private pointeract;
+    private DM;
+    onClick: {
+        (args_0: string | null): void;
+        subs: Set<(args_0: string | null) => unknown>;
+        subscribe(callback: (args_0: string | null) => unknown): void;
+        unsubscribe(callback: (args_0: string | null) => unknown): void;
+    };
+    constructor(...args: BaseArgs);
+    stopInteraction: Pointeract['stop'];
+    startInteraction: Pointeract['start'];
+    private onFetched;
     private onPan;
     private onZoom;
-    private onClick;
-    private dispose;
+    private onTrueClick;
+    dispose: () => void;
 }
+export {};

package/dist/types/{extensions/minimap → minimap}/index.d.ts

@@ -1,21 +1,27 @@
-export default class minimap {
-    private minimapCtx;
+import { type BaseArgs, BaseModule } from '../baseModule';
+type Options = {
+    minimapCollapsed?: boolean;
+};
+export default class Minimap extends BaseModule<Options> {
+    private _minimapCtx;
     private _viewportRectangle;
     private _minimap;
     private _minimapContainer;
     private _toggleMinimapBtn;
-    private minimapCollapsed;
     private minimapCache;
-    private data;
+    private DM;
+    private collapsed;
     private get minimap();
+    private get minimapCtx();
     private get viewportRectangle();
     private get minimapContainer();
     private get toggleMinimapBtn();
-    constructor(data: runtimeData, registry: registry);
-    private toggleCollapse;
+    constructor(...args: BaseArgs);
+    toggleCollapse: () => void;
     private drawMinimap;
     private drawMinimapNode;
     private drawMinimapEdge;
     private updateViewportRectangle;
-    private dispose;
+    dispose: () => void;
 }
+export {};

package/dist/types/mistouchPreventer/index.d.ts

@@ -0,0 +1,22 @@
+import { type BaseArgs, BaseModule } from '../baseModule';
+type Options = {
+    mistouchPreventer?: {
+        preventAtStart?: boolean;
+        labelText?: string;
+    };
+};
+export default class MistouchPreventer extends BaseModule<Options> {
+    private _preventionContainer;
+    private preventMt;
+    private DM;
+    private preventMistouch;
+    private get preventionContainer();
+    constructor(...args: BaseArgs);
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    startPrevention: () => void;
+    endPrevention: () => void;
+    dispose: () => void;
+}
+export {};

package/dist/types/overlayManager.d.ts

@@ -1,19 +1,38 @@
-export default class overlayManager {
+import { micromark } from 'micromark';
+import { type BaseArgs, BaseModule } from './baseModule';
+type Options = {
+    micromark?: Parameters<typeof micromark>[1];
+};
+export default class OverlayManager extends BaseModule<Options> {
     private _overlaysLayer;
     private overlays;
     private selectedId;
     private eventListeners;
-    private data;
-    private registry;
+    private DM;
+    private IH;
+    private parse;
     private get overlaysLayer();
-    constructor(data: runtimeData, registry: registry);
-    private onLoad;
+    hooks: {
+        onInteractionStart: {
+            (): void;
+            subs: Set<() => unknown>;
+            subscribe(callback: () => unknown): void;
+            unsubscribe(callback: () => unknown): void;
+        };
+        onInteractionEnd: {
+            (): void;
+            subs: Set<() => unknown>;
+            subscribe(callback: () => unknown): void;
+            unsubscribe(callback: () => unknown): void;
+        };
+    };
+    constructor(...args: BaseArgs);
+    private onFetched;
     private select;
     private loadMarkdownForNode;
     private updateOverlays;
-    private updateOrCreateOverlay;
+    private updateOverlay;
     private constructOverlay;
-    private startInteract;
-    private endInteract;
-    private dispose;
+    dispose: () => void;
 }
+export {};

package/dist/types/renderToString.d.ts

@@ -0,0 +1,2 @@
+import { micromark } from 'micromark';
+export default function (path: string, micromarkOptions?: Parameters<typeof micromark>[1]): Promise<string>;

package/dist/types/renderer.d.ts

@@ -1,10 +1,11 @@
-export default class renderer {
+import { type BaseArgs, BaseModule } from './baseModule';
+export default class Renderer extends BaseModule {
     private _canvas;
     private ctx;
-    private data;
+    private DM;
     private zoomInOptimize;
     private get canvas();
-    constructor(data: runtimeData, registry: registry);
+    constructor(...args: BaseArgs);
     private optimizeDPR;
     private redraw;
     private trueRedraw;
@@ -20,5 +21,5 @@ export default class renderer {
     private getControlPoints;
     private drawCurvedPath;
     private drawArrowhead;
-    private dispose;
+    dispose: () => void;
 }

package/dist/types/shared.d.ts

@@ -0,0 +1 @@
+export declare const destroyError: Error;

package/dist/types/utilities.d.ts

@@ -1,16 +1,29 @@
-export declare const unexpectedError: Error;
-export declare const destroyError: Error;
-export interface RuntimeJSONCanvasNode extends JSONCanvasNode {
-    mdContent?: string;
-    mdFrontmatter?: Record<string, string>;
-}
-export declare function drawRoundRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number): void;
-export declare function getAnchorCoord(node: JSONCanvasNode, side: 'top' | 'bottom' | 'left' | 'right'): number[];
-export declare function getColor(colorIndex?: string): {
+import type { GeneralArguments } from './declarations';
+declare const _default: {
+    round: typeof round;
+    resizeCanvasForDPR: typeof resizeCanvasForDPR;
+    applyStyles: typeof applyStyles;
+    drawRoundRect: typeof drawRoundRect;
+    getAnchorCoord: typeof getAnchorCoord;
+    getColor: typeof getColor;
+    resolvePath: typeof resolvePath;
+    makeHook: typeof makeHook;
+};
+export default _default;
+declare function applyStyles(container: HTMLElement | ShadowRoot, styleString: string): void;
+declare function drawRoundRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number): void;
+declare function getAnchorCoord(node: JSONCanvasNode, side: 'top' | 'bottom' | 'left' | 'right'): number[];
+declare function getColor(colorIndex?: string): {
     border: string;
     background: string;
     active: string;
 };
-export declare function resizeCanvasForDPR(canvas: HTMLCanvasElement, width: number, height: number): void;
-export declare function deepMerge<T extends Record<string, any>>(main: T, toMerge: Record<string, any>, passive?: boolean): void;
-export declare function round(roundedNum: number, digits: number): number;
+declare function resizeCanvasForDPR(canvas: HTMLCanvasElement, width: number, height: number): void;
+declare function round(roundedNum: number, digits: number): number;
+declare function resolvePath(path: string): string;
+declare function makeHook<Args extends GeneralArguments = []>(): {
+    (...args: Args): void;
+    subs: Set<(...args: Args) => unknown>;
+    subscribe(callback: (...args: Args) => unknown): void;
+    unsubscribe(callback: (...args: Args) => unknown): void;
+};

package/package.json

@@ -1,92 +1,56 @@
 {
   "name": "json-canvas-viewer",
-  "version": "3.1.1",
-  "description": "A TypeScript-based viewer for JSON Canvas, easy to embed into websites.",
+  "version": "3.2.1",
+  "description": "An extensible TypeScript-based viewer for JSON Canvas, easy to embed into websites.",
   "type": "module",
-  "types": "dist/types/canvasViewer.d.ts",
-  "main": "dist/cjs/index.js",
-  "module": "dist/es/index.js",
-  "exports": {
-    ".": {
-      "types": "./dist/types/canvasViewer.d.ts",
-      "import": "./dist/es/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./minimap": {
-      "types": "./dist/types/extensions/minimap/index.d.ts",
-      "import": "./dist/es/minimap.js",
-      "require": "./dist/cjs/minimap.js"
-    },
-    "./controls": {
-      "types": "./dist/types/extensions/controls/index.d.ts",
-      "import": "./dist/es/controls.js",
-      "require": "./dist/cjs/controls.js"
-    },
-    "./mistouchPreventer": {
-      "types": "./dist/types/extensions/mistouchPreventer/index.d.ts",
-      "import": "./dist/es/mistouchPreventer.js",
-      "require": "./dist/cjs/mistouchPreventer.js"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "minimap": [
-        "dist/types/extensions/minimap/index.d.ts"
-      ],
-      "controls": [
-        "dist/types/extensions/controls/index.d.ts"
-      ],
-      "mistouchPreventer": [
-        "dist/types/extensions/mistouchPreventer/index.d.ts"
-      ]
-    }
-  },
+  "types": "dist/types/src/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Hesprs/JSON-Canvas-Viewer.git"
+    "url": "git+https://github.com/hesprs/json-canvas-viewer.git"
   },
-  "homepage": "https://github.com/Hesprs/JSON-Canvas-Viewer#readme",
+  "homepage": "https://github.com/hesprs/json-canvas-viewer#readme",
   "bugs": {
-    "url": "https://github.com/Hesprs/JSON-Canvas-Viewer/issues"
+    "url": "https://github.com/hesprs/json-canvas-viewer/issues"
   },
   "keywords": [
-    "Obsidian",
-    "JSON Canvas",
-    "Viewer",
-    "Front-end",
-    "HTML Canvas",
-    "TypeScript"
+    "obsidian",
+    "json-canvas",
+    "front-end",
+    "html-canvas",
+    "typescript"
   ],
   "author": {
     "name": "Hēsperus",
     "email": "hesprs@outlook.com"
   },
+  "publishConfig": {
+    "provenance": true,
+    "access": "public"
+  },
   "license": "MIT",
-  "packageManager": "pnpm@10.15.1",
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@types/node": "^24.2.1",
-    "eslint": "^9.32.0",
-    "eslint-config-prettier": "^10.1.8",
-    "sass": "^1.90.0",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.1"
+    "@biomejs/biome": "^2.3.10",
+    "@types/node": "^25.0.3",
+    "micromark-extension-gfm": "^3.0.0",
+    "sass": "^1.97.1",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "marked": "^16.1.2"
-  },
-  "optionalDependencies": {
-    "marked-katex-extension": "^5.1.5"
+    "@needle-di/core": "^1.1.0",
+    "micromark": "^4.0.2",
+    "pointeract": "^1.0.1"
   },
   "scripts": {
-    "test": "vite --open",
-    "lint": "eslint .",
-    "build-types": "tsc --project tsconfig.json",
-    "build": "vite build && pnpm run build-types"
+    "dev": "vite",
+    "lint": "biome check --write",
+    "build": "vite build && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "check": "tsc --noEmit && biome check"
   }
 }

package/dist/cjs/controls.js

@@ -1 +0,0 @@
-"use strict";const t=require("../utilities-C1DbXNeO.cjs");module.exports=class{constructor(t,e){this.toggleCollapse=()=>this.controlsPanel.classList.toggle("collapsed"),this.zoomIn=()=>this.registry.api.main.zoom(1.1,this.registry.api.dataManager.middleViewer()),this.zoomOut=()=>this.registry.api.main.zoom(1/1.1,this.registry.api.dataManager.middleViewer()),this.slide=()=>this.registry.api.main.zoomToScale(Math.pow(1.1,Number(this.zoomSlider.value)),this.registry.api.dataManager.middleViewer()),this.updateSlider=()=>this.zoomSlider.value=String(this.scaleToSlider(this.data.scale)),this.scaleToSlider=t=>Math.log(t)/Math.log(1.1),this.dispose=()=>{this.toggleCollapseBtn.removeEventListener("click",this.toggleCollapse),this.zoomInBtn.removeEventListener("click",this.zoomIn),this.zoomOutBtn.removeEventListener("click",this.zoomOut),this.zoomSlider.removeEventListener("input",this.slide),this.resetViewBtn.removeEventListener("click",this.registry.api.main.resetView),this.toggleFullscreenBtn.removeEventListener("click",this.registry.api.main.shiftFullscreen),this.controlsPanel.remove(),this._controlsPanel=null,this._toggleCollapseBtn=null,this._zoomInBtn=null,this._zoomOutBtn=null,this._zoomSlider=null,this._resetViewBtn=null,this._toggleFullscreenBtn=null},e.register({hooks:{onToggleFullscreen:[this.updateFullscreenBtn],onRender:[this.updateSlider],onDispose:[this.dispose]},options:{controls:{collapsed:!1}},api:{controls:{toggleCollapse:this.toggleCollapse}}}),this._controlsPanel=document.createElement("div"),this._controlsPanel.className="controls",this._controlsPanel.classList.toggle("collapsed",e.options.controls.collapsed),e.api.dataManager.applyStyles(this._controlsPanel,".collapse-button{border-radius:8px;transition:transform .2s}.collapse-button:hover{background:#444c}button{cursor:pointer;font-size:18px;height:32px;border:none;transition:var(--containerTransition);text-align:center;background-color:#444;width:32px;padding:5px 0}button svg{width:100%;height:100%}.controls{position:absolute;top:10px;right:10px;display:flex;align-items:center;transition:transform .2s;border-radius:8px;gap:10px}.controls.collapsed{transform:translate(calc(100% - 32px))}.controls.collapsed .collapse-button{transform:rotate(180deg)}.controls .controls-content{display:flex;gap:1px;align-items:center;border-radius:8px;overflow:hidden;background:#333c}.controls button:hover{background:#555}.zoom-slider{width:100px;margin:0 10px}"),this._toggleCollapseBtn=document.createElement("button"),this._toggleCollapseBtn.className="collapse-button",this._toggleCollapseBtn.innerHTML='<svg viewBox="-3.6 -3.6 31.2 31.2" stroke-width=".4"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" /></svg>',this._controlsPanel.appendChild(this._toggleCollapseBtn);const o=document.createElement("div");o.className="controls-content",this._toggleFullscreenBtn=document.createElement("button"),this._toggleFullscreenBtn.innerHTML='<svg viewBox="-5.28 -5.28 34.56 34.56" fill="none"><path d="M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15" stroke-width="2.4" stroke-linecap="round"/></svg>',o.appendChild(this._toggleFullscreenBtn),this._zoomOutBtn=document.createElement("button"),this._zoomOutBtn.innerHTML='<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12" stroke-width="2" stroke-linecap="round" /></svg>',o.appendChild(this._zoomOutBtn),this._zoomSlider=document.createElement("input"),this._zoomSlider.type="range",this._zoomSlider.className="zoom-slider",this._zoomSlider.min="-30",this._zoomSlider.max="30",this._zoomSlider.value="0",o.appendChild(this._zoomSlider),this._zoomInBtn=document.createElement("button"),this._zoomInBtn.innerHTML='<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12m-6-6v12" stroke-width="2" stroke-linecap="round" /></svg>',o.appendChild(this._zoomInBtn),this._resetViewBtn=document.createElement("button"),this._resetViewBtn.innerHTML='<svg viewBox="-6 -6 30 30" stroke-width=".08"><path d="m14.955 7.986.116.01a1 1 0 0 1 .85 1.13 8 8 0 0 1-13.374 4.728l-.84.84c-.63.63-1.707.184-1.707-.707V10h3.987c.89 0 1.337 1.077.707 1.707l-.731.731a6 6 0 0 0 8.347-.264 6 6 0 0 0 1.63-3.33 1 1 0 0 1 1.131-.848zM11.514.813a8 8 0 0 1 1.942 1.336l.837-.837c.63-.63 1.707-.184 1.707.707V6h-3.981c-.89 0-1.337-1.077-.707-1.707l.728-.729a6 6 0 0 0-9.98 3.591 1 1 0 1 1-1.98-.281A8 8 0 0 1 11.514.813Z" /></svg>',o.appendChild(this._resetViewBtn),this._controlsPanel.appendChild(o),t.container.appendChild(this._controlsPanel),this.registry=e,this.data=t,this._toggleCollapseBtn.addEventListener("click",this.toggleCollapse),this._zoomInBtn.addEventListener("click",this.zoomIn),this._zoomOutBtn.addEventListener("click",this.zoomOut),this._zoomSlider.addEventListener("input",this.slide),this._resetViewBtn.addEventListener("click",this.registry.api.main.resetView),this._toggleFullscreenBtn.addEventListener("click",this.registry.api.main.shiftFullscreen)}get controlsPanel(){if(null===this._controlsPanel)throw t.destroyError;return this._controlsPanel}get toggleCollapseBtn(){if(null===this._toggleCollapseBtn)throw t.destroyError;return this._toggleCollapseBtn}get toggleFullscreenBtn(){if(null===this._toggleFullscreenBtn)throw t.destroyError;return this._toggleFullscreenBtn}get zoomOutBtn(){if(null===this._zoomOutBtn)throw t.destroyError;return this._zoomOutBtn}get zoomSlider(){if(null===this._zoomSlider)throw t.destroyError;return this._zoomSlider}get zoomInBtn(){if(null===this._zoomInBtn)throw t.destroyError;return this._zoomInBtn}get resetViewBtn(){if(null===this._resetViewBtn)throw t.destroyError;return this._resetViewBtn}updateFullscreenBtn(){null===document.fullscreenElement?this.toggleFullscreenBtn.innerHTML='<svg viewBox="-40.32 -40.32 176.64 176.64"><path d="M30 60H6a6 6 0 0 0 0 12h18v18a6 6 0 0 0 12 0V66a5.997 5.997 0 0 0-6-6Zm60 0H66a5.997 5.997 0 0 0-6 6v24a6 6 0 0 0 12 0V72h18a6 6 0 0 0 0-12ZM66 36h24a6 6 0 0 0 0-12H72V6a6 6 0 0 0-12 0v24a5.997 5.997 0 0 0 6 6ZM30 0a5.997 5.997 0 0 0-6 6v18H6a6 6 0 0 0 0 12h24a5.997 5.997 0 0 0 6-6V6a5.997 5.997 0 0 0-6-6Z"/></svg>':this.toggleFullscreenBtn.innerHTML='<svg viewBox="-5.28 -5.28 34.56 34.56" fill="none"><path d="M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15" stroke-width="2.4" stroke-linecap="round"/></svg>'}};

package/dist/cjs/debugPanel.js

@@ -1 +0,0 @@
-"use strict";const e=require("../utilities-C1DbXNeO.cjs");module.exports=class{constructor(t,a){this.update=()=>{this.debugPanel.innerHTML=`\n            <p>Scale: ${e.round(this.data.scale,3)}</p>\n            <p>Offset: ${e.round(this.data.offsetX,1)}, ${e.round(this.data.offsetY,1)}</p>\n        `},this.dispose=()=>{this.debugPanel.remove(),this._debugPanel=null},a.register({hooks:{onRender:[this.update],onDispose:[this.dispose]},api:{debugPanel:{update:this.update}}}),this._debugPanel=document.createElement("div"),this._debugPanel.className="debug-panel",a.api.dataManager.applyStyles(this._debugPanel,".debug-panel{position:absolute;bottom:12px;left:12px;background:#0006;border-radius:12px;padding:12px;-webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);border:2px solid rgba(140,140,140,.75);color:#fff;font-size:calc(14px + .3vw);line-height:calc(17px + .3vw);pointer-events:none}"),this.data=t,t.container.appendChild(this._debugPanel)}get debugPanel(){if(!this._debugPanel)throw e.destroyError;return this._debugPanel}};

package/dist/cjs/index.js

@@ -1 +0,0 @@
-"use strict";const t=require("../utilities-C1DbXNeO.cjs"),e=require("marked"),i=800;class s{constructor(e,s){this.spatialGrid=null,this.acceleration={pan:{x:0,y:0},zoom:0},this.animationId=null,this.loadCanvas=async t=>{try{if(/^https?:\/\//.test(t))this.data.canvasBaseDir=t.substring(0,t.lastIndexOf("/")+1);else{const e=t.lastIndexOf("/");this.data.canvasBaseDir=-1!==e?t.substring(0,e+1):"./"}this.data.canvasData=await fetch(t).then(t=>t.json()),this.data.canvasData.nodes.forEach(t=>{if("file"===t.type&&t.file&&!t.file.includes("http")){const e=t.file.split("/");t.file=e[e.length-1]}this.data.nodeMap[t.id]=t}),this.data.nodeBounds=this.calculateNodeBounds(),this.buildSpatialGrid()}catch(t){console.error("Failed to load canvas data:",t)}},this.findNodeAt=({x:t,y:e})=>{const{x:s,y:o}=this.C2W(this.C2C({x:t,y:e}));let a=[];if(this.spatialGrid){const t=`${Math.floor(s/i)},${Math.floor(o/i)}`;a=this.spatialGrid[t]||[]}else a=this.data.canvasData.nodes;for(const t of a)if(!(s<t.x||s>t.x+t.width||o<t.y||o>t.y+t.height||"non-interactive"===this.judgeInteract(t)))return t;return null},this.judgeInteract=e=>{switch(e?e.type:"default"){case"text":case"link":return"select";case"file":{const i=e?.file;if(!i)throw t.unexpectedError;return i.match(/\.(md|wav|mp3)$/i)?"select":"non-interactive"}default:return"non-interactive"}},this.zoom=(t,e)=>{const i=this.data.scale*t;this.zoomToScale(i,e)},this.zoomToScale=(t,e)=>{const i=Math.max(Math.min(t,20),.05);if(i===this.data.scale)return;const s=this.C2C(e);this.data.offsetX=e.x-s.x*i/this.data.scale,this.data.offsetY=e.y-s.y*i/this.data.scale,this.data.scale=i},this.pan=({x:t,y:e})=>{this.data.offsetX+=t,this.data.offsetY+=e},this.panToCoords=({x:t,y:e})=>{this.data.offsetX=t,this.data.offsetY=e},this.shiftFullscreen=(t="toggle")=>{document.fullscreenElement||"toggle"!==t&&"enter"!==t?document.fullscreenElement&&("toggle"===t||"exit"===t)&&document.exitFullscreen():this.data.container.requestFullscreen();for(const t of this.registry.hooks.onToggleFullscreen)t()},this.resetView=()=>{const t=this.data.nodeBounds;if(!t||!this.data.container)return;const e=t.width+200,i=t.height+200,s=this.data.container.clientWidth,o=this.data.container.clientHeight,a=s/e,n=o/i,r=Math.round(1e3*Math.min(a,n))/1e3,h={scale:r,offsetX:s/2-t.centerX*r,offsetY:o/2-t.centerY*r};this.data.offsetX=h.offsetX,this.data.offsetY=h.offsetY,this.data.scale=h.scale},this.C2C=({x:t,y:e})=>({x:t-this.data.offsetX,y:e-this.data.offsetY}),this.C2W=({x:t,y:e})=>({x:t/this.data.scale,y:e/this.data.scale}),this.middleViewer=()=>({x:this.data.container.clientWidth/2,y:this.data.container.clientHeight/2,width:this.data.container.clientWidth,height:this.data.container.clientHeight}),this.applyStyles=(t,e)=>{const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)},this.dispose=()=>{this.animationId&&cancelAnimationFrame(this.animationId),this.animationId=null},s.register({api:{main:{pan:this.pan,zoom:this.zoom,zoomToScale:this.zoomToScale,panToCoords:this.panToCoords,shiftFullscreen:this.shiftFullscreen,resetView:this.resetView},dataManager:{middleViewer:this.middleViewer,findNodeAt:this.findNodeAt,applyStyles:this.applyStyles}},hooks:{onLoad:[async t=>await this.loadCanvas(t)],onDispose:[this.dispose]}}),this.data=e,this.registry=s}calculateNodeBounds(){let t=1/0,e=1/0,i=-1/0,s=-1/0;this.data.canvasData.nodes.forEach(o=>{t=Math.min(t,o.x),e=Math.min(e,o.y),i=Math.max(i,o.x+o.width),s=Math.max(s,o.y+o.height)});const o=i-t,a=s-e;return{minX:t,minY:e,maxX:i,maxY:s,width:o,height:a,centerX:t+o/2,centerY:e+a/2}}buildSpatialGrid(){if(!(this.data.canvasData.nodes.length<50)){this.spatialGrid={};for(const t of this.data.canvasData.nodes){const e=Math.floor(t.x/i),s=Math.floor((t.x+t.width)/i),o=Math.floor(t.y/i),a=Math.floor((t.y+t.height)/i);for(let i=e;i<=s;i++)for(let e=o;e<=a;e++){const s=`${i},${e}`;this.spatialGrid[s]||(this.spatialGrid[s]=[]),this.spatialGrid[s].push(t)}}}}}class o extends EventTarget{constructor(e,i={}){super(),this.pointers=new Map,this.pinchZoomState={lastDistance:0,lastMidpoint:{x:0,y:0}},this.onPointerDown=e=>{if(!(this.pointers.size>=2)&&(e.isPrimary&&this.pointers.clear(),this.pointers.set(e.pointerId,{startX:e.clientX,startY:e.clientY,lastX:e.clientX,lastY:e.clientY,interrupted:!1,target:e.target}),2===this.pointers.size)){const i=this.getNthValue(0),s=this.pointers.get(e.pointerId);if(!i||!s)throw t.unexpectedError;i.interrupted=!0,s.interrupted=!0,this.pinchZoomState.lastDistance=this.getPointerDistance(),this.pinchZoomState.lastMidpoint=this.S2C(this.getPointerMidpoint())}},this.onPointerMove=e=>{const i=this.pointers.get(e.pointerId);if(i){if(1===this.pointers.size){const t=e.clientX-i.lastX,s=e.clientY-i.lastY;this.dispatchPanEvent({x:t,y:s})}if(this.pointers.set(e.pointerId,{startX:i.startX,startY:i.startY,lastX:e.clientX,lastY:e.clientY,interrupted:i.interrupted,target:i.target}),2===this.pointers.size){const e=this.getPointerDistance(),i=this.getPointerMidpoint();if(!e||!i)throw t.unexpectedError;const s=e/this.pinchZoomState.lastDistance;this.pinchZoomState.lastDistance=e;const o=this.S2C(i),a=o.x-this.pinchZoomState.lastMidpoint.x,n=o.y-this.pinchZoomState.lastMidpoint.y;this.pinchZoomState.lastMidpoint=o,this.dispatchPanEvent({x:a,y:n}),this.dispatchZoomEvent(s,o)}}},this.onPointerUp=t=>{const e=this.pointers.get(t.pointerId);if(e&&(this.pointers.delete(t.pointerId),0===this.pointers.size&&!e.interrupted&&Math.abs(e.startX-t.clientX)+Math.abs(e.startY-t.clientY)<5)){const i=this.S2C({x:t.clientX,y:t.clientY}),s=new CustomEvent("trueClick",{detail:{position:i,target:e.target}});this.dispatchEvent(s)}},this.onWheel=t=>{if(!this.lockControlSchema&&!this.proControlSchema&&(t.ctrlKey||t.shiftKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))&&(this.proControlSchema=!0),this.preventDefault&&t.preventDefault(),this.proControlSchema)if(t.ctrlKey){const e=t.deltaY>0?1-this.ctrlZoomFactor:1+this.ctrlZoomFactor,i=this.S2C({x:t.clientX,y:t.clientY});this.dispatchZoomEvent(e,i)}else t.shiftKey&&Math.abs(t.deltaX)<=Math.abs(t.deltaY)?this.dispatchPanEvent({x:-t.deltaY,y:-t.deltaX}):this.dispatchPanEvent({x:-t.deltaX,y:-t.deltaY});else{const e=1-this.zoomFactor*t.deltaY,i=this.S2C({x:t.clientX,y:t.clientY});this.dispatchZoomEvent(e,i)}},this.preventDefaultFunction=t=>t.preventDefault,this.stop=()=>{this.monitoringElement.removeEventListener("pointerdown",this.onPointerDown),window.removeEventListener("pointermove",this.onPointerMove),window.removeEventListener("pointerup",this.onPointerUp),this.monitoringElement.removeEventListener("wheel",this.onWheel),this.preventDefault&&(this.monitoringElement.style.touchAction="",this.monitoringElement.removeEventListener("gesturestart",this.preventDefaultFunction),this.monitoringElement.removeEventListener("gesturechange",this.preventDefaultFunction))},this.start=()=>{this.monitoringElement.addEventListener("pointerdown",this.onPointerDown),window.addEventListener("pointermove",this.onPointerMove),window.addEventListener("pointerup",this.onPointerUp),this.monitoringElement.addEventListener("wheel",this.onWheel,this.preventDefault?{passive:!1}:{}),this.preventDefault&&(this.monitoringElement.style.touchAction="none",this.monitoringElement.addEventListener("gesturestart",this.preventDefaultFunction,{passive:!1}),this.monitoringElement.addEventListener("gesturechange",this.preventDefaultFunction,{passive:!1}))},this.dispose=()=>this.stop(),this.monitoringElement=e,this.preventDefault=i.preventDefault||!1,this.proControlSchema=i.proControlSchema||!1,this.zoomFactor=i.zoomFactor||.002,this.ctrlZoomFactor=i.zoomFactor?50*i.zoomFactor:.1,this.lockControlSchema=i.lockControlSchema||!1}getNthValue(e){if(e<0||e>=this.pointers.size)throw t.unexpectedError;let i=0;for(const t of this.pointers.values()){if(i===e)return t;i++}}getPointerDistance(){const e=this.getNthValue(0),i=this.getNthValue(1);if(!e||!i)throw t.unexpectedError;const s=e.lastX-i.lastX,o=e.lastY-i.lastY;return Math.sqrt(s*s+o*o)}getPointerMidpoint(){const e=this.getNthValue(0),i=this.getNthValue(1);if(!e||!i)throw t.unexpectedError;return{x:(e.lastX+i.lastX)/2,y:(e.lastY+i.lastY)/2}}S2C({x:t,y:e}){const i=this.monitoringElement.getBoundingClientRect();return{x:t-i.left,y:e-i.top}}dispatchPanEvent(e){const i={x:t.round(e.x,1),y:t.round(e.y,1)},s=new CustomEvent("pan",{detail:i});this.dispatchEvent(s)}dispatchZoomEvent(e,i){const s=t.round(e,4),o=new CustomEvent("zoom",{detail:{factor:s,origin:i}});this.dispatchEvent(o)}}class a{constructor(t,e){this.stop=()=>this.interactor.stop(),this.start=()=>this.interactor.start(),this.onLoad=()=>{this.interactor.addEventListener("pan",this.onPan),this.interactor.addEventListener("zoom",this.onZoom),this.interactor.addEventListener("trueClick",this.onClick),this.start()},this.onPan=t=>{t instanceof CustomEvent&&this.registry.api.main.pan(t.detail)},this.onZoom=t=>{t instanceof CustomEvent&&this.registry.api.main.zoom(t.detail.factor,t.detail.origin)},this.onClick=t=>{if(t instanceof CustomEvent){if(function(t){return t.closest&&(t.closest(".controls")||t.closest("button")||t.closest("input"))}(t.detail.target))return;const e=this.registry.api.dataManager.findNodeAt(t.detail.position);for(const t of this.registry.hooks.onClick)t(e?.id||null)}},this.dispose=()=>{this.interactor.removeEventListener("pan",this.onPan),this.interactor.removeEventListener("zoom",this.onZoom),this.interactor.removeEventListener("trueClick",this.onClick),this.interactor.dispose()},e.register({hooks:{onLoad:[this.onLoad],onDispose:[this.dispose],onInteractionStart:[this.stop],onInteractionEnd:[this.start]},options:{interactor:{preventDefault:!0,proControlSchema:!1,zoomFactor:.002,lockControlSchema:!1}},api:{interactionHandler:{stop:this.stop,start:this.start}}}),this.interactor=new o(t.container,e.options.interactor),this.registry=e}}class n{constructor(i,s){this.overlays={},this.selectedId=null,this.eventListeners={},this.onLoad=()=>{const e={text:e=>{if(!e.text)throw t.unexpectedError;this.updateOrCreateOverlay(e,e.text,"text")},file:e=>{if(!e.file)throw t.unexpectedError;e.file.match(/\.md$/i)?this.loadMarkdownForNode(e):e.file.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)?this.updateOrCreateOverlay(e,this.data.canvasBaseDir+e.file,"image"):e.file.match(/\.(mp3|wav)$/i)&&this.updateOrCreateOverlay(e,this.data.canvasBaseDir+e.file,"audio")},link:e=>{if(!e.url)throw t.unexpectedError;this.updateOrCreateOverlay(e,e.url,"link")},group:()=>{}};Object.values(this.data.nodeMap).forEach(t=>e[t.type](t))},this.select=t=>{const e=this.selectedId?this.overlays[this.selectedId]:null,i=t?this.overlays[t]:null;e&&e.classList.remove("active"),i?(i.classList.add("active"),this.startInteract()):this.endInteract(),this.selectedId=t},this.loadMarkdownForNode=async i=>{if(!i.mdContent){i.mdContent="Loading...",this.updateOrCreateOverlay(i,i.mdContent,"markdown");try{if(!i.file)throw t.unexpectedError;const s=await(await fetch(this.data.canvasBaseDir+i.file)).text(),o=s.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);if(o){const t=o[1].split("\n").reduce((t,e)=>{const[i,s]=e.split(":").map(t=>t.trim());return t[i]=s,t},{});i.mdContent=await e.marked.parse(o[2].trim()),i.mdFrontmatter=t}else i.mdContent=await e.marked.parse(s)}catch(t){console.error("Failed to load markdown:",t),i.mdContent="Failed to load content."}}this.updateOrCreateOverlay(i,i.mdContent,"markdown")},this.updateOverlays=()=>this.overlaysLayer.style.transform=`translate(${this.data.offsetX}px, ${this.data.offsetY}px) scale(${this.data.scale})`,this.startInteract=()=>{for(const t of this.registry.hooks.onInteractionStart)t()},this.endInteract=()=>{for(const t of this.registry.hooks.onInteractionEnd)t()},this.dispose=()=>{for(;this.overlaysLayer.firstElementChild;){const e=this.overlaysLayer.firstElementChild;if(this.eventListeners[e.id]){const i=this.eventListeners[e.id][0],s=this.eventListeners[e.id][1];if(!i||!s)throw t.destroyError;e.removeEventListener("pointerenter",i),e.removeEventListener("pointerleave",s),e.removeEventListener("touchstart",i),e.removeEventListener("touchend",s),this.eventListeners[e.id][0]=null,this.eventListeners[e.id][1]=null}e.remove()}this.overlaysLayer.remove(),this._overlaysLayer=null},s.register({hooks:{onLoad:[this.onLoad],onDispose:[this.dispose],onRender:[this.updateOverlays],onClick:[t=>this.select(t)]}}),this._overlaysLayer=document.createElement("div"),this._overlaysLayer.className="overlays",i.container.appendChild(this.overlaysLayer),this.data=i,this.registry=s}get overlaysLayer(){if(!this._overlaysLayer)throw t.destroyError;return this._overlaysLayer}async updateOrCreateOverlay(e,i,s){let o=this.overlays[e.id];if(o||(o=await this.constructOverlay(e,i,s),this.overlaysLayer.appendChild(o),this.overlays[e.id]=o,o.style.left=e.x+"px",o.style.top=e.y+"px",o.style.width=e.width+"px",o.style.height=e.height+"px"),"none"===o.style.display&&(o.style.display="flex"),"markdown"===s){const i=o.getElementsByClassName("parsed-content-wrapper")[0];if(!e.mdContent)throw t.unexpectedError;i.innerHTML!==e.mdContent&&(i.innerHTML=e.mdContent),!o.classList.contains("rtl")&&"rtl"===e.mdFrontmatter?.direction&&o.classList.add("rtl")}}async constructOverlay(i,s,o){const a=t.getColor(i.color),n=document.createElement("div");switch(n.classList.add("overlay-container"),n.id=i.id,n.style.backgroundColor=a.background,n.style.setProperty("--active-color",a.active),o){case"text":case"markdown":{n.classList.add("markdown-content");const t=document.createElement("div");t.innerHTML=await e.marked.parse(s||""),t.classList.add("parsed-content-wrapper"),n.appendChild(t);break}case"link":{const t=document.createElement("iframe");t.src=s,t.sandbox="allow-scripts allow-same-origin",t.className="link-iframe",t.loading="lazy",n.appendChild(t);break}case"audio":{const t=document.createElement("audio");t.className="audio",t.src=s,t.controls=!0,n.appendChild(t);break}case"image":{const t=document.createElement("img");t.src=s,t.loading="lazy",n.appendChild(t)}}switch(o){case"link":case"audio":{const t=document.createElement("div");t.className="click-layer",n.appendChild(t)}}const r=document.createElement("div");r.className="overlay-border",r.style.borderColor=a.border,n.appendChild(r);const h=()=>{i.id===this.selectedId&&this.startInteract()},l=()=>{i.id===this.selectedId&&this.endInteract()};return n.addEventListener("pointerenter",h),n.addEventListener("pointerleave",l),n.addEventListener("touchstart",h),n.addEventListener("touchend",l),this.eventListeners[i.id]=[h,l],n}}const r="#fff";class h{constructor(e,i){this.optimizeDPR=()=>t.resizeCanvasForDPR(this.canvas,this.data.container.offsetWidth,this.data.container.offsetHeight),this.redraw=()=>{this.zoomInOptimize.timeout&&(clearTimeout(this.zoomInOptimize.timeout),this.zoomInOptimize.timeout=null);const t=Date.now(),e=this.getCurrentViewport(this.data.offsetX,this.data.offsetY,this.data.scale);if(this.isViewportInside(e,this.zoomInOptimize.lastDrawnViewport)&&this.data.scale!==this.zoomInOptimize.lastDrawnScale&&t-this.zoomInOptimize.lastCallTime<500)return this.zoomInOptimize.timeout=setTimeout(()=>{this.trueRedraw(this.data.offsetX,this.data.offsetY,this.data.scale,e),this.zoomInOptimize.lastCallTime=t,this.zoomInOptimize.timeout=null},60),void this.fakeRedraw(e,this.data.scale);this.zoomInOptimize.lastCallTime=t,this.trueRedraw(this.data.offsetX,this.data.offsetY,this.data.scale,e)},this.isViewportInside=(t,e)=>t.left>e.left&&t.top>e.top&&t.right<e.right&&t.bottom<e.bottom,this.getCurrentViewport=(t,e,i)=>{const s=-t/i,o=-e/i;return{left:s,top:o,right:s+this.data.container.clientWidth/i,bottom:o+this.data.container.clientHeight/i}},this.drawLabelBar=(t,e,i,s,o)=>{const a=30*o,n=6*o,h=8*o,l=16*o,c=6*o;this.ctx.save(),this.ctx.translate(t,e),this.ctx.scale(1/o,1/o),this.ctx.font=`${l}px 'Inter', sans-serif`;const d=this.ctx.measureText(i).width+2*c;this.ctx.translate(0,-a-h),this.ctx.fillStyle=s,this.ctx.beginPath(),this.ctx.moveTo(n,0),this.ctx.lineTo(d-n,0),this.ctx.quadraticCurveTo(d,0,d,n),this.ctx.lineTo(d,a-n),this.ctx.quadraticCurveTo(d,a,d-n,a),this.ctx.lineTo(n,a),this.ctx.quadraticCurveTo(0,a,0,a-n),this.ctx.lineTo(0,n),this.ctx.quadraticCurveTo(0,0,n,0),this.ctx.closePath(),this.ctx.fill(),this.ctx.fillStyle=r,this.ctx.fillText(i,c,.65*a),this.ctx.restore()},this.drawNodeBackground=e=>{const i=t.getColor(e.color);this.ctx.globalAlpha=1,this.ctx.fillStyle=i.background,t.drawRoundRect(this.ctx,e.x+1,e.y+1,e.width-2,e.height-2,12),this.ctx.fill(),this.ctx.strokeStyle=i.border,this.ctx.lineWidth=2,t.drawRoundRect(this.ctx,e.x,e.y,e.width,e.height,12),this.ctx.stroke()},this.drawGroup=(e,i)=>{this.drawNodeBackground(e),e.label&&this.drawLabelBar(e.x,e.y,e.label,t.getColor(e.color).border,i)},this.drawFileNode=e=>{if(!e.file)throw t.unexpectedError;this.ctx.fillStyle=r,this.ctx.font="16px sans-serif",this.ctx.fillText(e.file,e.x+5,e.y-10)},this.drawEdge=e=>{const{fromNode:i,toNode:s}=this.getEdgeNodes(e);if(!i||!s)throw t.unexpectedError;const[o,a]=t.getAnchorCoord(i,e.fromSide),[n,r]=t.getAnchorCoord(s,e.toSide);let[h,l,c,d]=[0,0,0,0];if(e.controlPoints?[h,l,c,d]=e.controlPoints:([h,l,c,d]=this.getControlPoints(o,a,n,r,e.fromSide,e.toSide),e.controlPoints=[h,l,c,d]),this.drawCurvedPath(o,a,n,r,h,l,c,d),this.drawArrowhead(n,r,c,d),e.label){const i=Math.pow(.5,3)*o+3*Math.pow(.5,2)*.5*h+.375*c+Math.pow(.5,3)*n,s=Math.pow(.5,3)*a+3*Math.pow(.5,2)*.5*l+.375*d+Math.pow(.5,3)*r;this.ctx.font="18px sans-serif";const p=this.ctx.measureText(e.label).width+16,f=20;this.ctx.fillStyle="#222",this.ctx.beginPath(),t.drawRoundRect(this.ctx,i-p/2,s-f/2-2,p,f,4),this.ctx.fill(),this.ctx.fillStyle="#ccc",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText(e.label,i,s-2),this.ctx.textAlign="left",this.ctx.textBaseline="alphabetic"}},this.getEdgeNodes=t=>({fromNode:this.data.nodeMap[t.fromNode],toNode:this.data.nodeMap[t.toNode]}),this.getControlPoints=(t,e,i,s,o,a)=>{const n=i-t,r=s-e,h=Math.min(Math.abs(n),Math.abs(r))+.3*Math.max(Math.abs(n),Math.abs(r)),l=(c=.5*h,Math.max(60,Math.min(300,c)));var c;let d=t,p=e,f=i,m=s;switch(o){case"top":p=e-l;break;case"bottom":p=e+l;break;case"left":d=t-l;break;case"right":d=t+l}switch(a){case"top":m=s-l;break;case"bottom":m=s+l;break;case"left":f=i-l;break;case"right":f=i+l}return[d,p,f,m]},this.drawCurvedPath=(t,e,i,s,o,a,n,r)=>{this.ctx.beginPath(),this.ctx.moveTo(t,e),this.ctx.bezierCurveTo(o,a,n,r,i,s),this.ctx.strokeStyle="#ccc",this.ctx.lineWidth=2,this.ctx.stroke()},this.drawArrowhead=(t,e,i,s)=>{const o=t-i,a=e-s,n=Math.sqrt(o*o+a*a);if(0===n)return;const r=o/n,h=a/n,l=t-12*r-7*h,c=e-12*h+7*r,d=t-12*r+7*h,p=e-12*h-7*r;this.ctx.beginPath(),this.ctx.fillStyle="#ccc",this.ctx.moveTo(t,e),this.ctx.lineTo(l,c),this.ctx.lineTo(d,p),this.ctx.closePath(),this.ctx.fill()},this.dispose=()=>{this.zoomInOptimize.timeout&&(clearTimeout(this.zoomInOptimize.timeout),this.zoomInOptimize.timeout=null),this.canvas.remove(),this._canvas=null},i.register({hooks:{onDispose:[this.dispose],onRender:[this.redraw],onResize:[this.optimizeDPR]}}),this._canvas=document.createElement("canvas"),this._canvas.className="main-canvas",e.container.appendChild(this._canvas),this.ctx=this._canvas.getContext("2d"),this.zoomInOptimize={lastDrawnScale:0,lastDrawnViewport:{left:0,right:0,top:0,bottom:0},timeout:null,lastCallTime:0},this.data=e}get canvas(){if(null===this._canvas)throw t.destroyError;return this._canvas}trueRedraw(t,e,i,s){this.zoomInOptimize.lastDrawnViewport=s,this.zoomInOptimize.lastDrawnScale=i,this.canvas.style.transform="",this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.save(),this.ctx.translate(t,e),this.ctx.scale(i,i),this.data.canvasData.nodes.forEach(t=>{switch(t.type){case"group":this.drawGroup(t,i);break;case"file":this.drawFileNode(t)}}),this.data.canvasData.edges.forEach(t=>this.drawEdge(t)),this.ctx.restore()}fakeRedraw(t,e){const i=e/this.zoomInOptimize.lastDrawnScale,s=(this.zoomInOptimize.lastDrawnViewport.left-t.left)*e,o=(this.zoomInOptimize.lastDrawnViewport.top-t.top)*e;this.canvas.style.transform=`translate(${s}px, ${o}px) scale(${i})`}}module.exports=class{constructor(e,i){for(this.animationId=null,this.resizeAnimationId=null,this.perFrame={lastScale:1,lastOffsets:{x:0,y:0}},this.lastResizeCenter={x:null,y:null},this.data={offsetX:0,offsetY:0,scale:1,canvasData:{nodes:[],edges:[],metadata:{version:"",frontmatter:{}}},nodeMap:{},canvasBaseDir:"",nodeBounds:{minX:0,minY:0,maxX:0,maxY:0,width:0,height:0,centerX:0,centerY:0},container:document.createElement("div")},this.registry={options:{},extensions:[s,h,a,n],hooks:{},api:{},register:e=>{if(e.extensions&&e.extensions.forEach(t=>this.registry.extensions.push(t)),e.hooks)for(const t in e.hooks)this.registry.hooks[t]||(this.registry.hooks[t]=[]),e.hooks[t].forEach(e=>this.registry.hooks[t].push(e));e.api&&t.deepMerge(this.registry.api,e.api),e.options&&t.deepMerge(this.registry.options,e.options,!0)}},this.draw=()=>{(this.perFrame.lastScale!==this.data.scale||this.perFrame.lastOffsets.x!==this.data.offsetX||this.perFrame.lastOffsets.y!==this.data.offsetY)&&this.refresh(),this.animationId=requestAnimationFrame(this.draw)},this.refresh=()=>{this.perFrame.lastScale=this.data.scale,this.perFrame.lastOffsets={x:this.data.offsetX,y:this.data.offsetY};for(const t of this.registry.hooks.onRender)t()},this.onResize=()=>{this.resizeAnimationId=requestAnimationFrame(()=>{const t=this.registry.api.dataManager.middleViewer();this.lastResizeCenter.x&&this.lastResizeCenter.y&&(this.data.offsetX+=t.x-this.lastResizeCenter.x,this.data.offsetY+=t.y-this.lastResizeCenter.y),this.lastResizeCenter.x=t.x,this.lastResizeCenter.y=t.y;for(const e of this.registry.hooks.onResize)e(t.width,t.height);this.refresh()})},i&&this.registry.register(i),this.registry.register({options:{main:{noShadow:!1}},api:{main:{loadCanvas:this.loadCanvas,refresh:this.refresh}}});e.firstElementChild;)e.firstElementChild.remove();e.innerHTML="";const o=this.registry.options.main.noShadow?e:e.attachShadow({mode:"open"});for(const t of this.registry.extensions)new t(this.data,this.registry);this.resizeObserver=new ResizeObserver(this.onResize),this.registry.api.dataManager.applyStyles(o,".full,.click-layer,.link-iframe,.audio{top:0;left:0;width:100%;height:100%;position:absolute}.flex-center,.overlay-container.markdown-content{display:flex;justify-content:center;align-items:center}.container{--contentTransition: color .2s, opacity .2s, text-shadow .2s, fill .2s;--containerTransition: background .2s, opacity .2s, box-shadow .2s, border .2s, filter .2s, backdrop-filter .2s;color:#fff;fill:#fff;stroke:#fff;position:relative;width:100%;height:100%;overflow:hidden;background-color:#141414}.container.numb,.container.numb *{pointer-events:none!important}.main-canvas{width:100%;height:100%;transform-origin:top left}.overlays{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:top left;will-change:transform}.parsed-content-wrapper{font-family:sans-serif;box-sizing:border-box;max-width:100%;max-height:100%;padding:10px 6px;pointer-events:none;overflow:hidden;scrollbar-gutter:stable both-edges;display:flex;flex-direction:column;gap:12px}@supports not (scrollbar-gutter: stable both-edges){.parsed-content-wrapper{padding:10px}}.overlay-container{position:absolute;box-sizing:border-box;border-radius:12px;overflow:hidden;-webkit-user-select:none;user-select:none;contain:strict;content-visibility:auto}.overlay-container:hover{box-shadow:0 2px 12px #00000080}.overlay-container{transition:var(--containerTransition)}.overlay-container .overlay-border{box-sizing:border-box;pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:12px;transition:var(--containerTransition)}.overlay-container img{width:100%;height:100%;object-fit:cover;pointer-events:none}.overlay-container.active .overlay-border{border:6px solid var(--active-color)}.overlay-container.markdown-content{position:absolute;padding:0 7px}.overlay-container.markdown-content.active .parsed-content-wrapper{overflow:auto;-webkit-user-select:text;user-select:text;pointer-events:auto}.overlay-container.markdown-content.rtl{direction:rtl;text-align:right}.link-iframe,.audio{border:none;background:transparent}.click-layer{background:transparent;pointer-events:auto}.active .click-layer{pointer-events:none}.katex-html{display:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{border-radius:2px;background:#ffffff40}::-webkit-scrollbar-thumb:hover{background:#1e1e1ebf}p{font-size:16px;line-height:21px}.parsed-content-wrapper img{width:100%;border-radius:8px}h1{font-size:25px}h2{font-size:23px}h3{font-size:22px}h4{font-size:20px}h5{font-size:19px}h6{font-size:17px}p,h1,h2,h3,h4,h5,h6,ol,ul{margin:0}h1,h2{font-weight:800}h3,h4{font-weight:700}h5,h6{font-weight:600}code{background:#ffffff1a;padding:2px 4px;border-radius:8px}pre code{display:block;box-sizing:border-box;width:100%}pre:has(code),table{margin:6px 0}strong{color:#fe8e7c}em{color:#5affb2}a{text-decoration:none;color:#6dadd0;font-weight:800;font-style:italic;cursor:pointer;transition:var(--contentTransition)}a:hover{color:#86d3fd}hr{height:1px;width:100%;background-color:#fff3;border:none}li{margin:5px 0}ul{padding-left:16px}ol{padding-left:15px;padding-right:7.5px}table{border-collapse:collapse;border-radius:8px;overflow:hidden;width:100%}table th,table td{border:1px solid rgba(255,255,255,.2);padding:6px 10px;background:#ffffff0f;text-align:left}table th{background:#ffffff1f;font-weight:700}"),this.data.container.classList.add("container"),o.appendChild(this.data.container)}async loadCanvas(t){for(const e of this.registry.hooks.onLoad)await e(t);this.registry.api.main.resetView(),this.resizeObserver.observe(this.data.container),this.animationId=requestAnimationFrame(this.draw)}dispose(){this.animationId&&cancelAnimationFrame(this.animationId),this.resizeAnimationId&&cancelAnimationFrame(this.resizeAnimationId),this.resizeObserver.disconnect();for(const t of this.registry.hooks.onDispose)t();this.data.container.remove()}};

package/dist/cjs/minimap.js

@@ -1 +0,0 @@
-"use strict";const i=require("../utilities-C1DbXNeO.cjs");module.exports=class{constructor(t,e){this.toggleCollapse=()=>{this.minimapCollapsed=!this.minimapCollapsed,this.minimapContainer.classList.toggle("collapsed"),this.minimapCollapsed||this.updateViewportRectangle()},this.drawMinimap=()=>{const i=this.data.nodeBounds;if(!i)return;const t=this.minimap.clientWidth,e=this.minimap.clientHeight,a=t/i.width,n=e/i.height;this.minimapCache.scale=.9*Math.min(a,n),this.minimapCache.centerX=t/2,this.minimapCache.centerY=e/2,this.minimapCtx.clearRect(0,0,t,e),this.minimapCtx.save(),this.minimapCtx.translate(this.minimapCache.centerX,this.minimapCache.centerY),this.minimapCtx.scale(this.minimapCache.scale,this.minimapCache.scale),this.minimapCtx.translate(-i.centerX,-i.centerY);for(const i of this.data.canvasData.edges)this.drawMinimapEdge(i);for(const i of this.data.canvasData.nodes)this.drawMinimapNode(i);this.minimapCtx.restore()},this.drawMinimapNode=t=>{const e=i.getColor(t.color);this.minimapCtx.fillStyle=e.border,this.minimapCtx.globalAlpha=.3,i.drawRoundRect(this.minimapCtx,t.x,t.y,t.width,t.height,25),this.minimapCtx.fill(),this.minimapCtx.globalAlpha=1},this.drawMinimapEdge=t=>{const e=this.data.nodeMap[t.fromNode],a=this.data.nodeMap[t.toNode];if(!e||!a)return;const[n,s]=i.getAnchorCoord(e,t.fromSide),[o,m]=i.getAnchorCoord(a,t.toSide);this.minimapCtx.beginPath(),this.minimapCtx.moveTo(n,s),this.minimapCtx.lineTo(o,m),this.minimapCtx.strokeStyle="#555",this.minimapCtx.lineWidth=10,this.minimapCtx.stroke()},this.updateViewportRectangle=()=>{if(this.minimapCollapsed)return;const i=this.data.nodeBounds;if(!i)return;const t=this.data.container.clientWidth/this.data.scale,e=this.data.container.clientHeight/this.data.scale,a=-this.data.offsetX/this.data.scale+this.data.container.clientWidth/(2*this.data.scale),n=-this.data.offsetY/this.data.scale+this.data.container.clientHeight/(2*this.data.scale),s=this.minimapCache.centerX+(a-t/2-i.centerX)*this.minimapCache.scale,o=this.minimapCache.centerY+(n-e/2-i.centerY)*this.minimapCache.scale,m=t*this.minimapCache.scale,r=e*this.minimapCache.scale;this.viewportRectangle.style.left=s+"px",this.viewportRectangle.style.top=o+"px",this.viewportRectangle.style.width=m+"px",this.viewportRectangle.style.height=r+"px"},this.dispose=()=>{this.toggleMinimapBtn.removeEventListener("click",this.toggleCollapse),this.minimapCtx.clearRect(0,0,this.minimap.clientWidth,this.minimap.clientHeight),this.minimapContainer.remove(),this._minimapContainer=null,this._toggleMinimapBtn=null,this._viewportRectangle=null,this._minimap=null},e.register({hooks:{onLoad:[this.drawMinimap],onRender:[this.updateViewportRectangle],onDispose:[this.dispose]},options:{minimap:{collapsed:!1}},api:{minimap:{toggleCollapse:this.toggleCollapse}}}),this._minimapContainer=document.createElement("div"),this._minimapContainer.className="minimap-container",e.api.dataManager.applyStyles(this._minimapContainer,".collapse-button{border-radius:8px;transition:transform .2s}.collapse-button:hover{background:#444c}button{cursor:pointer;font-size:18px;height:32px;border:none;transition:var(--containerTransition);text-align:center;background-color:#444;width:32px;padding:5px 0}button svg{width:100%;height:100%}.minimap-container{position:absolute;bottom:10px;right:10px;display:flex;pointer-events:none;transition:transform .2s}.minimap-container.collapsed{transform:translate(calc(100% - 32px))}@media (max-width: 768px){.minimap-container{transform:translateY(60px) translate(80px)}.minimap-container.collapsed{transform:translateY(60px) translate(calc(100% - 32px))}}.toggle-minimap{margin:auto 10px 0 0;pointer-events:auto}.collapsed .toggle-minimap{transform:rotate(180deg)}@media (max-width: 768px){.toggle-minimap{transform:translateY(-60px)}.collapsed .toggle-minimap{transform:translateY(-60px) rotate(180deg)}}.minimap{position:relative;width:200px;height:150px;overflow:hidden;border-radius:12px;background:#202020;-webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);border:2px solid rgba(140,140,140,.75);transform-origin:0 0}@media (max-width: 768px){.minimap{transform:scale(.6)}}.minimap .minimap-canvas{width:100%;height:100%}.minimap .viewport-rectangle{position:absolute;top:0;left:0;pointer-events:none;border:2px solid #fff;border-radius:6px;box-sizing:border-box;background:transparent}"),this._toggleMinimapBtn=document.createElement("button"),this._toggleMinimapBtn.className="toggle-minimap collapse-button",this._toggleMinimapBtn.innerHTML='<svg viewBox="-3.6 -3.6 31.2 31.2" stroke-width=".4"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" /></svg>',this._minimapContainer.appendChild(this._toggleMinimapBtn),this._minimap=document.createElement("div"),this._minimap.className="minimap";const a=document.createElement("canvas");a.className="minimap-canvas",a.width=200,a.height=150,this._minimap.appendChild(a),this.minimapCtx=a.getContext("2d"),this._viewportRectangle=document.createElement("div"),this._viewportRectangle.className="viewport-rectangle",this._minimap.appendChild(this._viewportRectangle),this._minimapContainer.appendChild(this._minimap),t.container.appendChild(this._minimapContainer),this.data=t,this.minimapCollapsed=e.options.minimap.collapsed,this._minimapContainer.classList.toggle("collapsed",this.minimapCollapsed),this.minimapCache={scale:1,centerX:0,centerY:0},this._toggleMinimapBtn.addEventListener("click",this.toggleCollapse),i.resizeCanvasForDPR(a,a.width,a.height)}get minimap(){if(null===this._minimap)throw i.destroyError;return this._minimap}get viewportRectangle(){if(null===this._viewportRectangle)throw i.destroyError;return this._viewportRectangle}get minimapContainer(){if(null===this._minimapContainer)throw i.destroyError;return this._minimapContainer}get toggleMinimapBtn(){if(null===this._toggleMinimapBtn)throw i.destroyError;return this._toggleMinimapBtn}};

package/dist/cjs/mistouchPreventer.js

@@ -1 +0,0 @@
-"use strict";const t=require("../utilities-C1DbXNeO.cjs");module.exports=class{constructor(t,e){this.preventMt=!1,this.onPointerDown=t=>{const e=this.data.container.getBoundingClientRect();t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom?this.preventMt||this.startPrevention():this.preventMt&&(this.preventMistouch.initialX=t.clientX,this.preventMistouch.initialY=t.clientY,this.preventMistouch.lastX=t.clientX,this.preventMistouch.lastY=t.clientY,this.preventMistouch.record=!0)},this.onPointerMove=t=>{this.preventMistouch.record&&(this.preventMistouch.lastX=t.clientX,this.preventMistouch.lastY=t.clientY)},this.onPointerUp=()=>{this.preventMistouch.record&&(this.preventMistouch.record=!1,Math.abs(this.preventMistouch.lastX-this.preventMistouch.initialX)+Math.abs(this.preventMistouch.lastY-this.preventMistouch.initialY)<5&&this.endPrevention())},this.startPrevention=()=>{this.preventionContainer.classList.remove("hidden"),this.data.container.classList.add("numb"),this.preventMt=!0},this.endPrevention=()=>{this.preventMt=!1,this.preventionContainer.classList.add("hidden"),setTimeout(()=>this.data.container.classList.remove("numb"),50)},this.dispose=()=>{window.removeEventListener("pointerdown",this.onPointerDown),window.removeEventListener("pointermove",this.onPointerMove),window.removeEventListener("pointerup",this.onPointerUp),this.preventionContainer.remove(),this._preventionContainer=null},e.register({hooks:{onDispose:[this.dispose]},options:{mistouchPreventer:{preventAtStart:!0}},api:{mistouchPreventer:{startPrevention:this.startPrevention,endPrevention:this.endPrevention}}}),this._preventionContainer=document.createElement("div"),this._preventionContainer.className="prevention-container hidden",e.api.dataManager.applyStyles(this._preventionContainer,".full,.prevention-container,.click-layer,.link-iframe,.audio{top:0;left:0;width:100%;height:100%;position:absolute}.flex-center,.prevention-container,.overlay-container.markdown-content{display:flex;justify-content:center;align-items:center}.container{--contentTransition: color .2s, opacity .2s, text-shadow .2s, fill .2s;--containerTransition: background .2s, opacity .2s, box-shadow .2s, border .2s, filter .2s, backdrop-filter .2s;color:#fff;fill:#fff;stroke:#fff;position:relative;width:100%;height:100%;overflow:hidden;background-color:#141414}.container.numb,.container.numb *{pointer-events:none!important}.main-canvas{width:100%;height:100%;transform-origin:top left}.overlays{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:top left;will-change:transform}.parsed-content-wrapper{font-family:sans-serif;box-sizing:border-box;max-width:100%;max-height:100%;padding:10px 6px;pointer-events:none;overflow:hidden;scrollbar-gutter:stable both-edges;display:flex;flex-direction:column;gap:12px}@supports not (scrollbar-gutter: stable both-edges){.parsed-content-wrapper{padding:10px}}.overlay-container{position:absolute;box-sizing:border-box;border-radius:12px;overflow:hidden;-webkit-user-select:none;user-select:none;contain:strict;content-visibility:auto}.overlay-container:hover{box-shadow:0 2px 12px #00000080}.overlay-container{transition:var(--containerTransition)}.overlay-container .overlay-border{box-sizing:border-box;pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;border-width:2px;border-style:solid;border-radius:12px;transition:var(--containerTransition)}.overlay-container img{width:100%;height:100%;object-fit:cover;pointer-events:none}.overlay-container.active .overlay-border{border:6px solid var(--active-color)}.overlay-container.markdown-content{position:absolute;padding:0 7px}.overlay-container.markdown-content.active .parsed-content-wrapper{overflow:auto;-webkit-user-select:text;user-select:text;pointer-events:auto}.overlay-container.markdown-content.rtl{direction:rtl;text-align:right}.link-iframe,.audio{border:none;background:transparent}.click-layer{background:transparent;pointer-events:auto}.active .click-layer{pointer-events:none}.katex-html{display:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{border-radius:2px;background:#ffffff40}::-webkit-scrollbar-thumb:hover{background:#1e1e1ebf}p{font-size:16px;line-height:21px}.parsed-content-wrapper img{width:100%;border-radius:8px}h1{font-size:25px}h2{font-size:23px}h3{font-size:22px}h4{font-size:20px}h5{font-size:19px}h6{font-size:17px}p,h1,h2,h3,h4,h5,h6,ol,ul{margin:0}h1,h2{font-weight:800}h3,h4{font-weight:700}h5,h6{font-weight:600}code{background:#ffffff1a;padding:2px 4px;border-radius:8px}pre code{display:block;box-sizing:border-box;width:100%}pre:has(code),table{margin:6px 0}strong{color:#fe8e7c}em{color:#5affb2}a{text-decoration:none;color:#6dadd0;font-weight:800;font-style:italic;cursor:pointer;transition:var(--contentTransition)}a:hover{color:#86d3fd}hr{height:1px;width:100%;background-color:#fff3;border:none}li{margin:5px 0}ul{padding-left:16px}ol{padding-left:15px;padding-right:7.5px}table{border-collapse:collapse;border-radius:8px;overflow:hidden;width:100%}table th,table td{border:1px solid rgba(255,255,255,.2);padding:6px 10px;background:#ffffff0f;text-align:left}table th{background:#ffffff1f;font-weight:700}.prevention-container{overflow:visible;transition:background .2s,opacity .2s,box-shadow .2s,border .2s,filter .2s,backdrop-filter .2s}.prevention-container.hidden{pointer-events:none}.prevention-container .prevention-banner{background:#0006;border-radius:12px;padding:12px;margin:12px;-webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);border:2px solid rgba(140,140,140,.75);color:#fff;font-size:calc(14px + .3vw);line-height:calc(17px + .3vw);text-align:center}");const n=document.createElement("div");n.className="prevention-banner",n.innerHTML="Frozen to prevent mistouch, click on to unlock.",this._preventionContainer.appendChild(n),t.container.appendChild(this._preventionContainer),this.preventMistouch={record:!1,lastX:0,lastY:0,initialX:0,initialY:0},e.options.mistouchPreventer.preventAtStart&&this.startPrevention(),this.data=t,window.addEventListener("pointerdown",this.onPointerDown),window.addEventListener("pointermove",this.onPointerMove),window.addEventListener("pointerup",this.onPointerUp)}get preventionContainer(){if(null===this._preventionContainer)throw t.destroyError;return this._preventionContainer}};

package/dist/es/controls.js

@@ -1 +0,0 @@
-import{d as t}from"../utilities-9mYNj6lG.js";class e{constructor(t,e){this.toggleCollapse=()=>this.controlsPanel.classList.toggle("collapsed"),this.zoomIn=()=>this.registry.api.main.zoom(1.1,this.registry.api.dataManager.middleViewer()),this.zoomOut=()=>this.registry.api.main.zoom(1/1.1,this.registry.api.dataManager.middleViewer()),this.slide=()=>this.registry.api.main.zoomToScale(Math.pow(1.1,Number(this.zoomSlider.value)),this.registry.api.dataManager.middleViewer()),this.updateSlider=()=>this.zoomSlider.value=String(this.scaleToSlider(this.data.scale)),this.scaleToSlider=t=>Math.log(t)/Math.log(1.1),this.dispose=()=>{this.toggleCollapseBtn.removeEventListener("click",this.toggleCollapse),this.zoomInBtn.removeEventListener("click",this.zoomIn),this.zoomOutBtn.removeEventListener("click",this.zoomOut),this.zoomSlider.removeEventListener("input",this.slide),this.resetViewBtn.removeEventListener("click",this.registry.api.main.resetView),this.toggleFullscreenBtn.removeEventListener("click",this.registry.api.main.shiftFullscreen),this.controlsPanel.remove(),this._controlsPanel=null,this._toggleCollapseBtn=null,this._zoomInBtn=null,this._zoomOutBtn=null,this._zoomSlider=null,this._resetViewBtn=null,this._toggleFullscreenBtn=null},e.register({hooks:{onToggleFullscreen:[this.updateFullscreenBtn],onRender:[this.updateSlider],onDispose:[this.dispose]},options:{controls:{collapsed:!1}},api:{controls:{toggleCollapse:this.toggleCollapse}}}),this._controlsPanel=document.createElement("div"),this._controlsPanel.className="controls",this._controlsPanel.classList.toggle("collapsed",e.options.controls.collapsed),e.api.dataManager.applyStyles(this._controlsPanel,".collapse-button{border-radius:8px;transition:transform .2s}.collapse-button:hover{background:#444c}button{cursor:pointer;font-size:18px;height:32px;border:none;transition:var(--containerTransition);text-align:center;background-color:#444;width:32px;padding:5px 0}button svg{width:100%;height:100%}.controls{position:absolute;top:10px;right:10px;display:flex;align-items:center;transition:transform .2s;border-radius:8px;gap:10px}.controls.collapsed{transform:translate(calc(100% - 32px))}.controls.collapsed .collapse-button{transform:rotate(180deg)}.controls .controls-content{display:flex;gap:1px;align-items:center;border-radius:8px;overflow:hidden;background:#333c}.controls button:hover{background:#555}.zoom-slider{width:100px;margin:0 10px}"),this._toggleCollapseBtn=document.createElement("button"),this._toggleCollapseBtn.className="collapse-button",this._toggleCollapseBtn.innerHTML='<svg viewBox="-3.6 -3.6 31.2 31.2" stroke-width=".4"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" /></svg>',this._controlsPanel.appendChild(this._toggleCollapseBtn);const o=document.createElement("div");o.className="controls-content",this._toggleFullscreenBtn=document.createElement("button"),this._toggleFullscreenBtn.innerHTML='<svg viewBox="-5.28 -5.28 34.56 34.56" fill="none"><path d="M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15" stroke-width="2.4" stroke-linecap="round"/></svg>',o.appendChild(this._toggleFullscreenBtn),this._zoomOutBtn=document.createElement("button"),this._zoomOutBtn.innerHTML='<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12" stroke-width="2" stroke-linecap="round" /></svg>',o.appendChild(this._zoomOutBtn),this._zoomSlider=document.createElement("input"),this._zoomSlider.type="range",this._zoomSlider.className="zoom-slider",this._zoomSlider.min="-30",this._zoomSlider.max="30",this._zoomSlider.value="0",o.appendChild(this._zoomSlider),this._zoomInBtn=document.createElement("button"),this._zoomInBtn.innerHTML='<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12m-6-6v12" stroke-width="2" stroke-linecap="round" /></svg>',o.appendChild(this._zoomInBtn),this._resetViewBtn=document.createElement("button"),this._resetViewBtn.innerHTML='<svg viewBox="-6 -6 30 30" stroke-width=".08"><path d="m14.955 7.986.116.01a1 1 0 0 1 .85 1.13 8 8 0 0 1-13.374 4.728l-.84.84c-.63.63-1.707.184-1.707-.707V10h3.987c.89 0 1.337 1.077.707 1.707l-.731.731a6 6 0 0 0 8.347-.264 6 6 0 0 0 1.63-3.33 1 1 0 0 1 1.131-.848zM11.514.813a8 8 0 0 1 1.942 1.336l.837-.837c.63-.63 1.707-.184 1.707.707V6h-3.981c-.89 0-1.337-1.077-.707-1.707l.728-.729a6 6 0 0 0-9.98 3.591 1 1 0 1 1-1.98-.281A8 8 0 0 1 11.514.813Z" /></svg>',o.appendChild(this._resetViewBtn),this._controlsPanel.appendChild(o),t.container.appendChild(this._controlsPanel),this.registry=e,this.data=t,this._toggleCollapseBtn.addEventListener("click",this.toggleCollapse),this._zoomInBtn.addEventListener("click",this.zoomIn),this._zoomOutBtn.addEventListener("click",this.zoomOut),this._zoomSlider.addEventListener("input",this.slide),this._resetViewBtn.addEventListener("click",this.registry.api.main.resetView),this._toggleFullscreenBtn.addEventListener("click",this.registry.api.main.shiftFullscreen)}get controlsPanel(){if(null===this._controlsPanel)throw t;return this._controlsPanel}get toggleCollapseBtn(){if(null===this._toggleCollapseBtn)throw t;return this._toggleCollapseBtn}get toggleFullscreenBtn(){if(null===this._toggleFullscreenBtn)throw t;return this._toggleFullscreenBtn}get zoomOutBtn(){if(null===this._zoomOutBtn)throw t;return this._zoomOutBtn}get zoomSlider(){if(null===this._zoomSlider)throw t;return this._zoomSlider}get zoomInBtn(){if(null===this._zoomInBtn)throw t;return this._zoomInBtn}get resetViewBtn(){if(null===this._resetViewBtn)throw t;return this._resetViewBtn}updateFullscreenBtn(){null===document.fullscreenElement?this.toggleFullscreenBtn.innerHTML='<svg viewBox="-40.32 -40.32 176.64 176.64"><path d="M30 60H6a6 6 0 0 0 0 12h18v18a6 6 0 0 0 12 0V66a5.997 5.997 0 0 0-6-6Zm60 0H66a5.997 5.997 0 0 0-6 6v24a6 6 0 0 0 12 0V72h18a6 6 0 0 0 0-12ZM66 36h24a6 6 0 0 0 0-12H72V6a6 6 0 0 0-12 0v24a5.997 5.997 0 0 0 6 6ZM30 0a5.997 5.997 0 0 0-6 6v18H6a6 6 0 0 0 0 12h24a5.997 5.997 0 0 0 6-6V6a5.997 5.997 0 0 0-6-6Z"/></svg>':this.toggleFullscreenBtn.innerHTML='<svg viewBox="-5.28 -5.28 34.56 34.56" fill="none"><path d="M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15" stroke-width="2.4" stroke-linecap="round"/></svg>'}}export{e as default};

package/dist/es/debugPanel.js

@@ -1 +0,0 @@
-import{r as e,d as t}from"../utilities-9mYNj6lG.js";class a{constructor(t,a){this.update=()=>{this.debugPanel.innerHTML=`\n            <p>Scale: ${e(this.data.scale,3)}</p>\n            <p>Offset: ${e(this.data.offsetX,1)}, ${e(this.data.offsetY,1)}</p>\n        `},this.dispose=()=>{this.debugPanel.remove(),this._debugPanel=null},a.register({hooks:{onRender:[this.update],onDispose:[this.dispose]},api:{debugPanel:{update:this.update}}}),this._debugPanel=document.createElement("div"),this._debugPanel.className="debug-panel",a.api.dataManager.applyStyles(this._debugPanel,".debug-panel{position:absolute;bottom:12px;left:12px;background:#0006;border-radius:12px;padding:12px;-webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);border:2px solid rgba(140,140,140,.75);color:#fff;font-size:calc(14px + .3vw);line-height:calc(17px + .3vw);pointer-events:none}"),this.data=t,t.container.appendChild(this._debugPanel)}get debugPanel(){if(!this._debugPanel)throw t;return this._debugPanel}}export{a as default};