deploy: 53bcc28443
This commit is contained in:
rodydavis
@@ -0,0 +1,88 @@
|
||||
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/mode-2d-Cj2m1IPs.js","assets/Paired-C4wB-ooD.js","assets/float-tooltip-COGhpFke.js","assets/mode-3d-8wJSRO0B.js","assets/data-bind-mapper-D9QKwI5o.js","assets/_commonjsHelpers-Cpj98o6Y.js","assets/polished.esm-BeKV07fA.js","assets/mode-ar-e_XGWu4S.js","assets/aframe-forcegraph-component-B3vzsuem.js","assets/three.module-Unazwo7z.js","assets/mode-vr-C6IEbqHj.js"])))=>i.map(i=>d[i]);
|
||||
import{_ as d}from"./main-Dy7OaPgN.js";import{a as f,b as h,i as m}from"./lit-element-BUNo9pnf.js";import{t as v}from"./custom-element-BhZVzxrc.js";import{n as c}from"./property-MreHcJY-.js";import{r as l}from"./state-C9toMb2g.js";import{e as g}from"./query-BApjzB0v.js";import"./modulepreload-polyfill-B5Qt9EMX.js";var u=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(e,r,t,i)=>{for(var o=i>1?void 0:i?_(r,t):r,s=e.length-1,p;s>=0;s--)(p=e[s])&&(o=(i?p(r,t,o):p(o))||o);return i&&o&&u(r,t,o),o};const y="lit-force-graph";let a=class extends f{constructor(){super(...arguments),this.src="",this.mode="2D",this.renderers=new Map([["2D",()=>d(()=>import("./mode-2d-Cj2m1IPs.js"),__vite__mapDeps([0,1,2])).then(e=>e.render)],["3D",()=>d(()=>import("./mode-3d-8wJSRO0B.js"),__vite__mapDeps([3,4,5,1,6,2])).then(e=>e.render)],["AR",()=>d(()=>import("./mode-ar-e_XGWu4S.js"),__vite__mapDeps([7,8,9,4,5,1])).then(e=>e.render)],["VR",()=>d(()=>import("./mode-vr-C6IEbqHj.js"),__vite__mapDeps([10,8,9,4,5,1,6])).then(e=>e.render)]])}render(){var e,r,t,i;return h` <main
|
||||
@drop="${this.onDrop}"
|
||||
@dragover="${o=>o.preventDefault()}"
|
||||
>
|
||||
<div id="graph"></div>
|
||||
<div id="controls">
|
||||
<div>
|
||||
<label for="render-mode">Render mode</label>
|
||||
<select id="render-mode" .value=${this.mode} @change=${this.onChangeMode}>
|
||||
${Array.from(this.renderers.keys()).map(o=>h` <option value="${o}" ?selected=${this.mode===o}>${o}</option> `)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info">
|
||||
<h2 id="graph-name">${(e=this.data)==null?void 0:e.name}</h2>
|
||||
<div id="graph-description">${(r=this.data)==null?void 0:r.description}</div>
|
||||
</div>
|
||||
<div id="tooltips">
|
||||
${this.hovered?h` <div class="node-tooltip">
|
||||
${((t=this.hovered)==null?void 0:t.name)??((i=this.hovered)==null?void 0:i.id)}
|
||||
</div>`:h``}
|
||||
</div>
|
||||
</main>`}async firstUpdated(){await this.refresh(),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{this._updateGraph()})}updated(e){e.has("mode")&&this._instance&&(this.graph.innerHTML="",this._instance=void 0),(e.has("data")||e.has("mode"))&&this._updateGraph(),e.has("src")&&this.src&&this.refresh()}setData(e){this.data=e}async _updateGraph(){if(!this.data||!this.graph)return;const e=this.renderers.get(this.mode);if(e)try{const r=await e();this._instance=r({element:this.graph,data:this.data,onHover:t=>this.hovered=t,instance:this._instance})}catch(r){console.error("Failed to load or run renderer for mode",this.mode,r)}}async refresh(){const r=Array.from(this.children).find(t=>t.tagName==="SCRIPT");if(r){if(r.textContent)try{const t=JSON.parse(r.textContent);t&&this.setData(t)}catch(t){console.error("Failed to parse graph data from script tag",t)}else if(r.hasAttribute("src")){const t=r.getAttribute("src");try{const i=await fetch(t).then(o=>o.json());i&&this.setData(i)}catch(i){console.error("Failed to fetch graph data from script src",t,i)}}}else if(this.src)try{const t=await fetch(this.src).then(i=>i.json());t&&this.setData(t)}catch(t){console.error("Failed to fetch graph data from src property",this.src,t)}}onChangeMode(e){this.mode=e.target.value}onDrop(e){var t;e.preventDefault();const r=(t=e.dataTransfer)==null?void 0:t.files;if(r&&r.length>0){const i=r[0],o=new FileReader;o.onload=()=>{try{const s=JSON.parse(o.result);this.setData(s)}catch(s){console.error("Failed to parse dropped graph data",s)}},o.readAsText(i)}return!1}};a.styles=m`
|
||||
:host {
|
||||
display: block;
|
||||
background-color: var(--graph-background-color, #000011);
|
||||
color: var(--graph-foreground-color, #ffffff);
|
||||
width: var(--graph-width, 100%);
|
||||
height: var(--graph-height, 100vh);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#graph {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#controls {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
#controls div {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#tooltips {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.node-tooltip {
|
||||
background-color: var(--graph-foreground-color, #ffffff);
|
||||
color: var(--graph-background-color, #000011);
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#graph-description {
|
||||
opacity: 0.67;
|
||||
}
|
||||
`;n([g("#graph")],a.prototype,"graph",2);n([c()],a.prototype,"src",2);n([c()],a.prototype,"mode",2);n([c({type:Object})],a.prototype,"data",2);n([l()],a.prototype,"hovered",2);n([l()],a.prototype,"_instance",2);a=n([v(y)],a);export{a as LitForceGraph,y as tagName};
|
||||
Reference in New Issue
Block a user