From 08d26210e5b99cb8d9091556f8784d21d6aad864 Mon Sep 17 00:00:00 2001
From: Arno <u21457451@tuks.co.za>
Date: Fri, 15 Sep 2023 15:28:32 +0200
Subject: [PATCH] Added small fixes to canvas

---
 .../floorplan-editor-page.component.html      |  1 +
 .../floorplan-editor-page.component.ts        | 51 +++++++++++++++++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.html b/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.html
index 279ac89e..9eea49dd 100644
--- a/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.html
+++ b/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.html
@@ -365,6 +365,7 @@ <h1 class="text-2xl font-semibold text-center mt-5" [ngClass]="{'text-white': !l
         class="relative col-span-29 bg-white rounded-lg md:rounded-xl shadow-[0px_5px_15px_2px_rgba(0,0,0,0.2)] text-ept-deep-grey p-2 overflow-hidden"
         (drop)="onDrop($event)"
         (dragover)="onDragOver($event)"
+        [ngClass]="{'pointer-events-none': canvasItems.length === 0 && preventCreatingWalls}"
         >
         <p
             class="bg-white z-50 rounded-md text-center text-2xl text-ept-deep-grey text-opacity-30 font-semibold mt-10 absolute top-1/2 left-1/3"
diff --git a/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts b/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts
index a9263097..4dca2cfd 100644
--- a/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts
+++ b/libs/app/components/src/lib/floorplan-editor-page/floorplan-editor-page.component.ts
@@ -731,7 +731,7 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
 
               const firstPromise = this.appApiService.getFloorLayoutImages(this.eventId).then((response: any) => {
                 if (response === null || response === '' || response.length === 0) return;
-                
+
                 response.forEach((obj: any) => {
                   const imageObjects = obj.imageObj;
                   const imageBase64 = obj.imageBase64;
@@ -750,6 +750,7 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
                       cursor: 'move',
                       databaseID: imageID,
                     });
+                    console.log(uploadedImagesLayer)
                     
                     uploadedImagesLayer.children?.forEach(child => {
                       const image = new Konva.Image(child.getAttrs());
@@ -848,6 +849,10 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
                 this.moveSensorsAndTooltipsToTop();
                 this.centerFloorPlan();
                 this.reorderCanvasItems();
+                if (this.canvasItems.length === 0) {
+                  this.canvasContainer.x(0);
+                  this.canvasContainer.y(0);
+                }
               });
             
           });
@@ -942,7 +947,6 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
           fill: 'white',
           opacity: 1,
         });
-        console.log(type)
         const oldText = type.getChildren().find(child => child instanceof Konva.Text) as Konva.Text;
         type.children = type.children?.filter(child => child.getClassName() !== 'Text');
         const newText = new Konva.Text({
@@ -1277,7 +1281,7 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
           this.canvas.batchDraw();
         }
       }
-      else if (event.ctrlKey) {
+      else if (event.ctrlKey && this.canvasItems.length !== 0) {
         this.ctrlDown = true;
         document.body.style.cursor = 'grab';
         if (this.mouseDown) {
@@ -2164,9 +2168,14 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
 
           //add line to canvasItems array
           this.canvasItems.push({
-            name: 'path',
+            name: 'wall',
             konvaObject: this.activePath,
           });
+          console.log(this.canvasItems);
+          this.removeDuplicates();
+          console.log(this.canvasItems);
+          this.removeFaultyPaths();
+          console.log(this.canvasItems);
 
           // set the height of the wall
           const height = Math.abs(snapPoint.y - this.activePath.y());
@@ -2190,6 +2199,32 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
         // Remove the mouse up event listener
         this.canvasContainer.off('mouseup', this.onMouseUp.bind(this));
       }
+
+      removeDuplicates() {
+        //loop through canvasItems array and remove duplicates
+        const unique: DroppedItem[] = [];
+        this.canvasItems.forEach((item) => {
+          if (!unique.some((uniqueItem) => uniqueItem.konvaObject === item.konvaObject)) {
+            unique.push(item);
+          }
+        });
+        this.canvasItems = unique;
+      }
+
+      removeFaultyPaths() {
+        const faultyPaths = this.canvasItems.filter((item) => 
+          item.konvaObject?.hasName('wall') &&
+          item.konvaObject?.getAttr('data') === 'M0,0 L0,0'
+        );
+        faultyPaths.forEach((path) => {
+          path.konvaObject?.remove();
+        });
+        // remove them from canvasItems
+        this.canvasItems = this.canvasItems.filter((item) =>
+          item.konvaObject?.hasName('wall') &&
+          item.konvaObject?.getAttr('data') !== 'M0,0 L0,0'
+        );
+      }
       
       createGridLines() {
         const grid = this.initialGridSize;
@@ -2585,6 +2620,9 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
         this.canvas = newCanvas;
         this.canvasItems = [];
         this.canvas.children?.forEach((item: any) => {
+          if (item.attrs.name === 'gridGroup' || item instanceof Konva.Transformer || item.attrs.name === 'selectionBox' || item.attrs.name === 'rectOverlay') {
+            return;
+          }
           const droppedItem = {
             name: item.attrs.name,
             konvaObject: item,
@@ -2632,7 +2670,10 @@ export class FloorplanEditorPageComponent implements OnInit, AfterViewInit{
         });
 
         // remove the grid lines, transformers and groups from the JSON data
-        json.children = json.children.filter((child: any) => {
+        json.children = json.children.filter((child: KonvaTypes) => {
+          if (child.attrs.name === 'wall' || child.attrs.name === 'stall' || child.attrs.name === 'sensor' || child.attrs.name === 'textBox' || child.attrs.name === 'uploadedFloorplan') {
+            child.attrs.opacity = 1;
+          }
           return child.attrs.name === 'wall' || child.attrs.name === 'stall' || child.attrs.name === 'sensor' || child.attrs.name === 'textBox' || child.attrs.name === 'uploadedFloorplan';
         });