feat(floor-creator, frontend): show element angle

Smrtnyk · Dec 27, 2024 · bc698fe · bc698fe
1 parent 3e7cce5
commit bc698fe
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 0 deletions.
diff --git a/packages/floor-creator/src/elements/Bar.ts b/packages/floor-creator/src/elements/Bar.ts
@@ -405,6 +405,12 @@ export class Bar extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     getBaseFill(): string {
         return this.barBody.get("fill") as string;
     }

diff --git a/packages/floor-creator/src/elements/Cloakroom.ts b/packages/floor-creator/src/elements/Cloakroom.ts
@@ -113,6 +113,12 @@ export class Cloakroom extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     getBaseFill(): string {
         return this.counterBody.get("fill") as string;
     }

diff --git a/packages/floor-creator/src/elements/DJBooth.ts b/packages/floor-creator/src/elements/DJBooth.ts
@@ -97,6 +97,12 @@ export class DJBooth extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     getBaseFill(): string {
         return "";
     }

diff --git a/packages/floor-creator/src/elements/Door.ts b/packages/floor-creator/src/elements/Door.ts
@@ -48,6 +48,12 @@ export class Door extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     flip(): void {
         // Store the current bounding rectangle before flipping
         const boundingRectBefore = this.getBoundingRect();

diff --git a/packages/floor-creator/src/elements/EditableShape.ts b/packages/floor-creator/src/elements/EditableShape.ts
@@ -63,6 +63,12 @@ export class EditableShape extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     setBaseFill(val: string): void {
         this.shape.set("fill", val);
         this.canvas?.requestRenderAll();

diff --git a/packages/floor-creator/src/elements/Sofa.ts b/packages/floor-creator/src/elements/Sofa.ts
@@ -59,6 +59,12 @@ export class Sofa extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     getBaseFill(): string {
         return this.sofaBase.get("fill") as string;
     }

diff --git a/packages/floor-creator/src/elements/Stage.ts b/packages/floor-creator/src/elements/Stage.ts
@@ -89,6 +89,12 @@ export class Stage extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     getBaseFill(): string {
         return "";
     }

diff --git a/packages/floor-creator/src/elements/Table.ts b/packages/floor-creator/src/elements/Table.ts
@@ -98,6 +98,12 @@ export abstract class Table extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     private handleScaling(): void {
         this.enforceMinimumDimensions();
         this.adjustTextScaling();

diff --git a/packages/floor-creator/src/elements/Wall.ts b/packages/floor-creator/src/elements/Wall.ts
@@ -49,6 +49,12 @@ export class Wall extends Group implements FloorEditorElement {
         this.canvas?.requestRenderAll();
     }
 
+    setAngle(angle: number): void {
+        this.angle = angle;
+        this.setCoords();
+        this.canvas?.requestRenderAll();
+    }
+
     changeToOutlinedMode(): void {
         this.wallRect.set({
             // Makes the background transparent

diff --git a/packages/floor-creator/src/types.ts b/packages/floor-creator/src/types.ts
@@ -36,6 +36,7 @@ export interface FloorEditorElement extends FabricObject {
     changeToFilledMode?(): void;
 
     setDimensions(width: number, height: number): void;
+    setAngle(angle: number): void;
     nextDesign?(): void;
 }
 

diff --git a/packages/frontend/src/components/Floor/FloorEditorTopControls.vue b/packages/frontend/src/components/Floor/FloorEditorTopControls.vue
@@ -32,22 +32,32 @@ const getElementHeight = computed(function () {
         ? Math.round(selectedFloorElement.height * selectedFloorElement.scaleY)
         : 0;
 });
+const getElementAngle = computed(() => (selectedFloorElement ? selectedFloorElement.angle : 0));
+
 const localWidth = ref(getElementWidth.value);
 const localHeight = ref(getElementHeight.value);
+const localAngle = ref(getElementAngle.value);
 const elementColor = ref(selectedFloorElement?.getBaseFill?.() ?? "");
 
 watch(
     () => selectedFloorElement,
     function (newEl) {
         localWidth.value = newEl ? Math.round(newEl.width * newEl.scaleX) : 0;
         localHeight.value = newEl ? Math.round(newEl.height * newEl.scaleY) : 0;
+        localAngle.value = newEl ? newEl.angle : 0;
 
         if (newEl?.getBaseFill) {
             elementColor.value = newEl.getBaseFill();
         }
     },
+    { immediate: true, deep: true },
 );
 
+watch(localAngle, (newAngle) => {
+    if (!selectedFloorElement) return;
+    selectedFloorElement.setAngle(newAngle);
+});
+
 watch(localWidth, function (newWidth) {
     if (!selectedFloorElement) {
         return;
@@ -120,6 +130,12 @@ onMounted(function () {
         <div class="col-2">
             <q-input rounded v-model.number="localHeight" standout type="number" label="Height" />
         </div>
+
+        <!-- Angle Control -->
+        <div class="col-2">
+            <q-input rounded v-model.number="localAngle" standout type="number" label="Angle°" />
+        </div>
+
         <div class="col-3" v-if="isTable(selectedFloorElement)">
             <q-input
                 :debounce="500"