tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/dist/components/RoomParticipantView/StreamPlayManager/index.d.ts

@@ -0,0 +1,119 @@
+import { VideoStreamType, FillMode } from '../../../types';
+
+/**
+ * 流播放管理器新版本 - 协调器
+ * 职责：
+ * 1. 协调各个专业模块的工作
+ * 2. 提供统一的流管理接口
+ * 3. 处理模块间的通信和事件
+ * 4. 管理整个系统的生命周期
+ */
+export declare class StreamPlayManager {
+    static instance: StreamPlayManager | null;
+    private lazyLoadManager;
+    private videoQualityManager;
+    private streamPlayer;
+    private streamInfoManager;
+    private hasVideoStreamMap;
+    constructor();
+    setLoginUserId(loginUserId: string): void;
+    private onUserVideoStateChanged;
+    private isLocalVideoStream;
+    /**
+     * 绑定视频流到指定视图
+     * @param options 绑定选项
+     */
+    bindView(options: {
+        userId: string;
+        streamType: VideoStreamType;
+        view: string | HTMLDivElement;
+        lazyLoad?: {
+            enable: boolean;
+            viewport?: string | HTMLDivElement;
+        };
+    }): Promise<void>;
+    /**
+     * 解绑视频流的指定视图
+     * @param options 解绑选项
+     */
+    unbindView(options: {
+        userId: string;
+        streamType: VideoStreamType;
+        view: string | HTMLDivElement;
+    }): Promise<void>;
+    /**
+     * 处理可见性变化回调
+     * @private
+     */
+    private handleVisibilityChange;
+    /**
+     * 处理质量变化回调
+     * @private
+     */
+    private handleQualityChange;
+    /**
+     * 更新视频视图列表
+     * @private
+     */
+    private updateVideoView;
+    /**
+     * 检查并更新视频质量
+     * @private
+     */
+    private checkAndUpdateQuality;
+    /**
+     * 开始播放视频流
+     * @private
+     */
+    private startPlayVideo;
+    /**
+     * 停止播放视频流
+     * @private
+     */
+    private stopPlayVideo;
+    /**
+     * 更新视频流质量
+     * @private
+     */
+    private updateVideoQuality;
+    /**
+     * 设置流配置
+     * @param options 配置选项
+     */
+    setStreamConfig(options: {
+        userId: string;
+        streamType: VideoStreamType;
+        renderParams?: {
+            fillMode?: FillMode;
+        };
+    }): Promise<void>;
+    private bindEvent;
+    private unbindEvent;
+    /**
+     * 清理所有流信息
+     */
+    destroy(): Promise<void>;
+}
+export declare function useStreamPlayManager(): {
+    bindView: (options: {
+        userId: string;
+        streamType: VideoStreamType;
+        view: string | HTMLDivElement;
+        lazyLoad?: {
+            enable: boolean;
+            viewport?: string | HTMLDivElement;
+        };
+    }) => Promise<void>;
+    unbindView: (options: {
+        userId: string;
+        streamType: VideoStreamType;
+        view: string | HTMLDivElement;
+    }) => Promise<void>;
+    setStreamConfig: (options: {
+        userId: string;
+        streamType: VideoStreamType;
+        renderParams?: {
+            fillMode?: FillMode;
+        };
+    }) => Promise<void>;
+};

package/dist/components/RoomParticipantView/StreamPlayManager/index.js

@@ -0,0 +1,298 @@
+var M = Object.defineProperty;
+var v = (o, t, e) => t in o ? M(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var m = (o, t, e) => v(o, typeof t != "symbol" ? t + "" : t, e);
+import { watch as p } from "vue";
+import S, { TUIRoomEvents as I, TUIVideoStreamType as h } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as b } from "../../../hooks/useRoomEngine.js";
+import { useLoginState as Q } from "../../../states/LoginState.js";
+import { useRoomState as P } from "../../../states/RoomState/index.js";
+import { LazyLoadManager as L } from "./LazyLoadManager.js";
+import { StreamInfoManager as C } from "./StreamInfoManager.js";
+import { StreamPlayer as T } from "./StreamPlayer.js";
+import { VideoQualityManager as $ } from "./VideoQualityManager.js";
+import { VideoStreamType as g, FillMode as E } from "../../../types/participant.js";
+const V = b(), { currentRoom: U } = P(), { loginUserInfo: c } = Q(), y = class y {
+  constructor() {
+    // 专业模块实例
+    m(this, "lazyLoadManager");
+    m(this, "videoQualityManager");
+    m(this, "streamPlayer");
+    m(this, "streamInfoManager");
+    m(this, "hasVideoStreamMap", /* @__PURE__ */ new Map());
+    var t;
+    if (y.instance)
+      return y.instance;
+    y.instance = this, this.streamInfoManager = new C(), this.streamPlayer = new T(), this.lazyLoadManager = new L({
+      onVisibilityChange: this.handleVisibilityChange.bind(this)
+    }), this.videoQualityManager = new $({
+      onQualityChange: this.handleQualityChange.bind(this),
+      loginUserId: ((t = c.value) == null ? void 0 : t.userId) || ""
+    }), this.onUserVideoStateChanged = this.onUserVideoStateChanged.bind(this), this.bindEvent();
+  }
+  setLoginUserId(t) {
+    this.videoQualityManager.setLoginUserId(t);
+  }
+  onUserVideoStateChanged(t) {
+    const { userId: e, streamType: a, hasVideo: i } = t, s = {
+      [h.kCameraStreamLow]: g.Camera,
+      [h.kCameraStream]: g.Camera,
+      [h.kScreenStream]: g.Screen
+    }[a];
+    i ? (this.hasVideoStreamMap.set(`${e}_${s}`, !0), this.startPlayVideo({ userId: e, streamType: s })) : (this.hasVideoStreamMap.delete(`${e}_${s}`), this.stopPlayVideo({ userId: e, streamType: s }));
+  }
+  isLocalVideoStream(t) {
+    var e;
+    return t === ((e = c.value) == null ? void 0 : e.userId);
+  }
+  /**
+   * 绑定视频流到指定视图
+   * @param options 绑定选项
+   */
+  async bindView(t) {
+    const { userId: e, streamType: a, view: i, lazyLoad: r } = t, { enable: s, viewport: l } = r || { enable: !0, viewport: null }, d = typeof i == "string" ? document.getElementById(i) : i;
+    if (!d)
+      throw new Error("[StreamPlayManager] bindView failed: view not found");
+    const f = !s || this.isLocalVideoStream(e);
+    try {
+      if (this.streamInfoManager.addView({
+        userId: e,
+        streamType: a,
+        view: d,
+        initVisible: f
+      }), f) {
+        await this.startPlayVideo({ userId: e, streamType: a });
+        return;
+      }
+      this.lazyLoadManager.initObserver({ root: l || null }), this.lazyLoadManager.observe({ userId: e, streamType: a, viewElement: d });
+    } catch (w) {
+      throw console.error("[StreamPlayManager] bindView error:", w), w;
+    }
+  }
+  /**
+   * 解绑视频流的指定视图
+   * @param options 解绑选项
+   */
+  async unbindView(t) {
+    const { userId: e, streamType: a, view: i } = t, r = typeof i == "string" ? document.getElementById(i) : i;
+    if (!r)
+      throw new Error("[StreamPlayManager] unbindView failed: view not found");
+    try {
+      this.streamInfoManager.removeView({
+        userId: e,
+        streamType: a,
+        view: r
+      }), this.lazyLoadManager.unobserve(r), this.videoQualityManager.unobserve(r), this.streamInfoManager.getVisibleViewIdList(e, a).length === 0 ? await this.stopPlayVideo({ userId: e, streamType: a }) : await this.updateVideoView({ userId: e, streamType: a, removeViews: [r] });
+    } catch (s) {
+      throw console.error("[StreamPlayManager] unbindView error:", s), s;
+    }
+  }
+  /**
+   * 处理可见性变化回调
+   * @private
+   */
+  async handleVisibilityChange(t) {
+    const { userId: e, streamType: a, isVisible: i, target: r } = t, s = this.streamInfoManager.getStreamInfo(e, a);
+    s && (console.log("[StreamPlayManager] VisibilityChange", `${e}_${a} ${i ? "enter" : "left"}`), this.streamInfoManager.setViewVisible({
+      userId: e,
+      streamType: a,
+      view: r,
+      isVisible: i
+    }), i ? s.isPlaying ? await this.updateVideoView({ userId: e, streamType: a, addViews: [r] }) : await this.startPlayVideo({ userId: e, streamType: a }) : this.streamInfoManager.getVisibleViewIdList(e, a).length === 0 ? await this.stopPlayVideo({ userId: e, streamType: a }) : await this.updateVideoView({ userId: e, streamType: a, removeViews: [r] }));
+  }
+  /**
+   * 处理质量变化回调
+   * @private
+   */
+  async handleQualityChange(t) {
+    const { userId: e, streamType: a, newQuality: i, reason: r } = t, s = this.streamInfoManager.getStreamInfo(e, a);
+    !s || s.videoQuality === i || (console.log(`[StreamPlayManager] videoQualityChange: ${e}_${a} -> ${i}, reason: ${r}`), this.streamInfoManager.updateStreamInfo({
+      userId: e,
+      streamType: a,
+      updates: { videoQuality: i }
+    }), s.isPlaying && await this.updateVideoQuality({ userId: e, streamType: a, newQuality: i }));
+  }
+  /**
+   * 更新视频视图列表
+   * @private
+   */
+  async updateVideoView(t) {
+    const { userId: e, streamType: a, addViews: i, removeViews: r } = t, s = this.streamInfoManager.getStreamInfo(e, a);
+    if (!s)
+      return;
+    i == null || i.forEach((d) => {
+      this.videoQualityManager.observe({ userId: e, streamType: a, viewElement: d });
+    }), r == null || r.forEach((d) => {
+      this.videoQualityManager.unobserve(d);
+    });
+    const l = this.streamInfoManager.getVisibleViewIdList(e, a);
+    if (s.isPlaying && l.length > 0) {
+      const d = this.streamInfoManager.getAllViewIdList(e, a);
+      await this.streamPlayer.updateVideoView({
+        userId: e,
+        streamType: a,
+        viewIdList: d
+      }), await this.checkAndUpdateQuality({ userId: e, streamType: a });
+    }
+  }
+  /**
+   * 检查并更新视频质量
+   * @private
+   */
+  async checkAndUpdateQuality(t) {
+    const { userId: e, streamType: a } = t, i = this.streamInfoManager.getStreamInfo(e, a);
+    if (!i)
+      return;
+    const r = this.videoQualityManager.calculateOptimalQuality({ userId: e, streamType: a }), s = i.videoQuality;
+    r !== s && (console.log(`[StreamPlayManager] videoQualityChange: ${e}_${a} -> ${r}, reason: view update`), this.streamInfoManager.updateStreamInfo({
+      userId: e,
+      streamType: a,
+      updates: { videoQuality: r }
+    }), await this.updateVideoQuality({ userId: e, streamType: a, newQuality: r }));
+  }
+  /**
+   * 开始播放视频流
+   * @private
+   */
+  async startPlayVideo(t) {
+    const { userId: e, streamType: a } = t, i = this.streamInfoManager.getStreamInfo(e, a);
+    if (!i || !this.hasVideoStreamMap.get(`${e}_${a}`))
+      return;
+    Array.from(i.views.keys()).forEach((l) => {
+      this.videoQualityManager.observe({ userId: e, streamType: a, viewElement: l });
+    });
+    const s = this.videoQualityManager.calculateOptimalQuality({ userId: e, streamType: a });
+    i.videoQuality && i.videoQuality !== s && console.log(`[StreamPlayManager] videoQualityChange: ${e}_${a} -> ${s}, reason: view update`), this.streamInfoManager.updateStreamInfo({
+      userId: e,
+      streamType: a,
+      updates: { videoQuality: s }
+    });
+    try {
+      const l = this.streamInfoManager.getVisibleViewIdList(e, a);
+      if (l.length === 0)
+        return;
+      await this.streamPlayer.startPlayVideo({
+        userId: e,
+        streamType: a,
+        videoQuality: s,
+        viewIdList: l
+      }), this.streamInfoManager.updateStreamInfo({
+        userId: e,
+        streamType: a,
+        updates: { isPlaying: !0 }
+      });
+    } catch (l) {
+      throw console.error("[StreamPlayManager] startPlayVideo error:", l), l;
+    }
+  }
+  /**
+   * 停止播放视频流
+   * @private
+   */
+  async stopPlayVideo(t) {
+    const { userId: e, streamType: a } = t, i = this.streamInfoManager.getStreamInfo(e, a);
+    if (!(!i || !i.isPlaying)) {
+      Array.from(i.views.keys()).forEach((r) => {
+        this.videoQualityManager.unobserve(r);
+      });
+      try {
+        this.streamInfoManager.updateStreamInfo({
+          userId: e,
+          streamType: a,
+          updates: { isPlaying: !1 }
+        }), await this.streamPlayer.stopPlayVideo({
+          userId: e,
+          streamType: a,
+          videoQuality: i.videoQuality
+        });
+      } catch (r) {
+        throw console.error("[StreamPlayManager] stopPlayVideo error:", r), r;
+      }
+    }
+  }
+  /**
+   * 更新视频流质量
+   * @private
+   */
+  async updateVideoQuality(t) {
+    const { userId: e, streamType: a, newQuality: i } = t, r = this.streamInfoManager.getStreamInfo(e, a);
+    if (!(!r || !r.isPlaying))
+      try {
+        await this.streamPlayer.updateVideoQuality({
+          userId: e,
+          streamType: a,
+          videoQuality: i
+        }), console.log(`[StreamPlayManager] updateVideoQuality success: ${e}_${a} -> ${i}`);
+      } catch (s) {
+        throw console.error("[StreamPlayManager] updateVideoQuality error:", s), s;
+      }
+  }
+  /**
+   * 设置流配置
+   * @param options 配置选项
+   */
+  async setStreamConfig(t) {
+    const { userId: e, streamType: a, renderParams: i } = t;
+    if (this.streamInfoManager.getStreamInfo(e, a)) {
+      i && i.fillMode && this.streamInfoManager.updateStreamInfo({ userId: e, streamType: a, updates: { fillMode: i.fillMode } });
+      try {
+        await this.streamPlayer.setRenderParams({
+          userId: e,
+          streamType: a,
+          renderParams: {
+            fillMode: (i == null ? void 0 : i.fillMode) || E.Fit
+          }
+        });
+      } catch (s) {
+        throw console.error("[StreamPlayManager] setStreamConfig error:", s), s;
+      }
+    }
+  }
+  bindEvent() {
+    S.once("ready", () => {
+      var t;
+      (t = V.instance) == null || t.on(I.onUserVideoStateChanged, this.onUserVideoStateChanged);
+    });
+  }
+  unbindEvent() {
+    var t;
+    (t = V.instance) == null || t.off(I.onUserVideoStateChanged, this.onUserVideoStateChanged);
+  }
+  /**
+   * 清理所有流信息
+   */
+  async destroy() {
+    try {
+      const t = [], e = this.streamInfoManager.getAllStreams();
+      for (const { userId: a, streamType: i } of e)
+        t.push(this.stopPlayVideo({ userId: a, streamType: i }));
+      await Promise.all(t), this.hasVideoStreamMap.clear(), this.lazyLoadManager.destroy(), this.videoQualityManager.destroy(), this.streamInfoManager.clear(), this.unbindEvent(), y.instance = null;
+    } catch (t) {
+      throw console.error("[StreamPlayManager] cleanup error:", t), t;
+    }
+  }
+};
+m(y, "instance", null);
+let u = y, n = new u();
+p(() => {
+  var o;
+  return (o = U.value) == null ? void 0 : o.roomId;
+}, async (o, t) => {
+  t && !o && (await n.destroy(), n = new u());
+});
+p(() => {
+  var o;
+  return (o = c.value) == null ? void 0 : o.userId;
+}, (o) => {
+  o && n.setLoginUserId(o);
+});
+function D() {
+  return {
+    bindView: n == null ? void 0 : n.bindView.bind(n),
+    unbindView: n == null ? void 0 : n.unbindView.bind(n),
+    setStreamConfig: n == null ? void 0 : n.setStreamConfig.bind(n)
+  };
+}
+export {
+  u as StreamPlayManager,
+  D as useStreamPlayManager
+};

package/dist/components/RoomParticipantView/StreamPlayManager/types.d.ts

@@ -0,0 +1,14 @@
+import { FillMode } from '../../../types';
+
+export declare enum VideoStreamQuality {
+    HD = "HD",
+    LD = "LD"
+}
+export interface StreamInfo {
+    views: Map<HTMLDivElement, {
+        isVisible: boolean;
+    }>;
+    isPlaying: boolean;
+    videoQuality?: VideoStreamQuality;
+    fillMode?: FillMode;
+}

package/dist/components/RoomParticipantView/StreamPlayManager/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((D) => (D.HD = "HD", D.LD = "LD", D))(r || {});
+export {
+  r as VideoStreamQuality
+};

package/dist/components/RoomParticipantView/index.d.ts

@@ -0,0 +1,99 @@
+declare const RoomParticipantView: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        participant: {
+            type: import('vue').PropType<import('../..').RoomParticipant>;
+            required: true;
+        };
+        streamType: {
+            type: import('vue').PropType<import('../..').VideoStreamType>;
+            required: true;
+        };
+        fillMode: {
+            type: import('vue').PropType<import('../..').FillMode>;
+        };
+        lazyLoad: {
+            type: import('vue').PropType<{
+                enable: boolean;
+                viewport?: string | HTMLDivElement;
+            }>;
+        };
+        onStreamLoading: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamPlaying: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamError: {
+            type: import('vue').PropType<(error: any) => void>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        participant: {
+            type: import('vue').PropType<import('../..').RoomParticipant>;
+            required: true;
+        };
+        streamType: {
+            type: import('vue').PropType<import('../..').VideoStreamType>;
+            required: true;
+        };
+        fillMode: {
+            type: import('vue').PropType<import('../..').FillMode>;
+        };
+        lazyLoad: {
+            type: import('vue').PropType<{
+                enable: boolean;
+                viewport?: string | HTMLDivElement;
+            }>;
+        };
+        onStreamLoading: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamPlaying: {
+            type: import('vue').PropType<() => void>;
+        };
+        onStreamError: {
+            type: import('vue').PropType<(error: any) => void>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    participant: {
+        type: import('vue').PropType<import('../..').RoomParticipant>;
+        required: true;
+    };
+    streamType: {
+        type: import('vue').PropType<import('../..').VideoStreamType>;
+        required: true;
+    };
+    fillMode: {
+        type: import('vue').PropType<import('../..').FillMode>;
+    };
+    lazyLoad: {
+        type: import('vue').PropType<{
+            enable: boolean;
+            viewport?: string | HTMLDivElement;
+        }>;
+    };
+    onStreamLoading: {
+        type: import('vue').PropType<() => void>;
+    };
+    onStreamPlaying: {
+        type: import('vue').PropType<() => void>;
+    };
+    onStreamError: {
+        type: import('vue').PropType<(error: any) => void>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        participantViewUI?(_: {}): any;
+    };
+});
+export { RoomParticipantView };

package/dist/components/RoomParticipantView/index.js

@@ -0,0 +1,32 @@
+import { defineComponent as e, createElementBlock as o, openBlock as n, createVNode as r, renderSlot as i } from "vue";
+import m from "./StreamPlay.js";
+import { _ as l } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const c = { class: "atomicx-participant-view" }, p = /* @__PURE__ */ e({
+  __name: "index",
+  props: {
+    participant: {},
+    streamType: {},
+    fillMode: {},
+    lazyLoad: {},
+    onStreamLoading: { type: Function },
+    onStreamPlaying: { type: Function },
+    onStreamError: { type: Function }
+  },
+  setup(t) {
+    return (a, s) => (n(), o("div", c, [
+      r(m, {
+        participant: t.participant,
+        "stream-type": t.streamType,
+        "fill-mode": t.fillMode,
+        "lazy-load": t.lazyLoad,
+        "on-stream-loading": t.onStreamLoading,
+        "on-stream-playing": t.onStreamPlaying,
+        "on-stream-error": t.onStreamError
+      }, null, 8, ["participant", "stream-type", "fill-mode", "lazy-load", "on-stream-loading", "on-stream-playing", "on-stream-error"]),
+      i(a.$slots, "participantViewUI", {}, void 0, !0)
+    ]));
+  }
+}), d = /* @__PURE__ */ l(p, [["__scopeId", "data-v-c1fab7d2"]]), u = d;
+export {
+  u as RoomParticipantView
+};

package/dist/components/RoomParticipantView/index.vue.d.ts

@@ -0,0 +1,34 @@
+import { RoomParticipant, VideoStreamType, FillMode } from '../../types';
+
+interface Props {
+    participant: RoomParticipant;
+    streamType: VideoStreamType;
+    fillMode?: FillMode;
+    lazyLoad?: {
+        enable: boolean;
+        viewport?: string | HTMLDivElement;
+    };
+    onStreamLoading?: () => void;
+    onStreamPlaying?: () => void;
+    onStreamError?: (error: any) => void;
+}
+declare function __VLS_template(): {
+    participantViewUI?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/RoomView/ArrowStroke.js

@@ -0,0 +1,43 @@
+import { defineComponent as i, computed as l, createElementBlock as k, openBlock as m, normalizeClass as r, createElementVNode as e, createVNode as w, unref as d } from "vue";
+import { IconArrowStrokeLeft as f } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const u = /* @__PURE__ */ i({
+  __name: "ArrowStroke",
+  props: {
+    strokePosition: {},
+    arrowDirection: {},
+    hasStroke: { type: Boolean }
+  },
+  emits: ["click-arrow"],
+  setup(o, { emit: s }) {
+    const c = o, a = s, n = l(
+      () => `arrow-stroke-container-${c.strokePosition}`
+    );
+    function t() {
+      a("click-arrow");
+    }
+    return (h, S) => (m(), k("div", {
+      class: r(n.value)
+    }, [
+      e("div", {
+        class: r(["stroke-content", { "has-stroke": o.hasStroke }])
+      }, [
+        e("div", {
+          class: "arrow-content",
+          onClick: t
+        })
+      ], 2),
+      e("div", {
+        class: r(["arrow", { "has-stroke": o.hasStroke }]),
+        onClick: t
+      }, [
+        w(d(f), {
+          class: r(["arrow-stroke-icon", o.arrowDirection])
+        }, null, 8, ["class"])
+      ], 2)
+    ], 2));
+  }
+}), A = /* @__PURE__ */ p(u, [["__scopeId", "data-v-163ee86c"]]);
+export {
+  A as default
+};

package/dist/components/RoomView/ArrowStroke.vue.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    strokePosition: string;
+    arrowDirection: string;
+    hasStroke: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click-arrow": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{
+    "onClick-arrow"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};