Align Live2D tips with model

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: LIlGG

packages/live2d/src/components/Live2dTips.tsx

@@ -3,6 +3,7 @@ import {
   type Live2dConfig,
   configContext,
 } from "@/live2d/context/config-context";
+import type { ModelLayoutEvent } from "@/live2d/events/model-layout";
 import type { SendMessageEvent } from "@/live2d/events/send-message";
 import type {
   StreamMessageEvent,
@@ -18,6 +19,9 @@ import { classMap } from "lit/directives/class-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 export class Live2dTips extends UnoLitElement {
+  private static readonly DEFAULT_BOTTOM_OFFSET = 250;
+  private static readonly MODEL_OVERLAP_OFFSET = 20;
+
   @consume({ context: configContext })
   @property({ attribute: false })
   public config?: Live2dConfig;
@@ -26,6 +30,8 @@ export class Live2dTips extends UnoLitElement {
   private _isShow = false;
   @state()
   private _message = "";
+  @state()
+  private _bottomOffset = Live2dTips.DEFAULT_BOTTOM_OFFSET;
   private priority = -1;
   private messageTimer: number | null = null;
   // 流式消息模式标志
@@ -42,6 +48,9 @@ export class Live2dTips extends UnoLitElement {
   private readonly onStreamStop = (event: Event) => {
     this.handleStreamStop(event as StreamMessageStopEvent);
   };
+  private readonly onModelLayout = (event: Event) => {
+    this.handleModelLayout(event as ModelLayoutEvent);
+  };
 
   constructor() {
     super();
@@ -73,21 +82,20 @@ export class Live2dTips extends UnoLitElement {
       "select-none": true,
     };
     return html`
-      <div
-        id="live2d-tips"
-        class=${classMap(classes)}
-      >
+      <div id="live2d-tips" class=${classMap(classes)}>
         ${unsafeHTML(this._message)}
       </div>
     `;
   }
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.applyHostPosition();
     window.addEventListener("live2d:send-message", this.onMessage);
     window.addEventListener("live2d:stream-message-start", this.onStreamStart);
     window.addEventListener("live2d:stream-message", this.onStreamMessage);
     window.addEventListener("live2d:stream-message-stop", this.onStreamStop);
+    window.addEventListener("live2d:model-layout", this.onModelLayout);
   }
 
   disconnectedCallback(): void {
@@ -99,6 +107,7 @@ export class Live2dTips extends UnoLitElement {
     );
     window.removeEventListener("live2d:stream-message", this.onStreamMessage);
     window.removeEventListener("live2d:stream-message-stop", this.onStreamStop);
+    window.removeEventListener("live2d:model-layout", this.onModelLayout);
   }
 
   handleMessage(e: SendMessageEvent): void {
@@ -190,6 +199,18 @@ export class Live2dTips extends UnoLitElement {
       this.isStreamMode = false;
     }, showTimeout);
   }
+
+  handleModelLayout(e: ModelLayoutEvent): void {
+    const { topY, canvasHeight } = e.detail;
+    this._bottomOffset = Math.round(
+      canvasHeight - topY - Live2dTips.MODEL_OVERLAP_OFFSET,
+    );
+    this.applyHostPosition();
+  }
+
+  private applyHostPosition(): void {
+    this.style.bottom = `${this._bottomOffset}px`;
+  }
 }
 
 customElements.define("live2d-tips", Live2dTips);

packages/live2d/src/components/Live2dWidget.tsx

@@ -72,7 +72,9 @@ export class Live2dWidget extends UnoLitElement {
           <div
             class="group flex flex-col items-center relative translate-y-1 transition-transform duration-300 hover:translate-y-0"
           >
-            <live2d-tips class="-mb-10"></live2d-tips>
+            <live2d-tips
+              class="pointer-events-none absolute left-1/2 -translate-x-1/2"
+            ></live2d-tips>
             <live2d-canvas
               class="inline-block h-[300px] w-[300px] z-1"
             ></live2d-canvas>

packages/live2d/src/events/model-layout.ts

@@ -0,0 +1,20 @@
+import { Live2dEvent } from "@/live2d/events/types";
+
+export const MODEL_LAYOUT_EVENT_NAME = "live2d:model-layout" as const;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    [MODEL_LAYOUT_EVENT_NAME]: ModelLayoutEvent;
+  }
+}
+
+export interface ModelLayoutEventDetail {
+  topY: number;
+  canvasHeight: number;
+}
+
+export class ModelLayoutEvent extends Live2dEvent<ModelLayoutEventDetail> {
+  constructor(detail: ModelLayoutEventDetail) {
+    super(MODEL_LAYOUT_EVENT_NAME, detail);
+  }
+}

packages/live2d/src/live2d/model.ts

@@ -1,4 +1,5 @@
 import type { Live2dConfig } from "@/live2d/context/config-context";
+import { ModelLayoutEvent } from "@/live2d/events/model-layout";
 import { loadMergedTips } from "@/live2d/helpers/loadMergedTips";
 import { sendMessage } from "@/live2d/helpers/sendMessage";
 import { logConsoleStatus } from "@/live2d/live2d/console-status";
@@ -36,6 +37,9 @@ const MESSAGE_TIMEOUT_MS = 4000;
 const LOADING_MESSAGE_DELAY_MS = 1200;
 const DEFAULT_LOADING_MESSAGE =
   "稍等一下下哦，人家正在梳理小裙摆，马上就来陪你啦～";
+const HEAD_HIT_AREA_PATTERN = /(head|flickhead)/i;
+const SPEECH_ANCHOR_MIN_RATIO = 0.04;
+const SPEECH_ANCHOR_MAX_RATIO = 0.14;
 
 interface LoadModelOptions {
   loadSequence?: number;
@@ -174,6 +178,13 @@ class Model {
       app.screen.width / 2,
       app.screen.height * LIVE2D_BOTTOM_OFFSET,
     );
+    const modelTopY = this.getSpeechAnchorTopY(nextModel, bounds);
+    window.dispatchEvent(
+      new ModelLayoutEvent({
+        topY: modelTopY,
+        canvasHeight: app.screen.height,
+      }),
+    );
 
     if (this.#currentModel) {
       app.stage.removeChild(this.#currentModel);
@@ -185,6 +196,37 @@ class Model {
     this.#currentModel = nextModel;
   }
 
+  private getSpeechAnchorTopY(
+    model: Live2DModel,
+    bounds: { y: number; height: number },
+  ): number {
+    const anchorTop = this.getHeadTopY(model);
+    const minAnchorTop = bounds.y + bounds.height * SPEECH_ANCHOR_MIN_RATIO;
+    const maxAnchorTop = bounds.y + bounds.height * SPEECH_ANCHOR_MAX_RATIO;
+    const preferredAnchorTop = anchorTop ?? bounds.y;
+    const localTopY = Math.min(
+      Math.max(preferredAnchorTop, minAnchorTop),
+      maxAnchorTop,
+    );
+    return model.position.y + (localTopY - model.pivot.y) * model.scale.y;
+  }
+
+  private getHeadTopY(model: Live2DModel): number | undefined {
+    const headHitArea = Object.values(model.internalModel.hitAreas).find(
+      ({ name }) => HEAD_HIT_AREA_PATTERN.test(name),
+    );
+    if (!headHitArea) {
+      return;
+    }
+
+    const headBounds = model.internalModel.getDrawableBounds(headHitArea.index);
+    if (!Number.isFinite(headBounds.y) || headBounds.height <= 0) {
+      return;
+    }
+
+    return headBounds.y;
+  }
+
   /**
    * 为 Live2d 加载模型。
    *

packages/live2d/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/demo.tsx","./src/env.d.ts","./src/halo-config.ts","./src/halo.ts","./src/index.ts","./src/api/chat-api.ts","./src/common/unolitelement.ts","./src/components/live2dcanvas.tsx","./src/components/live2dchatwindow.tsx","./src/components/live2dcontext.tsx","./src/components/live2dtips.tsx","./src/components/live2dtoggle.tsx","./src/components/live2dtools.tsx","./src/components/live2dwidget.tsx","./src/config/default-config.ts","./src/config/normalize-config.ts","./src/config/normalize-helpers.ts","./src/config/custom-tools/normalize-custom-tools.ts","./src/context/config-context.ts","./src/events/add-default-message.ts","./src/events/before-init.ts","./src/events/index.ts","./src/events/model-ready.ts","./src/events/send-message.ts","./src/events/stream-message.ts","./src/events/tip-events.ts","./src/events/toggle-canvas.ts","./src/events/toggle-chat-window.ts","./src/events/types.ts","./src/helpers/createstreammessage.ts","./src/helpers/datewithinrange.ts","./src/helpers/getplugintips.ts","./src/helpers/loadfulltipsresource.ts","./src/helpers/loadmergedtips.ts","./src/helpers/loadtipsresource.ts","./src/helpers/mergetips.ts","./src/helpers/sendmessage.ts","./src/helpers/timewithinrange.ts","./src/helpers/widgetdrawer.ts","./src/helpers/widgetvisibility.ts","./src/live2d/console-status.ts","./src/live2d/model.ts","./src/live2d/runtime.ts","./src/live2d/tools/ai-chat.ts","./src/live2d/tools/asteroids.ts","./src/live2d/tools/custom-tool-config.ts","./src/live2d/tools/custom-tool.ts","./src/live2d/tools/exit.ts","./src/live2d/tools/hitokoto.ts","./src/live2d/tools/index.ts","./src/live2d/tools/info.ts","./src/live2d/tools/screenshot.ts","./src/live2d/tools/switch-model.ts","./src/live2d/tools/switch-texture.ts","./src/live2d/tools/tools.ts","./src/live2d/tools/custom-tool-actions/actions.generated.ts","./src/live2d/tools/custom-tool-actions/index.ts","./src/live2d/tools/custom-tool-actions/types.ts","./src/live2d/tools/custom-tool-actions/actions/emit-event.ts","./src/live2d/tools/custom-tool-actions/actions/load-model.ts","./src/live2d/tools/custom-tool-actions/actions/open-url.ts","./src/live2d/tools/custom-tool-actions/actions/screenshot.ts","./src/live2d/tools/custom-tool-actions/actions/send-message.ts","./src/live2d/tools/custom-tool-actions/actions/switch-model.ts","./src/live2d/tools/custom-tool-actions/actions/switch-texture.ts","./src/live2d/tools/custom-tool-actions/actions/toggle-chat.ts","./src/live2d/tools/custom-tool-actions/actions/widget-visibility.ts","./src/styles/unocss.global.css.d.ts","./src/types/assets.d.ts","./src/utils/distinctarray.ts","./src/utils/isnotempty.ts","./src/utils/isstring.ts","./src/utils/randomselection.ts","./src/utils/unomixin.ts","./src/utils/util.ts"],"version":"5.7.3"}
+{"root":["./src/demo.tsx","./src/env.d.ts","./src/halo-config.ts","./src/halo.ts","./src/index.ts","./src/api/chat-api.ts","./src/common/unolitelement.ts","./src/components/live2dcanvas.tsx","./src/components/live2dchatwindow.tsx","./src/components/live2dcontext.tsx","./src/components/live2dtips.tsx","./src/components/live2dtoggle.tsx","./src/components/live2dtools.tsx","./src/components/live2dwidget.tsx","./src/config/default-config.ts","./src/config/normalize-config.ts","./src/config/normalize-helpers.ts","./src/config/custom-tools/normalize-custom-tools.ts","./src/context/config-context.ts","./src/events/add-default-message.ts","./src/events/before-init.ts","./src/events/index.ts","./src/events/model-layout.ts","./src/events/model-ready.ts","./src/events/send-message.ts","./src/events/stream-message.ts","./src/events/tip-events.ts","./src/events/toggle-canvas.ts","./src/events/toggle-chat-window.ts","./src/events/types.ts","./src/helpers/createstreammessage.ts","./src/helpers/datewithinrange.ts","./src/helpers/getplugintips.ts","./src/helpers/loadfulltipsresource.ts","./src/helpers/loadmergedtips.ts","./src/helpers/loadtipsresource.ts","./src/helpers/mergetips.ts","./src/helpers/sendmessage.ts","./src/helpers/timewithinrange.ts","./src/helpers/widgetdrawer.ts","./src/helpers/widgetvisibility.ts","./src/live2d/console-status.ts","./src/live2d/model.ts","./src/live2d/runtime.ts","./src/live2d/tools/ai-chat.ts","./src/live2d/tools/asteroids.ts","./src/live2d/tools/custom-tool-config.ts","./src/live2d/tools/custom-tool.ts","./src/live2d/tools/exit.ts","./src/live2d/tools/hitokoto.ts","./src/live2d/tools/index.ts","./src/live2d/tools/info.ts","./src/live2d/tools/screenshot.ts","./src/live2d/tools/switch-model.ts","./src/live2d/tools/switch-texture.ts","./src/live2d/tools/tools.ts","./src/live2d/tools/custom-tool-actions/actions.generated.ts","./src/live2d/tools/custom-tool-actions/index.ts","./src/live2d/tools/custom-tool-actions/types.ts","./src/live2d/tools/custom-tool-actions/actions/emit-event.ts","./src/live2d/tools/custom-tool-actions/actions/load-model.ts","./src/live2d/tools/custom-tool-actions/actions/open-url.ts","./src/live2d/tools/custom-tool-actions/actions/screenshot.ts","./src/live2d/tools/custom-tool-actions/actions/send-message.ts","./src/live2d/tools/custom-tool-actions/actions/switch-model.ts","./src/live2d/tools/custom-tool-actions/actions/switch-texture.ts","./src/live2d/tools/custom-tool-actions/actions/toggle-chat.ts","./src/live2d/tools/custom-tool-actions/actions/widget-visibility.ts","./src/styles/unocss.global.css.d.ts","./src/types/assets.d.ts","./src/utils/distinctarray.ts","./src/utils/isnotempty.ts","./src/utils/isstring.ts","./src/utils/randomselection.ts","./src/utils/unomixin.ts","./src/utils/util.ts"],"version":"5.7.3"}