From baf8b62e431dc61ab46ccae1f889ef00a1a91096 Mon Sep 17 00:00:00 2001 From: dank074 Date: Thu, 20 Jul 2023 17:35:13 -0500 Subject: [PATCH] redo floorplan editor: now a LOT more performant --- .../floorplan-editor/FloorplanEditorView.tsx | 5 - .../common/FloorplanEditor.ts | 136 +++++------ .../common/FloorplanResource.ts | 227 ++++++++++++++++++ .../views/FloorplanCanvasView.tsx | 6 +- 4 files changed, 289 insertions(+), 85 deletions(-) create mode 100644 src/components/floorplan-editor/common/FloorplanResource.ts diff --git a/src/components/floorplan-editor/FloorplanEditorView.tsx b/src/components/floorplan-editor/FloorplanEditorView.tsx index 492a2ed1..6f2bcc82 100644 --- a/src/components/floorplan-editor/FloorplanEditorView.tsx +++ b/src/components/floorplan-editor/FloorplanEditorView.tsx @@ -135,11 +135,6 @@ export const FloorplanEditorView: FC<{}> = props => return () => RemoveLinkEventTracker(linkTracker); }, []); - useEffect(() => - { - FloorplanEditor.instance.initialize(); - }, []); - return ( { isVisible && diff --git a/src/components/floorplan-editor/common/FloorplanEditor.ts b/src/components/floorplan-editor/common/FloorplanEditor.ts index 3e9c7a99..7e92800b 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, 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; @@ -17,26 +18,26 @@ export class FloorplanEditor extends PixiApplicationProxy 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, - sharedTicker: true - }); + const canvas = document.createElement('canvas'); + + canvas.height = height; + canvas.width = width; + + this._renderer = canvas.getContext('2d'); + + this._image = new Image(); + + this._image.src = imageBase64; this._tilemap = []; this._doorLocation = new NitroPoint(0, 0); @@ -47,22 +48,6 @@ export class FloorplanEditor extends PixiApplicationProxy this._actionSettings = new ActionSettings(); } - public initialize(): void - { - if(this._isInitialized) return; - - const collection = GetAssetManager().getCollection('floor_editor'); - - if(!collection) return; - - this._assetCollection = collection; - this._tilemapRenderer = new NitroTilemap(collection.baseTexture); - - this.stage.addChild(this._tilemapRenderer); - - this._isInitialized = true; - } - public onPointerRelease(): void { this._isPointerDown = false; @@ -89,55 +74,46 @@ export class FloorplanEditor extends PixiApplicationProxy 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; - for(let j = 0; j < len; j += bufSize) + for(let y = 0; y < this._tilemap.length; y++) { - 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._isPointerDown) + 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; } @@ -200,7 +176,7 @@ export class FloorplanEditor extends PixiApplicationProxy public renderTiles(): void { - this.tilemapRenderer.clear(); + this.clearCanvas(); for(let y = 0; y < this._tilemap.length; y++) { @@ -216,8 +192,10 @@ export class FloorplanEditor extends PixiApplicationProxy //if((tile.height === 'x') || tile.height === 'X') continue; const [ positionX, positionY ] = getScreenPositionForTile(x, y); - - this._tilemapRenderer.tile(this._assetCollection.getTexture(`floor_editor_${ assetName }`), positionX, positionY); + + 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); } } } @@ -342,7 +320,6 @@ export class FloorplanEditor extends PixiApplicationProxy public clear(): void { - //this._tilemapRenderer.interactive = false; this._tilemap = []; this._doorLocation.set(-1, -1); this._width = 0; @@ -350,12 +327,17 @@ export class FloorplanEditor extends PixiApplicationProxy 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.clearRect(0, 0, this._renderer.canvas.width, this._renderer.canvas.height); + } + + public get renderer(): CanvasRenderingContext2D + { + return this._renderer; } public get tilemap(): Tile[][] diff --git a/src/components/floorplan-editor/common/FloorplanResource.ts b/src/components/floorplan-editor/common/FloorplanResource.ts new file mode 100644 index 00000000..8faf30b0 --- /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$', + }, +}; diff --git a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx index 50fed59a..8b9b8102 100644 --- a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx +++ b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx @@ -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 => @@ -139,8 +139,8 @@ export const FloorplanCanvasView: FC = props => if(!currentElement) return; - // @ts-ignore - currentElement.appendChild(FloorplanEditor.instance.view); + + currentElement.appendChild(FloorplanEditor.instance.renderer.canvas); currentElement.addEventListener('pointerup', onPointerEvent);