@layoutit/polycss-vue 0.0.1
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/LICENSE +21 -0
- package/README.md +188 -0
- package/dist/index.cjs +172 -0
- package/dist/index.d.cts +1439 -0
- package/dist/index.d.ts +1439 -0
- package/dist/index.js +172 -0
- package/package.json +63 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Layoutit
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
> **Status: pre-1.0. APIs may still change before a stable 1.0 release.**
|
|
2
|
+
|
|
3
|
+
# @layoutit/polycss-vue
|
|
4
|
+
|
|
5
|
+
Native Vue 3 components for CSS-based polygon mesh rendering. Loads OBJ, glTF, GLB, and MagicaVoxel `.vox` files; renders each polygon as a real DOM element (atlas-backed `<i>` for both textured and flat-color faces) positioned with `transform: matrix3d(...)`. No WebGL, no canvas-as-scene.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @layoutit/polycss-vue
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Requires Vue 3 as a peer dependency.
|
|
14
|
+
|
|
15
|
+
## Quickstart
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
<template>
|
|
19
|
+
<PolyCamera :rot-x="65" :rot-y="45" :perspective="1000">
|
|
20
|
+
<PolyScene>
|
|
21
|
+
<PolyMesh src="/cottage.glb" />
|
|
22
|
+
</PolyScene>
|
|
23
|
+
</PolyCamera>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { PolyCamera, PolyScene, PolyMesh } from "@layoutit/polycss-vue";
|
|
28
|
+
</script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Component reference
|
|
32
|
+
|
|
33
|
+
### `<PolyScene>`
|
|
34
|
+
|
|
35
|
+
Root of every Vue polycss render tree. Renders polygons and meshes inside a `<PolyCamera>` context, and owns scene-level lighting and atlas options.
|
|
36
|
+
|
|
37
|
+
| Prop | Type | Default | Description |
|
|
38
|
+
|---|---|---|---|
|
|
39
|
+
| `directional-light` | `PolyDirectionalLight` | None | Directional light config |
|
|
40
|
+
| `ambient-light` | `PolyAmbientLight` | None | Ambient light config |
|
|
41
|
+
| `texture-lighting` | `"baked" \| "dynamic"` | `"baked"` | Texture lighting mode |
|
|
42
|
+
| `atlas-scale` | `number \| "auto"` | `"auto"` | Raster scale for generated atlas pages |
|
|
43
|
+
| `polygons` | `Polygon[]` | None | Static polygon array (composes with slot) |
|
|
44
|
+
|
|
45
|
+
For pointer drag, wheel zoom, and autorotate, mount `<PolyOrbitControls>` (or `<PolyMapControls>` for pan-first map-style input) inside `<PolyCamera>`: it receives the camera context. Mirrors Three.js's split between camera state and input.
|
|
46
|
+
|
|
47
|
+
### `<PolyMesh>`
|
|
48
|
+
|
|
49
|
+
Loads a mesh from a URL and renders its polygons. Manages blob-URL lifecycle automatically.
|
|
50
|
+
|
|
51
|
+
| Prop | Type | Description |
|
|
52
|
+
|---|---|---|
|
|
53
|
+
| `src` | `string` | URL to `.obj`, `.glb`, `.gltf`, or `.vox` |
|
|
54
|
+
| `polygons` | `Polygon[]` | Pre-parsed polygons (alternative to `src`) |
|
|
55
|
+
| `position` | `Vec3` | `[x, y, z]` offset in scene space |
|
|
56
|
+
| `scale` | `number \| Vec3` | Uniform or per-axis scale |
|
|
57
|
+
| `rotation` | `Vec3` | Euler angles in degrees `[x, y, z]` |
|
|
58
|
+
| `atlas-scale` | `number \| "auto"` | Raster scale for generated atlas pages |
|
|
59
|
+
| `auto-center` | `boolean` | Shift mesh so its bbox center is at origin |
|
|
60
|
+
| `mtl` | `string` | Companion `.mtl` URL for OBJ models |
|
|
61
|
+
|
|
62
|
+
Named slot: `#polygon="{ polygon, index }"`: per-polygon scoped slot for rendering overrides. The default slot is for static children inside the mesh wrapper.
|
|
63
|
+
|
|
64
|
+
### `<Poly>`
|
|
65
|
+
|
|
66
|
+
Single polygon. Renders one atlas-backed `<i>` for UV-textured and flat-color faces. Accepts standard Vue event bindings and class/style.
|
|
67
|
+
|
|
68
|
+
| Prop | Type | Description |
|
|
69
|
+
|---|---|---|
|
|
70
|
+
| `vertices` | `Vec3[]` | Required: 3+ `[x, y, z]` points |
|
|
71
|
+
| `color` | `string` | CSS color; used when no texture is set |
|
|
72
|
+
| `texture` | `string` | Image URL for UV-mapped rendering |
|
|
73
|
+
| `uvs` | `Vec2[]` | UV coordinates, one per vertex |
|
|
74
|
+
| `data` | `Record<string, string \| number \| boolean>` | Reflected as `data-*` DOM attributes |
|
|
75
|
+
| `position` | `Vec3` | Local offset |
|
|
76
|
+
| `scale` | `number \| Vec3` | Scale |
|
|
77
|
+
| `rotation` | `Vec3` | Euler rotation in degrees |
|
|
78
|
+
| `atlas-scale` | `number \| "auto"` | Raster scale for generated atlas pages |
|
|
79
|
+
|
|
80
|
+
### `<PolyCamera>`
|
|
81
|
+
|
|
82
|
+
Camera wrapper for perspective, rotation, zoom, target, and dolly distance. Vue scenes must render inside `<PolyCamera>` (or `<PolyPerspectiveCamera>` / `<PolyOrthographicCamera>`) so controls and scenes share camera state.
|
|
83
|
+
|
|
84
|
+
### Composables
|
|
85
|
+
|
|
86
|
+
| Composable | Description |
|
|
87
|
+
|---|---|
|
|
88
|
+
| `usePolyCamera(options)` | Internal camera integration composable |
|
|
89
|
+
| `usePolySceneContext(polygons, options)` | Lower-level hook for custom scene wrappers |
|
|
90
|
+
| `usePolyMesh(srcRef, options?)` | Reactive mesh loader. Returns reactive `{ polygons, loading, error, warnings, dispose }`. |
|
|
91
|
+
|
|
92
|
+
### Utility
|
|
93
|
+
|
|
94
|
+
| Export | Description |
|
|
95
|
+
|---|---|
|
|
96
|
+
| `injectPolyBaseStyles(doc?)` | Inject polycss base CSS into the document. Idempotent. |
|
|
97
|
+
|
|
98
|
+
## Re-exports from `@layoutit/polycss-core`
|
|
99
|
+
|
|
100
|
+
All types and core functions are re-exported:
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
import type { Polygon, Vec2, Vec3, PolyDirectionalLight, PolyAmbientLight, ParseResult } from "@layoutit/polycss-vue";
|
|
104
|
+
import { parseObj, parseGltf, parseVox, loadMesh, normalizePolygons, mergePolygons } from "@layoutit/polycss-vue";
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Examples
|
|
108
|
+
|
|
109
|
+
### With lighting and multiple meshes
|
|
110
|
+
|
|
111
|
+
```vue
|
|
112
|
+
<template>
|
|
113
|
+
<PolyCamera :rot-x="65" :rot-y="45">
|
|
114
|
+
<PolyScene :directional-light="light">
|
|
115
|
+
<PolyMesh src="/cottage.glb" />
|
|
116
|
+
<PolyMesh src="/tree.glb" :position="[8, 0, 0]" :scale="0.5" />
|
|
117
|
+
</PolyScene>
|
|
118
|
+
</PolyCamera>
|
|
119
|
+
</template>
|
|
120
|
+
|
|
121
|
+
<script setup lang="ts">
|
|
122
|
+
import { PolyCamera, PolyScene, PolyMesh } from "@layoutit/polycss-vue";
|
|
123
|
+
const light = { direction: [0.5, -0.7, 0.6] as [number, number, number], color: "#ffe4a8" };
|
|
124
|
+
</script>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Per-polygon interactive
|
|
128
|
+
|
|
129
|
+
```vue
|
|
130
|
+
<template>
|
|
131
|
+
<PolyCamera :rot-x="65" :rot-y="45">
|
|
132
|
+
<PolyScene>
|
|
133
|
+
<Poly
|
|
134
|
+
v-for="(p, i) in polygons"
|
|
135
|
+
:key="i"
|
|
136
|
+
v-bind="p"
|
|
137
|
+
@click="() => alert(`clicked polygon ${i}`)"
|
|
138
|
+
@mouseenter="hoveredId = i"
|
|
139
|
+
@mouseleave="hoveredId = null"
|
|
140
|
+
:class="{ highlight: hoveredId === i }"
|
|
141
|
+
/>
|
|
142
|
+
</PolyScene>
|
|
143
|
+
</PolyCamera>
|
|
144
|
+
</template>
|
|
145
|
+
|
|
146
|
+
<script setup lang="ts">
|
|
147
|
+
import { ref } from "vue";
|
|
148
|
+
import { PolyCamera, PolyScene, Poly } from "@layoutit/polycss-vue";
|
|
149
|
+
import type { Polygon } from "@layoutit/polycss-vue";
|
|
150
|
+
|
|
151
|
+
defineProps<{ polygons: Polygon[] }>();
|
|
152
|
+
const hoveredId = ref<number | null>(null);
|
|
153
|
+
</script>
|
|
154
|
+
|
|
155
|
+
<style>
|
|
156
|
+
.highlight { filter: brightness(1.5); }
|
|
157
|
+
</style>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
### `PolyMesh` with scoped slot
|
|
161
|
+
|
|
162
|
+
```vue
|
|
163
|
+
<template>
|
|
164
|
+
<PolyCamera :rot-x="65" :rot-y="45">
|
|
165
|
+
<PolyScene>
|
|
166
|
+
<PolyMesh src="/character.glb" :position="[5, 0, 0]" :scale="2">
|
|
167
|
+
<template #polygon="{ polygon, index }">
|
|
168
|
+
<Poly
|
|
169
|
+
v-bind="polygon"
|
|
170
|
+
@click="selected = index"
|
|
171
|
+
:class="{ outlined: selected === index }"
|
|
172
|
+
/>
|
|
173
|
+
</template>
|
|
174
|
+
</PolyMesh>
|
|
175
|
+
</PolyScene>
|
|
176
|
+
</PolyCamera>
|
|
177
|
+
</template>
|
|
178
|
+
|
|
179
|
+
<script setup lang="ts">
|
|
180
|
+
import { ref } from "vue";
|
|
181
|
+
import { PolyCamera, PolyScene, PolyMesh, Poly } from "@layoutit/polycss-vue";
|
|
182
|
+
const selected = ref<number | null>(null);
|
|
183
|
+
</script>
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Docs
|
|
187
|
+
|
|
188
|
+
Full documentation at [polycss.com](https://polycss.com).
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
"use strict";var Ue=Object.defineProperty;var vn=Object.getOwnPropertyDescriptor;var xn=Object.getOwnPropertyNames;var bn=Object.prototype.hasOwnProperty;var Cn=(e,t)=>{for(var r in t)Ue(e,r,{get:t[r],enumerable:!0})},Mn=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of xn(t))!bn.call(e,n)&&n!==r&&Ue(e,n,{get:()=>t[n],enumerable:!(o=vn(t,n))||o.enumerable});return e};var An=e=>Mn(Ue({},"__esModule",{value:!0}),e);var er={};Cn(er,{BASE_TILE:()=>x.BASE_TILE,DEFAULT_CAMERA_STATE:()=>x.DEFAULT_CAMERA_STATE,DEFAULT_PROJECTION:()=>x.DEFAULT_PROJECTION,LoopOnce:()=>x.LoopOnce,LoopPingPong:()=>x.LoopPingPong,LoopRepeat:()=>x.LoopRepeat,Poly:()=>Je,PolyAxesHelper:()=>mt,PolyCamera:()=>ce,PolyCameraContextKey:()=>N,PolyDirectionalLightHelper:()=>ft,PolyMapControls:()=>nt,PolyMesh:()=>q,PolyOrbitControls:()=>et,PolyOrthographicCamera:()=>Ye,PolyPerspectiveCamera:()=>ce,PolyScene:()=>Ze,PolySelect:()=>st,PolySelectionContextKey:()=>ve,PolyTransformControls:()=>it,arrowPolygons:()=>x.arrowPolygons,axesHelperPolygons:()=>x.axesHelperPolygons,bakeSolidTextureSampledPolygons:()=>x.bakeSolidTextureSampledPolygons,bakeSolidTextureSamples:()=>x.bakeSolidTextureSamples,buildSceneContext:()=>x.buildSceneContext,clampChannel:()=>x.clampChannel,computeSceneBbox:()=>x.computeSceneBbox,computeShapeLighting:()=>x.computeShapeLighting,computeTexturePaintMetrics:()=>x.computeTexturePaintMetrics,coverPlanarPolygons:()=>x.coverPlanarPolygons,createIsometricCamera:()=>x.createIsometricCamera,createPolyAnimationMixer:()=>x.createPolyAnimationMixer,cullInteriorPolygons:()=>x.cullInteriorPolygons,findMeshUnderPoint:()=>_e,findPolyMeshHandle:()=>le,formatColor:()=>x.formatColor,injectPolyBaseStyles:()=>Ce,inverseRotateVec3:()=>x.inverseRotateVec3,loadMesh:()=>x.loadMesh,mergePolygons:()=>x.mergePolygons,normalizeInvertMultiplier:()=>x.normalizeInvertMultiplier,normalizePolygons:()=>x.normalizePolygons,octahedronPolygons:()=>x.octahedronPolygons,parseColor:()=>x.parseColor,parseGltf:()=>x.parseGltf,parseHexColor:()=>x.parseHexColor,parseMtl:()=>x.parseMtl,parseObj:()=>x.parseObj,parsePureColor:()=>x.parsePureColor,parseRgbColor:()=>x.parseRgbColor,parseVox:()=>x.parseVox,pointInMeshElement:()=>Se,polygonFaces:()=>x.polygonFaces,ringPolygons:()=>x.ringPolygons,rotateVec3:()=>x.rotateVec3,shadeColor:()=>x.shadeColor,usePolyAnimation:()=>un,usePolyCamera:()=>ae,usePolyMaterial:()=>Vt,usePolyMesh:()=>Ee,usePolySceneContext:()=>be,usePolySelect:()=>ct,usePolySelectionApi:()=>ut});module.exports=An(er);var Q=require("vue");var re=require("vue"),Re=require("@layoutit/polycss-core");function Xe(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 ae(e){let t=(0,Re.createIsometricCamera)({zoom:e.value.zoom,target:e.value.target,rotX:e.value.rotX,rotY:e.value.rotY,distance:e.value.distance}),r=(0,re.shallowRef)(t),o=(0,re.ref)(null),n=(0,re.ref)(null),a=Xe(t.state);(0,re.watch)(()=>({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=Re.BASE_TILE,[c,u,y]=s.target,f=u*l,g=c*l,v=y*l,C=s.distance!==0?`translateZ(${-s.distance}px) `:"";m.style.transform=`${C}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 N=Symbol("polycss-camera");var En=8e3,ce=(0,Q.defineComponent)({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=(0,Q.computed)(()=>({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}=ae(r);return(0,Q.provide)(N,{store:o,cameraRef:n,sceneElRef:a,cameraElRef:i,applyTransformDirect:m}),()=>{let s=`${typeof e.perspective=="number"?e.perspective:En}px`;return(0,Q.h)("div",{ref:i,class:`polycss-camera${e.class?` ${e.class}`:""}`,style:{perspective:s}},t.default?.())}}});var ee=require("vue");var Ye=(0,ee.defineComponent)({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=(0,ee.computed)(()=>({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}=ae(r);return(0,ee.provide)(N,{store:o,cameraRef:n,sceneElRef:a,cameraElRef:i,applyTransformDirect:m}),()=>(0,ee.h)("div",{ref:i,class:`polycss-camera${e.class?` ${e.class}`:""}`,style:{perspective:"none"}},t.default?.())}});var _=require("vue"),Ae=require("@layoutit/polycss-core");var bt=require("vue"),Oe=require("@layoutit/polycss-core");function be(e,t){return(0,bt.computed)(()=>{let{directionalLight:r}=t.value,o=(0,Oe.buildSceneContext)({polygons:e.value});return{polygons:(0,Oe.mergePolygons)(o.context.polygons),sceneBbox:o.context.sceneBbox}})}var Ct="polycss-styles";function Ce(e=typeof document<"u"?document:null){if(!e||e.getElementById(Ct))return;let t=e.createElement("style");t.id=Ct,t.textContent=Sn,e.head.appendChild(t)}var Sn=`
|
|
2
|
+
/* \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 */
|
|
3
|
+
|
|
4
|
+
.polycss-scene,
|
|
5
|
+
.polycss-scene *,
|
|
6
|
+
.polycss-scene *::before,
|
|
7
|
+
.polycss-scene *::after {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.polycss-scene {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 50%;
|
|
14
|
+
left: 50%;
|
|
15
|
+
width: 0;
|
|
16
|
+
height: 0;
|
|
17
|
+
transform-style: preserve-3d;
|
|
18
|
+
perspective: none;
|
|
19
|
+
transform: var(--scene-transform);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.polycss-offset {
|
|
23
|
+
transform-style: preserve-3d;
|
|
24
|
+
transform: var(--offset-transform);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* \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 */
|
|
28
|
+
|
|
29
|
+
.polycss-camera {
|
|
30
|
+
display: flex;
|
|
31
|
+
width: 100%;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
align-items: center;
|
|
34
|
+
perspective: 8000px;
|
|
35
|
+
min-height: inherit;
|
|
36
|
+
height: 100%;
|
|
37
|
+
position: relative;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
contain: paint;
|
|
40
|
+
isolation: isolate;
|
|
41
|
+
}
|
|
42
|
+
.polycss-camera * {
|
|
43
|
+
transform-style: preserve-3d;
|
|
44
|
+
position: absolute;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* \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 */
|
|
48
|
+
|
|
49
|
+
/*
|
|
50
|
+
* Polygon faces render as internal leaf elements inside .polycss-scene.
|
|
51
|
+
* The element is positioned absolutely within the scene root; its
|
|
52
|
+
* transform: matrix3d(...) carries the full world-space placement.
|
|
53
|
+
*/
|
|
54
|
+
.polycss-scene b,
|
|
55
|
+
.polycss-scene i,
|
|
56
|
+
.polycss-scene s,
|
|
57
|
+
.polycss-scene u {
|
|
58
|
+
position: absolute;
|
|
59
|
+
display: block;
|
|
60
|
+
transform-origin: 0 0;
|
|
61
|
+
transform-style: preserve-3d;
|
|
62
|
+
margin: 0;
|
|
63
|
+
padding: 0;
|
|
64
|
+
font: inherit;
|
|
65
|
+
font-weight: normal;
|
|
66
|
+
font-style: normal;
|
|
67
|
+
line-height: 0;
|
|
68
|
+
quotes: none;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
backface-visibility: hidden;
|
|
71
|
+
background-repeat: no-repeat;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.polycss-scene b {
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.polycss-scene i {
|
|
78
|
+
border-style: solid;
|
|
79
|
+
border-width: 1px;
|
|
80
|
+
border-color: currentColor;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.polycss-scene s {
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.polycss-scene u {
|
|
87
|
+
width: 0px;
|
|
88
|
+
height: 0px;
|
|
89
|
+
background: transparent;
|
|
90
|
+
box-sizing: content-box;
|
|
91
|
+
border: 0 solid transparent;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* \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 */
|
|
95
|
+
|
|
96
|
+
/*
|
|
97
|
+
* Dynamic mode: PolyScene writes the directional + ambient light setup to
|
|
98
|
+
* these custom properties on the scene root. Each polygon leaf bakes its
|
|
99
|
+
* own normal directly into an inline calc() that reads these vars to
|
|
100
|
+
* resolve the Lambert dot product and per-channel tint. Sliding the light
|
|
101
|
+
* only writes these scene-root vars \u2014 no JS, no atlas redraw.
|
|
102
|
+
*
|
|
103
|
+
* Registering with @property forces the browser to parse the values as
|
|
104
|
+
* <number>s instead of opaque token streams; that makes the polygon-level
|
|
105
|
+
* calc() expressions resolve reliably across engines.
|
|
106
|
+
*/
|
|
107
|
+
|
|
108
|
+
@property --plx { syntax: "<number>"; inherits: true; initial-value: 0; }
|
|
109
|
+
@property --ply { syntax: "<number>"; inherits: true; initial-value: 0; }
|
|
110
|
+
@property --plz { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
111
|
+
@property --plr { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
112
|
+
@property --plg { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
113
|
+
@property --plb { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
114
|
+
@property --pli { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
115
|
+
@property --par { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
116
|
+
@property --pag { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
117
|
+
@property --pab { syntax: "<number>"; inherits: true; initial-value: 1; }
|
|
118
|
+
@property --pai { syntax: "<number>"; inherits: true; initial-value: 0.4; }
|
|
119
|
+
|
|
120
|
+
/* Per-polygon surface normal \u2014 set inline by the renderer. inherits:false
|
|
121
|
+
because each leaf has its own normal (no cascade). */
|
|
122
|
+
@property --pnx { syntax: "<number>"; inherits: false; initial-value: 0; }
|
|
123
|
+
@property --pny { syntax: "<number>"; inherits: false; initial-value: 0; }
|
|
124
|
+
@property --pnz { syntax: "<number>"; inherits: false; initial-value: 1; }
|
|
125
|
+
@property --psr { syntax: "<number>"; inherits: false; initial-value: 1; }
|
|
126
|
+
@property --psg { syntax: "<number>"; inherits: false; initial-value: 1; }
|
|
127
|
+
@property --psb { syntax: "<number>"; inherits: false; initial-value: 1; }
|
|
128
|
+
|
|
129
|
+
/* Calc-driven Lambert + tint, scoped to dynamic-lighting scenes. Lives
|
|
130
|
+
here (not inline per polygon) so each leaf only carries its tiny normal
|
|
131
|
+
declarations \u2014 ~12\xD7 smaller per-polygon style payload on big meshes. */
|
|
132
|
+
.polycss-scene[data-polycss-lighting="dynamic"] s {
|
|
133
|
+
background-color: rgb(
|
|
134
|
+
calc(255 * (var(--par) * var(--pai)
|
|
135
|
+
+ var(--plr) * var(--pli) * max(0,
|
|
136
|
+
var(--pnx) * var(--plx) +
|
|
137
|
+
var(--pny) * var(--ply) +
|
|
138
|
+
var(--pnz) * var(--plz))))
|
|
139
|
+
calc(255 * (var(--pag) * var(--pai)
|
|
140
|
+
+ var(--plg) * var(--pli) * max(0,
|
|
141
|
+
var(--pnx) * var(--plx) +
|
|
142
|
+
var(--pny) * var(--ply) +
|
|
143
|
+
var(--pnz) * var(--plz))))
|
|
144
|
+
calc(255 * (var(--pab) * var(--pai)
|
|
145
|
+
+ var(--plb) * var(--pli) * max(0,
|
|
146
|
+
var(--pnx) * var(--plx) +
|
|
147
|
+
var(--pny) * var(--ply) +
|
|
148
|
+
var(--pnz) * var(--plz))))
|
|
149
|
+
);
|
|
150
|
+
background-blend-mode: multiply;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.polycss-scene[data-polycss-lighting="dynamic"] u {
|
|
154
|
+
border-bottom-color: rgb(
|
|
155
|
+
calc(255 * var(--psr) * (var(--par) * var(--pai)
|
|
156
|
+
+ var(--plr) * var(--pli) * max(0,
|
|
157
|
+
var(--pnx) * var(--plx) +
|
|
158
|
+
var(--pny) * var(--ply) +
|
|
159
|
+
var(--pnz) * var(--plz))))
|
|
160
|
+
calc(255 * var(--psg) * (var(--pag) * var(--pai)
|
|
161
|
+
+ var(--plg) * var(--pli) * max(0,
|
|
162
|
+
var(--pnx) * var(--plx) +
|
|
163
|
+
var(--pny) * var(--ply) +
|
|
164
|
+
var(--pnz) * var(--plz))))
|
|
165
|
+
calc(255 * var(--psb) * (var(--pab) * var(--pai)
|
|
166
|
+
+ var(--plb) * var(--pli) * max(0,
|
|
167
|
+
var(--pnx) * var(--plx) +
|
|
168
|
+
var(--pny) * var(--ply) +
|
|
169
|
+
var(--pnz) * var(--plz))))
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
`;var Tn=require("@layoutit/polycss-core");var Mt=require("vue"),ze=Symbol("polycss/scene-context");function At(){return(0,Mt.inject)(ze,null)}var F=require("vue"),Ln=50,wn=[.4,-.7,.59],Rn="#ffffff",On=1,Hn="#ffffff",Dn=.4,de=4096,Et=1,kn=.1,In=1,Tt=de*de,_n=Tt*3,Fe=2048,je=16*1024*1024,Vn=.995,K=.001,$n=.75,Lt=3,Un=2,Me=1e-9,Xn=.45,ue=new Map;function Yn(e){let t=ue.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}),ue.set(e,t),t.then(()=>{ue.get(e)===t&&ue.delete(e)},()=>{ue.get(e)===t&&ue.delete(e)})),t}function Ie(e){let t=typeof e=="string"?Number(e):e;return t===void 0||!Number.isFinite(t)?1:Math.min(In,Math.max(kn,t))}function We(e,t){let r=e.toFixed(t).replace(/\.?0+$/,"");return Object.is(Number(r),-0)?"0":r}function Be(e,t=Lt){return`matrix3d(${e.split(",").map(r=>{let o=Number(r.trim());return Number.isFinite(o)?We(o,t):r.trim()}).join(",")})`}function De(e,t=Un){return`${We(e,t)}%`}function wt(e){return e.reduce((t,r)=>t+r.width*r.height,0)}function zn(e){let t=wt(e);if(t<=0)return 1;let r=Math.max(1,...e.map(a=>Math.max(a.width,a.height))),o=Fe/r,n=Math.sqrt(je/(t*4));return Ie(Math.min(o,n))}function Nn(e){let t=wt(e),r=.5;return t<=Tt?r=1:t<=_n&&(r=.75),Ie(Math.min(r,zn(e)))}function Fn(e,t){return e.reduce((r,o)=>Math.max(r,Math.ceil(o.width*t),Math.ceil(o.height*t)),0)}function jn(e,t){return e.reduce((r,o)=>r+Math.ceil(o.width*t)*Math.ceil(o.height*t)*4,0)}function Bn(e,t){let r=Fn(e,t),o=jn(e,t),n=r>Fe?Fe/r:1,a=o>je?Math.sqrt(je/o):1;return Math.min(n,a)}function Wn(e,t){let r=Nn(t.pages),o=r===1?t:ke(e,r);for(let n=0;n<4;n++){let a=Bn(o.pages,r);if(a>=1)break;let i=Ie(r*a*Vn);if(i>=r)break;r=i,o=ke(e,r)}return{packed:o,atlasScale:r}}function Zn(e,t){if(t!==void 0&&t!=="auto"){let o=Ie(t);return{packed:ke(e,o),atlasScale:o}}let r=ke(e,1);return Wn(e,r)}function Gn(e){return Math.max(Et,Math.ceil(Et/e))}function te(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 fe(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 Rt(e){if(e.screenPts.length!==8)return!1;let t=[],r=[],o=(n,a)=>{for(let i of n)if(Math.abs(i-a)<=K)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])>K||Math.abs(r[0])>K||t[1]-t[0]<=K||r[1]-r[0]<=K))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])<=K||Math.abs(a-t[1])<=K,s=Math.abs(i-r[0])<=K||Math.abs(i-r[1])<=K;if(!m||!s)return!1}return!0}function ne(e){return!e.texture&&e.polygon.vertices.length===3}function Kn(){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 qn(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(`${De(a)} ${De(i)}`)}return`polygon(${t.join(", ")})`}function Jn(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=De(Math.max(0,Math.min(100,t/o/n*100))),m=De(Math.max(0,Math.min(100,r/o/a*100)));return`polygon(${Array.from({length:o},()=>`${i} ${m}`).join(", ")})`}function Qn(e){return`${qn(e)} ${Jn(e)}`}function eo(e,t=Lt){return e.map(r=>We(r,t)).join(",")}function to(e,t,r){return e.map(o=>[o[1]*t,o[0]*t,o[2]*r])}function no(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<=Me?null:[i[0]/m,i[1]/m,i[2]/m]}function Ne(e,t){return e[0]*t[0]+e[1]*t[1]+e[2]*t[2]}function oo(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 ro(e,t,r){if(!ne(e))return null;let o=to(e.polygon.vertices,e.tileSize,e.layerElevation),n=no(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(V=>{let k=o[V.a],b=o[V.b];return{...V,length:Math.hypot(b[0]-k[0],b[1]-k[1],b[2]-k[2])}}).sort((V,k)=>k.length-V.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<=Me)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=Ne(g,f),C=[l[0]+f[0]*v,l[1]+f[1]*v,l[2]+f[2]*v],O=[C[0]-u[0],C[1]-u[1],C[2]-u[2]],D=Math.hypot(O[0],O[1],O[2]);if(D<=Me)return null;let H=[O[0]/D,O[1]/D,O[2]/D];if(Ne(oo(f,H),n)<0){let V=m;if(m=i,i=V,l=o[i],c=o[m],y=Math.hypot(c[0]-l[0],c[1]-l[1],c[2]-l[2]),y<=Me)return null;f=[(c[0]-l[0])/y,(c[1]-l[1])/y,(c[2]-l[2])/y];let k=[u[0]-l[0],u[1]-l[1],u[2]-l[2]];v=Ne(k,f),C=[l[0]+f[0]*v,l[1]+f[1]*v,l[2]+f[2]*v],O=[C[0]-u[0],C[1]-u[1],C[2]-u[2]];let b=Math.hypot(O[0],O[1],O[2]);if(b<=Me)return null;H=[O[0]/b,O[1]/b,O[2]/b]}let d=Math.max(0,Math.min(y,v)),M=Math.max(0,y-d),p=Xn,E=d+p,P=M+p,S=D+p*2,A=u[0]-E*f[0]-p*H[0],T=u[1]-E*f[1]-p*H[1],R=u[2]-E*f[2]-p*H[2],w=eo([f[0],f[1],f[2],0,H[0],H[1],H[2],0,n[0],n[1],n[2],0,A,T,R,1]),h=t==="dynamic",I=fe(e.polygon.color??"#cccccc");return{transform:`matrix3d(${w})`,borderWidth:`0 ${P}px ${S}px ${E}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":(I.r/255).toFixed(4),"--psg":(I.g/255).toFixed(4),"--psb":(I.b/255).toFixed(4)}:null}}function ao({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 lo(e,t,r,o,n){let a=fe(e),i=fe(r),m=fe(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 ao({r:a.r*s,g:a.g*l,b:a.b*c})}function io(e,t,r,o){let n=fe(t),a=fe(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 so({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 co(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(),te(e,i),e.globalCompositeOperation="multiply",e.fillStyle=so(a),e.fillRect(t,r,o,n),e.restore())}function uo(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;te(e,i),e.drawImage(t,r+(n-c)/2,o+(a-u)/2,c,u)}function Ot(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],C=i[0],O=1-i[1],D=m[0],H=1-m[1],d=C-g,M=O-v,p=D-g,E=H-v,P=d*E-p*M;if(Math.abs(P)<=1e-9)return null;let S=c-s,A=y-s,T=u-l,R=f-l,w={a:(S*E-A*M)/P,b:(d*A-p*S)/P,c:(T*E-R*M)/P,d:(d*R-p*T)/P,e:0,f:0};return w.e=s-w.a*g-w.b*v,w.f=l-w.c*g-w.d*v,w}function Ht(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 mo(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=Ot(s,e.uvs),c=Ht(e.uvs);return!l&&!c?null:{screenPts:s.flatMap(([u,y])=>[u,y]),uvAffine:l,uvSampleRect:c}}function fo(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<=K||(a[i]+=m/l*t,a[i+1]+=s/l*t)}return a}function me(e,t){return Math.max(0,Math.min(t,e))}function St(e,t,r,o,n,a,i,m){let s=t.naturalWidth||t.width||1,l=t.naturalHeight||t.height||1,c=me(Math.min(r.minU,r.maxU)*s,s),u=me(Math.max(r.minU,r.maxU)*s,s),y=me(Math.min(r.minV,r.maxV)*l,l),f=me(Math.max(r.minV,r.maxV)*l,l),g=Math.floor(c),v=Math.floor(y),C=Math.ceil(u)-g,O=Math.ceil(f)-v;C<1&&(g=Math.floor(me((r.minU+r.maxU)/2*s,s-1)),C=1),O<1&&(v=Math.floor(me((r.minV+r.maxV)/2*l,l-1)),O=1),g=Math.max(0,Math.min(s-1,g)),v=Math.max(0,Math.min(l-1,v)),C=Math.max(1,Math.min(s-g,C)),O=Math.max(1,Math.min(l-v,O)),te(e,m),e.drawImage(t,g,v,C,O,o,n,a,i)}function yo(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 ye(e,t,r={}){let{vertices:o,texture:n,uvs:a}=e;if(!o||o.length<3)return null;let i=r.tileSize??Ln,m=r.layerElevation??i,s=Y=>[Y[1]*i,Y[0]*i,Y[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 C=[f[0]/v,f[1]/v,f[2]/v],O=-(f[1]*g[2]-f[2]*g[1]),D=-(f[2]*g[0]-f[0]*g[2]),H=-(f[0]*g[1]-f[1]*g[0]),d=Math.hypot(O,D,H);if(d===0)return null;O/=d,D/=d,H/=d;let M=[D*C[2]-H*C[1],H*C[0]-O*C[2],O*C[1]-D*C[0]],p=l.map(Y=>{let G=Y[0]-c[0],Le=Y[1]-c[1],we=Y[2]-c[2];return[G*C[0]+Le*C[1]+we*C[2],G*M[0]+Le*M[1]+we*M[2]]}),E=1/0,P=1/0,S=-1/0,A=-1/0;for(let[Y,G]of p)Y<E&&(E=Y),Y>S&&(S=Y),G<P&&(P=G),G>A&&(A=G);let T=-E,R=-P,w=S-E,h=A-P;if(!Number.isFinite(w)||!Number.isFinite(h))return null;let I=[];for(let Y=0;Y<p.length;Y++){let[G,Le]=p[Y],we=G+T,Pn=Le+R;I.push(we,Pn)}let V=c[0]-T*C[0]-R*M[0],k=c[1]-T*C[1]-R*M[1],b=c[2]-T*C[2]-R*M[2],L=[C[0],C[1],C[2],0,M[0],M[1],M[2],0,O,D,H,0,V,k,b,1].join(","),U=r.directionalLight,yt=r.ambientLight,se=U?.direction??wn,pt=U?.color??Rn,mn=Math.max(0,U?.intensity??On),gt=yt?.color??Hn,ht=Math.max(0,yt?.intensity??Dn),$e=Math.hypot(se[0],se[1],se[2])||1,dn=se[0]/$e,fn=se[1]/$e,yn=se[2]/$e,Pt=mn*Math.max(0,O*dn+D*fn+H*yn),pn=io(Pt,pt,gt,ht),gn=lo(e.color??"#cccccc",Pt,pt,gt,ht),vt=null,xt=null;n&&a&&a.length>=3&&a.length===o.length&&(xt=Ht(a),vt=Ot(p.map(([Y,G])=>[Y+T,G+R]),a));let hn=n&&e.textureTriangles?.length?e.textureTriangles.map(Y=>mo(Y,i,m,c,C,M,T,R)).filter(Y=>!!Y):null;return{index:t,polygon:e,texture:n,tileSize:i,layerElevation:m,matrix:L,canvasW:Math.max(1,Math.ceil(w)),canvasH:Math.max(1,Math.ceil(h)),screenPts:I,uvAffine:vt,uvSampleRect:xt,textureTriangles:hn,normal:[O,D,H],textureTint:pn,shadedColor:gn}}function ke(e,t=1){let r=Array(e.length).fill(null),o=[],n=Gn(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<=de){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>de)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>de||s.canvasH+n*2>de){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 po(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 Yn(l))}));for(let l of e.entries){let c=l.texture?m.get(l.texture):null;a.save(),te(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)te(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=fo(f.screenPts,$n);a.save(),te(a,o),a.beginPath();for(let v=0;v<g.length;v+=2){let C=l.x+g[v],O=l.y+g[v+1];v===0?a.moveTo(C,O):a.lineTo(C,O)}a.closePath(),a.clip(),f.uvAffine?(te(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&&St(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;te(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?St(a,c,l.uvSampleRect,l.x,l.y,l.canvasW,l.canvasH,o):c&&uo(a,c,l.x,l.y,l.canvasW,l.canvasH,o);l.texture&&t==="baked"&&co(a,l.x,l.y,l.canvasW,l.canvasH,l.textureTint,o),a.restore()}let s=await yo(n);return n.width=1,n.height=1,{width:e.width,height:e.height,url:s}}async function go(e,t,r,o,n){let a=[];for(let i of e){if(n())break;a.push(await po(i,t,r,o))}return a}function He(e){for(let t of e)URL.revokeObjectURL(t)}function pe(e,t,r=(0,F.computed)(()=>{})){let o=(0,F.computed)(()=>t.value!=="dynamic"&&Kn()),n=(0,F.computed)(()=>{let m=e.value.map(s=>!s||s.texture?s:ne(s)||t.value!=="dynamic"&&(o.value||Rt(s))?null:s);return Zn(m,r.value)}),a=(0,F.ref)(n.value.packed.pages.map(m=>({width:m.width,height:m.height,url:null}))),i=[];return(0,F.watch)(()=>[n.value,t.value],([m,s],l,c)=>{let{packed:u,atlasScale:y}=m,f=!1;He(i),i=[],a.value=u.pages.map(g=>({width:g.width,height:g.height,url:null})),c(()=>{f=!0,He(i),i=[]}),!(u.pages.length===0||typeof document>"u")&&go(u.pages,s,document,y,()=>f).then(g=>{if(f){He(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}),(0,F.onBeforeUnmount)(()=>{He(i),i=[]}),{entries:(0,F.computed)(()=>n.value.packed.entries),pages:a,ready:(0,F.computed)(()=>a.value.length===0||a.value.every(m=>!!m.url))}}function ge({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:Be(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(0,F.h)("s",{class:y,style:c,...u,...a})}function he({entry:e,className:t,style:r,domAttrs:o,pointerEvents:n="auto"}){let a=Rt(e),i=a?null:Qn(e),m=a?{width:`${e.canvasW}px`,height:`${e.canvasH}px`,transform:Be(e.matrix),background:e.shadedColor,pointerEvents:n==="none"?"none":void 0,...r}:{width:`${e.canvasW}px`,height:`${e.canvasH}px`,transform:Be(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(0,F.h)(a?"b":"i",{class:l,style:m,...s,...o,onVnodeMounted:c,onVnodeUpdated:c})}function Pe({entry:e,textureLighting:t,className:r,style:o,domAttrs:n,pointerEvents:a="auto"}){let i=ro(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(0,F.h)("u",{class:s,style:{...i,...o},...m,...n})}var Ze=(0,_.defineComponent)({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=(0,_.inject)(N);if(!o)throw new Error("polycss: PolyScene must be used inside a PolyCamera.");let{store:n,sceneElRef:a}=o,i=(0,_.computed)(()=>({textureLighting:e.textureLighting??"baked",directionalLight:e.directionalLight,ambientLight:e.ambientLight}));(0,_.provide)(ze,i);let m=n.getState().cameraState,s=(0,_.ref)(null);(0,_.watch)(s,M=>{a.value=M});let l=!1;(0,_.onMounted)(()=>{l||typeof document<"u"&&(Ce(document),l=!0)}),(0,_.watch)(()=>e.debugShowBackfaces,M=>{let p=s.value;p&&p.classList.toggle("polycss-debug-show-backfaces",!!M)});let c=(0,_.computed)(()=>e.polygons??[]),u=(0,_.computed)(()=>({directionalLight:e.directionalLight})),y=be(c,u),f=(0,_.computed)(()=>({"--scene-transform":(0,Ae.createIsometricCamera)(m).getStyle().transform})),g=(0,_.computed)(()=>({tileSize:50,layerElevation:50,directionalLight:e.directionalLight,textureLighting:e.textureLighting,atlasScale:e.atlasScale})),v=(0,_.computed)(()=>{let M=e.textureLighting==="dynamic",p=M?void 0:e.directionalLight,E=M?void 0:e.ambientLight;return y.value.polygons.map((P,S)=>ye(P,S,{tileSize:g.value.tileSize,layerElevation:g.value.layerElevation,directionalLight:p,ambientLight:E}))}),C=(0,_.computed)(()=>e.textureLighting??"baked"),O=(0,_.computed)(()=>e.atlasScale),D=pe(v,C,O),H=(0,_.computed)(()=>{if(e.textureLighting!=="dynamic")return null;let M=e.directionalLight?.direction??[.4,-.7,.59],p=Math.hypot(M[0],M[1],M[2])||1,E=M[0]/p,P=M[1]/p,S=M[2]/p,A=(0,Ae.parseHexColor)(e.directionalLight?.color??"#ffffff")?.rgb??[255,255,255],T=(0,Ae.parseHexColor)(e.ambientLight?.color??"#ffffff")?.rgb??[255,255,255],R=e.directionalLight?.intensity??1,w=e.ambientLight?.intensity??.4,h=I=>(I/255).toFixed(4);return{"--plx":E.toFixed(4),"--ply":P.toFixed(4),"--plz":S.toFixed(4),"--plr":h(A[0]),"--plg":h(A[1]),"--plb":h(A[2]),"--pli":R.toFixed(4),"--par":h(T[0]),"--pag":h(T[1]),"--pab":h(T[2]),"--pai":w.toFixed(4)}}),d=(0,_.computed)(()=>{if(!e.autoCenter)return;let M=y.value.sceneBbox,p=g.value,E=(M.min[1]+M.max[1])/2*p.tileSize,P=(M.min[0]+M.max[0])/2*p.tileSize,S=(M.min[2]+M.max[2])/2*p.layerElevation;return`translate3d(${-E}px, ${-P}px, ${-S}px)`});return(0,_.onBeforeUnmount)(()=>{}),()=>{let M=`polycss-scene${e.class?` ${e.class}`:""}`,p=g.value,E=D.entries.value.map((A,T)=>{if(A)return ge({entry:A,page:D.pages.value[A.pageIndex],textureLighting:p.textureLighting??"baked"});let R=v.value[T];return!R||R.texture?null:ne(R)?Pe({entry:R,textureLighting:p.textureLighting??"baked"}):he({entry:R})}),P=t.default?.()??[],S=d.value?[(0,_.h)("div",{class:"polycss-offset",style:{"--offset-transform":d.value}},[...E,...P])]:[...E,...P];return(0,_.h)("div",{ref:s,class:M,"data-polycss-lighting":p.textureLighting??"baked","aria-hidden":"true",style:{...f.value,...H.value??null,...r.style},...Object.fromEntries(Object.entries(r).filter(([A])=>A!=="style"&&A!=="class"))},S)}}});var $=require("vue"),Te=require("@layoutit/polycss-core");var J=require("vue"),kt=require("@layoutit/polycss-core"),Dt=[],Ge=[];function Ee(e,t){let r=(0,J.ref)(Dt),o=(0,J.ref)(!!e.value),n=(0,J.ref)(null),a=(0,J.ref)(Ge),i=null;function m(){if(i){try{i.dispose()}catch{}i=null}}return(0,J.watch)(e,(s,l,c)=>{if(!s){m(),r.value=Dt,o.value=!1,n.value=null,a.value=Ge;return}let u=!1;o.value=!0,n.value=null;let y=i;(0,kt.loadMesh)(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??Ge}).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}),(0,J.onUnmounted)(()=>{m()}),{polygons:r,loading:o,error:n,warnings:a,dispose:m}}var Ke=new WeakMap;function It(e,t){Ke.set(e,t)}function _t(e){Ke.delete(e)}function le(e){let t=e;for(;t;){if(t instanceof HTMLElement){let r=Ke.get(t);if(r)return r}t=t.parentElement}return null}function Se(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=le(n);if(a&&Se(n,e,t))return a}return null}function ho(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 Po(e){if(e.length===0)return e;let t=(0,Te.computeSceneBbox)(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 q=(0,$.defineComponent)({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=(0,$.computed)(()=>e.src??""),a=(0,$.computed)(()=>e.mtl?{mtlUrl:e.mtl}:void 0),i=Ee(n,a.value),m=(0,$.computed)(()=>e.src?i.polygons.value:e.polygons??[]),s=(0,$.computed)(()=>e.autoCenter?Po(m.value):m.value),l=!t.polygon,c=At(),u=(0,$.computed)(()=>e.textureLighting??c?.value.textureLighting??"baked"),y=(0,$.computed)(()=>u.value==="dynamic"?void 0:c?.value.directionalLight),f=(0,$.computed)(()=>u.value==="dynamic"?void 0:c?.value.ambientLight),g=(0,$.computed)(()=>{if(u.value!=="dynamic")return null;let S=e.rotation;if(!S||S[0]===0&&S[1]===0&&S[2]===0)return null;let A=c?.value.directionalLight?.direction;if(!A)return null;let T=(0,Te.inverseRotateVec3)(A,S),R=Math.hypot(T[0],T[1],T[2])||1;return{"--plx":(T[0]/R).toFixed(4),"--ply":(T[1]/R).toFixed(4),"--plz":(T[2]/R).toFixed(4)}}),v=(0,$.ref)(e.rotation),C=(0,$.computed)(()=>{if(!l)return[];let S=y.value,A=S&&v.value?{...S,direction:(0,Te.inverseRotateVec3)(S.direction,v.value)}:S;return s.value.map((T,R)=>ye(T,R,{directionalLight:A,ambientLight:f.value}))}),O=(0,$.computed)(()=>e.atlasScale),D=pe(C,u,O),H=(0,$.ref)(null),d={get element(){return H.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),(0,$.onMounted)(()=>{H.value&&It(H.value,d)}),(0,$.onBeforeUnmount)(()=>{H.value&&_t(H.value)});let M=(0,$.inject)(N,null),p=null;function E(S,A,T){let R=[];if(typeof document<"u"&&typeof document.elementsFromPoint=="function"){let k=document.elementsFromPoint(A,T),b=new Set;for(let L of k){let U=le(L);U&&!b.has(U)&&(b.add(U),R.push({object:U}))}}let w=0,h=0,I=M?.cameraElRef.value;if(I){let k=I.getBoundingClientRect();k.width>0&&k.height>0&&(w=(A-k.left)/k.width*2-1,h=-((T-k.top)/k.height*2-1))}let V=0;return p&&(V=Math.hypot(A-p.x,T-p.y)),{object:R[0]?.object??d,eventObject:d,intersections:R,pointer:{x:w,y:h},delta:V,nativeEvent:S,stopPropagation:()=>S.stopPropagation()}}function P(S,A,T,R){S&&S(E(A,T,R))}return()=>{let A={transform:ho(e.position,e.scale,e.rotation),...g.value??void 0,...r.style},T=Object.fromEntries(Object.entries(r).filter(([b])=>b!=="style"&&b!=="class")),R=`polycss-mesh${e.class?` ${e.class}`:""}`,w={};e.onClick&&(w.onClick=b=>{let L=b;P(e.onClick,L,L.clientX,L.clientY)}),e.onContextMenu&&(w.onContextmenu=b=>{let L=b;P(e.onContextMenu,L,L.clientX,L.clientY)}),e.onDoubleClick&&(w.onDblclick=b=>{let L=b;P(e.onDoubleClick,L,L.clientX,L.clientY)}),e.onWheel&&(w.onWheel=b=>{let L=b;P(e.onWheel,L,L.clientX,L.clientY)}),w.onPointerdown=b=>{let L=b;p={x:L.clientX,y:L.clientY},P(e.onPointerDown,L,L.clientX,L.clientY)},w.onPointerup=b=>{let L=b;P(e.onPointerUp,L,L.clientX,L.clientY),p=null},e.onPointerMove&&(w.onPointermove=b=>{let L=b;P(e.onPointerMove,L,L.clientX,L.clientY)}),(e.onPointerOver||e.onPointerEnter)&&(w.onPointerenter=b=>{let L=b;P(e.onPointerOver,L,L.clientX,L.clientY),P(e.onPointerEnter,L,L.clientX,L.clientY)}),(e.onPointerOut||e.onPointerLeave)&&(w.onPointerleave=b=>{let L=b;P(e.onPointerOut,L,L.clientX,L.clientY),P(e.onPointerLeave,L,L.clientX,L.clientY)}),e.onPointerCancel&&(w.onPointercancel=b=>{let L=b;P(e.onPointerCancel,L,L.clientX,L.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(0,$.h)("div",{ref:H,class:`polycss-mesh polycss-mesh-loading${e.class?` ${e.class}`:""}`,style:A,...h,...w,...T},t.fallback?.()??[]);if(e.src&&i.error.value&&i.polygons.value.length===0)return(0,$.h)("div",{ref:H,class:`polycss-mesh polycss-mesh-error${e.class?` ${e.class}`:""}`,style:A,...h,...w,...T},t.error?.({error:i.error.value})??[]);let I=s.value,V=t.polygon?I.map((b,L)=>(0,$.h)("template",{key:L},t.polygon?.({polygon:b,index:L}))):D.entries.value.map((b,L)=>{if(b)return ge({entry:b,page:D.pages.value[b.pageIndex],textureLighting:u.value});let U=C.value[L];return!U||U.texture?null:ne(U)?Pe({entry:U,textureLighting:u.value}):he({entry:U})}),k=t.default?.()??[];return(0,$.h)("div",{ref:H,class:R,style:A,...h,...w,...T},[...V,...k])}}});var qe=require("vue");function Vt(e){return typeof e=="function"?(0,qe.computed)(()=>{let{texture:t,key:r}=e();return{texture:t,key:r}}):(0,qe.computed)(()=>({texture:e.texture,key:e.key}))}var W=require("vue");function vo(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 xo({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),C=m*f,O=(1-v)*g,D={width:`${e.canvasW}px`,height:`${e.canvasH}px`,transform:`matrix3d(${e.matrix})`,backgroundImage:`url(${t.texture})`,backgroundSize:`${f}px ${g}px`,backgroundPosition:`-${C}px -${O}px`,pointerEvents:i==="none"?"none":void 0,...n},H=e.polygon.data?Object.fromEntries(Object.entries(e.polygon.data).map(([M,p])=>[`data-${M}`,String(p)])):{},d=o?.trim()||void 0;return(0,W.h)("i",{class:d,style:D,...H,...a})}var Je=(0,W.defineComponent)({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=(0,W.computed)(()=>e.textureLighting??e.context?.textureLighting??"baked"),o=(0,W.computed)(()=>e.atlasScale??e.context?.atlasScale),n=(0,W.computed)(()=>e.material?.texture??e.texture),a=(0,W.computed)(()=>e.material&&e.uvs?vo(e.uvs):null),i=(0,W.computed)(()=>{let l=e.context?.tileSize??50;return ye({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=(0,W.computed)(()=>a.value?[]:[i.value]),s=pe(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[O,D]of Object.entries(e.data))f[`data-${O}`]=String(D);let g={...t,...f},v=Object.fromEntries(Object.entries(g).filter(([O])=>O!=="class"&&O!=="style")),C;return a.value&&e.material&&l?C=xo({plan:l,material:e.material,uvRect:a.value,className:g.class??void 0,style:g.style,domAttrs:v,pointerEvents:e.pointerEvents??"auto"}):c?C=ge({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&&(C=ne(l)?Pe({entry:l,textureLighting:r.value,className:g.class??void 0,style:g.style,domAttrs:v,pointerEvents:e.pointerEvents??"auto"}):he({entry:l,className:g.class??void 0,style:g.style,domAttrs:v,pointerEvents:e.pointerEvents??"auto"})),C?y?(0,W.h)("div",{class:"polycss-poly-wrapper",style:{position:"absolute",transformStyle:"preserve-3d",transform:y}},[C]):C:null}}});var j=require("vue"),Qe=require("@layoutit/polycss-core");var bo=150,$t=4,Co=513e-6,Mo=10,Ao=3,Ut=16.67,Eo=50,Xt=.1,Yt=10,zt=0,Nt=5e3,So=.3,To=.05;function Lo(e){return e===!0?-1:e===void 0||e===!1?1:e}function wo(e,t,r,o,n){let a=Lo(n),i=e/$t*a,m=t/$t*a;return{rotX:Math.max(0,Math.min(100,r-m)),rotY:((o-i)%360+360)%360}}function Ft(e,t,r,o,n){let a=Math.max(.01,r),i=Math.max(.1,Math.cos(o*Math.PI/180)),m=-e/(a*Qe.BASE_TILE),s=-t/(a*Qe.BASE_TILE*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 et=(0,j.defineComponent)({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:Xt},maxZoom:{type:Number,default:Yt},minDistance:{type:Number,default:zt},maxDistance:{type:Number,default:Nt},animate:{type:[Boolean,Object],default:!1}},emits:{change:e=>!0,"interaction-start":e=>!0,"interaction-end":e=>!0},setup(e,{emit:t}){let r=(0,j.inject)(N,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=(0,j.ref)(!1),g=null,v=null,C=null;function O(){let d=a.value;if(!d)return;let M=!1,p={x:0,y:0},E=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 I=h.clientX-y.x,V=h.clientY-y.y;y={x:h.clientX,y:h.clientY};let k=n.value,b=k.state;if(h.shiftKey){let{dWorldX:L,dWorldY:U}=Ft(I,V,b.zoom,b.rotX,b.rotY);k.update({target:[b.target[0]+L,b.target[1]+U,b.target[2]]})}else{let{rotX:L,rotY:U}=wo(I,V,b.rotX,b.rotY,e.invert);k.update({rotX:L,rotY:U})}i(),o.updateCameraFromRef(k),s()},S=h=>{if(u===h.pointerId){u=null,d.style.cursor=e.drag?"grab":"";try{h.target.releasePointerCapture(h.pointerId)}catch{}f.value=!1,c()}},A=h=>{h.preventDefault()},T=h=>{h.button===2&&(M=!0,p={x:h.clientX,y:h.clientY})},R=h=>{if(!M||!e.drag)return;let I=h.clientX-p.x,V=h.clientY-p.y;p={x:h.clientX,y:h.clientY};let k=n.value,b=k.state,{dWorldX:L,dWorldY:U}=Ft(I,V,b.zoom,b.rotX,b.rotY);k.update({target:[b.target[0]+L,b.target[1]+U,b.target[2]]}),i(),o.updateCameraFromRef(k),s()},w=h=>{h.button===2&&M&&(M=!1,c())};d.style.cursor="grab",d.style.touchAction="none",d.style.userSelect="none",d.addEventListener("pointerdown",E),d.addEventListener("pointermove",P),d.addEventListener("pointerup",S),d.addEventListener("pointercancel",S),d.addEventListener("contextmenu",A),d.addEventListener("mousedown",T),d.addEventListener("mousemove",R),d.addEventListener("mouseup",w),g=()=>{d.removeEventListener("pointerdown",E),d.removeEventListener("pointermove",P),d.removeEventListener("pointerup",S),d.removeEventListener("pointercancel",S),d.removeEventListener("contextmenu",A),d.removeEventListener("mousedown",T),d.removeEventListener("mousemove",R),d.removeEventListener("mouseup",w),d.style.cursor="",d.style.touchAction="",d.style.userSelect=""}}function D(){let d=a.value;if(!d)return;let M=!1,p=null,E=P=>{if(!e.wheel)return;P.preventDefault();let S=P.deltaMode===1?16:P.deltaMode===2?100:1,A=P.deltaY*S;P.ctrlKey?A*=Mo:A*=Ao;let T=n.value;if(e.dolly){let R=e.minDistance??zt,w=e.maxDistance??Nt,h=Math.max(R,Math.min(w,T.state.distance+A*To));T.update({distance:h})}else{let R=Math.exp(-A*Co),w=e.minZoom??Xt,h=e.maxZoom??Yt,I=Math.max(w,Math.min(h,T.state.zoom*R));T.update({zoom:I})}i(),o.updateCameraFromRef(T),M||(M=!0,l()),s(),p!==null&&clearTimeout(p),p=setTimeout(()=>{p=null,M=!1,c()},bo)};d.addEventListener("wheel",E,{passive:!1}),v=()=>{d.removeEventListener("wheel",E),p!==null&&clearTimeout(p)}}function H(){let d=null,M=!1,p=0,E=P=>{if(M)return;let S=e.animate;if(!S){d=requestAnimationFrame(E);return}if(f.value)p=P;else{let A=Math.min(Eo,p?P-p:Ut);p=P;let R=(S.speed??So)*(A/Ut),w=n.value,h=w.state;if(S.axis==="x"){let I=((h.rotX+R)%360+360)%360;w.update({rotX:I})}else{let I=((h.rotY+R)%360+360)%360;w.update({rotY:I})}i(),o.updateCameraFromRef(w),s()}d=requestAnimationFrame(E)};d=requestAnimationFrame(E),C=()=>{M=!0,d!==null&&cancelAnimationFrame(d),C=null}}return(0,j.onMounted)(()=>{e.drag&&O(),e.wheel&&D(),e.animate&&H()}),(0,j.onBeforeUnmount)(()=>{g?.(),v?.(),C?.(),g=null,v=null}),(0,j.watch)(()=>e.drag,d=>{d&&!g&&O(),!d&&g&&(g(),g=null)}),(0,j.watch)(()=>e.wheel,d=>{d&&!v&&D(),!d&&v&&(v(),v=null)}),(0,j.watch)(()=>!!e.animate,d=>{d&&!C&&H(),!d&&C&&C()}),()=>null}});var B=require("vue"),tt=require("@layoutit/polycss-core");var Ro=150,jt=4,Oo=513e-6,Ho=10,Do=3,Bt=16.67,ko=50,Wt=.1,Zt=10,Gt=0,Kt=5e3,Io=.3,_o=.05;function Vo(e){return e===!0?-1:e===void 0||e===!1?1:e}function qt(e,t,r,o,n){let a=Vo(n),i=e/jt*a,m=t/jt*a;return{rotX:Math.max(0,Math.min(100,r-m)),rotY:((o-i)%360+360)%360}}function $o(e,t,r,o,n){let a=Math.max(.01,r),i=Math.max(.1,Math.cos(o*Math.PI/180)),m=-e/(a*tt.BASE_TILE),s=-t/(a*tt.BASE_TILE*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 nt=(0,B.defineComponent)({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:Wt},maxZoom:{type:Number,default:Zt},minDistance:{type:Number,default:Gt},maxDistance:{type:Number,default:Kt},animate:{type:[Boolean,Object],default:!1}},emits:{change:e=>!0,"interaction-start":e=>!0,"interaction-end":e=>!0},setup(e,{emit:t}){let r=(0,B.inject)(N,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=(0,B.ref)(!1),g=null,v=null,C=null;function O(){let d=a.value;if(!d)return;let M=!1,p={x:0,y:0},E=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 I=h.clientX-y.x,V=h.clientY-y.y;y={x:h.clientX,y:h.clientY};let k=n.value,b=k.state;if(h.shiftKey){let{rotX:L,rotY:U}=qt(I,V,b.rotX,b.rotY,e.invert);k.update({rotX:L,rotY:U})}else{let{dWorldX:L,dWorldY:U}=$o(I,V,b.zoom,b.rotX,b.rotY);k.update({target:[b.target[0]+L,b.target[1]+U,b.target[2]]})}i(),o.updateCameraFromRef(k),s()},S=h=>{if(u===h.pointerId){u=null,d.style.cursor=e.drag?"grab":"";try{h.target.releasePointerCapture(h.pointerId)}catch{}f.value=!1,c()}},A=h=>{h.preventDefault()},T=h=>{h.button===2&&(M=!0,p={x:h.clientX,y:h.clientY})},R=h=>{if(!M||!e.drag)return;let I=h.clientX-p.x,V=h.clientY-p.y;p={x:h.clientX,y:h.clientY};let k=n.value,b=k.state,{rotX:L,rotY:U}=qt(I,V,b.rotX,b.rotY,e.invert);k.update({rotX:L,rotY:U}),i(),o.updateCameraFromRef(k),s()},w=h=>{h.button===2&&M&&(M=!1,c())};d.style.cursor="grab",d.style.touchAction="none",d.style.userSelect="none",d.addEventListener("pointerdown",E),d.addEventListener("pointermove",P),d.addEventListener("pointerup",S),d.addEventListener("pointercancel",S),d.addEventListener("contextmenu",A),d.addEventListener("mousedown",T),d.addEventListener("mousemove",R),d.addEventListener("mouseup",w),g=()=>{d.removeEventListener("pointerdown",E),d.removeEventListener("pointermove",P),d.removeEventListener("pointerup",S),d.removeEventListener("pointercancel",S),d.removeEventListener("contextmenu",A),d.removeEventListener("mousedown",T),d.removeEventListener("mousemove",R),d.removeEventListener("mouseup",w),d.style.cursor="",d.style.touchAction="",d.style.userSelect=""}}function D(){let d=a.value;if(!d)return;let M=!1,p=null,E=P=>{if(!e.wheel)return;P.preventDefault();let S=P.deltaMode===1?16:P.deltaMode===2?100:1,A=P.deltaY*S;P.ctrlKey?A*=Ho:A*=Do;let T=n.value;if(e.dolly){let R=e.minDistance??Gt,w=e.maxDistance??Kt,h=Math.max(R,Math.min(w,T.state.distance+A*_o));T.update({distance:h})}else{let R=Math.exp(-A*Oo),w=e.minZoom??Wt,h=e.maxZoom??Zt,I=Math.max(w,Math.min(h,T.state.zoom*R));T.update({zoom:I})}i(),o.updateCameraFromRef(T),M||(M=!0,l()),s(),p!==null&&clearTimeout(p),p=setTimeout(()=>{p=null,M=!1,c()},Ro)};d.addEventListener("wheel",E,{passive:!1}),v=()=>{d.removeEventListener("wheel",E),p!==null&&clearTimeout(p)}}function H(){let d=null,M=!1,p=0,E=P=>{if(M)return;let S=e.animate;if(!S){d=requestAnimationFrame(E);return}if(f.value)p=P;else{let A=Math.min(ko,p?P-p:Bt);p=P;let R=(S.speed??Io)*(A/Bt),w=n.value,h=w.state;if(S.axis==="x"){let I=((h.rotX+R)%360+360)%360;w.update({rotX:I})}else{let I=((h.rotY+R)%360+360)%360;w.update({rotY:I})}i(),o.updateCameraFromRef(w),s()}d=requestAnimationFrame(E)};d=requestAnimationFrame(E),C=()=>{M=!0,d!==null&&cancelAnimationFrame(d),C=null}}return(0,B.onMounted)(()=>{e.drag&&O(),e.wheel&&D(),e.animate&&H()}),(0,B.onBeforeUnmount)(()=>{g?.(),v?.(),C?.(),g=null,v=null}),(0,B.watch)(()=>e.drag,d=>{d&&!g&&O(),!d&&g&&(g(),g=null)}),(0,B.watch)(()=>e.wheel,d=>{d&&!v&&D(),!d&&v&&(v(),v=null)}),(0,B.watch)(()=>!!e.animate,d=>{d&&!C&&H(),!d&&C&&C()}),()=>null}});var X=require("vue"),Ve=require("@layoutit/polycss-core");var ot="#ff3653",rt="#8adb00",at="#2c8fff",Uo=.6,Xo=.8,Yo=1,lt=50,Jt=60,zo=.6,No=.0125,Fo=.15,jo=.04,Bo=1,Wo=.012,Zo=64,Go=1e-4,Qt={0:1,1:0,2:2},en=[{cssAxis:0,sign:1,key:"x",color:ot},{cssAxis:0,sign:-1,key:"-x",color:ot},{cssAxis:1,sign:1,key:"y",color:rt},{cssAxis:1,sign:-1,key:"-y",color:rt},{cssAxis:2,sign:1,key:"z",color:at},{cssAxis:2,sign:-1,key:"-z",color:at}],tn=[{cssAxis:0,key:"x",color:ot},{cssAxis:1,key:"y",color:rt},{cssAxis:2,key:"z",color:at}];function nn(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 an(e,t){return!t||t<=0?e:Math.round(e/t)*t}function Ko(e){return e.replace("-","")[0]}function qo(e){if(e.length===0)return Jt;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)*lt*zo:Jt}function on(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<Go)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=an(v,e.translationSnap);let C=[l[0]+v*r[0],l[1]+v*r[1],l[2]+v*r[2]];e.onObjectChange?.({object:e.target,position:C}),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 rn(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=an(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 Jo(e){return!!e&&typeof e=="object"&&"value"in e}function Qo(e){return e?Jo(e)?e.value??null:e:null}var it=(0,X.defineComponent)({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=(0,X.ref)(null),o=(0,X.ref)(null),n=(0,X.ref)(new Map),a=(0,X.computed)(()=>Qo(e.object)),i=(0,X.ref)(0);(0,X.onMounted)(()=>{i.value++});let m=(0,X.computed)(()=>(i.value,qo(a.value?.getPolygons()??[]))),s=(0,X.computed)(()=>m.value*e.size);function l(p){return o.value===p?Yo:r.value===p?Xo:Uo}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=(0,X.inject)(N,void 0),C=null;(0,X.onMounted)(()=>{let p=v?.cameraElRef.value;if(!p)return;let E=P=>{let S=a.value;if(!S||!e.enabled||P.target?.closest(".polycss-transform-gizmo"))return;let T={x:e.showX,y:e.showY,z:e.showZ},R=e.mode==="translate"?en:tn;for(let w of R){let h=w.key.replace("-","")[0];if(!T[h])continue;let I=document.querySelector(`.polycss-transform-${e.mode==="translate"?"arrow":"ring"}--${w.key}`);if(!I||!Se(I,P.clientX,P.clientY))continue;P.preventDefault(),P.stopPropagation();let V=I.closest("[data-poly-transform-controls]");if(!V)return;if(o.value=w.key,e.mode==="translate"){let k=w;on({cssAxis:k.cssAxis,sign:k.sign,shaftLengthCss:s.value,wrapper:V,target:S,startClientX:P.clientX,startClientY:P.clientY,translationSnap:e.translationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:b=>{b||(o.value=null),y(b)}})}else rn({cssAxis:w.cssAxis,wrapper:V,target:S,startClientX:P.clientX,startClientY:P.clientY,rotationSnap:e.rotationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:k=>{k||(o.value=null),y(k)}});return}};p.addEventListener("pointerdown",E),C=()=>p.removeEventListener("pointerdown",E)}),(0,X.onBeforeUnmount)(()=>{C?.()});let O=(0,X.computed)(()=>{if(e.mode!=="translate")return[];i.value;let E=s.value/lt;return en.filter(P=>({x:e.showX,y:e.showY,z:e.showZ})[Ko(P.key)]).map(P=>{let S=l(P.key);return{spec:P,polygons:(0,Ve.arrowPolygons)({axis:Qt[P.cssAxis],sign:P.sign,shaftLength:E,shaftHalfThickness:E*No,headLength:E*Fo,headHalfThickness:E*jo,color:nn(P.color,S)})}})}),D=(0,X.computed)(()=>{if(e.mode!=="rotate")return[];i.value;let E=s.value*Bo/lt;return tn.filter(P=>({x:e.showX,y:e.showY,z:e.showZ})[P.key]).map(P=>{let S=l(P.key);return{spec:P,polygons:(0,Ve.ringPolygons)({axis:Qt[P.cssAxis],radius:E,halfThickness:E*Wo,segments:Zo,color:nn(P.color,S)})}})});function H(p){return E=>{if(!e.enabled)return;let P=a.value;if(!P)return;E.stopPropagation();let A=E.eventObject.element?.closest("[data-poly-transform-controls]");A&&(o.value=p.key,on({cssAxis:p.cssAxis,sign:p.sign,shaftLengthCss:s.value,wrapper:A,target:P,startClientX:E.nativeEvent.clientX,startClientY:E.nativeEvent.clientY,translationSnap:e.translationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:T=>{T||(o.value=null),y(T)}}))}}function d(p){return E=>{if(!e.enabled)return;let P=a.value;if(!P)return;E.stopPropagation();let A=E.eventObject.element?.closest("[data-poly-transform-controls]");A&&(o.value=p.key,rn({cssAxis:p.cssAxis,wrapper:A,target:P,startClientX:E.nativeEvent.clientX,startClientY:E.nativeEvent.clientY,rotationSnap:e.rotationSnap,onChange:c,onObjectChange:u,onMouseDown:f,onMouseUp:g,onDraggingChanged:T=>{T||(o.value=null),y(T)}}))}}function M(p){return{onPointerOver:()=>{r.value=p},onPointerOut:()=>{r.value===p&&(r.value=null)}}}return()=>{let p=a.value;if(!p)return null;let E=p.getPosition()??[0,0,0],P={position:"absolute",transformStyle:"preserve-3d",transform:`translate3d(${E[0]}px, ${E[1]}px, ${E[2]}px)`,zIndex:1e3},S=e.mode==="translate"?O.value.map(({spec:A,polygons:T})=>(0,X.h)(q,{key:A.key,polygons:T,class:`polycss-transform-gizmo polycss-transform-arrow polycss-transform-arrow--${A.key}`,textureLighting:"baked",onPointerDown:H(A),...M(A.key)})):D.value.map(({spec:A,polygons:T})=>(0,X.h)(q,{key:A.key,polygons:T,class:`polycss-transform-gizmo polycss-transform-ring polycss-transform-ring--${A.key}`,textureLighting:"baked",onPointerDown:d(A),...M(A.key)}));return(0,X.h)("div",{class:"polycss-transform-controls","data-poly-transform-controls":"","data-poly-mode":e.mode,"data-poly-space":e.space,style:P},S)}}});var z=require("vue");var ve=Symbol("polycss.selection"),st=(0,z.defineComponent)({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=(0,z.reactive)({selected:[]}),n=(0,z.computed)(()=>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)};(0,z.provide)(ve,{selected:n,api:i});let m=(0,z.inject)(N,void 0),s=(c,u)=>_e(c,u,y=>!y.closest("[data-poly-transform-controls]")),l=null;return(0,z.onMounted)(()=>{let c=m?.cameraElRef.value;if(!c)return;let u=y=>{if(y.target?.closest("[data-poly-transform-controls]"))return;let g=le(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)}),(0,z.onBeforeUnmount)(()=>{l?.()}),()=>(0,z.h)("div",{style:{display:"contents"},"data-poly-select":""},r.default?.())}});function ct(){let e=(0,z.inject)(ve,void 0);return e?e.selected:(0,z.ref)([])}function ut(){let e=(0,z.inject)(ve,void 0);if(!e)throw new Error("polycss: usePolySelectionApi must be used inside <PolySelect>.");return e.api}var xe=require("vue"),ln=require("@layoutit/polycss-core");var mt=(0,xe.defineComponent)({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=(0,xe.computed)(()=>(0,ln.axesHelperPolygons)({size:e.size,thickness:e.thickness,negative:e.negative,xColor:e.xColor,yColor:e.yColor,zColor:e.zColor}));return()=>(0,xe.h)(q,{polygons:t.value})}});var oe=require("vue"),sn=require("@layoutit/polycss-core");var dt=50,ft=(0,oe.defineComponent)({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=(0,oe.computed)(()=>e.color??e.light.color??"#ffd54a"),r=(0,oe.computed)(()=>(0,sn.octahedronPolygons)({center:[0,0,0],size:e.size,color:t.value})),o=(0,oe.computed)(()=>{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*dt,y*dt,g*dt]});return()=>(0,oe.h)(q,{polygons:r.value,position:o.value})}});var Z=require("vue"),cn=require("@layoutit/polycss-core");function ie(e){return e&&typeof e=="object"&&"value"in e?e.value:e}function un(e,t,r){let o=(0,Z.ref)(null),n=null,a=null,i=null,m=(0,Z.ref)(0);function s(){return r==null?o.value:ie(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 D(H){if(i===null){i=H,a=requestAnimationFrame(D);return}let d=(H-i)/1e3;i=H,n?.update(d),a=requestAnimationFrame(D)}a=requestAnimationFrame(D)}function y(){c();let D=ie(e),H=ie(t);if(!D||D.length===0||!H)return;let d=s();d&&(n=(0,cn.createPolyAnimationMixer)(d,H),m.value++,u())}let f=(0,Z.watch)(()=>{let D=ie(e),H=ie(t),d=r!=null?ie(r):o.value;return{c:D,ctrl:H,r:d}},()=>y(),{immediate:!0,deep:!1});(0,Z.onUnmounted)(()=>{f(),c()});let g=(0,Z.computed)(()=>ie(e)??[]),v=(0,Z.computed)(()=>g.value.map(D=>D.name)),C=(0,Z.computed)(()=>(m.value,n)),O=(0,Z.computed)(()=>{m.value;let D=g.value,H={};for(let d of D)Object.defineProperty(H,d.name,{enumerable:!0,get(){if(!n)return null;try{return n.clipAction(d.name)}catch{return null}}});return H});return{ref:o,mixer:C,clips:g,names:v,actions:O}}var x=require("@layoutit/polycss-core");0&&(module.exports={BASE_TILE,DEFAULT_CAMERA_STATE,DEFAULT_PROJECTION,LoopOnce,LoopPingPong,LoopRepeat,Poly,PolyAxesHelper,PolyCamera,PolyCameraContextKey,PolyDirectionalLightHelper,PolyMapControls,PolyMesh,PolyOrbitControls,PolyOrthographicCamera,PolyPerspectiveCamera,PolyScene,PolySelect,PolySelectionContextKey,PolyTransformControls,arrowPolygons,axesHelperPolygons,bakeSolidTextureSampledPolygons,bakeSolidTextureSamples,buildSceneContext,clampChannel,computeSceneBbox,computeShapeLighting,computeTexturePaintMetrics,coverPlanarPolygons,createIsometricCamera,createPolyAnimationMixer,cullInteriorPolygons,findMeshUnderPoint,findPolyMeshHandle,formatColor,injectPolyBaseStyles,inverseRotateVec3,loadMesh,mergePolygons,normalizeInvertMultiplier,normalizePolygons,octahedronPolygons,parseColor,parseGltf,parseHexColor,parseMtl,parseObj,parsePureColor,parseRgbColor,parseVox,pointInMeshElement,polygonFaces,ringPolygons,rotateVec3,shadeColor,usePolyAnimation,usePolyCamera,usePolyMaterial,usePolyMesh,usePolySceneContext,usePolySelect,usePolySelectionApi});
|