react-dialogger 1.1.138 → 1.1.140

package/components/DialogContent.js

@@ -86,13 +86,14 @@ var DialogContent = function (props) {
     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 positionSelector = function () {
         var _a;
+        var _b;
         var dialogRectSelectors = { xKey: 'marginLeft', yKey: 'marginTop' };
         if (prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.isMultiple) {
             dialogRectSelectors = { xKey: 'left', yKey: 'top' };
         }
-        var _b = bounds !== null && bounds !== void 0 ? bounds : {}, fullscreen = _b.fullscreen, x = _b.x, y = _b.y, restBounds = __rest(_b, ["fullscreen", "x", "y"]);
+        var _c = bounds !== null && bounds !== void 0 ? bounds : {}, fullscreen = _c.fullscreen, x = _c.x, y = _c.y, restBounds = __rest(_c, ["fullscreen", "x", "y"]);
         var cssBounds = __assign(__assign(__assign(__assign({}, restBounds), (_a = {}, _a[dialogRectSelectors.xKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.left, _a[dialogRectSelectors.yKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.top, _a)), prevDialogRect.isMultiple ? { position: 'absolute' } : null), { translate: prevDialogRect.isMultiple ? "".concat(5, "px ").concat(5, "px") : 'none' });
-        return __assign({}, bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : cssBounds);
+        return __assign({}, bounds ? { position: 'absolute', top: Math.max(0, (_b = bounds.y) !== null && _b !== void 0 ? _b : 0), left: bounds.x, width: bounds.width, height: bounds.height } : cssBounds);
     };
     // Effect Listener
     (0, react_1.useEffect)(function () {
@@ -219,9 +220,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.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
-                                    zIndex: parseInt(domZIndex) + 1
-                                }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, 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) && (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' }) })] })] }) }) });
 };
 exports.DialogContent = DialogContent;

package/helpers/Resizeable.d.ts

@@ -1,5 +1,6 @@
 import { MouseEvent } from "react";
 import { DialogOptionsType } from "../types/index.js";
+export type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
 declare class Resizeable {
     onResizeListener: (callbackFn: (width: number, height: number, rect?: DOMRect) => void) => void;
     get width(): number;
@@ -12,10 +13,27 @@ declare class Resizeable {
     private _width;
     private _height;
     private _dialogOptions;
+    private _direction;
+    private _startMouseX;
+    private _startMouseY;
+    private _startVisualWidth;
+    private _startVisualHeight;
+    private _startCssLeft;
+    private _startCssTop;
     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;
-    resizeHandleMouseDown: () => void;
+    /**
+     * 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;
     cleanUp: () => void;

package/helpers/Resizeable.js

@@ -20,45 +20,112 @@ var Resizeable = /** @class */ (function () {
         this.onResizeListener = function (callbackFn) {
             _this._onResizeListener = callbackFn;
         };
+        // Multi-direction resize state
+        this._direction = 'se';
+        this._startMouseX = 0;
+        this._startMouseY = 0;
+        this._startVisualWidth = 0;
+        this._startVisualHeight = 0;
+        this._startCssLeft = 0;
+        this._startCssTop = 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;
+            if (!el)
+                return { x: 0, y: 0 };
+            var transform = window.getComputedStyle(el).transform;
+            if (!transform || transform === 'none')
+                return { x: 0, y: 0 };
+            var m = new DOMMatrix(transform);
+            return { x: m.m41, y: m.m42 };
+        };
         this.resizeHandleMouseUp = function () {
-            var _a, _b, _c;
+            var _a, _b;
             (_b = (_a = _this._container) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.classList.remove('no-select-on-resize');
             _this.isResizing = false;
-            // Bounds case
             var container = _this._container.current;
-            var _d = (_c = container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) !== null && _c !== void 0 ? _c : {}, width = _d.width, height = _d.height, x = _d.x, y = _d.y;
             (0, appLogger_1.appLog)('resizeHandleMouseUp', container === null || container === void 0 ? void 0 : container.getBoundingClientRect().toJSON());
-            // setDialogBounds( this._dialogOptions.base.id, {width, height, x, y, fullscreen: false}, this._container );
             (0, _helpers_1.setDialogBounds)(_this._dialogOptions.base.id, __assign(__assign({}, container === null || container === void 0 ? void 0 : container.getBoundingClientRect().toJSON()), { fullscreen: false }), _this._container);
         };
-        this.resizeHandleMouseDown = function () {
-            _this.isResizing = true;
+        /**
+         * 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();
+            _this._direction = direction;
+            _this._isResizing = true;
+            _this._startMouseX = e.clientX;
+            _this._startMouseY = e.clientY;
+            var rect = _this._container.current.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._startCssLeft = rect.left - translate.x;
+            _this._startCssTop = rect.top - translate.y;
             _this._container.current.classList.add('no-select-on-resize');
             _this.init();
-        };
+        }; };
         this.resizeHandleMouseMove = function (e) {
-            var _a;
+            var _a, _b;
             if (!_this.isResizing || !_this._container.current)
                 return;
-            if (!_this._container.current) {
-                throw new Error('Please define container');
-            }
             var container = _this._container.current;
-            var newWidth = e.clientX - (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) + 10;
-            var newHeight = e.clientY - (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().top) + 10;
-            _this._width = Math.max(newWidth, 100); // Min Width
-            _this._height = Math.max(newHeight, 100); // Min Height
-            var rect = __assign(__assign({}, container === null || container === void 0 ? void 0 : container.getBoundingClientRect().toJSON()), { width: _this._width, height: _this._height });
+            var scale = (_b = (_a = _this._dialogOptions) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1;
+            var dx = e.clientX - _this._startMouseX;
+            var dy = e.clientY - _this._startMouseY;
+            var dir = _this._direction;
+            var MIN_SIZE = 100; // screen pixels
+            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')) {
+                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')) {
+                newVisualHeight = Math.max(MIN_SIZE, _this._startVisualHeight + dy);
+            }
+            // 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));
+            }
+            // 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';
+            }
+            _this._width = newVisualWidth / scale;
+            _this._height = newVisualHeight / scale;
             if (typeof _this._onResizeListener === "function") {
-                _this._onResizeListener(_this._width, _this._height, rect);
+                _this._onResizeListener(_this._width, _this._height, container.getBoundingClientRect());
             }
-            var scale = ((_a = _this._dialogOptions) !== null && _a !== void 0 ? _a : { scale: 1 }).scale;
-            _this._container.current.style.width = (_this._width / scale) + 'px';
-            _this._container.current.style.height = (_this._height / scale) + 'px';
         };
         this.init = function () {
             if (_this.isResizing) {

package/helpers/dialogBoundsMemoize.js

@@ -75,10 +75,11 @@ var setDialogBounds = function (dialogId, bounds, dialogRef) {
     var foundedDialog = initDialogMemoizeBounds_1.registeredDialogs.get(combined.join('-'));
     (0, appLogger_1.appLog)('setDialogBounds_combined', combined, combined.join('-'), bounds, foundedDialog);
     if (foundedDialog) {
+        var safeBounds = __assign(__assign({}, bounds), { y: typeof bounds.y === 'number' ? Math.max(0, bounds.y) : bounds.y });
         // Save to RAM
         initDialogMemoizeBounds_1.registeredDialogs.set(combined.join('-'), {
             id: combined.join('-'),
-            bounds: __assign(__assign({}, (0, exports.getDialogBounds)(dialogId)), bounds)
+            bounds: __assign(__assign({}, (0, exports.getDialogBounds)(dialogId)), safeBounds)
         });
         /**
          * const myMap = new Map();

package/models/Dialog.d.ts

@@ -44,6 +44,26 @@ declare class Dialog<V, I> {
     keyboardListener(listener: (key: string, dialog: IDialogApiDef) => void): this;
     resizeListener(listener: (size: IDialogSize, dialog: IDialogApiDef) => void): this;
     onClose(callback: TDialogCallbackFn<V, I, void>): this;
+    /**
+     * Nutzungsszenarien
+     *
+     * 1. Szenario
+     * Dialog A (normal)          z: 1202
+     * Dialog B (throughable)     z: 1203
+     * Dialog C (throughable)     z: 1204
+     *
+     * highestZ(false) → 1204  // Alle Dialoge berücksichtigen → höchsten z-Index nehmen → 1205
+     * highestZ(true)  → 1204  // Nur throughable Dialoge berücksichtigen → 1205
+     *
+     * 2. Szenario
+     * Dialog A (normal)          z: 1205  ← höchster z-Index
+     * Dialog B (throughable)     z: 1203
+     * Dialog C (throughable)     z: 1204
+     *
+     * highestZ(false) → 1205  // Über dem normalen Dialog platzieren → 1206
+     * highestZ(true)  → 1204  // Nur den höchsten throughable Dialog berücksichtigen → 1205
+     *                          // Bleibt UNTERHALB des normalen Dialogs! !!Gewünschtes Verhalten
+     */
     private highestZ;
     private createDom;
     /**

package/models/Dialog.js

@@ -68,15 +68,41 @@ var Dialog = /** @class */ (function () {
          * UI / Dialog / Form bağlamında alışıldık
          * */
         this._headerRef = React.createRef();
+        /**
+         * Nutzungsszenarien
+         *
+         * 1. Szenario
+         * Dialog A (normal)          z: 1202
+         * Dialog B (throughable)     z: 1203
+         * Dialog C (throughable)     z: 1204
+         *
+         * highestZ(false) → 1204  // Alle Dialoge berücksichtigen → höchsten z-Index nehmen → 1205
+         * highestZ(true)  → 1204  // Nur throughable Dialoge berücksichtigen → 1205
+         *
+         * 2. Szenario
+         * Dialog A (normal)          z: 1205  ← höchster z-Index
+         * Dialog B (throughable)     z: 1203
+         * Dialog C (throughable)     z: 1204
+         *
+         * highestZ(false) → 1205  // Über dem normalen Dialog platzieren → 1206
+         * highestZ(true)  → 1204  // Nur den höchsten throughable Dialog berücksichtigen → 1205
+         *                          // Bleibt UNTERHALB des normalen Dialogs! !!Gewünschtes Verhalten
+         */
         this.highestZ = function (throughableOnly) {
-            var _a, _b;
+            var _a;
             if (throughableOnly === void 0) { throughableOnly = false; }
             if ((_a = _this._dialogOptions) === null || _a === void 0 ? void 0 : _a.zIndex) {
-                return (_b = _this._dialogOptions) === null || _b === void 0 ? void 0 : _b.zIndex;
+                return _this._dialogOptions.zIndex;
             }
-            var presentationElements = document.querySelectorAll("div[data-family=\"presentation\"]".concat(throughableOnly ? ' > div.dialogger-throughable' : ''));
+            var presentationElements = document.querySelectorAll('div[data-family="presentation"]');
             var highest = 1201;
             presentationElements.forEach(function (element) {
+                // throughableOnly → sadece ilk child'ı dialogger-throughable olan presentation'lar
+                if (throughableOnly) {
+                    var firstDiv = element.querySelector('div:first-child');
+                    if (!(firstDiv === null || firstDiv === void 0 ? void 0 : firstDiv.classList.contains('dialogger-throughable')))
+                        return;
+                }
                 var z = parseInt(window.getComputedStyle(element).zIndex, 10);
                 if (!isNaN(z) && z > highest) {
                     highest = z;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.138",
+  "version": "1.1.140",
   "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

@@ -322,22 +322,67 @@
   flex: 0;
   overflow: hidden;
 }
-.dialog-main .resizable-handle {
+.dialog-main .resize-handle {
   position: absolute;
-  width: 20px;
-  height: 20px;
-  /*background: repeating-linear-gradient(
-                  45deg,
-                  #ccc,
-                  #ccc 2px,
-                  transparent 2px,
-                  transparent 4px
-  );*/
+  user-select: none;
+}
+.dialog-main .resize-handle.resize-n {
+  top: 0;
+  left: 8px;
+  right: 8px;
+  height: 4px;
+  cursor: n-resize;
+}
+.dialog-main .resize-handle.resize-s {
+  bottom: 0;
+  left: 8px;
+  right: 8px;
+  height: 4px;
+  cursor: s-resize;
+}
+.dialog-main .resize-handle.resize-e {
+  right: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 4px;
+  cursor: e-resize;
+}
+.dialog-main .resize-handle.resize-w {
+  left: 0;
+  top: 8px;
+  bottom: 8px;
+  width: 4px;
+  cursor: w-resize;
+}
+.dialog-main .resize-handle.resize-nw {
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  cursor: nw-resize;
+}
+.dialog-main .resize-handle.resize-ne {
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  cursor: ne-resize;
+}
+.dialog-main .resize-handle.resize-sw {
+  bottom: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  cursor: sw-resize;
+}
+.dialog-main .resize-handle.resize-se {
   bottom: 0;
   right: 0;
-  cursor: se-resize; /* Sağ alt köşe için özel imleç */
+  width: 20px;
+  height: 20px;
+  cursor: se-resize;
 }
-.dialog-main .resizable-handle .resizable-handle-icon svg {
+.dialog-main .resize-handle.resize-se svg {
   transform: rotate(-135deg);
   display: flex;
   fill: #286e94;