virtual-human-cf 1.0.1 → 1.0.3

package/dist/style.css

@@ -1 +1 @@
-.fade-enter-active[data-v-8d9d61ad],.fade-leave-active[data-v-8d9d61ad]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-8d9d61ad],.fade-leave-to[data-v-8d9d61ad]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-8d9d61ad]{position:relative;width:100%;max-width:400px;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;transition:background-color .3s ease}.virtual-human-container.is-dark[data-v-8d9d61ad]{background:#1f2937;box-shadow:0 10px 25px #00000080}.video-wrapper[data-v-8d9d61ad]{position:relative;width:100%;aspect-ratio:9 / 16;background:#000}.persona-video[data-v-8d9d61ad]{width:100%;height:100%;object-fit:cover}.overlay[data-v-8d9d61ad]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-8d9d61ad]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-8d9d61ad]{background:#ef4444cc}.status-badge.playing[data-v-8d9d61ad]{background:#22c55ecc}.dot[data-v-8d9d61ad]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-8d9d61ad{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-8d9d61ad]{animation:pulse-8d9d61ad 2s cubic-bezier(.4,0,.6,1) infinite}
+.fade-enter-active[data-v-54e42f84],.fade-leave-active[data-v-54e42f84]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-54e42f84],.fade-leave-to[data-v-54e42f84]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-54e42f84]{position:fixed;left:16px;bottom:16px;width:400px;height:500px;z-index:2147483647;overflow:visible}.video-wrapper[data-v-54e42f84]{position:relative;width:400px;height:500px;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;transition:background-color .3s ease,box-shadow .3s ease}.virtual-human-container.is-dark .video-wrapper[data-v-54e42f84]{background:#1f2937;box-shadow:0 10px 25px #00000080}.persona-video[data-v-54e42f84]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-54e42f84]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;transition:background .2s,border-color .2s}.resize-handle[data-v-54e42f84]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-54e42f84]{top:-10px;left:-10px;cursor:nwse-resize}.resize-handle.top-right[data-v-54e42f84]{top:-10px;right:-10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-54e42f84]{bottom:-10px;left:-10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-54e42f84]{bottom:-10px;right:-10px;cursor:nwse-resize}.overlay[data-v-54e42f84]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-54e42f84]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-54e42f84]{background:#ef4444cc}.status-badge.playing[data-v-54e42f84]{background:#22c55ecc}.dot[data-v-54e42f84]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-54e42f84{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-54e42f84]{animation:pulse-54e42f84 2s cubic-bezier(.4,0,.6,1) infinite}

package/dist/virtual-human-cf.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as H, ref as g, watch as w, onMounted as I, onUnmounted as _, openBlock as h, createBlock as E, Transition as x, withCtx as B, createElementBlock as A, normalizeClass as W, createElementVNode as y, createTextVNode as U, createCommentVNode as $, renderSlot as D } from "vue";
-const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overlay" }, M = {
+import { defineComponent as T, ref as v, watch as z, onMounted as W, onUnmounted as X, openBlock as h, createBlock as D, Transition as F, withCtx as q, createElementBlock as b, normalizeClass as N, createElementVNode as H, normalizeStyle as O, createCommentVNode as I, createTextVNode as L, renderSlot as J } from "vue";
+const j = ["src", "muted"], G = { class: "overlay" }, K = {
   key: 0,
   class: "status-badge paused"
-}, N = {
+}, Q = {
   key: 1,
   class: "status-badge playing"
-}, R = /* @__PURE__ */ H({
+}, Z = /* @__PURE__ */ T({
   __name: "VirtualHumanPersona",
   props: {
     // 视频源URL
@@ -16,7 +16,7 @@ const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overla
     // 是否可见
     visible: {
       type: Boolean,
-      default: !0
+      default: !1
     },
     // 是否自动播放
     isPlaying: {
@@ -46,90 +46,131 @@ const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overla
     }
   },
   emits: ["update:isPlaying", "ended", "update:visible"],
-  setup(r, { emit: p }) {
-    const e = r, s = p, o = g(null), c = g(null), n = g(!1), u = () => {
-      if (c.value && c.value.close(), !(!e.wsUrl || !e.screenClientId))
+  setup(i, { emit: P }) {
+    const t = i, s = P, l = v(null), k = v(null), n = v(null), m = v(!1), V = v(1), E = v(!1), p = v(null), C = v(0), x = v(0), o = v(1), u = () => {
+      if (n.value && n.value.close(), !(!t.wsUrl || !t.screenClientId))
         try {
-          const i = new URL(e.wsUrl);
-          i.searchParams.append("sessionId", e.screenClientId + "-persona"), c.value = new WebSocket(i.toString()), c.value.onopen = () => {
-            n.value = !0, console.log(`[VirtualHumanPersona] Connected to ${e.wsUrl} for session ${e.screenClientId}-persona`);
-          }, c.value.onmessage = (t) => {
+          const r = new URL(t.wsUrl);
+          r.searchParams.append("sessionId", t.screenClientId + "-persona"), n.value = new WebSocket(r.toString()), n.value.onopen = () => {
+            m.value = !0, console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`);
+          }, n.value.onmessage = (e) => {
             try {
-              const a = JSON.parse(t.data);
-              b(a);
+              const a = JSON.parse(e.data);
+              c(a);
             } catch (a) {
-              console.error("[VirtualHumanPersona] Failed to parse message:", t.data, a);
+              console.error("[VirtualHumanPersona] Failed to parse message:", e.data, a);
             }
-          }, c.value.onerror = (t) => {
-            console.error("[VirtualHumanPersona] WebSocket error:", t);
-          }, c.value.onclose = () => {
-            n.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
+          }, n.value.onerror = (e) => {
+            console.error("[VirtualHumanPersona] WebSocket error:", e);
+          }, n.value.onclose = () => {
+            m.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
           };
-        } catch (i) {
-          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", i);
+        } catch (r) {
+          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", r);
         }
-    }, b = (i) => {
-      const { type: t, action: a } = i;
-      t === "control" && (a === "play" ? (s("update:isPlaying", !0), s("update:visible", !0)) : a === "pause" ? (s("update:isPlaying", !1), s("update:visible", !1)) : a === "stop" && (s("update:isPlaying", !1), s("update:visible", !1), o.value && (o.value.currentTime = 0)));
+    }, c = (r) => {
+      const { type: e, action: a } = r;
+      e === "control" && (a === "play" ? (s("update:isPlaying", !0), s("update:visible", !0)) : a === "pause" ? s("update:isPlaying", !1) : a === "stop" && (s("update:isPlaying", !1), s("update:visible", !1), l.value && (l.value.currentTime = 0)));
     };
-    w(() => e.screenClientId, () => {
-      e.screenClientId && e.wsUrl && u();
-    }), w(() => e.wsUrl, () => {
-      e.screenClientId && e.wsUrl && u();
-    }), w(() => e.isPlaying, (i) => {
-      o.value && (i ? o.value.play().catch((t) => console.error("Video play failed:", t)) : o.value.pause());
+    z(() => t.screenClientId, () => {
+      t.screenClientId && t.wsUrl && u();
+    }), z(() => t.wsUrl, () => {
+      t.screenClientId && t.wsUrl && u();
+    }), z(() => t.isPlaying, (r) => {
+      l.value && (r ? l.value.play().catch((e) => console.error("Video play failed:", e)) : l.value.pause());
     });
-    const k = () => {
-      e.isPlaying || s("update:isPlaying", !0);
-    }, C = () => {
-      e.isPlaying && s("update:isPlaying", !1);
-    }, v = () => {
+    const w = () => {
+      t.isPlaying || s("update:isPlaying", !0);
+    }, g = () => {
+      t.isPlaying && s("update:isPlaying", !1);
+    }, A = () => {
       s("update:isPlaying", !1), s("ended");
+    }, f = (r, e) => {
+      E.value = !0, p.value = r, o.value = V.value;
+      const a = "clientX" in e ? e.clientX : e.touches[0].clientX, S = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      C.value = a, x.value = S, document.addEventListener("mousemove", y), document.addEventListener("mouseup", d), document.addEventListener("touchmove", y), document.addEventListener("touchend", d);
+    }, y = (r) => {
+      if (!E.value || !k.value) return;
+      const e = "clientX" in r ? r.clientX : r.touches[0].clientX, a = "clientY" in r ? r.clientY : r.touches[0].clientY, S = e - C.value, M = a - x.value, B = k.value.getBoundingClientRect(), Y = 0.5, $ = 2;
+      let U = o.value;
+      const R = Math.min(B.width, B.height);
+      p.value === "bottom-right" ? U = o.value + (S + M) / R : p.value === "bottom-left" ? U = o.value + (-S + M) / R : p.value === "top-right" ? U = o.value + (S - M) / R : p.value === "top-left" && (U = o.value + (-S - M) / R), V.value = Math.max(Y, Math.min($, U));
+    }, d = () => {
+      E.value = !1, p.value = null, document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", d), document.removeEventListener("touchmove", y), document.removeEventListener("touchend", d);
     };
-    return I(() => {
-      e.isPlaying && o.value && o.value.play().catch((i) => console.error("Video play failed:", i)), e.screenClientId && e.wsUrl && u();
-    }), _(() => {
-      c.value && c.value.close();
-    }), (i, t) => (h(), E(x, { name: "fade" }, {
-      default: B(() => [
-        r.visible ? (h(), A("div", {
+    return W(() => {
+      t.isPlaying && l.value && l.value.play().catch((r) => console.error("Video play failed:", r)), t.screenClientId && t.wsUrl && u();
+    }), X(() => {
+      n.value && n.value.close();
+    }), (r, e) => (h(), D(F, { name: "fade" }, {
+      default: q(() => [
+        i.visible ? (h(), b("div", {
           key: 0,
-          class: W(["virtual-human-container", { "is-dark": r.isDark }])
+          class: N(["virtual-human-container", { "is-dark": i.isDark }])
         }, [
-          y("div", F, [
-            y("video", {
+          H("div", {
+            class: "video-wrapper",
+            ref_key: "wrapperRef",
+            ref: k,
+            style: O({ transform: `scale(${V.value})`, transformOrigin: "left bottom" })
+          }, [
+            H("video", {
               ref_key: "videoRef",
-              ref: o,
-              src: r.videoSrc,
+              ref: l,
+              src: i.videoSrc,
               class: "persona-video",
-              muted: r.muted,
+              muted: i.muted,
               playsinline: "",
               loop: "",
-              onPlay: k,
-              onPause: C,
-              onEnded: v
-            }, null, 40, T),
-            y("div", q, [
-              r.isPlaying ? (h(), A("div", N, [...t[1] || (t[1] = [
-                y("span", { class: "dot animate-pulse" }, null, -1),
-                U(" 播放中 ", -1)
-              ])])) : (h(), A("div", M, [...t[0] || (t[0] = [
-                y("span", { class: "dot" }, null, -1),
-                U(" 暂停中 ", -1)
+              onPlay: w,
+              onPause: g,
+              onEnded: A
+            }, null, 40, j),
+            i.visible ? (h(), b("div", {
+              key: 0,
+              class: "resize-handle top-left",
+              onMousedown: e[0] || (e[0] = (a) => f("top-left", a)),
+              onTouchstart: e[1] || (e[1] = (a) => f("top-left", a))
+            }, null, 32)) : I("", !0),
+            i.visible ? (h(), b("div", {
+              key: 1,
+              class: "resize-handle top-right",
+              onMousedown: e[2] || (e[2] = (a) => f("top-right", a)),
+              onTouchstart: e[3] || (e[3] = (a) => f("top-right", a))
+            }, null, 32)) : I("", !0),
+            i.visible ? (h(), b("div", {
+              key: 2,
+              class: "resize-handle bottom-left",
+              onMousedown: e[4] || (e[4] = (a) => f("bottom-left", a)),
+              onTouchstart: e[5] || (e[5] = (a) => f("bottom-left", a))
+            }, null, 32)) : I("", !0),
+            i.visible ? (h(), b("div", {
+              key: 3,
+              class: "resize-handle bottom-right",
+              onMousedown: e[6] || (e[6] = (a) => f("bottom-right", a)),
+              onTouchstart: e[7] || (e[7] = (a) => f("bottom-right", a))
+            }, null, 32)) : I("", !0),
+            H("div", G, [
+              i.isPlaying ? (h(), b("div", Q, [...e[9] || (e[9] = [
+                H("span", { class: "dot animate-pulse" }, null, -1),
+                L(" 播放中 ", -1)
+              ])])) : (h(), b("div", K, [...e[8] || (e[8] = [
+                H("span", { class: "dot" }, null, -1),
+                L(" 暂停中 ", -1)
               ])]))
             ])
-          ])
-        ], 2)) : $("", !0)
+          ], 4)
+        ], 2)) : I("", !0)
       ]),
       _: 1
     }));
   }
-}), z = (r, p) => {
-  const e = r.__vccOpts || r;
-  for (const [s, o] of p)
-    e[s] = o;
-  return e;
-}, O = /* @__PURE__ */ z(R, [["__scopeId", "data-v-8d9d61ad"]]), J = /* @__PURE__ */ H({
+}), _ = (i, P) => {
+  const t = i.__vccOpts || i;
+  for (const [s, l] of P)
+    t[s] = l;
+  return t;
+}, ee = /* @__PURE__ */ _(Z, [["__scopeId", "data-v-54e42f84"]]), te = /* @__PURE__ */ T({
   __name: "VirtualHumanEventAdapter",
   props: {
     // 屏幕客户端ID
@@ -144,32 +185,32 @@ const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overla
     }
   },
   emits: ["highlight", "showDialog", "end", "pause", "connected", "error"],
-  setup(r, { emit: p }) {
-    const e = r, s = p, o = g(null), c = g(!1);
-    let n = null, u = 0;
-    const b = () => {
+  setup(i, { emit: P }) {
+    const t = i, s = P, l = v(null), k = v(!1);
+    let n = null, m = 0;
+    const V = () => {
       n || (n = new (window.AudioContext || window.webkitAudioContext)({
         sampleRate: 24e3
       })), n.state === "suspended" && n.resume();
-    }, k = (t) => {
-      if (b(), !!n)
+    }, E = (o) => {
+      if (V(), !!n)
         try {
-          const a = window.atob(t), l = a.length, m = new Uint8Array(l);
-          for (let d = 0; d < l; d++)
-            m[d] = a.charCodeAt(d);
-          const f = new Int16Array(m.buffer), P = new Float32Array(f.length);
-          for (let d = 0; d < f.length; d++)
-            P[d] = f[d] / 32768;
-          const S = n.createBuffer(1, P.length, 24e3);
-          S.getChannelData(0).set(P);
-          const V = n.createBufferSource();
-          V.buffer = S, V.connect(n.destination), u < n.currentTime && (u = n.currentTime), V.start(u), u += S.duration;
-        } catch (a) {
-          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", a);
+          const u = window.atob(o), c = u.length, w = new Uint8Array(c);
+          for (let d = 0; d < c; d++)
+            w[d] = u.charCodeAt(d);
+          const g = new Int16Array(w.buffer), A = new Float32Array(g.length);
+          for (let d = 0; d < g.length; d++)
+            A[d] = g[d] / 32768;
+          const f = n.createBuffer(1, A.length, 24e3);
+          f.getChannelData(0).set(A);
+          const y = n.createBufferSource();
+          y.buffer = f, y.connect(n.destination), m < n.currentTime && (m = n.currentTime), y.start(m), m += f.duration;
+        } catch (u) {
+          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", u);
         }
-    }, C = (t) => {
+    }, p = (o) => {
       if (n)
-        switch (t) {
+        switch (o) {
           case "play":
             n.state === "suspended" && n.resume();
             break;
@@ -177,78 +218,78 @@ const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overla
             n.state === "running" && n.suspend();
             break;
           case "stop":
-            n.close(), n = null, u = 0;
+            n.close(), n = null, m = 0;
             break;
           default:
-            console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${t}`);
+            console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${o}`);
         }
-    }, v = () => {
-      o.value && o.value.close();
+    }, C = () => {
+      l.value && l.value.close();
       try {
-        const t = new URL(e.wsUrl);
-        t.searchParams.append("sessionId", e.screenClientId + "-event"), o.value = new WebSocket(t.toString()), o.value.onopen = () => {
-          c.value = !0, s("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${e.wsUrl} for session ${e.screenClientId}-event`);
-        }, o.value.onmessage = (a) => {
+        const o = new URL(t.wsUrl);
+        o.searchParams.append("sessionId", t.screenClientId + "-event"), l.value = new WebSocket(o.toString()), l.value.onopen = () => {
+          k.value = !0, s("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`);
+        }, l.value.onmessage = (u) => {
           try {
-            const l = JSON.parse(a.data);
-            i(l);
-          } catch (l) {
-            console.error("[VirtualHumanEventAdapter] Failed to parse message:", a.data, l);
+            const c = JSON.parse(u.data);
+            x(c);
+          } catch (c) {
+            console.error("[VirtualHumanEventAdapter] Failed to parse message:", u.data, c);
           }
-        }, o.value.onerror = (a) => {
-          console.error("[VirtualHumanEventAdapter] WebSocket error:", a), s("error", a);
-        }, o.value.onclose = () => {
-          c.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
+        }, l.value.onerror = (u) => {
+          console.error("[VirtualHumanEventAdapter] WebSocket error:", u), s("error", u);
+        }, l.value.onclose = () => {
+          k.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
         };
-      } catch (t) {
-        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", t), s("error", t);
+      } catch (o) {
+        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", o), s("error", o);
       }
-    }, i = (t) => {
-      const { type: a, payload: l, action: m } = t;
-      switch (a) {
+    }, x = (o) => {
+      const { type: u, payload: c, action: w } = o;
+      switch (console.log("msgmsg", o), u) {
         case "audio":
-          const f = (l == null ? void 0 : l.data) || t.data;
-          f && k(f);
+          const g = (c == null ? void 0 : c.data) || o.data;
+          g && E(g);
           break;
         case "dialog_event":
-          t.event && s(t.event, t.params);
+          o.event && s(o.event, o.params);
           break;
         case "control":
-          m && C(m);
+          w && p(w);
           break;
         case "highlight":
-          s("highlight", l);
+          s("highlight", c);
           break;
         case "showDialog":
-          s("showDialog", l);
+          s("showDialog", c);
           break;
         case "end":
-          s("end", l);
+          s("end", c);
           break;
         case "pause":
-          s("pause", l);
+          s("pause", c);
           break;
         default:
-          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${a}`);
+          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${u}`);
       }
     };
-    return w(() => e.screenClientId, () => {
-      e.screenClientId && e.wsUrl && v();
-    }), w(() => e.wsUrl, () => {
-      e.screenClientId && e.wsUrl && v();
-    }), I(() => {
-      e.screenClientId && e.wsUrl && v();
-    }), _(() => {
-      o.value && o.value.close(), n && n.close();
-    }), (t, a) => D(t.$slots, "default");
+    return z(() => t.screenClientId, () => {
+      t.screenClientId && t.wsUrl && C();
+    }), z(() => t.wsUrl, () => {
+      t.screenClientId && t.wsUrl && C();
+    }), W(() => {
+      t.screenClientId && t.wsUrl && C();
+    }), X(() => {
+      l.value && l.value.close(), n && n.close();
+    }), (o, u) => J(o.$slots, "default");
   }
-}), L = (r) => {
-  r.component("VirtualHumanPersona", O), r.component("VirtualHumanEventAdapter", J);
-}, G = {
-  install: L
+}), ne = (i) => {
+  i.component("VirtualHumanPersona", ee), i.component("VirtualHumanEventAdapter", te);
+}, oe = {
+  install: ne
 };
 export {
-  J as VirtualHumanEventAdapter,
-  O as VirtualHumanPersona,
-  G as default
+  te as VirtualHumanEventAdapter,
+  ee as VirtualHumanPersona,
+  oe as default
 };

package/dist/virtual-human-cf.umd.js

@@ -1 +1 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VirtualHumanCf={},u.Vue))})(this,function(u,e){"use strict";const U={class:"video-wrapper"},_=["src","muted"],A={class:"overlay"},E={key:0,class:"status-badge paused"},H={key:1,class:"status-badge playing"},P=((l,y)=>{const t=l.__vccOpts||l;for(const[s,r]of y)t[s]=r;return t})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!0},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1}},emits:["update:isPlaying","ended","update:visible"],setup(l,{emit:y}){const t=l,s=y,r=e.ref(null),d=e.ref(null),a=e.ref(!1),f=()=>{if(d.value&&d.value.close(),!(!t.wsUrl||!t.screenClientId))try{const c=new URL(t.wsUrl);c.searchParams.append("sessionId",t.screenClientId+"-persona"),d.value=new WebSocket(c.toString()),d.value.onopen=()=>{a.value=!0,console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`)},d.value.onmessage=n=>{try{const o=JSON.parse(n.data);w(o)}catch(o){console.error("[VirtualHumanPersona] Failed to parse message:",n.data,o)}},d.value.onerror=n=>{console.error("[VirtualHumanPersona] WebSocket error:",n)},d.value.onclose=()=>{a.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(c){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",c)}},w=c=>{const{type:n,action:o}=c;n==="control"&&(o==="play"?(s("update:isPlaying",!0),s("update:visible",!0)):o==="pause"?(s("update:isPlaying",!1),s("update:visible",!1)):o==="stop"&&(s("update:isPlaying",!1),s("update:visible",!1),r.value&&(r.value.currentTime=0)))};e.watch(()=>t.screenClientId,()=>{t.screenClientId&&t.wsUrl&&f()}),e.watch(()=>t.wsUrl,()=>{t.screenClientId&&t.wsUrl&&f()}),e.watch(()=>t.isPlaying,c=>{r.value&&(c?r.value.play().catch(n=>console.error("Video play failed:",n)):r.value.pause())});const k=()=>{t.isPlaying||s("update:isPlaying",!0)},b=()=>{t.isPlaying&&s("update:isPlaying",!1)},g=()=>{s("update:isPlaying",!1),s("ended")};return e.onMounted(()=>{t.isPlaying&&r.value&&r.value.play().catch(c=>console.error("Video play failed:",c)),t.screenClientId&&t.wsUrl&&f()}),e.onUnmounted(()=>{d.value&&d.value.close()}),(c,n)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":l.isDark}])},[e.createElementVNode("div",U,[e.createElementVNode("video",{ref_key:"videoRef",ref:r,src:l.videoSrc,class:"persona-video",muted:l.muted,playsinline:"",loop:"",onPlay:k,onPause:b,onEnded:g},null,40,_),e.createElementVNode("div",A,[l.isPlaying?(e.openBlock(),e.createElementBlock("div",H,[...n[1]||(n[1]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",E,[...n[0]||(n[0]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])])],2)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-8d9d61ad"]]),S=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["highlight","showDialog","end","pause","connected","error"],setup(l,{emit:y}){const t=l,s=y,r=e.ref(null),d=e.ref(!1);let a=null,f=0;const w=()=>{a||(a=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),a.state==="suspended"&&a.resume()},k=n=>{if(w(),!!a)try{const o=window.atob(n),i=o.length,h=new Uint8Array(i);for(let p=0;p<i;p++)h[p]=o.charCodeAt(p);const m=new Int16Array(h.buffer),v=new Float32Array(m.length);for(let p=0;p<m.length;p++)v[p]=m[p]/32768;const C=a.createBuffer(1,v.length,24e3);C.getChannelData(0).set(v);const V=a.createBufferSource();V.buffer=C,V.connect(a.destination),f<a.currentTime&&(f=a.currentTime),V.start(f),f+=C.duration}catch(o){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",o)}},b=n=>{if(a)switch(n){case"play":a.state==="suspended"&&a.resume();break;case"pause":a.state==="running"&&a.suspend();break;case"stop":a.close(),a=null,f=0;break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${n}`)}},g=()=>{r.value&&r.value.close();try{const n=new URL(t.wsUrl);n.searchParams.append("sessionId",t.screenClientId+"-event"),r.value=new WebSocket(n.toString()),r.value.onopen=()=>{d.value=!0,s("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`)},r.value.onmessage=o=>{try{const i=JSON.parse(o.data);c(i)}catch(i){console.error("[VirtualHumanEventAdapter] Failed to parse message:",o.data,i)}},r.value.onerror=o=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",o),s("error",o)},r.value.onclose=()=>{d.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(n){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",n),s("error",n)}},c=n=>{const{type:o,payload:i,action:h}=n;switch(o){case"audio":const m=(i==null?void 0:i.data)||n.data;m&&k(m);break;case"dialog_event":n.event&&s(n.event,n.params);break;case"control":h&&b(h);break;case"highlight":s("highlight",i);break;case"showDialog":s("showDialog",i);break;case"end":s("end",i);break;case"pause":s("pause",i);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${o}`)}};return e.watch(()=>t.screenClientId,()=>{t.screenClientId&&t.wsUrl&&g()}),e.watch(()=>t.wsUrl,()=>{t.screenClientId&&t.wsUrl&&g()}),e.onMounted(()=>{t.screenClientId&&t.wsUrl&&g()}),e.onUnmounted(()=>{r.value&&r.value.close(),a&&a.close()}),(n,o)=>e.renderSlot(n.$slots,"default")}}),I={install:l=>{l.component("VirtualHumanPersona",P),l.component("VirtualHumanEventAdapter",S)}};u.VirtualHumanEventAdapter=S,u.VirtualHumanPersona=P,u.default=I,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VirtualHumanCf={},p.Vue))})(this,function(p,e){"use strict";const z=["src","muted"],N={class:"overlay"},T={key:0,class:"status-badge paused"},R={key:1,class:"status-badge playing"},I=((c,V)=>{const n=c.__vccOpts||c;for(const[s,r]of V)n[s]=r;return n})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!1},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1}},emits:["update:isPlaying","ended","update:visible"],setup(c,{emit:V}){const n=c,s=V,r=e.ref(null),v=e.ref(null),o=e.ref(null),g=e.ref(!1),E=e.ref(1),S=e.ref(!1),h=e.ref(null),b=e.ref(0),H=e.ref(0),l=e.ref(1),d=()=>{if(o.value&&o.value.close(),!(!n.wsUrl||!n.screenClientId))try{const i=new URL(n.wsUrl);i.searchParams.append("sessionId",n.screenClientId+"-persona"),o.value=new WebSocket(i.toString()),o.value.onopen=()=>{g.value=!0,console.log(`[VirtualHumanPersona] Connected to ${n.wsUrl} for session ${n.screenClientId}-persona`)},o.value.onmessage=t=>{try{const a=JSON.parse(t.data);u(a)}catch(a){console.error("[VirtualHumanPersona] Failed to parse message:",t.data,a)}},o.value.onerror=t=>{console.error("[VirtualHumanPersona] WebSocket error:",t)},o.value.onclose=()=>{g.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(i){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",i)}},u=i=>{const{type:t,action:a}=i;t==="control"&&(a==="play"?(s("update:isPlaying",!0),s("update:visible",!0)):a==="pause"?s("update:isPlaying",!1):a==="stop"&&(s("update:isPlaying",!1),s("update:visible",!1),r.value&&(r.value.currentTime=0)))};e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&d()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&d()}),e.watch(()=>n.isPlaying,i=>{r.value&&(i?r.value.play().catch(t=>console.error("Video play failed:",t)):r.value.pause())});const k=()=>{n.isPlaying||s("update:isPlaying",!0)},y=()=>{n.isPlaying&&s("update:isPlaying",!1)},P=()=>{s("update:isPlaying",!1),s("ended")},m=(i,t)=>{S.value=!0,h.value=i,l.value=E.value;const a="clientX"in t?t.clientX:t.touches[0].clientX,C="clientY"in t?t.clientY:t.touches[0].clientY;b.value=a,H.value=C,document.addEventListener("mousemove",w),document.addEventListener("mouseup",f),document.addEventListener("touchmove",w),document.addEventListener("touchend",f)},w=i=>{if(!S.value||!v.value)return;const t="clientX"in i?i.clientX:i.touches[0].clientX,a="clientY"in i?i.clientY:i.touches[0].clientY,C=t-b.value,U=a-H.value,x=v.value.getBoundingClientRect(),W=.5,X=2;let B=l.value;const A=Math.min(x.width,x.height);h.value==="bottom-right"?B=l.value+(C+U)/A:h.value==="bottom-left"?B=l.value+(-C+U)/A:h.value==="top-right"?B=l.value+(C-U)/A:h.value==="top-left"&&(B=l.value+(-C-U)/A),E.value=Math.max(W,Math.min(X,B))},f=()=>{S.value=!1,h.value=null,document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",f),document.removeEventListener("touchmove",w),document.removeEventListener("touchend",f)};return e.onMounted(()=>{n.isPlaying&&r.value&&r.value.play().catch(i=>console.error("Video play failed:",i)),n.screenClientId&&n.wsUrl&&d()}),e.onUnmounted(()=>{o.value&&o.value.close()}),(i,t)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[c.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":c.isDark}])},[e.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:v,style:e.normalizeStyle({transform:`scale(${E.value})`,transformOrigin:"left bottom"})},[e.createElementVNode("video",{ref_key:"videoRef",ref:r,src:c.videoSrc,class:"persona-video",muted:c.muted,playsinline:"",loop:"",onPlay:k,onPause:y,onEnded:P},null,40,z),c.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"resize-handle top-left",onMousedown:t[0]||(t[0]=a=>m("top-left",a)),onTouchstart:t[1]||(t[1]=a=>m("top-left",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:1,class:"resize-handle top-right",onMousedown:t[2]||(t[2]=a=>m("top-right",a)),onTouchstart:t[3]||(t[3]=a=>m("top-right",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:2,class:"resize-handle bottom-left",onMousedown:t[4]||(t[4]=a=>m("bottom-left",a)),onTouchstart:t[5]||(t[5]=a=>m("bottom-left",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:3,class:"resize-handle bottom-right",onMousedown:t[6]||(t[6]=a=>m("bottom-right",a)),onTouchstart:t[7]||(t[7]=a=>m("bottom-right",a))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",N,[c.isPlaying?(e.openBlock(),e.createElementBlock("div",R,[...t[9]||(t[9]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",T,[...t[8]||(t[8]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])],4)],2)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-54e42f84"]]),M=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["highlight","showDialog","end","pause","connected","error"],setup(c,{emit:V}){const n=c,s=V,r=e.ref(null),v=e.ref(!1);let o=null,g=0;const E=()=>{o||(o=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),o.state==="suspended"&&o.resume()},S=l=>{if(E(),!!o)try{const d=window.atob(l),u=d.length,k=new Uint8Array(u);for(let f=0;f<u;f++)k[f]=d.charCodeAt(f);const y=new Int16Array(k.buffer),P=new Float32Array(y.length);for(let f=0;f<y.length;f++)P[f]=y[f]/32768;const m=o.createBuffer(1,P.length,24e3);m.getChannelData(0).set(P);const w=o.createBufferSource();w.buffer=m,w.connect(o.destination),g<o.currentTime&&(g=o.currentTime),w.start(g),g+=m.duration}catch(d){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",d)}},h=l=>{if(o)switch(l){case"play":o.state==="suspended"&&o.resume();break;case"pause":o.state==="running"&&o.suspend();break;case"stop":o.close(),o=null,g=0;break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${l}`)}},b=()=>{r.value&&r.value.close();try{const l=new URL(n.wsUrl);l.searchParams.append("sessionId",n.screenClientId+"-event"),r.value=new WebSocket(l.toString()),r.value.onopen=()=>{v.value=!0,s("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${n.wsUrl} for session ${n.screenClientId}-event`)},r.value.onmessage=d=>{try{const u=JSON.parse(d.data);H(u)}catch(u){console.error("[VirtualHumanEventAdapter] Failed to parse message:",d.data,u)}},r.value.onerror=d=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",d),s("error",d)},r.value.onclose=()=>{v.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(l){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",l),s("error",l)}},H=l=>{const{type:d,payload:u,action:k}=l;switch(console.log("msgmsg",l),d){case"audio":const y=(u==null?void 0:u.data)||l.data;y&&S(y);break;case"dialog_event":l.event&&s(l.event,l.params);break;case"control":k&&h(k);break;case"highlight":s("highlight",u);break;case"showDialog":s("showDialog",u);break;case"end":s("end",u);break;case"pause":s("pause",u);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${d}`)}};return e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&b()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&b()}),e.onMounted(()=>{n.screenClientId&&n.wsUrl&&b()}),e.onUnmounted(()=>{r.value&&r.value.close(),o&&o.close()}),(l,d)=>e.renderSlot(l.$slots,"default")}}),L={install:c=>{c.component("VirtualHumanPersona",I),c.component("VirtualHumanEventAdapter",M)}};p.VirtualHumanEventAdapter=M,p.VirtualHumanPersona=I,p.default=L,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-human-cf",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Vue3 Digital Human Component Package by cf ",
   "main": "dist/virtual-human-cf.umd.js",
   "module": "dist/virtual-human-cf.es.js",

package/src/components/VirtualHumanEventAdapter.vue

@@ -140,6 +140,7 @@ const connectWebSocket = () => {
 
 const handleMessage = (msg: any) => {
   const { type, payload, action } = msg;
+  console.log("msgmsg",msg)
   switch (type) {
     case 'audio':
       const base64Data = payload?.data || msg.data;

package/src/components/VirtualHumanPersona.vue

@@ -5,7 +5,11 @@
       class="virtual-human-container"
       :class="{ 'is-dark': isDark }"
     >
-      <div class="video-wrapper">
+      <div
+        class="video-wrapper"
+        ref="wrapperRef"
+        :style="{ transform: `scale(${scale})`, transformOrigin: 'left bottom' }"
+      >
         <video
           ref="videoRef"
           :src="videoSrc"
@@ -17,7 +21,33 @@
           @pause="handlePause"
           @ended="handleEnded"
         ></video>
-        
+
+        <!-- 缩放控制点 - 四个角 -->
+        <div
+          v-if="visible"
+          class="resize-handle top-left"
+          @mousedown="startResize('top-left', $event)"
+          @touchstart="startResize('top-left', $event)"
+        ></div>
+        <div
+          v-if="visible"
+          class="resize-handle top-right"
+          @mousedown="startResize('top-right', $event)"
+          @touchstart="startResize('top-right', $event)"
+        ></div>
+        <div
+          v-if="visible"
+          class="resize-handle bottom-left"
+          @mousedown="startResize('bottom-left', $event)"
+          @touchstart="startResize('bottom-left', $event)"
+        ></div>
+        <div
+          v-if="visible"
+          class="resize-handle bottom-right"
+          @mousedown="startResize('bottom-right', $event)"
+          @touchstart="startResize('bottom-right', $event)"
+        ></div>
+
         <!-- UI Overlay for controls or status -->
         <div class="overlay">
           <div v-if="!isPlaying" class="status-badge paused">
@@ -46,7 +76,7 @@ const props = defineProps({
   // 是否可见
   visible: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   // 是否自动播放
   isPlaying: {
@@ -78,10 +108,19 @@ const props = defineProps({
 const emit = defineEmits(['update:isPlaying', 'ended', 'update:visible']);
 
 const videoRef = ref<HTMLVideoElement | null>(null);
+const wrapperRef = ref<HTMLDivElement | null>(null);
 
 const ws = ref<WebSocket | null>(null);
 const isConnected = ref(false);
 
+// 缩放相关状态
+const scale = ref(1);
+const isResizing = ref(false);
+const resizeHandle = ref<string | null>(null);
+const startX = ref(0);
+const startY = ref(0);
+const startScale = ref(1);
+
 const connectWebSocket = () => {
   if (ws.value) {
     ws.value.close();
@@ -129,7 +168,7 @@ const handleMessage = (msg: any) => {
       emit('update:visible', true);
     } else if (action === 'pause') {
       emit('update:isPlaying', false);
-      emit('update:visible', false);
+      // 暂停时不隐藏视频
     } else if (action === 'stop') {
       emit('update:isPlaying', false);
       emit('update:visible', false);
@@ -179,6 +218,62 @@ const handleEnded = () => {
   emit('ended');
 };
 
+// 缩放功能
+const startResize = (handle: string, event: MouseEvent | TouchEvent) => {
+  isResizing.value = true;
+  resizeHandle.value = handle;
+  startScale.value = scale.value;
+
+  const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
+  const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
+  startX.value = clientX;
+  startY.value = clientY;
+
+  document.addEventListener('mousemove', handleResize);
+  document.addEventListener('mouseup', stopResize);
+  document.addEventListener('touchmove', handleResize);
+  document.addEventListener('touchend', stopResize);
+};
+
+const handleResize = (event: MouseEvent | TouchEvent) => {
+  if (!isResizing.value || !wrapperRef.value) return;
+
+  const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
+  const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
+
+  const deltaX = clientX - startX.value;
+  const deltaY = clientY - startY.value;
+
+  const rect = wrapperRef.value.getBoundingClientRect();
+  const minScale = 0.5;
+  const maxScale = 2;
+
+  // 根据拖动的角计算缩放比例
+  let newScale = startScale.value;
+  const baseSize = Math.min(rect.width, rect.height);
+
+  if (resizeHandle.value === 'bottom-right') {
+    newScale = startScale.value + (deltaX + deltaY) / baseSize;
+  } else if (resizeHandle.value === 'bottom-left') {
+    newScale = startScale.value + (-deltaX + deltaY) / baseSize;
+  } else if (resizeHandle.value === 'top-right') {
+    newScale = startScale.value + (deltaX - deltaY) / baseSize;
+  } else if (resizeHandle.value === 'top-left') {
+    newScale = startScale.value + (-deltaX - deltaY) / baseSize;
+  }
+
+  scale.value = Math.max(minScale, Math.min(maxScale, newScale));
+};
+
+const stopResize = () => {
+  isResizing.value = false;
+  resizeHandle.value = null;
+  document.removeEventListener('mousemove', handleResize);
+  document.removeEventListener('mouseup', stopResize);
+  document.removeEventListener('touchmove', handleResize);
+  document.removeEventListener('touchend', stopResize);
+};
+
 onMounted(() => {
   if (props.isPlaying && videoRef.value) {
     videoRef.value.play().catch(e => console.error('Video play failed:', e));
@@ -208,32 +303,78 @@ onUnmounted(() => {
 }
 
 .virtual-human-container {
+  position: fixed;
+  left: 16px;
+  bottom: 16px;
+  width: 400px;
+  height: 500px;
+  z-index: 2147483647;
+  overflow: visible;
+}
+
+.video-wrapper {
   position: relative;
-  width: 100%;
-  max-width: 400px;
+  width: 400px;
+  height: 500px;
   border-radius: 1rem;
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   background: #ffffff;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
-.virtual-human-container.is-dark {
+.virtual-human-container.is-dark .video-wrapper {
   background: #1f2937;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
 }
 
-.video-wrapper {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 9 / 16; /* Portrait ratio for digital human */
-  background: #000;
-}
-
 .persona-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transform-origin: center;
+  transition: transform 0.1s ease-out;
+}
+
+.resize-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: rgba(0, 0, 0, 0.5);
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 20;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.resize-handle:hover {
+  background: rgba(0, 0, 0, 0.7);
+  border-color: rgba(255, 255, 255, 1);
+}
+
+.resize-handle.top-left {
+  top: -10px;
+  left: -10px;
+  cursor: nwse-resize;
+}
+
+.resize-handle.top-right {
+  top: -10px;
+  right: -10px;
+  cursor: nesw-resize;
+}
+
+.resize-handle.bottom-left {
+  bottom: -10px;
+  left: -10px;
+  cursor: nesw-resize;
+}
+
+.resize-handle.bottom-right {
+  bottom: -10px;
+  right: -10px;
+  cursor: nwse-resize;
 }
 
 .overlay {