react-dialogger 1.1.141 → 1.1.143

package/components/DialogContent.js

@@ -64,7 +64,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_draggable_1 = __importDefault(require("react-draggable"));
 var _helpers_1 = require("../helpers/index.js");
 var React = __importStar(require("react"));
-var _icons_1 = require("../icons/index.js");
 var notistack_1 = require("notistack");
 var _1 = require("./");
 var react_1 = require("react");
@@ -73,6 +72,7 @@ var _context_1 = require("../context/index.js");
 var appLogger_1 = require("../helpers/appLogger");
 var PlusIcon_1 = __importDefault(require("../icons/PlusIcon"));
 var MinusIcon_1 = __importDefault(require("../icons/MinusIcon"));
+var go_1 = require("react-icons/go");
 var DialogContent = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var firstUpdate = React.useRef(true);
@@ -81,9 +81,10 @@ var DialogContent = function (props) {
     var baseOptions = dialogOptions.base;
     var _l = React.useState(false), fullscreenMode = _l[0], setFullscreenMode = _l[1];
     var _m = React.useState(null), rect = _m[0], setRect = _m[1];
+    var _o = React.useState(!!(baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.resizeable)), showResizeHint = _o[0], setShowResizeHint = _o[1];
     var bounds = ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
     var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
-    var _o = React.useState(((_b = bounds === null || bounds === void 0 ? void 0 : bounds.scale) !== null && _b !== void 0 ? _b : ((_c = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _c !== void 0 ? _c : 1))), zoom = _o[0], setZoom = _o[1];
+    var _p = React.useState(((_b = bounds === null || bounds === void 0 ? void 0 : bounds.scale) !== null && _b !== void 0 ? _b : ((_c = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _c !== void 0 ? _c : 1))), zoom = _p[0], setZoom = _p[1];
     var positionSelector = function () {
         var _a;
         var _b;
@@ -123,6 +124,13 @@ var DialogContent = function (props) {
             (0, jumper_animate_1.jumperAnimate)(dialogRef.current);
         }
     }, []);
+    // Resize hint — auto-hide after animation completes (3.2s lifecycle)
+    (0, react_1.useEffect)(function () {
+        if (!showResizeHint)
+            return;
+        var t = setTimeout(function () { return setShowResizeHint(false); }, 3200);
+        return function () { return clearTimeout(t); };
+    }, []);
     // Set Rect
     (0, react_1.useEffect)(function () {
         setRect(positionSelector());
@@ -220,6 +228,6 @@ var DialogContent = function (props) {
                                                 setTimeout(function () {
                                                     event.clientX;
                                                 });
-                                            }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-n", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('n') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-s", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('s') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-e", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('e') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-w", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('w') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-nw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('nw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-ne", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('ne') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-sw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('sw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-se", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('se'), children: (0, jsx_runtime_1.jsx)(_icons_1.ResizeIcon, { color: '#286e94' }) })] })] }) }) });
+                                            }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable && showResizeHint) && ((0, jsx_runtime_1.jsxs)("div", { className: "resize-hint-overlay", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("div", { className: "rh rh-n", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowUp, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-ne", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowUpRight, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-e", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowRight, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-se", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowDownRight, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-s", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-sw", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowDownLeft, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-w", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowLeft, { size: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: "rh rh-nw", children: (0, jsx_runtime_1.jsx)(go_1.GoArrowUpLeft, { size: 16 }) })] })), (baseOptions.resizeable) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-n", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('n') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-s", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('s') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-e", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('e') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-w", style: { zIndex: parseInt(domZIndex) + 1 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('w') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-nw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('nw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-ne", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('ne') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-sw", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('sw') }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle resize-se", style: { zIndex: parseInt(domZIndex) + 2 }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown('se') })] })] }) }) });
 };
 exports.DialogContent = DialogContent;

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,15 +61,23 @@ 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;
-            _this._container.current.classList.add('no-select-on-resize');
+            _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';
+            container.classList.add('no-select-on-resize');
             _this.init();
         }; };
         this.resizeHandleMouseMove = function (e) {
@@ -87,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());
             }
         };
@@ -147,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.141",
+  "version": "1.1.143",
   "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",
@@ -12,7 +12,8 @@
     "notistack": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6"
+    "react-draggable": "^4.4.6",
+    "react-icons": "^5.6.0"
   },
   "maintainers": [
     {

package/styles/dialog.css

@@ -322,6 +322,64 @@
   flex: 0;
   overflow: hidden;
 }
+.dialog-main .resize-hint-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 500;
+  animation: resizeHintFade 3.2s ease-in-out forwards;
+}
+.dialog-main .rh {
+  position: absolute;
+  pointer-events: none;
+}
+.dialog-main .rh.rh-n {
+  top: 8px;
+  left: 50%;
+  translate: -50% 0;
+  animation: rhBounce-n 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-s {
+  bottom: 8px;
+  left: 50%;
+  translate: -50% 0;
+  animation: rhBounce-s 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-e {
+  right: 8px;
+  top: 50%;
+  translate: 0 -50%;
+  animation: rhBounce-e 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-w {
+  left: 8px;
+  top: 50%;
+  translate: 0 -50%;
+  animation: rhBounce-w 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-nw {
+  top: 8px;
+  left: 8px;
+  animation: rhBounce-nw 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-ne {
+  top: 8px;
+  right: 8px;
+  animation: rhBounce-ne 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-sw {
+  bottom: 8px;
+  left: 8px;
+  animation: rhBounce-sw 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh.rh-se {
+  bottom: 8px;
+  right: 8px;
+  animation: rhBounce-se 0.65s ease-in-out 0.5s 3 alternate;
+}
+.dialog-main .rh svg {
+  color: rgba(40, 110, 148, 0.85);
+}
 .dialog-main .resize-handle {
   position: absolute;
   user-select: none;
@@ -391,6 +449,60 @@
   bottom: 0;
 }
 
+@keyframes resizeHintFade {
+  0% {
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  78% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes rhBounce-n {
+  to {
+    transform: translateY(-5px);
+  }
+}
+@keyframes rhBounce-s {
+  to {
+    transform: translateY(5px);
+  }
+}
+@keyframes rhBounce-e {
+  to {
+    transform: translateX(5px);
+  }
+}
+@keyframes rhBounce-w {
+  to {
+    transform: translateX(-5px);
+  }
+}
+@keyframes rhBounce-nw {
+  to {
+    transform: translate(-4px, -4px);
+  }
+}
+@keyframes rhBounce-ne {
+  to {
+    transform: translate(4px, -4px);
+  }
+}
+@keyframes rhBounce-sw {
+  to {
+    transform: translate(-4px, 4px);
+  }
+}
+@keyframes rhBounce-se {
+  to {
+    transform: translate(4px, 4px);
+  }
+}
 .fullscreen {
   -webkit-transform: inherit !important;
   -moz-transform: inherit !important;