@react-shimeji/core 0.2.1 → 0.2.2

package/dist/index.d.cts

@@ -219,7 +219,7 @@ interface ShimejiEngineOptions {
     gravity?: number;
     /** Maximum elapsed time applied to one animation update. Defaults to 100 ms. */
     maxDeltaTime?: number;
-    /** CSS class added to the generated work area. */
+    /** @deprecated There is no shared work area; retained for source compatibility. */
     workAreaClassName?: string;
     /** CSS class added to each generated mascot element. */
     mascotClassName?: string;
@@ -326,8 +326,6 @@ declare class ShimejiEngine {
     private readonly disposers;
     private readonly intervals;
     private readonly options;
-    private readonly originalContainerPosition;
-    private readonly adjustedContainerPosition;
     private pointer;
     private animationFrame;
     private lastFrameTime;
@@ -464,7 +462,7 @@ interface PlatformRectangle extends Rectangle {
 }
 /** Resolves a platform option into DOM elements, excluding engine-owned nodes. */
 declare function resolvePlatformElements(source: string | readonly HTMLElement[], document: Document, excludedRoot?: HTMLElement): HTMLElement[];
-/** Reads platform bounds once and converts viewport coordinates to work-area coordinates. */
+/** Reads platform bounds once and converts viewport coordinates to the supplied origin. */
 declare function readPlatformRectangles(elements: readonly HTMLElement[], workAreaRectangle: Pick<DOMRect, "left" | "top">): PlatformRectangle[];
 
 /** A resolved image and optional atlas crop for one sprite frame. */
@@ -496,9 +494,9 @@ declare function isIndividualSprite(sprite: SpriteRectangle | IndividualSprite |
 
 /** DOM nodes and resources owned by one mascot. */
 interface MascotDomHandle {
-    /** Pointer-interactive mascot wrapper. */
+    /** Fixed, pointer-transparent mascot wrapper. */
     element: HTMLDivElement;
-    /** Child element on which sprite images are painted. */
+    /** Pointer-interactive child element on which sprite images are painted. */
     spriteElement: HTMLDivElement;
     /** Per-mascot spritesheet URL lease. */
     spriteLease: SpriteLease;

package/dist/index.d.ts

@@ -219,7 +219,7 @@ interface ShimejiEngineOptions {
     gravity?: number;
     /** Maximum elapsed time applied to one animation update. Defaults to 100 ms. */
     maxDeltaTime?: number;
-    /** CSS class added to the generated work area. */
+    /** @deprecated There is no shared work area; retained for source compatibility. */
     workAreaClassName?: string;
     /** CSS class added to each generated mascot element. */
     mascotClassName?: string;
@@ -326,8 +326,6 @@ declare class ShimejiEngine {
     private readonly disposers;
     private readonly intervals;
     private readonly options;
-    private readonly originalContainerPosition;
-    private readonly adjustedContainerPosition;
     private pointer;
     private animationFrame;
     private lastFrameTime;
@@ -464,7 +462,7 @@ interface PlatformRectangle extends Rectangle {
 }
 /** Resolves a platform option into DOM elements, excluding engine-owned nodes. */
 declare function resolvePlatformElements(source: string | readonly HTMLElement[], document: Document, excludedRoot?: HTMLElement): HTMLElement[];
-/** Reads platform bounds once and converts viewport coordinates to work-area coordinates. */
+/** Reads platform bounds once and converts viewport coordinates to the supplied origin. */
 declare function readPlatformRectangles(elements: readonly HTMLElement[], workAreaRectangle: Pick<DOMRect, "left" | "top">): PlatformRectangle[];
 
 /** A resolved image and optional atlas crop for one sprite frame. */
@@ -496,9 +494,9 @@ declare function isIndividualSprite(sprite: SpriteRectangle | IndividualSprite |
 
 /** DOM nodes and resources owned by one mascot. */
 interface MascotDomHandle {
-    /** Pointer-interactive mascot wrapper. */
+    /** Fixed, pointer-transparent mascot wrapper. */
     element: HTMLDivElement;
-    /** Child element on which sprite images are painted. */
+    /** Pointer-interactive child element on which sprite images are painted. */
     spriteElement: HTMLDivElement;
     /** Per-mascot spritesheet URL lease. */
     spriteLease: SpriteLease;

package/dist/index.js

@@ -1,41 +1,23 @@
 // src/dom.ts
 var DomManager = class {
-  /** Creates an isolated work area inside the supplied host element. */
-  constructor(container, sprites, workAreaClassName) {
+  /** Uses the supplied element only as a mount point for independent mascots. */
+  constructor(container, sprites) {
     this.container = container;
     this.sprites = sprites;
-    const workArea = document.createElement("div");
-    workArea.dataset.reactShimejiWorkArea = "true";
-    if (workAreaClassName) workArea.className = workAreaClassName;
-    Object.assign(workArea.style, {
-      position: "absolute",
-      inset: "0",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      pointerEvents: "none",
-      zIndex: "2147483643"
-    });
-    this.workArea = workArea;
-    this.ensureMounted();
   }
   container;
   sprites;
-  /** Generated element that contains all mascots. */
-  workArea;
-  /** Reattaches the work area if application code temporarily removed it. */
+  handles = /* @__PURE__ */ new Set();
+  /** Reattaches mascot elements if application code temporarily removed them. */
   ensureMounted() {
-    if (this.workArea.parentElement !== this.container) this.container.appendChild(this.workArea);
+    for (const handle of this.handles) {
+      if (handle.element.parentElement !== this.container) this.container.appendChild(handle.element);
+    }
   }
-  /** Returns the current local work-area rectangle. */
+  /** Returns viewport bounds because fixed mascots use viewport coordinates. */
   getBounds() {
-    return this.getBoundsFromClientRectangle(this.workArea.getBoundingClientRect());
-  }
-  /** Converts a previously-read work-area client rectangle into local bounds. */
-  getBoundsFromClientRectangle(rectangle) {
-    const width = rectangle.width || this.container.clientWidth || window.innerWidth;
-    const height = rectangle.height || this.container.clientHeight || window.innerHeight;
-    return { x: 0, y: 0, width, height };
+    const view = this.container.ownerDocument.defaultView ?? window;
+    return { x: 0, y: 0, width: view.innerWidth, height: view.innerHeight };
   }
   /** Creates a mascot node and acquires its spritesheet resource. */
   createMascot(spec, mascotId, mascotClassName) {
@@ -43,12 +25,14 @@ var DomManager = class {
     const element = document.createElement("div");
     element.dataset.shimejiId = mascotId;
     if (mascotClassName) element.className = mascotClassName;
-    Object.assign(element.style, { position: "absolute", left: "0", top: "0", width: "0", height: "0", pointerEvents: "auto", touchAction: "none", userSelect: "none", willChange: "transform" });
+    Object.assign(element.style, { position: "fixed", left: "0", top: "0", width: "0", height: "0", pointerEvents: "none", zIndex: "9999", userSelect: "none", willChange: "transform" });
     const spriteElement = document.createElement("div");
-    Object.assign(spriteElement.style, { position: "absolute", left: "0", top: "0", backgroundRepeat: "no-repeat", transformOrigin: "center center", pointerEvents: "none" });
+    Object.assign(spriteElement.style, { position: "absolute", left: "0", top: "0", backgroundRepeat: "no-repeat", transformOrigin: "center center", pointerEvents: "auto", touchAction: "none", userSelect: "none" });
     element.appendChild(spriteElement);
-    this.workArea.appendChild(element);
-    return { element, spriteElement, spriteLease };
+    const handle = { element, spriteElement, spriteLease };
+    this.handles.add(handle);
+    this.container.appendChild(element);
+    return handle;
   }
   /** Paints one mascot state into its existing DOM nodes. */
   render(handle, spec, state) {
@@ -80,12 +64,18 @@ var DomManager = class {
   }
   /** Removes one mascot node and releases its temporary image URL. */
   removeMascot(handle) {
+    if (!this.handles.delete(handle)) return;
     handle.element.remove();
     handle.spriteLease.release();
   }
-  /** Removes the work area owned by this manager. */
+  /** Returns whether an element belongs to one of this manager's mascots. */
+  owns(element) {
+    for (const handle of this.handles) if (handle.element === element || handle.element.contains(element)) return true;
+    return false;
+  }
+  /** Removes every mascot element and releases its temporary image URL. */
   destroy() {
-    this.workArea.remove();
+    for (const handle of [...this.handles]) this.removeMascot(handle);
   }
 };
 
@@ -1102,7 +1092,7 @@ var Mascot = class {
     return nearby;
   }
   installPointerHandlers() {
-    const element = this.domHandle.element;
+    const element = this.domHandle.spriteElement;
     const listen = (target, type, listener) => {
       target.addEventListener(type, listener);
       this.disposers.push(() => target.removeEventListener(type, listener));
@@ -1111,8 +1101,7 @@ var Mascot = class {
       const pointerEvent = event;
       if (pointerEvent.button !== 0) return;
       event.preventDefault();
-      const bounds = this.dom.workArea.getBoundingClientRect();
-      const point = { x: pointerEvent.clientX - bounds.left, y: pointerEvent.clientY - bounds.top };
+      const point = { x: pointerEvent.clientX, y: pointerEvent.clientY };
       this.pointerId = pointerEvent.pointerId;
       this.pointerDown = point;
       this.lastPointer = point;
@@ -1126,8 +1115,7 @@ var Mascot = class {
     listen(document, "pointermove", (event) => {
       const pointerEvent = event;
       if (!this.state.dragging || pointerEvent.pointerId !== this.pointerId) return;
-      const bounds = this.dom.workArea.getBoundingClientRect();
-      const point = { x: pointerEvent.clientX - bounds.left, y: pointerEvent.clientY - bounds.top };
+      const point = { x: pointerEvent.clientX, y: pointerEvent.clientY };
       const previous = this.lastPointer ?? point;
       this.state.vx = (point.x - previous.x) * 0.8;
       this.state.vy = (point.y - previous.y) * 0.8;
@@ -1275,10 +1263,7 @@ var ShimejiEngine = class {
     if (!container) throw new TypeError("ShimejiEngine requires a container element");
     this.options = { ...defaults, ...options, random: options.random };
     this.platformSource = this.options.platforms;
-    this.originalContainerPosition = container.style.position;
-    this.adjustedContainerPosition = getComputedStyle(container).position === "static";
-    if (this.adjustedContainerPosition) container.style.position = "relative";
-    this.dom = new DomManager(container, this.sprites, this.options.workAreaClassName || void 0);
+    this.dom = new DomManager(container, this.sprites);
     this.initialize();
   }
   container;
@@ -1290,8 +1275,6 @@ var ShimejiEngine = class {
   disposers = [];
   intervals = /* @__PURE__ */ new Set();
   options;
-  originalContainerPosition;
-  adjustedContainerPosition;
   pointer = { x: 0, y: 0, dx: 0, dy: 0 };
   animationFrame;
   lastFrameTime;
@@ -1306,9 +1289,8 @@ var ShimejiEngine = class {
     this.initialized = true;
     this.listen(document, "pointermove", (event) => {
       const pointerEvent = event;
-      const rectangle = this.dom.workArea.getBoundingClientRect();
-      const x = pointerEvent.clientX - rectangle.left;
-      const y = pointerEvent.clientY - rectangle.top;
+      const x = pointerEvent.clientX;
+      const y = pointerEvent.clientY;
       this.pointer = { x, y, dx: x - this.pointer.x, dy: y - this.pointer.y };
     });
     this.listen(window, "resize", () => this.renderAll());
@@ -1412,7 +1394,6 @@ var ShimejiEngine = class {
     this.sprites.destroy();
     this.specs.clear();
     this.events.clear();
-    if (this.adjustedContainerPosition && this.container.style.position === "relative") this.container.style.position = this.originalContainerPosition;
     this.destroyed = true;
     this.initialized = false;
   }
@@ -1435,10 +1416,9 @@ var ShimejiEngine = class {
     for (const mascot of this.mascots.values()) mascot.tick(0, bounds, platforms);
   }
   readFrameGeometry() {
-    const workAreaRectangle = this.dom.workArea.getBoundingClientRect();
-    const bounds = this.dom.getBoundsFromClientRectangle(workAreaRectangle);
-    const elements = resolvePlatformElements(this.platformSource, this.container.ownerDocument, this.dom.workArea);
-    return { bounds, platforms: readPlatformRectangles(elements, workAreaRectangle) };
+    const bounds = this.dom.getBounds();
+    const elements = resolvePlatformElements(this.platformSource, this.container.ownerDocument).filter((element) => !this.dom.owns(element));
+    return { bounds, platforms: readPlatformRectangles(elements, { left: 0, top: 0 }) };
   }
   emitState() {
     this.events.emit("statechange", this.getState());