mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 23:50:52 +01:00
Merge branch 'dev' of https://github.com/billsonnn/nitro-react into dev
This commit is contained in:
commit
102774187c
6
src/api/nitro/GetTicker.ts
Normal file
6
src/api/nitro/GetTicker.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { Nitro } from 'nitro-renderer';
|
||||
|
||||
export function GetTicker()
|
||||
{
|
||||
return Nitro.instance.ticker;
|
||||
}
|
@ -1,5 +1,6 @@
|
||||
export * from './avatar';
|
||||
export * from './camera';
|
||||
export * from './GetConnection';
|
||||
export * from './GetTicker';
|
||||
export * from './room';
|
||||
export * from './session';
|
||||
|
7
src/api/nitro/room/GetRoomObjectBounds.ts
Normal file
7
src/api/nitro/room/GetRoomObjectBounds.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { NitroRectangle } from 'nitro-renderer';
|
||||
import { GetRoomEngine } from './GetRoomEngine';
|
||||
|
||||
export function GetRoomObjectBounds(roomId: number, objectId: number, category: number, canvasId = 1): NitroRectangle
|
||||
{
|
||||
return GetRoomEngine().getRoomObjectBoundingRectangle(roomId, objectId, category, canvasId);
|
||||
}
|
@ -2,6 +2,7 @@ export * from './DispatchMouseEvent';
|
||||
export * from './DispatchResizeEvent';
|
||||
export * from './DispatchTouchEvent';
|
||||
export * from './GetRoomEngine';
|
||||
export * from './GetRoomObjectBounds';
|
||||
export * from './InitializeRoomInstanceRenderingCanvas';
|
||||
export * from './IsFurnitureSelectionDisabled';
|
||||
export * from './ProcessRoomObjectOperation';
|
||||
|
@ -249,13 +249,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
|
||||
roomObjectImage = GetRoomEngine().getRoomObjectImage(roomId, message.id, message.category, new Vector3d(180), 1, null);
|
||||
}
|
||||
|
||||
if(roomObjectImage && roomObjectImage.data)
|
||||
{
|
||||
const image = Nitro.instance.renderer.extract.image(roomObjectImage.data);
|
||||
|
||||
if(image) event.image = image;
|
||||
}
|
||||
|
||||
event.image = roomObjectImage.getImage();
|
||||
event.isWallItem = (message.category === RoomObjectCategory.WALL);
|
||||
event.isRoomOwner = this.roomSession.isRoomOwner;
|
||||
event.roomControllerLevel = this.roomSession.controllerLevel;
|
||||
|
@ -1,16 +1,21 @@
|
||||
import { FC } from 'react';
|
||||
import { ObjectLocationView } from '../../../object-location/ObjectLocationView';
|
||||
import { FC, useCallback } from 'react';
|
||||
import { ContextMenuView } from '../../../context-menu/ContextMenuView';
|
||||
import { AvatarInfoWidgetNameViewProps } from './AvatarInfoWidgetNameView.types';
|
||||
|
||||
export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props =>
|
||||
{
|
||||
const { event = null } = props;
|
||||
|
||||
const onClose = useCallback(() =>
|
||||
{
|
||||
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ObjectLocationView objectId={ event.roomIndex } category={ event.category }>
|
||||
<ContextMenuView objectId={ event.roomIndex } category={ event.category } onClose= { onClose }>
|
||||
<div className="d-flex justify-content-center align-items-center bg-dark border border-dark">
|
||||
{ event.name }
|
||||
</div>
|
||||
</ObjectLocationView>
|
||||
</ContextMenuView>
|
||||
);
|
||||
}
|
||||
|
3
src/views/room/widgets/context-menu/ContextMenu.scss
Normal file
3
src/views/room/widgets/context-menu/ContextMenu.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.nitro-context-menu {
|
||||
|
||||
}
|
47
src/views/room/widgets/context-menu/ContextMenuView.tsx
Normal file
47
src/views/room/widgets/context-menu/ContextMenuView.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
|
||||
import { ContextMenuViewFadeOptions, ContextMenuViewProps } from './ContextMenuView.types';
|
||||
|
||||
export const ContextMenuView: FC<ContextMenuViewProps> = props =>
|
||||
{
|
||||
const { objectId = -1, category = -1, fades = false, onClose = null, children = null } = props;
|
||||
const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1});
|
||||
const [ opacity, setOpacity ] = useState(1);
|
||||
const [ fadeOptions, setFadeOptions ] = useState<ContextMenuViewFadeOptions>({
|
||||
firstFadeStarted: false,
|
||||
fadeAfterDelay: true,
|
||||
fadeLength: 75,
|
||||
fadeTime: 0,
|
||||
fadeStartDelay: 3000,
|
||||
fadingOut: false
|
||||
});
|
||||
const elementRef = useRef<HTMLDivElement>();
|
||||
|
||||
const update = useCallback((time: number) =>
|
||||
{
|
||||
const bounds = GetRoomObjectBounds(GetRoomSession().roomId, objectId, category);
|
||||
|
||||
if(!bounds || !elementRef.current) return;
|
||||
|
||||
setPos({
|
||||
x: Math.round(((bounds.left + (bounds.width / 2)) - (elementRef.current.offsetWidth / 2))),
|
||||
y: Math.round((bounds.top - elementRef.current.offsetHeight) + 10)
|
||||
});
|
||||
}, [ objectId, category ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
GetTicker().add(update);
|
||||
|
||||
return () =>
|
||||
{
|
||||
GetTicker().remove(update);
|
||||
}
|
||||
}, [ update ]);
|
||||
|
||||
return (
|
||||
<div ref={ elementRef } className={ 'nitro-context-menu position-absolute ' + (pos.x > -1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
17
src/views/room/widgets/context-menu/ContextMenuView.types.ts
Normal file
17
src/views/room/widgets/context-menu/ContextMenuView.types.ts
Normal file
@ -0,0 +1,17 @@
|
||||
export interface ContextMenuViewProps
|
||||
{
|
||||
objectId: number;
|
||||
category: number;
|
||||
fades?: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export interface ContextMenuViewFadeOptions
|
||||
{
|
||||
firstFadeStarted: boolean;
|
||||
fadeAfterDelay: boolean;
|
||||
fadeLength: number;
|
||||
fadeTime: number;
|
||||
fadeStartDelay: number;
|
||||
fadingOut: boolean;
|
||||
}
|
Loading…
Reference in New Issue
Block a user