mirage-engine 0.2.3 → 0.2.4

package/README.md

@@ -2,6 +2,10 @@
 
 > **An engine that mirrors HTML DOM elements to a WebGL scene in real-time.**
 
+[![npm version](https://img.shields.io/npm/v/mirage-engine.svg?style=flat-square)](https://www.npmjs.com/package/mirage-engine)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=flat-square)](https://www.typescriptlang.org/)
+
 MirageEngine directly mirrors HTML DOM elements to WebGL objects. It observes DOM mutations and synchronizes position, style, and content in real-time, allowing standard HTML elements to exist within a WebGL context.
 
 ## Installation
@@ -17,4 +21,6 @@ import { Mirage } from 'mirage-engine';
 
 const engine = new Mirage("#target");
 engine.start();
-```
+```
+
+**License | MIT © dltldn333**

package/dist/mirage-engine.js

@@ -1,26 +1,39 @@
-var D = Object.defineProperty;
-var E = (n, e, t) => e in n ? D(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var s = (n, e, t) => (E(n, typeof e != "symbol" ? e + "" : e, t), t);
-import * as a from "three";
-const m = 0, u = 1, p = 2, y = 8;
+var b = Object.defineProperty;
+var D = (i, e, t) => e in i ? b(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var o = (i, e, t) => (D(i, typeof e != "symbol" ? e + "" : e, t), t);
+import * as c from "three";
+const g = 0, T = 1, y = 2, C = 4, w = 8, x = 16;
+function N(i, e, t, s) {
+  const n = document.createElement("canvas"), r = n.getContext("2d");
+  if (!r)
+    throw new Error("[Mirage] Failed to create canvas context");
+  const a = window.devicePixelRatio || 2;
+  n.width = t * a, n.height = s * a, r.scale(a, a), r.font = e.font, r.fillStyle = e.color, r.textAlign = e.textAlign, r.direction = e.direction, r.textBaseline = "middle";
+  let l = 0;
+  e.textAlign === "center" && (l = t / 2), e.textAlign === "right" && (l = t);
+  const m = s / 2;
+  r.fillText(i, l, m);
+  const h = new c.CanvasTexture(n);
+  return h.colorSpace = c.SRGBColorSpace, h.minFilter = c.LinearFilter, h.needsUpdate = !0, h;
+}
 class R {
   constructor() {
-    s(this, "canvas");
-    s(this, "scene");
-    s(this, "camera");
-    s(this, "renderer");
-    s(this, "renderOrder", 0);
-    s(this, "meshMap", /* @__PURE__ */ new Map());
-    this.canvas = document.createElement("canvas"), this.scene = new a.Scene();
+    o(this, "canvas");
+    o(this, "scene");
+    o(this, "camera");
+    o(this, "renderer");
+    o(this, "renderOrder", 0);
+    o(this, "meshMap", /* @__PURE__ */ new Map());
+    this.canvas = document.createElement("canvas"), this.scene = new c.Scene();
     const e = window.innerWidth, t = window.innerHeight;
-    this.camera = new a.OrthographicCamera(
+    this.camera = new c.OrthographicCamera(
       e / -2,
       e / 2,
       t / 2,
       t / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.renderer = new a.WebGLRenderer({
+    ), this.camera.position.z = 100, this.renderer = new c.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0
     }), this.renderer.setSize(e, t);
@@ -42,108 +55,167 @@ class R {
     this.renderOrder = 0;
     const t = /* @__PURE__ */ new Set();
     this.reconcileNode(e, t);
-    for (const [r, i] of this.meshMap.entries())
-      t.has(r) || (this.scene.remove(i), i.geometry.dispose(), i.material instanceof a.Material && i.material.dispose(), this.meshMap.delete(r));
+    for (const [s, n] of this.meshMap.entries())
+      t.has(s) || (this.scene.remove(n), n.geometry.dispose(), n.material instanceof c.Material && n.material.dispose(), this.meshMap.delete(s));
   }
   reconcileNode(e, t) {
+    var s, n;
     if (e.type === "BOX") {
       t.add(e.element);
       let r = this.meshMap.get(e.element);
-      if (r)
-        console.log("[V2] 기존 매쉬 재사용:", e.element);
-      else {
-        console.log("[V2] 매쉬 신규 생성:", e.element);
-        const i = new a.PlaneGeometry(1, 1), o = new a.MeshBasicMaterial({ transparent: !0 });
-        r = new a.Mesh(i, o), this.scene.add(r), this.meshMap.set(e.element, r);
+      if (!r) {
+        const a = new c.PlaneGeometry(1, 1), l = new c.MeshBasicMaterial({ transparent: !0 });
+        r = new c.Mesh(a, l), this.scene.add(r), this.meshMap.set(e.element, r);
       }
       this.updateMeshProperties(r, e);
-      for (const i of e.children)
-        this.reconcileNode(i, t);
+      for (const a of e.children)
+        this.reconcileNode(a, t);
+    }
+    if (e.type === "TEXT") {
+      t.add(e.element);
+      let r = this.meshMap.get(e.element);
+      if (!r) {
+        const d = new c.PlaneGeometry(1, 1), u = new c.MeshBasicMaterial({ transparent: !0 });
+        r = new c.Mesh(d, u), r.name = "BG_MESH", this.scene.add(r), this.meshMap.set(e.element, r);
+      }
+      this.updateMeshProperties(r, e);
+      let a = r.children.find(
+        (d) => d.name === "TEXT_CHILD"
+      );
+      const l = JSON.stringify(e.textStyles), m = (s = a == null ? void 0 : a.userData) == null ? void 0 : s.styleHash, h = e.dirtyMask & x;
+      if (!a || h || l !== m) {
+        a && ((n = a.material.map) == null || n.dispose(), a.geometry.dispose(), r.remove(a));
+        const d = N(
+          e.textContent || "",
+          e.textStyles,
+          e.rect.width,
+          e.rect.height
+        ), u = new c.PlaneGeometry(1, 1), f = new c.MeshBasicMaterial({
+          map: d,
+          transparent: !0,
+          side: c.FrontSide,
+          color: 16777215,
+          opacity: 1
+        });
+        a = new c.Mesh(u, f), a.name = "TEXT_CHILD", a.userData = { styleHash: l }, a.position.z = 5e-3, r.add(a);
+      }
     }
   }
   updateMeshProperties(e, t) {
-    console.log(
-      `[V2] 업데이트 중인 매쉬 ID: ${e.uuid}, 마스크: ${t.dirtyMask}`
-    );
-    const { rect: r, styles: i } = t, o = this.renderer.domElement.width, l = this.renderer.domElement.height;
-    e.scale.set(r.width, r.height, 1);
-    const g = 1e-3;
+    const { rect: s, styles: n } = t, r = this.renderer.domElement.width, a = this.renderer.domElement.height;
+    e.scale.set(s.width, s.height, 1);
+    const l = 1e-3;
     this.renderOrder++, e.position.set(
-      r.x - o / 2 + r.width / 2,
-      -r.y + l / 2 - r.height / 2,
-      i.zIndex + this.renderOrder * g
+      s.x - r / 2 + s.width / 2,
+      -s.y + a / 2 - s.height / 2,
+      n.zIndex + this.renderOrder * l
     );
-    const c = e.material, d = i.backgroundColor;
-    let f = d, w = 1;
-    if (d === "transparent" || d === "rgba(0, 0, 0, 0)")
-      f = "#ffffff", w = 0;
-    else if (d.startsWith("rgba")) {
-      const h = d.match(/[\d.]+/g);
-      if (h && h.length >= 4) {
-        const M = h[0], b = h[1], S = h[2];
-        w = parseFloat(h[3]), f = `rgb(${M}, ${b}, ${S})`;
+    const m = e.material, h = n.backgroundColor;
+    let p = h, d = 1;
+    if (h === "transparent" || h === "rgba(0, 0, 0, 0)")
+      p = "#ffffff", d = 0;
+    else if (h.startsWith("rgba")) {
+      const f = h.match(/[\d.]+/g);
+      if (f && f.length >= 4) {
+        const E = f[0], M = f[1], v = f[2];
+        d = parseFloat(f[3]), p = `rgb(${E}, ${M}, ${v})`;
       }
     }
-    const T = i.opacity * w;
-    c.color.set(f), c.opacity = T, c.transparent = T < 1, t.dirtyMask & u && console.log(" -> 위치/크기만 업데이트됨"), t.dirtyMask & p && console.log(" -> 스타일만 업데이트됨");
+    const u = n.opacity * d;
+    m.color.set(p), m.opacity = u, m.transparent = u < 1;
   }
   render() {
     this.renderer.render(this.scene, this.camera);
   }
 }
-function v(n, e = u | p) {
-  if (n.tagName === "SCRIPT" || n.tagName === "STYLE")
+function F(i) {
+  var e;
+  return i.nodeType === Node.TEXT_NODE && (((e = i.textContent) == null ? void 0 : e.trim().length) || 0) > 0;
+}
+function z(i) {
+  const e = Array.from(i.childNodes);
+  return e.length === 0 || e.some(
+    (n) => n.nodeType === Node.ELEMENT_NODE
+  ) ? !1 : e.some(F);
+}
+function L(i) {
+  const e = parseFloat(i.fontSize);
+  let t = parseFloat(i.lineHeight);
+  isNaN(t) && (t = e * 1.2);
+  let s = parseFloat(i.letterSpacing);
+  return isNaN(s) && (s = 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: s
+  };
+}
+function S(i, e = T | y | C | x | w) {
+  const t = i.getBoundingClientRect(), s = window.getComputedStyle(i);
+  if (t.width === 0 || t.height === 0 || s.display === "none")
     return null;
-  const t = n.getBoundingClientRect(), r = {
-    x: t.x + window.scrollX,
-    y: t.y + window.scrollY,
-    width: t.width,
-    height: t.height
-  }, i = window.getComputedStyle(n), o = {
-    backgroundColor: i.backgroundColor,
-    opacity: parseFloat(i.opacity),
-    zIndex: parseInt(i.zIndex, 10) || 0
-  }, l = [];
-  for (const g of n.children) {
-    const c = v(g);
-    c && l.push(c);
-  }
-  return {
-    type: "BOX",
-    element: n,
-    rect: r,
-    styles: o,
+  let n = i.getAttribute("data-mid");
+  n || (n = Math.random().toString(36).substring(2, 11), i.setAttribute("data-mid", n));
+  const r = parseInt(s.zIndex), a = {
+    backgroundColor: s.backgroundColor,
+    opacity: parseFloat(s.opacity),
+    zIndex: isNaN(r) ? 0 : r,
+    borderRadius: s.borderRadius,
+    borderColor: s.borderColor,
+    borderWidth: s.borderWidth
+  };
+  let l = "BOX", m, h;
+  const p = [];
+  return z(i) ? (l = "TEXT", m = i.textContent || "", h = L(s)) : Array.from(i.children).forEach((d) => {
+    const u = S(d, e);
+    u && p.push(u);
+  }), {
+    id: n,
+    type: l,
+    element: i,
+    rect: {
+      x: t.left + window.scrollX,
+      y: t.top + window.scrollY,
+      width: t.width,
+      height: t.height
+    },
+    styles: a,
+    textContent: m,
+    textStyles: h,
     dirtyMask: e,
-    children: l
+    children: p
   };
 }
-class C {
+class O {
   constructor(e, t) {
-    s(this, "target");
-    s(this, "renderer");
-    s(this, "observer");
-    s(this, "isDomDirty", !1);
-    s(this, "isRunning", !1);
-    s(this, "pendingMask", m);
-    s(this, "mutationTimer", null);
-    s(this, "cssTimer", null);
-    s(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= u | p, this.cssTimer = window.setTimeout(() => {
+    o(this, "target");
+    o(this, "renderer");
+    o(this, "observer");
+    o(this, "isDomDirty", !1);
+    o(this, "isRunning", !1);
+    o(this, "pendingMask", g);
+    o(this, "mutationTimer", null);
+    o(this, "cssTimer", null);
+    o(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= T | y, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
-    s(this, "onWindowResize", () => {
+    o(this, "onWindowResize", () => {
       this.renderer.setSize(window.innerWidth, window.innerHeight), this.isDomDirty = !0;
     });
-    s(this, "renderLoop", () => {
+    o(this, "renderLoop", () => {
       this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
     });
-    this.target = e, this.renderer = t, this.observer = new MutationObserver((r) => {
-      let i = m;
-      for (const o of r)
-        o.type === "childList" ? i |= y : o.type === "attributes" && (o.attributeName === "style" || o.attributeName === "class") && (i |= u | p);
-      if (i !== m) {
-        if (this.pendingMask |= i, i & y) {
+    this.target = e, this.renderer = t, this.observer = new MutationObserver((s) => {
+      let n = g;
+      for (const r of s)
+        r.type === "childList" ? n |= w : r.type === "attributes" && (r.attributeName === "style" || r.attributeName === "class") && (n |= T | y);
+      if (n !== g) {
+        if (this.pendingMask |= n, n & w) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -169,19 +241,19 @@ class C {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const e = v(this.target, this.pendingMask);
-    e && this.renderer.syncScene(e), this.pendingMask = m;
+    const e = S(this.target, this.pendingMask);
+    e && this.renderer.syncScene(e), this.pendingMask = g;
   }
 }
-class k {
+class _ {
   constructor(e) {
-    s(this, "renderer");
-    s(this, "syncer");
-    s(this, "target");
+    o(this, "renderer");
+    o(this, "syncer");
+    o(this, "target");
     const t = document.querySelector(e);
     if (!t)
       throw new Error(`[Mirage] Element not found: ${e}`);
-    this.target = t, this.renderer = new R(), this.renderer.mount(document.body), this.syncer = new C(this.target, this.renderer);
+    this.target = t, this.renderer = new R(), this.renderer.mount(document.body), this.syncer = new O(this.target, this.renderer);
   }
   start() {
     this.syncer.start();
@@ -191,5 +263,5 @@ class k {
   }
 }
 export {
-  k as Mirage
+  _ as Mirage
 };

package/dist/mirage-engine.umd.js

@@ -1 +1 @@
-(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.MirageEngine={},o.THREE))})(this,function(o,a){"use strict";var z=Object.defineProperty;var L=(o,a,h)=>a in o?z(o,a,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[a]=h;var s=(o,a,h)=>(L(o,typeof a!="symbol"?a+"":a,h),h);function h(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const d=h(a),f=0,p=1,g=2,b=8;class E{constructor(){s(this,"canvas");s(this,"scene");s(this,"camera");s(this,"renderer");s(this,"renderOrder",0);s(this,"meshMap",new Map);this.canvas=document.createElement("canvas"),this.scene=new d.Scene;const e=window.innerWidth,t=window.innerHeight;this.camera=new d.OrthographicCamera(e/-2,e/2,t/2,t/-2,1,1e3),this.camera.position.z=100,this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0}),this.renderer.setSize(e,t)}mount(e){e.appendChild(this.canvas)}dispose(){try{this.renderer.dispose()}catch{}this.canvas.parentElement&&this.canvas.parentElement.removeChild(this.canvas)}setSize(e,t){this.renderer.setSize(e,t),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){this.renderOrder=0;const t=new Set;this.reconcileNode(e,t);for(const[i,r]of this.meshMap.entries())t.has(i)||(this.scene.remove(r),r.geometry.dispose(),r.material instanceof d.Material&&r.material.dispose(),this.meshMap.delete(i))}reconcileNode(e,t){if(e.type==="BOX"){t.add(e.element);let i=this.meshMap.get(e.element);if(i)console.log("[V2] 기존 매쉬 재사용:",e.element);else{console.log("[V2] 매쉬 신규 생성:",e.element);const r=new d.PlaneGeometry(1,1),c=new d.MeshBasicMaterial({transparent:!0});i=new d.Mesh(r,c),this.scene.add(i),this.meshMap.set(e.element,i)}this.updateMeshProperties(i,e);for(const r of e.children)this.reconcileNode(r,t)}}updateMeshProperties(e,t){console.log(`[V2] 업데이트 중인 매쉬 ID: ${e.uuid}, 마스크: ${t.dirtyMask}`);const{rect:i,styles:r}=t,c=this.renderer.domElement.width,y=this.renderer.domElement.height;e.scale.set(i.width,i.height,1);const T=.001;this.renderOrder++,e.position.set(i.x-c/2+i.width/2,-i.y+y/2-i.height/2,r.zIndex+this.renderOrder*T);const l=e.material,u=r.backgroundColor;let w=u,M=1;if(u==="transparent"||u==="rgba(0, 0, 0, 0)")w="#ffffff",M=0;else if(u.startsWith("rgba")){const m=u.match(/[\d.]+/g);if(m&&m.length>=4){const O=m[0],C=m[1],k=m[2];M=parseFloat(m[3]),w=`rgb(${O}, ${C}, ${k})`}}const S=r.opacity*M;l.color.set(w),l.opacity=S,l.transparent=S<1,t.dirtyMask&p&&console.log(" -> 위치/크기만 업데이트됨"),t.dirtyMask&g&&console.log(" -> 스타일만 업데이트됨")}render(){this.renderer.render(this.scene,this.camera)}}function v(n,e=p|g){if(n.tagName==="SCRIPT"||n.tagName==="STYLE")return null;const t=n.getBoundingClientRect(),i={x:t.x+window.scrollX,y:t.y+window.scrollY,width:t.width,height:t.height},r=window.getComputedStyle(n),c={backgroundColor:r.backgroundColor,opacity:parseFloat(r.opacity),zIndex:parseInt(r.zIndex,10)||0},y=[];for(const T of n.children){const l=v(T);l&&y.push(l)}return{type:"BOX",element:n,rect:i,styles:c,dirtyMask:e,children:y}}class D{constructor(e,t){s(this,"target");s(this,"renderer");s(this,"observer");s(this,"isDomDirty",!1);s(this,"isRunning",!1);s(this,"pendingMask",f);s(this,"mutationTimer",null);s(this,"cssTimer",null);s(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=p|g,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});s(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});s(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=e,this.renderer=t,this.observer=new MutationObserver(i=>{let r=f;for(const c of i)c.type==="childList"?r|=b:c.type==="attributes"&&(c.attributeName==="style"||c.attributeName==="class")&&(r|=p|g);if(r!==f){if(this.pendingMask|=r,r&b){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=v(this.target,this.pendingMask);e&&this.renderer.syncScene(e),this.pendingMask=f}}class R{constructor(e){s(this,"renderer");s(this,"syncer");s(this,"target");const t=document.querySelector(e);if(!t)throw new Error(`[Mirage] Element not found: ${e}`);this.target=t,this.renderer=new E,this.renderer.mount(document.body),this.syncer=new D(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop(),this.renderer.dispose()}}o.Mirage=R,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(l,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],d):(l=typeof globalThis<"u"?globalThis:l||self,d(l.MirageEngine={},l.THREE))})(this,function(l,d){"use strict";var H=Object.defineProperty;var k=(l,d,T)=>d in l?H(l,d,{enumerable:!0,configurable:!0,writable:!0,value:T}):l[d]=T;var o=(l,d,T)=>(k(l,typeof d!="symbol"?d+"":d,T),T);function T(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const c=T(d),w=0,S=1,x=2,v=4,E=8,M=16;function D(i,e,t,r){const s=document.createElement("canvas"),n=s.getContext("2d");if(!n)throw new Error("[Mirage] Failed to create canvas context");const a=window.devicePixelRatio||2;s.width=t*a,s.height=r*a,n.scale(a,a),n.font=e.font,n.fillStyle=e.color,n.textAlign=e.textAlign,n.direction=e.direction,n.textBaseline="middle";let m=0;e.textAlign==="center"&&(m=t/2),e.textAlign==="right"&&(m=t);const f=r/2;n.fillText(i,m,f);const h=new c.CanvasTexture(s);return h.colorSpace=c.SRGBColorSpace,h.minFilter=c.LinearFilter,h.needsUpdate=!0,h}class C{constructor(){o(this,"canvas");o(this,"scene");o(this,"camera");o(this,"renderer");o(this,"renderOrder",0);o(this,"meshMap",new Map);this.canvas=document.createElement("canvas"),this.scene=new c.Scene;const e=window.innerWidth,t=window.innerHeight;this.camera=new c.OrthographicCamera(e/-2,e/2,t/2,t/-2,1,1e3),this.camera.position.z=100,this.renderer=new c.WebGLRenderer({canvas:this.canvas,alpha:!0}),this.renderer.setSize(e,t)}mount(e){e.appendChild(this.canvas)}dispose(){try{this.renderer.dispose()}catch{}this.canvas.parentElement&&this.canvas.parentElement.removeChild(this.canvas)}setSize(e,t){this.renderer.setSize(e,t),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){this.renderOrder=0;const t=new Set;this.reconcileNode(e,t);for(const[r,s]of this.meshMap.entries())t.has(r)||(this.scene.remove(s),s.geometry.dispose(),s.material instanceof c.Material&&s.material.dispose(),this.meshMap.delete(r))}reconcileNode(e,t){var r,s;if(e.type==="BOX"){t.add(e.element);let n=this.meshMap.get(e.element);if(!n){const a=new c.PlaneGeometry(1,1),m=new c.MeshBasicMaterial({transparent:!0});n=new c.Mesh(a,m),this.scene.add(n),this.meshMap.set(e.element,n)}this.updateMeshProperties(n,e);for(const a of e.children)this.reconcileNode(a,t)}if(e.type==="TEXT"){t.add(e.element);let n=this.meshMap.get(e.element);if(!n){const u=new c.PlaneGeometry(1,1),p=new c.MeshBasicMaterial({transparent:!0});n=new c.Mesh(u,p),n.name="BG_MESH",this.scene.add(n),this.meshMap.set(e.element,n)}this.updateMeshProperties(n,e);let a=n.children.find(u=>u.name==="TEXT_CHILD");const m=JSON.stringify(e.textStyles),f=(r=a==null?void 0:a.userData)==null?void 0:r.styleHash,h=e.dirtyMask&M;if(!a||h||m!==f){a&&((s=a.material.map)==null||s.dispose(),a.geometry.dispose(),n.remove(a));const u=D(e.textContent||"",e.textStyles,e.rect.width,e.rect.height),p=new c.PlaneGeometry(1,1),g=new c.MeshBasicMaterial({map:u,transparent:!0,side:c.FrontSide,color:16777215,opacity:1});a=new c.Mesh(p,g),a.name="TEXT_CHILD",a.userData={styleHash:m},a.position.z=.005,n.add(a)}}}updateMeshProperties(e,t){const{rect:r,styles:s}=t,n=this.renderer.domElement.width,a=this.renderer.domElement.height;e.scale.set(r.width,r.height,1);const m=.001;this.renderOrder++,e.position.set(r.x-n/2+r.width/2,-r.y+a/2-r.height/2,s.zIndex+this.renderOrder*m);const f=e.material,h=s.backgroundColor;let y=h,u=1;if(h==="transparent"||h==="rgba(0, 0, 0, 0)")y="#ffffff",u=0;else if(h.startsWith("rgba")){const g=h.match(/[\d.]+/g);if(g&&g.length>=4){const L=g[0],_=g[1],I=g[2];u=parseFloat(g[3]),y=`rgb(${L}, ${_}, ${I})`}}const p=s.opacity*u;f.color.set(y),f.opacity=p,f.transparent=p<1}render(){this.renderer.render(this.scene,this.camera)}}function N(i){var e;return i.nodeType===Node.TEXT_NODE&&(((e=i.textContent)==null?void 0:e.trim().length)||0)>0}function R(i){const e=Array.from(i.childNodes);return e.length===0||e.some(s=>s.nodeType===Node.ELEMENT_NODE)?!1:e.some(N)}function O(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 b(i,e=S|x|v|M|E){const t=i.getBoundingClientRect(),r=window.getComputedStyle(i);if(t.width===0||t.height===0||r.display==="none")return null;let s=i.getAttribute("data-mid");s||(s=Math.random().toString(36).substring(2,11),i.setAttribute("data-mid",s));const n=parseInt(r.zIndex),a={backgroundColor:r.backgroundColor,opacity:parseFloat(r.opacity),zIndex:isNaN(n)?0:n,borderRadius:r.borderRadius,borderColor:r.borderColor,borderWidth:r.borderWidth};let m="BOX",f,h;const y=[];return R(i)?(m="TEXT",f=i.textContent||"",h=O(r)):Array.from(i.children).forEach(u=>{const p=b(u,e);p&&y.push(p)}),{id:s,type:m,element:i,rect:{x:t.left+window.scrollX,y:t.top+window.scrollY,width:t.width,height:t.height},styles:a,textContent:f,textStyles:h,dirtyMask:e,children:y}}class z{constructor(e,t){o(this,"target");o(this,"renderer");o(this,"observer");o(this,"isDomDirty",!1);o(this,"isRunning",!1);o(this,"pendingMask",w);o(this,"mutationTimer",null);o(this,"cssTimer",null);o(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=S|x,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});o(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});o(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=e,this.renderer=t,this.observer=new MutationObserver(r=>{let s=w;for(const n of r)n.type==="childList"?s|=E:n.type==="attributes"&&(n.attributeName==="style"||n.attributeName==="class")&&(s|=S|x);if(s!==w){if(this.pendingMask|=s,s&E){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=b(this.target,this.pendingMask);e&&this.renderer.syncScene(e),this.pendingMask=w}}class F{constructor(e){o(this,"renderer");o(this,"syncer");o(this,"target");const t=document.querySelector(e);if(!t)throw new Error(`[Mirage] Element not found: ${e}`);this.target=t,this.renderer=new C,this.renderer.mount(document.body),this.syncer=new z(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop(),this.renderer.dispose()}}l.Mirage=F,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/dist/src/renderer/TextTextureGenerator.d.ts

@@ -0,0 +1,3 @@
+import { TextStyles } from '../types';
+import * as THREE from "three";
+export declare function createTextTexture(text: string, styles: TextStyles, rectWidth: number, rectHeight: number): THREE.CanvasTexture;

package/dist/src/types/index.d.ts

@@ -1,3 +1,4 @@
+export type NodeType = "BOX" | "TEXT";
 export interface NodeRect {
     x: number;
     y: number;
@@ -8,12 +9,27 @@ export interface BoxStyles {
     backgroundColor: string;
     opacity: number;
     zIndex: number;
+    borderRadius: string;
+    borderColor: string;
+    borderWidth: string;
+}
+export interface TextStyles {
+    font: string;
+    color: string;
+    textAlign: CanvasTextAlign;
+    textBaseline: CanvasTextBaseline;
+    direction: CanvasDirection;
+    lineHeight: number;
+    letterSpacing: number;
 }
 export interface SceneNode {
-    type: "BOX";
+    id: string;
+    type: NodeType;
     element: HTMLElement;
     rect: NodeRect;
     styles: BoxStyles;
+    textContent?: string;
+    textStyles?: TextStyles;
     dirtyMask: number;
     children: SceneNode[];
 }
@@ -22,3 +38,4 @@ export declare const DIRTY_RECT: number;
 export declare const DIRTY_STYLE: number;
 export declare const DIRTY_ZINDEX: number;
 export declare const DIRTY_STRUCTURE: number;
+export declare const DIRTY_CONTENT: number;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "mirage-engine",
-  "version": "0.2.3",
+  "version": "0.2.4",
+  "description": "An engine that mirrors HTML DOM elements to a WebGL scene in real-time.",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/mirage-engine.umd.js",
@@ -21,7 +22,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build", 
+    "build": "tsc && vite build",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
@@ -34,7 +35,13 @@
     "vite": "^4.0.0",
     "vite-plugin-dts": "^4.5.4"
   },
-  "keywords": ["webgl", "dom", "mirroring", "threejs", "typescript"],
+  "keywords": [
+    "webgl",
+    "dom",
+    "mirroring",
+    "threejs",
+    "typescript"
+  ],
   "author": "dltldn333@gmail.com",
   "license": "MIT"
 }