json-canvas-viewer 3.0.3 → 3.1.0

package/dist/cjs/controls.js

@@ -0,0 +1 @@
+"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=t=>this.zoomSlider.value=String(this.scaleToSlider(t)),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],onZoom:[this.updateSlider],onLoad:[this.updateSlider]},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),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._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

@@ -0,0 +1 @@
+"use strict";const e=require("../utilities-C1DbXNeO.cjs");module.exports=class{constructor(t,s){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},s.register({hooks:{onRender:[this.update],onDispose:[this.dispose]},api:{debugPanel:{update:this.update}}}),this._debugPanel=document.createElement("div"),this._debugPanel.className="debug-panel",this.data=t,t.container.appendChild(this._debugPanel)}get debugPanel(){if(!this._debugPanel)throw e.destroyError;return this._debugPanel}};

package/dist/cjs/index.js

@@ -0,0 +1 @@
+"use strict";const t=require("../utilities-C1DbXNeO.cjs"),e=require("marked"),i=800,s=40;class o{constructor(e,o){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.findNodeAtMousePosition=({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;for(const t of this.registry.hooks.onZoom)t(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.animator=()=>{(0!==this.acceleration.pan.x||0!==this.acceleration.pan.y||0!==this.acceleration.zoom)&&(this.data.offsetX+=this.acceleration.pan.x,this.data.offsetY+=this.acceleration.pan.y,this.data.scale*=this.acceleration.zoom,this.acceleration.pan.x>=s?this.acceleration.pan.x-=s:this.acceleration.pan.x=0,this.acceleration.pan.y>=s?this.acceleration.pan.y-=s:this.acceleration.pan.y=0,this.acceleration.zoom>=s?this.acceleration.zoom-=s:this.acceleration.zoom=1),this.animationId=requestAnimationFrame(this.animator)},this.dispose=()=>{this.animationId&&cancelAnimationFrame(this.animationId),this.animationId=null},o.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,findNodeAtMousePosition:this.findNodeAtMousePosition}},hooks:{onLoad:[async t=>await this.loadCanvas(t)],onDispose:[this.dispose]}}),this.data=e,this.registry=o}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 a 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 n{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.findNodeAtMousePosition(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 a(t.container,e.options.interactor),this.registry=e}}class r{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 h="#fff";class l{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,r=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-r),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=h,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=h,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,m=20;this.ctx.fillStyle="#222",this.ctx.beginPath(),t.drawRoundRect(this.ctx,i-p/2,s-m/2-2,p,m,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,m=i,f=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":f=s-l;break;case"bottom":f=s+l;break;case"left":m=i-l;break;case"right":m=i+l}return[d,p,m,f]},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:[o,l,n,r],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 s=document.createElement("style");let a;s.innerHTML=".full,.click-layer,.link-iframe,.audio,.prevention-container{top:0;left:0;width:100%;height:100%;position:absolute}.flex-center,.overlay-container.markdown-content,.prevention-container{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}.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}.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}.main-canvas{width:100%;height:100%;transform-origin:top left}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%}.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}}.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}.collapse-button{border-radius:8px;transition:transform .2s}.collapse-button:hover{background:#444c}.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}.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}",a=this.registry.options.main.noShadow?e:e.attachShadow({mode:"open"}),a.appendChild(s),this.data.container.classList.add("container"),a.appendChild(this.data.container),this.resizeObserver=new ResizeObserver(this.onResize);for(const t of this.registry.extensions)new t(this.data,this.registry)}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

@@ -0,0 +1 @@
+"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),[m,h]=i.getAnchorCoord(a,t.toSide);this.minimapCtx.beginPath(),this.minimapCtx.moveTo(n,s),this.minimapCtx.lineTo(m,h),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,m=this.minimapCache.centerY+(n-e/2-i.centerY)*this.minimapCache.scale,h=t*this.minimapCache.scale,o=e*this.minimapCache.scale;this.viewportRectangle.style.left=s+"px",this.viewportRectangle.style.top=m+"px",this.viewportRectangle.style.width=h+"px",this.viewportRectangle.style.height=o+"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",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

@@ -0,0 +1 @@
+"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";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

@@ -0,0 +1 @@
+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=t=>this.zoomSlider.value=String(this.scaleToSlider(t)),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],onZoom:[this.updateSlider],onLoad:[this.updateSlider]},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),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 i=document.createElement("div");i.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>',i.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>',i.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",i.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>',i.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>',i.appendChild(this._resetViewBtn),this._controlsPanel.appendChild(i),t.container.appendChild(this._controlsPanel),this.registry=e,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

@@ -0,0 +1 @@
+import{r as e,d as t}from"../utilities-9mYNj6lG.js";class s{constructor(t,s){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},s.register({hooks:{onRender:[this.update],onDispose:[this.dispose]},api:{debugPanel:{update:this.update}}}),this._debugPanel=document.createElement("div"),this._debugPanel.className="debug-panel",this.data=t,t.container.appendChild(this._debugPanel)}get debugPanel(){if(!this._debugPanel)throw t;return this._debugPanel}}export{s as default};

package/dist/es/index.js

@@ -0,0 +1 @@
+import{u as t,r as e,d as i,g as s,a,b as o,c as n,e as r}from"../utilities-9mYNj6lG.js";import{marked as h}from"marked";const l=800,c=40;class d{constructor(e,i){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.findNodeAtMousePosition=({x:t,y:e})=>{const{x:i,y:s}=this.C2W(this.C2C({x:t,y:e}));let a=[];if(this.spatialGrid){const t=`${Math.floor(i/l)},${Math.floor(s/l)}`;a=this.spatialGrid[t]||[]}else a=this.data.canvasData.nodes;for(const t of a)if(!(i<t.x||i>t.x+t.width||s<t.y||s>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;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;for(const t of this.registry.hooks.onZoom)t(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,a=this.data.container.clientHeight,o=s/e,n=a/i,r=Math.round(1e3*Math.min(o,n))/1e3,h={scale:r,offsetX:s/2-t.centerX*r,offsetY:a/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.animator=()=>{(0!==this.acceleration.pan.x||0!==this.acceleration.pan.y||0!==this.acceleration.zoom)&&(this.data.offsetX+=this.acceleration.pan.x,this.data.offsetY+=this.acceleration.pan.y,this.data.scale*=this.acceleration.zoom,this.acceleration.pan.x>=c?this.acceleration.pan.x-=c:this.acceleration.pan.x=0,this.acceleration.pan.y>=c?this.acceleration.pan.y-=c:this.acceleration.pan.y=0,this.acceleration.zoom>=c?this.acceleration.zoom-=c:this.acceleration.zoom=1),this.animationId=requestAnimationFrame(this.animator)},this.dispose=()=>{this.animationId&&cancelAnimationFrame(this.animationId),this.animationId=null},i.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,findNodeAtMousePosition:this.findNodeAtMousePosition}},hooks:{onLoad:[async t=>await this.loadCanvas(t)],onDispose:[this.dispose]}}),this.data=e,this.registry=i}calculateNodeBounds(){let t=1/0,e=1/0,i=-1/0,s=-1/0;this.data.canvasData.nodes.forEach(a=>{t=Math.min(t,a.x),e=Math.min(e,a.y),i=Math.max(i,a.x+a.width),s=Math.max(s,a.y+a.height)});const a=i-t,o=s-e;return{minX:t,minY:e,maxX:i,maxY:s,width:a,height:o,centerX:t+a/2,centerY:e+o/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/l),i=Math.floor((t.x+t.width)/l),s=Math.floor(t.y/l),a=Math.floor((t.y+t.height)/l);for(let o=e;o<=i;o++)for(let e=s;e<=a;e++){const i=`${o},${e}`;this.spatialGrid[i]||(this.spatialGrid[i]=[]),this.spatialGrid[i].push(t)}}}}}class p 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;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;const s=e/this.pinchZoomState.lastDistance;this.pinchZoomState.lastDistance=e;const a=this.S2C(i),o=a.x-this.pinchZoomState.lastMidpoint.x,n=a.y-this.pinchZoomState.lastMidpoint.y;this.pinchZoomState.lastMidpoint=a,this.dispatchPanEvent({x:o,y:n}),this.dispatchZoomEvent(s,a)}}},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;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;const s=e.lastX-i.lastX,a=e.lastY-i.lastY;return Math.sqrt(s*s+a*a)}getPointerMidpoint(){const e=this.getNthValue(0),i=this.getNthValue(1);if(!e||!i)throw t;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(t){const i={x:e(t.x,1),y:e(t.y,1)},s=new CustomEvent("pan",{detail:i});this.dispatchEvent(s)}dispatchZoomEvent(t,i){const s=e(t,4),a=new CustomEvent("zoom",{detail:{factor:s,origin:i}});this.dispatchEvent(a)}}class m{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.findNodeAtMousePosition(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 p(t.container,e.options.interactor),this.registry=e}}class f{constructor(e,s){this.overlays={},this.selectedId=null,this.eventListeners={},this.onLoad=()=>{const e={text:e=>{if(!e.text)throw t;this.updateOrCreateOverlay(e,e.text,"text")},file:e=>{if(!e.file)throw t;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;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 e=>{if(!e.mdContent){e.mdContent="Loading...",this.updateOrCreateOverlay(e,e.mdContent,"markdown");try{if(!e.file)throw t;const i=await(await fetch(this.data.canvasBaseDir+e.file)).text(),s=i.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);if(s){const t=s[1].split("\n").reduce((t,e)=>{const[i,s]=e.split(":").map(t=>t.trim());return t[i]=s,t},{});e.mdContent=await h.parse(s[2].trim()),e.mdFrontmatter=t}else e.mdContent=await h.parse(i)}catch(t){console.error("Failed to load markdown:",t),e.mdContent="Failed to load content."}}this.updateOrCreateOverlay(e,e.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 t=this.overlaysLayer.firstElementChild;if(this.eventListeners[t.id]){const e=this.eventListeners[t.id][0],s=this.eventListeners[t.id][1];if(!e||!s)throw i;t.removeEventListener("pointerenter",e),t.removeEventListener("pointerleave",s),t.removeEventListener("touchstart",e),t.removeEventListener("touchend",s),this.eventListeners[t.id][0]=null,this.eventListeners[t.id][1]=null}t.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",e.container.appendChild(this.overlaysLayer),this.data=e,this.registry=s}get overlaysLayer(){if(!this._overlaysLayer)throw i;return this._overlaysLayer}async updateOrCreateOverlay(e,i,s){let a=this.overlays[e.id];if(a||(a=await this.constructOverlay(e,i,s),this.overlaysLayer.appendChild(a),this.overlays[e.id]=a,a.style.left=e.x+"px",a.style.top=e.y+"px",a.style.width=e.width+"px",a.style.height=e.height+"px"),"none"===a.style.display&&(a.style.display="flex"),"markdown"===s){const i=a.getElementsByClassName("parsed-content-wrapper")[0];if(!e.mdContent)throw t;i.innerHTML!==e.mdContent&&(i.innerHTML=e.mdContent),!a.classList.contains("rtl")&&"rtl"===e.mdFrontmatter?.direction&&a.classList.add("rtl")}}async constructOverlay(t,e,i){const a=s(t.color),o=document.createElement("div");switch(o.classList.add("overlay-container"),o.id=t.id,o.style.backgroundColor=a.background,o.style.setProperty("--active-color",a.active),i){case"text":case"markdown":{o.classList.add("markdown-content");const t=document.createElement("div");t.innerHTML=await h.parse(e||""),t.classList.add("parsed-content-wrapper"),o.appendChild(t);break}case"link":{const t=document.createElement("iframe");t.src=e,t.sandbox="allow-scripts allow-same-origin",t.className="link-iframe",t.loading="lazy",o.appendChild(t);break}case"audio":{const t=document.createElement("audio");t.className="audio",t.src=e,t.controls=!0,o.appendChild(t);break}case"image":{const t=document.createElement("img");t.src=e,t.loading="lazy",o.appendChild(t)}}switch(i){case"link":case"audio":{const t=document.createElement("div");t.className="click-layer",o.appendChild(t)}}const n=document.createElement("div");n.className="overlay-border",n.style.borderColor=a.border,o.appendChild(n);const r=()=>{t.id===this.selectedId&&this.startInteract()},l=()=>{t.id===this.selectedId&&this.endInteract()};return o.addEventListener("pointerenter",r),o.addEventListener("pointerleave",l),o.addEventListener("touchstart",r),o.addEventListener("touchend",l),this.eventListeners[t.id]=[r,l],o}}const u="#fff";class x{constructor(e,i){this.optimizeDPR=()=>a(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,a=-e/i;return{left:s,top:a,right:s+this.data.container.clientWidth/i,bottom:a+this.data.container.clientHeight/i}},this.drawLabelBar=(t,e,i,s,a)=>{const o=30*a,n=6*a,r=8*a,h=16*a,l=6*a;this.ctx.save(),this.ctx.translate(t,e),this.ctx.scale(1/a,1/a),this.ctx.font=`${h}px 'Inter', sans-serif`;const c=this.ctx.measureText(i).width+2*l;this.ctx.translate(0,-o-r),this.ctx.fillStyle=s,this.ctx.beginPath(),this.ctx.moveTo(n,0),this.ctx.lineTo(c-n,0),this.ctx.quadraticCurveTo(c,0,c,n),this.ctx.lineTo(c,o-n),this.ctx.quadraticCurveTo(c,o,c-n,o),this.ctx.lineTo(n,o),this.ctx.quadraticCurveTo(0,o,0,o-n),this.ctx.lineTo(0,n),this.ctx.quadraticCurveTo(0,0,n,0),this.ctx.closePath(),this.ctx.fill(),this.ctx.fillStyle=u,this.ctx.fillText(i,l,.65*o),this.ctx.restore()},this.drawNodeBackground=t=>{const e=s(t.color);this.ctx.globalAlpha=1,this.ctx.fillStyle=e.background,o(this.ctx,t.x+1,t.y+1,t.width-2,t.height-2,12),this.ctx.fill(),this.ctx.strokeStyle=e.border,this.ctx.lineWidth=2,o(this.ctx,t.x,t.y,t.width,t.height,12),this.ctx.stroke()},this.drawGroup=(t,e)=>{this.drawNodeBackground(t),t.label&&this.drawLabelBar(t.x,t.y,t.label,s(t.color).border,e)},this.drawFileNode=e=>{if(!e.file)throw t;this.ctx.fillStyle=u,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;const[a,r]=n(i,e.fromSide),[h,l]=n(s,e.toSide);let[c,d,p,m]=[0,0,0,0];if(e.controlPoints?[c,d,p,m]=e.controlPoints:([c,d,p,m]=this.getControlPoints(a,r,h,l,e.fromSide,e.toSide),e.controlPoints=[c,d,p,m]),this.drawCurvedPath(a,r,h,l,c,d,p,m),this.drawArrowhead(h,l,p,m),e.label){const t=Math.pow(.5,3)*a+3*Math.pow(.5,2)*.5*c+.375*p+Math.pow(.5,3)*h,i=Math.pow(.5,3)*r+3*Math.pow(.5,2)*.5*d+.375*m+Math.pow(.5,3)*l;this.ctx.font="18px sans-serif";const s=this.ctx.measureText(e.label).width+16,n=20;this.ctx.fillStyle="#222",this.ctx.beginPath(),o(this.ctx,t-s/2,i-n/2-2,s,n,4),this.ctx.fill(),this.ctx.fillStyle="#ccc",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText(e.label,t,i-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,a,o)=>{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,m=i,f=s;switch(a){case"top":p=e-l;break;case"bottom":p=e+l;break;case"left":d=t-l;break;case"right":d=t+l}switch(o){case"top":f=s-l;break;case"bottom":f=s+l;break;case"left":m=i-l;break;case"right":m=i+l}return[d,p,m,f]},this.drawCurvedPath=(t,e,i,s,a,o,n,r)=>{this.ctx.beginPath(),this.ctx.moveTo(t,e),this.ctx.bezierCurveTo(a,o,n,r,i,s),this.ctx.strokeStyle="#ccc",this.ctx.lineWidth=2,this.ctx.stroke()},this.drawArrowhead=(t,e,i,s)=>{const a=t-i,o=e-s,n=Math.sqrt(a*a+o*o);if(0===n)return;const r=a/n,h=o/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 i;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,a=(this.zoomInOptimize.lastDrawnViewport.top-t.top)*e;this.canvas.style.transform=`translate(${s}px, ${a}px) scale(${i})`}}class g{constructor(t,e){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:[d,x,m,f],hooks:{},api:{},register:t=>{if(t.extensions&&t.extensions.forEach(t=>this.registry.extensions.push(t)),t.hooks)for(const e in t.hooks)this.registry.hooks[e]||(this.registry.hooks[e]=[]),t.hooks[e].forEach(t=>this.registry.hooks[e].push(t));t.api&&r(this.registry.api,t.api),t.options&&r(this.registry.options,t.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()})},e&&this.registry.register(e),this.registry.register({options:{main:{noShadow:!1}},api:{main:{loadCanvas:this.loadCanvas,refresh:this.refresh}}});t.firstElementChild;)t.firstElementChild.remove();t.innerHTML="";const i=document.createElement("style");let s;i.innerHTML=".full,.click-layer,.link-iframe,.audio,.prevention-container{top:0;left:0;width:100%;height:100%;position:absolute}.flex-center,.overlay-container.markdown-content,.prevention-container{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}.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}.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}.main-canvas{width:100%;height:100%;transform-origin:top left}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%}.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}}.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}.collapse-button{border-radius:8px;transition:transform .2s}.collapse-button:hover{background:#444c}.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}.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}",s=this.registry.options.main.noShadow?t:t.attachShadow({mode:"open"}),s.appendChild(i),this.data.container.classList.add("container"),s.appendChild(this.data.container),this.resizeObserver=new ResizeObserver(this.onResize);for(const t of this.registry.extensions)new t(this.data,this.registry)}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()}}export{g as default};

package/dist/es/minimap.js

@@ -0,0 +1 @@
+import{g as i,b as t,c as e,a,d as n}from"../utilities-9mYNj6lG.js";class s{constructor(n,s){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=e=>{const a=i(e.color);this.minimapCtx.fillStyle=a.border,this.minimapCtx.globalAlpha=.3,t(this.minimapCtx,e.x,e.y,e.width,e.height,25),this.minimapCtx.fill(),this.minimapCtx.globalAlpha=1},this.drawMinimapEdge=i=>{const t=this.data.nodeMap[i.fromNode],a=this.data.nodeMap[i.toNode];if(!t||!a)return;const[n,s]=e(t,i.fromSide),[m,h]=e(a,i.toSide);this.minimapCtx.beginPath(),this.minimapCtx.moveTo(n,s),this.minimapCtx.lineTo(m,h),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,m=this.minimapCache.centerY+(n-e/2-i.centerY)*this.minimapCache.scale,h=t*this.minimapCache.scale,l=e*this.minimapCache.scale;this.viewportRectangle.style.left=s+"px",this.viewportRectangle.style.top=m+"px",this.viewportRectangle.style.width=h+"px",this.viewportRectangle.style.height=l+"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},s.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",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 m=document.createElement("canvas");m.className="minimap-canvas",m.width=200,m.height=150,this._minimap.appendChild(m),this.minimapCtx=m.getContext("2d"),this._viewportRectangle=document.createElement("div"),this._viewportRectangle.className="viewport-rectangle",this._minimap.appendChild(this._viewportRectangle),this._minimapContainer.appendChild(this._minimap),n.container.appendChild(this._minimapContainer),this.data=n,this.minimapCollapsed=s.options.minimap.collapsed,this._minimapContainer.classList.toggle("collapsed",this.minimapCollapsed),this.minimapCache={scale:1,centerX:0,centerY:0},this._toggleMinimapBtn.addEventListener("click",this.toggleCollapse),a(m,m.width,m.height)}get minimap(){if(null===this._minimap)throw n;return this._minimap}get viewportRectangle(){if(null===this._viewportRectangle)throw n;return this._viewportRectangle}get minimapContainer(){if(null===this._minimapContainer)throw n;return this._minimapContainer}get toggleMinimapBtn(){if(null===this._toggleMinimapBtn)throw n;return this._toggleMinimapBtn}}export{s as default};

package/dist/es/mistouchPreventer.js

@@ -0,0 +1 @@
+import{d as t}from"../utilities-9mYNj6lG.js";class e{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";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;return this._preventionContainer}}export{e as default};

package/dist/types/canvasViewer.d.ts

@@ -0,0 +1,15 @@
+export default class canvasViewer {
+    private animationId;
+    private resizeAnimationId;
+    private resizeObserver;
+    private perFrame;
+    private lastResizeCenter;
+    private data;
+    private registry;
+    constructor(container: HTMLElement, userRegistry?: registry);
+    private draw;
+    private refresh;
+    private onResize;
+    loadCanvas(path: string): Promise<void>;
+    dispose(): void;
+}

package/dist/types/dataManager.d.ts

@@ -0,0 +1,30 @@
+export default class dataManager {
+    data: runtimeData;
+    registry: registry;
+    spatialGrid: Record<string, Array<JSONCanvasNode>> | null;
+    acceleration: {
+        pan: {
+            x: number;
+            y: number;
+        };
+        zoom: number;
+    };
+    animationId: number | null;
+    constructor(data: runtimeData, registry: registry);
+    loadCanvas: (path: string) => Promise<void>;
+    private findNodeAtMousePosition;
+    private judgeInteract;
+    private calculateNodeBounds;
+    private buildSpatialGrid;
+    private zoom;
+    private zoomToScale;
+    private pan;
+    private panToCoords;
+    private shiftFullscreen;
+    private resetView;
+    private C2C;
+    private C2W;
+    private middleViewer;
+    private animator;
+    private dispose;
+}

package/dist/{controls.d.ts → types/extensions/controls.d.ts}

@@ -1,4 +1,4 @@
-export default class controls extends EventTarget {
+export default class controls {
     private _controlsPanel;
     private _toggleCollapseBtn;
     private _toggleFullscreenBtn;
@@ -6,6 +6,7 @@ export default class controls extends EventTarget {
     private _zoomSlider;
     private _zoomInBtn;
     private _resetViewBtn;
+    private registry;
     private get controlsPanel();
     private get toggleCollapseBtn();
     private get toggleFullscreenBtn();
@@ -13,15 +14,13 @@ export default class controls extends EventTarget {
     private get zoomSlider();
     private get zoomInBtn();
     private get resetViewBtn();
-    constructor(container: HTMLElement, controlsCollapsed?: boolean);
+    constructor(data: runtimeData, registry: registry);
     private toggleCollapse;
     private zoomIn;
     private zoomOut;
     private slide;
-    private resetView;
-    private toggleFullscreen;
-    updateFullscreenBtn(): void;
-    updateSlider: (scale: number) => string;
+    private updateFullscreenBtn;
+    private updateSlider;
     private scaleToSlider;
-    dispose(): void;
+    private dispose;
 }

package/dist/types/extensions/debugPanel.d.ts

@@ -0,0 +1,8 @@
+export default class debugPanel {
+    private _debugPanel;
+    private data;
+    private get debugPanel();
+    constructor(data: runtimeData, registry: registry);
+    private update;
+    private dispose;
+}

package/dist/types/extensions/minimap.d.ts

@@ -0,0 +1,21 @@
+export default class minimap {
+    private minimapCtx;
+    private _viewportRectangle;
+    private _minimap;
+    private _minimapContainer;
+    private _toggleMinimapBtn;
+    private minimapCollapsed;
+    private minimapCache;
+    private data;
+    private get minimap();
+    private get viewportRectangle();
+    private get minimapContainer();
+    private get toggleMinimapBtn();
+    constructor(data: runtimeData, registry: registry);
+    private toggleCollapse;
+    private drawMinimap;
+    private drawMinimapNode;
+    private drawMinimapEdge;
+    private updateViewportRectangle;
+    private dispose;
+}

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

@@ -0,0 +1,14 @@
+export default class mistouchPreventer {
+    private _preventionContainer;
+    private preventMt;
+    private preventMistouch;
+    private data;
+    private get preventionContainer();
+    constructor(data: runtimeData, registry: registry);
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private startPrevention;
+    private endPrevention;
+    private dispose;
+}

package/dist/types/interactionHandler.d.ts

@@ -0,0 +1,12 @@
+export default class interactionHandler {
+    private interactor;
+    private registry;
+    constructor(data: runtimeData, registry: registry);
+    private stop;
+    private start;
+    private onLoad;
+    private onPan;
+    private onZoom;
+    private onClick;
+    private dispose;
+}

package/dist/{interactor.d.ts → types/interactor.d.ts}

@@ -1,15 +1,12 @@
 export default class interactor extends EventTarget {
-    private _monitoringElement;
+    private monitoringElement;
     private pointers;
     private pinchZoomState;
     private proControlSchema;
-    private panDump;
-    private zoomDump;
     private zoomFactor;
     private preventDefault;
     private lockControlSchema;
     private ctrlZoomFactor;
-    private get monitoringElement();
     constructor(monitoringElement: HTMLElement, options?: {
         preventDefault?: boolean;
         proControlSchema?: boolean;
@@ -27,15 +24,7 @@ export default class interactor extends EventTarget {
     private dispatchPanEvent;
     private dispatchZoomEvent;
     private preventDefaultFunction;
-    private round;
-    getZoomDump(): {
-        factor: number;
-        origin: Coordinates;
-    };
-    resetZoomDump(): void;
-    getPanDump(): Coordinates;
-    resetPanDump(): void;
-    stop(): void;
-    start(): void;
-    dispose(): void;
+    stop: () => void;
+    start: () => void;
+    dispose: () => void;
 }

package/dist/types/overlayManager.d.ts

@@ -0,0 +1,19 @@
+export default class overlayManager {
+    private _overlaysLayer;
+    private overlays;
+    private selectedId;
+    private eventListeners;
+    private data;
+    private registry;
+    private get overlaysLayer();
+    constructor(data: runtimeData, registry: registry);
+    private onLoad;
+    private select;
+    private loadMarkdownForNode;
+    private updateOverlays;
+    private updateOrCreateOverlay;
+    private constructOverlay;
+    private startInteract;
+    private endInteract;
+    private dispose;
+}

package/dist/types/renderer.d.ts

@@ -0,0 +1,24 @@
+export default class renderer {
+    private _canvas;
+    private ctx;
+    private data;
+    private zoomInOptimize;
+    private get canvas();
+    constructor(data: runtimeData, registry: registry);
+    private optimizeDPR;
+    private redraw;
+    private trueRedraw;
+    private fakeRedraw;
+    private isViewportInside;
+    private getCurrentViewport;
+    private drawLabelBar;
+    private drawNodeBackground;
+    private drawGroup;
+    private drawFileNode;
+    private drawEdge;
+    private getEdgeNodes;
+    private getControlPoints;
+    private drawCurvedPath;
+    private drawArrowhead;
+    private dispose;
+}

package/dist/types/utilities.d.ts

@@ -0,0 +1,16 @@
+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): {
+    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;

package/dist/utilities-9mYNj6lG.js

@@ -0,0 +1 @@
+const e=new Error("This error is unexpected, probably caused by canvas file corruption. If you assure the error is not by accident, please contact the developer and show how to reproduce."),t=new Error("Resource hasn't been set up or has been disposed.");function r(e,t,r,o,n,a){e.beginPath(),e.moveTo(t+a,r),e.lineTo(t+o-a,r),e.quadraticCurveTo(t+o,r,t+o,r+a),e.lineTo(t+o,r+n-a),e.quadraticCurveTo(t+o,r+n,t+o-a,r+n),e.lineTo(t+a,r+n),e.quadraticCurveTo(t,r+n,t,r+n-a),e.lineTo(t,r+a),e.quadraticCurveTo(t,r,t+a,r),e.closePath()}function o(e,t){const r=e.x+e.width/2,o=e.y+e.height/2;switch(t){case"top":return[r,e.y];case"bottom":return[r,e.y+e.height];case"left":return[e.x,o];case"right":return[e.x+e.width,o];default:return[r,o]}}function n(e="0"){let t=null;if(1===e.length)switch(e){case"1":t="rgba(255, 120, 129, ?)";break;case"2":t="rgba(251, 187, 131, ?)";break;case"3":t="rgba(255, 232, 139, ?)";break;case"4":t="rgba(124, 211, 124, ?)";break;case"5":t="rgba(134, 223, 226, ?)";break;case"6":t="rgba(203, 158, 255, ?)";break;default:t="rgba(140, 140, 140, ?)"}else{const r=function(e){const t=e.replace("#","");return{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16)}}(e);t=`rgba(${r.r}, ${r.g}, ${r.b}, ?)`}return{border:t.replace("?","0.75"),background:t.replace("?","0.1"),active:t.replace("?","1")}}function a(t,r,o){const n=window.devicePixelRatio||1,a=t.getContext("2d");if(!a)throw e;t.width=Math.round(r*n),t.height=Math.round(o*n),a.setTransform(1,0,0,1,0,0),a.scale(n,n)}function c(e,t,r=!1){function o(e){return null!==e&&"object"==typeof e&&"[object Object]"===Object.prototype.toString.call(e)}if(null===e||"object"!=typeof e)throw new Error("Main must be a non-null object");if(null===t||"object"!=typeof t)throw new Error("Nothing to merge");const n=Object.keys(t);for(const a of n){const n=t[a];if(a in e){const t=e[a];o(t)&&o(n)?c(t,n,r):r||(e[a]=n)}else e[a]=n}}function s(e,t){const r=10**t;return Math.round(e*r)/r}export{a,r as b,o as c,t as d,c as e,n as g,s as r,e as u};

package/dist/utilities-C1DbXNeO.cjs

@@ -0,0 +1 @@
+"use strict";const e=new Error("This error is unexpected, probably caused by canvas file corruption. If you assure the error is not by accident, please contact the developer and show how to reproduce."),r=new Error("Resource hasn't been set up or has been disposed.");exports.deepMerge=function e(r,t,o=!1){function n(e){return null!==e&&"object"==typeof e&&"[object Object]"===Object.prototype.toString.call(e)}if(null===r||"object"!=typeof r)throw new Error("Main must be a non-null object");if(null===t||"object"!=typeof t)throw new Error("Nothing to merge");const a=Object.keys(t);for(const s of a){const a=t[s];if(s in r){const t=r[s];n(t)&&n(a)?e(t,a,o):o||(r[s]=a)}else r[s]=a}},exports.destroyError=r,exports.drawRoundRect=function(e,r,t,o,n,a){e.beginPath(),e.moveTo(r+a,t),e.lineTo(r+o-a,t),e.quadraticCurveTo(r+o,t,r+o,t+a),e.lineTo(r+o,t+n-a),e.quadraticCurveTo(r+o,t+n,r+o-a,t+n),e.lineTo(r+a,t+n),e.quadraticCurveTo(r,t+n,r,t+n-a),e.lineTo(r,t+a),e.quadraticCurveTo(r,t,r+a,t),e.closePath()},exports.getAnchorCoord=function(e,r){const t=e.x+e.width/2,o=e.y+e.height/2;switch(r){case"top":return[t,e.y];case"bottom":return[t,e.y+e.height];case"left":return[e.x,o];case"right":return[e.x+e.width,o];default:return[t,o]}},exports.getColor=function(e="0"){let r=null;if(1===e.length)switch(e){case"1":r="rgba(255, 120, 129, ?)";break;case"2":r="rgba(251, 187, 131, ?)";break;case"3":r="rgba(255, 232, 139, ?)";break;case"4":r="rgba(124, 211, 124, ?)";break;case"5":r="rgba(134, 223, 226, ?)";break;case"6":r="rgba(203, 158, 255, ?)";break;default:r="rgba(140, 140, 140, ?)"}else{const t=function(e){const r=e.replace("#","");return{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16)}}(e);r=`rgba(${t.r}, ${t.g}, ${t.b}, ?)`}return{border:r.replace("?","0.75"),background:r.replace("?","0.1"),active:r.replace("?","1")}},exports.resizeCanvasForDPR=function(r,t,o){const n=window.devicePixelRatio||1,a=r.getContext("2d");if(!a)throw e;r.width=Math.round(t*n),r.height=Math.round(o*n),a.setTransform(1,0,0,1,0,0),a.scale(n,n)},exports.round=function(e,r){const t=10**r;return Math.round(e*t)/t},exports.unexpectedError=e;

package/package.json

@@ -1,16 +1,44 @@
 {
   "name": "json-canvas-viewer",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "A TypeScript-based viewer for JSON Canvas, easy to embed into websites.",
   "type": "module",
-  "types": "dist/canvasViewer.d.ts",
-  "main": "dist/canvasViewer.cjs.js",
-  "module": "dist/canvasViewer.esm.js",
+  "types": "dist/types/canvasViewer.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "exports": {
     ".": {
-      "types": "./dist/canvasViewer.d.ts",
-      "import": "./dist/canvasViewer.esm.js",
-      "require": "./dist/canvasViewer.cjs.js"
+      "types": "./dist/types/canvasViewer.d.ts",
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./minimap": {
+      "types": "./dist/types/extensions/minimap.d.ts",
+      "import": "./dist/es/minimap.js",
+      "require": "./dist/cjs/minimap.js"
+    },
+    "./controls": {
+      "types": "./dist/types/extensions/controls.d.ts",
+      "import": "./dist/es/controls.js",
+      "require": "./dist/cjs/controls.js"
+    },
+    "./mistouchPreventer": {
+      "types": "./dist/types/extensions/mistouchPreventer.d.ts",
+      "import": "./dist/es/mistouchPreventer.js",
+      "require": "./dist/cjs/mistouchPreventer.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "minimap": [
+        "dist/types/extensions/minimap.d.ts"
+      ],
+      "controls": [
+        "dist/types/extensions/controls.d.ts"
+      ],
+      "mistouchPreventer": [
+        "dist/types/extensions/mistouchPreventer.d.ts"
+      ]
     }
   },
   "repository": {
@@ -34,18 +62,16 @@
     "email": "hesprs@outlook.com"
   },
   "license": "MIT",
-  "packageManager": "pnpm@10.13.1",
+  "packageManager": "pnpm@10.15.1",
   "devDependencies": {
+    "@eslint/js": "^9.36.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/node": "^24.2.1",
-    "@typescript-eslint/eslint-plugin": "^8.39.1",
-    "@typescript-eslint/parser": "^8.39.1",
-    "cross-env": "^10.0.0",
     "eslint": "^9.32.0",
     "eslint-config-prettier": "^10.1.8",
-    "globals": "^16.3.0",
     "sass": "^1.90.0",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.45.0",
     "vite": "^7.1.1"
   },
   "files": [
@@ -54,12 +80,13 @@
   "dependencies": {
     "marked": "^16.1.2"
   },
+  "optionalDependencies": {
+    "marked-katex-extension": "^5.1.5"
+  },
   "scripts": {
     "test": "vite --open",
     "lint": "eslint .",
     "build-types": "tsc --project tsconfig.json",
-    "build-for-distribution": "vite build && pnpm run build-types",
-    "build-standalone": "cross-env standalone=true vite build",
-    "build": "pnpm run build-for-distribution && pnpm run build-standalone"
+    "build": "vite build && pnpm run build-types"
   }
 }