cnhis-design-vue 3.3.3-beta.7 → 3.3.3-beta.72

package/es/components/iho-chat/src/components/PersonProfile.vue.d.ts

@@ -7,7 +7,30 @@ declare const _default: import("vue").DefineComponent<{}, {
         currentSessionItem: AnyObject;
         id: string;
         userInfo: AnyObject;
-        msgList: AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: AnyObject;
         isAppendMsg: boolean;
         sessionList: AnyObject[];

package/es/components/iho-chat/src/components/PersonProfile.vue2.js

@@ -225,7 +225,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           round: "",
           size: 100,
           onClickCapture: _cache[0] || (_cache[0] = ($event) => showLargeAvatar.value = true)
-        }, null, 8, ["src"]), createCommentVNode(' <n-upload abstract accept="image/*" @change="onChange">\r\n							<n-upload-trigger #="{ handleClick }" abstract>\r\n								<n-button\r\n									circle\r\n									secondary\r\n									class="edit-avatar"\r\n									v-show="userDetail.id === state.userInfo.id"\r\n									@click="handleClick"\r\n								>\r\n									<template #icon>\r\n										<n-icon size="16" color="#666666" :component="Camera" />\r\n									</template>\r\n								</n-button>\r\n							</n-upload-trigger>\r\n						</n-upload> '), createElementVNode("div", _hoisted_4, [createElementVNode("h4", null, [createElementVNode("label", _hoisted_5, toDisplayString(userDetail.name), 1), withDirectives(createElementVNode("label", {
+        }, null, 8, ["src"]), createCommentVNode(' <n-upload abstract accept="image/*" @change="onChange">\n							<n-upload-trigger #="{ handleClick }" abstract>\n								<n-button\n									circle\n									secondary\n									class="edit-avatar"\n									v-show="userDetail.id === state.userInfo.id"\n									@click="handleClick"\n								>\n									<template #icon>\n										<n-icon size="16" color="#666666" :component="Camera" />\n									</template>\n								</n-button>\n							</n-upload-trigger>\n						</n-upload> '), createElementVNode("div", _hoisted_4, [createElementVNode("h4", null, [createElementVNode("label", _hoisted_5, toDisplayString(userDetail.name), 1), withDirectives(createElementVNode("label", {
           class: normalizeClass(["iho-chatRole", unref(isDoctorRole)(userDetail.roleInfo) ? "isDoctor" : ""])
         }, toDisplayString(unref(getRoleName)(userDetail.roleInfo)), 3), [[vShow, unref(getRoleName)(userDetail.roleInfo)]])]), createElementVNode("p", null, toDisplayString(userDetail.orgName), 1)]), createVNode(unref(NButton), {
           strong: "",

package/es/components/iho-chat/src/components/SelectLabel.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     NTooltip: any;
     emojis: {
         default: string[][];
-        findEmoji(name: string): any;
+        findEmoji(name: string): string | undefined;
     };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {

package/es/components/iho-chat/src/components/SiderList.vue.d.ts

@@ -32,7 +32,30 @@ declare const _default: import("vue").DefineComponent<{}, {
         currentSessionItem: AnyObject;
         id: string;
         userInfo: AnyObject;
-        msgList: AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: AnyObject;
         isAppendMsg: boolean;
         sessionList: AnyObject[];

package/es/components/iho-chat/src/components/Video.vue.d.ts

@@ -1,4 +1,4 @@
-import TRTC from 'trtc-sdk-v5';
+import { type TRTCEvent } from '../hooks';
 import { AV_STATUS } from '../constants';
 declare const _default: import("vue").DefineComponent<{}, {
     sendMessage: (message: {
@@ -11,7 +11,30 @@ declare const _default: import("vue").DefineComponent<{}, {
         currentSessionItem: import("../../../../shared/types").AnyObject;
         id: string;
         userInfo: import("../../../../shared/types").AnyObject;
-        msgList: import("../../../../shared/types").AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: import("../../../../shared/types").AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: import("../../../../shared/types").AnyObject;
         isAppendMsg: boolean;
         sessionList: import("../../../../shared/types").AnyObject[];
@@ -35,36 +58,26 @@ declare const _default: import("vue").DefineComponent<{}, {
         };
         isForward: boolean;
     };
-    trtcProxy: import("vue").Ref<any>;
-    trtc: TRTC;
+    trtc: import("trtc-sdk-v5").TRTC;
     timing: import("vue").Ref<string>;
     voiceClose: import("vue").Ref<boolean>;
     isAudio: import("vue").ComputedRef<boolean>;
     isCall: import("vue").ComputedRef<boolean>;
     startTimer: () => void;
-    resetTimer: () => void;
     toggleAudio: () => Promise<void>;
     messageTypeText: import("vue").ComputedRef<"语音" | "视频">;
     time: {
         timer: any;
         seconds: number;
     };
-    installEventHandlers: ({ handleError, handleRemoteUserEnter, handleRemoteAudioAvailable, handleRemoteUserExit, handleRemoteVideoAvailable }: {
-        handleError: import("../../../../shared/types").AnyFn;
-        handleRemoteUserEnter: import("../../../../shared/types").AnyFn;
-        handleRemoteAudioAvailable: import("../../../../shared/types").AnyFn;
-        handleRemoteUserExit: import("../../../../shared/types").AnyFn;
-        handleRemoteVideoAvailable: import("../../../../shared/types").AnyFn;
-    }) => void;
-    uninstallEventHandlers: ({ handleError, handleRemoteUserEnter, handleRemoteAudioAvailable, handleRemoteUserExit, handleRemoteVideoAvailable }: {
-        handleError: import("../../../../shared/types").AnyFn;
-        handleRemoteUserEnter: import("../../../../shared/types").AnyFn;
-        handleRemoteAudioAvailable: import("../../../../shared/types").AnyFn;
-        handleRemoteUserExit: import("../../../../shared/types").AnyFn;
-        handleRemoteVideoAvailable: import("../../../../shared/types").AnyFn;
-    }) => void;
-    videoRef: import("vue").Ref<any>;
-    selfVideoRef: import("vue").Ref<any>;
+    installEventHandlers: (handlers: import("../hooks").VideoEventHandlers) => void;
+    uninstallEventHandlers: (handlers: import("../hooks").VideoEventHandlers) => void;
+    enterRoom: () => Promise<boolean>;
+    exitRoom: () => Promise<void>;
+    startLocalMedia: (selfVideoRef?: HTMLElement | undefined) => Promise<void>;
+    MAIN_STREAM_TYPE: any;
+    videoRef: import("vue").Ref<HTMLElement | undefined>;
+    selfVideoRef: import("vue").Ref<HTMLElement | undefined>;
     isConnect: import("vue").Ref<boolean>;
     timeout: any;
     info: import("vue").ComputedRef<{
@@ -79,10 +92,10 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleEnter: () => Promise<void>;
     handleFinish: () => void;
     handleExit: () => Promise<void>;
-    handleRemoteVideoAvailable: (event: any) => Promise<void>;
-    handleRemoteAudioAvailable: (event: any) => void;
-    handleRemoteUserEnter: () => void;
-    handleRemoteUserExit: (event: any) => void;
+    handleRemoteVideoAvailable: (event: TRTCEvent) => Promise<void>;
+    handleRemoteAudioAvailable: (event: TRTCEvent) => void;
+    handleRemoteUserEnter: (event: TRTCEvent) => void;
+    handleRemoteUserExit: (event: TRTCEvent) => void;
     handleError: (error: any) => void;
     NButton: any;
     NAvatar: any;

package/es/components/iho-chat/src/components/Video.vue2.js

@@ -15,7 +15,6 @@ import '../../../../shared/hooks/useScrollLoading.js';
 import 'stompjs';
 import 'sockjs-client/dist/sockjs.min.js';
 import { useVideo } from '../hooks/useVideo.js';
-import TRTC from 'trtc-sdk-v5';
 
 const _hoisted_1 = {
   class: "video-wrapper"
@@ -76,20 +75,25 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const {
       sendMessage,
       state,
-      trtcProxy,
       trtc,
       timing,
       voiceClose,
       isAudio,
       isCall,
       startTimer,
-      resetTimer,
       toggleAudio,
       messageTypeText,
       time,
       installEventHandlers,
-      uninstallEventHandlers
-    } = useVideo();
+      uninstallEventHandlers,
+      enterRoom,
+      exitRoom,
+      startLocalMedia,
+      MAIN_STREAM_TYPE
+    } = useVideo({
+      isMultiple: false,
+      enableRetry: false
+    });
     const videoRef = ref();
     const selfVideoRef = ref();
     const isConnect = ref(false);
@@ -150,20 +154,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     async function handleEnter() {
-      const checkResult = await TRTC.isSupported();
-      if (!checkResult.result || !checkResult.detail.isH264EncodeSupported || !checkResult.detail.isH264DecodeSupported) {
-        console.log("checkResult :>> ", checkResult);
+      const success = await enterRoom();
+      if (!success) {
         state.showVideo = false;
         return;
       }
       try {
-        await trtc.enterRoom({
-          strRoomId: state.currentAVMsg.strRoomId,
-          sdkAppId: parseInt(state.userInfo.sdkAppID),
-          userId: state.userInfo.id,
-          userSig: state.userInfo.userSig,
-          proxy: trtcProxy.value
-        });
         if (!isCall.value) {
           isConnect.value = true;
           startTimer();
@@ -175,15 +171,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           handleRemoteUserExit,
           handleRemoteVideoAvailable
         });
-        await trtc.startLocalAudio();
-        if (isAudio.value)
-          return;
-        await trtc.startLocalVideo({
-          view: selfVideoRef.value
-        });
+        await startLocalMedia(selfVideoRef.value);
       } catch (error) {
-        console.log("error :>> ", error);
-        $message.error(error);
+        console.error("Error setting up single video call:", error);
+        $message.error("\u8BBE\u7F6E\u89C6\u9891\u901A\u8BDD\u5931\u8D25");
         state.showVideo = false;
       }
     }
@@ -204,13 +195,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           handleRemoteUserExit,
           handleRemoteVideoAvailable
         });
-        await trtc.exitRoom();
-        await trtc.stopLocalAudio();
-        if (isAudio.value)
-          return;
-        await trtc.stopLocalVideo();
+        await exitRoom();
       } catch (error) {
-        console.log("error :>> ", error);
+        console.error("Error during video exit:", error);
       }
     }
     async function handleRemoteVideoAvailable(event) {
@@ -219,27 +206,35 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         streamType
       } = event;
       try {
-        await trtc.startRemoteVideo({
-          userId,
-          streamType,
-          view: videoRef.value
-        });
+        if (streamType === MAIN_STREAM_TYPE && videoRef.value) {
+          await trtc.startRemoteVideo({
+            userId,
+            streamType,
+            view: videoRef.value
+          });
+          console.log("Remote video rendered for user:", userId);
+        }
       } catch (error) {
-        console.log("error :>> ", error);
+        console.error("Error rendering remote video:", error);
       }
     }
     function handleRemoteAudioAvailable(event) {
+      console.log("Remote audio available:", event.userId);
     }
-    function handleRemoteUserEnter() {
-      isConnect.value = true;
-      startTimer();
+    function handleRemoteUserEnter(event) {
+      console.log("Remote user entered:", event.userId);
+      if (isCall.value) {
+        isConnect.value = true;
+        startTimer();
+      }
     }
     function handleRemoteUserExit(event) {
-      console.log("event :>> \u5BF9\u65B9\u5DF2\u6302\u65AD", event);
+      console.log("Remote user exited:", event.userId);
       handleExit();
     }
     function handleError(error) {
-      console.log("error :>> ", error);
+      console.error("TRTC error in single video:", error);
+      $message.error("\u89C6\u9891\u901A\u8BDD\u51FA\u73B0\u9519\u8BEF");
       state.showVideo = false;
     }
     watch(() => status.value, (value) => {

package/es/components/iho-chat/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useData';
 export * from './useWebSocket';
 export * from './useVideo';
+export * from './useDraggable';

package/es/components/iho-chat/src/hooks/index.js

@@ -1,3 +1,4 @@
 export { InjectionIChatData, initData, useData } from './useData.js';
 export { useWebSocket } from './useWebSocket.js';
 export { useVideo } from './useVideo.js';
+export { useDraggable } from './useDraggable.js';

package/es/components/iho-chat/src/hooks/useData.d.ts

@@ -1,4 +1,5 @@
 import { InjectionKey } from 'vue';
+import { MsgListItem } from '../types';
 import { ChatSock } from '../utils/chatSock';
 import { AnyObject } from '../../../../shared/types';
 export declare const InjectionIChatData: InjectionKey<ReturnType<typeof initData>>;
@@ -12,7 +13,30 @@ export declare function initData(props: AnyObject, emit: (event: 'template-click
         currentSessionItem: AnyObject;
         id: string;
         userInfo: AnyObject;
-        msgList: AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: AnyObject;
         isAppendMsg: boolean;
         sessionList: AnyObject[];
@@ -40,7 +64,7 @@ export declare function initData(props: AnyObject, emit: (event: 'template-click
     isGroupChat: import("vue").ComputedRef<boolean>;
     isGroupLeader: import("vue").ComputedRef<boolean>;
     isEnded: import("vue").ComputedRef<boolean>;
-    setMsgList: (list?: AnyObject[]) => void;
+    setMsgList: (list?: AnyObject[] | MsgListItem) => void;
     sendMessage: (message: {
         chatType?: string;
         content: AnyObject;
@@ -75,7 +99,30 @@ export declare const useData: () => {
         currentSessionItem: AnyObject;
         id: string;
         userInfo: AnyObject;
-        msgList: AnyObject[];
+        msgList: {
+            [x: string]: any;
+            id: string;
+            sessionKey: string;
+            content: {
+                [x: string]: any;
+                chatMessageType: string;
+                msg: string;
+                referenceContent?: any;
+                forwardMessageList?: AnyObject[] | undefined;
+                messageTemplate?: any;
+                messageTemplateData?: any;
+                fileUrl?: string | undefined;
+                avStatus?: string | undefined;
+            };
+            senderName: string;
+            sendTime: string;
+            sender: string;
+            status: string;
+            senderAvatar: string;
+            __content: string;
+            __time?: string | undefined;
+            __sendTime?: string | undefined;
+        }[];
         currentMsg: AnyObject;
         isAppendMsg: boolean;
         sessionList: AnyObject[];
@@ -103,7 +150,7 @@ export declare const useData: () => {
     isGroupChat: import("vue").ComputedRef<boolean>;
     isGroupLeader: import("vue").ComputedRef<boolean>;
     isEnded: import("vue").ComputedRef<boolean>;
-    setMsgList: (list?: AnyObject[]) => void;
+    setMsgList: (list?: AnyObject[] | MsgListItem) => void;
     sendMessage: (message: {
         chatType?: string;
         content: AnyObject;

package/es/components/iho-chat/src/hooks/useData.js

@@ -1,9 +1,9 @@
 import { ref, reactive, computed, watch, toRef, inject, toRaw } from 'vue';
 import { openSessionApi, updateStatusApi, groupUserApi } from '../api/index.js';
 import { promiseTimeout, useIntervalFn } from '@vueuse/core';
-import { isGroup, listSort, formatTime, transformMessage, getFileSize, $message, simplifyMessage } from '../utils/index.js';
+import { isGroup, listSort, formatTime, transformMessage, $message, simplifyMessage } from '../utils/index.js';
 import { cloneDeep, remove, isArray, uniqBy } from 'lodash-es';
-import { STATUS, MESSAGE_TYPE, CHAT_TYPE } from '../constants/index.js';
+import { STATUS, CHAT_TYPE, MESSAGE_TYPE } from '../constants/index.js';
 import { useTheme } from '../../../../shared/hooks/useTheme.js';
 import 'date-fns';
 import '@vue/shared';
@@ -139,11 +139,6 @@ function initData(props, emit) {
         __content: transformMessage(item.content),
         __sendTime: formatTime(item.sendTime).recordTime
       });
-      if (item.content.chatMessageType === MESSAGE_TYPE.FILE && !item.__size) {
-        getFileSize(item.content.fileUrl).then((size) => {
-          item.__size = size;
-        });
-      }
     });
     if (needUpdateTime()) {
       resume();

package/es/components/iho-chat/src/hooks/useDraggable.d.ts

@@ -0,0 +1,25 @@
+import { type Ref } from 'vue';
+interface Position {
+    x: number;
+    y: number;
+}
+type PositionStr = 'center' | 'top-right';
+interface UseDraggableOptions {
+    handle?: Ref<HTMLElement | null>;
+    initialPosition?: PositionStr;
+    onDragStart?: (position: Position) => void;
+    onDrag?: (position: Position) => void;
+    onDragEnd?: (position: Position) => void;
+}
+export declare function useDraggable(target: Ref<HTMLElement | null>, options?: UseDraggableOptions): {
+    style: Ref<{
+        left: string;
+        top: string;
+    }>;
+    position: {
+        x: Ref<number>;
+        y: Ref<number>;
+    };
+    changePosition: (position?: PositionStr) => void;
+};
+export {};

package/es/components/iho-chat/src/hooks/useDraggable.js

@@ -0,0 +1,160 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+function useDraggable(target, options = {}) {
+  const x = ref(0);
+  const y = ref(0);
+  const isDragging = ref(false);
+  const startPos = ref({
+    x: 0,
+    y: 0
+  });
+  const startMousePos = ref({
+    x: 0,
+    y: 0
+  });
+  const style = ref({
+    left: `${x.value}px`,
+    top: `${y.value}px`
+  });
+  const updatePosition = () => {
+    style.value = {
+      left: `${x.value}px`,
+      top: `${y.value}px`
+    };
+  };
+  const centerElement = () => {
+    if (!target.value)
+      return;
+    const {
+      width: width1,
+      height: height1
+    } = target.value.getBoundingClientRect();
+    const {
+      width: width2,
+      height: height2
+    } = getHiddenElementRect(target.value);
+    const width = width1 || width2 || 0;
+    const height = height1 || height2 || 0;
+    x.value = window.innerWidth / 2 - width / 2;
+    y.value = window.innerHeight / 2 - height / 2;
+    updatePosition();
+  };
+  const topRightElement = () => {
+    if (!target.value)
+      return;
+    const {
+      width: width1
+    } = target.value.getBoundingClientRect();
+    const {
+      width: width2
+    } = getHiddenElementRect(target.value);
+    const width = width1 || width2 || 0;
+    x.value = window.innerWidth - width - 20;
+    y.value = 20;
+    updatePosition();
+  };
+  const handlePosition = () => {
+    changePosition(options.initialPosition);
+  };
+  const changePosition = (position) => {
+    if (!position)
+      return;
+    if (position === "center") {
+      centerElement();
+    } else if (position === "top-right") {
+      topRightElement();
+    }
+  };
+  const clamp = (val, min, max) => Math.max(min, Math.min(val, max));
+  const onMouseDown = (e) => {
+    var _a;
+    if (!target.value)
+      return;
+    isDragging.value = true;
+    startMousePos.value = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    startPos.value = {
+      x: x.value,
+      y: y.value
+    };
+    (_a = options.onDragStart) == null ? void 0 : _a.call(options, {
+      x: x.value,
+      y: y.value
+    });
+    e.preventDefault();
+    document.body.style.userSelect = "none";
+  };
+  const onMouseMove = (e) => {
+    var _a;
+    if (!isDragging.value || !target.value)
+      return;
+    const dx = e.clientX - startMousePos.value.x;
+    const dy = e.clientY - startMousePos.value.y;
+    const {
+      width,
+      height
+    } = target.value.getBoundingClientRect();
+    const minX = 0;
+    const minY = 0;
+    const maxX = window.innerWidth - width;
+    const maxY = window.innerHeight - height;
+    x.value = clamp(startPos.value.x + dx, minX, maxX);
+    y.value = clamp(startPos.value.y + dy, minY, maxY);
+    updatePosition();
+    (_a = options.onDrag) == null ? void 0 : _a.call(options, {
+      x: x.value,
+      y: y.value
+    });
+  };
+  const onMouseUp = () => {
+    var _a;
+    if (!isDragging.value)
+      return;
+    isDragging.value = false;
+    document.body.style.userSelect = "";
+    (_a = options.onDragEnd) == null ? void 0 : _a.call(options, {
+      x: x.value,
+      y: y.value
+    });
+  };
+  onMounted(() => {
+    var _a, _b;
+    const handle = (_b = (_a = options.handle) == null ? void 0 : _a.value) != null ? _b : target.value;
+    if (!handle)
+      return;
+    handlePosition();
+    handle.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    window.addEventListener("resize", handlePosition);
+  });
+  onBeforeUnmount(() => {
+    var _a, _b;
+    const handle = (_b = (_a = options.handle) == null ? void 0 : _a.value) != null ? _b : target.value;
+    if (!handle)
+      return;
+    handle.removeEventListener("mousedown", onMouseDown);
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    window.removeEventListener("resize", handlePosition);
+  });
+  return {
+    style,
+    position: {
+      x,
+      y
+    },
+    changePosition
+  };
+}
+function getHiddenElementRect(element) {
+  const styles = window.getComputedStyle(element);
+  return {
+    width: parseFloat(styles.width),
+    height: parseFloat(styles.height)
+  };
+}
+
+export { useDraggable };