@mirage-engine/core 0.0.2

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

@@ -0,0 +1,27 @@
+import { SceneNode, CoreConfig } from '../types';
+
+export declare class Renderer {
+    readonly canvas: HTMLCanvasElement;
+    private readonly scene;
+    private readonly camera;
+    private readonly renderer;
+    private renderOrder;
+    private textQualityFactor;
+    private mode;
+    private customZIndex;
+    private target;
+    private mountContainer;
+    private targetRect;
+    private meshMap;
+    constructor(target: HTMLElement, config: CoreConfig, mountContainer: HTMLElement);
+    private applyTextQuality;
+    mount(): void;
+    private updateCanvasLayout;
+    dispose(): void;
+    setSize(width: number, height: number): void;
+    syncScene(graphNode: SceneNode): void;
+    private reconcileNode;
+    private reconcileTextChild;
+    private updateMeshProperties;
+    render(): void;
+}

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

@@ -0,0 +1,20 @@
+import { TextStyles, BoxStyles } from '../../packages/painter/src/index.ts';
+
+export type NodeType = "BOX" | "TEXT";
+export interface NodeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface SceneNode {
+    id: string;
+    type: NodeType;
+    element: HTMLElement;
+    rect: NodeRect;
+    styles: BoxStyles;
+    textContent?: string;
+    textStyles?: TextStyles;
+    dirtyMask: number;
+    children: SceneNode[];
+}

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

@@ -0,0 +1,18 @@
+export type TextQuality = "low" | "medium" | "high" | number;
+export type MirageMode = "overlay" | "duplicate";
+interface BaseConfig {
+    debug?: boolean;
+    textQuality?: TextQuality;
+    style?: {
+        zIndex?: string;
+    };
+}
+export interface OverlayConfig extends BaseConfig {
+    mode?: "overlay";
+}
+export interface DuplicateConfig extends BaseConfig {
+    mode: "duplicate";
+    container?: HTMLElement;
+}
+export type CoreConfig = OverlayConfig | DuplicateConfig;
+export {};

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

@@ -0,0 +1,6 @@
+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;

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

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './common';
+export * from './flags';

package/dist/src/utils/math.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts DOM coordinates (Top-Left 0,0) to WebGL coordinates (Center 0,0).
+ * @param x - The x coordinate of the DOM element (Left)
+ * @param y - The y coordinate of the DOM element (Top)
+ * @param width - The width of the DOM element
+ * @param height - The height of the DOM element
+ * @param canvasWidth - The total width of the canvas
+ * @param canvasHeight - The total height of the canvas
+ */
+export declare function domToWebGL(x: number, y: number, width: number, height: number, canvasWidth: number, canvasHeight: number): {
+    x: number;
+    y: number;
+};

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mirage-engine/core",
+  "version": "0.0.2",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "peerDependencies": {
+    "three": "^0.160.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dltldn333/MirageEngine",
+    "directory": "packages/core"
+  },
+  "dependencies": {
+    "@types/three": "^0.181.0",
+    "@mirage-engine/painter": "0.2.3"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/core/Engine.ts

@@ -0,0 +1,44 @@
+import { CoreConfig } from "../types";
+import { Renderer } from "../renderer/Renderer";
+import { Syncer } from "./Syncer";
+
+export class Engine {
+  private renderer: Renderer;
+  private syncer: Syncer;
+  private target: HTMLElement;
+
+  constructor(target: HTMLElement, config: CoreConfig) {
+    this.target = target;
+
+    let mountContainer: HTMLElement | undefined;
+
+    if (config.mode === "duplicate") {
+      mountContainer =
+        config.container ?? this.target.parentElement ?? undefined;
+    } else {
+      mountContainer = this.target.parentElement ?? undefined;
+    }
+
+    if (!mountContainer) {
+      throw new Error("[Mirage] Cannot find a container (parent or option).");
+    }
+
+    this.renderer = new Renderer(this.target, config, mountContainer);
+
+    this.renderer.mount();
+
+    this.syncer = new Syncer(this.target, this.renderer);
+  }
+
+  public start() {
+    this.syncer.start();
+  }
+
+  public stop() {
+    this.syncer.stop();
+  }
+  public dispose() {
+    this.syncer.stop();
+    this.renderer.dispose();
+  }
+}

package/src/core/Syncer.ts

@@ -0,0 +1,148 @@
+import { Renderer } from "../renderer/Renderer";
+import { extractSceneGraph } from "../dom/Extractor";
+import {
+  DIRTY_NONE,
+  DIRTY_RECT,
+  DIRTY_STRUCTURE,
+  DIRTY_STYLE,
+} from "../types";
+
+export class Syncer {
+  private target: HTMLElement;
+  private renderer: Renderer;
+  private observer: MutationObserver;
+
+  private isDomDirty: boolean = false;
+  private isRunning: boolean = false;
+
+  private pendingMask: number = DIRTY_NONE;
+
+  private mutationTimer: number | null = null;
+  private cssTimer: number | null = null;
+
+  constructor(target: HTMLElement, renderer: Renderer) {
+    this.target = target;
+    this.renderer = renderer;
+
+    this.observer = new MutationObserver((mutations) => {
+      let currentMask = DIRTY_NONE;
+
+      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;
+          }
+        }
+      }
+
+      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);
+      }
+    });
+  }
+
+  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.target.addEventListener("transitionend", this.onTransitionFinished);
+    this.target.addEventListener("animationend", this.onTransitionFinished);
+
+    window.addEventListener("resize", this.onWindowResize);
+
+    this.forceUpdateScene();
+    this.renderLoop();
+  }
+
+  public stop() {
+    this.isRunning = false;
+    this.observer.disconnect();
+
+    this.clearTimers();
+
+    this.target.removeEventListener("transitionend", this.onTransitionFinished);
+    this.target.removeEventListener("animationend", this.onTransitionFinished);
+    window.removeEventListener("resize", this.onWindowResize);
+  }
+
+  private clearTimers() {
+    if (this.mutationTimer) {
+      clearTimeout(this.mutationTimer);
+      this.mutationTimer = null;
+    }
+    if (this.cssTimer) {
+      clearTimeout(this.cssTimer);
+      this.cssTimer = 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);
+
+    this.pendingMask |= DIRTY_RECT | DIRTY_STYLE;
+
+    this.cssTimer = window.setTimeout(() => {
+      this.isDomDirty = true;
+      this.cssTimer = null;
+    }, 50);
+  };
+
+  private onWindowResize = () => {
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.isDomDirty = true;
+  };
+
+  private forceUpdateScene() {
+    this.isDomDirty = false;
+    const sceneGraph = extractSceneGraph(this.target, this.pendingMask);
+
+    if (sceneGraph) {
+      this.renderer.syncScene(sceneGraph);
+    }
+
+    this.pendingMask = DIRTY_NONE;
+  }
+
+  private renderLoop = () => {
+    if (!this.isRunning) return;
+
+    if (this.isDomDirty) {
+      this.forceUpdateScene();
+    }
+
+    this.renderer.render();
+    requestAnimationFrame(this.renderLoop);
+  };
+}

package/src/dom/Extractor.ts

@@ -0,0 +1,153 @@
+import {
+  DIRTY_RECT,
+  DIRTY_STYLE,
+  DIRTY_CONTENT,
+  DIRTY_ZINDEX,
+  DIRTY_STRUCTURE,
+  SceneNode,
+} from "../types";
+
+import { BoxStyles, TextStyles } from "@mirage-engine/painter";
+
+// Helper function: getTextNodeRect, isValidTextNode, isLeafTextElement, extractTextStyles
+
+function getTextNodeRect(textNode: Text) {
+  const range = document.createRange();
+  range.selectNodeContents(textNode);
+  const rect = range.getBoundingClientRect();
+  return {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+function extractTextStyles(computed: CSSStyleDeclaration): TextStyles {
+  const fontSize = parseFloat(computed.fontSize);
+  let lineHeight = parseFloat(computed.lineHeight);
+  if (isNaN(lineHeight)) {
+    lineHeight = fontSize * 1.2;
+  }
+  let letterSpacing = parseFloat(computed.letterSpacing);
+  if (isNaN(letterSpacing)) {
+    letterSpacing = 0;
+  }
+  return {
+    font: `${computed.fontStyle} ${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`,
+    color: computed.color,
+    textAlign: (computed.textAlign as CanvasTextAlign) || "start",
+    textBaseline: "alphabetic",
+    direction: (computed.direction as CanvasDirection) || "inherit",
+    lineHeight,
+    letterSpacing,
+  };
+}
+
+export function extractSceneGraph(
+  sourceNode: HTMLElement | Node,
+  initialMask = DIRTY_RECT |
+    DIRTY_STYLE |
+    DIRTY_ZINDEX |
+    DIRTY_CONTENT |
+    DIRTY_STRUCTURE
+): SceneNode | null {
+  // Check text node
+  if (sourceNode.nodeType === Node.TEXT_NODE) {
+    const textNode = sourceNode as Text;
+
+    // empthy text check
+    if (!textNode.textContent || !textNode.textContent.trim()) return null;
+    const normalizedText = textNode.textContent.replace(/\s+/g, " ").trim();
+    if (normalizedText.length === 0) return null;
+
+    const rect = getTextNodeRect(textNode);
+
+    // size check
+    if (rect.width === 0 || rect.height === 0) return null;
+
+    // Cascading Styles
+    const parent = textNode.parentElement;
+    const computed = parent ? window.getComputedStyle(parent) : null;
+    if (!computed) return null;
+
+    // Create SceneNode for text node
+    return {
+      id: Math.random().toString(36).substring(2, 9),
+      type: "TEXT",
+      element: textNode as unknown as HTMLElement,
+      rect: {
+        x: rect.left + window.scrollX,
+        y: rect.top + window.scrollY,
+        width: rect.width,
+        height: rect.height,
+      },
+      styles: {
+        backgroundColor: "transparent",
+        opacity: parseFloat(computed.opacity),
+        zIndex: 0,
+        borderRadius: "0px",
+        borderColor: "transparent",
+        borderWidth: "0px",
+      },
+      textContent: normalizedText,
+      textStyles: extractTextStyles(computed),
+      dirtyMask: initialMask,
+      children: [],
+    };
+  }
+
+  const element = sourceNode as HTMLElement;
+  const rect = element.getBoundingClientRect();
+  const computed = window.getComputedStyle(element);
+
+  // Base Case
+  if (rect.width === 0 || rect.height === 0 || computed.display === "none") {
+    return null;
+  }
+
+  let id = element.getAttribute("data-mid");
+  if (!id) {
+    id = Math.random().toString(36).substring(2, 11);
+    element.setAttribute("data-mid", id);
+  }
+
+  const zIndex = parseInt(computed.zIndex);
+  const styles: BoxStyles = {
+    backgroundColor: computed.backgroundColor,
+    opacity: parseFloat(computed.opacity),
+    zIndex: isNaN(zIndex) ? 0 : zIndex,
+    borderRadius: computed.borderRadius,
+    borderColor: computed.borderColor,
+    borderWidth: computed.borderWidth,
+  };
+
+  let textContent: string | undefined;
+  let textStyles: TextStyles | undefined;
+  const children: SceneNode[] = [];
+
+  Array.from(element.childNodes).forEach((child) => {
+    // Recurring
+    const childNode = extractSceneGraph(child, initialMask);
+    if (childNode) {
+      children.push(childNode);
+    }
+  });
+
+  return {
+    id,
+    type: "BOX",
+    element,
+    rect: {
+      x: rect.left + window.scrollX,
+      y: rect.top + window.scrollY,
+      width: rect.width,
+      height: rect.height,
+    },
+    styles,
+    textContent,
+    textStyles,
+    dirtyMask: initialMask,
+    children,
+  };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Engine} from "./core/Engine";
+export * from "./types";