@mirage-engine/core 0.2.1 → 0.3.0

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

@@ -1,15 +1,9 @@
 export type Quality = "low" | "medium" | "high" | number;
+export type LayerTarget = "base" | "selected";
 export type MirageMode = "overlay" | "duplicate";
 export type PxUnit = `${number}px`;
 export type PercentUnit = `${number}%`;
 export type travelerClipArea = PxUnit | PercentUnit | number;
-export interface FilterConfig {
-    includeTree?: string[];
-    excludeTree?: string[];
-    includeSelf?: string[];
-    excludeSelf?: string[];
-    end?: string[];
-}
 export interface ResizeConfig {
     delay?: number;
     onStart?: () => void;
@@ -17,11 +11,11 @@ export interface ResizeConfig {
 }
 interface BaseConfig {
     debug?: boolean;
+    layer?: number | LayerTarget;
     quality?: Quality;
     style?: {
         zIndex?: string;
     };
-    filter?: FilterConfig;
     resizeDebounce?: boolean | ResizeConfig;
     travelerClipArea?: travelerClipArea;
 }

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

@@ -1,11 +1,12 @@
-export declare const DIRTY_NONE = 0;
-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;
+export { DIRTY_NONE, DIRTY_RECT, DIRTY_STYLE, DIRTY_ZINDEX, DIRTY_STRUCTURE, DIRTY_CONTENT, } from '@mirage-engine/dom-tracker';
 export declare const USER_LAYER: number;
-export declare const SYSTEM_LAYER: number;
+export declare const SELECT_LAYER: number;
 export declare const EXCLUDED = 0;
+export declare const THREE_LAYERS: {
+    readonly BASE: 0;
+    readonly SELECTED: 1;
+    readonly getCaptureLayer: (layerNum: number) => number;
+    readonly HIDDEN: 31;
+};
 export type Visibility = 0 | 1 | 2 | 3;
 export declare const ALLOWED_FILTERS: string[];

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

@@ -1,3 +1,5 @@
 export * from './config';
 export * from './common';
+export * from './attributes';
 export * from './flags';
+export * from '@mirage-engine/dom-tracker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirage-engine/core",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "peerDependencies": {
@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "@types/three": "^0.181.0",
-    "@mirage-engine/painter": "0.4.0"
+    "@mirage-engine/painter": "1.0.1",
+    "@mirage-engine/dom-tracker": "0.3.0"
   },
   "private": false,
   "publishConfig": {

package/src/animation/Animator.ts

@@ -0,0 +1,108 @@
+import { StyleData } from "@mirage-engine/dom-tracker";
+import { MeshRegistry } from "../store/MeshRegistry";
+import { Painter } 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;
+
+    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;
+      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;
+    }
+
+    const ratioX = mesh.userData.originRatioX ?? 0.5;
+    const ratioY = mesh.userData.originRatioY ?? 0.5;
+
+    const moveX = widthDiff * (0.5 - ratioX);
+    const moveY = heightDiff * (0.5 - ratioY);
+
+    const baseTx = mesh.userData.baseTransform?.x ?? 0;
+    const baseTy = mesh.userData.baseTransform?.y ?? 0;
+    
+    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 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;
+    }
+  });
+}

package/src/core/Engine.ts

@@ -1,14 +1,28 @@
-import { CoreConfig } from "../types";
+import { CoreConfig, ATTR_DOM } 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 = `
+        [${ATTR_DOM.NAME}="${ATTR_DOM.VALUES.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,51 @@ export class Engine {
     this.syncer.stop();
     this.renderer.dispose();
   }
+
+  public getTracker() {
+    return this.syncer.tracker;
+  }
+
+  public updateUniforms(element: HTMLElement, uniforms: Record<string, any>) {
+    this.renderer.updateUniforms(element, uniforms);
+  }
+
+  public getCanvas() {
+    return this.renderer.canvas;
+  }
+
+  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,216 +1,75 @@
 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_STYLE,
-  USER_LAYER,
-  SYSTEM_LAYER,
-  Visibility,
-} from "../types";
-
-interface InternalResizeConfig {
-  enabled: boolean;
-  delay: number;
-  onStart?: () => void;
-  onEnd?: () => void;
-}
+import { Visibility, USER_LAYER, ATTR_TRAVEL } from "../types";
+import { animateMeshByData, updateFixedMeshesScroll } from "../animation/Animator";
+import { Tracker } from "@mirage-engine/dom-tracker";
 
 export class Syncer {
   private target: HTMLElement;
   private renderer: Renderer;
-  private filter: CoreConfig["filter"];
-
-  private observer: MutationObserver;
-
-  private isDomDirty: boolean = false;
-  private isRunning: boolean = false;
+  private registry: MeshRegistry;
   private isTravelEnabled: boolean = false;
-
-  private pendingMask: number = DIRTY_NONE;
-
-  private mutationTimer: number | null = null;
-  private cssTimer: number | null = null;
-
-  private resizeConfig: InternalResizeConfig;
-  private resizeTimer: number | null = null;
-  private isResizing: boolean = false;
-
-  constructor(target: HTMLElement, renderer: Renderer, config: CoreConfig) {
+  
+  public tracker: Tracker;
+
+  constructor(
+    target: HTMLElement,
+    renderer: Renderer,
+    registry: MeshRegistry,
+    config: CoreConfig,
+  ) {
     this.target = target;
     this.renderer = renderer;
-    this.filter = config.filter;
-
-    // Resize Debounce Configuration
-    const debounceOpt = config.resizeDebounce ?? true;
-    if (debounceOpt === false) {
-      this.resizeConfig = { enabled: false, delay: 0 };
-    } else if (debounceOpt === true) {
-      this.resizeConfig = { enabled: true, delay: 150 };
-    } else {
-      this.resizeConfig = {
-        enabled: true,
-        delay: debounceOpt.delay ?? 150,
-        onStart: debounceOpt.onStart,
-        onEnd: debounceOpt.onEnd,
-      };
-    }
+    this.registry = registry;
 
-    this.observer = new MutationObserver((mutations) => {
-      let currentMask = DIRTY_NONE;
+    // Use Tracker from dom-tracker
+    this.tracker = new Tracker(target, {
+      resizeDebounce: config.resizeDebounce,
+    });
 
-      for (const mutation of mutations) {
-        if (mutation.type === "childList") {
-          currentMask |= DIRTY_STRUCTURE;
-        } else if (mutation.type === "attributes") {
-          if (
-            mutation.attributeName === "style" ||
-            mutation.attributeName === "class"
-          ) {
-            currentMask |= DIRTY_RECT | DIRTY_STYLE;
-          }
-        }
+    // Wire up the hooks
+    this.tracker.onLayoutChange.add((pendingMask, pendingDeletions) => {
+      const discoveredTraveler =
+        document.querySelector(`[${ATTR_TRAVEL.NAME}~='${ATTR_TRAVEL.VALUES.TRAVELER}']`) !== null;
+      if (discoveredTraveler && !this.isTravelEnabled) {
+        this.isTravelEnabled = true;
+        this.renderer.createRenderTarget();
       }
 
-      if (currentMask !== DIRTY_NONE) {
-        this.pendingMask |= currentMask;
-
-        // Structural Change detected
-        if (currentMask & DIRTY_STRUCTURE) {
-          this.clearTimers();
-          console.log("Structural Change detected");
-          this.isDomDirty = true;
-          return;
-        }
-        if (this.mutationTimer) {
-          clearTimeout(this.mutationTimer);
-        }
-        this.mutationTimer = window.setTimeout(() => {
-          this.mutationTimer = null;
-          this.isDomDirty = true;
-        }, 200);
+      const sceneGraph = extractSceneGraph(
+        this.target,
+        pendingMask,
+        USER_LAYER as Visibility,
+        1,
+        0,
+        this.renderer.qualityFactor
+      );
+
+      if (sceneGraph) {
+        this.renderer.syncScene(sceneGraph, pendingDeletions);
       }
     });
-  }
-
-  public start() {
-    if (this.isRunning) return;
-    this.isRunning = true;
 
-    //DOM observing start
-    this.observer.observe(this.target, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      characterData: true,
+    this.tracker.onScrollChange.add((scrollX, scrollY) => {
+      updateFixedMeshesScroll(this.renderer.fixedMeshes, scrollX, scrollY);
     });
 
-    this.target.addEventListener("transitionend", this.onTransitionFinished);
-    this.target.addEventListener("animationend", this.onTransitionFinished);
-
-    window.addEventListener("resize", this.onWindowResize);
-
-    this.forceUpdateScene();
-    this.renderLoop();
-    // for debugging
-    // this.renderer.showScissoredRenderTarget();
-  }
-
-  public stop() {
-    this.isRunning = false;
-    this.observer.disconnect();
-
-    this.clearTimers();
+    this.tracker.onStyleChange.add((pendingStyles) => {
+      animateMeshByData(this.registry, pendingStyles);
+    });
 
-    this.target.removeEventListener("transitionend", this.onTransitionFinished);
-    this.target.removeEventListener("animationend", this.onTransitionFinished);
-    window.removeEventListener("resize", this.onWindowResize);
+    this.tracker.onRender.add(() => {
+      this.renderer.render();
+    });
   }
 
-  private clearTimers() {
-    if (this.mutationTimer) {
-      clearTimeout(this.mutationTimer);
-      this.mutationTimer = null;
-    }
-    if (this.cssTimer) {
-      clearTimeout(this.cssTimer);
-      this.cssTimer = null;
-    }
+  public start() {
+    this.tracker.start();
   }
 
-  private onTransitionFinished = (e: Event) => {
-    if (!this.target.contains(e.target as Node)) return;
-
-    if (this.mutationTimer !== null) return;
-
-    if (this.cssTimer) clearTimeout(this.cssTimer);
-
-    this.pendingMask |= DIRTY_RECT | DIRTY_STYLE;
-
-    this.cssTimer = window.setTimeout(() => {
-      this.isDomDirty = true;
-      this.cssTimer = null;
-    }, 50);
-  };
-
-  private onWindowResize = () => {
-    if (!this.resizeConfig.enabled) {
-      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;
-    }, this.resizeConfig.delay);
-  };
-
-  private forceUpdateScene() {
-    this.isDomDirty = false;
-
-    const discoveredTraveler =
-      document.querySelector("[data-mirage-travel='traveler']") !== null;
-    if (discoveredTraveler && !this.isTravelEnabled) {
-      this.isTravelEnabled = true;
-      this.renderer.createRenderTarget();
-    }
-
-    const sceneGraph = extractSceneGraph(
-      this.target,
-      this.pendingMask,
-      (discoveredTraveler
-        ? USER_LAYER | SYSTEM_LAYER
-        : USER_LAYER) as Visibility,
-      this.filter,
-    );
-
-    if (sceneGraph) {
-      this.renderer.syncScene(sceneGraph);
-    }
-
-    this.pendingMask = DIRTY_NONE;
+  public stop() {
+    this.tracker.stop();
   }
-
-  private renderLoop = () => {
-    if (!this.isRunning) return;
-
-    if (this.isDomDirty) {
-      this.forceUpdateScene();
-    }
-
-    this.renderer.render();
-    requestAnimationFrame(this.renderLoop);
-  };
 }