@mirage-engine/core 0.2.0 → 0.2.2

package/src/animation/Animator.ts

@@ -0,0 +1,163 @@
+import { StyleData } from "../types";
+import { MeshRegistry } from "../store/MeshRegistry";
+import { Painter, parseColor } from "@mirage-engine/painter";
+import * as THREE from "three";
+
+export function animateMeshByData(
+  registry: MeshRegistry,
+  data: Map<HTMLElement, StyleData>,
+) {
+  if (data.size === 0) return;
+
+  data.forEach((styleData, element) => {
+    const mesh = registry.get(element);
+    if (!mesh || !mesh.userData.basePosition) return;
+
+    let { x: baseX, y: baseY } = mesh.userData.basePosition;
+    const { width: baseW, height: baseH } = mesh.userData.baseSize;
+
+    const currentW = styleData.width ?? baseW;
+    const currentH = styleData.height ?? baseH;
+    const widthDiff = currentW - baseW;
+    const heightDiff = currentH - baseH;
+
+    // --- Capture and Lock Transform Origin (Performance & Accuracy) ---
+    // We capture the origin on the very first frame of change (> 0.1px) 
+    // to ensure perfect sync from the start of the first animation.
+    if (
+      styleData.width !== undefined &&
+      mesh.userData.originRatioX === undefined &&
+      Math.abs(widthDiff) > 0.1 
+    ) {
+      const rect = element.getBoundingClientRect();
+      const tx = styleData.x ?? 0;
+      const baseTx = mesh.userData.baseTransform?.x ?? 0;
+      const scrollOffsetX = mesh.userData.isFixed ? 0 : window.scrollX;
+      // rect.left already includes GSAP transform (tx).
+      // We subtract tx to strip the animation, then add baseTx to match baseDOM's initial state.
+      const currentPageX = rect.left + scrollOffsetX - tx + baseTx;
+      const deltaX = currentPageX - mesh.userData.baseDOM.x;
+      
+      let ratioX = -deltaX / widthDiff;
+      if (Math.abs(ratioX) < 0.05) ratioX = 0.0;
+      else if (Math.abs(ratioX - 1.0) < 0.05) ratioX = 1.0;
+      else if (Math.abs(ratioX - 0.5) < 0.05) ratioX = 0.5;
+
+      mesh.userData.originRatioX = ratioX;
+    }
+
+    if (
+      styleData.height !== undefined &&
+      mesh.userData.originRatioY === undefined &&
+      Math.abs(heightDiff) > 0.1
+    ) {
+      const rect = element.getBoundingClientRect();
+      const ty = styleData.y ?? 0;
+      const baseTy = mesh.userData.baseTransform?.y ?? 0;
+      const scrollOffsetY = mesh.userData.isFixed ? 0 : window.scrollY;
+      const currentPageY = rect.top + scrollOffsetY - ty + baseTy;
+      const deltaY = currentPageY - mesh.userData.baseDOM.y;
+      
+      let ratioY = -deltaY / heightDiff;
+      if (Math.abs(ratioY) < 0.05) ratioY = 0.0;
+      else if (Math.abs(ratioY - 1.0) < 0.05) ratioY = 1.0;
+      else if (Math.abs(ratioY - 0.5) < 0.05) ratioY = 0.5;
+
+      mesh.userData.originRatioY = ratioY;
+    }
+
+    // --- Calculate Mesh Position using Measured Origin ---
+    const ratioX = mesh.userData.originRatioX ?? 0.5;
+    const ratioY = mesh.userData.originRatioY ?? 0.5;
+
+    // Since Three.js meshes expand from center, we offset the center based on the locked origin ratio
+    const moveX = widthDiff * (0.5 - ratioX);
+    const moveY = heightDiff * (0.5 - ratioY);
+
+    // --- Calculate Delta Movement ---
+    // Extract baseTransform stored during syncScene
+    const baseTx = mesh.userData.baseTransform?.x ?? 0;
+    const baseTy = mesh.userData.baseTransform?.y ?? 0;
+    
+    // We only want to apply the DIFFERENCE in transform since the base extraction.
+    const deltaTx = (styleData.x ?? baseTx) - baseTx;
+    const deltaTy = (styleData.y ?? baseTy) - baseTy;
+
+    mesh.position.setX(baseX + moveX + deltaTx);
+    mesh.position.setY(baseY - (moveY + deltaTy));
+    mesh.scale.set(currentW, currentH, 1);
+
+    Painter.forceUpdateUniforms(mesh.material as THREE.ShaderMaterial, {
+      backgroundColor: styleData.backgroundColor,
+      backgroundImage: styleData.backgroundImage,
+      opacity: styleData.opacity,
+      borderRadius: styleData.borderRadius ?? mesh.userData.baseStyles?.borderRadius,
+      width: currentW,
+      height: currentH,
+    });
+  });
+}
+export function animateMeshByAttribute(
+  _target: HTMLElement,
+  _options: { duration: number; easing?: string },
+) {}
+
+export function updateFixedMeshesScroll(
+  fixedMeshes: Set<THREE.Mesh>,
+  currentScrollX: number,
+  currentScrollY: number,
+) {
+  fixedMeshes.forEach((mesh) => {
+    if (mesh.userData.isFixed && mesh.userData.initialScroll && mesh.userData.originalBasePosition) {
+      const offsetX = currentScrollX - mesh.userData.initialScroll.x;
+      const offsetY = currentScrollY - mesh.userData.initialScroll.y;
+
+      mesh.userData.basePosition.x = mesh.userData.originalBasePosition.x + offsetX;
+      mesh.userData.basePosition.y = mesh.userData.originalBasePosition.y - offsetY;
+
+      mesh.position.x = mesh.userData.basePosition.x;
+      mesh.position.y = mesh.userData.basePosition.y;
+    }
+  });
+}
+
+export function extractFromStyle(style: CSSStyleDeclaration): StyleData {
+  const styleObject: StyleData = {};
+
+  if (style.opacity) {
+    styleObject.opacity = parseFloat(style.opacity);
+  }
+
+  if (style.backgroundColor && style.backgroundColor !== "rgba(0, 0, 0, 0)") {
+    const parsed = parseColor(style.backgroundColor);
+    styleObject.backgroundColor = [parsed.color.r, parsed.color.g, parsed.color.b];
+  }
+
+  if (style.backgroundImage) {
+    styleObject.backgroundImage = style.backgroundImage;
+  } else if (style.background) {
+    styleObject.backgroundImage = style.background;
+  }
+
+  if (style.borderRadius) {
+    styleObject.borderRadius = parseFloat(style.borderRadius);
+  }
+  if (style.width) {
+    styleObject.width = parseFloat(style.width);
+  }
+  if (style.height) {
+    styleObject.height = parseFloat(style.height);
+  }
+  if (style.transform && style.transform !== "none") {
+    const matrix = new DOMMatrix(style.transform);
+
+    styleObject.x = matrix.m41;
+    styleObject.y = matrix.m42;
+    styleObject.z = matrix.m43;
+
+    // [TODO] direct matrix data pipeline to webGL
+    // styleObject.matrix = matrix.toFloat32Array();
+  }
+
+  return styleObject;
+}

package/src/core/Engine.ts

@@ -1,14 +1,28 @@
 import { CoreConfig } from "../types";
 import { Renderer } from "../renderer/Renderer";
 import { Syncer } from "./Syncer";
+import { MeshRegistry } from "../store/MeshRegistry";
 
 export class Engine {
   private renderer: Renderer;
   private syncer: Syncer;
   private target: HTMLElement;
+  private registry: MeshRegistry;
 
   constructor(target: HTMLElement, config: CoreConfig) {
     this.target = target;
+    this.registry = new MeshRegistry();
+
+    if (!document.getElementById("mirage-engine-styles")) {
+      const style = document.createElement("style");
+      style.id = "mirage-engine-styles";
+      style.textContent = `
+        [data-mirage-dom="hide"] {
+          opacity: 0 !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
 
     let mountContainer: HTMLElement | undefined;
 
@@ -23,11 +37,14 @@ export class Engine {
       throw new Error("[Mirage] Cannot find a container (parent or option).");
     }
 
-    this.renderer = new Renderer(this.target, config, mountContainer);
-
+    this.renderer = new Renderer(
+      this.target,
+      config,
+      mountContainer,
+      this.registry,
+    );
     this.renderer.mount();
-
-    this.syncer = new Syncer(this.target, this.renderer, config);
+    this.syncer = new Syncer(this.target, this.renderer, this.registry, config);
   }
 
   public start() {
@@ -41,4 +58,39 @@ export class Engine {
     this.syncer.stop();
     this.renderer.dispose();
   }
+
+  public test() {
+    const boxMesh = this.registry.get(
+      document.querySelector("#box2") as HTMLElement,
+    );
+
+    if (!boxMesh) return;
+
+    const keys: { [key: string]: boolean } = {
+      ArrowRight: false,
+      ArrowLeft: false,
+      ArrowUp: false,
+      ArrowDown: false,
+    };
+
+    window.addEventListener("keydown", (e) => {
+      if (keys[e.key] !== undefined) keys[e.key] = true;
+    });
+    window.addEventListener("keyup", (e) => {
+      if (keys[e.key] !== undefined) keys[e.key] = false;
+    });
+
+    const moveStep = 2;
+
+    const animate = () => {
+      requestAnimationFrame(animate);
+
+      if (keys.ArrowRight) boxMesh.position.setX(boxMesh.position.x + moveStep);
+      if (keys.ArrowLeft) boxMesh.position.setX(boxMesh.position.x - moveStep);
+      if (keys.ArrowUp) boxMesh.position.setY(boxMesh.position.y + moveStep);
+      if (keys.ArrowDown) boxMesh.position.setY(boxMesh.position.y - moveStep);
+    };
+
+    animate();
+  }
 }

package/src/core/Syncer.ts

@@ -1,15 +1,20 @@
 import { CoreConfig } from "../types/config";
 import { Renderer } from "../renderer/Renderer";
+import { MeshRegistry } from "../store/MeshRegistry";
 import { extractSceneGraph } from "../dom/Extractor";
 import {
   DIRTY_NONE,
   DIRTY_RECT,
   DIRTY_STRUCTURE,
+  DIRTY_CONTENT
+  ,
   DIRTY_STYLE,
   USER_LAYER,
   SYSTEM_LAYER,
   Visibility,
+  StyleData,
 } from "../types";
+import { extractFromStyle, animateMeshByData, updateFixedMeshesScroll } from "../animation/Animator";
 
 interface InternalResizeConfig {
   enabled: boolean;
@@ -21,9 +26,12 @@ interface InternalResizeConfig {
 export class Syncer {
   private target: HTMLElement;
   private renderer: Renderer;
+  private registry: MeshRegistry;
   private filter: CoreConfig["filter"];
 
   private observer: MutationObserver;
+  private pendingDeletions: Set<HTMLElement> = new Set();
+  private pendingStyles: Map<HTMLElement, StyleData> = new Map();
 
   private isDomDirty: boolean = false;
   private isRunning: boolean = false;
@@ -38,9 +46,19 @@ export class Syncer {
   private resizeTimer: number | null = null;
   private isResizing: boolean = false;
 
-  constructor(target: HTMLElement, renderer: Renderer, config: CoreConfig) {
+  private lastScrollX: number = 0;
+  private lastScrollY: number = 0;
+  private scrollTimer: number | null = null;
+
+  constructor(
+    target: HTMLElement,
+    renderer: Renderer,
+    registry: MeshRegistry,
+    config: CoreConfig,
+  ) {
     this.target = target;
     this.renderer = renderer;
+    this.registry = registry;
     this.filter = config.filter;
 
     // Resize Debounce Configuration
@@ -64,13 +82,28 @@ export class Syncer {
       for (const mutation of mutations) {
         if (mutation.type === "childList") {
           currentMask |= DIRTY_STRUCTURE;
+          if (mutation.removedNodes.length > 0) {
+            mutation.removedNodes.forEach((node) => {
+              if (node instanceof HTMLElement) {
+                this.pendingDeletions.add(node);
+              }
+            });
+          }
         } else if (mutation.type === "attributes") {
-          if (
-            mutation.attributeName === "style" ||
-            mutation.attributeName === "class"
-          ) {
+          if (mutation.attributeName === "style") {
+            currentMask |= DIRTY_RECT | DIRTY_STYLE;
+            const target = mutation.target as HTMLElement;
+
+            const extractedStyleData = extractFromStyle(target.style);
+            // console.log(extractedStyleData);
+            this.pendingStyles.set(target, extractedStyleData);
+          } else if (mutation.attributeName === "class") {
             currentMask |= DIRTY_RECT | DIRTY_STYLE;
           }
+          // else if (mutation.attributeName === "data-mirage") {
+          // }
+        } else if (mutation.type === "characterData") {
+          currentMask |= DIRTY_CONTENT | DIRTY_RECT;
         }
       }
 
@@ -80,7 +113,6 @@ export class Syncer {
         // Structural Change detected
         if (currentMask & DIRTY_STRUCTURE) {
           this.clearTimers();
-          console.log("Structural Change detected");
           this.isDomDirty = true;
           return;
         }
@@ -109,7 +141,6 @@ export class Syncer {
 
     this.target.addEventListener("transitionend", this.onTransitionFinished);
     this.target.addEventListener("animationend", this.onTransitionFinished);
-
     window.addEventListener("resize", this.onWindowResize);
 
     this.forceUpdateScene();
@@ -138,17 +169,18 @@ export class Syncer {
       clearTimeout(this.cssTimer);
       this.cssTimer = null;
     }
+    if (this.scrollTimer) {
+      clearTimeout(this.scrollTimer);
+      this.scrollTimer = null;
+    }
   }
 
   private onTransitionFinished = (e: Event) => {
     if (!this.target.contains(e.target as Node)) return;
-
     if (this.mutationTimer !== null) return;
-
     if (this.cssTimer) clearTimeout(this.cssTimer);
-
+    if (this.pendingStyles.size != 0) return;
     this.pendingMask |= DIRTY_RECT | DIRTY_STYLE;
-
     this.cssTimer = window.setTimeout(() => {
       this.isDomDirty = true;
       this.cssTimer = null;
@@ -160,17 +192,13 @@ export class Syncer {
       this.isDomDirty = true;
       return;
     }
-
     if (!this.isResizing) {
       this.isResizing = true;
       if (this.resizeConfig.onStart) this.resizeConfig.onStart();
     }
-
     if (this.resizeTimer) clearTimeout(this.resizeTimer);
-
     this.resizeTimer = window.setTimeout(() => {
       this.isDomDirty = true;
-
       if (this.resizeConfig.onEnd) this.resizeConfig.onEnd();
       this.isResizing = false;
       this.resizeTimer = null;
@@ -179,6 +207,9 @@ export class Syncer {
 
   private forceUpdateScene() {
     this.isDomDirty = false;
+    
+    this.lastScrollX = window.scrollX;
+    this.lastScrollY = window.scrollY;
 
     const discoveredTraveler =
       document.querySelector("[data-mirage-travel='traveler']") !== null;
@@ -197,7 +228,8 @@ export class Syncer {
     );
 
     if (sceneGraph) {
-      this.renderer.syncScene(sceneGraph);
+      this.renderer.syncScene(sceneGraph, this.pendingDeletions);
+      this.pendingDeletions.clear();
     }
 
     this.pendingMask = DIRTY_NONE;
@@ -210,7 +242,30 @@ export class Syncer {
       this.forceUpdateScene();
     }
 
+    const currentScrollX = window.scrollX;
+    const currentScrollY = window.scrollY;
+    if (currentScrollX !== this.lastScrollX || currentScrollY !== this.lastScrollY) {
+      updateFixedMeshesScroll(this.renderer.fixedMeshes, currentScrollX, currentScrollY);
+
+      this.lastScrollX = currentScrollX;
+      this.lastScrollY = currentScrollY;
+
+      if (this.scrollTimer) clearTimeout(this.scrollTimer);
+      this.scrollTimer = window.setTimeout(() => {
+        this.pendingMask |= DIRTY_RECT;
+        this.isDomDirty = true;
+        this.scrollTimer = null;
+      }, 150);
+    }
+
+    if (this.pendingStyles.size > 0) {
+      animateMeshByData(this.registry, this.pendingStyles);
+      this.pendingStyles.clear();
+    }
+
     this.renderer.render();
     requestAnimationFrame(this.renderLoop);
   };
+
+  // [ThinkPoint] change call back pattern when after
 }