@mirage-engine/core 0.2.1 → 0.3.0

package/src/store/MeshRegistry.ts

@@ -0,0 +1,32 @@
+import * as THREE from "three";
+
+export class MeshRegistry {
+  private store: WeakMap<HTMLElement, THREE.Mesh>;
+
+  constructor() {
+    this.store = new WeakMap();
+  }
+  public register(element: HTMLElement, mesh: THREE.Mesh): void {
+    this.store.set(element, mesh);
+  }
+
+  public get(element: HTMLElement): THREE.Mesh | undefined {
+    return this.store.get(element);
+  }
+  // public register(element: HTMLElement, meshGroup: THREE.Group): void {
+  //   this.store.set(element, meshGroup);
+  // }
+
+  // public get(element: HTMLElement): THREE.Group | undefined {
+  //   return this.store.get(element);
+  // }
+
+  public has(element: HTMLElement): boolean {
+    return this.store.has(element);
+  }
+
+  // Optional
+  public remove(element: HTMLElement): void {
+    this.store.delete(element);
+  }
+}

package/src/store/TextureLifecycleManager.ts

@@ -0,0 +1,126 @@
+import * as THREE from "three";
+
+export type TextureReadyCallback = (
+  element: HTMLElement,
+  texture: THREE.Texture | null,
+) => void;
+
+export class TextureLifecycleManager {
+  private observer: IntersectionObserver;
+  private textures: WeakMap<HTMLElement, THREE.Texture> = new WeakMap();
+  private loadStatus: WeakMap<HTMLElement, boolean> = new WeakMap();
+  private elementUrls: WeakMap<HTMLElement, string> = new WeakMap();
+  private onUpdate: TextureReadyCallback;
+
+  constructor(onUpdate: TextureReadyCallback) {
+    this.onUpdate = onUpdate;
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const el = entry.target as HTMLElement;
+          if (entry.isIntersecting) {
+            this.loadTexture(el);
+          } else {
+            this.disposeTexture(el);
+          }
+        }
+      },
+      { rootMargin: "300px" },
+    );
+  }
+
+  public register(element: HTMLElement, url: string) {
+    if (element.nodeType !== Node.ELEMENT_NODE) return;
+    const currentUrl = this.elementUrls.get(element);
+    if (currentUrl !== url) {
+      this.elementUrls.set(element, url);
+      // Restart observation to trigger intersecting check
+      this.observer.unobserve(element);
+      this.observer.observe(element);
+    }
+  }
+
+  public unregister(element: HTMLElement) {
+    if (element.nodeType === Node.ELEMENT_NODE) {
+      this.observer.unobserve(element);
+    }
+    this.disposeTexture(element);
+    this.elementUrls.delete(element);
+    this.loadStatus.delete(element);
+  }
+
+  private async loadTexture(element: HTMLElement) {
+    if (this.loadStatus.get(element) || this.textures.has(element)) return;
+
+    const url = this.elementUrls.get(element);
+    if (!url) return;
+
+    this.loadStatus.set(element, true);
+
+    try {
+      let textureImage: ImageBitmap | HTMLImageElement;
+
+      if (url.startsWith("data:image/svg+xml")) {
+        textureImage = await new Promise<HTMLImageElement>((resolve, reject) => {
+          const img = new Image();
+          img.onload = () => resolve(img);
+          img.onerror = reject;
+          img.src = url;
+        });
+      } else {
+        const response = await fetch(url);
+        const blob = await response.blob();
+        textureImage = await createImageBitmap(blob, { imageOrientation: "flipY" });
+      }
+
+      // Check if URL changed or element was unregistered while decoding
+      if (this.elementUrls.get(element) !== url) {
+        if ('close' in textureImage) textureImage.close();
+        return;
+      }
+
+      const texture = new THREE.Texture(textureImage);
+      // createImageBitmap already flips Y, but HTMLImageElement relies on THREE.js flipY
+      if (!(textureImage instanceof HTMLImageElement)) {
+        texture.flipY = false;
+      }
+      
+      // Inherit CanvasTexture defaults or set them explicitly if needed
+      texture.colorSpace = THREE.LinearSRGBColorSpace; // or adjust according to your pipeline
+      texture.needsUpdate = true;
+      
+      this.textures.set(element, texture);
+      this.onUpdate(element, texture);
+    } catch (e) {
+      console.warn("[MirageEngine] Failed to load texture:", url, e);
+    } finally {
+      // Re-check url, if it changed, we should probably trigger loadTexture again,
+      // but IntersectionObserver will handle it if it's still intersecting.
+      if (this.elementUrls.has(element)) {
+        this.loadStatus.set(element, false);
+      }
+    }
+  }
+
+  private disposeTexture(element: HTMLElement) {
+    const texture = this.textures.get(element);
+    if (texture) {
+      texture.dispose();
+      this.textures.delete(element);
+      this.onUpdate(element, null);
+    }
+    // Also cancel loading state if we had one
+    this.loadStatus.set(element, false);
+  }
+
+  public get(element: HTMLElement) {
+    return this.textures.get(element);
+  }
+
+  public disposeAll() {
+    this.observer.disconnect();
+    // Assuming WeakMap handles GC of remaining textures, but in WebGL we must explicitly delete.
+    // However, WeakMap is not iterable, so we can't easily iterate and delete. 
+    // The renderer should unregister nodes upon pendingDeletions.
+  }
+}

package/src/types/animate.ts

@@ -0,0 +1,26 @@
+export interface StyleData {
+    // 1. Transform
+    x?: number;
+    y?: number;
+    z?: number;
+    scaleX?: number;
+    scaleY?: number;
+    scaleZ?: number;
+    rotateX?: number;
+    rotateY?: number;
+    rotateZ?: number;
+
+    // for future use
+    matrix?: Float32Array; 
+
+    // 2. Material / Appearance
+    opacity?: number;
+    backgroundColor?: [number, number, number]; 
+    backgroundImage?: string;
+    borderRadius?: number | [number, number, number, number]; 
+
+    // 3. Layout / Depth
+    width?: number;
+    height?: number;
+    zIndex?: number;
+}

package/src/types/attributes.ts

@@ -0,0 +1,57 @@
+const filter_values = {
+  INCLUDE_TREE: "include-tree",
+  EXCLUDE_TREE: "exclude-tree",
+  INCLUDE_SELF: "include-self",
+  EXCLUDE_SELF: "exclude-self",
+  END: "end",
+};
+
+export const ATTR_DOM = {
+  NAME: "data-mirage-dom",
+  KEY: "mirageDom",
+  VALUES: {
+    HIDE: "hide",
+  },
+} as const;
+
+export const TRAVEL_VALUES = {
+  TRAVELER: "traveler",
+  NATIVE: "native",
+  CAPTURE_1: "1",
+  CAPTURE_2: "2",
+  CAPTURE_3: "3",
+  CAPTURE_4: "4",
+  CAPTURE_5: "5",
+} as const;
+
+export const ATTR_TRAVEL = {
+  NAME: "data-mirage-travel",
+  KEY: "mirageTravel",
+  VALUES: TRAVEL_VALUES,
+  MAX_LAYERS: Object.keys(TRAVEL_VALUES).length - 1,
+} as const;
+
+export const ATTR_FILTER = {
+  NAME: "data-mirage-filter",
+  KEY: "mirageFilter",
+  VALUES: filter_values,
+} as const;
+
+export const ATTR_SELECT = {
+  NAME: "data-mirage-select",
+  KEY: "mirageSelect",
+  VALUES: filter_values,
+} as const;
+
+export const ATTR_SHADER = {
+  NAME: "data-mirage-shader",
+  KEY: "mirageShader",
+} as const;
+
+export const ATTR_SANDWICH = {
+  NAME: "data-mirage-sandwich",
+  KEY: "mirageSandwich",
+  VALUES: {
+    FRONT: "front",
+  },
+} as const;

package/src/types/common.ts

@@ -20,12 +20,18 @@ export interface SceneNode {
 
   textContent?: string;
   textStyles?: TextStyles;
+  textLines?: { text: string; rect: NodeRect }[];
 
   dirtyMask: number;
   // TODO: SceneNode의 sort 로직 추가(아마도)
 
   visibility: Visibility;
   isTraveler: boolean;
+  captureLayer: number;
+  nativeLayer?: number;
+  nativeStyles?: BoxStyles | TextStyles;
+  nativeRect?: NodeRect;
+  isFixed: boolean;
   shaderHooks?: ShaderHooks;
 
   children: SceneNode[];

package/src/types/config.ts

@@ -1,31 +1,26 @@
 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;
   onEnd?: () => void;
 }
 
+
+
 interface BaseConfig {
   debug?: boolean;
+  layer?: number | LayerTarget;
   quality?: Quality;
   style?: {
     zIndex?: string;
   };
-  filter?: FilterConfig;
   resizeDebounce?: boolean | ResizeConfig;
-  travelerClipArea? : travelerClipArea;
+  travelerClipArea?: travelerClipArea;
 }
 
 export interface OverlayConfig extends BaseConfig {

package/src/types/flags.ts

@@ -1,22 +1,27 @@
-//Bitmask Flags
-export const DIRTY_NONE = 0;
-export const DIRTY_RECT = 1 << 0; // 1: x, y, width, height (00000001)
-export const DIRTY_STYLE = 1 << 1; // 2: style (00000010)
-export const DIRTY_ZINDEX = 1 << 2; // 4: zIndex (00000100)
-export const DIRTY_STRUCTURE = 1 << 3; // 8: childNode add / delete (00001000)
-export const DIRTY_CONTENT = 1 << 4; // 16: text content changed (00010000)
+import { ATTR_FILTER } from "./attributes";
+
+export {
+  DIRTY_NONE,
+  DIRTY_RECT,
+  DIRTY_STYLE,
+  DIRTY_ZINDEX,
+  DIRTY_STRUCTURE,
+  DIRTY_CONTENT,
+} from "@mirage-engine/dom-tracker";
 
 // Filtering Flag
 export const USER_LAYER = 1 << 0;
-export const SYSTEM_LAYER = 1 << 1;
+export const SELECT_LAYER = 1 << 1;
 export const EXCLUDED = 0;
 
+// Three.js Layer Channels (0 ~ 31)
+export const THREE_LAYERS = {
+  BASE: 0,
+  SELECTED: 1,
+  getCaptureLayer: (layerNum: number) => 31 - layerNum,
+  HIDDEN: 31,
+} as const;
+
 export type Visibility = 0 | 1 | 2 | 3;
 
-export const ALLOWED_FILTERS = [
-  "include-tree",
-  "exclude-tree",
-  "include-self",
-  "exclude-self",
-  "end",
-];
+export const ALLOWED_FILTERS = Object.values(ATTR_FILTER.VALUES);

package/src/types/index.ts

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