mirage-engine 0.2.16 → 0.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mirage-engine.js +1019 -418
- package/dist/mirage-engine.umd.js +136 -72
- package/dist/src/core/Mirage.d.ts +1 -0
- package/dist/src/index.d.ts +1 -0
- package/package.json +5 -6
- package/dist/dev/main.d.ts +0 -1
|
@@ -1,85 +1,149 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
`),
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
(function(y,w){typeof exports=="object"&&typeof module!="undefined"?w(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],w):(y=typeof globalThis!="undefined"?globalThis:y||self,w(y.MirageEngine={},y.THREE))})(this,function(y,w){"use strict";var Pe=Object.defineProperty;var Xe=(y,w,M)=>w in y?Pe(y,w,{enumerable:!0,configurable:!0,writable:!0,value:M}):y[w]=M;var u=(y,w,M)=>(Xe(y,typeof w!="symbol"?w+"":w,M),M);var ue=(y,w,M)=>new Promise((p,A)=>{var F=O=>{try{N(M.next(O))}catch(L){A(L)}},X=O=>{try{N(M.throw(O))}catch(L){A(L)}},N=O=>O.done?p(O.value):Promise.resolve(O.value).then(F,X);N((M=M.apply(y,w)).next())});function M(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const p=M(w),A=0,F=1,X=2,N=4,O=8,L=16,I=1,U=2,fe=["include-tree","exclude-tree","include-self","exclude-self","end"];class ee{static getBaseline(e){if(this.cache.has(e))return this.cache.get(e);const t=this.calculateBaselineFromDOM(e);return this.cache.set(e,t),t}static calculateBaselineFromDOM(e){if(typeof document=="undefined")return 0;const t=document.createElement("div"),i=document.createElement("span"),r=document.createElement("img");t.style.visibility="hidden",t.style.position="absolute",t.style.top="0px",t.style.left="0px",t.style.font=e,t.style.margin="0",t.style.padding="0",t.style.border="none",i.style.margin="0",i.style.padding="0",i.style.border="none",i.style.lineHeight="normal",r.width=1,r.height=1,r.style.verticalAlign="baseline",i.appendChild(document.createTextNode("Hidden Text")),t.appendChild(i),t.appendChild(r),document.body.appendChild(t);const a=r.offsetTop-i.offsetTop;return document.body.removeChild(t),a}}u(ee,"cache",new Map);class ge extends p.MeshBasicMaterial{constructor(t,i,r,a,o=2){super({transparent:!0,side:p.FrontSide,color:16777215});u(this,"canvas");u(this,"ctx");u(this,"qualityFactor");if(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),!this.ctx)throw new Error("[Mirage] Failed to create canvas context");this.qualityFactor=o,this.map=new p.CanvasTexture(this.canvas),this.map.colorSpace=p.LinearSRGBColorSpace,this.map.minFilter=p.LinearFilter,this.map.magFilter=p.LinearFilter,this.updateText(t,i,r,a)}wrapText(t,i){const r=t.split(`
|
|
2
|
+
`),a=[];return r.forEach(o=>{const n=o.match(/[^\s\-]+\-?|\-|\s+/g)||[];if(n.length===0){a.push("");return}let l=n[0];for(let c=1;c<n.length;c++){const d=n[c];this.ctx.measureText(l+d).width<=i+2?l+=d:(l&&a.push(l),l=d.trimStart())}l&&a.push(l)}),a}updateText(t,i,r,a,o){o!==void 0&&(this.qualityFactor=o);const l=(window.devicePixelRatio||1)*this.qualityFactor,c=r*l,d=a*l;this.canvas.width!==c||this.canvas.height!==d?(this.canvas.width=c,this.canvas.height=d):this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(l,0,0,l,0,0),this.ctx.font=i.font,this.ctx.fillStyle=i.color,this.ctx.textBaseline="alphabetic",this.ctx.globalAlpha=1;const f=this.wrapText(t,r),h=i.lineHeight,m=ee.getBaseline(i.font);f.forEach((g,C)=>{const x=C*h+m;let R=0;i.textAlign==="center"?R=r/2:i.textAlign==="right"&&(R=r),this.ctx.textAlign=i.textAlign,this.ctx.fillText(g,R,x)}),this.map&&(this.map.needsUpdate=!0)}dispose(){this.map&&this.map.dispose(),super.dispose()}}function Y(s){return typeof s=="number"?s:parseFloat(s)||0}function _(s){if(!s||s==="transparent")return{color:new p.Color(16777215),alpha:0};const e=s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),r=parseInt(e[3],10),a=e[4]!==void 0?parseFloat(e[4]):1;return{color:new p.Color(`rgb(${t}, ${i}, ${r})`),alpha:a}}return{color:new p.Color(s),alpha:1}}function pe(s){const e=[];let t="",i=0;for(let r=0;r<s.length;r++){const a=s[r];if(a==="(")i++;else if(a===")")i--;else if(a===","&&i===0){e.push(t.trim()),t="";continue}t+=a}return t&&e.push(t.trim()),e}function me(s){if(!s||typeof s!="string"||!s.includes("linear-gradient"))return null;const e=s.match(/linear-gradient\((.*)\)/);if(!e)return null;const t=e[1],i=pe(t);let r=Math.PI,a=0;const o=i[0].trim();if(o.startsWith("to "))o==="to top"?r=0:o==="to right"?r=Math.PI/2:o==="to bottom"?r=Math.PI:o==="to left"?r=Math.PI*1.5:o==="to top right"||o==="to right top"?r=Math.PI/4:o==="to bottom right"||o==="to right bottom"?r=Math.PI*.75:o==="to bottom left"||o==="to left bottom"?r=Math.PI*1.25:(o==="to top left"||o==="to left top")&&(r=Math.PI*1.75),a=1;else if(o.endsWith("deg")||o.endsWith("rad")||o.endsWith("turn")){const l=parseFloat(o);o.endsWith("deg")?r=l*(Math.PI/180):o.endsWith("rad")?r=l:o.endsWith("turn")&&(r=l*Math.PI*2),a=1}const n=[];for(let l=a;l<i.length&&!(n.length>=8);l++){const c=i[l].trim(),d=c.lastIndexOf(" ");let f=c,h=null;if(d!==-1&&!c.endsWith(")")){const g=c.substring(d+1);(g.endsWith("%")||g.endsWith("px")||!isNaN(parseFloat(g)))&&(f=c.substring(0,d).trim(),h=g)}const m=_(f);n.push({color:m.color,alpha:m.alpha,rawStop:h,stop:0})}if(n.length>0){for(let c=0;c<n.length;c++)n[c].rawStop!==null&&(n[c].stop=parseFloat(n[c].rawStop)/100);n[0].rawStop===null&&(n[0].stop=0),n.length>1&&n[n.length-1].rawStop===null&&(n[n.length-1].stop=1);let l=0;for(let c=1;c<n.length;c++)if(n[c].rawStop!==null||c===n.length-1){const d=c-l;if(d>1){const f=n[l].stop,m=(n[c].stop-f)/d;for(let g=1;g<d;g++)n[l+g].stop=f+m*g}l=c}}return{angle:r,stops:n}}const be=`varying vec2 vUv;
|
|
3
|
+
varying vec4 vScreenPos;
|
|
4
|
+
void main() {
|
|
5
|
+
vUv = uv;
|
|
6
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
|
7
|
+
vScreenPos = gl_Position;
|
|
8
|
+
}`,xe=`varying vec2 vUv;
|
|
9
|
+
uniform vec2 uSize;
|
|
10
|
+
uniform vec4 uBorderRadius;
|
|
11
|
+
uniform float uBorderWidth;
|
|
12
|
+
uniform vec4 uBgColor;
|
|
13
|
+
uniform vec4 uBorderColor;
|
|
14
|
+
uniform float uOpacity;
|
|
15
|
+
|
|
16
|
+
uniform int uGradientCount;
|
|
17
|
+
uniform float uGradientAngle;
|
|
18
|
+
uniform vec4 uGradientColors[8];
|
|
19
|
+
uniform float uGradientStops[8];
|
|
20
|
+
|
|
21
|
+
#INJECT_DECLARATIONS
|
|
22
|
+
|
|
23
|
+
vec3 linearToSrgb(vec3 linearColor) {
|
|
24
|
+
vec3 linearPart = 12.92 * linearColor;
|
|
25
|
+
vec3 curvePart = 1.055 * pow(linearColor, vec3(1.0 / 2.4)) - 0.055;
|
|
26
|
+
vec3 switchCondition = step(vec3(0.0031308), linearColor);
|
|
27
|
+
return mix(linearPart, curvePart, switchCondition);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
vec3 srgbToLinear(vec3 srgbColor) {
|
|
31
|
+
vec3 linearPart = srgbColor / 12.92;
|
|
32
|
+
vec3 curvePart = pow((srgbColor + vec3(0.055)) / 1.055, vec3(2.4));
|
|
33
|
+
vec3 switchCondition = step(vec3(0.04045), srgbColor);
|
|
34
|
+
return mix(linearPart, curvePart, switchCondition);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
vec4 blendSrcOverInLinear(vec4 front, vec4 back) {
|
|
38
|
+
front.rgb = srgbToLinear(front.rgb);
|
|
39
|
+
back.rgb = srgbToLinear(back.rgb);
|
|
40
|
+
float aOut = front.a + back.a * (1.0 - front.a);
|
|
41
|
+
float safeAlpha = max(aOut, 0.0001);
|
|
42
|
+
vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
|
|
43
|
+
return vec4(linearToSrgb(cOut), aOut);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
vec4 blendSrcOver(vec4 front, vec4 back) {
|
|
47
|
+
float aOut = front.a + back.a * (1.0 - front.a);
|
|
48
|
+
float safeAlpha = max(aOut, 0.0001);
|
|
49
|
+
vec3 cOut = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / safeAlpha;
|
|
50
|
+
return vec4(cOut, aOut);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
float sdRoundedBox(vec2 p, vec2 b, float r) {
|
|
54
|
+
vec2 q = abs(p) - b + r;
|
|
55
|
+
return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
float sdVisualBox(vec2 p, vec2 b, float r) {
|
|
59
|
+
vec2 q = abs(p) - b + r;
|
|
60
|
+
float n = 2.01;
|
|
61
|
+
float d = pow(pow(max(q.x, 0.0), n) + pow(max(q.y, 0.0), n), 1.0/n) - r;
|
|
62
|
+
return min(max(q.x, q.y), 0.0) + d;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
vec4 calculateGradientLayer(vec2 uv) {
|
|
66
|
+
if (uGradientCount < 2) return uGradientColors[0];
|
|
67
|
+
|
|
68
|
+
vec2 dir = vec2(sin(uGradientAngle), cos(uGradientAngle));
|
|
69
|
+
vec2 p = (uv - 0.5) * uSize;
|
|
70
|
+
float proj = dot(p, dir);
|
|
71
|
+
float L = abs(uSize.x * dir.x) + abs(uSize.y * dir.y);
|
|
72
|
+
float t = clamp((proj / L) + 0.5, 0.0, 1.0);
|
|
13
73
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
uniform float uOpacity;
|
|
20
|
-
uniform float uBgOpacity;
|
|
21
|
-
uniform float uBorderOpacity;
|
|
22
|
-
|
|
23
|
-
#INJECT_DECLARATIONS
|
|
24
|
-
|
|
25
|
-
float sdRoundedBox(vec2 p, vec2 b, float r) {
|
|
26
|
-
vec2 q = abs(p) - b + r;
|
|
27
|
-
|
|
28
|
-
return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
void main() {
|
|
32
|
-
vec2 p = (vUv - 0.5) * uSize;
|
|
33
|
-
vec2 halfSize = uSize * 0.5;
|
|
34
|
-
|
|
35
|
-
#INJECT_UV_MODIFIER
|
|
74
|
+
vec4 color = uGradientColors[0];
|
|
75
|
+
for (int i = 1; i < 8; i++) {
|
|
76
|
+
if (i >= uGradientCount) break;
|
|
77
|
+
float prevStop = uGradientStops[i-1];
|
|
78
|
+
float currStop = uGradientStops[i];
|
|
36
79
|
|
|
37
|
-
|
|
38
|
-
|
|
80
|
+
float factor = clamp((t - prevStop) / (currStop - prevStop + 0.00001), 0.0, 1.0);
|
|
81
|
+
color = mix(color, uGradientColors[i], factor);
|
|
82
|
+
}
|
|
83
|
+
// return vec4(linearToSrgb(color.rgb), color.a);
|
|
84
|
+
return vec4(color);
|
|
85
|
+
}
|
|
39
86
|
|
|
40
|
-
|
|
87
|
+
void main() {
|
|
88
|
+
vec2 p = (vUv - 0.5) * uSize;
|
|
89
|
+
vec2 halfSize = uSize * 0.5;
|
|
41
90
|
|
|
42
|
-
|
|
43
|
-
vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
|
|
44
|
-
float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
|
|
45
|
-
float d = sdRoundedBox(p, halfSize, r);
|
|
91
|
+
#INJECT_UV_MODIFIER
|
|
46
92
|
|
|
47
|
-
|
|
48
|
-
|
|
93
|
+
// color decision pipeline
|
|
94
|
+
vec4 baseColor = vec4(uBgColor.rgb, uBgColor.a);
|
|
49
95
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
borderAlpha = 0.0;
|
|
55
|
-
}
|
|
96
|
+
if (uGradientCount > 0) {
|
|
97
|
+
vec4 gradColor = calculateGradientLayer(vUv);
|
|
98
|
+
baseColor = blendSrcOver(gradColor, baseColor);
|
|
99
|
+
}
|
|
56
100
|
|
|
57
|
-
|
|
58
|
-
float aFront = borderAlpha;
|
|
59
|
-
float aBack = baseColor.a;
|
|
60
|
-
float aOut = aFront + aBack * (1.0 - aFront);
|
|
101
|
+
#INJECT_BASE_COLOR
|
|
61
102
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
103
|
+
// Hybrid SDF
|
|
104
|
+
vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
|
|
105
|
+
float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
|
|
106
|
+
r = min(r, min(halfSize.x, halfSize.y));
|
|
65
107
|
|
|
66
|
-
|
|
67
|
-
#INJECT_COLOR_MODIFIER
|
|
108
|
+
float d = sdRoundedBox(p, halfSize, r);
|
|
68
109
|
|
|
69
|
-
|
|
70
|
-
|
|
110
|
+
float d_smooth = sdVisualBox(p, halfSize, r);
|
|
111
|
+
float d_visual = d_smooth / fwidth(d_smooth);
|
|
71
112
|
|
|
72
|
-
|
|
113
|
+
// rendering pipeline
|
|
114
|
+
float bgMask = 1.0 - smoothstep(-0.5, 0.5, d_visual);
|
|
73
115
|
|
|
74
|
-
|
|
116
|
+
float halfBorder = uBorderWidth * 0.5;
|
|
117
|
+
float borderD = abs(d + halfBorder) - halfBorder;
|
|
118
|
+
float borderAlpha = (1.0 - smoothstep(0.0, 1.0, borderD)) * uBorderColor.a;
|
|
119
|
+
if (uBorderWidth <= 0.01) {
|
|
120
|
+
borderAlpha = 0.0;
|
|
75
121
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
`:"",c=(s==null?void 0:s.colorModifier)||"",g=H.replace("#INJECT_DECLARATIONS",a).replace("#INJECT_UV_MODIFIER",o).replace("#INJECT_BASE_COLOR",l).replace("#INJECT_COLOR_MODIFIER",c),u=B(i.backgroundColor),p=B(i.borderColor),m={uSize:{value:new d.Vector2(e,t)},uBorderRadius:{value:new d.Vector4(0,0,0,0)},uBorderWidth:{value:S(i.borderWidth)},uBgColor:{value:u.color},uBorderColor:{value:p.color},uOpacity:{value:(T=i.opacity)!=null?T:1},uBgOpacity:{value:u.alpha},uBorderOpacity:{value:p.alpha},uTexture:{value:null}};return X(m.uBorderRadius.value,i.borderRadius),n&&(m.uTexture.value=r),new d.ShaderMaterial({uniforms:m,vertexShader:W,fragmentShader:g,transparent:!0,side:d.FrontSide})}function G(i,e,t,r,s){var o;const n=B(e.backgroundColor),a=B(e.borderColor);i.uniforms.uSize.value.set(t,r),X(i.uniforms.uBorderRadius.value,e.borderRadius),i.uniforms.uBorderWidth.value=S(e.borderWidth),i.uniforms.uBgColor.value.copy(n.color),i.uniforms.uBorderColor.value.copy(a.color),i.uniforms.uOpacity.value=(o=e.opacity)!=null?o:1,i.uniforms.uBgOpacity.value=n.alpha,i.uniforms.uBorderOpacity.value=a.alpha,i.uniforms.uTexture&&s!==void 0&&(i.uniforms.uTexture.value=s)}const L={create(i,e,t,r,s,n=2,a=null){if(i==="BOX")return $(e,r,s,a);if(i==="TEXT"){const o=A(t||"",e,r,s,n);return new d.MeshBasicMaterial({map:o,transparent:!0,side:d.FrontSide,color:16777215})}return new d.MeshBasicMaterial({visible:!1})},update(i,e,t,r,s,n,a=2,o){if(e==="BOX")G(i,t,s,n,o);else if(e==="TEXT"){const l=i;l.map&&l.map.dispose();const c=A(r||"",t,s,n,a);l.map=c,l.needsUpdate=!0}}};class j{constructor(e,t,r){h(this,"canvas");h(this,"scene");h(this,"camera");h(this,"renderer");h(this,"renderTarget",null);h(this,"renderOrder",0);h(this,"qualityFactor",2);h(this,"mode","overlay");h(this,"target");h(this,"mountContainer");h(this,"targetRect");h(this,"meshMap",new Map);var a,o;this.target=e,this.mountContainer=r,this.mode=(a=t.mode)!=null?a:"overlay",this.canvas=document.createElement("canvas"),this.scene=new d.Scene,this.targetRect=this.target.getBoundingClientRect();const s=this.targetRect.width,n=this.targetRect.height;this.camera=new d.OrthographicCamera(s/-2,s/2,n/2,n/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(0),this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(s,n),this.applyTextQuality((o=t.quality)!=null?o:"medium")}createRenderTarget(){this.renderTarget=new d.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:d.LinearFilter,magFilter:d.LinearFilter,format:d.RGBAFormat,stencilBuffer:!1,depthBuffer:!0,samples:4})}applyTextQuality(e){if(typeof e=="number"){this.qualityFactor=Math.max(.1,e);return}switch(e){case"low":this.qualityFactor=1;break;case"high":this.qualityFactor=4;break;case"medium":default:this.qualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}dispose(){this.renderer.dispose(),this.canvas.remove()}setSize(e,t){this.renderer.setSize(e,t),this.renderTarget&&this.renderTarget.setSize(e*this.qualityFactor,t*this.qualityFactor),this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}syncScene(e){const t=this.target.getBoundingClientRect(),r=Math.abs(t.width-this.targetRect.width)>.1||Math.abs(t.height-this.targetRect.height)>.1,s=this.mode==="overlay"&&(Math.abs(t.top-this.targetRect.top)>.1||Math.abs(t.left-this.targetRect.left)>.1);r?(this.targetRect=t,this.setSize(this.targetRect.width,this.targetRect.height),this.updateCanvasLayout()):s?(this.targetRect=t,this.updateCanvasLayout()):this.targetRect=t,this.renderOrder=0;const n=new Set;this.reconcileNode(e,n);for(const[a,o]of this.meshMap.entries())n.has(a)||(this.scene.remove(o),o.geometry.dispose(),o.material instanceof d.Material&&o.material.dispose(),this.meshMap.delete(a))}reconcileNode(e,t){var s;t.add(e.element);let r=this.meshMap.get(e.element);if(!r){const n=new d.PlaneGeometry(1,1);let a;a=L.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,e.isTraveler?(s=this.renderTarget)==null?void 0:s.texture:void 0),r=new d.Mesh(n,a),e.type==="TEXT"&&(r.name="BG_MESH"),this.scene.add(r),this.meshMap.set(e.element,r)}if(r.userData.domRect=e.rect,this.updateMeshProperties(r,e),this.updateMeshLayers(r,e),e.isTraveler&&r.layers.enable(28),e.type==="BOX")for(const n of e.children)this.reconcileNode(n,t);else e.type==="TEXT"&&this.reconcileTextChild(r,e)}reconcileTextChild(e,t){var o,l;let r=e.children.find(c=>c.name==="TEXT_CHILD");const s=JSON.stringify(t.textStyles),n=(o=r==null?void 0:r.userData)==null?void 0:o.styleHash;if(!r||t.dirtyMask&N||s!==n){r&&((l=r.material.map)==null||l.dispose(),r.geometry.dispose(),e.remove(r));const c=L.create("TEXT",t.textStyles,t.textContent||"",t.rect.width,t.rect.height,this.qualityFactor),g=new d.PlaneGeometry(1,1);r=new d.Mesh(g,c),r.name="TEXT_CHILD",r.userData={styleHash:s},this.updateMeshLayers(r,t),r.position.z=.005,e.add(r)}if(r){const c=e.userData.domRect,g=c.x+c.width/2,u=c.y+c.height/2,p=t.rect.x+t.rect.width/2,m=t.rect.y+t.rect.height/2,w=p-g,T=-(m-u);r.position.set(w,T,.005)}}updateMeshProperties(e,t){var m;const{rect:r,styles:s}=t,n=this.renderer.getPixelRatio(),a=this.renderer.domElement.width/n,o=this.renderer.domElement.height/n;e.scale.set(r.width,r.height,1);const l=.001;this.renderOrder++;const c=this.targetRect.left+window.scrollX,g=this.targetRect.top+window.scrollY,u=r.x-c,p=r.y-g;e.position.set(u-a/2+r.width/2,-p+o/2-r.height/2,s.zIndex+this.renderOrder*l),L.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(m=this.renderTarget)==null?void 0:m.texture:void 0)}updateMeshLayers(e,t){const r=(1-(t.visibility&C))*30;e.layers.set(r),t.visibility===(C|E)&&e.layers.enable(29)}captureRenderTarget(){const e=[];for(const l of this.meshMap.values())l.layers.mask&1<<28&&e.push(l);if(e.length===0)return;const t=new d.Color,r=this.renderer.getClearAlpha();this.renderer.getClearColor(t),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(this.renderTarget),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(29);const s=new d.Vector3,n=this.targetRect.width,a=this.targetRect.height,o=this.renderer.getPixelRatio();for(const l of e){s.setFromMatrixPosition(l.matrixWorld),s.project(this.camera);const c=(s.x+1)/2*n,g=(s.y+1)/2*a,u=l.scale.x,p=l.scale.y,m=c-u/2,w=g-p/2,T=m*this.qualityFactor/o,_=w*this.qualityFactor/o,O=u*this.qualityFactor/o,f=p*this.qualityFactor/o;this.renderer.setScissor(T,_,O,f),this.renderer.render(this.scene,this.camera)}this.renderer.setScissorTest(!1),this.renderer.autoClear=!0,this.renderer.setRenderTarget(null),this.camera.layers.set(28),this.renderer.setClearColor(t,r)}render(){this.renderTarget&&this.captureRenderTarget(),this.renderer.render(this.scene,this.camera)}showScissoredRenderTarget(){if(!this.renderTarget)return;const e=this.targetRect.width,t=this.targetRect.height,r=new d.PlaneGeometry(e,t),s=new d.MeshBasicMaterial({map:this.renderTarget.texture,side:d.DoubleSide,transparent:!0,opacity:.8}),n=new d.Mesh(r,s);n.position.set(0,0,90),n.layers.set(28),this.scene.add(n)}}function J(i){const e=document.createRange();e.selectNodeContents(i);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function V(i){const e=parseFloat(i.fontSize);let t=parseFloat(i.lineHeight);isNaN(t)&&(t=e*1.2);let r=parseFloat(i.letterSpacing);return isNaN(r)&&(r=0),{font:`${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,color:i.color,textAlign:i.textAlign||"start",textBaseline:"alphabetic",direction:i.direction||"inherit",lineHeight:t,letterSpacing:r}}function P(i,e=F|z|k|N|D,t,r){if(i.nodeType===Node.TEXT_NODE){const f=i;if(!f.textContent||!f.textContent.trim())return null;const R=f.textContent.replace(/\s+/g," ").trim();if(R.length===0)return null;const x=J(f);if(x.width===0||x.height===0)return null;const q=f.parentElement,I=q?window.getComputedStyle(q):null;return I?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:f,rect:{x:x.left+window.scrollX,y:x.top+window.scrollY,width:x.width,height:x.height},styles:{backgroundColor:"transparent",opacity:parseFloat(I.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:R,textStyles:V(I),dirtyMask:e,visibility:t,isTraveler:!1,children:[]}:null}const s=i,n=s.dataset.mirageFilter;let a=t,o=t;if(n){const f=new Set(n.split(/\s+/));for(const R of f)if(!Y.includes(R))throw new Error(`[MirageEngine] Invalid filter token: '${R}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(f.has("end"))return null;if(f.has("include-tree")&&f.has("exclude-tree"))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(f.has("include-self")&&f.has("exclude-self"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");f.has("include-tree")?a=a|C:f.has("exclude-tree")&&(a=a&~C),o=a,f.has("include-self")?o=o|C:f.has("exclude-self")&&(o=o&~C)}o=o|t&E;const l=s.dataset.mirageTravel;let c=!1;l&&new Set(l.split(/\s+/)).has("traveler")&&(o=o&~E,a=a&~E,c=!0);const g=s.getBoundingClientRect(),u=window.getComputedStyle(s);if(g.width===0||g.height===0||u.display==="none")return null;let p=s.getAttribute("data-mid");p||(p=Math.random().toString(36).substring(2,11),s.setAttribute("data-mid",p));const m=parseInt(u.zIndex),w={backgroundColor:u.backgroundColor,opacity:parseFloat(u.opacity),zIndex:isNaN(m)?0:m,borderRadius:u.borderRadius,borderColor:u.borderColor,borderWidth:u.borderWidth};let T,_;const O=[];return Array.from(s.childNodes).forEach(f=>{const R=f.nodeType===Node.TEXT_NODE?o:a,x=P(f,e,R);x&&O.push(x)}),{id:p,type:"BOX",element:s,rect:{x:g.left+window.scrollX,y:g.top+window.scrollY,width:g.width,height:g.height},styles:w,textContent:T,textStyles:_,dirtyMask:e,visibility:o,isTraveler:c,children:O}}class Q{constructor(e,t,r){h(this,"target");h(this,"renderer");h(this,"filter");h(this,"observer");h(this,"isDomDirty",!1);h(this,"isRunning",!1);h(this,"isTravelEnabled",!1);h(this,"pendingMask",M);h(this,"mutationTimer",null);h(this,"cssTimer",null);h(this,"resizeConfig");h(this,"resizeTimer",null);h(this,"isResizing",!1);h(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=F|z,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});h(this,"onWindowResize",()=>{if(!this.resizeConfig.enabled){this.isDomDirty=!0;return}this.isResizing||(this.isResizing=!0,this.resizeConfig.onStart&&this.resizeConfig.onStart()),this.resizeTimer&&clearTimeout(this.resizeTimer),this.resizeTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.resizeConfig.onEnd&&this.resizeConfig.onEnd(),this.isResizing=!1,this.resizeTimer=null},this.resizeConfig.delay)});h(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});var n,a;this.target=e,this.renderer=t,this.filter=r.filter;const s=(n=r.resizeDebounce)!=null?n:!0;s===!1?this.resizeConfig={enabled:!1,delay:0}:s===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(a=s.delay)!=null?a:150,onStart:s.onStart,onEnd:s.onEnd},this.observer=new MutationObserver(o=>{let l=M;for(const c of o)c.type==="childList"?l|=D:c.type==="attributes"&&(c.attributeName==="style"||c.attributeName==="class")&&(l|=F|z);if(l!==M){if(this.pendingMask|=l,l&D){this.clearTimers(),console.log("Structural Change detected"),this.isDomDirty=!0;return}this.mutationTimer&&clearTimeout(this.mutationTimer),this.mutationTimer=window.setTimeout(()=>{this.mutationTimer=null,this.isDomDirty=!0},200)}})}start(){this.isRunning||(this.isRunning=!0,this.observer.observe(this.target,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),this.target.addEventListener("transitionend",this.onTransitionFinished),this.target.addEventListener("animationend",this.onTransitionFinished),window.addEventListener("resize",this.onWindowResize),this.forceUpdateScene(),this.renderLoop())}stop(){this.isRunning=!1,this.observer.disconnect(),this.clearTimers(),this.target.removeEventListener("transitionend",this.onTransitionFinished),this.target.removeEventListener("animationend",this.onTransitionFinished),window.removeEventListener("resize",this.onWindowResize)}clearTimers(){this.mutationTimer&&(clearTimeout(this.mutationTimer),this.mutationTimer=null),this.cssTimer&&(clearTimeout(this.cssTimer),this.cssTimer=null)}forceUpdateScene(){this.isDomDirty=!1;const e=document.querySelector("[data-mirage-travel='traveler']")!==null;e&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const t=P(this.target,this.pendingMask,e?C|E:C,this.filter);t&&this.renderer.syncScene(t),this.pendingMask=M}}class Z{constructor(e,t){h(this,"renderer");h(this,"syncer");h(this,"target");var s,n,a;this.target=e;let r;if(t.mode==="duplicate"?r=(n=(s=t.container)!=null?s:this.target.parentElement)!=null?n:void 0:r=(a=this.target.parentElement)!=null?a:void 0,!r)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new j(this.target,t,r),this.renderer.mount(),this.syncer=new Q(this.target,this.renderer,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}}class K{constructor(e,t){h(this,"_engine");if(!e)throw new Error("[Mirage] Target element is required.");this._engine=new Z(e,t)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}}v.Mirage=K,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
|
|
122
|
+
|
|
123
|
+
// final blending (border + background) using blendSrcOver
|
|
124
|
+
vec4 borderLayer = vec4(uBorderColor.rgb, borderAlpha);
|
|
125
|
+
vec4 finalColor = blendSrcOver(borderLayer, baseColor);
|
|
126
|
+
// final color control (Tint, Noise)
|
|
127
|
+
#INJECT_COLOR_MODIFIER
|
|
128
|
+
|
|
129
|
+
float finalOpacity = finalColor.a * bgMask * uOpacity;
|
|
130
|
+
if (finalOpacity < 0.001) discard;
|
|
131
|
+
|
|
132
|
+
gl_FragColor = vec4(finalColor.rgb, finalOpacity);
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
// #include <colorspace_fragment>
|
|
136
|
+
}
|
|
137
|
+
`,ve=`uniform sampler2D uTexture;
|
|
138
|
+
varying vec4 vScreenPos;
|
|
139
|
+
uniform vec2 uTextureRepeat;
|
|
140
|
+
uniform vec2 uTextureOffset;`,ye=`vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
|
|
141
|
+
vec2 resultUv = screenUv;
|
|
142
|
+
|
|
143
|
+
`,we=`vec4 texColor = texture2D(uTexture, resultUv);
|
|
144
|
+
baseColor = blendSrcOver(baseColor, texColor);`,te={vertexShader:be,fragmentShader:xe},j={declChunk:ve,uvChunk:ye,baseColorChunk:we};function Ce(s,e,t,i=null,r){var x;const a=i!==null||!!s.imageSrc,o=a?j.declChunk:"",n=s.isTraveler?j.uvChunk:`vec2 resultUv = vUv * uTextureRepeat + uTextureOffset;
|
|
145
|
+
`,l=a?n+((r==null?void 0:r.uvModifier)||""):"",c=a?j.baseColorChunk:"",d=(r==null?void 0:r.colorModifier)||"",f=te.fragmentShader.replace("#INJECT_DECLARATIONS",o).replace("#INJECT_UV_MODIFIER",l).replace("#INJECT_BASE_COLOR",c).replace("#INJECT_COLOR_MODIFIER",d),h=_(s.backgroundColor),m=_(s.borderColor),g={uSize:{value:new p.Vector2(e,t)},uBgColor:{value:new p.Vector4(h.color.r,h.color.g,h.color.b,h.alpha)},uBorderColor:{value:new p.Vector4(m.color.r,m.color.g,m.color.b,m.alpha)},uBorderRadius:{value:new p.Vector4(0,0,0,0)},uBorderWidth:{value:Y(s.borderWidth)},uOpacity:{value:(x=s.opacity)!=null?x:1},uTexture:{value:null},uTextureRepeat:{value:new p.Vector2(1,1)},uTextureOffset:{value:new p.Vector2(0,0)},uGradientCount:{value:0},uGradientAngle:{value:0},uGradientColors:{value:Array.from({length:8},()=>new p.Vector4(0,0,0,0))},uGradientStops:{value:new Float32Array(8)}};re(g.uBorderRadius.value,s.borderRadius),a&&(g.uTexture.value=i);const C=new p.ShaderMaterial({uniforms:g,vertexShader:te.vertexShader,fragmentShader:f,transparent:!0,side:p.FrontSide});return s.backgroundImage&&$(C,{backgroundImage:s.backgroundImage}),C}function Te(s,e,t,i,r){const a=Y(e.borderWidth);$(s,{width:t,height:i,borderRadius:e.borderRadius,borderWidth:a,backgroundColor:e.backgroundColor,borderColor:e.borderColor,opacity:e.opacity,texture:r,backgroundImage:e.backgroundImage})}function $(s,e){var i,r,a;if(e.width!==void 0&&e.height!==void 0&&s.uniforms.uSize.value.set(e.width,e.height),e.borderRadius!==void 0&&re(s.uniforms.uBorderRadius.value,e.borderRadius),e.borderWidth!==void 0&&(s.uniforms.uBorderWidth.value=e.borderWidth),e.backgroundColor!==void 0)if(Array.isArray(e.backgroundColor)){const o=s.uniforms.uBgColor.value.w;s.uniforms.uBgColor.value.set(e.backgroundColor[0],e.backgroundColor[1],e.backgroundColor[2],o)}else if(typeof e.backgroundColor=="string"){const o=_(e.backgroundColor);s.uniforms.uBgColor.value.set(o.color.r,o.color.g,o.color.b,o.alpha)}else{const o=s.uniforms.uBgColor.value.w;s.uniforms.uBgColor.value.set(e.backgroundColor.r,e.backgroundColor.g,e.backgroundColor.b,o)}if(e.borderColor!==void 0)if(Array.isArray(e.borderColor)){const o=s.uniforms.uBorderColor.value.w;s.uniforms.uBorderColor.value.set(e.borderColor[0],e.borderColor[1],e.borderColor[2],o)}else if(typeof e.borderColor=="string"){const o=_(e.borderColor);s.uniforms.uBorderColor.value.set(o.color.r,o.color.g,o.color.b,o.alpha)}else{const o=s.uniforms.uBorderColor.value.w;s.uniforms.uBorderColor.value.set(e.borderColor.r,e.borderColor.g,e.borderColor.b,o)}e.opacity!==void 0&&(s.uniforms.uOpacity.value=e.opacity),e.bgOpacity!==void 0&&(s.uniforms.uBgColor.value.w=e.bgOpacity),e.borderOpacity!==void 0&&(s.uniforms.uBorderColor.value.w=e.borderOpacity),s.uniforms.uTexture&&e.texture!==void 0&&(s.uniforms.uTexture.value=e.texture);const t=e.texture!==void 0?e.texture:(i=s.uniforms.uTexture)==null?void 0:i.value;if(t&&(t.image instanceof ImageBitmap||t.image instanceof HTMLImageElement||t.image instanceof HTMLCanvasElement)){const o=t.image.width,n=t.image.height,l=(r=e.width)!=null?r:s.uniforms.uSize.value.x,c=(a=e.height)!=null?a:s.uniforms.uSize.value.y;if(o&&n&&l&&c){const d=o/n,f=l/c;if(d>f){const h=f/d;s.uniforms.uTextureRepeat.value.set(h,1),s.uniforms.uTextureOffset.value.set((1-h)/2,0)}else{const h=d/f;s.uniforms.uTextureRepeat.value.set(1,h),s.uniforms.uTextureOffset.value.set(0,(1-h)/2)}}}else s.uniforms.uTextureRepeat&&(s.uniforms.uTextureRepeat.value.set(1,1),s.uniforms.uTextureOffset.value.set(0,0));if(e.backgroundImage!==void 0){const o=me(e.backgroundImage);if(o){s.uniforms.uGradientCount.value=o.stops.length,s.uniforms.uGradientAngle.value=o.angle;for(let n=0;n<8;n++)if(n<o.stops.length){const l=o.stops[n];s.uniforms.uGradientColors.value[n].set(l.color.r,l.color.g,l.color.b,l.alpha),console.log(l.color.r,l.color.g,l.color.b),s.uniforms.uGradientStops.value[n]=l.stop}else s.uniforms.uGradientColors.value[n].set(0,0,0,0),s.uniforms.uGradientStops.value[n]=1}else s.uniforms.uGradientCount.value=0}}function re(s,e){var n,l,c,d;if(e==null){s.set(0,0,0,0);return}if(typeof e=="number"){s.set(e,e,e,e);return}if(Array.isArray(e)){s.set(e[0],e[1],e[2],e[3]);return}const t=e.split("/")[0].trim().split(/\s+/),i=Y(t[0]),r=Y((n=t[1])!=null?n:t[0]),a=Y((l=t[2])!=null?l:t[0]),o=Y((d=(c=t[3])!=null?c:t[1])!=null?d:t[0]);s.set(i,r,a,o)}const W={create(s,e,t,i,r,a=2,o=null,n){return s==="BOX"?Ce(e,i,r,o,n):s==="TEXT"?new ge(t||"",e,i,r,a):new p.MeshBasicMaterial({visible:!1})},update(s,e,t,i,r,a,o=2,n){e==="BOX"?Te(s,t,r,a,n):e==="TEXT"&&s.updateText(i||"",t,r,a,o)},forceUpdateUniforms(s,e){$(s,e)}};class Se{constructor(e){u(this,"observer");u(this,"textures",new WeakMap);u(this,"loadStatus",new WeakMap);u(this,"elementUrls",new WeakMap);u(this,"onUpdate");this.onUpdate=e,this.observer=new IntersectionObserver(t=>{for(const i of t){const r=i.target;i.isIntersecting?this.loadTexture(r):this.disposeTexture(r)}},{rootMargin:"300px"})}register(e,t){if(e.nodeType!==Node.ELEMENT_NODE)return;this.elementUrls.get(e)!==t&&(this.elementUrls.set(e,t),this.observer.unobserve(e),this.observer.observe(e))}unregister(e){e.nodeType===Node.ELEMENT_NODE&&this.observer.unobserve(e),this.disposeTexture(e),this.elementUrls.delete(e),this.loadStatus.delete(e)}loadTexture(e){return ue(this,null,function*(){if(this.loadStatus.get(e)||this.textures.has(e))return;const t=this.elementUrls.get(e);if(t){this.loadStatus.set(e,!0);try{const r=yield(yield fetch(t)).blob(),a=yield createImageBitmap(r,{imageOrientation:"flipY"});if(this.elementUrls.get(e)!==t){a.close();return}const o=new p.CanvasTexture(a);o.needsUpdate=!0,this.textures.set(e,o),this.onUpdate(e,o)}catch(i){console.warn("[MirageEngine] Failed to load texture:",t,i)}finally{this.elementUrls.has(e)&&this.loadStatus.set(e,!1)}}})}disposeTexture(e){const t=this.textures.get(e);t&&(t.dispose(),this.textures.delete(e),this.onUpdate(e,null)),this.loadStatus.set(e,!1)}get(e){return this.textures.get(e)}disposeAll(){this.observer.disconnect()}}class Re{constructor(e,t,i,r){u(this,"canvas");u(this,"scene");u(this,"camera");u(this,"renderer");u(this,"renderTarget",null);u(this,"renderOrder",0);u(this,"qualityFactor",2);u(this,"mode","overlay");u(this,"clipArea",1);u(this,"target");u(this,"mountContainer");u(this,"registry");u(this,"targetRect");u(this,"travelers",new Set);u(this,"textureManager");u(this,"fixedMeshes",new Set);var n,l,c;this.target=e,this.mountContainer=i,this.registry=r,this.textureManager=new Se((d,f)=>{const h=this.registry.get(d);h&&h.material instanceof p.ShaderMaterial&&W.forceUpdateUniforms(h.material,{texture:f})}),this.mode=(n=t.mode)!=null?n:"overlay",this.clipArea=(l=t.travelerClipArea)!=null?l:1,this.canvas=document.createElement("canvas"),this.scene=new p.Scene,this.targetRect=this.target.getBoundingClientRect();const a=this.targetRect.width,o=this.targetRect.height;this.camera=new p.OrthographicCamera(a/-2,a/2,o/2,o/-2,1,1e3),this.camera.position.z=100,this.camera.layers.set(0),this.renderer=new p.WebGLRenderer({canvas:this.canvas,alpha:!0,antialias:!0}),p.ColorManagement.enabled=!1,this.renderer.outputColorSpace=p.LinearSRGBColorSpace,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(a,o),this.applyTextQuality((c=t.quality)!=null?c:"medium")}createRenderTarget(){this.renderTarget=new p.WebGLRenderTarget(this.targetRect.width*this.qualityFactor,this.targetRect.height*this.qualityFactor,{minFilter:p.LinearFilter,magFilter:p.LinearFilter,format:p.RGBAFormat,stencilBuffer:!1,depthBuffer:!0})}applyTextQuality(e){if(typeof e=="number"){this.qualityFactor=Math.max(.1,e);return}switch(e){case"low":this.qualityFactor=1;break;case"high":this.qualityFactor=4;break;case"medium":default:this.qualityFactor=2;break}}mount(){this.mountContainer.prepend(this.canvas),this.canvas.style.pointerEvents=this.mode==="overlay"?"none":"auto",this.updateCanvasLayout()}updateCanvasLayout(){this.canvas.style.width=`${this.targetRect.width}px`,this.canvas.style.height=`${this.targetRect.height}px`,this.mode==="duplicate"?(this.canvas.style.position="",this.canvas.style.top="",this.canvas.style.left="",this.canvas.style.display="block"):(this.canvas.style.position="absolute",this.canvas.style.top=`${this.target.offsetTop}px`,this.canvas.style.left=`${this.target.offsetLeft}px`,this.canvas.style.display="block")}dispose(){this.renderer.dispose(),this.canvas.remove(),this.textureManager.disposeAll()}setSize(e,t){this.renderer.setSize(e,t),this.renderTarget&&this.renderTarget.setSize(e*this.qualityFactor,t*this.qualityFactor),this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}syncScene(e,t){const i=this.target.getBoundingClientRect(),r=Math.abs(i.width-this.targetRect.width)>.1||Math.abs(i.height-this.targetRect.height)>.1,a=this.mode==="overlay"&&(Math.abs(i.top-this.targetRect.top)>.1||Math.abs(i.left-this.targetRect.left)>.1);r?(this.targetRect=i,this.setSize(this.targetRect.width,this.targetRect.height),this.updateCanvasLayout()):a?(this.targetRect=i,this.updateCanvasLayout()):this.targetRect=i,this.renderOrder=0,this.reconcileNode(e),t.size>0&&t.forEach(o=>{const n=this.registry.get(o);n&&(this.scene.remove(n),this.travelers.delete(n),this.fixedMeshes.delete(n),n.geometry.dispose(),n.traverse(l=>{l instanceof p.Mesh&&(l.geometry&&l.geometry.dispose(),l.material&&(Array.isArray(l.material)?l.material.forEach(c=>c.dispose()):l.material.dispose()))}),this.registry.remove(o),this.textureManager.unregister(o))})}reconcileNode(e){var i;let t=this.registry.get(e.element);if(!t){const r=new p.PlaneGeometry(1,1);let a;const o=e.isTraveler?(i=this.renderTarget)==null?void 0:i.texture:this.textureManager.get(e.element);a=W.create("BOX",e.styles,"",e.rect.width,e.rect.height,this.qualityFactor,o,e.shaderHooks),t=new p.Mesh(r,a),e.type==="TEXT"&&(t.name="BG_MESH"),this.scene.add(t),this.registry.register(e.element,t)}if(t.userData.domRect=e.rect,this.updateMeshProperties(t,e),this.updateMeshLayers(t,e),e.isTraveler?(t.layers.enable(28),this.travelers.add(t)):(t.layers.disable(28),this.travelers.delete(t)),e.isFixed?this.fixedMeshes.add(t):this.fixedMeshes.delete(t),e.styles.imageSrc?this.textureManager.register(e.element,e.styles.imageSrc):this.textureManager.unregister(e.element),e.type==="BOX")for(const r of e.children)this.reconcileNode(r);else e.type==="TEXT"&&this.reconcileTextChild(t,e)}reconcileTextChild(e,t){var n;const i=t.textLines||[{text:t.textContent||"",rect:t.rect}],r=JSON.stringify(t.textStyles)+t.textContent+i.map(l=>l.text).join("|"),a=(n=e.userData)==null?void 0:n.textChildStyleHash;if(t.dirtyMask&L||r!==a){e.children.filter(h=>h.name.startsWith("TEXT_CHILD")).forEach(h=>{var g;const m=h;(g=m.material.map)==null||g.dispose(),m.geometry.dispose(),e.remove(m)});const c=t.rect,d=c.x+c.width/2,f=c.y+c.height/2;i.forEach((h,m)=>{const g=W.create("TEXT",t.textStyles,h.text,h.rect.width,h.rect.height,this.qualityFactor),C=new p.PlaneGeometry(1,1),x=new p.Mesh(C,g);x.name=`TEXT_CHILD_${m}`,this.updateMeshLayers(x,t);const R=t.rect.width===0?1:h.rect.width/t.rect.width,E=t.rect.height===0?1:h.rect.height/t.rect.height;x.scale.set(R,E,1);const k=h.rect.x+h.rect.width/2,B=h.rect.y+h.rect.height/2,b=k-d,T=-(B-f);x.position.set(t.rect.width===0?0:b/t.rect.width,t.rect.height===0?0:T/t.rect.height,.005),e.add(x)}),e.userData.textChildStyleHash=r}}updateMeshProperties(e,t){var b;const{rect:i,styles:r}=t,a=this.renderer.getPixelRatio(),o=this.renderer.domElement.width/a,n=this.renderer.domElement.height/a;e.scale.set(i.width,i.height,1);const l=.001;this.renderOrder++;const c=this.targetRect.left+window.scrollX,d=this.targetRect.top+window.scrollY,f=i.x-c,h=i.y-d,m=f-o/2+i.width/2,g=-h+n/2-i.height/2;e.position.set(m,g,r.zIndex+this.renderOrder*l);const C=i.x,x=i.y;e.userData.basePosition={x:m,y:g},e.userData.originalBasePosition={x:m,y:g},e.userData.baseSize={width:i.width,height:i.height},e.userData.baseDOM={x:C,y:x},e.userData.isFixed=t.isFixed,e.userData.initialScroll={x:window.scrollX,y:window.scrollY};const R=t.element.nodeType===Node.TEXT_NODE?t.element.parentElement:t.element,E=window.getComputedStyle(R);let k=0,B=0;if(E.transform&&E.transform!=="none"){const T=new DOMMatrix(E.transform);k=T.m41,B=T.m42}e.userData.baseTransform={x:k,y:B},delete e.userData.originRatioX,delete e.userData.originRatioY,W.update(e.material,"BOX",t.styles,"",t.rect.width,t.rect.height,this.qualityFactor,t.isTraveler?(b=this.renderTarget)==null?void 0:b.texture:this.textureManager.get(t.element))}updateMeshLayers(e,t){const i=(1-(t.visibility&I))*30;e.layers.set(i),t.visibility===(I|U)&&e.layers.enable(29)}captureRenderTarget(){if(this.travelers.size===0)return;const e=new p.Color,t=this.renderer.getClearAlpha();this.renderer.getClearColor(e),this.renderer.setClearColor(0,0),this.renderer.setRenderTarget(this.renderTarget),this.renderer.clear(),this.renderer.autoClear=!1,this.renderer.setScissorTest(!0),this.camera.layers.set(29);const i=new p.Vector3,r=this.targetRect.width,a=this.targetRect.height,o=this.renderer.getPixelRatio();for(const n of this.travelers){i.setFromMatrixPosition(n.matrixWorld),i.project(this.camera);const l=(i.x+1)/2*r,c=(i.y+1)/2*a;let d=0,f=1;typeof this.clipArea=="number"?f=this.clipArea:this.clipArea.endsWith("%")?f=parseFloat(this.clipArea)/100:this.clipArea.endsWith("px")&&(d=parseFloat(this.clipArea));const h=n.scale.x*f+.5,m=n.scale.y*f+.5,g=l-h/2,C=c-m/2,x=(g*this.qualityFactor-d)/o,R=(C*this.qualityFactor-d)/o,E=(h*this.qualityFactor+d*2)/o,k=(m*this.qualityFactor+d*2)/o;this.renderer.setScissor(x,R,E,k),this.renderer.render(this.scene,this.camera)}this.renderer.setScissorTest(!1),this.renderer.autoClear=!0,this.renderer.setRenderTarget(null),this.camera.layers.set(0),this.renderer.setClearColor(e,t)}render(){this.renderTarget&&this.captureRenderTarget(),this.renderer.render(this.scene,this.camera)}showScissoredRenderTarget(){if(!this.renderTarget)return;const e=this.targetRect.width,t=this.targetRect.height,i=new p.PlaneGeometry(e,t),r=new p.MeshBasicMaterial({map:this.renderTarget.texture,side:p.DoubleSide,transparent:!0,opacity:.8}),a=new p.Mesh(i,r);a.position.set(0,0,90),a.layers.set(28),this.scene.add(a)}}function Me(s){const e=s.textContent||"",t=[];let i="",r=null,a=-1;const o=(c,d)=>{for(let f=0;f<c.length;f++){const h=c[f],m=document.createRange();m.setStart(s,d+f),m.setEnd(s,d+f+1);const g=m.getBoundingClientRect();if(g.width===0&&g.height===0){i+=h;continue}a===-1||Math.abs(g.top-a)>g.height/2?(i&&r&&t.push({text:i,rect:{left:r.left,top:r.top,width:r.right-r.left,height:r.bottom-r.top}}),i=h,r={left:g.left,top:g.top,right:g.right,bottom:g.bottom},a=g.top):(i+=h,r&&(r.left=Math.min(r.left,g.left),r.top=Math.min(r.top,g.top),r.right=Math.max(r.right,g.right),r.bottom=Math.max(r.bottom,g.bottom)))}},n=e.match(/[^\s\-]+\-?|\-|\s+/g)||[];let l=0;for(const c of n){const d=document.createRange();d.setStart(s,l),d.setEnd(s,l+c.length);const f=d.getClientRects();if(f.length>1)o(c,l);else{const h=f.length===1?f[0]:d.getBoundingClientRect();if(h.width===0&&h.height===0){i+=c,l+=c.length;continue}a===-1||Math.abs(h.top-a)>h.height/2?(i&&r&&t.push({text:i,rect:{left:r.left,top:r.top,width:r.right-r.left,height:r.bottom-r.top}}),i=c,r={left:h.left,top:h.top,right:h.right,bottom:h.bottom},a=h.top):(i+=c,r&&(r.left=Math.min(r.left,h.left),r.top=Math.min(r.top,h.top),r.right=Math.max(r.right,h.right),r.bottom=Math.max(r.bottom,h.bottom)))}l+=c.length}return i&&r&&t.push({text:i,rect:{left:r.left,top:r.top,width:r.right-r.left,height:r.bottom-r.top}}),t.filter(c=>c.text.trim().length>0&&c.rect.width>0&&c.rect.height>0)}function Ee(s){const e=parseFloat(s.fontSize);let t=parseFloat(s.lineHeight);isNaN(t)&&(t=e*1.2);let i=parseFloat(s.letterSpacing);return isNaN(i)&&(i=0),{font:`${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,fontSize:s.fontSize,color:s.color,textAlign:s.textAlign||"start",textBaseline:"alphabetic",direction:s.direction||"inherit",lineHeight:t,letterSpacing:i}}function ie(s,e=F|X|N|L|O,t,i){if(s.nodeType===Node.TEXT_NODE){const b=s;if(!b.textContent||!b.textContent.trim())return null;const T=b.textContent.replace(/\s+/g," ");if(T.length===0)return null;const D=Me(b);if(D.length===0)return null;const z=b.parentElement,P=z?window.getComputedStyle(z):null;if(!P)return null;const G=Math.min(...D.map(v=>v.rect.left)),q=Math.min(...D.map(v=>v.rect.top)),H=Math.max(...D.map(v=>v.rect.left+v.rect.width)),V=Math.max(...D.map(v=>v.rect.top+v.rect.height));return{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:b,rect:{x:G+window.scrollX,y:q+window.scrollY,width:H-G,height:V-q},styles:{backgroundColor:"transparent",backgroundImage:"",opacity:z&&z.dataset.mirageDom==="hide"?1:parseFloat(P.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px",isTraveler:!1},textContent:T,textLines:D.map(v=>({text:v.text.trim(),rect:{x:v.rect.left+window.scrollX,y:v.rect.top+window.scrollY,width:v.rect.width,height:v.rect.height}})),textStyles:Ee(P),dirtyMask:e,visibility:t,isTraveler:!1,isFixed:P.position==="fixed",children:[]}}if(s.nodeType!==Node.ELEMENT_NODE)return null;const r=s,a=r.dataset.mirageFilter;let o=t,n=t;if(a){const b=new Set(a.split(/\s+/));for(const T of b)if(!fe.includes(T))throw new Error(`[MirageEngine] Invalid filter token: '${T}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`);if(b.has("end"))return null;if(b.has("include-tree")&&b.has("exclude-tree"))throw new Error("[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.");if(b.has("include-self")&&b.has("exclude-self"))throw new Error("[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.");b.has("include-tree")?o=o|I:b.has("exclude-tree")&&(o=o&~I),n=o,b.has("include-self")?n=n|I:b.has("exclude-self")&&(n=n&~I)}n=n|t&U;const l=r.dataset.mirageTravel;let c=!1;l&&new Set(l.split(/\s+/)).has("traveler")&&(n=n&~U,o=o&~U,c=!0);const d=r.dataset.mirageShader;let f;d&&(f=JSON.parse(d));const h=r.getBoundingClientRect(),m=window.getComputedStyle(r);if(h.width===0||h.height===0||m.display==="none")return null;let g=r.getAttribute("data-mid");g||(g=Math.random().toString(36).substring(2,11),r.setAttribute("data-mid",g));const C=parseInt(m.zIndex);let x;if(r.tagName==="IMG")x=r.src;else if(m.backgroundImage&&m.backgroundImage!=="none"){const b=m.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);b&&(x=b[1])}const R={backgroundColor:m.backgroundColor,backgroundImage:m.backgroundImage,opacity:r.dataset.mirageDom==="hide"?1:parseFloat(m.opacity),zIndex:isNaN(C)?0:C,borderRadius:m.borderRadius,borderColor:m.borderColor,borderWidth:m.borderWidth,imageSrc:x,isTraveler:c};let E,k;const B=[];return Array.from(r.childNodes).forEach(b=>{const T=b.nodeType===Node.TEXT_NODE?n:o,D=ie(b,e,T);D&&B.push(D)}),{id:g,type:"BOX",element:r,rect:{x:h.left+window.scrollX,y:h.top+window.scrollY,width:h.width,height:h.height},styles:R,textContent:E,textStyles:k,dirtyMask:e,visibility:n,isTraveler:c,isFixed:m.position==="fixed",children:B,shaderHooks:f}}function De(s,e){e.size!==0&&e.forEach((t,i)=>{var b,T,D,z,P,G,q,H,V,v,se,oe,ne,ae,ce,le,he,de;const r=s.get(i);if(!r||!r.userData.basePosition)return;let{x:a,y:o}=r.userData.basePosition;const{width:n,height:l}=r.userData.baseSize,c=(b=t.width)!=null?b:n,d=(T=t.height)!=null?T:l,f=c-n,h=d-l;if(t.width!==void 0&&r.userData.originRatioX===void 0&&Math.abs(f)>.1){const J=i.getBoundingClientRect(),Q=(D=t.x)!=null?D:0,Z=(P=(z=r.userData.baseTransform)==null?void 0:z.x)!=null?P:0,K=r.userData.isFixed?0:window.scrollX;let S=-(J.left+K-Q+Z-r.userData.baseDOM.x)/f;Math.abs(S)<.05?S=0:Math.abs(S-1)<.05?S=1:Math.abs(S-.5)<.05&&(S=.5),r.userData.originRatioX=S}if(t.height!==void 0&&r.userData.originRatioY===void 0&&Math.abs(h)>.1){const J=i.getBoundingClientRect(),Q=(G=t.y)!=null?G:0,Z=(H=(q=r.userData.baseTransform)==null?void 0:q.y)!=null?H:0,K=r.userData.isFixed?0:window.scrollY;let S=-(J.top+K-Q+Z-r.userData.baseDOM.y)/h;Math.abs(S)<.05?S=0:Math.abs(S-1)<.05?S=1:Math.abs(S-.5)<.05&&(S=.5),r.userData.originRatioY=S}const m=(V=r.userData.originRatioX)!=null?V:.5,g=(v=r.userData.originRatioY)!=null?v:.5,C=f*(.5-m),x=h*(.5-g),R=(oe=(se=r.userData.baseTransform)==null?void 0:se.x)!=null?oe:0,E=(ae=(ne=r.userData.baseTransform)==null?void 0:ne.y)!=null?ae:0,k=((ce=t.x)!=null?ce:R)-R,B=((le=t.y)!=null?le:E)-E;r.position.setX(a+C+k),r.position.setY(o-(x+B)),r.scale.set(c,d,1),W.forceUpdateUniforms(r.material,{backgroundColor:t.backgroundColor,backgroundImage:t.backgroundImage,opacity:t.opacity,borderRadius:(de=t.borderRadius)!=null?de:(he=r.userData.baseStyles)==null?void 0:he.borderRadius,width:c,height:d})})}function Oe(s,e,t){s.forEach(i=>{if(i.userData.isFixed&&i.userData.initialScroll&&i.userData.originalBasePosition){const r=e-i.userData.initialScroll.x,a=t-i.userData.initialScroll.y;i.userData.basePosition.x=i.userData.originalBasePosition.x+r,i.userData.basePosition.y=i.userData.originalBasePosition.y-a,i.position.x=i.userData.basePosition.x,i.position.y=i.userData.basePosition.y}})}function ke(s){const e={};if(s.opacity&&(e.opacity=parseFloat(s.opacity)),s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"){const t=_(s.backgroundColor);e.backgroundColor=[t.color.r,t.color.g,t.color.b]}if(s.backgroundImage?e.backgroundImage=s.backgroundImage:s.background&&(e.backgroundImage=s.background),s.borderRadius&&(e.borderRadius=parseFloat(s.borderRadius)),s.width&&(e.width=parseFloat(s.width)),s.height&&(e.height=parseFloat(s.height)),s.transform&&s.transform!=="none"){const t=new DOMMatrix(s.transform);e.x=t.m41,e.y=t.m42,e.z=t.m43}return e}class Be{constructor(e,t,i,r){u(this,"target");u(this,"renderer");u(this,"registry");u(this,"filter");u(this,"observer");u(this,"pendingDeletions",new Set);u(this,"pendingStyles",new Map);u(this,"isDomDirty",!1);u(this,"isRunning",!1);u(this,"isTravelEnabled",!1);u(this,"pendingMask",A);u(this,"mutationTimer",null);u(this,"cssTimer",null);u(this,"resizeConfig");u(this,"resizeTimer",null);u(this,"isResizing",!1);u(this,"lastScrollX",0);u(this,"lastScrollY",0);u(this,"scrollTimer",null);u(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingStyles.size==0&&(this.pendingMask|=F|X,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50)))});u(this,"onWindowResize",()=>{if(!this.resizeConfig.enabled){this.isDomDirty=!0;return}this.isResizing||(this.isResizing=!0,this.resizeConfig.onStart&&this.resizeConfig.onStart()),this.resizeTimer&&clearTimeout(this.resizeTimer),this.resizeTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.resizeConfig.onEnd&&this.resizeConfig.onEnd(),this.isResizing=!1,this.resizeTimer=null},this.resizeConfig.delay)});u(this,"renderLoop",()=>{if(!this.isRunning)return;this.isDomDirty&&this.forceUpdateScene();const e=window.scrollX,t=window.scrollY;(e!==this.lastScrollX||t!==this.lastScrollY)&&(Oe(this.renderer.fixedMeshes,e,t),this.lastScrollX=e,this.lastScrollY=t,this.scrollTimer&&clearTimeout(this.scrollTimer),this.scrollTimer=window.setTimeout(()=>{this.pendingMask|=F,this.isDomDirty=!0,this.scrollTimer=null},150)),this.pendingStyles.size>0&&(De(this.registry,this.pendingStyles),this.pendingStyles.clear()),this.renderer.render(),requestAnimationFrame(this.renderLoop)});var o,n;this.target=e,this.renderer=t,this.registry=i,this.filter=r.filter;const a=(o=r.resizeDebounce)!=null?o:!0;a===!1?this.resizeConfig={enabled:!1,delay:0}:a===!0?this.resizeConfig={enabled:!0,delay:150}:this.resizeConfig={enabled:!0,delay:(n=a.delay)!=null?n:150,onStart:a.onStart,onEnd:a.onEnd},this.observer=new MutationObserver(l=>{let c=A;for(const d of l)if(d.type==="childList")c|=O,d.removedNodes.length>0&&d.removedNodes.forEach(f=>{f instanceof HTMLElement&&this.pendingDeletions.add(f)});else if(d.type==="attributes")if(d.attributeName==="style"){c|=F|X;const f=d.target,h=ke(f.style);this.pendingStyles.set(f,h)}else d.attributeName==="class"&&(c|=F|X);else d.type==="characterData"&&(c|=L|F);if(c!==A){if(this.pendingMask|=c,c&O){this.clearTimers(),this.isDomDirty=!0;return}this.mutationTimer&&clearTimeout(this.mutationTimer),this.mutationTimer=window.setTimeout(()=>{this.mutationTimer=null,this.isDomDirty=!0},200)}})}start(){this.isRunning||(this.isRunning=!0,this.observer.observe(this.target,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),this.target.addEventListener("transitionend",this.onTransitionFinished),this.target.addEventListener("animationend",this.onTransitionFinished),window.addEventListener("resize",this.onWindowResize),this.forceUpdateScene(),this.renderLoop())}stop(){this.isRunning=!1,this.observer.disconnect(),this.clearTimers(),this.target.removeEventListener("transitionend",this.onTransitionFinished),this.target.removeEventListener("animationend",this.onTransitionFinished),window.removeEventListener("resize",this.onWindowResize)}clearTimers(){this.mutationTimer&&(clearTimeout(this.mutationTimer),this.mutationTimer=null),this.cssTimer&&(clearTimeout(this.cssTimer),this.cssTimer=null),this.scrollTimer&&(clearTimeout(this.scrollTimer),this.scrollTimer=null)}forceUpdateScene(){this.isDomDirty=!1,this.lastScrollX=window.scrollX,this.lastScrollY=window.scrollY;const e=document.querySelector("[data-mirage-travel='traveler']")!==null;e&&!this.isTravelEnabled&&(this.isTravelEnabled=!0,this.renderer.createRenderTarget());const t=ie(this.target,this.pendingMask,e?I|U:I,this.filter);t&&(this.renderer.syncScene(t,this.pendingDeletions),this.pendingDeletions.clear()),this.pendingMask=A}}class Fe{constructor(){u(this,"store");this.store=new WeakMap}register(e,t){this.store.set(e,t)}get(e){return this.store.get(e)}has(e){return this.store.has(e)}remove(e){this.store.delete(e)}}class Ie{constructor(e,t){u(this,"renderer");u(this,"syncer");u(this,"target");u(this,"registry");var r,a,o;if(this.target=e,this.registry=new Fe,!document.getElementById("mirage-engine-styles")){const n=document.createElement("style");n.id="mirage-engine-styles",n.textContent=`
|
|
146
|
+
[data-mirage-dom="hide"] {
|
|
147
|
+
opacity: 0 !important;
|
|
148
|
+
}
|
|
149
|
+
`,document.head.appendChild(n)}let i;if(t.mode==="duplicate"?i=(a=(r=t.container)!=null?r:this.target.parentElement)!=null?a:void 0:i=(o=this.target.parentElement)!=null?o:void 0,!i)throw new Error("[Mirage] Cannot find a container (parent or option).");this.renderer=new Re(this.target,t,i,this.registry),this.renderer.mount(),this.syncer=new Be(this.target,this.renderer,this.registry,t)}start(){this.syncer.start()}stop(){this.syncer.stop()}dispose(){this.syncer.stop(),this.renderer.dispose()}test(){const e=this.registry.get(document.querySelector("#box2"));if(!e)return;const t={ArrowRight:!1,ArrowLeft:!1,ArrowUp:!1,ArrowDown:!1};window.addEventListener("keydown",a=>{t[a.key]!==void 0&&(t[a.key]=!0)}),window.addEventListener("keyup",a=>{t[a.key]!==void 0&&(t[a.key]=!1)});const i=2,r=()=>{requestAnimationFrame(r),t.ArrowRight&&e.position.setX(e.position.x+i),t.ArrowLeft&&e.position.setX(e.position.x-i),t.ArrowUp&&e.position.setY(e.position.y+i),t.ArrowDown&&e.position.setY(e.position.y-i)};r()}}class Ae{constructor(e,t){u(this,"_engine");if(!e)throw new Error("[Mirage] Target element is required.");this._engine=new Ie(e,t)}start(){this._engine.start()}stop(){this._engine.stop()}destroy(){this._engine.dispose()}test(){this._engine.test()}}y.Mirage=Ae,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
|
package/dist/src/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mirage-engine",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.18",
|
|
4
4
|
"description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
"dist"
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@mirage-engine/painter": "0.
|
|
25
|
-
"@mirage-engine/core": "0.2.
|
|
24
|
+
"@mirage-engine/painter": "1.0.0",
|
|
25
|
+
"@mirage-engine/core": "0.2.2"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"three": "^0.
|
|
28
|
+
"three": "^0.160.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/three": "^0.181.0",
|
|
32
|
-
"three": "^0.
|
|
32
|
+
"three": "^0.160.0",
|
|
33
33
|
"typescript": "^5.0.0",
|
|
34
34
|
"vite": "^4.0.0",
|
|
35
35
|
"vite-plugin-dts": "^4.5.4"
|
|
@@ -49,7 +49,6 @@
|
|
|
49
49
|
"author": "dltldn333@gmail.com",
|
|
50
50
|
"license": "MIT",
|
|
51
51
|
"scripts": {
|
|
52
|
-
"dev": "vite",
|
|
53
52
|
"build": "tsc && vite build"
|
|
54
53
|
}
|
|
55
54
|
}
|
package/dist/dev/main.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|