redo floorplan editor: now a LOT more performant

src/components/floorplan-editor/FloorplanEditorView.tsx

@@ -135,11 +135,6 @@ export const FloorplanEditorView: FC<{}> = props =>
         return () => RemoveLinkEventTracker(linkTracker);
     }, []);
 
-    useEffect(() =>
-    {
-        FloorplanEditor.instance.initialize();
-    }, []);
-
     return (
         <FloorplanEditorContextProvider value={ { originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings } }>
             { isVisible &&

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({
+        const canvas = document.createElement('canvas');
-            width: width,
+
-            height: height,
+        canvas.height = height;
-            backgroundColor: 0x000000,
+        canvas.width = width;
-            antialias: true,
+
-            autoDensity: true,
+        this._renderer = canvas.getContext('2d');
-            resolution: 1,
+
-            sharedTicker: true
+        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 mousePositionX = Math.floor(tempPoint.x);
-        const buffer = this._tilemapRenderer.pointsBuf;
+        const mousePositionY = Math.floor(tempPoint.y);
-        const bufSize = POINT_STRUCT_SIZE;
 
-        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;
+            for(let x = 0; x < this.tilemap[y].length; x++)
-            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)
             {
-                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(this._isPointerDown)
-
-                    if(isClick)
                     {
-                        this.onClick(realX, realY);
+                        if(isClick)
-                    }
+                        {
+                            this.onClick(x, y);
+                        }
                     
-                    else if(this._lastUsedTile.x !== realX || this._lastUsedTile.y !== realY)
+                        else if(this._lastUsedTile.x !== x || this._lastUsedTile.y !== y)
-                    {
+                        {
-                        this._lastUsedTile.x = realX;
+                            this._lastUsedTile.x = x;
-                        this._lastUsedTile.y = realY;
+                            this._lastUsedTile.y = y;
-                        this.onClick(realX, realY);
+                            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[][]

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$',
+    },
+};

src/components/floorplan-editor/views/FloorplanCanvasView.tsx

@@ -32,7 +32,7 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
 
         setOccupiedTilesReceived(true);
         
-        elementRef.current.scrollTo((FloorplanEditor.instance.view.width / 3), 0);
+        elementRef.current.scrollTo((FloorplanEditor.instance.renderer.canvas.width / 3), 0);
     });
 
     useMessageEvent<RoomEntryTileMessageEvent>(RoomEntryTileMessageEvent, event =>
@@ -139,8 +139,8 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
 
         if(!currentElement) return;
 
-        // @ts-ignore
+        
-        currentElement.appendChild(FloorplanEditor.instance.view);
+        currentElement.appendChild(FloorplanEditor.instance.renderer.canvas);
 
         currentElement.addEventListener('pointerup', onPointerEvent);