mirage-engine 0.2.3 → 0.2.5

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,29 +1,57 @@
-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;
-class R {
+var v = Object.defineProperty;
+var D = (n, e, t) => e in n ? v(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var o = (n, e, t) => (D(n, typeof e != "symbol" ? e + "" : e, t), t);
+import * as m from "three";
+const T = 0, y = 1, x = 2, M = 4, S = 8, C = 16;
+function F(n, e, t) {
+  const i = e.split(`
+`), r = [];
+  return i.forEach((s) => {
+    const g = s.split(" ");
+    let l = g[0];
+    for (let p = 1; p < g.length; p++) {
+      const a = g[p];
+      n.measureText(l + " " + a).width < t ? l += " " + a : (r.push(l), l = a);
+    }
+    r.push(l);
+  }), r;
+}
+function N(n, e, t, i) {
+  const r = document.createElement("canvas"), s = r.getContext("2d");
+  if (!s)
+    throw new Error("[Mirage] Failed to create canvas context");
+  const g = 2, l = (window.devicePixelRatio || 2) * g;
+  r.width = t * l, r.height = i * l, s.scale(l, l), s.font = e.font, s.fillStyle = e.color, s.textBaseline = "top", s.globalAlpha = 1;
+  const p = F(s, n, t), a = e.lineHeight;
+  p.forEach((h, u) => {
+    const f = u * a + 2;
+    let d = 0;
+    e.textAlign === "center" ? d = t / 2 : e.textAlign === "right" && (d = t), s.textAlign = e.textAlign, s.fillText(h, d, f);
+  });
+  const c = new m.CanvasTexture(r);
+  return c.colorSpace = m.SRGBColorSpace, c.minFilter = m.LinearFilter, c.magFilter = m.LinearFilter, c.needsUpdate = !0, c;
+}
+class L {
   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 m.Scene();
     const e = window.innerWidth, t = window.innerHeight;
-    this.camera = new a.OrthographicCamera(
+    this.camera = new m.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 m.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0
-    }), this.renderer.setSize(e, t);
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(e, t);
   }
   mount(e) {
     e.appendChild(this.canvas);
@@ -42,108 +70,199 @@ 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 [i, r] of this.meshMap.entries())
+      t.has(i) || (this.scene.remove(r), r.geometry.dispose(), r.material instanceof m.Material && r.material.dispose(), this.meshMap.delete(i));
   }
   reconcileNode(e, t) {
-    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);
-      }
-      this.updateMeshProperties(r, e);
-      for (const i of e.children)
-        this.reconcileNode(i, t);
+    t.add(e.element);
+    let i = this.meshMap.get(e.element);
+    if (!i) {
+      const r = new m.PlaneGeometry(1, 1), s = new m.MeshBasicMaterial({ transparent: !0 });
+      i = new m.Mesh(r, s), e.type === "TEXT" && (i.name = "BG_MESH"), this.scene.add(i), this.meshMap.set(e.element, i);
     }
+    if (i.userData.domRect = e.rect, this.updateMeshProperties(i, e), e.type === "BOX")
+      for (const r of e.children)
+        this.reconcileNode(r, t);
+    else
+      e.type === "TEXT" && this.reconcileTextChild(i, e);
   }
-  updateMeshProperties(e, t) {
-    console.log(
-      `[V2] 업데이트 중인 매쉬 ID: ${e.uuid}, 마스크: ${t.dirtyMask}`
+  reconcileTextChild(e, t) {
+    var l, p;
+    let i = e.children.find(
+      (a) => a.name === "TEXT_CHILD"
     );
-    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 r = JSON.stringify(t.textStyles), s = (l = i == null ? void 0 : i.userData) == null ? void 0 : l.styleHash;
+    if (!i || t.dirtyMask & C || r !== s) {
+      i && ((p = i.material.map) == null || p.dispose(), i.geometry.dispose(), e.remove(i));
+      const a = N(
+        t.textContent || "",
+        t.textStyles,
+        t.rect.width,
+        t.rect.height
+      ), c = new m.PlaneGeometry(1, 1), h = new m.MeshBasicMaterial({
+        map: a,
+        transparent: !0,
+        side: m.FrontSide,
+        color: 16777215
+      });
+      i = new m.Mesh(c, h), i.name = "TEXT_CHILD", i.userData = { styleHash: r }, e.add(i);
+    }
+    if (i) {
+      const a = e.userData.domRect, c = a.x + a.width / 2, h = a.y + a.height / 2, u = t.rect.x + t.rect.width / 2, f = t.rect.y + t.rect.height / 2, d = u - c, w = -(f - h);
+      i.position.set(d, w, 5e-3);
+    }
+  }
+  updateMeshProperties(e, t) {
+    const { rect: i, styles: r } = t, s = this.renderer.getPixelRatio(), g = this.renderer.domElement.width / s, l = this.renderer.domElement.height / s;
+    e.scale.set(i.width, i.height, 1);
+    const p = 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
+      i.x - g / 2 + i.width / 2,
+      -i.y + l / 2 - i.height / 2,
+      r.zIndex + this.renderOrder * p
     );
-    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 a = e.material, c = r.backgroundColor;
+    let h = c, u = 1;
+    if (c === "transparent" || c === "rgba(0, 0, 0, 0)")
+      h = "#ffffff", u = 0;
+    else if (c.startsWith("rgba")) {
+      const d = c.match(/[\d.]+/g);
+      if (d && d.length >= 4) {
+        const w = d[0], R = d[1], E = d[2];
+        u = parseFloat(d[3]), h = `rgb(${w}, ${R}, ${E})`;
       }
     }
-    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 f = r.opacity * u;
+    a.color.set(h), a.opacity = f, a.transparent = f < 1;
   }
   render() {
     this.renderer.render(this.scene, this.camera);
   }
 }
-function v(n, e = u | p) {
-  if (n.tagName === "SCRIPT" || n.tagName === "STYLE")
-    return null;
-  const t = n.getBoundingClientRect(), r = {
-    x: t.x + window.scrollX,
-    y: t.y + window.scrollY,
+function z(n) {
+  const e = document.createRange();
+  e.selectNodeContents(n);
+  const t = e.getBoundingClientRect();
+  return {
+    left: t.left,
+    top: t.top,
     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);
+  };
+}
+function I(n) {
+  const e = parseFloat(n.fontSize);
+  let t = parseFloat(n.lineHeight);
+  isNaN(t) && (t = e * 1.2);
+  let i = parseFloat(n.letterSpacing);
+  return isNaN(i) && (i = 0), {
+    font: `${n.fontStyle} ${n.fontWeight} ${n.fontSize} ${n.fontFamily}`,
+    color: n.color,
+    textAlign: n.textAlign || "start",
+    textBaseline: "alphabetic",
+    direction: n.direction || "inherit",
+    lineHeight: t,
+    letterSpacing: i
+  };
+}
+function b(n, e = y | x | M | C | S) {
+  if (n.nodeType === Node.TEXT_NODE) {
+    const h = n;
+    if (!h.textContent || !h.textContent.trim())
+      return null;
+    const u = h.textContent.replace(/\s+/g, " ").trim();
+    if (u.length === 0)
+      return null;
+    const f = z(h);
+    if (f.width === 0 || f.height === 0)
+      return null;
+    const d = h.parentElement, w = d ? window.getComputedStyle(d) : null;
+    return w ? {
+      id: Math.random().toString(36).substring(2, 9),
+      type: "TEXT",
+      element: h,
+      rect: {
+        x: f.left + window.scrollX,
+        y: f.top + window.scrollY,
+        width: f.width,
+        height: f.height
+      },
+      styles: {
+        backgroundColor: "transparent",
+        opacity: parseFloat(w.opacity),
+        zIndex: 0,
+        borderRadius: "0px",
+        borderColor: "transparent",
+        borderWidth: "0px"
+      },
+      textContent: u,
+      textStyles: I(w),
+      dirtyMask: e,
+      children: []
+    } : null;
   }
-  return {
+  const t = n, i = t.getBoundingClientRect(), r = window.getComputedStyle(t);
+  if (i.width === 0 || i.height === 0 || r.display === "none")
+    return null;
+  let s = t.getAttribute("data-mid");
+  s || (s = Math.random().toString(36).substring(2, 11), t.setAttribute("data-mid", s));
+  const g = parseInt(r.zIndex), l = {
+    backgroundColor: r.backgroundColor,
+    opacity: parseFloat(r.opacity),
+    zIndex: isNaN(g) ? 0 : g,
+    borderRadius: r.borderRadius,
+    borderColor: r.borderColor,
+    borderWidth: r.borderWidth
+  };
+  let p, a;
+  const c = [];
+  return Array.from(t.childNodes).forEach((h) => {
+    const u = b(h, e);
+    u && c.push(u);
+  }), {
+    id: s,
     type: "BOX",
-    element: n,
-    rect: r,
-    styles: o,
+    element: t,
+    rect: {
+      x: i.left + window.scrollX,
+      y: i.top + window.scrollY,
+      width: i.width,
+      height: i.height
+    },
+    styles: l,
+    textContent: p,
+    textStyles: a,
     dirtyMask: e,
-    children: l
+    children: c
   };
 }
-class C {
+class H {
   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", T);
+    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 |= y | x, 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((i) => {
+      let r = T;
+      for (const s of i)
+        s.type === "childList" ? r |= S : s.type === "attributes" && (s.attributeName === "style" || s.attributeName === "class") && (r |= y | x);
+      if (r !== T) {
+        if (this.pendingMask |= r, r & S) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -169,19 +288,19 @@ class C {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const e = v(this.target, this.pendingMask);
-    e && this.renderer.syncScene(e), this.pendingMask = m;
+    const e = b(this.target, this.pendingMask);
+    e && this.renderer.syncScene(e), this.pendingMask = T;
   }
 }
-class k {
+class X {
   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 L(), this.renderer.mount(document.body), this.syncer = new H(this.target, this.renderer);
   }
   start() {
     this.syncer.start();
@@ -191,5 +310,5 @@ class k {
   }
 }
 export {
-  k as Mirage
+  X as Mirage
 };

package/dist/mirage-engine.umd.js

@@ -1 +1,2 @@
-(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(m,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],f):(m=typeof globalThis<"u"?globalThis:m||self,f(m.MirageEngine={},m.THREE))})(this,function(m,f){"use strict";var X=Object.defineProperty;var k=(m,f,y)=>f in m?X(m,f,{enumerable:!0,configurable:!0,writable:!0,value:y}):m[f]=y;var o=(m,f,y)=>(k(m,typeof f!="symbol"?f+"":f,y),y);function y(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=y(f),S=0,b=1,C=2,D=4,E=8,R=16;function M(n,e,t){const i=e.split(`
+`),r=[];return i.forEach(s=>{const T=s.split(" ");let l=T[0];for(let w=1;w<T.length;w++){const a=T[w];n.measureText(l+" "+a).width<t?l+=" "+a:(r.push(l),l=a)}r.push(l)}),r}function F(n,e,t,i){const r=document.createElement("canvas"),s=r.getContext("2d");if(!s)throw new Error("[Mirage] Failed to create canvas context");const T=2,l=(window.devicePixelRatio||2)*T;r.width=t*l,r.height=i*l,s.scale(l,l),s.font=e.font,s.fillStyle=e.color,s.textBaseline="top",s.globalAlpha=1;const w=M(s,n,t),a=e.lineHeight;w.forEach((h,p)=>{const g=p*a+2;let u=0;e.textAlign==="center"?u=t/2:e.textAlign==="right"&&(u=t),s.textAlign=e.textAlign,s.fillText(h,u,g)});const c=new d.CanvasTexture(r);return c.colorSpace=d.SRGBColorSpace,c.minFilter=d.LinearFilter,c.magFilter=d.LinearFilter,c.needsUpdate=!0,c}class N{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 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.setPixelRatio(window.devicePixelRatio),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){t.add(e.element);let i=this.meshMap.get(e.element);if(!i){const r=new d.PlaneGeometry(1,1),s=new d.MeshBasicMaterial({transparent:!0});i=new d.Mesh(r,s),e.type==="TEXT"&&(i.name="BG_MESH"),this.scene.add(i),this.meshMap.set(e.element,i)}if(i.userData.domRect=e.rect,this.updateMeshProperties(i,e),e.type==="BOX")for(const r of e.children)this.reconcileNode(r,t);else e.type==="TEXT"&&this.reconcileTextChild(i,e)}reconcileTextChild(e,t){var l,w;let i=e.children.find(a=>a.name==="TEXT_CHILD");const r=JSON.stringify(t.textStyles),s=(l=i==null?void 0:i.userData)==null?void 0:l.styleHash;if(!i||t.dirtyMask&R||r!==s){i&&((w=i.material.map)==null||w.dispose(),i.geometry.dispose(),e.remove(i));const a=F(t.textContent||"",t.textStyles,t.rect.width,t.rect.height),c=new d.PlaneGeometry(1,1),h=new d.MeshBasicMaterial({map:a,transparent:!0,side:d.FrontSide,color:16777215});i=new d.Mesh(c,h),i.name="TEXT_CHILD",i.userData={styleHash:r},e.add(i)}if(i){const a=e.userData.domRect,c=a.x+a.width/2,h=a.y+a.height/2,p=t.rect.x+t.rect.width/2,g=t.rect.y+t.rect.height/2,u=p-c,x=-(g-h);i.position.set(u,x,.005)}}updateMeshProperties(e,t){const{rect:i,styles:r}=t,s=this.renderer.getPixelRatio(),T=this.renderer.domElement.width/s,l=this.renderer.domElement.height/s;e.scale.set(i.width,i.height,1);const w=.001;this.renderOrder++,e.position.set(i.x-T/2+i.width/2,-i.y+l/2-i.height/2,r.zIndex+this.renderOrder*w);const a=e.material,c=r.backgroundColor;let h=c,p=1;if(c==="transparent"||c==="rgba(0, 0, 0, 0)")h="#ffffff",p=0;else if(c.startsWith("rgba")){const u=c.match(/[\d.]+/g);if(u&&u.length>=4){const x=u[0],I=u[1],_=u[2];p=parseFloat(u[3]),h=`rgb(${x}, ${I}, ${_})`}}const g=r.opacity*p;a.color.set(h),a.opacity=g,a.transparent=g<1}render(){this.renderer.render(this.scene,this.camera)}}function O(n){const e=document.createRange();e.selectNodeContents(n);const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}function z(n){const e=parseFloat(n.fontSize);let t=parseFloat(n.lineHeight);isNaN(t)&&(t=e*1.2);let i=parseFloat(n.letterSpacing);return isNaN(i)&&(i=0),{font:`${n.fontStyle} ${n.fontWeight} ${n.fontSize} ${n.fontFamily}`,color:n.color,textAlign:n.textAlign||"start",textBaseline:"alphabetic",direction:n.direction||"inherit",lineHeight:t,letterSpacing:i}}function v(n,e=b|C|D|R|E){if(n.nodeType===Node.TEXT_NODE){const h=n;if(!h.textContent||!h.textContent.trim())return null;const p=h.textContent.replace(/\s+/g," ").trim();if(p.length===0)return null;const g=O(h);if(g.width===0||g.height===0)return null;const u=h.parentElement,x=u?window.getComputedStyle(u):null;return x?{id:Math.random().toString(36).substring(2,9),type:"TEXT",element:h,rect:{x:g.left+window.scrollX,y:g.top+window.scrollY,width:g.width,height:g.height},styles:{backgroundColor:"transparent",opacity:parseFloat(x.opacity),zIndex:0,borderRadius:"0px",borderColor:"transparent",borderWidth:"0px"},textContent:p,textStyles:z(x),dirtyMask:e,children:[]}:null}const t=n,i=t.getBoundingClientRect(),r=window.getComputedStyle(t);if(i.width===0||i.height===0||r.display==="none")return null;let s=t.getAttribute("data-mid");s||(s=Math.random().toString(36).substring(2,11),t.setAttribute("data-mid",s));const T=parseInt(r.zIndex),l={backgroundColor:r.backgroundColor,opacity:parseFloat(r.opacity),zIndex:isNaN(T)?0:T,borderRadius:r.borderRadius,borderColor:r.borderColor,borderWidth:r.borderWidth};let w,a;const c=[];return Array.from(t.childNodes).forEach(h=>{const p=v(h,e);p&&c.push(p)}),{id:s,type:"BOX",element:t,rect:{x:i.left+window.scrollX,y:i.top+window.scrollY,width:i.width,height:i.height},styles:l,textContent:w,textStyles:a,dirtyMask:e,children:c}}class L{constructor(e,t){o(this,"target");o(this,"renderer");o(this,"observer");o(this,"isDomDirty",!1);o(this,"isRunning",!1);o(this,"pendingMask",S);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|=b|C,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(i=>{let r=S;for(const s of i)s.type==="childList"?r|=E:s.type==="attributes"&&(s.attributeName==="style"||s.attributeName==="class")&&(r|=b|C);if(r!==S){if(this.pendingMask|=r,r&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=v(this.target,this.pendingMask);e&&this.renderer.syncScene(e),this.pendingMask=S}}class H{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 N,this.renderer.mount(document.body),this.syncer=new L(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop(),this.renderer.dispose()}}m.Mirage=H,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/dist/src/dom/Extractor.d.ts

@@ -1,2 +1,2 @@
 import { SceneNode } from '../types';
-export declare function extractSceneGraph(element: HTMLElement, initialMask?: number): SceneNode | null;
+export declare function extractSceneGraph(sourceNode: HTMLElement | Node, initialMask?: number): SceneNode | null;

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

@@ -12,6 +12,7 @@ export declare class Renderer {
     setSize(width: number, height: number): void;
     syncScene(graphNode: SceneNode): void;
     private reconcileNode;
+    private reconcileTextChild;
     private updateMeshProperties;
     render(): void;
 }

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.5",
+  "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"
 }