Fix draggable windows

src/App.tsx

@@ -126,12 +126,11 @@ export const App: FC<{}> = props =>
     
     return (
         <div className="nitro-app overflow-hidden">
-            <div id="nitro-alerts-container" />
-            <div id="nitro-confirms-container" />
             { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) }>
                 <MainView />
             </TransitionAnimation>
+            <div id="draggable-windows-container" />
         </div>
     );
 }

src/assets/styles/bootstrap/forms/_form-check.scss

@@ -17,7 +17,7 @@
 .form-check-input {
   width: $form-check-input-width;
   height: $form-check-input-width;
-  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+  //margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
   background-color: $form-check-input-bg;
   background-repeat: no-repeat;

src/layout/card/NitroCardView.scss

@@ -5,6 +5,10 @@ $nitro-card-tabs-height: 33px;
     pointer-events: all;
     resize: both;
 
+    @include media-breakpoint-down(sm) {
+        max-width: 100vw !important;
+    }
+
     &.theme-primary {
         border: $border-width solid $border-color;
 
@@ -28,56 +32,6 @@ $nitro-card-tabs-height: 33px;
     }
 }
 
-.nitro-card-responsive {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    overflow: hidden;
-
-    @include media-breakpoint-down(lg) {
-        .draggable-window {
-            top: 0 !important;
-            left: 0 !important;
-            width: 100%;
-            height: 100%;
-            //transform: none !important;
-            overflow: hidden;
-        }
-
-        .nitro-card {
-            max-width: 75%;
-            max-height: calc(100% - 20px);
-            margin: 10px auto 10px;
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        .draggable-window {
-            top: 0 !important;
-            left: 0 !important;
-            width: 100%;
-            height: 100%;
-            //transform: none !important;
-            overflow: hidden;
-        }
-
-        .nitro-card {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: calc(100% - #{$toolbar-height});
-            margin: 0;
-
-            &.rounded {
-                border-radius: 0 !important;
-            }
-        }
-    }
-}
-
 @import "./accordion/NitroCardAccordionView";
 @import "./content/NitroCardContentView";
 @import "./grid/NitroCardGridView";

src/layout/card/NitroCardView.tsx

@@ -9,13 +9,11 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
 
     return (
         <NitroCardContextProvider value={ { theme, simple } }>
-            <div className="nitro-card-responsive">
+            <DraggableWindow { ...rest }>
-                <DraggableWindow { ...rest }>
+                <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className} position-relative` }>
-                    <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className}` }>
+                    { children }
-                        { children }
+                </div>
-                    </div>
+            </DraggableWindow>
-                </DraggableWindow>
-            </div>
         </NitroCardContextProvider>
     );
 }

src/layout/draggable-window/DraggableWindow.scss

@@ -1,7 +1,25 @@
-.draggable-window {
+#draggable-windows-container {
-    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
 
-    .drag-handler {
+    @include media-breakpoint-down(lg) {
-        cursor: move;
+        display: flex;
+        justify-content: center;
+        transform: none !important;
+
+        .draggable-window {
+            top: 10px !important;
+            left: 0 !important;
+        }
+    }
+
+    .draggable-window {
+        display: inline-block;
+        visibility: hidden;
     }
 }

src/layout/draggable-window/DraggableWindow.tsx

@@ -1,15 +1,25 @@
 import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
-import { FC, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { DetailedHTMLProps, FC, HTMLAttributes, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { DraggableWindowPosition, DraggableWindowProps } from './DraggableWindow.types';
+import { createPortal } from 'react-dom';
+import { BatchUpdates } from '../../hooks';
+import { DraggableWindowPosition } from './DraggableWindow.types';
 
 const CURRENT_WINDOWS: HTMLElement[] = [];
 const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
 const BOUNDS_THRESHOLD_TOP: number = 0;
 const BOUNDS_THRESHOLD_LEFT: number = 0;
 
+export interface DraggableWindowProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+{
+    uniqueKey?: Key;
+    handleSelector?: string;
+    position?: string;
+    disableDrag?: boolean;
+}
+
 export const DraggableWindow: FC<DraggableWindowProps> = props =>
 {
-    const { uniqueKey = null, handleSelector = '.drag-handler', position = DraggableWindowPosition.CENTER, disableDrag = false, children = null } = props;
+    const { uniqueKey = null, handleSelector = '.drag-handler', position = DraggableWindowPosition.CENTER, disableDrag = false, children = null, ...rest } = props;
     const [ delta, setDelta ] = useState<{ x: number, y: number }>(null);
     const [ offset, setOffset ] = useState<{ x: number, y: number }>(null);
     const [ start, setStart ] = useState<{ x: number, y: number }>({ x: 0, y: 0 });
@@ -120,9 +130,12 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
             offsetX = (document.body.offsetWidth - elementRef.current.offsetWidth) - elementRef.current.offsetLeft;
         }
 
-        setDelta({ x: 0, y: 0 });
+        BatchUpdates(() =>
-        setOffset({ x: offsetX, y: offsetY });
+        {
-        setIsDragging(false);
+            setDelta({ x: 0, y: 0 });
+            setOffset({ x: offsetX, y: offsetY });
+            setIsDragging(false);
+        });
 
         if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, { x: offsetX, y: offsetY });
     }, [ dragHandler, delta, offset, uniqueKey ]);
@@ -180,8 +193,11 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
             }
         }
 
-        setDelta({ x: 0, y: 0 });
+        BatchUpdates(() =>
-        setOffset({ x: offsetX, y: offsetY });
+        {
+            setDelta({ x: 0, y: 0 });
+            setOffset({ x: offsetX, y: offsetY });
+        });
 
         return () =>
         {
@@ -236,8 +252,9 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
     }, [ isDragging, onDragMouseUp, onDragMouseMove, onDragTouchUp, onDragTouchMove ]);
 
     return (
-        <div ref={ elementRef } className="position-absolute draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart }>
+        createPortal(
+        <div ref={ elementRef } className="position-absolute draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } { ...rest }>
             { children }
-        </div>
+        </div>, document.getElementById('draggable-windows-container'))
     );
 }

src/layout/draggable-window/DraggableWindow.types.tsx

@@ -1,13 +1,3 @@
-import { Key } from 'react';
-
-export interface DraggableWindowProps
-{
-    uniqueKey?: Key;
-    handleSelector?: string;
-    position?: string;
-    disableDrag?: boolean;
-}
-
 export class DraggableWindowPosition
 {
     public static CENTER: string = 'DWP_CENTER';

src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx

@@ -1,19 +1,22 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+import { GetRoomObjectBounds, GetRoomSession } from '../../../../../../api';
 import { DraggableWindow, DraggableWindowPosition } from '../../../../../../layout';
-import { ObjectLocationView } from '../../../object-location/ObjectLocationView';
 import { AvatarInfoRentableBotChatViewProps } from './AvatarInfoRentableBotChatView.types';
 
 export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProps> = props =>
 {
     const { chatEvent = null } = props;
 
+    const getObjectLocation = useMemo(() =>
+    {
+        return GetRoomObjectBounds(GetRoomSession().roomId, chatEvent.objectId, chatEvent.category, 1);
+    }, [ chatEvent ]);
+
     return (
-        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler">
+        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" style={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
-            <ObjectLocationView objectId={ chatEvent.objectId } category={ chatEvent.category } noFollow={ true }>
+            <div className="nitro-context-menu">
-                <div className="nitro-context-menu">
+                <div className="drag-handler">test!!!!!</div>
-                    <div className="drag-handler">test!!!!!</div>
+            </div>
-                </div>
-                </ObjectLocationView>
         </DraggableWindow>
     );
 }