@vmz/plugin-live2d 0.0.20 → 0.0.22

package/components/Live2dHost.vmz

@@ -1,20 +1,40 @@
 <template>
   <div class="live2d-host" style={hostStyle}>
     <div class="live2d-host__mount" id={hostId}></div>
-    <div if={showProgress && loading} class="live2d-host__progress" role="progressbar" aria-valuenow={progressPercent} aria-valuemin="0" aria-valuemax="100">
+    <div
+      if={showProgress && loading}
+      class="live2d-host__progress"
+      role="progressbar"
+      aria-valuenow={progressPercent}
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
       <span>{progressLabel} · {progressPercent}%</span>
     </div>
   </div>
 </template>
 
 <style>
-.live2d-host { position: relative; display: inline-block; }
-.live2d-host__mount { width: 100%; height: 100%; }
-.live2d-host__mount canvas { display: block; width: 100%; height: 100%; }
+.live2d-host {
+  position: relative;
+  display: inline-block;
+}
+.live2d-host__mount {
+  width: 100%;
+  height: 100%;
+}
+.live2d-host__mount canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 .live2d-host__progress {
-  position: absolute; inset: auto 0 0; padding: 0.35rem 0.5rem;
+  position: absolute;
+  inset: auto 0 0;
+  padding: 0.35rem 0.5rem;
   background: rgba(255, 255, 255, 0.92);
-  font: 600 0.75rem/1.2 ui-monospace, monospace; color: #377ba8;
+  font: 600 0.75rem/1.2 ui-monospace, monospace;
+  color: #377ba8;
 }
 </style>
 
@@ -33,6 +53,14 @@ export default class Live2dHost {
   public showProgress = true;
   public exposeCaptureApi = false;
   public capturePresetId = '';
+  /** Called with Live2DRuntime after loadModel succeeds. */
+  public onReady = null;
+  /** Optional frame profile listener (caller should throttle UI). */
+  public onProfile = null;
+  /** Load / mount failure. */
+  public onError = null;
+  /** Pointer hit area string (often `drawable:N`). */
+  public onHit = null;
 
   hostId = `live2d-host-${++hostSeq}`;
   hostStyle = '';
@@ -40,8 +68,10 @@ export default class Live2dHost {
   progressPercent = 0;
   progressLabel = 'Loading…';
   runtime = null;
-  _raf = 0;
-  _lastTs = 0;
+  _unsubProfile = null;
+  _canvas = null;
+  _boundPointer = null;
+  _bootGeneration = 0;
 
   onMount() {
     this.hostStyle = `width:${this.width}px;height:${this.height}px`;
@@ -57,23 +87,48 @@ export default class Live2dHost {
   }
 
   onDestroy() {
-    this.stopLoop();
-    void this.runtime?.destroy?.();
+    this.teardownRuntime();
+  }
+
+  teardownRuntime() {
+    try {
+      this.runtime?.stage?.stop?.();
+    } catch {
+      /* updateMode may be manual on older callers */
+    }
+    this.detachPointer();
+    if (typeof this._unsubProfile === 'function') {
+      this._unsubProfile();
+      this._unsubProfile = null;
+    }
+    this.runtime?.destroy?.();
     this.runtime = null;
+    this._canvas = null;
+  }
+
+  detachPointer() {
+    if (this._canvas && this._boundPointer) {
+      this._canvas.removeEventListener('pointerdown', this._boundPointer);
+    }
+    this._boundPointer = null;
   }
 
-  stopLoop() {
-    if (this._raf) cancelAnimationFrame(this._raf);
-    this._raf = 0;
-    this._lastTs = 0;
+  attachPointer(canvas) {
+    this.detachPointer();
+    this._boundPointer = (event) => this.onPointerDown(event);
+    canvas.addEventListener('pointerdown', this._boundPointer);
   }
 
-  tick(ts) {
-    if (!this.runtime) return;
-    const dt = this._lastTs ? (ts - this._lastTs) / 1000 : 0;
-    this._lastTs = ts;
-    this.runtime.update(dt);
-    this._raf = requestAnimationFrame((t) => this.tick(t));
+  onPointerDown(event) {
+    const runtime = this.runtime;
+    const canvas = this._canvas;
+    if (!runtime || !canvas || typeof this.onHit !== 'function') return;
+    const rect = canvas.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return;
+    const nx = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    const ny = 1 - ((event.clientY - rect.top) / rect.height) * 2;
+    const area = runtime.hitTest?.(nx, ny) ?? null;
+    this.onHit(area);
   }
 
   ensureCanvas() {
@@ -87,53 +142,85 @@ export default class Live2dHost {
     canvas.style.width = `${this.width}px`;
     canvas.style.height = `${this.height}px`;
     host.appendChild(canvas);
+    this._canvas = canvas;
     return canvas;
   }
 
+  getRuntime() {
+    return this.runtime;
+  }
+
   async capturePng(opts = {}) {
     if (!this.runtime) throw new Error('Live2dHost: runtime not ready');
     return this.runtime.capturePng(opts);
   }
 
+  reportError(err) {
+    this.loading = false;
+    const message = String(err?.message || err || 'load error');
+    if (this.exposeCaptureApi && typeof window !== 'undefined') {
+      const api = window.__LIVE2D_CAPTURE__;
+      if (api) api.error = message;
+    }
+    if (typeof this.onError === 'function') this.onError(message);
+  }
+
   async boot() {
     if (!this.model) return;
+    const generation = ++this._bootGeneration;
     this.loading = true;
+    this.progressPercent = 0;
+    this.progressLabel = 'loading';
     try {
-      this.stopLoop();
-      void this.runtime?.destroy?.();
+      this.teardownRuntime();
+      if (generation !== this._bootGeneration) return;
       const canvas = this.ensureCanvas();
       if (!canvas) return;
-      const runtime = createLive2D({ prefer: this.prefer, updateMode: 'manual' });
-      runtime.events.on('progress', (p) => this.onProgress(p));
+      const prefer = Array.isArray(this.prefer)
+        ? this.prefer
+        : ['canvas2d', 'webgl2', 'webgpu'];
+      const runtime = createLive2D({ prefer, updateMode: 'auto' });
       runtime.events.on('ready', () => {
+        if (generation !== this._bootGeneration) return;
         this.loading = false;
+        this.progressPercent = 100;
+        this.progressLabel = 'ready';
         if (this.autoplay) {
-          this._lastTs = 0;
-          this._raf = requestAnimationFrame((t) => this.tick(t));
+          try {
+            runtime.stage.start();
+          } catch {
+            /* already running */
+          }
         }
+        this.attachPointer(canvas);
         if (this.exposeCaptureApi) void this.publishCapture();
+        if (typeof this.onReady === 'function') this.onReady(runtime);
       });
       runtime.events.on('error', (p) => {
-        this.loading = false;
-        if (this.exposeCaptureApi && typeof window !== 'undefined') {
-          const api = window.__LIVE2D_CAPTURE__;
-          if (api) api.error = String(p?.error || 'load error');
-        }
+        if (generation !== this._bootGeneration) return;
+        this.reportError(p?.error || 'load error');
       });
-      await runtime.mount(canvas);
-      await runtime.load(this.model);
+      if (typeof this.onProfile === 'function') {
+        this._unsubProfile = runtime.events.on('profile', (profile) => {
+          if (generation !== this._bootGeneration) return;
+          this.onProfile(profile);
+        });
+      }
+      runtime.mount(canvas);
+      this.progressPercent = 35;
+      await runtime.loadModel(this.model);
+      if (generation !== this._bootGeneration) {
+        runtime.destroy?.();
+        return;
+      }
       this.runtime = runtime;
-    } catch {
-      this.loading = false;
+      this.progressPercent = 90;
+    } catch (err) {
+      if (generation !== this._bootGeneration) return;
+      this.reportError(err);
     }
   }
 
-  onProgress(p) {
-    const progress = p?.progress ?? 0;
-    this.progressLabel = p?.stage || 'loading';
-    this.progressPercent = Math.round(Math.min(1, Math.max(0, progress)) * 100);
-  }
-
   async publishCapture() {
     const api = typeof window !== 'undefined' ? window.__LIVE2D_CAPTURE__ : null;
     if (!api) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/plugin-live2d",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "VMZ Live2D adapter — <Live2dHost> for @doki-land/live2d in VMZ applications",
   "type": "module",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@doki-land/live2d": "0.0.20",
+    "@doki-land/live2d": "0.0.22",
     "@vmz/plugin": "^0.1.8"
   }
 }