mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 11:23:05 +02:00
Fix draggable windows
This commit is contained in:
Bill
parent
7b7015503a
commit
6543e79e9e
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'))
|
||||
);
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user