From 6543e79e9e025e3e4ec721f45d3e22413ec6b19a Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 7 Jan 2022 19:34:57 -0500
Subject: [PATCH] Fix draggable windows

---
 src/App.tsx                                   |  3 +-
 .../styles/bootstrap/forms/_form-check.scss   |  2 +-
 src/layout/card/NitroCardView.scss            | 54 ++-----------------
 src/layout/card/NitroCardView.tsx             | 12 ++---
 .../draggable-window/DraggableWindow.scss     | 26 +++++++--
 .../draggable-window/DraggableWindow.tsx      | 37 +++++++++----
 .../DraggableWindow.types.tsx                 | 10 ----
 .../AvatarInfoRentableBotChatView.tsx         | 19 ++++---
 8 files changed, 71 insertions(+), 92 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 59094326..7ebb30d8 100644
--- a/src/App.tsx
+++ b/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>
     );
 }
diff --git a/src/assets/styles/bootstrap/forms/_form-check.scss b/src/assets/styles/bootstrap/forms/_form-check.scss
index 6321b410..402c5954 100644
--- a/src/assets/styles/bootstrap/forms/_form-check.scss
+++ b/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;
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index 2e3d1924..ecc8562f 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/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";
diff --git a/src/layout/card/NitroCardView.tsx b/src/layout/card/NitroCardView.tsx
index f44ee67f..ee5112ed 100644
--- a/src/layout/card/NitroCardView.tsx
+++ b/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 }>
-                    <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className}` }>
-                        { children }
-                    </div>
-                </DraggableWindow>
-            </div>
+            <DraggableWindow { ...rest }>
+                <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className} position-relative` }>
+                    { children }
+                </div>
+            </DraggableWindow>
         </NitroCardContextProvider>
     );
 }
diff --git a/src/layout/draggable-window/DraggableWindow.scss b/src/layout/draggable-window/DraggableWindow.scss
index 0679e33d..47e08233 100644
--- a/src/layout/draggable-window/DraggableWindow.scss
+++ b/src/layout/draggable-window/DraggableWindow.scss
@@ -1,7 +1,25 @@
-.draggable-window {
-    visibility: hidden;
+#draggable-windows-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
 
-    .drag-handler {
-        cursor: move;
+    @include media-breakpoint-down(lg) {
+        display: flex;
+        justify-content: center;
+        transform: none !important;
+
+        .draggable-window {
+            top: 10px !important;
+            left: 0 !important;
+        }
+    }
+
+    .draggable-window {
+        display: inline-block;
+        visibility: hidden;
     }
 }
diff --git a/src/layout/draggable-window/DraggableWindow.tsx b/src/layout/draggable-window/DraggableWindow.tsx
index d9d1fb03..10e2a4e6 100644
--- a/src/layout/draggable-window/DraggableWindow.tsx
+++ b/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 { DraggableWindowPosition, DraggableWindowProps } from './DraggableWindow.types';
+import { DetailedHTMLProps, FC, HTMLAttributes, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
+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 });
-        setOffset({ x: offsetX, y: offsetY });
-        setIsDragging(false);
+        BatchUpdates(() =>
+        {
+            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 });
-        setOffset({ x: offsetX, y: offsetY });
+        BatchUpdates(() =>
+        {
+            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'))
     );
 }
diff --git a/src/layout/draggable-window/DraggableWindow.types.tsx b/src/layout/draggable-window/DraggableWindow.types.tsx
index 278e866a..a8cbea31 100644
--- a/src/layout/draggable-window/DraggableWindow.types.tsx
+++ b/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';
diff --git a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx b/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
index f39f7f26..983e34a2 100644
--- a/src/views/room/widgets/avatar-info/views/rentable-bot-chat/AvatarInfoRentableBotChatView.tsx
+++ b/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">
-            <ObjectLocationView objectId={ chatEvent.objectId } category={ chatEvent.category } noFollow={ true }>
-                <div className="nitro-context-menu">
-                    <div className="drag-handler">test!!!!!</div>
-                </div>
-                </ObjectLocationView>
+        <DraggableWindow position={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" style={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
+            <div className="nitro-context-menu">
+                <div className="drag-handler">test!!!!!</div>
+            </div>
         </DraggableWindow>
     );
 }