From 304e945c13caa7ed8d8e5635633160e51f97e768 Mon Sep 17 00:00:00 2001 From: duckietm Date: Mon, 18 Mar 2024 14:22:08 +0100 Subject: [PATCH] Fix: Move Floorplan out of Pixi and make it full selectable --- src/common/Slider.tsx | 21 ++ src/common/index.ts | 1 + .../floorplan-editor/FloorplanEditorView.scss | 2 +- .../floorplan-editor/FloorplanEditorView.tsx | 9 +- .../floorplan-editor/common/Constants.ts | 2 +- .../common/FloorplanEditor.ts | 212 +++++++--------- .../common/FloorplanResource.ts | 227 ++++++++++++++++++ .../floorplan-editor/common/Utils.ts | 4 +- .../views/FloorplanCanvasView.tsx | 61 ++++- .../views/FloorplanImportExportView.tsx | 2 +- .../views/FloorplanOptionsView.tsx | 8 +- .../src/api/asset/GraphicAssetCollection.ts | 2 +- .../core/communication/SocketConnection.ts | 14 +- submodules/renderer/src/nitro/Plugins.ts | 2 - .../renderer/src/pixi-proxy/NitroTilemap.ts | 6 - .../pixi-proxy/PixiInteractionEventProxy.ts | 4 - submodules/renderer/src/pixi-proxy/index.ts | 3 - 17 files changed, 401 insertions(+), 179 deletions(-) create mode 100644 src/common/Slider.tsx create mode 100644 src/components/floorplan-editor/common/FloorplanResource.ts delete mode 100644 submodules/renderer/src/pixi-proxy/NitroTilemap.ts delete mode 100644 submodules/renderer/src/pixi-proxy/PixiInteractionEventProxy.ts diff --git a/src/common/Slider.tsx b/src/common/Slider.tsx new file mode 100644 index 0000000..50cba28 --- /dev/null +++ b/src/common/Slider.tsx @@ -0,0 +1,21 @@ +import { FC } from 'react'; +import ReactSlider, { ReactSliderProps } from 'react-slider'; +import { Button } from './Button'; +import { Flex } from './Flex'; +import { FaAngleLeft, FaAngleRight } from 'react-icons/fa'; + +export interface SliderProps extends ReactSliderProps +{ + disabledButton?: boolean; +} + +export const Slider: FC = props => +{ + const { disabledButton, max, min, value, onChange, ...rest } = props; + + return + { !disabledButton && } + + { !disabledButton && } + ; +} diff --git a/src/common/index.ts b/src/common/index.ts index 3722c52..bc70d55 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -16,6 +16,7 @@ export * from './HorizontalRule'; export * from './InfiniteScroll'; export * from './layout'; export * from './layout/limited-edition'; +export * from "./Slider"; export * from './Text'; export * from './transitions'; export * from './types'; diff --git a/src/components/floorplan-editor/FloorplanEditorView.scss b/src/components/floorplan-editor/FloorplanEditorView.scss index 3fe3041..28f970a 100644 --- a/src/components/floorplan-editor/FloorplanEditorView.scss +++ b/src/components/floorplan-editor/FloorplanEditorView.scss @@ -4,6 +4,6 @@ } .floorplan-import-export { - width: 500px; + width: 630px; height: 475px; } diff --git a/src/components/floorplan-editor/FloorplanEditorView.tsx b/src/components/floorplan-editor/FloorplanEditorView.tsx index 995e8f7..8efea48 100644 --- a/src/components/floorplan-editor/FloorplanEditorView.tsx +++ b/src/components/floorplan-editor/FloorplanEditorView.tsx @@ -3,11 +3,11 @@ import { FC, useEffect, useState } from 'react'; import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api'; import { Button, ButtonGroup, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; import { useMessageEvent, useRoomEngineEvent } from '../../hooks'; +import { FloorplanEditorContextProvider } from './FloorplanEditorContext'; import { FloorplanEditor } from './common/FloorplanEditor'; import { IFloorplanSettings } from './common/IFloorplanSettings'; import { IVisualizationSettings } from './common/IVisualizationSettings'; import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils'; -import { FloorplanEditorContextProvider } from './FloorplanEditorContext'; import { FloorplanCanvasView } from './views/FloorplanCanvasView'; import { FloorplanImportExportView } from './views/FloorplanImportExportView'; import { FloorplanOptionsView } from './views/FloorplanOptionsView'; @@ -135,11 +135,6 @@ export const FloorplanEditorView: FC<{}> = props => return () => RemoveLinkEventTracker(linkTracker); }, []); - useEffect(() => - { - FloorplanEditor.instance.initialize(); - }, []); - return ( { isVisible && @@ -162,4 +157,4 @@ export const FloorplanEditorView: FC<{}> = props => setImportExportVisible(false) } /> } ); -} +} \ No newline at end of file diff --git a/src/components/floorplan-editor/common/Constants.ts b/src/components/floorplan-editor/common/Constants.ts index da66d51..6a5711f 100644 --- a/src/components/floorplan-editor/common/Constants.ts +++ b/src/components/floorplan-editor/common/Constants.ts @@ -1,5 +1,5 @@ export const TILE_SIZE = 32; -export const MAX_NUM_TILE_PER_AXIS = 64; +export const MAX_NUM_TILE_PER_AXIS = 100; export const HEIGHT_SCHEME: string = 'x0123456789abcdefghijklmnopq'; diff --git a/src/components/floorplan-editor/common/FloorplanEditor.ts b/src/components/floorplan-editor/common/FloorplanEditor.ts index 6fb0b08..644492b 100644 --- a/src/components/floorplan-editor/common/FloorplanEditor.ts +++ b/src/components/floorplan-editor/common/FloorplanEditor.ts @@ -1,10 +1,11 @@ -import { GetAssetManager, IGraphicAssetCollection, NitroPoint, NitroTilemap, PixiApplicationProxy, PixiInteractionEventProxy, POINT_STRUCT_SIZE } from '@nitrots/nitro-renderer'; +import { NitroPoint } from '@nitrots/nitro-renderer'; import { ActionSettings } from './ActionSettings'; import { FloorAction, HEIGHT_SCHEME, MAX_NUM_TILE_PER_AXIS, TILE_SIZE } from './Constants'; +import { imageBase64, spritesheet } from './FloorplanResource'; import { Tile } from './Tile'; -import { getScreenPositionForTile, getTileFromScreenPosition } from './Utils'; +import { getScreenPositionForTile } from './Utils'; -export class FloorplanEditor extends PixiApplicationProxy +export class FloorplanEditor { private static _INSTANCE: FloorplanEditor = null; @@ -14,160 +15,107 @@ export class FloorplanEditor extends PixiApplicationProxy private _tilemap: Tile[][]; private _width: number; private _height: number; - private _isHolding: boolean; + private _isPointerDown: boolean; private _doorLocation: NitroPoint; private _lastUsedTile: NitroPoint; - private _tilemapRenderer: NitroTilemap; + private _renderer: CanvasRenderingContext2D; private _actionSettings: ActionSettings; - private _isInitialized: boolean; - private _assetCollection: IGraphicAssetCollection; + private _image: HTMLImageElement; constructor() { const width = TILE_SIZE * MAX_NUM_TILE_PER_AXIS + 20; const height = (TILE_SIZE * MAX_NUM_TILE_PER_AXIS) / 2 + 100; - super({ - width: width, - height: height, - backgroundColor: 0x000000, - antialias: true, - autoDensity: true, - resolution: 1, - sharedLoader: true, - sharedTicker: true - }); + const canvas = document.createElement('canvas'); + + canvas.height = height; + canvas.width = width; + + canvas.style.touchAction = 'none'; + + this._renderer = canvas.getContext('2d'); + + this._image = new Image(); + + this._image.src = imageBase64; this._tilemap = []; this._doorLocation = new NitroPoint(0, 0); this._width = 0; this._height = 0; - this._isHolding = false; + this._isPointerDown = false; this._lastUsedTile = new NitroPoint(-1, -1); this._actionSettings = new ActionSettings(); } - public initialize(): void + public onPointerRelease(): void { - if(this._isInitialized) return; + this._isPointerDown = false; + } - const collection = GetAssetManager().getCollection('floor_editor'); + public onPointerDown(event: PointerEvent): void + { + if(event.button === 2) return; - if(!collection) return; + const location = new NitroPoint(event.offsetX, event.offsetY); - this._assetCollection = collection; - this._tilemapRenderer = new NitroTilemap(collection.baseTexture); - - this.registerEventListeners(); - - this.stage.addChild(this._tilemapRenderer); + this._isPointerDown = true; - this._isInitialized = true; + this.tileHitDetection(location, true); } - private registerEventListeners(): void + public onPointerMove(event: PointerEvent): void { - //this._tilemapRenderer.interactive = true; - - const tempPoint = new NitroPoint(); - // @ts-ignore - this._tilemapRenderer.containsPoint = (position) => - { - this._tilemapRenderer.worldTransform.applyInverse(position, tempPoint); - return this.tileHitDetection(tempPoint, false); - }; - - this._tilemapRenderer.on('pointerup', () => - { - this._isHolding = false; - }); - - this._tilemapRenderer.on('pointerout', () => - { - this._isHolding = false; - }); - - this._tilemapRenderer.on('pointerdown', (event: PixiInteractionEventProxy) => - { - if(!(event.data.originalEvent instanceof PointerEvent) && !(event.data.originalEvent instanceof TouchEvent)) return; - - const pointerEvent = event.data.originalEvent; - if((pointerEvent instanceof MouseEvent) && pointerEvent.button === 2) return; - - - const location = event.data.global; - this.tileHitDetection(location, true); - }); - - this._tilemapRenderer.on('click', (event: PixiInteractionEventProxy) => - { - if(!(event.data.originalEvent instanceof PointerEvent)) return; - - const pointerEvent = event.data.originalEvent; - if(pointerEvent.button === 2) return; - - const location = event.data.global; - this.tileHitDetection(location, true, true); - }); + if(!this._isPointerDown) return; + + const location = new NitroPoint(event.offsetX, event.offsetY); + this.tileHitDetection(location, false); } - private tileHitDetection(tempPoint: NitroPoint, setHolding: boolean, isClick: boolean = false): boolean + private tileHitDetection(tempPoint: NitroPoint, isClick: boolean = false): boolean { - // @ts-ignore - const buffer = this._tilemapRenderer.pointsBuf; - const bufSize = POINT_STRUCT_SIZE; + const mousePositionX = Math.floor(tempPoint.x); + const mousePositionY = Math.floor(tempPoint.y); - const len = buffer.length; + const width = TILE_SIZE; + const height = TILE_SIZE / 2; - if(setHolding) + for(let y = 0; y < this._tilemap.length; y++) { - this._isHolding = true; - } - - for(let j = 0; j < len; j += bufSize) - { - const bufIndex = j + bufSize; - const data = buffer.slice(j, bufIndex); - - const width = TILE_SIZE; - const height = TILE_SIZE / 2; - - const mousePositionX = Math.floor(tempPoint.x); - const mousePositionY = Math.floor(tempPoint.y); - - const tileStartX = data[2]; - const tileStartY = data[3]; - - const centreX = tileStartX + (width / 2); - const centreY = tileStartY + (height / 2); - - const dx = Math.abs(mousePositionX - centreX); - const dy = Math.abs(mousePositionY - centreY); - - const solution = (dx / (width * 0.5) + dy / (height * 0.5) <= 1);//todo: improve this - if(solution) + for(let x = 0; x < this.tilemap[y].length; x++) { - if(this._isHolding) + const [ tileStartX, tileStartY ] = getScreenPositionForTile(x, y); + + const centreX = tileStartX + (width / 2); + const centreY = tileStartY + (height / 2); + + const dx = Math.abs(mousePositionX - centreX); + const dy = Math.abs(mousePositionY - centreY); + + const solution = (dx / (width * 0.5) + dy / (height * 0.5) <= 1);//todo: improve this + + if(solution) { - const [ realX, realY ] = getTileFromScreenPosition(tileStartX, tileStartY); - - if(isClick) + if(this._isPointerDown) { - this.onClick(realX, realY); - } + if(isClick) + { + this.onClick(x, y); + } - else if(this._lastUsedTile.x !== realX || this._lastUsedTile.y !== realY) - { - this._lastUsedTile.x = realX; - this._lastUsedTile.y = realY; - this.onClick(realX, realY); - } + else if(this._lastUsedTile.x !== x || this._lastUsedTile.y !== y) + { + this._lastUsedTile.x = x; + this._lastUsedTile.y = y; + this.onClick(x, y); + } + } + return true; } - return true; } - } return false; } @@ -221,7 +169,7 @@ export class FloorplanEditor extends PixiApplicationProxy if(!newHeight) return; - if(tile.isBlocked) return; + // if(tile.isBlocked) return; this._tilemap[y][x].height = newHeight; @@ -230,7 +178,7 @@ export class FloorplanEditor extends PixiApplicationProxy public renderTiles(): void { - this.tilemapRenderer.clear(); + this.clearCanvas(); for(let y = 0; y < this._tilemap.length; y++) { @@ -244,10 +192,13 @@ export class FloorplanEditor extends PixiApplicationProxy if(tile.isBlocked) assetName = FloorplanEditor.TILE_BLOCKED; - //if((tile.height === 'x') || tile.height === 'X') continue; - const [ positionX, positionY ] = getScreenPositionForTile(x, y); + if ((tile.height === 'x' || tile.height === 'X') && tile.isBlocked) assetName = 'x'; - this._tilemapRenderer.tile(this._assetCollection.getTexture(`floor_editor_${ assetName }`), positionX, positionY); + const [ positionX, positionY ] = getScreenPositionForTile(x, y); + + const asset = spritesheet.frames[assetName]; + + this.renderer.drawImage(this._image, asset.frame.x, asset.frame.y, asset.frame.w, asset.frame.h, positionX, positionY, asset.frame.w, asset.frame.h); } } } @@ -372,20 +323,25 @@ export class FloorplanEditor extends PixiApplicationProxy public clear(): void { - this._tilemapRenderer.interactive = false; this._tilemap = []; this._doorLocation.set(-1, -1); this._width = 0; this._height = 0; - this._isHolding = false; + this._isPointerDown = false; this._lastUsedTile.set(-1, -1); this._actionSettings.clear(); - this._tilemapRenderer.clear(); + this.clearCanvas(); } - public get tilemapRenderer(): NitroTilemap + public clearCanvas(): void { - return this._tilemapRenderer; + this.renderer.fillStyle = '0x000000'; + this.renderer.fillRect(0, 0, this._renderer.canvas.width, this._renderer.canvas.height); + } + + public get renderer(): CanvasRenderingContext2D + { + return this._renderer; } public get tilemap(): Tile[][] @@ -417,4 +373,4 @@ export class FloorplanEditor extends PixiApplicationProxy return FloorplanEditor._INSTANCE; } -} +} \ No newline at end of file diff --git a/src/components/floorplan-editor/common/FloorplanResource.ts b/src/components/floorplan-editor/common/FloorplanResource.ts new file mode 100644 index 0000000..eb8561d --- /dev/null +++ b/src/components/floorplan-editor/common/FloorplanResource.ts @@ -0,0 +1,227 @@ +export const imageBase64 = + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAAC+CAMAAADnThrbAAAAYFBMVEUAAAAiIiIAZf8A6P8A/5MZ/wCb/wD/tQD/MgD/AHr/APxDXocAkf8A/+oA/2hE/wDy/wD/iQD/BwD/AKXWAP////8AvP8A/78A/z1w/wD/4AD/XgD/ACP/ANGqAP8QEBBSz3qJAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAABJxJREFUeNrt1tuOszoMBeDpD7QFBloKDGf6/m+51UTj1PUhN1uWOup3vSQLkSzn6+vV4fAV9X9lLIcdDv/+xWKHw/d3PPPzE8k8Rj1osceoBz3z4yiZ31HauN9R2rjfUcq451HSuOdR0rjnUcK411HcuNdR3LjXUcw4btTrOG7U6zhu1Ms4adTzOGnU8zhpVBh30Eb5cQ/fKp/5UR1+51l9mfU/Mz6NxvfMuEGMu9G49f/y8vzLz4Ikif/8qopnhiF6FhNHP9aVo2cGR71lCZAvbAXkzADE/kgQvooqhM8MCNuMCUFLtiJoZiBI5ycsvD4qFs4MLLTNElFYjJUoZAYRPAsSlV/5lcpnBhU8C6y+zPqfGZ9G43tm3CDG3Wjc+p9N/Z7PgjSN//y6jmfGMXoWU0c/1rWjZ0ZHvWUpkC9sDeTMCMT+SBG+imqEz4wI24wpQUu2JmhmJEjnpyy8PmoWzowstM1SUViMtShkRhE8C1KVX/m1ymdGFTwLrL7M+p8Zn0bje2bcIMbdaNz6n039ns+CLIv//Mslnpmm6FnMHP1YXxw9MznqLcuAfGEvQM5MQOyPDOGr6ILwmQlhmzEjaMleCJqZCNL5GQuvjwsLZyYW2maZKCzGiyhkJhE8CzKVX/kXlc9MKngWWH2Z9T8zPo3G98y4QYy70bj1P5v6PZ8Fx2P851+v8cw8R8/i0dGP9dXRM7Oj3rIjkC/sFciZGYj9cUT4KroifGZG2GY8ErRkrwTNzATp/CMLr48rC2dmFtpmR1FYjFdRyMwieBYcVX7lX1U+M6vgWWD1Zdb/zPg0Gt8z4wYx7kbj1v9s6vd8FpxO8Z/fNPHMskTP4snRj3Xj6JnFUW/ZCcgXtgFyZgFif5wQvooahM8sCNuMJ4KWbEPQzEKQzj+x8PpoWDizsNA2O4nCYmxEIbOI4FlwUvmV36h8ZlHBs8Dqy6z/mfFpNL5nxg1i3I3Grf/Z1O/5LDif4z//dotn1jV6Fs+Ofqxvjp5ZHfWWnYF8YW9AzqxA7I8zwlfRDeEzK8I245mgJXsjaGYlSOefWXh93Fg4s7LQNjuLwmK8iUJmFcGz4KzyK/+m8plVBc8Cqy+z/mfGp9H4nhk3iHE3Grf+Z1O/57Mgz+M/v23jmW2LnsXc0Y916+iZzVFvWQ7kC9sCObMBsT9yhK+iFuEzG8I2Y07Qkm0JmtkI0vk5C6+PloUzGwtts1wUFmMrCplNBM+CXOVXfqvymU0FzwKrL7P+Z8an0fieGTeIcTcat/5nU7/ns6Ao4j+/6+KZfY+excLRj3Xn6JndUW9ZAeQL2wE5swOxPwqEr6IO4TM7wjZjQdCS7Qia2QnS+QULr4+OhTM7C22zQhQWYycKmV0Ez4JC5Vd+p/KZXQXPAqsvs/5nxqfR+J4ZN4hxNxq3/mdTv+ezoCzjP7/v45n7PXoWS0c/1r2jZ+6OestKIF/YHsiZOxD7o0T4KuoRPnNH2GYsCVqyPUEzd4J0fsnC66Nn4cydhbZZKQqLsReFzF0Ez4JS5Vd+r/KZuwqeBVZfZv3PjE+j8T0zbhDjbjRu/b+0PP8DZwi9QurvbfwAAAAASUVORK5CYII='; + +export const spritesheet = { + frames: { + '0': { + frame: { x: 1, y: 1, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '1': { + frame: { x: 37, y: 1, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '2': { + frame: { x: 73, y: 1, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '3': { + frame: { x: 1, y: 20, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '4': { + frame: { x: 37, y: 20, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '5': { + frame: { x: 73, y: 20, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '6': { + frame: { x: 1, y: 39, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '7': { + frame: { x: 37, y: 39, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '8': { + frame: { x: 73, y: 39, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + '9': { + frame: { x: 1, y: 58, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'a': { + frame: { x: 37, y: 58, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'b': { + frame: { x: 73, y: 58, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'c': { + frame: { x: 1, y: 77, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'd': { + frame: { x: 37, y: 77, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'e': { + frame: { x: 73, y: 77, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'f': { + frame: { x: 1, y: 96, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'g': { + frame: { x: 37, y: 96, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'h': { + frame: { x: 73, y: 96, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'i': { + frame: { x: 1, y: 115, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'j': { + frame: { x: 37, y: 115, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'k': { + frame: { x: 73, y: 115, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'l': { + frame: { x: 1, y: 134, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'm': { + frame: { x: 37, y: 134, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'n': { + frame: { x: 73, y: 134, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'o': { + frame: { x: 1, y: 153, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'p': { + frame: { x: 37, y: 153, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'q': { + frame: { x: 73, y: 153, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'r_blocked': { + frame: { x: 1, y: 172, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'r_door': { + frame: { x: 37, y: 172, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + 'x': { + frame: { x: 73, y: 172, w: 34, h: 17 }, + rotated: false, + trimmed: false, + spriteSourceSize: { x: 0, y: 0, w: 34, h: 17 }, + sourceSize: { w: 34, h: 17 }, + }, + }, + meta: { + app: 'https://www.codeandweb.com/texturepacker', + version: '1.0', + image: 'tiles.png', + format: 'RGBA8888', + size: { w: 108, h: 190 }, + scale: '1', + smartupdate: + '$TexturePacker:SmartUpdate:6d0f8373580629749f786a0b0f6c6bb9:96dff9df69bdc6938cf02f254bbe028b:accbe1e7e294ded8391337fc1c446319$', + }, +}; \ No newline at end of file diff --git a/src/components/floorplan-editor/common/Utils.ts b/src/components/floorplan-editor/common/Utils.ts index 841b193..78cc452 100644 --- a/src/components/floorplan-editor/common/Utils.ts +++ b/src/components/floorplan-editor/common/Utils.ts @@ -5,14 +5,14 @@ export const getScreenPositionForTile = (x: number, y: number): [number , number let positionX = (x * TILE_SIZE / 2) - (y * TILE_SIZE / 2); const positionY = (x * TILE_SIZE / 4) + (y * TILE_SIZE / 4); - positionX = positionX + 1024; // center the map in the canvas + positionX = positionX + 1600; // center the map in the canvas return [ positionX, positionY ]; } export const getTileFromScreenPosition = (x: number, y: number): [number, number] => { - const translatedX = x - 1024; // after centering translation + const translatedX = x - 1600; // after centering translation const realX = ((translatedX /(TILE_SIZE / 2)) + (y / (TILE_SIZE / 4))) / 2; const realY = ((y /(TILE_SIZE / 4)) - (translatedX / (TILE_SIZE / 2))) / 2; diff --git a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx index 6db052e..1073f01 100644 --- a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx +++ b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx @@ -4,8 +4,8 @@ import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/f import { SendMessageComposer } from '../../../api'; import { Base, Button, Column, ColumnProps, Flex, Grid } from '../../../common'; import { useMessageEvent } from '../../../hooks'; -import { FloorplanEditor } from '../common/FloorplanEditor'; import { useFloorplanEditorContext } from '../FloorplanEditorContext'; +import { FloorplanEditor } from '../common/FloorplanEditor'; export const FloorplanCanvasView: FC = props => { @@ -32,7 +32,7 @@ export const FloorplanCanvasView: FC = props => setOccupiedTilesReceived(true); - elementRef.current.scrollTo((FloorplanEditor.instance.view.width / 3), 0); + elementRef.current.scrollTo((FloorplanEditor.instance.renderer.canvas.width / 3), 0); }); useMessageEvent(RoomEntryTileMessageEvent, event => @@ -86,6 +86,25 @@ export const FloorplanCanvasView: FC = props => } } + const onPointerEvent = (event: PointerEvent) => + { + event.preventDefault(); + + switch(event.type) + { + case 'pointerout': + case 'pointerup': + FloorplanEditor.instance.onPointerRelease(); + break; + case 'pointerdown': + FloorplanEditor.instance.onPointerDown(event); + break; + case 'pointermove': + FloorplanEditor.instance.onPointerMove(event); + break; + } + } + useEffect(() => { return () => @@ -116,22 +135,46 @@ export const FloorplanCanvasView: FC = props => SendMessageComposer(new GetRoomEntryTileMessageComposer()); SendMessageComposer(new GetOccupiedTilesMessageComposer()); - FloorplanEditor.instance.tilemapRenderer.interactive = true; + const currentElement = elementRef.current; - if(!elementRef.current) return; + if(!currentElement) return; + + currentElement.appendChild(FloorplanEditor.instance.renderer.canvas); - elementRef.current.appendChild(FloorplanEditor.instance.renderer.view); + currentElement.addEventListener('pointerup', onPointerEvent); + + currentElement.addEventListener('pointerout', onPointerEvent); + + currentElement.addEventListener('pointerdown', onPointerEvent); + + currentElement.addEventListener('pointermove', onPointerEvent); + + return () => + { + if(currentElement) + { + currentElement.removeEventListener('pointerup', onPointerEvent); + + currentElement.removeEventListener('pointerout', onPointerEvent); + + currentElement.removeEventListener('pointerdown', onPointerEvent); + + currentElement.removeEventListener('pointermove', onPointerEvent); + } + } }, []); + const isSmallScreen = () => window.innerWidth < 768; + return ( - + - + - + @@ -153,4 +196,4 @@ export const FloorplanCanvasView: FC = props => { children } ); -} +} \ No newline at end of file diff --git a/src/components/floorplan-editor/views/FloorplanImportExportView.tsx b/src/components/floorplan-editor/views/FloorplanImportExportView.tsx index c8f64d3..fada3b4 100644 --- a/src/components/floorplan-editor/views/FloorplanImportExportView.tsx +++ b/src/components/floorplan-editor/views/FloorplanImportExportView.tsx @@ -52,4 +52,4 @@ export const FloorplanImportExportView: FC = pro ); -} +} \ No newline at end of file diff --git a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx index d43a760..b168581 100644 --- a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx +++ b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx @@ -1,8 +1,7 @@ import { FC, useState } from 'react'; import { FaCaretLeft, FaCaretRight } from 'react-icons/fa'; -import ReactSlider from 'react-slider'; import { LocalizeText } from '../../../api'; -import { Column, Flex, LayoutGridItem, Text } from '../../../common'; +import { Column, Flex, LayoutGridItem, Slider, Text } from '../../../common'; import { COLORMAP, FloorAction } from '../common/Constants'; import { FloorplanEditor } from '../common/FloorplanEditor'; import { useFloorplanEditorContext } from '../FloorplanEditorContext'; @@ -157,8 +156,7 @@ export const FloorplanOptionsView: FC<{}> = props => { LocalizeText('floor.plan.editor.tile.height') }: { floorHeight } - = props => ); -} +} \ No newline at end of file diff --git a/submodules/renderer/src/api/asset/GraphicAssetCollection.ts b/submodules/renderer/src/api/asset/GraphicAssetCollection.ts index 990b78c..d2a39f1 100644 --- a/submodules/renderer/src/api/asset/GraphicAssetCollection.ts +++ b/submodules/renderer/src/api/asset/GraphicAssetCollection.ts @@ -1,6 +1,6 @@ import { BaseTexture, Resource, Texture } from '@pixi/core'; import { Spritesheet } from '@pixi/spritesheet'; -import { Dict } from '@pixi/utils'; +import { Dict } from '../utils'; import { GetTickerTime } from '../../pixi-proxy'; import { GraphicAsset } from './GraphicAsset'; import { GraphicAssetPalette } from './GraphicAssetPalette'; diff --git a/submodules/renderer/src/core/communication/SocketConnection.ts b/submodules/renderer/src/core/communication/SocketConnection.ts index 4d493f7..2fe5a9e 100644 --- a/submodules/renderer/src/core/communication/SocketConnection.ts +++ b/submodules/renderer/src/core/communication/SocketConnection.ts @@ -87,6 +87,7 @@ export class SocketConnection extends EventDispatcher implements IConnection this._dataBuffer = new ArrayBuffer(0); this._socket = new WebSocket(socketUrl); + this._socket.binaryType = 'arraybuffer'; this._socket.addEventListener(WebSocketEventEnum.CONNECTION_OPENED, this.onOpen); this._socket.addEventListener(WebSocketEventEnum.CONNECTION_CLOSED, this.onClose); @@ -104,6 +105,8 @@ export class SocketConnection extends EventDispatcher implements IConnection this._socket.removeEventListener(WebSocketEventEnum.CONNECTION_MESSAGE, this.onMessage); if(this._socket.readyState === WebSocket.OPEN) this._socket.close(); + + NitroLogger.error('Bye Bye connection.'); this._socket = null; } @@ -129,16 +132,9 @@ export class SocketConnection extends EventDispatcher implements IConnection //this.dispatchConnectionEvent(SocketConnectionEvent.CONNECTION_MESSAGE, event); - const reader = new FileReader(); + this._dataBuffer = this.concatArrayBuffers(this._dataBuffer, event.data); - reader.readAsArrayBuffer(event.data); - - reader.onloadend = () => - { - this._dataBuffer = this.concatArrayBuffers(this._dataBuffer, (reader.result as ArrayBuffer)); - - this.processReceivedData(); - }; + this.processReceivedData(); } private dispatchConnectionEvent(type: string, event: Event): void diff --git a/submodules/renderer/src/nitro/Plugins.ts b/submodules/renderer/src/nitro/Plugins.ts index 5cf5e8c..6fe069f 100644 --- a/submodules/renderer/src/nitro/Plugins.ts +++ b/submodules/renderer/src/nitro/Plugins.ts @@ -2,7 +2,6 @@ import '@pixi/canvas-display'; import { BatchRenderer, extensions } from '@pixi/core'; import { Extract } from '@pixi/extract'; import '@pixi/graphics-extras'; -import { InteractionManager } from '@pixi/interaction'; import { AppLoaderPlugin } from '@pixi/loaders'; import '@pixi/math-extras'; import '@pixi/mixin-cache-as-bitmap'; @@ -17,7 +16,6 @@ extensions.add( BatchRenderer, Extract, TilingSpriteRenderer, - InteractionManager, SpritesheetLoader, AppLoaderPlugin, TickerPlugin); diff --git a/submodules/renderer/src/pixi-proxy/NitroTilemap.ts b/submodules/renderer/src/pixi-proxy/NitroTilemap.ts deleted file mode 100644 index 0047777..0000000 --- a/submodules/renderer/src/pixi-proxy/NitroTilemap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Tilemap } from '@pixi/tilemap'; - -export class NitroTilemap extends Tilemap -{ - -} diff --git a/submodules/renderer/src/pixi-proxy/PixiInteractionEventProxy.ts b/submodules/renderer/src/pixi-proxy/PixiInteractionEventProxy.ts deleted file mode 100644 index ba87590..0000000 --- a/submodules/renderer/src/pixi-proxy/PixiInteractionEventProxy.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { InteractionEvent } from '@pixi/interaction'; - -export class PixiInteractionEventProxy extends InteractionEvent -{} diff --git a/submodules/renderer/src/pixi-proxy/index.ts b/submodules/renderer/src/pixi-proxy/index.ts index 0a12f16..4fb0ebc 100644 --- a/submodules/renderer/src/pixi-proxy/index.ts +++ b/submodules/renderer/src/pixi-proxy/index.ts @@ -1,4 +1,3 @@ -export { POINT_STRUCT_SIZE } from '@pixi/tilemap'; export * from './adjustment-filter'; export * from './CopyChannelFilter'; export * from './GetTicker'; @@ -16,9 +15,7 @@ export * from './NitroRenderTexture'; export * from './NitroSprite'; export * from './NitroSpritesheet'; export * from './NitroTexture'; -export * from './NitroTilemap'; export * from './PaletteMapFilter'; export * from './PixiApplicationProxy'; -export * from './PixiInteractionEventProxy'; export * from './RoomTextureUtils'; export * from './TextureUtils';