@layoutit/polycss-vue 0.0.1

package/dist/index.js

@@ -0,0 +1,172 @@
+import{defineComponent as hn,h as Pn,provide as vn,computed as xn}from"vue";import{ref as et,shallowRef as fn,watch as yn}from"vue";import{createIsometricCamera as pn,BASE_TILE as gn}from"@layoutit/polycss-core";function Se(e){let t={cameraState:{...e}},r=new Set;function o(){for(let n of r)n()}return{getState(){return t},setState(n){t={...t,...n},o()},subscribe(n){return r.add(n),()=>r.delete(n)},updateCameraFromRef(n){return t={cameraState:{...n.state}},o(),!0},notifyAll(){o()}}}function Z(e){let t=pn({zoom:e.value.zoom,target:e.value.target,rotX:e.value.rotX,rotY:e.value.rotY,distance:e.value.distance}),r=fn(t),o=et(null),n=et(null),a=Se(t.state);yn(()=>({zoom:e.value.zoom,target:e.value.target,rotX:e.value.rotX,rotY:e.value.rotY,distance:e.value.distance}),(m,s)=>{let l={};m.zoom!==void 0&&m.zoom!==s?.zoom&&(l.zoom=m.zoom),m.target!==void 0&&m.target!==s?.target&&(l.target=m.target),m.rotX!==void 0&&m.rotX!==s?.rotX&&(l.rotX=m.rotX),m.rotY!==void 0&&m.rotY!==s?.rotY&&(l.rotY=m.rotY),m.distance!==void 0&&m.distance!==s?.distance&&(l.distance=m.distance),Object.keys(l).length>0&&(t.update(l),i(),a.updateCameraFromRef(t),a.notifyAll())});function i(){let m=o.value;if(!m)return;let s=t.state,l=gn,[c,u,y]=s.target,f=u*l,g=c*l,v=y*l,b=s.distance!==0?`translateZ(${-s.distance}px) `:"";m.style.transform=`${b}scale(${s.zoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-f}px, ${-g}px, ${-v}px)`}return{store:a,cameraRef:r,sceneElRef:o,cameraElRef:n,applyTransformDirect:i}}var $=Symbol("polycss-camera");var bn=8e3,le=hn({name:"PolyPerspectiveCamera",props:{zoom:{type:Number},target:{type:Array},rotX:{type:Number},rotY:{type:Number},distance:{type:Number},perspective:{type:Number,default:void 0},class:{type:String}},setup(e,{slots:t}){let r=xn(()=>({zoom:e.zoom,target:e.target,rotX:e.rotX,rotY:e.rotY,distance:e.distance})),{store:o,cameraRef:n,sceneElRef:a,cameraElRef:i,applyTransformDirect:m}=Z(r);return vn($,{store:o,cameraRef:n,sceneElRef:a,cameraElRef:i,applyTransformDirect:m}),()=>{let s=`${typeof e.perspective=="number"?e.perspective:bn}px`;return Pn("div",{ref:i,class:`polycss-camera${e.class?` ${e.class}`:""}`,style:{perspective:s}},t.default?.())}}});import{defineComponent as Cn,h as Mn,provide as An,computed as En}from"vue";var tt=Cn({name:"PolyOrthographicCamera",props:{zoom:{type:Number},target:{type:Array},rotX:{type:Number},rotY:{type:Number},distance:{type:Number},class:{type:String}},setup(e,{slots:t}){let r=En(()=>({zoom:e.zoom,target:e.target,rotX:e.rotX,rotY:e.rotY,distance:e.distance})),{store:o,cameraRef:n,sceneElRef:a,cameraElRef:i,applyTransformDirect:m}=Z(r);return An($,{store:o,cameraRef:n,sceneElRef:a,cameraElRef:i,applyTransformDirect:m}),()=>Mn("div",{ref:i,class:`polycss-camera${e.class?` ${e.class}`:""}`,style:{perspective:"none"}},t.default?.())}});import{defineComponent as Mo,h as dt,inject as Ao,provide as Eo,computed as Y,ref as So,watch as ft,onMounted as To,onBeforeUnmount as Lo}from"vue";import{createIsometricCamera as wo,parseHexColor as yt}from"@layoutit/polycss-core";import{computed as Sn}from"vue";import{buildSceneContext as Tn,mergePolygons as Ln}from"@layoutit/polycss-core";function fe(e,t){return Sn(()=>{let{directionalLight:r}=t.value,o=Tn({polygons:e.value});return{polygons:Ln(o.context.polygons),sceneBbox:o.context.sceneBbox}})}var nt="polycss-styles";function ye(e=typeof document<"u"?document:null){if(!e||e.getElementById(nt))return;let t=e.createElement("style");t.id=nt,t.textContent=wn,e.head.appendChild(t)}var wn=`
+/* \u2500\u2500 Scene container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.polycss-scene,
+.polycss-scene *,
+.polycss-scene *::before,
+.polycss-scene *::after {
+  box-sizing: border-box;
+}
+
+.polycss-scene {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform-style: preserve-3d;
+  perspective: none;
+  transform: var(--scene-transform);
+}
+
+.polycss-offset {
+  transform-style: preserve-3d;
+  transform: var(--offset-transform);
+}
+
+/* \u2500\u2500 Camera wrapper (perspective + interactive drag) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.polycss-camera {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  perspective: 8000px;
+  min-height: inherit;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  contain: paint;
+  isolation: isolate;
+}
+.polycss-camera * {
+  transform-style: preserve-3d;
+  position: absolute;
+}
+
+/* \u2500\u2500 Polygon leaf element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * Polygon faces render as internal leaf elements inside .polycss-scene.
+ * The element is positioned absolutely within the scene root; its
+ * transform: matrix3d(...) carries the full world-space placement.
+ */
+.polycss-scene b,
+.polycss-scene i,
+.polycss-scene s,
+.polycss-scene u {
+  position: absolute;
+  display: block;
+  transform-origin: 0 0;
+  transform-style: preserve-3d;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 0;
+  quotes: none;
+  text-decoration: none;
+  backface-visibility: hidden;
+  background-repeat: no-repeat;
+}
+
+.polycss-scene b {
+}
+
+.polycss-scene i {
+  border-style: solid;
+  border-width: 1px;
+  border-color: currentColor;
+}
+
+.polycss-scene s {
+}
+
+.polycss-scene u {
+  width: 0px;
+  height: 0px;
+  background: transparent;
+  box-sizing: content-box;
+  border: 0 solid transparent;
+}
+
+/* \u2500\u2500 Dynamic lighting cascade vars (scene root \u2192 polygons) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * Dynamic mode: PolyScene writes the directional + ambient light setup to
+ * these custom properties on the scene root. Each polygon leaf bakes its
+ * own normal directly into an inline calc() that reads these vars to
+ * resolve the Lambert dot product and per-channel tint. Sliding the light
+ * only writes these scene-root vars \u2014 no JS, no atlas redraw.
+ *
+ * Registering with @property forces the browser to parse the values as
+ * <number>s instead of opaque token streams; that makes the polygon-level
+ * calc() expressions resolve reliably across engines.
+ */
+
+@property --plx { syntax: "<number>"; inherits: true; initial-value: 0; }
+@property --ply { syntax: "<number>"; inherits: true; initial-value: 0; }
+@property --plz { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --plr { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --plg { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --plb { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pli { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --par { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pag { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pab { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --pai { syntax: "<number>"; inherits: true; initial-value: 0.4; }
+
+/* Per-polygon surface normal \u2014 set inline by the renderer. inherits:false
+   because each leaf has its own normal (no cascade). */
+@property --pnx { syntax: "<number>"; inherits: false; initial-value: 0; }
+@property --pny { syntax: "<number>"; inherits: false; initial-value: 0; }
+@property --pnz { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --psr { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --psg { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --psb { syntax: "<number>"; inherits: false; initial-value: 1; }
+
+/* Calc-driven Lambert + tint, scoped to dynamic-lighting scenes. Lives
+   here (not inline per polygon) so each leaf only carries its tiny normal
+   declarations \u2014 ~12\xD7 smaller per-polygon style payload on big meshes. */
+.polycss-scene[data-polycss-lighting="dynamic"] s {
+  background-color: rgb(
+    calc(255 * (var(--par) * var(--pai)
+         + var(--plr) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * (var(--pag) * var(--pai)
+         + var(--plg) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * (var(--pab) * var(--pai)
+         + var(--plb) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+  );
+  background-blend-mode: multiply;
+}
+
+.polycss-scene[data-polycss-lighting="dynamic"] u {
+  border-bottom-color: rgb(
+    calc(255 * var(--psr) * (var(--par) * var(--pai)
+         + var(--plr) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * var(--psg) * (var(--pag) * var(--pai)
+         + var(--plg) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+    calc(255 * var(--psb) * (var(--pab) * var(--pai)
+         + var(--plb) * var(--pli) * max(0,
+           var(--pnx) * var(--plx) +
+           var(--pny) * var(--ply) +
+           var(--pnz) * var(--plz))))
+  );
+}
+`;import{parsePureColor as Ha}from"@layoutit/polycss-core";import{inject as Rn}from"vue";var Te=Symbol("polycss/scene-context");function ot(){return Rn(Te,null)}import{computed as ie,h as He,onBeforeUnmount as On,ref as Hn,watch as Dn}from"vue";var kn=50,In=[.4,-.7,.59],_n="#ffffff",Vn=1,$n="#ffffff",Un=.4,q=4096,rt=1,Xn=.1,Yn=1,lt=q*q,zn=lt*3,we=2048,Re=16*1024*1024,Nn=.995,X=.001,Fn=.75,it=3,jn=2,se=1e-9,Bn=.45,G=new Map;function Wn(e){let t=G.get(e);return t||(t=new Promise((r,o)=>{let n=new Image;n.decoding="async",n.onload=()=>r(n),n.onerror=()=>o(new Error(`texture load failed: ${e}`)),n.src=e}),G.set(e,t),t.then(()=>{G.get(e)===t&&G.delete(e)},()=>{G.get(e)===t&&G.delete(e)})),t}function Pe(e){let t=typeof e=="string"?Number(e):e;return t===void 0||!Number.isFinite(t)?1:Math.min(Yn,Math.max(Xn,t))}function De(e,t){let r=e.toFixed(t).replace(/\.?0+$/,"");return Object.is(Number(r),-0)?"0":r}function Oe(e,t=it){return`matrix3d(${e.split(",").map(r=>{let o=Number(r.trim());return Number.isFinite(o)?De(o,t):r.trim()}).join(",")})`}function ge(e,t=jn){return`${De(e,t)}%`}function st(e){return e.reduce((t,r)=>t+r.width*r.height,0)}function Zn(e){let t=st(e);if(t<=0)return 1;let r=Math.max(1,...e.map(a=>Math.max(a.width,a.height))),o=we/r,n=Math.sqrt(Re/(t*4));return Pe(Math.min(o,n))}function Gn(e){let t=st(e),r=.5;return t<=lt?r=1:t<=zn&&(r=.75),Pe(Math.min(r,Zn(e)))}function Kn(e,t){return e.reduce((r,o)=>Math.max(r,Math.ceil(o.width*t),Math.ceil(o.height*t)),0)}function qn(e,t){return e.reduce((r,o)=>r+Math.ceil(o.width*t)*Math.ceil(o.height*t)*4,0)}function Jn(e,t){let r=Kn(e,t),o=qn(e,t),n=r>we?we/r:1,a=o>Re?Math.sqrt(Re/o):1;return Math.min(n,a)}function Qn(e,t){let r=Gn(t.pages),o=r===1?t:he(e,r);for(let n=0;n<4;n++){let a=Jn(o.pages,r);if(a>=1)break;let i=Pe(r*a*Nn);if(i>=r)break;r=i,o=he(e,r)}return{packed:o,atlasScale:r}}function eo(e,t){if(t!==void 0&&t!=="auto"){let o=Pe(t);return{packed:he(e,o),atlasScale:o}}let r=he(e,1);return Qn(e,r)}function to(e){return Math.max(rt,Math.ceil(rt/e))}function F(e,t,r=1,o=0,n=0,a=1,i=0,m=0){e.setTransform(r*t,o*t,n*t,a*t,i*t,m*t)}function J(e){let t=e.startsWith("#")?e.slice(1):e;return t.length!==6?{r:255,g:255,b:255}:{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16)}}function ct(e){if(e.screenPts.length!==8)return!1;let t=[],r=[],o=(n,a)=>{for(let i of n)if(Math.abs(i-a)<=X)return;n.push(a)};for(let n=0;n<e.screenPts.length;n+=2)o(t,e.screenPts[n]),o(r,e.screenPts[n+1]);if(t.length!==2||r.length!==2||(t.sort((n,a)=>n-a),r.sort((n,a)=>n-a),Math.abs(t[0])>X||Math.abs(r[0])>X||t[1]-t[0]<=X||r[1]-r[0]<=X))return!1;for(let n=0;n<e.screenPts.length;n+=2){let a=e.screenPts[n],i=e.screenPts[n+1],m=Math.abs(a-t[0])<=X||Math.abs(a-t[1])<=X,s=Math.abs(i-r[0])<=X||Math.abs(i-r[1])<=X;if(!m||!s)return!1}return!0}function j(e){return!e.texture&&e.polygon.vertices.length===3}function no(){if(!!!globalThis.CSS?.supports?.("border-shape","polygon(0 0, 100% 0, 0 100%) polygon(50% 50%, 50% 50%, 50% 50%)"))return!1;let t=globalThis.matchMedia;return typeof t!="function"?!0:t("(pointer: fine)").matches&&t("(hover: hover)").matches}function oo(e){let t=[],r=e.canvasW||1,o=e.canvasH||1;for(let n=0;n<e.screenPts.length;n+=2){let a=Math.max(0,Math.min(100,e.screenPts[n]/r*100)),i=Math.max(0,Math.min(100,e.screenPts[n+1]/o*100));t.push(`${ge(a)} ${ge(i)}`)}return`polygon(${t.join(", ")})`}function ro(e){let t=0,r=0,o=Math.max(1,e.screenPts.length/2);for(let s=0;s<e.screenPts.length;s+=2)t+=e.screenPts[s],r+=e.screenPts[s+1];let n=e.canvasW||1,a=e.canvasH||1,i=ge(Math.max(0,Math.min(100,t/o/n*100))),m=ge(Math.max(0,Math.min(100,r/o/a*100)));return`polygon(${Array.from({length:o},()=>`${i} ${m}`).join(", ")})`}function ao(e){return`${oo(e)} ${ro(e)}`}function lo(e,t=it){return e.map(r=>De(r,t)).join(",")}function io(e,t,r){return e.map(o=>[o[1]*t,o[0]*t,o[2]*r])}function so(e){if(e.length<3)return null;let t=e[0],r=e[1],o=e[2],n=[r[0]-t[0],r[1]-t[1],r[2]-t[2]],a=[o[0]-t[0],o[1]-t[1],o[2]-t[2]],i=[-(n[1]*a[2]-n[2]*a[1]),-(n[2]*a[0]-n[0]*a[2]),-(n[0]*a[1]-n[1]*a[0])],m=Math.hypot(i[0],i[1],i[2]);return m<=se?null:[i[0]/m,i[1]/m,i[2]/m]}function Le(e,t){return e[0]*t[0]+e[1]*t[1]+e[2]*t[2]}function co(e,t){return[e[1]*t[2]-e[2]*t[1],e[2]*t[0]-e[0]*t[2],e[0]*t[1]-e[1]*t[0]]}function uo(e,t,r){if(!j(e))return null;let o=io(e.polygon.vertices,e.tileSize,e.layerElevation),n=so(o);if(!n)return null;let a=[{a:0,b:1,c:2},{a:1,b:2,c:0},{a:2,b:0,c:1}].map(I=>{let D=o[I.a],x=o[I.b];return{...I,length:Math.hypot(x[0]-D[0],x[1]-D[1],x[2]-D[2])}}).sort((I,D)=>D.length-I.length),i=a[0].a,m=a[0].b,s=a[0].c,l=o[i],c=o[m],u=o[s],y=a[0].length;if(y<=se)return null;let f=[(c[0]-l[0])/y,(c[1]-l[1])/y,(c[2]-l[2])/y],g=[u[0]-l[0],u[1]-l[1],u[2]-l[2]],v=Le(g,f),b=[l[0]+f[0]*v,l[1]+f[1]*v,l[2]+f[2]*v],R=[b[0]-u[0],b[1]-u[1],b[2]-u[2]],H=Math.hypot(R[0],R[1],R[2]);if(H<=se)return null;let O=[R[0]/H,R[1]/H,R[2]/H];if(Le(co(f,O),n)<0){let I=m;if(m=i,i=I,l=o[i],c=o[m],y=Math.hypot(c[0]-l[0],c[1]-l[1],c[2]-l[2]),y<=se)return null;f=[(c[0]-l[0])/y,(c[1]-l[1])/y,(c[2]-l[2])/y];let D=[u[0]-l[0],u[1]-l[1],u[2]-l[2]];v=Le(D,f),b=[l[0]+f[0]*v,l[1]+f[1]*v,l[2]+f[2]*v],R=[b[0]-u[0],b[1]-u[1],b[2]-u[2]];let x=Math.hypot(R[0],R[1],R[2]);if(x<=se)return null;O=[R[0]/x,R[1]/x,R[2]/x]}let d=Math.max(0,Math.min(y,v)),C=Math.max(0,y-d),p=Bn,A=d+p,P=C+p,E=H+p*2,M=u[0]-A*f[0]-p*O[0],S=u[1]-A*f[1]-p*O[1],w=u[2]-A*f[2]-p*O[2],L=lo([f[0],f[1],f[2],0,O[0],O[1],O[2],0,n[0],n[1],n[2],0,M,S,w,1]),h=t==="dynamic",k=J(e.polygon.color??"#cccccc");return{transform:`matrix3d(${L})`,borderWidth:`0 ${P}px ${E}px ${A}px`,borderBottomColor:h?void 0:e.shadedColor,pointerEvents:r==="none"?"none":void 0,...h?{"--pnx":n[0].toFixed(4),"--pny":n[1].toFixed(4),"--pnz":n[2].toFixed(4),"--psr":(k.r/255).toFixed(4),"--psg":(k.g/255).toFixed(4),"--psb":(k.b/255).toFixed(4)}:null}}function mo({r:e,g:t,b:r}){let o=n=>Math.round(Math.max(0,Math.min(255,n))).toString(16).padStart(2,"0");return`#${o(e)}${o(t)}${o(r)}`}function fo(e,t,r,o,n){let a=J(e),i=J(r),m=J(o),s=m.r/255*n+i.r/255*t,l=m.g/255*n+i.g/255*t,c=m.b/255*n+i.b/255*t;return mo({r:a.r*s,g:a.g*l,b:a.b*c})}function yo(e,t,r,o){let n=J(t),a=J(r);return{r:a.r/255*o+n.r/255*e,g:a.g/255*o+n.g/255*e,b:a.b/255*o+n.b/255*e}}function po({r:e,g:t,b:r}){let o=n=>Math.round(Math.max(0,Math.min(1,n))*255);return`rgb(${o(e)} ${o(t)} ${o(r)})`}function go(e,t,r,o,n,a,i){Math.abs(a.r-1)<.001&&Math.abs(a.g-1)<.001&&Math.abs(a.b-1)<.001||(e.save(),F(e,i),e.globalCompositeOperation="multiply",e.fillStyle=po(a),e.fillRect(t,r,o,n),e.restore())}function ho(e,t,r,o,n,a,i){let m=t.naturalWidth||t.width||1,s=t.naturalHeight||t.height||1,l=Math.max(n/m,a/s),c=m*l,u=s*l;F(e,i),e.drawImage(t,r+(n-c)/2,o+(a-u)/2,c,u)}function ut(e,t){if(e.length<3||t.length<3)return null;let[r,o,n]=e,[a,i,m]=t,s=r[0],l=r[1],c=o[0],u=o[1],y=n[0],f=n[1],g=a[0],v=1-a[1],b=i[0],R=1-i[1],H=m[0],O=1-m[1],d=b-g,C=R-v,p=H-g,A=O-v,P=d*A-p*C;if(Math.abs(P)<=1e-9)return null;let E=c-s,M=y-s,S=u-l,w=f-l,L={a:(E*A-M*C)/P,b:(d*M-p*E)/P,c:(S*A-w*C)/P,d:(d*w-p*S)/P,e:0,f:0};return L.e=s-L.a*g-L.b*v,L.f=l-L.c*g-L.d*v,L}function mt(e){if(e.length===0)return null;let t=1/0,r=1/0,o=-1/0,n=-1/0;for(let a of e){let i=a[0],m=1-a[1];if(!Number.isFinite(i)||!Number.isFinite(m))return null;t=Math.min(t,i),o=Math.max(o,i),r=Math.min(r,m),n=Math.max(n,m)}return{minU:t,minV:r,maxU:o,maxV:n}}function Po(e,t,r,o,n,a,i,m){let s=e.vertices.map(u=>{let y=[u[1]*t,u[0]*t,u[2]*r],f=y[0]-o[0],g=y[1]-o[1],v=y[2]-o[2];return[f*n[0]+g*n[1]+v*n[2]+i,f*a[0]+g*a[1]+v*a[2]+m]}),l=ut(s,e.uvs),c=mt(e.uvs);return!l&&!c?null:{screenPts:s.flatMap(([u,y])=>[u,y]),uvAffine:l,uvSampleRect:c}}function vo(e,t){if(e.length<6||t<=0)return e;let r=0,o=0,n=e.length/2;for(let i=0;i<e.length;i+=2)r+=e[i],o+=e[i+1];r/=n,o/=n;let a=e.slice();for(let i=0;i<a.length;i+=2){let m=a[i]-r,s=a[i+1]-o,l=Math.hypot(m,s);l<=X||(a[i]+=m/l*t,a[i+1]+=s/l*t)}return a}function K(e,t){return Math.max(0,Math.min(t,e))}function at(e,t,r,o,n,a,i,m){let s=t.naturalWidth||t.width||1,l=t.naturalHeight||t.height||1,c=K(Math.min(r.minU,r.maxU)*s,s),u=K(Math.max(r.minU,r.maxU)*s,s),y=K(Math.min(r.minV,r.maxV)*l,l),f=K(Math.max(r.minV,r.maxV)*l,l),g=Math.floor(c),v=Math.floor(y),b=Math.ceil(u)-g,R=Math.ceil(f)-v;b<1&&(g=Math.floor(K((r.minU+r.maxU)/2*s,s-1)),b=1),R<1&&(v=Math.floor(K((r.minV+r.maxV)/2*l,l-1)),R=1),g=Math.max(0,Math.min(s-1,g)),v=Math.max(0,Math.min(l-1,v)),b=Math.max(1,Math.min(s-g,b)),R=Math.max(1,Math.min(l-v,R)),F(e,m),e.drawImage(t,g,v,b,R,o,n,a,i)}function xo(e){if(typeof e.toBlob=="function")return new Promise(t=>{e.toBlob(r=>{t(r?URL.createObjectURL(r):null)},"image/png")});try{return Promise.resolve(e.toDataURL("image/png"))}catch{return Promise.resolve(null)}}function Q(e,t,r={}){let{vertices:o,texture:n,uvs:a}=e;if(!o||o.length<3)return null;let i=r.tileSize??kn,m=r.layerElevation??i,s=V=>[V[1]*i,V[0]*i,V[2]*m],l=o.map(s),c=l[0],u=l[1],y=l[2],f=[u[0]-c[0],u[1]-c[1],u[2]-c[2]],g=[y[0]-c[0],y[1]-c[1],y[2]-c[2]],v=Math.hypot(f[0],f[1],f[2]);if(v===0)return null;let b=[f[0]/v,f[1]/v,f[2]/v],R=-(f[1]*g[2]-f[2]*g[1]),H=-(f[2]*g[0]-f[0]*g[2]),O=-(f[0]*g[1]-f[1]*g[0]),d=Math.hypot(R,H,O);if(d===0)return null;R/=d,H/=d,O/=d;let C=[H*b[2]-O*b[1],O*b[0]-R*b[2],R*b[1]-H*b[0]],p=l.map(V=>{let U=V[0]-c[0],me=V[1]-c[1],de=V[2]-c[2];return[U*b[0]+me*b[1]+de*b[2],U*C[0]+me*C[1]+de*C[2]]}),A=1/0,P=1/0,E=-1/0,M=-1/0;for(let[V,U]of p)V<A&&(A=V),V>E&&(E=V),U<P&&(P=U),U>M&&(M=U);let S=-A,w=-P,L=E-A,h=M-P;if(!Number.isFinite(L)||!Number.isFinite(h))return null;let k=[];for(let V=0;V<p.length;V++){let[U,me]=p[V],de=U+S,dn=me+w;k.push(de,dn)}let I=c[0]-S*b[0]-w*C[0],D=c[1]-S*b[1]-w*C[1],x=c[2]-S*b[2]-w*C[2],T=[b[0],b[1],b[2],0,C[0],C[1],C[2],0,R,H,O,0,I,D,x,1].join(","),_=r.directionalLight,We=r.ambientLight,W=_?.direction??In,Ze=_?.color??_n,rn=Math.max(0,_?.intensity??Vn),Ge=We?.color??$n,Ke=Math.max(0,We?.intensity??Un),Ee=Math.hypot(W[0],W[1],W[2])||1,an=W[0]/Ee,ln=W[1]/Ee,sn=W[2]/Ee,qe=rn*Math.max(0,R*an+H*ln+O*sn),cn=yo(qe,Ze,Ge,Ke),un=fo(e.color??"#cccccc",qe,Ze,Ge,Ke),Je=null,Qe=null;n&&a&&a.length>=3&&a.length===o.length&&(Qe=mt(a),Je=ut(p.map(([V,U])=>[V+S,U+w]),a));let mn=n&&e.textureTriangles?.length?e.textureTriangles.map(V=>Po(V,i,m,c,b,C,S,w)).filter(V=>!!V):null;return{index:t,polygon:e,texture:n,tileSize:i,layerElevation:m,matrix:T,canvasW:Math.max(1,Math.ceil(L)),canvasH:Math.max(1,Math.ceil(h)),screenPts:k,uvAffine:Je,uvSampleRect:Qe,textureTriangles:mn,normal:[R,H,O],textureTint:cn,shadedColor:un}}function he(e,t=1){let r=Array(e.length).fill(null),o=[],n=to(t),a=e.filter(s=>!!s).sort((s,l)=>l.canvasH-s.canvasH||l.canvasW-s.canvasW||s.index-l.index),i=()=>({width:n,height:n,entries:[],shelves:[]}),m=(s,l,c)=>{if(s.sealed)return null;for(let f of s.shelves)if(l.canvasH<=f.height&&f.x+l.canvasW+n<=q){let g={...l,pageIndex:c,x:f.x,y:f.y};return f.x+=l.canvasW+n,s.entries.push(g),s.width=Math.max(s.width,g.x+l.canvasW+n),g}let u=s.shelves.length===0?n:s.height;if(u+l.canvasH+n>q)return null;let y={...l,pageIndex:c,x:n,y:u};return s.shelves.push({x:n+l.canvasW+n,y:u,height:l.canvasH}),s.entries.push(y),s.width=Math.max(s.width,y.x+l.canvasW+n),s.height=Math.max(s.height,u+l.canvasH+n),y};for(let s of a){if(s.canvasW+n*2>q||s.canvasH+n*2>q){let u=o.length,y={...s,pageIndex:u,x:n,y:n};r[s.index]=y,o.push({width:s.canvasW+n*2,height:s.canvasH+n*2,entries:[y],shelves:[],sealed:!0});continue}let c=null;for(let u=0;u<o.length&&(c=m(o[u],s,u),!c);u++);if(!c){let u=i(),y=o.length;o.push(u),c=m(u,s,y)}c&&(r[s.index]=c)}return{entries:r,pages:o.map(({width:s,height:l,entries:c})=>({width:s,height:l,entries:c}))}}async function bo(e,t,r,o){let n=r.createElement("canvas");n.width=Math.max(1,Math.ceil(e.width*o)),n.height=Math.max(1,Math.ceil(e.height*o));let a=n.getContext("2d");if(!a)return{width:e.width,height:e.height,url:null};let i=Array.from(new Set(e.entries.flatMap(l=>l.texture?[l.texture]:[]))),m=new Map;await Promise.all(i.map(async l=>{m.set(l,await Wn(l))}));for(let l of e.entries){let c=l.texture?m.get(l.texture):null;a.save(),F(a,o),a.beginPath();for(let u=0;u<l.screenPts.length;u+=2){let y=l.x+l.screenPts[u],f=l.y+l.screenPts[u+1];u===0?a.moveTo(y,f):a.lineTo(y,f)}if(a.closePath(),a.clip(),!l.texture)F(a,o),a.fillStyle=t==="dynamic"?l.polygon.color??"#cccccc":l.shadedColor,a.fillRect(l.x,l.y,l.canvasW,l.canvasH);else if(c&&l.textureTriangles?.length){let u=c.naturalWidth||c.width||1,y=c.naturalHeight||c.height||1;for(let f of l.textureTriangles){let g=vo(f.screenPts,Fn);a.save(),F(a,o),a.beginPath();for(let v=0;v<g.length;v+=2){let b=l.x+g[v],R=l.y+g[v+1];v===0?a.moveTo(b,R):a.lineTo(b,R)}a.closePath(),a.clip(),f.uvAffine?(F(a,o,f.uvAffine.a/u,f.uvAffine.c/u,f.uvAffine.b/y,f.uvAffine.d/y,l.x+f.uvAffine.e,l.y+f.uvAffine.f),a.drawImage(c,0,0)):f.uvSampleRect&&at(a,c,f.uvSampleRect,l.x,l.y,l.canvasW,l.canvasH,o),a.restore()}}else if(c&&l.uvAffine){let u=c.naturalWidth||c.width||1,y=c.naturalHeight||c.height||1;F(a,o,l.uvAffine.a/u,l.uvAffine.c/u,l.uvAffine.b/y,l.uvAffine.d/y,l.x+l.uvAffine.e,l.y+l.uvAffine.f),a.drawImage(c,0,0)}else c&&l.uvSampleRect?at(a,c,l.uvSampleRect,l.x,l.y,l.canvasW,l.canvasH,o):c&&ho(a,c,l.x,l.y,l.canvasW,l.canvasH,o);l.texture&&t==="baked"&&go(a,l.x,l.y,l.canvasW,l.canvasH,l.textureTint,o),a.restore()}let s=await xo(n);return n.width=1,n.height=1,{width:e.width,height:e.height,url:s}}async function Co(e,t,r,o,n){let a=[];for(let i of e){if(n())break;a.push(await bo(i,t,r,o))}return a}function pe(e){for(let t of e)URL.revokeObjectURL(t)}function ee(e,t,r=ie(()=>{})){let o=ie(()=>t.value!=="dynamic"&&no()),n=ie(()=>{let m=e.value.map(s=>!s||s.texture?s:j(s)||t.value!=="dynamic"&&(o.value||ct(s))?null:s);return eo(m,r.value)}),a=Hn(n.value.packed.pages.map(m=>({width:m.width,height:m.height,url:null}))),i=[];return Dn(()=>[n.value,t.value],([m,s],l,c)=>{let{packed:u,atlasScale:y}=m,f=!1;pe(i),i=[],a.value=u.pages.map(g=>({width:g.width,height:g.height,url:null})),c(()=>{f=!0,pe(i),i=[]}),!(u.pages.length===0||typeof document>"u")&&Co(u.pages,s,document,y,()=>f).then(g=>{if(f){pe(g.flatMap(v=>v.url?.startsWith("blob:")?[v.url]:[]));return}i=g.flatMap(v=>v.url?.startsWith("blob:")?[v.url]:[]),a.value=g}).catch(()=>{f||(a.value=u.pages.map(g=>({width:g.width,height:g.height,url:null})))})},{immediate:!0}),On(()=>{pe(i),i=[]}),{entries:ie(()=>n.value.packed.entries),pages:a,ready:ie(()=>a.value.length===0||a.value.every(m=>!!m.url))}}function te({entry:e,page:t,textureLighting:r,className:o,style:n,domAttrs:a,pointerEvents:i="auto"}){let m=r==="dynamic",s=m&&t?.url?`url(${t.url})`:void 0,l=!m&&t?.url?`url(${t.url}) -${e.x}px -${e.y}px / ${t.width}px ${t.height}px no-repeat`:void 0,c={width:`${e.canvasW}px`,height:`${e.canvasH}px`,transform:Oe(e.matrix),background:l,backgroundImage:m&&t?.url?`url(${t.url})`:void 0,backgroundPosition:m?`-${e.x}px -${e.y}px`:void 0,backgroundSize:m&&t?`${t.width}px ${t.height}px`:void 0,...m?{"--pnx":e.normal[0].toFixed(4),"--pny":e.normal[1].toFixed(4),"--pnz":e.normal[2].toFixed(4)}:null,...m&&s?{maskImage:s,maskMode:"alpha",maskPosition:`-${e.x}px -${e.y}px`,maskSize:t?`${t.width}px ${t.height}px`:void 0,maskRepeat:"no-repeat",WebkitMaskImage:s,WebkitMaskPosition:`-${e.x}px -${e.y}px`,WebkitMaskSize:t?`${t.width}px ${t.height}px`:void 0,WebkitMaskRepeat:"no-repeat"}:null,opacity:t?.url?void 0:0,pointerEvents:i==="none"?"none":void 0,...n},u=e.polygon.data?Object.fromEntries(Object.entries(e.polygon.data).map(([f,g])=>[`data-${f}`,String(g)])):{},y=o?.trim()||void 0;return He("s",{class:y,style:c,...u,...a})}function ne({entry:e,className:t,style:r,domAttrs:o,pointerEvents:n="auto"}){let a=ct(e),i=a?null:ao(e),m=a?{width:`${e.canvasW}px`,height:`${e.canvasH}px`,transform:Oe(e.matrix),background:e.shadedColor,pointerEvents:n==="none"?"none":void 0,...r}:{width:`${e.canvasW}px`,height:`${e.canvasH}px`,transform:Oe(e.matrix),color:e.shadedColor,pointerEvents:n==="none"?"none":void 0,...r},s=e.polygon.data?Object.fromEntries(Object.entries(e.polygon.data).map(([u,y])=>[`data-${u}`,String(y)])):{},l=t?.trim()||void 0,c=u=>{let y=u.el;y&&(i?y.style.setProperty("border-shape",i):y.style.removeProperty("border-shape"))};return He(a?"b":"i",{class:l,style:m,...s,...o,onVnodeMounted:c,onVnodeUpdated:c})}function oe({entry:e,textureLighting:t,className:r,style:o,domAttrs:n,pointerEvents:a="auto"}){let i=uo(e,t,a);if(!i)return null;let m=e.polygon.data?Object.fromEntries(Object.entries(e.polygon.data).map(([l,c])=>[`data-${l}`,String(c)])):{},s=r?.trim()||void 0;return He("u",{class:s,style:{...i,...o},...m,...n})}var pt=Mo({name:"PolyScene",inheritAttrs:!1,props:{polygons:{type:Array,default:void 0},perspective:{type:Number},rotX:{type:Number},rotY:{type:Number},zoom:{type:Number},directionalLight:{type:Object,default:void 0},ambientLight:{type:Object,default:void 0},textureLighting:{type:String,default:"baked"},atlasScale:{type:[Number,String],default:void 0},autoCenter:{type:Boolean,default:!1},class:{type:String},position:{type:Array,default:void 0},scale:{type:[Number,Array],default:void 0},rotation:{type:Array,default:void 0},debugShowLabels:{type:Boolean},debugShowBackfaces:{type:Boolean}},setup(e,{slots:t,attrs:r}){let o=Ao($);if(!o)throw new Error("polycss: PolyScene must be used inside a PolyCamera.");let{store:n,sceneElRef:a}=o,i=Y(()=>({textureLighting:e.textureLighting??"baked",directionalLight:e.directionalLight,ambientLight:e.ambientLight}));Eo(Te,i);let m=n.getState().cameraState,s=So(null);ft(s,C=>{a.value=C});let l=!1;To(()=>{l||typeof document<"u"&&(ye(document),l=!0)}),ft(()=>e.debugShowBackfaces,C=>{let p=s.value;p&&p.classList.toggle("polycss-debug-show-backfaces",!!C)});let c=Y(()=>e.polygons??[]),u=Y(()=>({directionalLight:e.directionalLight})),y=fe(c,u),f=Y(()=>({"--scene-transform":wo(m).getStyle().transform})),g=Y(()=>({tileSize:50,layerElevation:50,directionalLight:e.directionalLight,textureLighting:e.textureLighting,atlasScale:e.atlasScale})),v=Y(()=>{let C=e.textureLighting==="dynamic",p=C?void 0:e.directionalLight,A=C?void 0:e.ambientLight;return y.value.polygons.map((P,E)=>Q(P,E,{tileSize:g.value.tileSize,layerElevation:g.value.layerElevation,directionalLight:p,ambientLight:A}))}),b=Y(()=>e.textureLighting??"baked"),R=Y(()=>e.atlasScale),H=ee(v,b,R),O=Y(()=>{if(e.textureLighting!=="dynamic")return null;let C=e.directionalLight?.direction??[.4,-.7,.59],p=Math.hypot(C[0],C[1],C[2])||1,A=C[0]/p,P=C[1]/p,E=C[2]/p,M=yt(e.directionalLight?.color??"#ffffff")?.rgb??[255,255,255],S=yt(e.ambientLight?.color??"#ffffff")?.rgb??[255,255,255],w=e.directionalLight?.intensity??1,L=e.ambientLight?.intensity??.4,h=k=>(k/255).toFixed(4);return{"--plx":A.toFixed(4),"--ply":P.toFixed(4),"--plz":E.toFixed(4),"--plr":h(M[0]),"--plg":h(M[1]),"--plb":h(M[2]),"--pli":w.toFixed(4),"--par":h(S[0]),"--pag":h(S[1]),"--pab":h(S[2]),"--pai":L.toFixed(4)}}),d=Y(()=>{if(!e.autoCenter)return;let C=y.value.sceneBbox,p=g.value,A=(C.min[1]+C.max[1])/2*p.tileSize,P=(C.min[0]+C.max[0])/2*p.tileSize,E=(C.min[2]+C.max[2])/2*p.layerElevation;return`translate3d(${-A}px, ${-P}px, ${-E}px)`});return Lo(()=>{}),()=>{let C=`polycss-scene${e.class?` ${e.class}`:""}`,p=g.value,A=H.entries.value.map((M,S)=>{if(M)return te({entry:M,page:H.pages.value[M.pageIndex],textureLighting:p.textureLighting??"baked"});let w=v.value[S];return!w||w.texture?null:j(w)?oe({entry:w,textureLighting:p.textureLighting??"baked"}):ne({entry:w})}),P=t.default?.()??[],E=d.value?[dt("div",{class:"polycss-offset",style:{"--offset-transform":d.value}},[...A,...P])]:[...A,...P];return dt("div",{ref:s,class:C,"data-polycss-lighting":p.textureLighting??"baked","aria-hidden":"true",style:{...f.value,...O.value??null,...r.style},...Object.fromEntries(Object.entries(r).filter(([M])=>M!=="style"&&M!=="class"))},E)}}});import{defineComponent as Do,h as Ce,computed as z,inject as ko,onMounted as Io,onBeforeUnmount as _o,ref as vt}from"vue";import{computeSceneBbox as Vo,inverseRotateVec3 as xt}from"@layoutit/polycss-core";import{ref as ve,watch as Ro,onUnmounted as Oo}from"vue";import{loadMesh as Ho}from"@layoutit/polycss-core";var gt=[],ke=[];function xe(e,t){let r=ve(gt),o=ve(!!e.value),n=ve(null),a=ve(ke),i=null;function m(){if(i){try{i.dispose()}catch{}i=null}}return Ro(e,(s,l,c)=>{if(!s){m(),r.value=gt,o.value=!1,n.value=null,a.value=ke;return}let u=!1;o.value=!0,n.value=null;let y=i;Ho(s,t).then(f=>{if(u){try{f.dispose()}catch{}return}if(y)try{y.dispose()}catch{}i=f,r.value=f.polygons,o.value=!1,n.value=null,a.value=f.warnings??ke}).catch(f=>{if(u)return;let g=f instanceof Error?f:new Error(String(f));o.value=!1,n.value=g}),c(()=>{u=!0})},{immediate:!0}),Oo(()=>{m()}),{polygons:r,loading:o,error:n,warnings:a,dispose:m}}var Ie=new WeakMap;function ht(e,t){Ie.set(e,t)}function Pt(e){Ie.delete(e)}function re(e){let t=e;for(;t;){if(t instanceof HTMLElement){let r=Ie.get(t);if(r)return r}t=t.parentElement}return null}function be(e,t,r){let o=Array.from(e.querySelectorAll("i,b,s,u"));for(let n of o){let a=n.getBoundingClientRect();if(!(a.width<=0||a.height<=0)&&t>=a.left&&t<=a.right&&r>=a.top&&r<=a.bottom)return!0}return!1}function _e(e,t,r){if(typeof document>"u")return null;let o=Array.from(document.querySelectorAll(".polycss-mesh"));for(let n of o){if(r&&!r(n))continue;let a=re(n);if(a&&be(n,e,t))return a}return null}function $o(e,t,r){let o=[];return e&&o.push(`translate3d(${e[0]}px, ${e[1]}px, ${e[2]}px)`),t!==void 0&&(typeof t=="number"?t!==1&&o.push(`scale3d(${t}, ${t}, ${t})`):o.push(`scale3d(${t[0]}, ${t[1]}, ${t[2]})`)),r&&(r[0]&&o.push(`rotateX(${r[0]}deg)`),r[1]&&o.push(`rotateY(${r[1]}deg)`),r[2]&&o.push(`rotateZ(${r[2]}deg)`)),o.length>0?o.join(" "):void 0}function Uo(e){if(e.length===0)return e;let t=Vo(e),r=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,n=(t.min[2]+t.max[2])/2;if(r===0&&o===0&&n===0)return e;let a=i=>[i[0]-r,i[1]-o,i[2]-n];return e.map(i=>({...i,vertices:i.vertices.map(a),...i.textureTriangles?.length?{textureTriangles:i.textureTriangles.map(m=>({...m,vertices:m.vertices.map(a)}))}:null}))}var N=Do({name:"PolyMesh",inheritAttrs:!1,props:{id:{type:String,default:void 0},src:{type:String,default:void 0},mtl:{type:String,default:void 0},polygons:{type:Array,default:void 0},autoCenter:{type:Boolean,default:!1},textureLighting:{type:String,default:void 0},atlasScale:{type:[Number,String],default:void 0},class:{type:String},position:{type:Array,default:void 0},scale:{type:[Number,Array],default:void 0},rotation:{type:Array,default:void 0},onClick:{type:Function,default:void 0},onContextMenu:{type:Function,default:void 0},onDoubleClick:{type:Function,default:void 0},onWheel:{type:Function,default:void 0},onPointerDown:{type:Function,default:void 0},onPointerUp:{type:Function,default:void 0},onPointerMove:{type:Function,default:void 0},onPointerOver:{type:Function,default:void 0},onPointerOut:{type:Function,default:void 0},onPointerEnter:{type:Function,default:void 0},onPointerLeave:{type:Function,default:void 0},onPointerCancel:{type:Function,default:void 0}},setup(e,{slots:t,attrs:r,expose:o}){let n=z(()=>e.src??""),a=z(()=>e.mtl?{mtlUrl:e.mtl}:void 0),i=xe(n,a.value),m=z(()=>e.src?i.polygons.value:e.polygons??[]),s=z(()=>e.autoCenter?Uo(m.value):m.value),l=!t.polygon,c=ot(),u=z(()=>e.textureLighting??c?.value.textureLighting??"baked"),y=z(()=>u.value==="dynamic"?void 0:c?.value.directionalLight),f=z(()=>u.value==="dynamic"?void 0:c?.value.ambientLight),g=z(()=>{if(u.value!=="dynamic")return null;let E=e.rotation;if(!E||E[0]===0&&E[1]===0&&E[2]===0)return null;let M=c?.value.directionalLight?.direction;if(!M)return null;let S=xt(M,E),w=Math.hypot(S[0],S[1],S[2])||1;return{"--plx":(S[0]/w).toFixed(4),"--ply":(S[1]/w).toFixed(4),"--plz":(S[2]/w).toFixed(4)}}),v=vt(e.rotation),b=z(()=>{if(!l)return[];let E=y.value,M=E&&v.value?{...E,direction:xt(E.direction,v.value)}:E;return s.value.map((S,w)=>Q(S,w,{directionalLight:M,ambientLight:f.value}))}),R=z(()=>e.atlasScale),H=ee(b,u,R),O=vt(null),d={get element(){return O.value},get id(){return e.id},getPosition:()=>e.position,getRotation:()=>e.rotation,getScale:()=>e.scale,getPolygons:()=>s.value,rebakeAtlas:()=>{v.value=e.rotation}};o(d),Io(()=>{O.value&&ht(O.value,d)}),_o(()=>{O.value&&Pt(O.value)});let C=ko($,null),p=null;function A(E,M,S){let w=[];if(typeof document<"u"&&typeof document.elementsFromPoint=="function"){let D=document.elementsFromPoint(M,S),x=new Set;for(let T of D){let _=re(T);_&&!x.has(_)&&(x.add(_),w.push({object:_}))}}let L=0,h=0,k=C?.cameraElRef.value;if(k){let D=k.getBoundingClientRect();D.width>0&&D.height>0&&(L=(M-D.left)/D.width*2-1,h=-((S-D.top)/D.height*2-1))}let I=0;return p&&(I=Math.hypot(M-p.x,S-p.y)),{object:w[0]?.object??d,eventObject:d,intersections:w,pointer:{x:L,y:h},delta:I,nativeEvent:E,stopPropagation:()=>E.stopPropagation()}}function P(E,M,S,w){E&&E(A(M,S,w))}return()=>{let M={transform:$o(e.position,e.scale,e.rotation),...g.value??void 0,...r.style},S=Object.fromEntries(Object.entries(r).filter(([x])=>x!=="style"&&x!=="class")),w=`polycss-mesh${e.class?` ${e.class}`:""}`,L={};e.onClick&&(L.onClick=x=>{let T=x;P(e.onClick,T,T.clientX,T.clientY)}),e.onContextMenu&&(L.onContextmenu=x=>{let T=x;P(e.onContextMenu,T,T.clientX,T.clientY)}),e.onDoubleClick&&(L.onDblclick=x=>{let T=x;P(e.onDoubleClick,T,T.clientX,T.clientY)}),e.onWheel&&(L.onWheel=x=>{let T=x;P(e.onWheel,T,T.clientX,T.clientY)}),L.onPointerdown=x=>{let T=x;p={x:T.clientX,y:T.clientY},P(e.onPointerDown,T,T.clientX,T.clientY)},L.onPointerup=x=>{let T=x;P(e.onPointerUp,T,T.clientX,T.clientY),p=null},e.onPointerMove&&(L.onPointermove=x=>{let T=x;P(e.onPointerMove,T,T.clientX,T.clientY)}),(e.onPointerOver||e.onPointerEnter)&&(L.onPointerenter=x=>{let T=x;P(e.onPointerOver,T,T.clientX,T.clientY),P(e.onPointerEnter,T,T.clientX,T.clientY)}),(e.onPointerOut||e.onPointerLeave)&&(L.onPointerleave=x=>{let T=x;P(e.onPointerOut,T,T.clientX,T.clientY),P(e.onPointerLeave,T,T.clientX,T.clientY)}),e.onPointerCancel&&(L.onPointercancel=x=>{let T=x;P(e.onPointerCancel,T,T.clientX,T.clientY),p=null});let h=e.id?{"data-poly-mesh-id":e.id}:{};if(e.src&&i.loading.value&&i.polygons.value.length===0)return Ce("div",{ref:O,class:`polycss-mesh polycss-mesh-loading${e.class?` ${e.class}`:""}`,style:M,...h,...L,...S},t.fallback?.()??[]);if(e.src&&i.error.value&&i.polygons.value.length===0)return Ce("div",{ref:O,class:`polycss-mesh polycss-mesh-error${e.class?` ${e.class}`:""}`,style:M,...h,...L,...S},t.error?.({error:i.error.value})??[]);let k=s.value,I=t.polygon?k.map((x,T)=>Ce("template",{key:T},t.polygon?.({polygon:x,index:T}))):H.entries.value.map((x,T)=>{if(x)return te({entry:x,page:H.pages.value[x.pageIndex],textureLighting:u.value});let _=b.value[T];return!_||_.texture?null:j(_)?oe({entry:_,textureLighting:u.value}):ne({entry:_})}),D=t.default?.()??[];return Ce("div",{ref:O,class:w,style:M,...h,...L,...S},[...I,...D])}}});import{computed as bt}from"vue";function Xo(e){return typeof e=="function"?bt(()=>{let{texture:t,key:r}=e();return{texture:t,key:r}}):bt(()=>({texture:e.texture,key:e.key}))}import{computed as ae,defineComponent as Yo,h as Ct}from"vue";function zo(e){if(e.length!==4)return null;let t=[...new Set(e.map(n=>n[0]))].sort((n,a)=>n-a),r=[...new Set(e.map(n=>n[1]))].sort((n,a)=>n-a);if(t.length!==2||r.length!==2)return null;let o=new Set([`${t[0]},${r[0]}`,`${t[0]},${r[1]}`,`${t[1]},${r[0]}`,`${t[1]},${r[1]}`]);for(let n of e)if(!o.has(`${n[0]},${n[1]}`))return null;return{u0:t[0],u1:t[1],v0:r[0],v1:r[1]}}function No({plan:e,material:t,uvRect:r,className:o,style:n,domAttrs:a,pointerEvents:i="auto"}){let{u0:m,u1:s,v0:l,v1:c}=r,u=s-m,y=c-l,f=e.canvasW/u,g=e.canvasH/y,v=Math.max(l,c),b=m*f,R=(1-v)*g,H={width:`${e.canvasW}px`,height:`${e.canvasH}px`,transform:`matrix3d(${e.matrix})`,backgroundImage:`url(${t.texture})`,backgroundSize:`${f}px ${g}px`,backgroundPosition:`-${b}px -${R}px`,pointerEvents:i==="none"?"none":void 0,...n},O=e.polygon.data?Object.fromEntries(Object.entries(e.polygon.data).map(([C,p])=>[`data-${C}`,String(p)])):{},d=o?.trim()||void 0;return Ct("i",{class:d,style:H,...O,...a})}var Mt=Yo({name:"Poly",inheritAttrs:!1,props:{vertices:{type:Array,required:!0},color:{type:String},texture:{type:String},uvs:{type:Array,default:void 0},data:{type:Object,default:void 0},material:{type:Object,default:void 0},position:{type:Array,default:void 0},scale:{type:[Number,Array],default:void 0},rotation:{type:Array,default:void 0},textureLighting:{type:String,default:void 0},atlasScale:{type:[Number,String],default:void 0},context:{type:Object,default:void 0},baseColor:{type:String},pointerEvents:{type:String,default:"auto"}},setup(e,{attrs:t}){let r=ae(()=>e.textureLighting??e.context?.textureLighting??"baked"),o=ae(()=>e.atlasScale??e.context?.atlasScale),n=ae(()=>e.material?.texture??e.texture),a=ae(()=>e.material&&e.uvs?zo(e.uvs):null),i=ae(()=>{let l=e.context?.tileSize??50;return Q({vertices:e.vertices,color:e.baseColor??e.color,texture:n.value,uvs:e.uvs,data:e.data},0,{tileSize:l,layerElevation:e.context?.layerElevation??l,directionalLight:e.context?.directionalLight})}),m=ae(()=>a.value?[]:[i.value]),s=ee(m,r,o);return()=>{let l=i.value,c=s.entries.value[0],u=[];e.position&&u.push(`translate3d(${e.position[0]}px, ${e.position[1]}px, ${e.position[2]}px)`),e.scale!==void 0&&(typeof e.scale=="number"?e.scale!==1&&u.push(`scale3d(${e.scale}, ${e.scale}, ${e.scale})`):u.push(`scale3d(${e.scale[0]}, ${e.scale[1]}, ${e.scale[2]})`)),e.rotation&&(e.rotation[0]&&u.push(`rotateX(${e.rotation[0]}deg)`),e.rotation[1]&&u.push(`rotateY(${e.rotation[1]}deg)`),e.rotation[2]&&u.push(`rotateZ(${e.rotation[2]}deg)`));let y=u.length>0?u.join(" "):void 0,f={};if(e.data)for(let[R,H]of Object.entries(e.data))f[`data-${R}`]=String(H);let g={...t,...f},v=Object.fromEntries(Object.entries(g).filter(([R])=>R!=="class"&&R!=="style")),b;return a.value&&e.material&&l?b=No({plan:l,material:e.material,uvRect:a.value,className:g.class??void 0,style:g.style,domAttrs:v,pointerEvents:e.pointerEvents??"auto"}):c?b=te({entry:c,page:s.pages.value[c.pageIndex],textureLighting:r.value,className:g.class??void 0,style:g.style,domAttrs:v,pointerEvents:e.pointerEvents??"auto"}):l&&!l.texture&&(b=j(l)?oe({entry:l,textureLighting:r.value,className:g.class??void 0,style:g.style,domAttrs:v,pointerEvents:e.pointerEvents??"auto"}):ne({entry:l,className:g.class??void 0,style:g.style,domAttrs:v,pointerEvents:e.pointerEvents??"auto"})),b?y?Ct("div",{class:"polycss-poly-wrapper",style:{position:"absolute",transformStyle:"preserve-3d",transform:y}},[b]):b:null}}});import{defineComponent as Fo,inject as jo,onMounted as Bo,onBeforeUnmount as Wo,watch as Ve,ref as Zo}from"vue";import{BASE_TILE as At}from"@layoutit/polycss-core";var Go=150,Et=4,Ko=513e-6,qo=10,Jo=3,St=16.67,Qo=50,Tt=.1,Lt=10,wt=0,Rt=5e3,er=.3,tr=.05;function nr(e){return e===!0?-1:e===void 0||e===!1?1:e}function or(e,t,r,o,n){let a=nr(n),i=e/Et*a,m=t/Et*a;return{rotX:Math.max(0,Math.min(100,r-m)),rotY:((o-i)%360+360)%360}}function Ot(e,t,r,o,n){let a=Math.max(.01,r),i=Math.max(.1,Math.cos(o*Math.PI/180)),m=-e/(a*At),s=-t/(a*At*i),l=-n*Math.PI/180,c=Math.cos(l),u=Math.sin(l);return{dWorldX:s*c-m*u,dWorldY:s*u+m*c}}var Ht=Fo({name:"PolyOrbitControls",props:{drag:{type:Boolean,default:!0},wheel:{type:Boolean,default:!0},dolly:{type:Boolean,default:!1},invert:{type:[Boolean,Number],default:!1},minZoom:{type:Number,default:Tt},maxZoom:{type:Number,default:Lt},minDistance:{type:Number,default:wt},maxDistance:{type:Number,default:Rt},animate:{type:[Boolean,Object],default:!1}},emits:{change:e=>!0,"interaction-start":e=>!0,"interaction-end":e=>!0},setup(e,{emit:t}){let r=jo($,null);if(!r)return typeof console<"u"&&console.warn("[polycss] <PolyOrbitControls> must be used inside <PolyCamera>."),()=>null;let{store:o,cameraRef:n,cameraElRef:a,applyTransformDirect:i}=r,m=()=>({rotX:n.value.state.rotX,rotY:n.value.state.rotY,zoom:n.value.state.zoom,target:n.value.state.target,distance:n.value.state.distance}),s=()=>{t("change",m())},l=()=>{t("interaction-start",m())},c=()=>{t("interaction-end",m())},u=null,y={x:0,y:0},f=Zo(!1),g=null,v=null,b=null;function R(){let d=a.value;if(!d)return;let C=!1,p={x:0,y:0},A=h=>{if(e.drag&&u===null&&h.isPrimary!==!1){h.preventDefault(),u=h.pointerId,y={x:h.clientX,y:h.clientY},d.style.cursor="grabbing";try{h.target.setPointerCapture(h.pointerId)}catch{}e.animate&&e.animate.pauseOnInteraction!==!1&&(f.value=!0),l()}},P=h=>{if(u===null||h.pointerId!==u||!e.drag)return;h.preventDefault();let k=h.clientX-y.x,I=h.clientY-y.y;y={x:h.clientX,y:h.clientY};let D=n.value,x=D.state;if(h.shiftKey){let{dWorldX:T,dWorldY:_}=Ot(k,I,x.zoom,x.rotX,x.rotY);D.update({target:[x.target[0]+T,x.target[1]+_,x.target[2]]})}else{let{rotX:T,rotY:_}=or(k,I,x.rotX,x.rotY,e.invert);D.update({rotX:T,rotY:_})}i(),o.updateCameraFromRef(D),s()},E=h=>{if(u===h.pointerId){u=null,d.style.cursor=e.drag?"grab":"";try{h.target.releasePointerCapture(h.pointerId)}catch{}f.value=!1,c()}},M=h=>{h.preventDefault()},S=h=>{h.button===2&&(C=!0,p={x:h.clientX,y:h.clientY})},w=h=>{if(!C||!e.drag)return;let k=h.clientX-p.x,I=h.clientY-p.y;p={x:h.clientX,y:h.clientY};let D=n.value,x=D.state,{dWorldX:T,dWorldY:_}=Ot(k,I,x.zoom,x.rotX,x.rotY);D.update({target:[x.target[0]+T,x.target[1]+_,x.target[2]]}),i(),o.updateCameraFromRef(D),s()},L=h=>{h.button===2&&C&&(C=!1,c())};d.style.cursor="grab",d.style.touchAction="none",d.style.userSelect="none",d.addEventListener("pointerdown",A),d.addEventListener("pointermove",P),d.addEventListener("pointerup",E),d.addEventListener("pointercancel",E),d.addEventListener("contextmenu",M),d.addEventListener("mousedown",S),d.addEventListener("mousemove",w),d.addEventListener("mouseup",L),g=()=>{d.removeEventListener("pointerdown",A),d.removeEventListener("pointermove",P),d.removeEventListener("pointerup",E),d.removeEventListener("pointercancel",E),d.removeEventListener("contextmenu",M),d.removeEventListener("mousedown",S),d.removeEventListener("mousemove",w),d.removeEventListener("mouseup",L),d.style.cursor="",d.style.touchAction="",d.style.userSelect=""}}function H(){let d=a.value;if(!d)return;let C=!1,p=null,A=P=>{if(!e.wheel)return;P.preventDefault();let E=P.deltaMode===1?16:P.deltaMode===2?100:1,M=P.deltaY*E;P.ctrlKey?M*=qo:M*=Jo;let S=n.value;if(e.dolly){let w=e.minDistance??wt,L=e.maxDistance??Rt,h=Math.max(w,Math.min(L,S.state.distance+M*tr));S.update({distance:h})}else{let w=Math.exp(-M*Ko),L=e.minZoom??Tt,h=e.maxZoom??Lt,k=Math.max(L,Math.min(h,S.state.zoom*w));S.update({zoom:k})}i(),o.updateCameraFromRef(S),C||(C=!0,l()),s(),p!==null&&clearTimeout(p),p=setTimeout(()=>{p=null,C=!1,c()},Go)};d.addEventListener("wheel",A,{passive:!1}),v=()=>{d.removeEventListener("wheel",A),p!==null&&clearTimeout(p)}}function O(){let d=null,C=!1,p=0,A=P=>{if(C)return;let E=e.animate;if(!E){d=requestAnimationFrame(A);return}if(f.value)p=P;else{let M=Math.min(Qo,p?P-p:St);p=P;let w=(E.speed??er)*(M/St),L=n.value,h=L.state;if(E.axis==="x"){let k=((h.rotX+w)%360+360)%360;L.update({rotX:k})}else{let k=((h.rotY+w)%360+360)%360;L.update({rotY:k})}i(),o.updateCameraFromRef(L),s()}d=requestAnimationFrame(A)};d=requestAnimationFrame(A),b=()=>{C=!0,d!==null&&cancelAnimationFrame(d),b=null}}return Bo(()=>{e.drag&&R(),e.wheel&&H(),e.animate&&O()}),Wo(()=>{g?.(),v?.(),b?.(),g=null,v=null}),Ve(()=>e.drag,d=>{d&&!g&&R(),!d&&g&&(g(),g=null)}),Ve(()=>e.wheel,d=>{d&&!v&&H(),!d&&v&&(v(),v=null)}),Ve(()=>!!e.animate,d=>{d&&!b&&O(),!d&&b&&b()}),()=>null}});import{defineComponent as rr,inject as ar,onMounted as lr,onBeforeUnmount as ir,watch as $e,ref as sr}from"vue";import{BASE_TILE as Dt}from"@layoutit/polycss-core";var cr=150,kt=4,ur=513e-6,mr=10,dr=3,It=16.67,fr=50,_t=.1,Vt=10,$t=0,Ut=5e3,yr=.3,pr=.05;function gr(e){return e===!0?-1:e===void 0||e===!1?1:e}function Xt(e,t,r,o,n){let a=gr(n),i=e/kt*a,m=t/kt*a;return{rotX:Math.max(0,Math.min(100,r-m)),rotY:((o-i)%360+360)%360}}function hr(e,t,r,o,n){let a=Math.max(.01,r),i=Math.max(.1,Math.cos(o*Math.PI/180)),m=-e/(a*Dt),s=-t/(a*Dt*i),l=-n*Math.PI/180,c=Math.cos(l),u=Math.sin(l);return{dWorldX:s*c-m*u,dWorldY:s*u+m*c}}var Yt=rr({name:"PolyMapControls",props:{drag:{type:Boolean,default:!0},wheel:{type:Boolean,default:!0},dolly:{type:Boolean,default:!1},invert:{type:[Boolean,Number],default:!1},minZoom:{type:Number,default:_t},maxZoom:{type:Number,default:Vt},minDistance:{type:Number,default:$t},maxDistance:{type:Number,default:Ut},animate:{type:[Boolean,Object],default:!1}},emits:{change:e=>!0,"interaction-start":e=>!0,"interaction-end":e=>!0},setup(e,{emit:t}){let r=ar($,null);if(!r)return typeof console<"u"&&console.warn("[polycss] <PolyMapControls> must be used inside <PolyCamera>."),()=>null;let{store:o,cameraRef:n,cameraElRef:a,applyTransformDirect:i}=r,m=()=>({rotX:n.value.state.rotX,rotY:n.value.state.rotY,zoom:n.value.state.zoom,target:n.value.state.target,distance:n.value.state.distance}),s=()=>{t("change",m())},l=()=>{t("interaction-start",m())},c=()=>{t("interaction-end",m())},u=null,y={x:0,y:0},f=sr(!1),g=null,v=null,b=null;function R(){let d=a.value;if(!d)return;let C=!1,p={x:0,y:0},A=h=>{if(e.drag&&u===null&&h.isPrimary!==!1){h.preventDefault(),u=h.pointerId,y={x:h.clientX,y:h.clientY},d.style.cursor="grabbing";try{h.target.setPointerCapture(h.pointerId)}catch{}e.animate&&e.animate.pauseOnInteraction!==!1&&(f.value=!0),l()}},P=h=>{if(u===null||h.pointerId!==u||!e.drag)return;h.preventDefault();let k=h.clientX-y.x,I=h.clientY-y.y;y={x:h.clientX,y:h.clientY};let D=n.value,x=D.state;if(h.shiftKey){let{rotX:T,rotY:_}=Xt(k,I,x.rotX,x.rotY,e.invert);D.update({rotX:T,rotY:_})}else{let{dWorldX:T,dWorldY:_}=hr(k,I,x.zoom,x.rotX,x.rotY);D.update({target:[x.target[0]+T,x.target[1]+_,x.target[2]]})}i(),o.updateCameraFromRef(D),s()},E=h=>{if(u===h.pointerId){u=null,d.style.cursor=e.drag?"grab":"";try{h.target.releasePointerCapture(h.pointerId)}catch{}f.value=!1,c()}},M=h=>{h.preventDefault()},S=h=>{h.button===2&&(C=!0,p={x:h.clientX,y:h.clientY})},w=h=>{if(!C||!e.drag)return;let k=h.clientX-p.x,I=h.clientY-p.y;p={x:h.clientX,y:h.clientY};let D=n.value,x=D.state,{rotX:T,rotY:_}=Xt(k,I,x.rotX,x.rotY,e.invert);D.update({rotX:T,rotY:_}),i(),o.updateCameraFromRef(D),s()},L=h=>{h.button===2&&C&&(C=!1,c())};d.style.cursor="grab",d.style.touchAction="none",d.style.userSelect="none",d.addEventListener("pointerdown",A),d.addEventListener("pointermove",P),d.addEventListener("pointerup",E),d.addEventListener("pointercancel",E),d.addEventListener("contextmenu",M),d.addEventListener("mousedown",S),d.addEventListener("mousemove",w),d.addEventListener("mouseup",L),g=()=>{d.removeEventListener("pointerdown",A),d.removeEventListener("pointermove",P),d.removeEventListener("pointerup",E),d.removeEventListener("pointercancel",E),d.removeEventListener("contextmenu",M),d.removeEventListener("mousedown",S),d.removeEventListener("mousemove",w),d.removeEventListener("mouseup",L),d.style.cursor="",d.style.touchAction="",d.style.userSelect=""}}function H(){let d=a.value;if(!d)return;let C=!1,p=null,A=P=>{if(!e.wheel)return;P.preventDefault();let E=P.deltaMode===1?16:P.deltaMode===2?100:1,M=P.deltaY*E;P.ctrlKey?M*=mr:M*=dr;let S=n.value;if(e.dolly){let w=e.minDistance??$t,L=e.maxDistance??Ut,h=Math.max(w,Math.min(L,S.state.distance+M*pr));S.update({distance:h})}else{let w=Math.exp(-M*ur),L=e.minZoom??_t,h=e.maxZoom??Vt,k=Math.max(L,Math.min(h,S.state.zoom*w));S.update({zoom:k})}i(),o.updateCameraFromRef(S),C||(C=!0,l()),s(),p!==null&&clearTimeout(p),p=setTimeout(()=>{p=null,C=!1,c()},cr)};d.addEventListener("wheel",A,{passive:!1}),v=()=>{d.removeEventListener("wheel",A),p!==null&&clearTimeout(p)}}function O(){let d=null,C=!1,p=0,A=P=>{if(C)return;let E=e.animate;if(!E){d=requestAnimationFrame(A);return}if(f.value)p=P;else{let M=Math.min(fr,p?P-p:It);p=P;let w=(E.speed??yr)*(M/It),L=n.value,h=L.state;if(E.axis==="x"){let k=((h.rotX+w)%360+360)%360;L.update({rotX:k})}else{let k=((h.rotY+w)%360+360)%360;L.update({rotY:k})}i(),o.updateCameraFromRef(L),s()}d=requestAnimationFrame(A)};d=requestAnimationFrame(A),b=()=>{C=!0,d!==null&&cancelAnimationFrame(d),b=null}}return lr(()=>{e.drag&&R(),e.wheel&&H(),e.animate&&O()}),ir(()=>{g?.(),v?.(),b?.(),g=null,v=null}),$e(()=>e.drag,d=>{d&&!g&&R(),!d&&g&&(g(),g=null)}),$e(()=>e.wheel,d=>{d&&!v&&H(),!d&&v&&(v(),v=null)}),$e(()=>!!e.animate,d=>{d&&!b&&O(),!d&&b&&b()}),()=>null}});import{defineComponent as Pr,h as Ue,inject as vr,onBeforeUnmount as xr,onMounted as zt,ref as Me,computed as ce}from"vue";import{arrowPolygons as br,ringPolygons as Cr}from"@layoutit/polycss-core";var Xe="#ff3653",Ye="#8adb00",ze="#2c8fff",Mr=.6,Ar=.8,Er=1,Ne=50,Nt=60,Sr=.6,Tr=.0125,Lr=.15,wr=.04,Rr=1,Or=.012,Hr=64,Dr=1e-4,Ft={0:1,1:0,2:2},jt=[{cssAxis:0,sign:1,key:"x",color:Xe},{cssAxis:0,sign:-1,key:"-x",color:Xe},{cssAxis:1,sign:1,key:"y",color:Ye},{cssAxis:1,sign:-1,key:"-y",color:Ye},{cssAxis:2,sign:1,key:"z",color:ze},{cssAxis:2,sign:-1,key:"-z",color:ze}],Bt=[{cssAxis:0,key:"x",color:Xe},{cssAxis:1,key:"y",color:Ye},{cssAxis:2,key:"z",color:ze}];function Wt(e,t){let r=/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(e);if(!r)return e;let o=parseInt(r[1],16),n=parseInt(r[2],16),a=parseInt(r[3],16);return`rgba(${o}, ${n}, ${a}, ${t})`}function Kt(e,t){return!t||t<=0?e:Math.round(e/t)*t}function kr(e){return e.replace("-","")[0]}function Ir(e){if(e.length===0)return Nt;let t=1/0,r=1/0,o=1/0,n=-1/0,a=-1/0,i=-1/0;for(let m of e)for(let s of m.vertices)s[0]<t&&(t=s[0]),s[0]>n&&(n=s[0]),s[1]<r&&(r=s[1]),s[1]>a&&(a=s[1]),s[2]<o&&(o=s[2]),s[2]>i&&(i=s[2]);return Number.isFinite(t)?Math.max(n-t,a-r,i-o)*Ne*Sr:Nt}function Zt(e){let t=e.shaftLengthCss,r=[0,0,0];r[e.cssAxis]=e.sign;let o=e.wrapper.ownerDocument.createElement("div");o.style.position="absolute",o.style.left="0",o.style.top="0",o.style.width="0",o.style.height="0",o.style.transform=`translate3d(${r[0]*t}px, ${r[1]*t}px, ${r[2]*t}px)`,e.wrapper.appendChild(o);let n=e.wrapper.getBoundingClientRect(),a=o.getBoundingClientRect();e.wrapper.removeChild(o);let i=(a.left-n.left)/t,m=(a.top-n.top)/t,s=i*i+m*m;if(s<Dr)return;let l=e.target.getPosition()??[0,0,0];e.onMouseDown?.(),e.onDraggingChanged?.(!0);let c=y=>{let f=y.clientX-e.startClientX,g=y.clientY-e.startClientY,v=(f*i+g*m)/s;v=Kt(v,e.translationSnap);let b=[l[0]+v*r[0],l[1]+v*r[1],l[2]+v*r[2]];e.onObjectChange?.({object:e.target,position:b}),e.onChange?.()},u=()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",u),window.removeEventListener("pointercancel",u);let y=f=>{f.stopPropagation(),f.stopImmediatePropagation()};window.addEventListener("click",y,{capture:!0,once:!0}),setTimeout(()=>window.removeEventListener("click",y,!0),0),e.onMouseUp?.(),e.onDraggingChanged?.(!1)};window.addEventListener("pointermove",c),window.addEventListener("pointerup",u),window.addEventListener("pointercancel",u)}function Gt(e){let t=e.wrapper.getBoundingClientRect(),r=t.left,o=t.top,n=Math.atan2(e.startClientY-o,e.startClientX-r),a=0,i=e.target.getRotation()??[0,0,0];e.onMouseDown?.(),e.onDraggingChanged?.(!0);let m=l=>{let c=Math.atan2(l.clientY-o,l.clientX-r),u=c-n;u>Math.PI?u-=2*Math.PI:u<-Math.PI&&(u+=2*Math.PI),a+=u,n=c;let y=a*180/Math.PI;y=Kt(y,e.rotationSnap);let f=[i[0],i[1],i[2]];f[e.cssAxis]=i[e.cssAxis]+y,e.onObjectChange?.({object:e.target,rotation:f}),e.onChange?.()},s=()=>{window.removeEventListener("pointermove",m),window.removeEventListener("pointerup",s),window.removeEventListener("pointercancel",s);let l=c=>{c.stopPropagation(),c.stopImmediatePropagation()};window.addEventListener("click",l,{capture:!0,once:!0}),setTimeout(()=>window.removeEventListener("click",l,!0),0),e.onMouseUp?.(),e.onDraggingChanged?.(!1),e.target.rebakeAtlas()};window.addEventListener("pointermove",m),window.addEventListener("pointerup",s),window.addEventListener("pointercancel",s)}function _r(e){return!!e&&typeof e=="object"&&"value"in e}function Vr(e){return e?_r(e)?e.value??null:e:null}var qt=Pr({name:"PolyTransformControls",props:{object:{type:null,default:null},mode:{type:String,default:"translate"},space:{type:String,default:"world"},size:{type:Number,default:1},showX:{type:Boolean,default:!0},showY:{type:Boolean,default:!0},showZ:{type:Boolean,default:!0},translationSnap:{type:Number,default:null},rotationSnap:{type:Number,default:null},enabled:{type:Boolean,default:!0}},emits:{change:()=>!0,objectChange:e=>!0,mouseDown:()=>!0,mouseUp:()=>!0,draggingChanged:e=>!0},setup(e,{emit:t}){let r=Me(null),o=Me(null),n=Me(new Map),a=ce(()=>Vr(e.object)),i=Me(0);zt(()=>{i.value++});let m=ce(()=>(i.value,Ir(a.value?.getPolygons()??[]))),s=ce(()=>m.value*e.size);function l(p){return o.value===p?Er:r.value===p?Ar:Mr}function c(){t("change")}function u(p){t("objectChange",p)}function y(p){t("draggingChanged",p)}function f(){t("mouseDown")}function g(){t("mouseUp")}let v=vr($,void 0),b=null;zt(()=>{let p=v?.cameraElRef.value;if(!p)return;let A=P=>{let E=a.value;if(!E||!e.enabled||P.target?.closest(".polycss-transform-gizmo"))return;let S={x:e.showX,y:e.showY,z:e.showZ},w=e.mode==="translate"?jt:Bt;for(let L of w){let h=L.key.replace("-","")[0];if(!S[h])continue;let k=document.querySelector(`.polycss-transform-${e.mode==="translate"?"arrow":"ring"}--${L.key}`);if(!k||!be(k,P.clientX,P.clientY))continue;P.preventDefault(),P.stopPropagation();let I=k.closest("[data-poly-transform-controls]");if(!I)return;if(o.value=L.key,e.mode==="translate"){let D=L;Zt({cssAxis:D.cssAxis,sign:D.sign,shaftLengthCss:s.value,wrapper:I,target:E,startClientX:P.clientX,startClientY:P.clientY,translationSnap:e.translationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:x=>{x||(o.value=null),y(x)}})}else Gt({cssAxis:L.cssAxis,wrapper:I,target:E,startClientX:P.clientX,startClientY:P.clientY,rotationSnap:e.rotationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:D=>{D||(o.value=null),y(D)}});return}};p.addEventListener("pointerdown",A),b=()=>p.removeEventListener("pointerdown",A)}),xr(()=>{b?.()});let R=ce(()=>{if(e.mode!=="translate")return[];i.value;let A=s.value/Ne;return jt.filter(P=>({x:e.showX,y:e.showY,z:e.showZ})[kr(P.key)]).map(P=>{let E=l(P.key);return{spec:P,polygons:br({axis:Ft[P.cssAxis],sign:P.sign,shaftLength:A,shaftHalfThickness:A*Tr,headLength:A*Lr,headHalfThickness:A*wr,color:Wt(P.color,E)})}})}),H=ce(()=>{if(e.mode!=="rotate")return[];i.value;let A=s.value*Rr/Ne;return Bt.filter(P=>({x:e.showX,y:e.showY,z:e.showZ})[P.key]).map(P=>{let E=l(P.key);return{spec:P,polygons:Cr({axis:Ft[P.cssAxis],radius:A,halfThickness:A*Or,segments:Hr,color:Wt(P.color,E)})}})});function O(p){return A=>{if(!e.enabled)return;let P=a.value;if(!P)return;A.stopPropagation();let M=A.eventObject.element?.closest("[data-poly-transform-controls]");M&&(o.value=p.key,Zt({cssAxis:p.cssAxis,sign:p.sign,shaftLengthCss:s.value,wrapper:M,target:P,startClientX:A.nativeEvent.clientX,startClientY:A.nativeEvent.clientY,translationSnap:e.translationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:S=>{S||(o.value=null),y(S)}}))}}function d(p){return A=>{if(!e.enabled)return;let P=a.value;if(!P)return;A.stopPropagation();let M=A.eventObject.element?.closest("[data-poly-transform-controls]");M&&(o.value=p.key,Gt({cssAxis:p.cssAxis,wrapper:M,target:P,startClientX:A.nativeEvent.clientX,startClientY:A.nativeEvent.clientY,rotationSnap:e.rotationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:S=>{S||(o.value=null),y(S)}}))}}function C(p){return{onPointerOver:()=>{r.value=p},onPointerOut:()=>{r.value===p&&(r.value=null)}}}return()=>{let p=a.value;if(!p)return null;let A=p.getPosition()??[0,0,0],P={position:"absolute",transformStyle:"preserve-3d",transform:`translate3d(${A[0]}px, ${A[1]}px, ${A[2]}px)`,zIndex:1e3},E=e.mode==="translate"?R.value.map(({spec:M,polygons:S})=>Ue(N,{key:M.key,polygons:S,class:`polycss-transform-gizmo polycss-transform-arrow polycss-transform-arrow--${M.key}`,textureLighting:"baked",onPointerDown:O(M),...C(M.key)})):H.value.map(({spec:M,polygons:S})=>Ue(N,{key:M.key,polygons:S,class:`polycss-transform-gizmo polycss-transform-ring polycss-transform-ring--${M.key}`,textureLighting:"baked",onPointerDown:d(M),...C(M.key)}));return Ue("div",{class:"polycss-transform-controls","data-poly-transform-controls":"","data-poly-mode":e.mode,"data-poly-space":e.space,style:P},E)}}});import{defineComponent as $r,h as Ur,inject as Fe,onBeforeUnmount as Xr,onMounted as Yr,provide as zr,reactive as Nr,ref as Fr,computed as jr}from"vue";var ue=Symbol("polycss.selection"),Jt=$r({name:"PolySelect",props:{multiple:{type:Boolean,default:!1},clearOnMiss:{type:Boolean,default:!0},filter:{type:Function,default:void 0}},emits:{change:e=>!0,pointerMissed:e=>!0},setup(e,{emit:t,slots:r}){let o=Nr({selected:[]}),n=jr(()=>o.selected);function a(c){let u=e.filter?e.filter(c):c;o.selected=u,t("change",u)}let i={get selected(){return o.selected},set:c=>a(c),add:c=>{e.multiple?o.selected.includes(c)||a([...o.selected,c]):a([c])},remove:c=>{o.selected.includes(c)&&a(o.selected.filter(u=>u!==c))},toggle:c=>{o.selected.includes(c)?a(o.selected.filter(u=>u!==c)):e.multiple?a([...o.selected,c]):a([c])},clear:()=>a([]),has:c=>o.selected.includes(c)};zr(ue,{selected:n,api:i});let m=Fe($,void 0),s=(c,u)=>_e(c,u,y=>!y.closest("[data-poly-transform-controls]")),l=null;return Yr(()=>{let c=m?.cameraElRef.value;if(!c)return;let u=y=>{if(y.target?.closest("[data-poly-transform-controls]"))return;let g=re(y.target)??s(y.clientX,y.clientY);if(!g){t("pointerMissed",y),e.clearOnMiss&&a([]);return}e.multiple&&(y.shiftKey||y.metaKey||y.ctrlKey)?i.toggle(g):o.selected.length===1&&o.selected[0]===g?a([]):a([g])};c.addEventListener("click",u),l=()=>c.removeEventListener("click",u)}),Xr(()=>{l?.()}),()=>Ur("div",{style:{display:"contents"},"data-poly-select":""},r.default?.())}});function Qt(){let e=Fe(ue,void 0);return e?e.selected:Fr([])}function en(){let e=Fe(ue,void 0);if(!e)throw new Error("polycss: usePolySelectionApi must be used inside <PolySelect>.");return e.api}import{defineComponent as Br,h as Wr,computed as Zr}from"vue";import{axesHelperPolygons as Gr}from"@layoutit/polycss-core";var tn=Br({name:"PolyAxesHelper",props:{size:{type:Number,default:void 0},thickness:{type:Number,default:void 0},negative:{type:Boolean,default:void 0},xColor:{type:String,default:void 0},yColor:{type:String,default:void 0},zColor:{type:String,default:void 0}},setup(e){let t=Zr(()=>Gr({size:e.size,thickness:e.thickness,negative:e.negative,xColor:e.xColor,yColor:e.yColor,zColor:e.zColor}));return()=>Wr(N,{polygons:t.value})}});import{defineComponent as Kr,h as qr,computed as je}from"vue";import{octahedronPolygons as Jr}from"@layoutit/polycss-core";var Be=50,nn=Kr({name:"PolyDirectionalLightHelper",props:{light:{type:Object,required:!0},target:{type:Array,default:void 0},distance:{type:Number,default:5},size:{type:Number,default:.35},color:{type:String,default:void 0}},setup(e){let t=je(()=>e.color??e.light.color??"#ffd54a"),r=je(()=>Jr({center:[0,0,0],size:e.size,color:t.value})),o=je(()=>{let n=e.light.direction,a=n[0],i=n[1],m=n[2],s=Math.hypot(a,i,m)||1,l=e.target?.[0]??0,c=e.target?.[1]??0,u=e.target?.[2]??0,y=l+i/s*e.distance,f=c+a/s*e.distance,g=u+m/s*e.distance;return[f*Be,y*Be,g*Be]});return()=>qr(N,{polygons:r.value,position:o.value})}});import{ref as on,watch as Qr,onUnmounted as ea,computed as Ae}from"vue";import{createPolyAnimationMixer as ta}from"@layoutit/polycss-core";function B(e){return e&&typeof e=="object"&&"value"in e?e.value:e}function na(e,t,r){let o=on(null),n=null,a=null,i=null,m=on(0);function s(){return r==null?o.value:B(r)??o.value}function l(){a!==null&&(cancelAnimationFrame(a),a=null),i=null}function c(){l(),n&&(n.stopAllAction(),n.uncacheRoot(),n=null,m.value++)}function u(){if(a!==null)return;function H(O){if(i===null){i=O,a=requestAnimationFrame(H);return}let d=(O-i)/1e3;i=O,n?.update(d),a=requestAnimationFrame(H)}a=requestAnimationFrame(H)}function y(){c();let H=B(e),O=B(t);if(!H||H.length===0||!O)return;let d=s();d&&(n=ta(d,O),m.value++,u())}let f=Qr(()=>{let H=B(e),O=B(t),d=r!=null?B(r):o.value;return{c:H,ctrl:O,r:d}},()=>y(),{immediate:!0,deep:!1});ea(()=>{f(),c()});let g=Ae(()=>B(e)??[]),v=Ae(()=>g.value.map(H=>H.name)),b=Ae(()=>(m.value,n)),R=Ae(()=>{m.value;let H=g.value,O={};for(let d of H)Object.defineProperty(O,d.name,{enumerable:!0,get(){if(!n)return null;try{return n.clipAction(d.name)}catch{return null}}});return O});return{ref:o,mixer:b,clips:g,names:v,actions:R}}import{normalizePolygons as Ai,mergePolygons as Ei,coverPlanarPolygons as Si,cullInteriorPolygons as Ti,parseObj as Li,parseMtl as wi,parseGltf as Ri,bakeSolidTextureSamples as Oi,bakeSolidTextureSampledPolygons as Hi,loadMesh as Di,createIsometricCamera as ki,parseVox as Ii,polygonFaces as _i,computeTexturePaintMetrics as Vi,computeShapeLighting as $i,parseColor as Ui,parsePureColor as Xi,parseHexColor as Yi,parseRgbColor as zi,formatColor as Ni,clampChannel as Fi,shadeColor as ji,rotateVec3 as Bi,inverseRotateVec3 as Wi,axesHelperPolygons as Zi,arrowPolygons as Gi,ringPolygons as Ki,octahedronPolygons as qi,buildSceneContext as Ji,computeSceneBbox as Qi,BASE_TILE as es,DEFAULT_CAMERA_STATE as ts,DEFAULT_PROJECTION as ns,normalizeInvertMultiplier as os,createPolyAnimationMixer as rs,LoopOnce as as,LoopRepeat as ls,LoopPingPong as is}from"@layoutit/polycss-core";export{es as BASE_TILE,ts as DEFAULT_CAMERA_STATE,ns as DEFAULT_PROJECTION,as as LoopOnce,is as LoopPingPong,ls as LoopRepeat,Mt as Poly,tn as PolyAxesHelper,le as PolyCamera,$ as PolyCameraContextKey,nn as PolyDirectionalLightHelper,Yt as PolyMapControls,N as PolyMesh,Ht as PolyOrbitControls,tt as PolyOrthographicCamera,le as PolyPerspectiveCamera,pt as PolyScene,Jt as PolySelect,ue as PolySelectionContextKey,qt as PolyTransformControls,Gi as arrowPolygons,Zi as axesHelperPolygons,Hi as bakeSolidTextureSampledPolygons,Oi as bakeSolidTextureSamples,Ji as buildSceneContext,Fi as clampChannel,Qi as computeSceneBbox,$i as computeShapeLighting,Vi as computeTexturePaintMetrics,Si as coverPlanarPolygons,ki as createIsometricCamera,rs as createPolyAnimationMixer,Ti as cullInteriorPolygons,_e as findMeshUnderPoint,re as findPolyMeshHandle,Ni as formatColor,ye as injectPolyBaseStyles,Wi as inverseRotateVec3,Di as loadMesh,Ei as mergePolygons,os as normalizeInvertMultiplier,Ai as normalizePolygons,qi as octahedronPolygons,Ui as parseColor,Ri as parseGltf,Yi as parseHexColor,wi as parseMtl,Li as parseObj,Xi as parsePureColor,zi as parseRgbColor,Ii as parseVox,be as pointInMeshElement,_i as polygonFaces,Ki as ringPolygons,Bi as rotateVec3,ji as shadeColor,na as usePolyAnimation,Z as usePolyCamera,Xo as usePolyMaterial,xe as usePolyMesh,fe as usePolySceneContext,Qt as usePolySelect,en as usePolySelectionApi};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@layoutit/polycss-vue",
+  "version": "0.0.1",
+  "description": "Native Vue 3 components for CSS polygon mesh rendering with 60fps imperative updates.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "polycss",
+    "polygon",
+    "mesh",
+    "3d",
+    "css",
+    "matrix3d",
+    "dom",
+    "vue",
+    "vue3",
+    "rendering"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LayoutitStudio/polycss.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/LayoutitStudio/polycss/issues"
+  },
+  "homepage": "https://github.com/LayoutitStudio/polycss#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@layoutit/polycss-core": "^0.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^3.2.4",
+    "happy-dom": "^20.8.9",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.12"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}