From 82cd8cd8f84bbb4ffe717b760f8bc332fb3071bb Mon Sep 17 00:00:00 2001
From: Tomoaki Higa <tomoaki.higa@create-sekai.com>
Date: Sun, 5 Oct 2025 12:38:21 +0900
Subject: [PATCH 1/2] fix: add ResizeObserver to handle parent size changes

---
 src/components/vue-draggable-resizable.vue | 32 +++++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/vue-draggable-resizable.vue b/src/components/vue-draggable-resizable.vue
index 465a3d2..b2390f2 100644
--- a/src/components/vue-draggable-resizable.vue
+++ b/src/components/vue-draggable-resizable.vue
@@ -249,6 +249,7 @@ export default {
 
       parentWidth: null,
       parentHeight: null,
+      parentResizeObserver: null,
 
       handle: null,
       enabled: this.active,
@@ -296,6 +297,13 @@ export default {
     addEvent(document.documentElement, 'touchend touchcancel', this.deselect)
 
     addEvent(window, 'resize', this.checkParentSize)
+
+    if (this.parent && this.$el.parentNode) {
+      this.parentResizeObserver = new ResizeObserver(() => {
+        this.checkParentSize()
+      })
+      this.parentResizeObserver.observe(this.$el.parentNode)
+    }
   },
   beforeUnmount: function () {
     removeEvent(document.documentElement, 'mousedown', this.deselect)
@@ -306,6 +314,11 @@ export default {
     removeEvent(document.documentElement, 'touchend touchcancel', this.deselect)
 
     removeEvent(window, 'resize', this.checkParentSize)
+
+    if (this.parentResizeObserver) {
+      this.parentResizeObserver.disconnect()
+      this.parentResizeObserver = null
+    }
   },
 
   methods: {
@@ -327,10 +340,21 @@ export default {
       if (this.parent) {
         const [newParentWidth, newParentHeight] = this.getParentSize()
 
-        this.parentWidth = newParentWidth
-        this.parentHeight = newParentHeight
-        this.right = this.parentWidth - this.width - this.left
-        this.bottom = this.parentHeight - this.height - this.top
+        const parentWidthChanged = this.parentWidth !== newParentWidth
+        const parentHeightChanged = this.parentHeight !== newParentHeight
+
+        if (parentWidthChanged || parentHeightChanged) {
+          this.parentWidth = newParentWidth
+          this.parentHeight = newParentHeight
+          this.right = this.parentWidth - this.width - this.left
+          this.bottom = this.parentHeight - this.height - this.top
+
+          if (this.resizing) {
+            this.bounds = this.calcResizeLimits()
+          } else if (this.dragging) {
+            this.bounds = this.calcDragLimits()
+          }
+        }
       }
     },
     getParentSize () {

From 090e1785c4956225862658b540be07c8e09b45d9 Mon Sep 17 00:00:00 2001
From: Tomoaki Higa <tomoaki.higa@create-sekai.com>
Date: Sun, 5 Oct 2025 12:57:02 +0900
Subject: [PATCH 2/2] fix: adjust dimensions on parent size changes to prevent
 overflow

---
 src/components/vue-draggable-resizable.vue | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/vue-draggable-resizable.vue b/src/components/vue-draggable-resizable.vue
index b2390f2..a12f020 100644
--- a/src/components/vue-draggable-resizable.vue
+++ b/src/components/vue-draggable-resizable.vue
@@ -344,8 +344,34 @@ export default {
         const parentHeightChanged = this.parentHeight !== newParentHeight
 
         if (parentWidthChanged || parentHeightChanged) {
+          const oldParentWidth = this.parentWidth
+          const oldParentHeight = this.parentHeight
+
           this.parentWidth = newParentWidth
           this.parentHeight = newParentHeight
+
+          if (parentWidthChanged && newParentWidth < oldParentWidth) {
+            const overflow = (this.left + this.width) - newParentWidth
+            if (overflow > 0) {
+              this.left = Math.max(0, this.left - overflow)
+              const remainingOverflow = (this.left + this.width) - newParentWidth
+              if (remainingOverflow > 0) {
+                this.width = Math.max(this.minWidth, this.width - remainingOverflow)
+              }
+            }
+          }
+
+          if (parentHeightChanged && newParentHeight < oldParentHeight) {
+            const overflow = (this.top + this.height) - newParentHeight
+            if (overflow > 0) {
+              this.top = Math.max(0, this.top - overflow)
+              const remainingOverflow = (this.top + this.height) - newParentHeight
+              if (remainingOverflow > 0) {
+                this.height = Math.max(this.minHeight, this.height - remainingOverflow)
+              }
+            }
+          }
+
           this.right = this.parentWidth - this.width - this.left
           this.bottom = this.parentHeight - this.height - this.top