Is It Possible To Set Bound Dynamically?

[msueping]

I Have A Question

Is it possible to set an initial boundary like "parent" to limit resizing, but, when dragging, change that bound to a bigger container?

I'm using react-rnd 10.3.7
My browser is Chrome Version 107.0.5304.122 (Official Build) (64-bit)
I could not find any reported issues that describe what I'm asking.

Description

I have several divs each with a class of "page" (dark blue solid border) and they are all contained within a single scrolling div (green dashed border). Within a given "page" div I have several components (one is shown with a pale blue border and yellow background), each with a bound prop set to 'parent' which limits their sizes to be entirely within the "page" boundary. This works perfectly.

What I'd like to do next is be able to drag any of these to other pages. This would require me to somehow break out of the current parent boundary so that it can be allowed to cross over to another page. The restriction that I have is that it cannot be dropped between pages (i.e., into the red zone between pages). Obviously the bound of "parent" is currently preventing this desired functionality, but, at the same time it is working to limit their sizes to be within the page. If I set the bound to be a class name for the scrolling container div, it will allow the dragging between pages, however, it can be dropped into the red zone and, more importantly, allows the sizes to overflow and even span pages which is not desirable.

Can this be done with a "dynamic" bound somehow? Any feedback and suggestions are greatly appreciated.

[branks]

This is the patch I used to achieve this. It adds a new prop called resizeBounds which will be used for resizing if it exists, otherwise it falls back to bounds

diff --git a/node_modules/react-rnd/lib/index.js b/node_modules/react-rnd/lib/index.js
index a6fbab2..437aa69 100644
--- a/node_modules/react-rnd/lib/index.js
+++ b/node_modules/react-rnd/lib/index.js
@@ -232,20 +232,20 @@ var Rnd = /** @class */ (function (_super) {
         this.setState({
             original: this.getDraggablePosition(),
         });
-        if (this.props.bounds) {
+        if ((this.props.resizeBounds ?? this.props.bounds)) {
             var parent_1 = this.getParent();
             var boundary = void 0;
-            if (this.props.bounds === "parent") {
+            if ((this.props.resizeBounds ?? this.props.bounds) === "parent") {
                 boundary = parent_1;
             }
-            else if (this.props.bounds === "body") {
+            else if ((this.props.resizeBounds ?? this.props.bounds) === "body") {
                 boundary = document.body;
             }
-            else if (this.props.bounds === "window") {
+            else if ((this.props.resizeBounds ?? this.props.bounds) === "window") {
                 boundary = window;
             }
             else {
-                boundary = document.querySelector(this.props.bounds);
+                boundary = document.querySelector((this.props.resizeBounds ?? this.props.bounds));
             }
             var self_1 = this.getSelfElement();
             if (self_1 instanceof Element &&
@@ -274,7 +274,7 @@ var Rnd = /** @class */ (function (_super) {
                 var selfRect = self_1.getBoundingClientRect();
                 var selfLeft = selfRect.left;
                 var selfTop = selfRect.top;
-                var boundaryRect = this.props.bounds === "window" ? { left: 0, top: 0 } : boundary.getBoundingClientRect();
+                var boundaryRect = (this.props.resizeBounds ?? this.props.bounds) === "window" ? { left: 0, top: 0 } : boundary.getBoundingClientRect();
                 var boundaryLeft = boundaryRect.left;
                 var boundaryTop = boundaryRect.top;
                 var offsetWidth = this.getOffsetWidth(boundary);