qm-dialog resize

src/components/QmDialog.vue

@@ -4,7 +4,7 @@
       <header
         ref="mouseHandler"
         class="tw-flex tw-place-content-between"
-        @mousedown="handleMouseDown"
+        @mousedown="handleDragMouseDown"
       >
         <div class="tw-text-2xl tw-cursor-move">{{ title }}</div>
         <a-button shape="circle" @click="close">
@@ -15,6 +15,12 @@
       <div class="tw-m-1">
         <slot></slot>
       </div>
+
+      <div
+        ref="resizeHandler"
+        class="resize-handler"
+        @mousedown="handleResizeMouseDown"
+      ></div>
     </div>
   </teleport>
 </template>
@@ -29,60 +35,101 @@ export default defineComponent({
   props: {
     title: { type: String, default: "" },
     top: { type: String, default: "10%" },
+    width: { type: String, default: "30%" },
+    height: { type: String, default: "30%" },
   },
-  setup({ top }) {
+  setup({ top, width, height }) {
     const close = () => {
       store.setting.uiSetting["answer.paper.modal"] = false;
     };
 
     const positionStyle = reactive({
-      top: top,
+      top,
       left: "10%",
+      width,
+      height,
     });
 
     const mouseHandler = ref((null as unknown) as HTMLHeadElement);
+    const resizeHandler = ref((null as unknown) as HTMLDivElement);
 
     const mousePosition = {
       offsetX: 0,
       offsetY: 0,
     };
 
-    const handleMouseDown = (e: MouseEvent) => {
-      mouseHandler.value.addEventListener("mousemove", handleMouseMove);
-      mouseHandler.value.addEventListener("mouseup", handleMouseUp);
+    const handleDragMouseDown = (e: MouseEvent) => {
+      mouseHandler.value.addEventListener("mousemove", handleDragMouseMove);
+      mouseHandler.value.addEventListener("mouseup", handleDragMouseUp);
       // console.log(e);
       const { offsetX, offsetY } = e;
       mousePosition.offsetX = offsetX;
       mousePosition.offsetY = offsetY;
     };
-    const handleMouseMove = (e: MouseEvent) => {
-      const { pageX, pageY, clientX, clientY } = e;
+    const handleDragMouseMove = (e: MouseEvent) => {
+      const { clientX, clientY } = e;
       const windowWidth = window.innerWidth;
       const windowHeight = window.innerHeight;
       const newXRatio = (clientX - mousePosition.offsetX) / windowWidth;
       const newYRatio = (clientY - mousePosition.offsetY) / windowHeight;
       // console.log({
       //   offsetX: mousePosition.offsetX,
-      //   pageX,
       //   offsetY: mousePosition.offsetY,
-      //   pageY,
       //   newYRatio,
       //   newXRatio,
       // });
       positionStyle.top = newYRatio * 100 + "%";
       positionStyle.left = newXRatio * 100 + "%";
     };
-    const handleMouseUp = (e: MouseEvent) => {
-      mouseHandler.value.removeEventListener("mousemove", handleMouseMove);
-      mouseHandler.value.removeEventListener("mouseup", handleMouseUp);
+    const handleDragMouseUp = (e: MouseEvent) => {
+      mousePosition.offsetX = 0;
+      mousePosition.offsetY = 0;
+      mouseHandler.value.removeEventListener("mousemove", handleDragMouseMove);
+      mouseHandler.value.removeEventListener("mouseup", handleDragMouseUp);
+    };
+
+    const handleResizeMouseDown = (e: MouseEvent) => {
+      resizeHandler.value.addEventListener("mousemove", handleResizeMouseMove);
+      resizeHandler.value.addEventListener("mouseup", handleResizeMouseUp);
+      resizeHandler.value.addEventListener("mouseout", handleResizeMouseOut);
+    };
+    const handleResizeMouseMove = (e: MouseEvent) => {
+      // console.log(e);
+      // console.log("mouse move");
+      const dialog = e.target.parentElement as HTMLDivElement;
+      // console.log(dialog);
+      const { clientX, clientY } = e;
+      const newXRatio =
+        parseFloat(getComputedStyle(dialog).width) + e.movementX;
+      const newYRatio =
+        parseFloat(getComputedStyle(dialog).height) + e.movementY;
+      positionStyle.width = newXRatio + "px";
+      positionStyle.height = newYRatio + "px";
+    };
+    const handleResizeMouseUp = (e: MouseEvent) => {
+      resizeHandler.value.removeEventListener(
+        "mousemove",
+        handleResizeMouseMove
+      );
+      resizeHandler.value.removeEventListener("mouseup", handleResizeMouseUp);
+      resizeHandler.value.removeEventListener("mouseout", handleResizeMouseOut);
+    };
+    const handleResizeMouseOut = (e: MouseEvent) => {
+      resizeHandler.value.removeEventListener(
+        "mousemove",
+        handleResizeMouseMove
+      );
+      resizeHandler.value.removeEventListener("mouseup", handleResizeMouseUp);
+      resizeHandler.value.removeEventListener("mouseout", handleResizeMouseOut);
     };
+
     return {
       close,
       positionStyle,
       mouseHandler,
-      handleMouseDown,
-      handleMouseMove,
-      handleMouseUp,
+      resizeHandler,
+      handleDragMouseDown,
+      handleResizeMouseDown,
     };
   },
 });
@@ -97,4 +144,12 @@ export default defineComponent({
   border: 1px solid grey;
   border-radius: 5px;
 }
+.resize-handler {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+  height: 100px;
+  cursor: nwse-resize;
+}
 </style>