fix(guDragResize): watch transform info update node transform

Gaius-98 · Jul 23, 2024 · 0d29189 · 0d29189
1 parent c800a75
commit 0d29189
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "gaius-utils",
     "private": false,
-    "version": "1.1.3",
+    "version": "1.1.4",
     "author": {
         "name": "WangGuoshuai",
         "email": "2388838628@qq.com"

diff --git a/packages/components/GuDragResizePlus.vue b/packages/components/GuDragResizePlus.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, ref, onMounted, watch } from "vue";
+import { toRefs, ref, onMounted, watch, watchEffect } from "vue";
 import { v4 as uuid } from "uuid";
 import { throttle } from "../utils";
 
@@ -225,6 +225,14 @@ const removeTransform = (cssString: string) => {
 const handleBoundaries = (info: DragResizeNodeInfo) => {
   const { height, width, left, top } = info;
   const parentDom = guDragResizePlusRef.value!.parentElement!;
+  if (!parentDom) {
+    return {
+      height,
+      width,
+      left,
+      top,
+    };
+  }
   const pHeight = parentDom.offsetHeight;
   const pWidth = parentDom.offsetWidth;
   if (height < minh.value) {
@@ -258,6 +266,17 @@ const onUpdateNodeTransform = () => {
     nodeKey: nodeKey.value,
   });
 };
+watch(
+  () => [left.value, width.value, height.value, top.value],
+  () => {
+    onTransformNode({
+      width: width.value,
+      height: height.value,
+      left: left.value,
+      top: top.value,
+    });
+  }
+);
 onMounted(() => {
   onTransformNode({
     width: width.value,