react-dialogger 1.1.142 → 1.1.145

package/components/DialogContent.js

@@ -164,7 +164,7 @@ var DialogContent = function (props) {
     (0, react_1.useEffect)(function () {
         var _a, _b;
         dialogOptions.scale = zoom;
-        if (((_a = dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) && ((_b = dialogOptions.base) === null || _b === void 0 ? void 0 : _b.id)) {
+        if (((_a = dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) && ((_b = dialogOptions.base) === null || _b === void 0 ? void 0 : _b.id) && bounds) {
             // const gb = getDialogBounds(dialogOptions.base.id)
             (0, _helpers_1.setDialogBounds)(dialogOptions.base.id, __assign(__assign({}, bounds), { scale: zoom }), dialogRef);
         }

package/helpers/Resizeable.d.ts

@@ -20,19 +20,14 @@ declare class Resizeable {
     private _startVisualHeight;
     private _startCssLeft;
     private _startCssTop;
+    private _anchorRight;
+    private _anchorBottom;
+    private _translateX;
+    private _translateY;
     constructor();
     setContainer: (container: React.RefObject<HTMLDivElement>, options: DialogOptionsType) => void;
-    /**
-     * Read the Draggable component's current CSS transform translation.
-     * react-draggable applies transform: translate(x, y) to the element.
-     * We need this to correctly compute absolute CSS position from visual position.
-     */
     private getDraggableTranslate;
     private resizeHandleMouseUp;
-    /**
-     * Returns a mousedown handler for the given resize direction.
-     * Captures start position and visual bounds so mousemove can compute deltas.
-     */
     resizeHandleMouseDown: (direction: ResizeDirection) => (e: React.MouseEvent) => void;
     resizeHandleMouseMove: (e: MouseEvent) => void;
     init: () => void;

package/helpers/Resizeable.js

@@ -20,7 +20,6 @@ var Resizeable = /** @class */ (function () {
         this.onResizeListener = function (callbackFn) {
             _this._onResizeListener = callbackFn;
         };
-        // Multi-direction resize state
         this._direction = 'se';
         this._startMouseX = 0;
         this._startMouseY = 0;
@@ -28,15 +27,14 @@ var Resizeable = /** @class */ (function () {
         this._startVisualHeight = 0;
         this._startCssLeft = 0;
         this._startCssTop = 0;
+        this._anchorRight = 0;
+        this._anchorBottom = 0;
+        this._translateX = 0;
+        this._translateY = 0;
         this.setContainer = function (container, options) {
             _this._container = container;
             _this._dialogOptions = options;
         };
-        /**
-         * Read the Draggable component's current CSS transform translation.
-         * react-draggable applies transform: translate(x, y) to the element.
-         * We need this to correctly compute absolute CSS position from visual position.
-         */
         this.getDraggableTranslate = function () {
             var _a;
             var el = (_a = _this._container) === null || _a === void 0 ? void 0 : _a.current;
@@ -56,10 +54,6 @@ var Resizeable = /** @class */ (function () {
             (0, appLogger_1.appLog)('resizeHandleMouseUp', container === null || container === void 0 ? void 0 : container.getBoundingClientRect().toJSON());
             (0, _helpers_1.setDialogBounds)(_this._dialogOptions.base.id, __assign(__assign({}, container === null || container === void 0 ? void 0 : container.getBoundingClientRect().toJSON()), { fullscreen: false }), _this._container);
         };
-        /**
-         * Returns a mousedown handler for the given resize direction.
-         * Captures start position and visual bounds so mousemove can compute deltas.
-         */
         this.resizeHandleMouseDown = function (direction) { return function (e) {
             e.preventDefault();
             e.stopPropagation();
@@ -67,17 +61,19 @@ var Resizeable = /** @class */ (function () {
             _this._isResizing = true;
             _this._startMouseX = e.clientX;
             _this._startMouseY = e.clientY;
-            var rect = _this._container.current.getBoundingClientRect();
+            var container = _this._container.current;
+            var rect = container.getBoundingClientRect();
             var translate = _this.getDraggableTranslate();
-            // Visual dimensions from getBoundingClientRect (screen pixels, zoom accounted)
             _this._startVisualWidth = rect.width;
             _this._startVisualHeight = rect.height;
-            // CSS position = visual position minus Draggable's transform offset
+            _this._translateX = translate.x;
+            _this._translateY = translate.y;
             _this._startCssLeft = rect.left - translate.x;
             _this._startCssTop = rect.top - translate.y;
-            // Pin absolute position immediately so justify-self / margin centering
-            // cannot shift the left/top edge while we resize from the right or bottom.
-            var container = _this._container.current;
+            _this._anchorRight = rect.right - translate.x;
+            _this._anchorBottom = rect.bottom - translate.y;
+            // Pin position so justify-self / margin centering cannot shift
+            // the left/top edge while resizing from the right or bottom.
             container.style.position = 'absolute';
             container.style.left = _this._startCssLeft + 'px';
             container.style.top = _this._startCssTop + 'px';
@@ -93,43 +89,35 @@ var Resizeable = /** @class */ (function () {
             var dx = e.clientX - _this._startMouseX;
             var dy = e.clientY - _this._startMouseY;
             var dir = _this._direction;
-            var MIN_SIZE = 100; // screen pixels
+            var MIN_SIZE = 100;
             var newVisualWidth = _this._startVisualWidth;
             var newVisualHeight = _this._startVisualHeight;
             var newCssLeft = _this._startCssLeft;
             var newCssTop = _this._startCssTop;
-            // East — grow/shrink from the right edge
-            if (dir.includes('e')) {
+            if (dir.includes('e'))
                 newVisualWidth = Math.max(MIN_SIZE, _this._startVisualWidth + dx);
-            }
-            // West — grow/shrink from the left edge, compensate position
-            if (dir.includes('w')) {
-                newVisualWidth = Math.max(MIN_SIZE, _this._startVisualWidth - dx);
-                // left edge moves by the amount width actually changed
-                newCssLeft = _this._startCssLeft + (_this._startVisualWidth - newVisualWidth);
-            }
-            // South — grow/shrink from the bottom edge
-            if (dir.includes('s')) {
+            if (dir.includes('s'))
                 newVisualHeight = Math.max(MIN_SIZE, _this._startVisualHeight + dy);
+            if (dir.includes('w')) {
+                newCssLeft = e.clientX - _this._translateX;
+                newVisualWidth = Math.max(MIN_SIZE, _this._anchorRight - newCssLeft);
+                newCssLeft = _this._anchorRight - newVisualWidth;
             }
-            // North — grow/shrink from the top edge, compensate position
             if (dir.includes('n')) {
-                newVisualHeight = Math.max(MIN_SIZE, _this._startVisualHeight - dy);
-                // top edge moves by the amount height actually changed, clamped to 0
-                newCssTop = Math.max(0, _this._startCssTop + (_this._startVisualHeight - newVisualHeight));
+                newCssTop = e.clientY - _this._translateY;
+                newVisualHeight = Math.max(MIN_SIZE, _this._anchorBottom - newCssTop);
+                newCssTop = _this._anchorBottom - newVisualHeight;
             }
-            // Apply size (divide by scale to get CSS pixels from visual pixels)
             container.style.width = (newVisualWidth / scale) + 'px';
             container.style.height = (newVisualHeight / scale) + 'px';
-            // Apply position for n/w directions
             if (dir.includes('w') || dir.includes('n')) {
                 container.style.position = 'absolute';
                 container.style.left = newCssLeft + 'px';
-                container.style.top = Math.max(0, newCssTop) + 'px';
+                container.style.top = newCssTop + 'px';
             }
             _this._width = newVisualWidth / scale;
             _this._height = newVisualHeight / scale;
-            if (typeof _this._onResizeListener === "function") {
+            if (typeof _this._onResizeListener === 'function') {
                 _this._onResizeListener(_this._width, _this._height, container.getBoundingClientRect());
             }
         };
@@ -153,26 +141,18 @@ var Resizeable = /** @class */ (function () {
         this._isResizing = false;
     }
     Object.defineProperty(Resizeable.prototype, "width", {
-        get: function () {
-            return this._width;
-        },
+        get: function () { return this._width; },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Resizeable.prototype, "height", {
-        get: function () {
-            return this._height;
-        },
+        get: function () { return this._height; },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(Resizeable.prototype, "isResizing", {
-        get: function () {
-            return this._isResizing;
-        },
-        set: function (value) {
-            this._isResizing = value;
-        },
+        get: function () { return this._isResizing; },
+        set: function (value) { this._isResizing = value; },
         enumerable: false,
         configurable: true
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.142",
+  "version": "1.1.145",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",

package/styles/dialog.css

@@ -327,7 +327,7 @@
   inset: 0;
   pointer-events: none;
   z-index: 500;
-  animation: resizeHintFade 3.2s ease-in-out forwards;
+  animation: resizeHintFade 5s ease-in-out forwards;
 }
 .dialog-main .rh {
   position: absolute;