json-canvas-viewer 4.3.1 → 4.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/chimp.js
CHANGED
|
@@ -281,7 +281,7 @@ pre .JSON-Canvas-Viewer .JCV-markdown-content code {
|
|
|
281
281
|
background: rgba(255, 255, 255, 0.12);
|
|
282
282
|
font-weight: bold;
|
|
283
283
|
}
|
|
284
|
-
`;const n=Error(`[JSONCanvasViewer] Resource hasn't been set up or has been disposed.`);function r(e,t){let n=document.createElement(`style`);n.innerHTML=t,e.appendChild(n)}function i(e,t,n,r,i,a){e.beginPath(),e.moveTo(t+a,n),e.lineTo(t+r-a,n),e.quadraticCurveTo(t+r,n,t+r,n+a),e.lineTo(t+r,n+i-a),e.quadraticCurveTo(t+r,n+i,t+r-a,n+i),e.lineTo(t+a,n+i),e.quadraticCurveTo(t,n+i,t,n+i-a),e.lineTo(t,n+a),e.quadraticCurveTo(t,n,t+a,n),e.closePath()}function a(e,t){let n=e.x+e.width/2,r=e.y+e.height/2;switch(t){case`top`:return{x:n,y:e.y};case`bottom`:return{x:n,y:e.y+e.height};case`left`:return{x:e.x,y:r};case`right`:return{x:e.x+e.width,y:r};default:return{x:n,y:r}}}function o(e,t,n){let r=window.devicePixelRatio??1,i=e.getContext(`2d`);if(!i)throw Error(`[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.`);e.width=Math.round(t*r),e.height=Math.round(n*r),i.setTransform(1,0,0,1,0,0),i.scale(r,r)}function s(e,t){let n=10**t;return Math.round(e*n)/n}function c(e=!1){let t=(...n)=>{let r=t.subs.values().toArray();for(let t of e?r:r.toReversed())t(...n)};return t.subs=new Set,t.subscribe=e=>(t.subs.add(e),()=>t.unsubscribe(e)),t.unsubscribe=e=>{t.subs.delete(e)},t}var l=class extends e{onToggleFullscreen=c();data={canvasData:{edges:[],nodes:[]},container:document.createElement(`div`),edgeMap:{},nodeBounds:{centerX:0,centerY:0,height:0,maxX:0,maxY:0,minX:0,minY:0,width:0},nodeMap:{},offsetX:0,offsetY:0,scale:1};constructor(...e){super(...e);let n=this.options.container;for(;n.firstElementChild;)n.firstElementChild.remove();n.innerHTML=``;let i=this.options.shadowed?n.attachShadow({mode:`open`}):n;r(i,t),this.data.container.classList.add(`JSON-Canvas-Viewer`),i.appendChild(this.data.container),this.augment({onToggleFullscreen:this.onToggleFullscreen,resetView:this.resetView,toggleFullscreen:this.toggleFullscreen}),this.onStart(this.start),this.onRestart(this.start),this.onDispose(this.dispose)}start=()=>{let e={edges:[],nodes:[],...this.options.canvas};Object.assign(this.data,{canvasData:e,edgeMap:{},nodeBounds:this.calculateNodeBounds(e),nodeMap:{},offsetX:0,offsetY:0,scale:1}),this.data.canvasData.nodes.forEach(e=>{let t={box:this.getNodeBox(e),ref:e};if(this.data.nodeMap[e.id]=t,e.type===`file`){let n=e.file,r=n.split(`/`).pop()??``,i=r.lastIndexOf(`?`);if(t.fileName=i===-1?r:r.slice(0,i),!e.file.includes(`://`)){let t=this.options.attachments?.[n];t&&(e.file=t)}}}),this.data.canvasData.edges.forEach(e=>{this.data.edgeMap[e.id]={box:this.getEdgeBox(e),ref:e}}),this.resetView()};processBaseDir=e=>e?e?.slice(-1)===`/`?e:`${e}/`:`./`;getNodeBox=e=>({bottom:e.y+e.height,left:e.x,right:e.width+e.x,top:e.type===`file`||e.type===`group`?e.y-40:e.y});getEdgeBox=e=>{let t=this.data.nodeMap,n=t[e.fromNode].ref,r=t[e.toNode].ref,i=a(n,e.fromSide),o=a(r,e.toSide),s={bottom:Math.max(i.y,o.y),left:Math.min(i.x,o.x),right:Math.max(i.x,o.x),top:Math.min(i.y,o.y)},c=s.right-s.left,l=s.bottom-s.top,u=Math.min(c,l),d=Math.log2(Math.max(c,l)/(u===0?1:u))*10;return{bottom:s.bottom+d,left:s.left-d,right:s.right+d,top:s.top-d}};calculateNodeBounds(e){let t=1/0,n=1/0,r=-1/0,i=-1/0;e.nodes.forEach(e=>{t=Math.min(t,e.x),n=Math.min(n,e.y),r=Math.max(r,e.x+e.width),i=Math.max(i,e.y+e.height)});let a=r-t,o=i-n;return{centerX:t+a/2,centerY:n+o/2,height:o,maxX:r,maxY:i,minX:t,minY:n,width:a}}toggleFullscreen=async e=>{!document.fullscreenElement&&(!e||e===`enter`)?(await this.data.container.requestFullscreen(),this.onToggleFullscreen(`enter`)):document.fullscreenElement&&(!e||e===`exit`)&&(await document.exitFullscreen(),this.onToggleFullscreen(`exit`))};resetView=()=>{let e=this.data.nodeBounds,t=this.data.container;if(!e||!t)return;let n=e.width+200,r=e.height+200,i=t.clientWidth,a=t.clientHeight,o=i/n,s=a/r,c=Math.round(Math.min(o,s)*1e3)/1e3,l=e.centerX,u=e.centerY,d={offsetX:i/2-l*c,offsetY:a/2-u*c,scale:c};this.data.offsetX=d.offsetX,this.data.offsetY=d.offsetY,this.data.scale=d.scale};middleViewer=()=>{let e=this.data.container;return{height:e.clientHeight,width:e.clientWidth,x:e.clientWidth/2,y:e.clientHeight/2}};dispose=()=>{this.data.container.remove()}};const u=(e,t,n)=>e>=t&&e<=n,d=e=>{if(typeof e==`number`)return u(e,0,1);if(typeof e==`string`){let t=parseFloat(e);return!isNaN(t)&&(e.endsWith(`%`)?u(t/100,0,1):u(t,0,1))}return!1},f=e=>{let t=e.trim();return t?t.endsWith(`%`)?Number(t.slice(0,-1))/100*255:Number(t):NaN},p=e=>typeof e==`string`?h(e):typeof e==`object`&&!!e&&m(e),m=e=>{let{red:t,green:n,blue:r,alpha:i}=e;return u(t,0,255)&&u(n,0,255)&&u(r,0,255)&&(i===void 0||u(i,0,1))},h=e=>{let t=e.match(/^rgba?\(\s*(\d{1,3}|[\d.]+%)\s*[, ]\s*(\d{1,3}|[\d.]+%)\s*[, ]\s*(\d{1,3}|[\d.]+%)\s*(?:[,/]\s*([01]?\.?\d+%?))?\s*\)$/);if(!t)return!1;let[,n,r,i,a]=t,o=f(n),s=f(r),c=f(i);return!!(u(o,0,255)&&u(s,0,255)&&u(c,0,255))&&(a===void 0||d(a))},ee=e=>{let t=e.trim().toLowerCase().match(/^(-?[\d.]+)(deg|rad|grad|turn)?$/);if(!t)return NaN;let n=parseFloat(t[1]),r=t[2];if(isNaN(n))return NaN;let i;switch(r){case`rad`:i=180*n/Math.PI;break;case`grad`:i=n/400*360;break;case`turn`:i=360*n;break;default:i=n}return(i%360+360)%360},te=e=>{if(typeof e==`number`){if(!u(e,0,1))throw Error(`Alpha value must be between 0 and 1`);return e}if(typeof e==`string`){let t=e.trim(),n;if(n=t.endsWith(`%`)?Number(t.slice(0,-1))/100:Number(t),isNaN(n))throw Error(`Invalid alpha value: "${e}"`);if(!u(n,0,1))throw Error(`Alpha value must be between 0 and 1`);return n}throw Error(`Invalid alpha value format`)},ne=e=>{if(typeof e!=`string`)throw Error(`Invalid HSL color format`);let t=e.match(/^hsla?\(\s*(-?[\d.]+(?:deg|rad|grad|turn)?)\s*[, ]\s*(-?[\d.]+%?)\s*[, ]\s*(-?[\d.]+%?)\s*(?:[,/]\s*(-?[\d.]+%?))?\s*\)$/i);if(!t)throw Error(`Invalid HSL color format`);let[,n,r,i,a]=t,o=ee(n),s=parseFloat(r),c=parseFloat(i);if(isNaN(o)||isNaN(s)||isNaN(c)||!u(s,0,100)||!u(c,0,100))throw Error(`Invalid HSL color values`);return a===void 0?{hue:o,saturation:s,lightness:c,alpha:1}:{hue:o,saturation:s,lightness:c,alpha:te(a)}},re=e=>{if(typeof e!=`string`)throw Error(`Invalid RGB color format`);let t=e.match(/^rgba?\(\s*(-?[\d.]+%?)\s*[, ]\s*(-?[\d.]+%?)\s*[, ]\s*(-?[\d.]+%?)\s*(?:[,/]\s*(-?[\d.]+%?))?\s*\)$/i);if(!t)throw Error(`Invalid RGB color format`);let[,n,r,i,a]=t,o=f(n),s=f(r),c=f(i);if(!u(o,0,255)||!u(s,0,255)||!u(c,0,255))throw Error(`RGB values must be between 0 and 255`);return{red:o,green:s,blue:c,alpha:a===void 0?1:te(a)}},g=e=>{if(typeof e!=`string`)throw Error(`Invalid Hex color format.`);let t=e.match(/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(!t)throw Error(`Invalid Hex color format.`);let n=t[1];n.length!==3&&n.length!==4||(n=n.split(``).map(e=>e+e).join(``));let r=parseInt(n.substring(0,2),16),i=parseInt(n.substring(2,4),16),a=parseInt(n.substring(4,6),16),o=1;if(n.length===8){let e=parseInt(n.substring(6,8),16);o=Number((e/255).toFixed(2))}return{red:r,green:i,blue:a,alpha:o}},ie=e=>{if(typeof e==`string`){if(e.startsWith(`#`))return`hex`;if(e.startsWith(`rgb`))return`rgbString`;if(e.startsWith(`hsl`))return`hslString`}if(typeof e==`object`&&e){if(`red`in e&&`green`in e&&`blue`in e)return`rgb`;if(`hue`in e&&`saturation`in e&&`lightness`in e)return`hsl`}throw Error(`Invalid color format`)},ae=e=>{if(typeof e!=`object`||!e)throw Error(`Invalid color format. Expected an RGB or HSL object.`);if(`red`in e&&`green`in e&&`blue`in e){let{red:t,green:n,blue:r,alpha:i}=e;return i===void 0||i===1?`rgb(${t}, ${n}, ${r})`:`rgba(${t}, ${n}, ${r}, ${i})`}if(`hue`in e&&`saturation`in e&&`lightness`in e){let{hue:t,saturation:n,lightness:r,alpha:i}=e;return i===void 0||i===1?`hsl(${t}, ${n}%, ${r}%)`:`hsla(${t}, ${n}%, ${r}%, ${i})`}throw Error(`Invalid color format. Expected an RGB or HSL object.`)},oe=e=>{if(!p(e))throw Error(`Invalid RGB color format`);let{red:t,green:n,blue:r,alpha:i}=typeof e==`string`?re(e):e,a=t/255,o=n/255,s=r/255,c=Math.max(a,o,s),l=Math.min(a,o,s),u=c-l,d=0,f=0,m=(c+l)/2;if(u!==0){switch(f=m>.5?u/(2-c-l):u/(c+l),c){case a:d=(o-s)/u+(o<s?6:0);break;case o:d=(s-a)/u+2;break;case s:d=(a-o)/u+4}d*=60}return{hue:Math.round(d),saturation:Math.round(100*f),lightness:Math.round(100*m),alpha:i}},se=e=>oe(g(e)),ce=e=>{let t=ie(e);if(t===`hsl`)return e;if(t===`rgb`)return oe(e);if(t===`hex`)return se(e);if(t===`hslString`)return ne(e);if(t===`rgbString`)return oe(e);throw Error(`Invalid color format`)},le=e=>ae(ce(e));var _=class extends e{theme=`light`;onChangeTheme=c();definedColors={dark:{0:{hue:0,lightness:40,saturation:0},1:{hue:358,lightness:65,saturation:100},2:{hue:23,lightness:63,saturation:86},3:{hue:39,lightness:70,saturation:91},4:{hue:153,lightness:45,saturation:80},5:{hue:217,lightness:62,saturation:100},6:{hue:259,lightness:75,saturation:100}},light:{0:{hue:0,lightness:72,saturation:0},1:{hue:358,lightness:55,saturation:81},2:{hue:19,lightness:58,saturation:87},3:{hue:41,lightness:52,saturation:79},4:{hue:150,lightness:37,saturation:100},5:{hue:221,lightness:59,saturation:100},6:{hue:257,lightness:62,saturation:81}}};namedColors={dark:{background:`rgb(30, 30, 30)`,"background-secondary":`rgb(37, 37, 40)`,border:`hsla(0, 0%, 30%, 0.7)`,dots:`hsla(0, 0%, 40%, 0.3)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.2)`,text:`rgb(242, 242, 242)`},light:{background:`rgb(250, 250, 250)`,"background-secondary":`rgb(255, 255, 255)`,border:`hsla(0, 0%, 82%, 0.7)`,dots:`hsla(0, 0%, 72%, 0.4)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.1)`,text:`rgb(30, 30, 30)`}};colorCache={dark:{},light:{}};constructor(...e){super(...e);let t=this.options.colors;t&&[`light`,`dark`].forEach(e=>{if(!(e in t))return;let n=t[e];n&&Object.entries(n).forEach(([t,n])=>{if(!n)return;let r=this.namedColors[e],i=this.definedColors[e];if(t in r)r[t]=n;else if(t in i){let e=this.parseColor(n);if(!e){console.warn(`[JSON Canvas Viewer] Color ${n} unsupported.`);return}i[t]=e}})}),this.changeTheme(this.options.theme??`light`),this.augment({changeTheme:this.changeTheme,onChangeTheme:this.onChangeTheme})}hslProcessor=e=>{let{hue:t,saturation:n,lightness:r}=e,i=this.theme===`dark`?{active:e,background:{...e,alpha:.1},border:{...e,alpha:.7},card:{hue:t,lightness:r/3,saturation:n/3},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`}:{active:e,background:{...e,alpha:.1},border:{...e,alpha:.7},card:t===0?{hue:t,lightness:100,saturation:n}:{hue:t,lightness:90,saturation:n*.4},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`};return{active:le(i.active),background:le(i.background),border:le(i.border),card:le(i.card),text:i.text}};parseColor=e=>{if(e.startsWith(`rgb`))return oe(re(e));if(e.startsWith(`#`))return oe(g(e));if(e.startsWith(`hsl`))return ne(e)};getColor=(e=`0`)=>{let t=this.theme,n;if(this.colorCache[t][e])return this.colorCache[t][e];n=e in this.definedColors[t]?this.hslProcessor(this.definedColors[t][e]):this.hslProcessor(oe(g(e)));let r={...n,"border-width":e===`0`?`1px`:`2px`};return this.colorCache[t][e]=r,r};getNamedColor=e=>this.namedColors[this.theme][e];changeTheme=e=>{this.theme=e??(this.theme===`dark`?`light`:`dark`);let t=this.container.get(l).data.container;Object.entries(this.namedColors[this.theme]).forEach(([e,n])=>{t.style.setProperty(`--${e}`,n)}),this.onChangeTheme(this.theme)}},v=class extends e{animationId;resizeAnimationId;DM;SM;resizeObserver;perFrame={lastOffsets:{x:0,y:0},lastScale:1};lastResizeCenter={};onResize=c();onRefresh=c();constructor(...e){super(...e),this.DM=this.container.get(l),this.SM=this.container.get(_),this.resizeObserver=new ResizeObserver(this.onResizeCallback),this.SM.onChangeTheme.subscribe(this.refresh),this.augment({onRefresh:this.onRefresh,onResize:this.onResize,refresh:this.refresh}),this.onStart(this.start),this.onRestart(this.refresh),this.onDispose(this.dispose)}start=()=>{this.resizeObserver.observe(this.DM.data.container),this.animationId=requestAnimationFrame(this.draw)};draw=()=>{(this.perFrame.lastScale!==this.DM.data.scale||this.perFrame.lastOffsets.x!==this.DM.data.offsetX||this.perFrame.lastOffsets.y!==this.DM.data.offsetY)&&this.refresh(),this.animationId=requestAnimationFrame(this.draw)};refresh=()=>{this.perFrame={lastOffsets:{x:this.DM.data.offsetX,y:this.DM.data.offsetY},lastScale:this.DM.data.scale},this.onRefresh()};onResizeCallback=()=>{this.resizeAnimationId=requestAnimationFrame(()=>{let e=this.DM.middleViewer();this.lastResizeCenter.x&&this.lastResizeCenter.y&&(this.DM.data.offsetX=this.DM.data.offsetX+e.x-this.lastResizeCenter.x,this.DM.data.offsetY=this.DM.data.offsetY+e.y-this.lastResizeCenter.y),this.lastResizeCenter.x=e.x,this.lastResizeCenter.y=e.y,this.onResize(e.width,e.height),this.refresh()})};dispose=()=>{this.animationId&&cancelAnimationFrame(this.animationId),this.resizeAnimationId&&cancelAnimationFrame(this.resizeAnimationId),this.resizeObserver.disconnect()}};const ue={audio:/\.(mp3|wav|ogg|opus|aac|m4a|flac)$/i,image:/\.(png|jpg|jpeg|gif|svg|webp|avif|bmp|ico|heic|heif)$/i,markdown:/\.(md|mdx|markdown|txt)$/i,video:/\.(mp4|webm|ogv|mov|m3u8|mpd)$/i},de=[`markdown`,`image`,`audio`,`video`];var fe=class extends e{_overlaysLayer=document.createElement(`div`);overlays={};selectedId;aborted=!1;eventListeners={};DM;SM;parse;componentDict={audio:({container:e,content:t})=>{let n=document.createElement(`audio`);n.className=`JCV-audio`,n.src=t,n.controls=!0,e.appendChild(n)},image:({container:e,content:t})=>{let n=document.createElement(`img`);n.className=`JCV-img`,n.src=t,n.loading=`lazy`,e.appendChild(n)},link:({container:e,content:t})=>{let n=document.createElement(`iframe`);n.src=t,n.sandbox=`allow-scripts allow-same-origin`,n.className=`JCV-link-iframe`,n.loading=`lazy`,e.appendChild(n)},markdown:async({container:e,content:t})=>{e.classList.add(`JCV-markdown-content`);let n=document.createElement(`div`);n.textContent=`Loading...`,n.classList.add(`JCV-parsed-content-wrapper`),e.appendChild(n);let r;try{let e=await(await fetch(t)).text(),n=/^---\n([\s\S]*?)\n---\n([\s\S]*)$/.exec(e);r=await this.parse(n?n[2]:e)}catch(e){console.error(`[JSON Canvas Viewer] Failed to load markdown:`,e),r=`Failed to load content.`}n.innerHTML=r},text:({container:e,content:t})=>{e.classList.add(`JCV-markdown-content`);let n=document.createElement(`div`);n.innerHTML=t,n.classList.add(`JCV-parsed-content-wrapper`),e.appendChild(n)},video:({container:e,content:t})=>{let n=document.createElement(`video`);n.className=`JCV-video`,n.src=t,n.controls=!0,e.appendChild(n)}};get overlaysLayer(){if(!this._overlaysLayer)throw n;return this._overlaysLayer}onInteractionStart=c();onInteractionEnd=c();onNodeActive=c();onNodeLosesActive=c();constructor(...e){super(...e),this.parse=this.options.parser??(e=>e),this.DM=this.container.get(l),this.SM=this.container.get(_),this.container.get(v).onRefresh.subscribe(this.updateOverlays),this.SM.onChangeTheme.subscribe(this.themeChanged),this._overlaysLayer=document.createElement(`div`),this._overlaysLayer.className=`JCV-overlays`,this._overlaysLayer.id=`overlays`,this.DM.data.container.appendChild(this.overlaysLayer);let t=this.options.nodeComponents;t&&Object.assign(this.componentDict,t),this.augment({onNodeActive:this.onNodeActive,onNodeLosesActive:this.onNodeLosesActive}),this.onStart(this.start),this.onRestart(this.restart),this.onDispose(this.dispose)}start=()=>{this.container.get(Se).onClick.subscribe(this.select),this.renderOverlays()};restart=()=>{this.clearOverlays(),this.renderOverlays()};renderOverlays=()=>{let e=async({ref:e,fileName:t})=>{switch(e.type){case`text`:this.createOverlay(e,await this.parse(e.text),`text`);break;case`file`:for(let n of de)if(t?.match(ue[n])){this.createOverlay(e,e.file,n);break}break;case`link`:this.createOverlay(e,e.url,`link`);break}};Object.values(this.DM.data.nodeMap).forEach(async t=>await e(t))};themeChanged=()=>{Object.values(this.overlays).forEach(e=>{let t=this.DM.data.nodeMap[e.id].ref,n=this.SM.getColor(t.color);this.setOverlayColor(e,n)})};select=e=>{let t=this.selectedId,n=t?this.overlays[t]:void 0,r=e?this.overlays[e]:void 0;if(n&&t){n.classList.remove(`JCV-active`);let e=this.DM.data.nodeMap[t];this.onNodeLosesActive(e.ref),e.onLoseActive?.()}if(r&&e){r.classList.add(`JCV-active`),this.onInteractionStart();let t=this.DM.data.nodeMap[e];this.onNodeActive(t.ref),t.onActive?.()}else this.onInteractionEnd();this.selectedId=e};updateOverlays=()=>{let e=this.DM.data;this.overlaysLayer.style.transform=`translate(${e.offsetX}px, ${e.offsetY}px) scale(${e.scale})`};createOverlay=(...e)=>{if(this.aborted)return;let t=e[0],n=this.overlays[t.id];if(!n){if(n=this.constructOverlay(...e),this.aborted)return;this.overlaysLayer.appendChild(n),this.overlays[t.id]=n,n.style.left=`${t.x}px`,n.style.top=`${t.y}px`,n.style.width=`${t.width}px`,n.style.height=`${t.height}px`}};constructOverlay=(...e)=>{let t=e[0],n=document.createElement(`div`);n.classList.add(`JCV-overlay-container`),n.id=t.id,this.setOverlayColor(n,this.SM.getColor(t.color));let r=document.createElement(`div`);r.classList.add(`JCV-content`),n.appendChild(r);let i=document.createElement(`div`);i.className=`JCV-click-layer`,n.appendChild(i);let a=document.createElement(`div`);a.className=`JCV-overlay-border`,n.appendChild(a);let o=this.DM.data.nodeMap[t.id];o.onActive=c(),o.onLoseActive=c(),o.onBeforeUnmount=c(),this.componentDict[e[2]]({container:r,content:e[1],node:e[0],onActive:o.onActive,onBeforeUnmount:o.onBeforeUnmount,onLoseActive:o.onLoseActive});let s=()=>{t.id===this.selectedId&&this.onInteractionStart()},l=()=>{t.id===this.selectedId&&this.onInteractionEnd()};return n.addEventListener(`pointerenter`,s),n.addEventListener(`pointerleave`,l),n.addEventListener(`touchstart`,s),n.addEventListener(`touchend`,l),this.eventListeners[t.id]=[s,l],n};setOverlayColor=(e,t)=>{Object.entries(t).forEach(([t,n])=>{e.style.setProperty(`--overlay-${t}`,n)})};clearOverlays=()=>{Object.entries(this.overlays).forEach(([e,t])=>{if(this.DM.data.nodeMap[e].onBeforeUnmount?.(),this.eventListeners[e]){let r=this.eventListeners[e][0],i=this.eventListeners[e][1];if(!r||!i)throw n;t.removeEventListener(`pointerenter`,r),t.removeEventListener(`pointerleave`,i),t.removeEventListener(`touchstart`,r),t.removeEventListener(`touchend`,i),this.eventListeners[e][0]=void 0,this.eventListeners[e][1]=void 0}t.remove(),delete this.overlays[e]})};dispose=()=>{this.aborted=!0,this.clearOverlays(),this.overlaysLayer.remove(),this._overlaysLayer=void 0}},pe=class{dispatch;constructor(e,t,n,r,i,a,o,s){this.augment=e,this.getNthPointer=n,this.toTargetCoords=r,this.window=i,this.pointers=a,this.element=o,this.options=s,this.dispatch=t}onPointerDown;onPointerUp;onPointerMove;onWheel;onStart;onStop;dispose;modifiers};function me(e,t=0){return e[e.length-1-t]}function he(e,t){for(let[n,r]of Object.entries(e))n in t||(t[n]=r)}var ge=class extends pe{#e=-1/0;#t=0;onPointerDown=(e,t,n)=>{if(n.size===2){let e=this.getNthPointer(0);e.interrupted=!0,t.interrupted=!0}};onPointerUp=(e,t)=>{if(t.interrupted)return;let n=this.options.clickMoveThreshold??5;if(Math.abs(t.records[0].x-e.clientX)>=n||Math.abs(t.records[0].y-e.clientY)>=n)return;let r=me(t.records).timestamp,i=this.options.clickStreakWindow??400;r-this.#e<=i?this.#t++:this.#t=1,this.#e=r;let a=this.toTargetCoords({x:e.clientX,y:e.clientY});this.dispatch(`trueClick`,{...a,target:t.target,streak:this.#t})}},_e=class extends pe{onPointerMove=(e,t,n)=>{let r=me(t.records,1);if(n.size===1){let t=e.clientX-r.x,n=e.clientY-r.y;this.dispatch(`drag`,{deltaX:t,deltaY:n,x:e.clientX,y:e.clientY})}}};-(Math.PI/4)*3,-Math.PI/4,Math.PI/4,Math.PI/4*3,-Math.PI/2,Math.PI/2,-(Math.PI/8)*7,-(Math.PI/8)*5,-(Math.PI/8)*3,-Math.PI/8,Math.PI/8,Math.PI/8*3,Math.PI/8*5,Math.PI/8*7;var y=class extends pe{#e={lastDistance:0,lastMidpoint:{x:0,y:0}};#t(){let e=me(this.getNthPointer(0).records),t=me(this.getNthPointer(1).records),n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}#n(){let e=me(this.getNthPointer(0).records),t=me(this.getNthPointer(1).records);return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}onPointerDown=(e,t,n)=>{n.size===2&&(this.#e.lastDistance=this.#t(),this.#e.lastMidpoint=this.toTargetCoords(this.#n()))};onPointerMove=(e,t,n)=>{if(n.size!==2)return;let r=this.#t(),i=this.#n(),a=r/this.#e.lastDistance;this.#e.lastDistance=r;let o=this.toTargetCoords(i),s=o.x-this.#e.lastMidpoint.x,c=o.y-this.#e.lastMidpoint.y;this.#e.lastMidpoint=o,this.#i({deltaX:s,deltaY:c}),this.#r(a,o)};#r(e,t){e!==1&&this.dispatch(`zoom`,{x:t.x,y:t.y,factor:e})}#i(e){e.deltaX===0&&e.deltaY===0||this.dispatch(`pan`,e)}},ve=class extends pe{onWheel=e=>e.preventDefault();#e=e=>e.preventDefault();onStart=()=>{this.element.style.touchAction=`none`,this.element.addEventListener(`gesturestart`,this.#e,{passive:!1}),this.element.addEventListener(`gesturechange`,this.#e,{passive:!1})};onStop=()=>{this.element.style.touchAction=``,this.element.removeEventListener(`gesturestart`,this.#e),this.element.removeEventListener(`gesturechange`,this.#e)};dispose=this.onStop},b=class extends pe{constructor(...e){super(...e),he({proControlSchema:!1,zoomFactor:.1,lockControlSchema:!1},this.options)}onWheel=e=>{let t=this.options;if(!t.proControlSchema&&!t.lockControlSchema&&(e.ctrlKey||e.shiftKey||Math.abs(e.deltaX)>Math.abs(e.deltaY))&&(t.proControlSchema=!0),t.proControlSchema)if(e.ctrlKey){let n=1-t.zoomFactor*e.deltaY,r=this.toTargetCoords({x:e.clientX,y:e.clientY});this.#e(n,r)}else e.shiftKey&&Math.abs(e.deltaX)<=Math.abs(e.deltaY)?this.#t({deltaX:-e.deltaY,deltaY:-e.deltaX}):this.#t({deltaX:-e.deltaX,deltaY:-e.deltaY});else{let n=1-t.zoomFactor/20*e.deltaY,r=this.toTargetCoords({x:e.clientX,y:e.clientY});this.#e(n,r)}};#e(e,t){this.dispatch(`zoom`,{x:t.x,y:t.y,factor:e})}#t(e){this.dispatch(`pan`,e)}},ye=class extends pe{#e={};#t=null;constructor(...e){super(...e);let t=this.options.lubricator;t&&Object.entries(t).forEach(([e,t])=>{let n={sample:{},fields:{}};Object.keys(t.fields).forEach(e=>{n.fields[e]={catch:1,release:1}}),this.#e[e]=n,this.modifiers[e]=this.#n(n,t)})}onStart=()=>{this.#t=requestAnimationFrame(this.#i)};onStop=()=>{this.#t&&cancelAnimationFrame(this.#t),this.#t=null,Object.values(this.#e).forEach(e=>{Object.values(e.fields).forEach(e=>{e.release=1,e.catch=1})})};#n=(e,t)=>n=>n.lubricated?!0:(e.sample=n,this.#r(e.fields,t.fields,n),!1);#r=(e,t,n)=>{Object.entries(e).forEach(([e,r])=>{if(typeof n[e]!=`number`)return;let i=t[e].countType;i===`sum`?r.catch+=n[e]:i===`product`&&(r.catch*=n[e])})};#i=()=>{let e=this.#e,t=this.options.lubricator;t&&(Object.entries(e).forEach(([e,n])=>{let r=n.sample;r.lubricated=!0;let i=!1;for(let[a,o]of Object.entries(n.fields)){if(o.catch===1)continue;let n=t[e].fields[a].countType,s,c;if(n===`sum`?(c=o.catch-o.release,s=Math.abs(c)):(c=o.catch/o.release,s=this.#a(c)-1),s<=t[e].fields[a].diminishBoundary){i||=!0,r[a]=c,o.release=1,o.catch=1;continue}let l;n===`sum`?(l=c*t[e].decayFactor,o.release+=l):(l=c**+t[e].decayFactor,o.release*=l),r[a]=l,i=!0}i&&this.dispatch(e,r)}),this.#t=requestAnimationFrame(this.#i))};#a=e=>e>1?e:1/e;modifiers={}};const x={decayFactor:.25,fields:{deltaX:{countType:`sum`,diminishBoundary:.5},deltaY:{countType:`sum`,diminishBoundary:.5}}},be=x,xe={decayFactor:.25,fields:{factor:{countType:`product`,diminishBoundary:.01}}};var S=class{#e;#t=new Map;#n={};#r={};#i;#a={};options;get#o(){if(!this.#i)throw Error(`[Pointeract] Window is not defined.`);return this.#i}constructor(e,t){let n=t||[];this.#i=e.element.ownerDocument.defaultView,this.#e=e.element,e.coordinateOutput||=`relative`,this.options=e,n.forEach(t=>{let n=new t(this.#l,this.dispatch,this.#s,this.#c,this.#o,this.#t,this.#e,this.options);Object.assign(n,{options:e}),this.#n[t.name]=n})}on=(e,t)=>(this.#a[e]||(this.#a[e]=new Set),this.#a[e]?.add(t),this);off=(e,t)=>(this.#a[e]?.delete(t),this);#s=e=>{let t=Error(`[Pointeract] Invalid pointer index.`);if(e<0||e>=this.#t.size)throw t;let n=0;for(let t of this.#t.values()){if(n===e)return t;n++}throw t};#c=e=>{if(this.options.coordinateOutput===`absolute`)return e;let t=this.#e.getBoundingClientRect();return e.x-=t.left,e.y-=t.top,this.options.coordinateOutput===`relative`?e:(e.x/=t.width,e.y/=t.height,e)};dispatch=(...e)=>{let t=e[0],n=e[1],r=!0;for(let e of Object.values(this.#n))if(!(!e.modifiers||!(t in e.modifiers))&&(r=n===void 0?e.modifiers[t]():e.modifiers[t](n),r===!1))return;let i;i=r===!0?n:r,this.#a[t]?.forEach(e=>e(i))};#l=e=>{Object.defineProperties(this,Object.getOwnPropertyDescriptors(e))};#u=(e,...t)=>{Object.values(this.#n).forEach(n=>{let r=n[e];r&&r(...t)})};#d=e=>{e.isPrimary&&this.#t.clear();let t={records:[{x:e.clientX,y:e.clientY,timestamp:Date.now()}],target:e.target,index:this.#t.size};this.#t.set(e.pointerId,t),this.#u(`onPointerDown`,e,t,this.#t)};#f=e=>{let t=this.#t.get(e.pointerId);t&&(t.records.push({x:e.clientX,y:e.clientY,timestamp:Date.now()}),this.#u(`onPointerMove`,e,t,this.#t))};#p=e=>{let t=this.#t.get(e.pointerId);t&&(this.#t.delete(e.pointerId),this.#u(`onPointerUp`,e,t,this.#t))};#m=e=>this.#u(`onWheel`,e);stop=e=>{let t=()=>{this.#e.removeEventListener(`pointerdown`,this.#d),this.#o.removeEventListener(`pointermove`,this.#f),this.#o.removeEventListener(`pointerup`,this.#p),this.#e.removeEventListener(`wheel`,this.#m),this.#u(`onStop`)},n=e=>{if(!(e.name in this.#n))return;let t=this.#n[e.name];t.onStop&&t.onStop(),this.#r[e.name]=t,delete this.#n[e.name]};return e?e.forEach(e=>{n(e)}):t(),this};start=e=>{let t=()=>{this.#e.addEventListener(`pointerdown`,this.#d),this.#o.addEventListener(`pointermove`,this.#f),this.#o.addEventListener(`pointerup`,this.#p),this.#e.addEventListener(`wheel`,this.#m,{passive:!1}),this.#u(`onStart`)},n=e=>{if(!(e.name in this.#r))return;let t=this.#r[e.name];t.onStart&&t.onStart(),this.#n[e.name]=t,delete this.#r[e.name]};return e?e.forEach(e=>{n(e)}):t(),this};dispose=()=>{this.stop(),this.#i=null,this.#u(`dispose`),this.#a={}}},Se=class extends e{pointeract;DM;onClick=c();constructor(...e){super(...e),this.DM=this.container.get(l);let t=Object.assign(this.options.pointeract??{},{coordinateOutput:`relative`,element:this.DM.data.container,lubricator:{drag:be,pan:x,zoom:xe}});this.pointeract=new S(t,[ge,_e,b,ve,y,ye]);let n=this.container.get(fe);n.onInteractionStart.subscribe(this.stopInteract),n.onInteractionEnd.subscribe(this.startInteract),this.augment({pan:this.pan,panToCoords:this.panToCoords,zoom:this.zoom,zoomToScale:this.zoomToScale}),this.onStart(this.start),this.onDispose(this.dispose)}start=()=>{this.pointeract.on(`pan`,this.onPan).on(`drag`,this.onPan).on(`zoom`,this.onZoom).on(`trueClick`,this.onTrueClick).start()};startInteract=()=>{this.pointeract.start()};stopInteract=()=>{this.pointeract.stop()};onPan=e=>{this.truePan({x:e.deltaX,y:e.deltaY})};onZoom=e=>{this.trueZoom(e.factor,e)};trueZoom=(e,t)=>{let n=Math.max(Math.min(this.DM.data.scale*e,20),.05);if(n===this.DM.data.scale)return;let r=n/this.DM.data.scale,i=this.C2C(t);this.DM.data.offsetX=t.x-i.x*r,this.DM.data.offsetY=t.y-i.y*r,this.DM.data.scale=n};truePan=({x:e,y:t})=>{this.DM.data.offsetX+=e,this.DM.data.offsetY+=t};zoom=(e,t)=>{this.pointeract.dispatch(`zoom`,{factor:e,...t})};pan=({x:e,y:t})=>{this.pointeract.dispatch(`pan`,{deltaX:e,deltaY:t})};zoomToScale=(e,t)=>{let n=e/this.DM.data.scale;this.pointeract.dispatch(`zoom`,{factor:n,...t})};panToCoords=({x:e,y:t})=>{this.pointeract.dispatch(`pan`,{deltaX:e-this.DM.data.offsetX,deltaY:t-this.DM.data.offsetY})};C2C=({x:e,y:t})=>({x:e-this.DM.data.offsetX,y:t-this.DM.data.offsetY});onTrueClick=e=>{let t=e.target?e.target:void 0;if(this.isUIControl(t))return;let n=this.findNodeId(t);this.onClick(n)};isUIControl=e=>e?e.closest(`.controls`)||e.closest(`button`)||e.closest(`input`):!1;findNodeId=e=>{if(!e)return;let t=e;for(;(!t.id||t.id===``)&&t.parentElement;)t=t.parentElement;if(!(t.id===`overlays`||!t.id||t.id===``))return t.id};dispose=()=>this.pointeract.dispose()},Ce=`.JSON-Canvas-Viewer > .JCV-controls {
|
|
284
|
+
`;const n=Error(`[JSONCanvasViewer] Resource hasn't been set up or has been disposed.`);function r(e,t){let n=document.createElement(`style`);n.innerHTML=t,e.appendChild(n)}function i(e,t,n,r,i,a){e.beginPath(),e.moveTo(t+a,n),e.lineTo(t+r-a,n),e.quadraticCurveTo(t+r,n,t+r,n+a),e.lineTo(t+r,n+i-a),e.quadraticCurveTo(t+r,n+i,t+r-a,n+i),e.lineTo(t+a,n+i),e.quadraticCurveTo(t,n+i,t,n+i-a),e.lineTo(t,n+a),e.quadraticCurveTo(t,n,t+a,n),e.closePath()}function a(e,t){let n=e.x+e.width/2,r=e.y+e.height/2;switch(t){case`top`:return{x:n,y:e.y};case`bottom`:return{x:n,y:e.y+e.height};case`left`:return{x:e.x,y:r};case`right`:return{x:e.x+e.width,y:r};default:return{x:n,y:r}}}function o(e,t,n){let r=window.devicePixelRatio??1,i=e.getContext(`2d`);if(!i)throw Error(`[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.`);e.width=Math.round(t*r),e.height=Math.round(n*r),i.setTransform(1,0,0,1,0,0),i.scale(r,r)}function s(e,t){let n=10**t;return Math.round(e*n)/n}function c(e=!1){let t=(...n)=>{let r=t.subs.values().toArray();for(let t of e?r.toReversed():r)t(...n)};return t.subs=new Set,t.subscribe=e=>(t.subs.add(e),()=>t.unsubscribe(e)),t.unsubscribe=e=>{t.subs.delete(e)},t}var l=class extends e{onToggleFullscreen=c();data={canvasData:{edges:[],nodes:[]},container:document.createElement(`div`),edgeMap:{},nodeBounds:{centerX:0,centerY:0,height:0,maxX:0,maxY:0,minX:0,minY:0,width:0},nodeMap:{},offsetX:0,offsetY:0,scale:1};constructor(...e){super(...e);let n=this.options.container;for(;n.firstElementChild;)n.firstElementChild.remove();n.innerHTML=``;let i=this.options.shadowed?n.attachShadow({mode:`open`}):n;r(i,t),this.data.container.classList.add(`JSON-Canvas-Viewer`),i.appendChild(this.data.container),this.augment({onToggleFullscreen:this.onToggleFullscreen,resetView:this.resetView,toggleFullscreen:this.toggleFullscreen}),this.onStart(this.start),this.onRestart(this.start),this.onDispose(this.dispose)}start=()=>{let e={edges:[],nodes:[],...this.options.canvas};Object.assign(this.data,{canvasData:e,edgeMap:{},nodeBounds:this.calculateNodeBounds(e),nodeMap:{},offsetX:0,offsetY:0,scale:1}),this.data.canvasData.nodes.forEach(e=>{let t={box:this.getNodeBox(e),ref:e};if(this.data.nodeMap[e.id]=t,e.type===`file`){let n=e.file,r=n.split(`/`).pop()??``,i=r.lastIndexOf(`?`);if(t.fileName=i===-1?r:r.slice(0,i),!e.file.includes(`://`)){let t=this.options.attachments?.[n];t&&(e.file=t)}}}),this.data.canvasData.edges.forEach(e=>{this.data.edgeMap[e.id]={box:this.getEdgeBox(e),ref:e}}),this.resetView()};processBaseDir=e=>e?e?.slice(-1)===`/`?e:`${e}/`:`./`;getNodeBox=e=>({bottom:e.y+e.height,left:e.x,right:e.width+e.x,top:e.type===`file`||e.type===`group`?e.y-40:e.y});getEdgeBox=e=>{let t=this.data.nodeMap,n=t[e.fromNode].ref,r=t[e.toNode].ref,i=a(n,e.fromSide),o=a(r,e.toSide),s={bottom:Math.max(i.y,o.y),left:Math.min(i.x,o.x),right:Math.max(i.x,o.x),top:Math.min(i.y,o.y)},c=s.right-s.left,l=s.bottom-s.top,u=Math.min(c,l),d=Math.log2(Math.max(c,l)/(u===0?1:u))*10;return{bottom:s.bottom+d,left:s.left-d,right:s.right+d,top:s.top-d}};calculateNodeBounds(e){let t=1/0,n=1/0,r=-1/0,i=-1/0;e.nodes.forEach(e=>{t=Math.min(t,e.x),n=Math.min(n,e.y),r=Math.max(r,e.x+e.width),i=Math.max(i,e.y+e.height)});let a=r-t,o=i-n;return{centerX:t+a/2,centerY:n+o/2,height:o,maxX:r,maxY:i,minX:t,minY:n,width:a}}toggleFullscreen=async e=>{!document.fullscreenElement&&(!e||e===`enter`)?(await this.data.container.requestFullscreen(),this.onToggleFullscreen(`enter`)):document.fullscreenElement&&(!e||e===`exit`)&&(await document.exitFullscreen(),this.onToggleFullscreen(`exit`))};resetView=()=>{let e=this.data.nodeBounds,t=this.data.container;if(!e||!t)return;let n=e.width+200,r=e.height+200,i=t.clientWidth,a=t.clientHeight,o=i/n,s=a/r,c=Math.round(Math.min(o,s)*1e3)/1e3,l=e.centerX,u=e.centerY,d={offsetX:i/2-l*c,offsetY:a/2-u*c,scale:c};this.data.offsetX=d.offsetX,this.data.offsetY=d.offsetY,this.data.scale=d.scale};middleViewer=()=>{let e=this.data.container;return{height:e.clientHeight,width:e.clientWidth,x:e.clientWidth/2,y:e.clientHeight/2}};dispose=()=>{this.data.container.remove()}};const u=(e,t,n)=>e>=t&&e<=n,d=e=>{if(typeof e==`number`)return u(e,0,1);if(typeof e==`string`){let t=parseFloat(e);return!isNaN(t)&&(e.endsWith(`%`)?u(t/100,0,1):u(t,0,1))}return!1},f=e=>{let t=e.trim();return t?t.endsWith(`%`)?Number(t.slice(0,-1))/100*255:Number(t):NaN},p=e=>typeof e==`string`?h(e):typeof e==`object`&&!!e&&m(e),m=e=>{let{red:t,green:n,blue:r,alpha:i}=e;return u(t,0,255)&&u(n,0,255)&&u(r,0,255)&&(i===void 0||u(i,0,1))},h=e=>{let t=e.match(/^rgba?\(\s*(\d{1,3}|[\d.]+%)\s*[, ]\s*(\d{1,3}|[\d.]+%)\s*[, ]\s*(\d{1,3}|[\d.]+%)\s*(?:[,/]\s*([01]?\.?\d+%?))?\s*\)$/);if(!t)return!1;let[,n,r,i,a]=t,o=f(n),s=f(r),c=f(i);return!!(u(o,0,255)&&u(s,0,255)&&u(c,0,255))&&(a===void 0||d(a))},ee=e=>{let t=e.trim().toLowerCase().match(/^(-?[\d.]+)(deg|rad|grad|turn)?$/);if(!t)return NaN;let n=parseFloat(t[1]),r=t[2];if(isNaN(n))return NaN;let i;switch(r){case`rad`:i=180*n/Math.PI;break;case`grad`:i=n/400*360;break;case`turn`:i=360*n;break;default:i=n}return(i%360+360)%360},te=e=>{if(typeof e==`number`){if(!u(e,0,1))throw Error(`Alpha value must be between 0 and 1`);return e}if(typeof e==`string`){let t=e.trim(),n;if(n=t.endsWith(`%`)?Number(t.slice(0,-1))/100:Number(t),isNaN(n))throw Error(`Invalid alpha value: "${e}"`);if(!u(n,0,1))throw Error(`Alpha value must be between 0 and 1`);return n}throw Error(`Invalid alpha value format`)},ne=e=>{if(typeof e!=`string`)throw Error(`Invalid HSL color format`);let t=e.match(/^hsla?\(\s*(-?[\d.]+(?:deg|rad|grad|turn)?)\s*[, ]\s*(-?[\d.]+%?)\s*[, ]\s*(-?[\d.]+%?)\s*(?:[,/]\s*(-?[\d.]+%?))?\s*\)$/i);if(!t)throw Error(`Invalid HSL color format`);let[,n,r,i,a]=t,o=ee(n),s=parseFloat(r),c=parseFloat(i);if(isNaN(o)||isNaN(s)||isNaN(c)||!u(s,0,100)||!u(c,0,100))throw Error(`Invalid HSL color values`);return a===void 0?{hue:o,saturation:s,lightness:c,alpha:1}:{hue:o,saturation:s,lightness:c,alpha:te(a)}},re=e=>{if(typeof e!=`string`)throw Error(`Invalid RGB color format`);let t=e.match(/^rgba?\(\s*(-?[\d.]+%?)\s*[, ]\s*(-?[\d.]+%?)\s*[, ]\s*(-?[\d.]+%?)\s*(?:[,/]\s*(-?[\d.]+%?))?\s*\)$/i);if(!t)throw Error(`Invalid RGB color format`);let[,n,r,i,a]=t,o=f(n),s=f(r),c=f(i);if(!u(o,0,255)||!u(s,0,255)||!u(c,0,255))throw Error(`RGB values must be between 0 and 255`);return{red:o,green:s,blue:c,alpha:a===void 0?1:te(a)}},g=e=>{if(typeof e!=`string`)throw Error(`Invalid Hex color format.`);let t=e.match(/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i);if(!t)throw Error(`Invalid Hex color format.`);let n=t[1];n.length!==3&&n.length!==4||(n=n.split(``).map(e=>e+e).join(``));let r=parseInt(n.substring(0,2),16),i=parseInt(n.substring(2,4),16),a=parseInt(n.substring(4,6),16),o=1;if(n.length===8){let e=parseInt(n.substring(6,8),16);o=Number((e/255).toFixed(2))}return{red:r,green:i,blue:a,alpha:o}},ie=e=>{if(typeof e==`string`){if(e.startsWith(`#`))return`hex`;if(e.startsWith(`rgb`))return`rgbString`;if(e.startsWith(`hsl`))return`hslString`}if(typeof e==`object`&&e){if(`red`in e&&`green`in e&&`blue`in e)return`rgb`;if(`hue`in e&&`saturation`in e&&`lightness`in e)return`hsl`}throw Error(`Invalid color format`)},ae=e=>{if(typeof e!=`object`||!e)throw Error(`Invalid color format. Expected an RGB or HSL object.`);if(`red`in e&&`green`in e&&`blue`in e){let{red:t,green:n,blue:r,alpha:i}=e;return i===void 0||i===1?`rgb(${t}, ${n}, ${r})`:`rgba(${t}, ${n}, ${r}, ${i})`}if(`hue`in e&&`saturation`in e&&`lightness`in e){let{hue:t,saturation:n,lightness:r,alpha:i}=e;return i===void 0||i===1?`hsl(${t}, ${n}%, ${r}%)`:`hsla(${t}, ${n}%, ${r}%, ${i})`}throw Error(`Invalid color format. Expected an RGB or HSL object.`)},oe=e=>{if(!p(e))throw Error(`Invalid RGB color format`);let{red:t,green:n,blue:r,alpha:i}=typeof e==`string`?re(e):e,a=t/255,o=n/255,s=r/255,c=Math.max(a,o,s),l=Math.min(a,o,s),u=c-l,d=0,f=0,m=(c+l)/2;if(u!==0){switch(f=m>.5?u/(2-c-l):u/(c+l),c){case a:d=(o-s)/u+(o<s?6:0);break;case o:d=(s-a)/u+2;break;case s:d=(a-o)/u+4}d*=60}return{hue:Math.round(d),saturation:Math.round(100*f),lightness:Math.round(100*m),alpha:i}},se=e=>oe(g(e)),ce=e=>{let t=ie(e);if(t===`hsl`)return e;if(t===`rgb`)return oe(e);if(t===`hex`)return se(e);if(t===`hslString`)return ne(e);if(t===`rgbString`)return oe(e);throw Error(`Invalid color format`)},le=e=>ae(ce(e));var _=class extends e{theme=`light`;onChangeTheme=c();definedColors={dark:{0:{hue:0,lightness:40,saturation:0},1:{hue:358,lightness:65,saturation:100},2:{hue:23,lightness:63,saturation:86},3:{hue:39,lightness:70,saturation:91},4:{hue:153,lightness:45,saturation:80},5:{hue:217,lightness:62,saturation:100},6:{hue:259,lightness:75,saturation:100}},light:{0:{hue:0,lightness:72,saturation:0},1:{hue:358,lightness:55,saturation:81},2:{hue:19,lightness:58,saturation:87},3:{hue:41,lightness:52,saturation:79},4:{hue:150,lightness:37,saturation:100},5:{hue:221,lightness:59,saturation:100},6:{hue:257,lightness:62,saturation:81}}};namedColors={dark:{background:`rgb(30, 30, 30)`,"background-secondary":`rgb(37, 37, 40)`,border:`hsla(0, 0%, 30%, 0.7)`,dots:`hsla(0, 0%, 40%, 0.3)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.2)`,text:`rgb(242, 242, 242)`},light:{background:`rgb(250, 250, 250)`,"background-secondary":`rgb(255, 255, 255)`,border:`hsla(0, 0%, 82%, 0.7)`,dots:`hsla(0, 0%, 72%, 0.4)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.1)`,text:`rgb(30, 30, 30)`}};colorCache={dark:{},light:{}};constructor(...e){super(...e);let t=this.options.colors;t&&[`light`,`dark`].forEach(e=>{if(!(e in t))return;let n=t[e];n&&Object.entries(n).forEach(([t,n])=>{if(!n)return;let r=this.namedColors[e],i=this.definedColors[e];if(t in r)r[t]=n;else if(t in i){let e=this.parseColor(n);if(!e){console.warn(`[JSON Canvas Viewer] Color ${n} unsupported.`);return}i[t]=e}})}),this.changeTheme(this.options.theme??`light`),this.augment({changeTheme:this.changeTheme,onChangeTheme:this.onChangeTheme})}hslProcessor=e=>{let{hue:t,saturation:n,lightness:r}=e,i=this.theme===`dark`?{active:e,background:{...e,alpha:.1},border:{...e,alpha:.7},card:{hue:t,lightness:r/3,saturation:n/3},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`}:{active:e,background:{...e,alpha:.1},border:{...e,alpha:.7},card:t===0?{hue:t,lightness:100,saturation:n}:{hue:t,lightness:90,saturation:n*.4},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`};return{active:le(i.active),background:le(i.background),border:le(i.border),card:le(i.card),text:i.text}};parseColor=e=>{if(e.startsWith(`rgb`))return oe(re(e));if(e.startsWith(`#`))return oe(g(e));if(e.startsWith(`hsl`))return ne(e)};getColor=(e=`0`)=>{let t=this.theme,n;if(this.colorCache[t][e])return this.colorCache[t][e];n=e in this.definedColors[t]?this.hslProcessor(this.definedColors[t][e]):this.hslProcessor(oe(g(e)));let r={...n,"border-width":e===`0`?`1px`:`2px`};return this.colorCache[t][e]=r,r};getNamedColor=e=>this.namedColors[this.theme][e];changeTheme=e=>{this.theme=e??(this.theme===`dark`?`light`:`dark`);let t=this.container.get(l).data.container;Object.entries(this.namedColors[this.theme]).forEach(([e,n])=>{t.style.setProperty(`--${e}`,n)}),this.onChangeTheme(this.theme)}},v=class extends e{animationId;resizeAnimationId;DM;SM;resizeObserver;perFrame={lastOffsets:{x:0,y:0},lastScale:1};lastResizeCenter={};onResize=c();onRefresh=c();constructor(...e){super(...e),this.DM=this.container.get(l),this.SM=this.container.get(_),this.resizeObserver=new ResizeObserver(this.onResizeCallback),this.SM.onChangeTheme.subscribe(this.refresh),this.augment({onRefresh:this.onRefresh,onResize:this.onResize,refresh:this.refresh}),this.onStart(this.start),this.onRestart(this.refresh),this.onDispose(this.dispose)}start=()=>{this.resizeObserver.observe(this.DM.data.container),this.animationId=requestAnimationFrame(this.draw)};draw=()=>{(this.perFrame.lastScale!==this.DM.data.scale||this.perFrame.lastOffsets.x!==this.DM.data.offsetX||this.perFrame.lastOffsets.y!==this.DM.data.offsetY)&&this.refresh(),this.animationId=requestAnimationFrame(this.draw)};refresh=()=>{this.perFrame={lastOffsets:{x:this.DM.data.offsetX,y:this.DM.data.offsetY},lastScale:this.DM.data.scale},this.onRefresh()};onResizeCallback=()=>{this.resizeAnimationId=requestAnimationFrame(()=>{let e=this.DM.middleViewer();this.lastResizeCenter.x&&this.lastResizeCenter.y&&(this.DM.data.offsetX=this.DM.data.offsetX+e.x-this.lastResizeCenter.x,this.DM.data.offsetY=this.DM.data.offsetY+e.y-this.lastResizeCenter.y),this.lastResizeCenter.x=e.x,this.lastResizeCenter.y=e.y,this.onResize(e.width,e.height),this.refresh()})};dispose=()=>{this.animationId&&cancelAnimationFrame(this.animationId),this.resizeAnimationId&&cancelAnimationFrame(this.resizeAnimationId),this.resizeObserver.disconnect()}};const ue={audio:/\.(mp3|wav|ogg|opus|aac|m4a|flac)$/i,image:/\.(png|jpg|jpeg|gif|svg|webp|avif|bmp|ico|heic|heif)$/i,markdown:/\.(md|mdx|markdown|txt)$/i,video:/\.(mp4|webm|ogv|mov|m3u8|mpd)$/i},de=[`markdown`,`image`,`audio`,`video`];var fe=class extends e{_overlaysLayer=document.createElement(`div`);overlays={};selectedId;aborted=!1;eventListeners={};DM;SM;parse;componentDict={audio:({container:e,content:t})=>{let n=document.createElement(`audio`);n.className=`JCV-audio`,n.src=t,n.controls=!0,e.appendChild(n)},image:({container:e,content:t})=>{let n=document.createElement(`img`);n.className=`JCV-img`,n.src=t,n.loading=`lazy`,e.appendChild(n)},link:({container:e,content:t})=>{let n=document.createElement(`iframe`);n.src=t,n.sandbox=`allow-scripts allow-same-origin`,n.className=`JCV-link-iframe`,n.loading=`lazy`,e.appendChild(n)},markdown:async({container:e,content:t})=>{e.classList.add(`JCV-markdown-content`);let n=document.createElement(`div`);n.textContent=`Loading...`,n.classList.add(`JCV-parsed-content-wrapper`),e.appendChild(n);let r;try{let e=await(await fetch(t)).text(),n=/^---\n([\s\S]*?)\n---\n([\s\S]*)$/.exec(e);r=await this.parse(n?n[2]:e)}catch(e){console.error(`[JSON Canvas Viewer] Failed to load markdown:`,e),r=`Failed to load content.`}n.innerHTML=r},text:({container:e,content:t})=>{e.classList.add(`JCV-markdown-content`);let n=document.createElement(`div`);n.innerHTML=t,n.classList.add(`JCV-parsed-content-wrapper`),e.appendChild(n)},video:({container:e,content:t})=>{let n=document.createElement(`video`);n.className=`JCV-video`,n.src=t,n.controls=!0,e.appendChild(n)}};get overlaysLayer(){if(!this._overlaysLayer)throw n;return this._overlaysLayer}onInteractionStart=c();onInteractionEnd=c();onNodeActive=c();onNodeLosesActive=c();constructor(...e){super(...e),this.parse=this.options.parser??(e=>e),this.DM=this.container.get(l),this.SM=this.container.get(_),this.container.get(v).onRefresh.subscribe(this.updateOverlays),this.SM.onChangeTheme.subscribe(this.themeChanged),this._overlaysLayer=document.createElement(`div`),this._overlaysLayer.className=`JCV-overlays`,this._overlaysLayer.id=`overlays`,this.DM.data.container.appendChild(this.overlaysLayer);let t=this.options.nodeComponents;t&&Object.assign(this.componentDict,t),this.augment({onNodeActive:this.onNodeActive,onNodeLosesActive:this.onNodeLosesActive}),this.onStart(this.start),this.onRestart(this.restart),this.onDispose(this.dispose)}start=()=>{this.container.get(Se).onClick.subscribe(this.select),this.renderOverlays()};restart=()=>{this.clearOverlays(),this.renderOverlays()};renderOverlays=()=>{let e=async({ref:e,fileName:t})=>{switch(e.type){case`text`:this.createOverlay(e,await this.parse(e.text),`text`);break;case`file`:for(let n of de)if(t?.match(ue[n])){this.createOverlay(e,e.file,n);break}break;case`link`:this.createOverlay(e,e.url,`link`);break}};Object.values(this.DM.data.nodeMap).forEach(async t=>await e(t))};themeChanged=()=>{Object.values(this.overlays).forEach(e=>{let t=this.DM.data.nodeMap[e.id].ref,n=this.SM.getColor(t.color);this.setOverlayColor(e,n)})};select=e=>{let t=this.selectedId,n=t?this.overlays[t]:void 0,r=e?this.overlays[e]:void 0;if(n&&t){n.classList.remove(`JCV-active`);let e=this.DM.data.nodeMap[t];this.onNodeLosesActive(e.ref),e.onLoseActive?.()}if(r&&e){r.classList.add(`JCV-active`),this.onInteractionStart();let t=this.DM.data.nodeMap[e];this.onNodeActive(t.ref),t.onActive?.()}else this.onInteractionEnd();this.selectedId=e};updateOverlays=()=>{let e=this.DM.data;this.overlaysLayer.style.transform=`translate(${e.offsetX}px, ${e.offsetY}px) scale(${e.scale})`};createOverlay=(...e)=>{if(this.aborted)return;let t=e[0],n=this.overlays[t.id];if(!n){if(n=this.constructOverlay(...e),this.aborted)return;this.overlaysLayer.appendChild(n),this.overlays[t.id]=n,n.style.left=`${t.x}px`,n.style.top=`${t.y}px`,n.style.width=`${t.width}px`,n.style.height=`${t.height}px`}};constructOverlay=(...e)=>{let t=e[0],n=document.createElement(`div`);n.classList.add(`JCV-overlay-container`),n.id=t.id,this.setOverlayColor(n,this.SM.getColor(t.color));let r=document.createElement(`div`);r.classList.add(`JCV-content`),n.appendChild(r);let i=document.createElement(`div`);i.className=`JCV-click-layer`,n.appendChild(i);let a=document.createElement(`div`);a.className=`JCV-overlay-border`,n.appendChild(a);let o=this.DM.data.nodeMap[t.id];o.onActive=c(),o.onLoseActive=c(),o.onBeforeUnmount=c(),this.componentDict[e[2]]({container:r,content:e[1],node:e[0],onActive:o.onActive,onBeforeUnmount:o.onBeforeUnmount,onLoseActive:o.onLoseActive});let s=()=>{t.id===this.selectedId&&this.onInteractionStart()},l=()=>{t.id===this.selectedId&&this.onInteractionEnd()};return n.addEventListener(`pointerenter`,s),n.addEventListener(`pointerleave`,l),n.addEventListener(`touchstart`,s),n.addEventListener(`touchend`,l),this.eventListeners[t.id]=[s,l],n};setOverlayColor=(e,t)=>{Object.entries(t).forEach(([t,n])=>{e.style.setProperty(`--overlay-${t}`,n)})};clearOverlays=()=>{Object.entries(this.overlays).forEach(([e,t])=>{if(this.DM.data.nodeMap[e].onBeforeUnmount?.(),this.eventListeners[e]){let r=this.eventListeners[e][0],i=this.eventListeners[e][1];if(!r||!i)throw n;t.removeEventListener(`pointerenter`,r),t.removeEventListener(`pointerleave`,i),t.removeEventListener(`touchstart`,r),t.removeEventListener(`touchend`,i),this.eventListeners[e][0]=void 0,this.eventListeners[e][1]=void 0}t.remove(),delete this.overlays[e]})};dispose=()=>{this.aborted=!0,this.clearOverlays(),this.overlaysLayer.remove(),this._overlaysLayer=void 0}},pe=class{dispatch;constructor(e,t,n,r,i,a,o,s){this.augment=e,this.getNthPointer=n,this.toTargetCoords=r,this.window=i,this.pointers=a,this.element=o,this.options=s,this.dispatch=t}onPointerDown;onPointerUp;onPointerMove;onWheel;onStart;onStop;dispose;modifiers};function me(e,t=0){return e[e.length-1-t]}function he(e,t){for(let[n,r]of Object.entries(e))n in t||(t[n]=r)}var ge=class extends pe{#e=-1/0;#t=0;onPointerDown=(e,t,n)=>{if(n.size===2){let e=this.getNthPointer(0);e.interrupted=!0,t.interrupted=!0}};onPointerUp=(e,t)=>{if(t.interrupted)return;let n=this.options.clickMoveThreshold??5;if(Math.abs(t.records[0].x-e.clientX)>=n||Math.abs(t.records[0].y-e.clientY)>=n)return;let r=me(t.records).timestamp,i=this.options.clickStreakWindow??400;r-this.#e<=i?this.#t++:this.#t=1,this.#e=r;let a=this.toTargetCoords({x:e.clientX,y:e.clientY});this.dispatch(`trueClick`,{...a,target:t.target,streak:this.#t})}},_e=class extends pe{onPointerMove=(e,t,n)=>{let r=me(t.records,1);if(n.size===1){let t=e.clientX-r.x,n=e.clientY-r.y;this.dispatch(`drag`,{deltaX:t,deltaY:n,x:e.clientX,y:e.clientY})}}};-(Math.PI/4)*3,-Math.PI/4,Math.PI/4,Math.PI/4*3,-Math.PI/2,Math.PI/2,-(Math.PI/8)*7,-(Math.PI/8)*5,-(Math.PI/8)*3,-Math.PI/8,Math.PI/8,Math.PI/8*3,Math.PI/8*5,Math.PI/8*7;var y=class extends pe{#e={lastDistance:0,lastMidpoint:{x:0,y:0}};#t(){let e=me(this.getNthPointer(0).records),t=me(this.getNthPointer(1).records),n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}#n(){let e=me(this.getNthPointer(0).records),t=me(this.getNthPointer(1).records);return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}onPointerDown=(e,t,n)=>{n.size===2&&(this.#e.lastDistance=this.#t(),this.#e.lastMidpoint=this.toTargetCoords(this.#n()))};onPointerMove=(e,t,n)=>{if(n.size!==2)return;let r=this.#t(),i=this.#n(),a=r/this.#e.lastDistance;this.#e.lastDistance=r;let o=this.toTargetCoords(i),s=o.x-this.#e.lastMidpoint.x,c=o.y-this.#e.lastMidpoint.y;this.#e.lastMidpoint=o,this.#i({deltaX:s,deltaY:c}),this.#r(a,o)};#r(e,t){e!==1&&this.dispatch(`zoom`,{x:t.x,y:t.y,factor:e})}#i(e){e.deltaX===0&&e.deltaY===0||this.dispatch(`pan`,e)}},ve=class extends pe{onWheel=e=>e.preventDefault();#e=e=>e.preventDefault();onStart=()=>{this.element.style.touchAction=`none`,this.element.addEventListener(`gesturestart`,this.#e,{passive:!1}),this.element.addEventListener(`gesturechange`,this.#e,{passive:!1})};onStop=()=>{this.element.style.touchAction=``,this.element.removeEventListener(`gesturestart`,this.#e),this.element.removeEventListener(`gesturechange`,this.#e)};dispose=this.onStop},b=class extends pe{constructor(...e){super(...e),he({proControlSchema:!1,zoomFactor:.1,lockControlSchema:!1},this.options)}onWheel=e=>{let t=this.options;if(!t.proControlSchema&&!t.lockControlSchema&&(e.ctrlKey||e.shiftKey||Math.abs(e.deltaX)>Math.abs(e.deltaY))&&(t.proControlSchema=!0),t.proControlSchema)if(e.ctrlKey){let n=1-t.zoomFactor*e.deltaY,r=this.toTargetCoords({x:e.clientX,y:e.clientY});this.#e(n,r)}else e.shiftKey&&Math.abs(e.deltaX)<=Math.abs(e.deltaY)?this.#t({deltaX:-e.deltaY,deltaY:-e.deltaX}):this.#t({deltaX:-e.deltaX,deltaY:-e.deltaY});else{let n=1-t.zoomFactor/20*e.deltaY,r=this.toTargetCoords({x:e.clientX,y:e.clientY});this.#e(n,r)}};#e(e,t){this.dispatch(`zoom`,{x:t.x,y:t.y,factor:e})}#t(e){this.dispatch(`pan`,e)}},ye=class extends pe{#e={};#t=null;constructor(...e){super(...e);let t=this.options.lubricator;t&&Object.entries(t).forEach(([e,t])=>{let n={sample:{},fields:{}};Object.keys(t.fields).forEach(e=>{n.fields[e]={catch:1,release:1}}),this.#e[e]=n,this.modifiers[e]=this.#n(n,t)})}onStart=()=>{this.#t=requestAnimationFrame(this.#i)};onStop=()=>{this.#t&&cancelAnimationFrame(this.#t),this.#t=null,Object.values(this.#e).forEach(e=>{Object.values(e.fields).forEach(e=>{e.release=1,e.catch=1})})};#n=(e,t)=>n=>n.lubricated?!0:(e.sample=n,this.#r(e.fields,t.fields,n),!1);#r=(e,t,n)=>{Object.entries(e).forEach(([e,r])=>{if(typeof n[e]!=`number`)return;let i=t[e].countType;i===`sum`?r.catch+=n[e]:i===`product`&&(r.catch*=n[e])})};#i=()=>{let e=this.#e,t=this.options.lubricator;t&&(Object.entries(e).forEach(([e,n])=>{let r=n.sample;r.lubricated=!0;let i=!1;for(let[a,o]of Object.entries(n.fields)){if(o.catch===1)continue;let n=t[e].fields[a].countType,s,c;if(n===`sum`?(c=o.catch-o.release,s=Math.abs(c)):(c=o.catch/o.release,s=this.#a(c)-1),s<=t[e].fields[a].diminishBoundary){i||=!0,r[a]=c,o.release=1,o.catch=1;continue}let l;n===`sum`?(l=c*t[e].decayFactor,o.release+=l):(l=c**+t[e].decayFactor,o.release*=l),r[a]=l,i=!0}i&&this.dispatch(e,r)}),this.#t=requestAnimationFrame(this.#i))};#a=e=>e>1?e:1/e;modifiers={}};const x={decayFactor:.25,fields:{deltaX:{countType:`sum`,diminishBoundary:.5},deltaY:{countType:`sum`,diminishBoundary:.5}}},be=x,xe={decayFactor:.25,fields:{factor:{countType:`product`,diminishBoundary:.01}}};var S=class{#e;#t=new Map;#n={};#r={};#i;#a={};options;get#o(){if(!this.#i)throw Error(`[Pointeract] Window is not defined.`);return this.#i}constructor(e,t){let n=t||[];this.#i=e.element.ownerDocument.defaultView,this.#e=e.element,e.coordinateOutput||=`relative`,this.options=e,n.forEach(t=>{let n=new t(this.#l,this.dispatch,this.#s,this.#c,this.#o,this.#t,this.#e,this.options);Object.assign(n,{options:e}),this.#n[t.name]=n})}on=(e,t)=>(this.#a[e]||(this.#a[e]=new Set),this.#a[e]?.add(t),this);off=(e,t)=>(this.#a[e]?.delete(t),this);#s=e=>{let t=Error(`[Pointeract] Invalid pointer index.`);if(e<0||e>=this.#t.size)throw t;let n=0;for(let t of this.#t.values()){if(n===e)return t;n++}throw t};#c=e=>{if(this.options.coordinateOutput===`absolute`)return e;let t=this.#e.getBoundingClientRect();return e.x-=t.left,e.y-=t.top,this.options.coordinateOutput===`relative`?e:(e.x/=t.width,e.y/=t.height,e)};dispatch=(...e)=>{let t=e[0],n=e[1],r=!0;for(let e of Object.values(this.#n))if(!(!e.modifiers||!(t in e.modifiers))&&(r=n===void 0?e.modifiers[t]():e.modifiers[t](n),r===!1))return;let i;i=r===!0?n:r,this.#a[t]?.forEach(e=>e(i))};#l=e=>{Object.defineProperties(this,Object.getOwnPropertyDescriptors(e))};#u=(e,...t)=>{Object.values(this.#n).forEach(n=>{let r=n[e];r&&r(...t)})};#d=e=>{e.isPrimary&&this.#t.clear();let t={records:[{x:e.clientX,y:e.clientY,timestamp:Date.now()}],target:e.target,index:this.#t.size};this.#t.set(e.pointerId,t),this.#u(`onPointerDown`,e,t,this.#t)};#f=e=>{let t=this.#t.get(e.pointerId);t&&(t.records.push({x:e.clientX,y:e.clientY,timestamp:Date.now()}),this.#u(`onPointerMove`,e,t,this.#t))};#p=e=>{let t=this.#t.get(e.pointerId);t&&(this.#t.delete(e.pointerId),this.#u(`onPointerUp`,e,t,this.#t))};#m=e=>this.#u(`onWheel`,e);stop=e=>{let t=()=>{this.#e.removeEventListener(`pointerdown`,this.#d),this.#o.removeEventListener(`pointermove`,this.#f),this.#o.removeEventListener(`pointerup`,this.#p),this.#e.removeEventListener(`wheel`,this.#m),this.#u(`onStop`)},n=e=>{if(!(e.name in this.#n))return;let t=this.#n[e.name];t.onStop&&t.onStop(),this.#r[e.name]=t,delete this.#n[e.name]};return e?e.forEach(e=>{n(e)}):t(),this};start=e=>{let t=()=>{this.#e.addEventListener(`pointerdown`,this.#d),this.#o.addEventListener(`pointermove`,this.#f),this.#o.addEventListener(`pointerup`,this.#p),this.#e.addEventListener(`wheel`,this.#m,{passive:!1}),this.#u(`onStart`)},n=e=>{if(!(e.name in this.#r))return;let t=this.#r[e.name];t.onStart&&t.onStart(),this.#n[e.name]=t,delete this.#r[e.name]};return e?e.forEach(e=>{n(e)}):t(),this};dispose=()=>{this.stop(),this.#i=null,this.#u(`dispose`),this.#a={}}},Se=class extends e{pointeract;DM;onClick=c();constructor(...e){super(...e),this.DM=this.container.get(l);let t=Object.assign(this.options.pointeract??{},{coordinateOutput:`relative`,element:this.DM.data.container,lubricator:{drag:be,pan:x,zoom:xe}});this.pointeract=new S(t,[ge,_e,b,ve,y,ye]);let n=this.container.get(fe);n.onInteractionStart.subscribe(this.stopInteract),n.onInteractionEnd.subscribe(this.startInteract),this.augment({pan:this.pan,panToCoords:this.panToCoords,zoom:this.zoom,zoomToScale:this.zoomToScale}),this.onStart(this.start),this.onDispose(this.dispose)}start=()=>{this.pointeract.on(`pan`,this.onPan).on(`drag`,this.onPan).on(`zoom`,this.onZoom).on(`trueClick`,this.onTrueClick).start()};startInteract=()=>{this.pointeract.start()};stopInteract=()=>{this.pointeract.stop()};onPan=e=>{this.truePan({x:e.deltaX,y:e.deltaY})};onZoom=e=>{this.trueZoom(e.factor,e)};trueZoom=(e,t)=>{let n=Math.max(Math.min(this.DM.data.scale*e,20),.05);if(n===this.DM.data.scale)return;let r=n/this.DM.data.scale,i=this.C2C(t);this.DM.data.offsetX=t.x-i.x*r,this.DM.data.offsetY=t.y-i.y*r,this.DM.data.scale=n};truePan=({x:e,y:t})=>{this.DM.data.offsetX+=e,this.DM.data.offsetY+=t};zoom=(e,t)=>{this.pointeract.dispatch(`zoom`,{factor:e,...t})};pan=({x:e,y:t})=>{this.pointeract.dispatch(`pan`,{deltaX:e,deltaY:t})};zoomToScale=(e,t)=>{let n=e/this.DM.data.scale;this.pointeract.dispatch(`zoom`,{factor:n,...t})};panToCoords=({x:e,y:t})=>{this.pointeract.dispatch(`pan`,{deltaX:e-this.DM.data.offsetX,deltaY:t-this.DM.data.offsetY})};C2C=({x:e,y:t})=>({x:e-this.DM.data.offsetX,y:t-this.DM.data.offsetY});onTrueClick=e=>{let t=e.target?e.target:void 0;if(this.isUIControl(t))return;let n=this.findNodeId(t);this.onClick(n)};isUIControl=e=>e?e.closest(`.controls`)||e.closest(`button`)||e.closest(`input`):!1;findNodeId=e=>{if(!e)return;let t=e;for(;(!t.id||t.id===``)&&t.parentElement;)t=t.parentElement;if(!(t.id===`overlays`||!t.id||t.id===``))return t.id};dispose=()=>this.pointeract.dispose()},Ce=`.JSON-Canvas-Viewer > .JCV-controls {
|
|
285
285
|
position: absolute;
|
|
286
286
|
top: 10px;
|
|
287
287
|
right: 10px;
|
package/dist/kernel/utilities.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=Error(`[JSONCanvasViewer] Resource hasn't been set up or has been disposed.`);function t(e,t){let n=document.createElement(`style`);n.innerHTML=t,e.appendChild(n)}function n(e,t,n,r,i,a){e.beginPath(),e.moveTo(t+a,n),e.lineTo(t+r-a,n),e.quadraticCurveTo(t+r,n,t+r,n+a),e.lineTo(t+r,n+i-a),e.quadraticCurveTo(t+r,n+i,t+r-a,n+i),e.lineTo(t+a,n+i),e.quadraticCurveTo(t,n+i,t,n+i-a),e.lineTo(t,n+a),e.quadraticCurveTo(t,n,t+a,n),e.closePath()}function r(e,t){let n=e.x+e.width/2,r=e.y+e.height/2;switch(t){case`top`:return{x:n,y:e.y};case`bottom`:return{x:n,y:e.y+e.height};case`left`:return{x:e.x,y:r};case`right`:return{x:e.x+e.width,y:r};default:return{x:n,y:r}}}function i(e,t,n){let r=window.devicePixelRatio??1,i=e.getContext(`2d`);if(!i)throw Error(`[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.`);e.width=Math.round(t*r),e.height=Math.round(n*r),i.setTransform(1,0,0,1,0,0),i.scale(r,r)}function a(e,t){let n=10**t;return Math.round(e*n)/n}function o(e=!1){let t=(...n)=>{let r=t.subs.values().toArray();for(let t of e?r
|
|
1
|
+
const e=Error(`[JSONCanvasViewer] Resource hasn't been set up or has been disposed.`);function t(e,t){let n=document.createElement(`style`);n.innerHTML=t,e.appendChild(n)}function n(e,t,n,r,i,a){e.beginPath(),e.moveTo(t+a,n),e.lineTo(t+r-a,n),e.quadraticCurveTo(t+r,n,t+r,n+a),e.lineTo(t+r,n+i-a),e.quadraticCurveTo(t+r,n+i,t+r-a,n+i),e.lineTo(t+a,n+i),e.quadraticCurveTo(t,n+i,t,n+i-a),e.lineTo(t,n+a),e.quadraticCurveTo(t,n,t+a,n),e.closePath()}function r(e,t){let n=e.x+e.width/2,r=e.y+e.height/2;switch(t){case`top`:return{x:n,y:e.y};case`bottom`:return{x:n,y:e.y+e.height};case`left`:return{x:e.x,y:r};case`right`:return{x:e.x+e.width,y:r};default:return{x:n,y:r}}}function i(e,t,n){let r=window.devicePixelRatio??1,i=e.getContext(`2d`);if(!i)throw Error(`[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.`);e.width=Math.round(t*r),e.height=Math.round(n*r),i.setTransform(1,0,0,1,0,0),i.scale(r,r)}function a(e,t){let n=10**t;return Math.round(e*n)/n}function o(e=!1){let t=(...n)=>{let r=t.subs.values().toArray();for(let t of e?r.toReversed():r)t(...n)};return t.subs=new Set,t.subscribe=e=>(t.subs.add(e),()=>t.unsubscribe(e)),t.unsubscribe=e=>{t.subs.delete(e)},t}export{t as applyStyles,e as destroyError,n as drawRoundRect,r as getAnchorCoord,o as hook,i as resizeCanvasForDPR,a as round};
|
|
2
2
|
//# sourceMappingURL=utilities.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utilities.js","names":[],"sources":["../../src/kernel/utilities.ts"],"sourcesContent":["import type { GeneralArray } from '$/types';\nimport type { JSONCanvasNode } from '@repo/shared';\n\nexport const destroyError = new Error(\n\t\"[JSONCanvasViewer] Resource hasn't been set up or has been disposed.\",\n);\n\nexport function applyStyles(container: HTMLElement | ShadowRoot, styleString: string) {\n\tconst style = document.createElement('style');\n\tstyle.innerHTML = styleString;\n\tcontainer.appendChild(style);\n}\n\n// oxlint-disable-next-line max-params\nexport function drawRoundRect(\n\tctx: CanvasRenderingContext2D,\n\tx: number,\n\ty: number,\n\twidth: number,\n\theight: number,\n\tradius: number,\n) {\n\tctx.beginPath();\n\tctx.moveTo(x + radius, y);\n\tctx.lineTo(x + width - radius, y);\n\tctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n\tctx.lineTo(x + width, y + height - radius);\n\tctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n\tctx.lineTo(x + radius, y + height);\n\tctx.quadraticCurveTo(x, y + height, x, y + height - radius);\n\tctx.lineTo(x, y + radius);\n\tctx.quadraticCurveTo(x, y, x + radius, y);\n\tctx.closePath();\n}\n\nexport function getAnchorCoord(node: JSONCanvasNode, side: 'top' | 'bottom' | 'left' | 'right') {\n\tconst midX = node.x + node.width / 2;\n\tconst midY = node.y + node.height / 2;\n\tswitch (side) {\n\t\tcase 'top': {\n\t\t\treturn { x: midX, y: node.y };\n\t\t}\n\t\tcase 'bottom': {\n\t\t\treturn { x: midX, y: node.y + node.height };\n\t\t}\n\t\tcase 'left': {\n\t\t\treturn { x: node.x, y: midY };\n\t\t}\n\t\tcase 'right': {\n\t\t\treturn { x: node.x + node.width, y: midY };\n\t\t}\n\t\tdefault: {\n\t\t\treturn { x: midX, y: midY };\n\t\t}\n\t}\n}\n\nexport function resizeCanvasForDPR(canvas: HTMLCanvasElement, width: number, height: number) {\n\tconst dpr = window.devicePixelRatio ?? 1;\n\tconst ctx = canvas.getContext('2d');\n\tif (!ctx)\n\t\tthrow new Error(\n\t\t\t'[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.',\n\t\t);\n\tcanvas.width = Math.round(width * dpr);\n\tcanvas.height = Math.round(height * dpr);\n\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\tctx.scale(dpr, dpr);\n}\n\nexport function round(roundedNum: number, digits: number) {\n\tconst factor = 10 ** digits;\n\treturn Math.round(roundedNum * factor) / factor;\n}\n\ntype HookMatchingFunc<Args extends GeneralArray> = (...args: Args) => void;\nexport type Hook<Args extends GeneralArray = []> = {\n\t(...args: Args): void;\n\tsubs: Set<HookMatchingFunc<Args>>;\n\tsubscribe(callback: HookMatchingFunc<Args>): () => void;\n\tunsubscribe(callback: HookMatchingFunc<Args>): void;\n};\n\nexport function hook<Args extends GeneralArray = []>(reverse = false): Hook<Args> {\n\tconst result: Hook<Args> = (...args: Args) => {\n\t\tconst subs = result.subs.values().toArray();\n\t\tfor (const callback of reverse ? subs : subs
|
|
1
|
+
{"version":3,"file":"utilities.js","names":[],"sources":["../../src/kernel/utilities.ts"],"sourcesContent":["import type { GeneralArray } from '$/types';\nimport type { JSONCanvasNode } from '@repo/shared';\n\nexport const destroyError = new Error(\n\t\"[JSONCanvasViewer] Resource hasn't been set up or has been disposed.\",\n);\n\nexport function applyStyles(container: HTMLElement | ShadowRoot, styleString: string) {\n\tconst style = document.createElement('style');\n\tstyle.innerHTML = styleString;\n\tcontainer.appendChild(style);\n}\n\n// oxlint-disable-next-line max-params\nexport function drawRoundRect(\n\tctx: CanvasRenderingContext2D,\n\tx: number,\n\ty: number,\n\twidth: number,\n\theight: number,\n\tradius: number,\n) {\n\tctx.beginPath();\n\tctx.moveTo(x + radius, y);\n\tctx.lineTo(x + width - radius, y);\n\tctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n\tctx.lineTo(x + width, y + height - radius);\n\tctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n\tctx.lineTo(x + radius, y + height);\n\tctx.quadraticCurveTo(x, y + height, x, y + height - radius);\n\tctx.lineTo(x, y + radius);\n\tctx.quadraticCurveTo(x, y, x + radius, y);\n\tctx.closePath();\n}\n\nexport function getAnchorCoord(node: JSONCanvasNode, side: 'top' | 'bottom' | 'left' | 'right') {\n\tconst midX = node.x + node.width / 2;\n\tconst midY = node.y + node.height / 2;\n\tswitch (side) {\n\t\tcase 'top': {\n\t\t\treturn { x: midX, y: node.y };\n\t\t}\n\t\tcase 'bottom': {\n\t\t\treturn { x: midX, y: node.y + node.height };\n\t\t}\n\t\tcase 'left': {\n\t\t\treturn { x: node.x, y: midY };\n\t\t}\n\t\tcase 'right': {\n\t\t\treturn { x: node.x + node.width, y: midY };\n\t\t}\n\t\tdefault: {\n\t\t\treturn { x: midX, y: midY };\n\t\t}\n\t}\n}\n\nexport function resizeCanvasForDPR(canvas: HTMLCanvasElement, width: number, height: number) {\n\tconst dpr = window.devicePixelRatio ?? 1;\n\tconst ctx = canvas.getContext('2d');\n\tif (!ctx)\n\t\tthrow new Error(\n\t\t\t'[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.',\n\t\t);\n\tcanvas.width = Math.round(width * dpr);\n\tcanvas.height = Math.round(height * dpr);\n\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\tctx.scale(dpr, dpr);\n}\n\nexport function round(roundedNum: number, digits: number) {\n\tconst factor = 10 ** digits;\n\treturn Math.round(roundedNum * factor) / factor;\n}\n\ntype HookMatchingFunc<Args extends GeneralArray> = (...args: Args) => void;\nexport type Hook<Args extends GeneralArray = []> = {\n\t(...args: Args): void;\n\tsubs: Set<HookMatchingFunc<Args>>;\n\tsubscribe(callback: HookMatchingFunc<Args>): () => void;\n\tunsubscribe(callback: HookMatchingFunc<Args>): void;\n};\n\nexport function hook<Args extends GeneralArray = []>(reverse = false): Hook<Args> {\n\tconst result: Hook<Args> = (...args: Args) => {\n\t\tconst subs = result.subs.values().toArray();\n\t\tfor (const callback of reverse ? subs.toReversed() : subs) callback(...args);\n\t};\n\tresult.subs = new Set();\n\tresult.subscribe = (callback: HookMatchingFunc<Args>) => {\n\t\tresult.subs.add(callback);\n\t\treturn () => result.unsubscribe(callback);\n\t};\n\tresult.unsubscribe = (callback: HookMatchingFunc<Args>) => {\n\t\tresult.subs.delete(callback);\n\t};\n\treturn result;\n}\n"],"mappings":"AAGA,MAAa,EAAmB,MAC/B,sEACD,EAEA,SAAgB,EAAY,EAAqC,EAAqB,CACrF,IAAM,EAAQ,SAAS,cAAc,OAAO,EAC5C,EAAM,UAAY,EAClB,EAAU,YAAY,CAAK,CAC5B,CAGA,SAAgB,EACf,EACA,EACA,EACA,EACA,EACA,EACC,CACD,EAAI,UAAU,EACd,EAAI,OAAO,EAAI,EAAQ,CAAC,EACxB,EAAI,OAAO,EAAI,EAAQ,EAAQ,CAAC,EAChC,EAAI,iBAAiB,EAAI,EAAO,EAAG,EAAI,EAAO,EAAI,CAAM,EACxD,EAAI,OAAO,EAAI,EAAO,EAAI,EAAS,CAAM,EACzC,EAAI,iBAAiB,EAAI,EAAO,EAAI,EAAQ,EAAI,EAAQ,EAAQ,EAAI,CAAM,EAC1E,EAAI,OAAO,EAAI,EAAQ,EAAI,CAAM,EACjC,EAAI,iBAAiB,EAAG,EAAI,EAAQ,EAAG,EAAI,EAAS,CAAM,EAC1D,EAAI,OAAO,EAAG,EAAI,CAAM,EACxB,EAAI,iBAAiB,EAAG,EAAG,EAAI,EAAQ,CAAC,EACxC,EAAI,UAAU,CACf,CAEA,SAAgB,EAAe,EAAsB,EAA2C,CAC/F,IAAM,EAAO,EAAK,EAAI,EAAK,MAAQ,EAC7B,EAAO,EAAK,EAAI,EAAK,OAAS,EACpC,OAAQ,EAAR,CACC,IAAK,MACJ,MAAO,CAAE,EAAG,EAAM,EAAG,EAAK,CAAE,EAE7B,IAAK,SACJ,MAAO,CAAE,EAAG,EAAM,EAAG,EAAK,EAAI,EAAK,MAAO,EAE3C,IAAK,OACJ,MAAO,CAAE,EAAG,EAAK,EAAG,EAAG,CAAK,EAE7B,IAAK,QACJ,MAAO,CAAE,EAAG,EAAK,EAAI,EAAK,MAAO,EAAG,CAAK,EAE1C,QACC,MAAO,CAAE,EAAG,EAAM,EAAG,CAAK,CAE5B,CACD,CAEA,SAAgB,EAAmB,EAA2B,EAAe,EAAgB,CAC5F,IAAM,EAAM,OAAO,kBAAoB,EACjC,EAAM,EAAO,WAAW,IAAI,EAClC,GAAI,CAAC,EACJ,MAAU,MACT,qJACD,EACD,EAAO,MAAQ,KAAK,MAAM,EAAQ,CAAG,EACrC,EAAO,OAAS,KAAK,MAAM,EAAS,CAAG,EACvC,EAAI,aAAa,EAAG,EAAG,EAAG,EAAG,EAAG,CAAC,EACjC,EAAI,MAAM,EAAK,CAAG,CACnB,CAEA,SAAgB,EAAM,EAAoB,EAAgB,CACzD,IAAM,EAAS,IAAM,EACrB,OAAO,KAAK,MAAM,EAAa,CAAM,EAAI,CAC1C,CAUA,SAAgB,EAAqC,EAAU,GAAmB,CACjF,IAAM,GAAsB,GAAG,IAAe,CAC7C,IAAM,EAAO,EAAO,KAAK,OAAO,EAAE,QAAQ,EAC1C,IAAK,IAAM,KAAY,EAAU,EAAK,WAAW,EAAI,EAAM,EAAS,GAAG,CAAI,CAC5E,EASA,MARA,GAAO,KAAO,IAAI,IAClB,EAAO,UAAa,IACnB,EAAO,KAAK,IAAI,CAAQ,MACX,EAAO,YAAY,CAAQ,GAEzC,EAAO,YAAe,GAAqC,CAC1D,EAAO,KAAK,OAAO,CAAQ,CAC5B,EACO,CACR"}
|