add circular seatplan component

src/webapp/src/App.vue

@@ -34,6 +34,7 @@
     --overlay-color: rgba(37, 37, 37, 0.575);
     --inactive-color: rgb(100, 100, 100);
     --highlight-backdrop: rgb(143, 134, 192);
+    --PI: 3.14159265358979;
 }
 
 :root.dark {

src/webapp/src/components/seatplan/editor/window.vue

@@ -11,11 +11,13 @@
     <div id="window">
         <properties class="properties" v-model:posSize="selectedObject" @updated="handleUpdate" :scale-factor="scaleFactor"></properties>
         <div class="parent">
-            <Vue3DraggableResizable v-for="draggable in draggables" :initW="draggable.w" :initH="draggable.h" v-model:x="draggable.x" v-model:y="draggable.y" v-model:w="draggable.w" v-model:h="draggable.h"
-                v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent( draggable.id );"
-                @drag-end="saveHistory();" @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box">
-                <p v-if="draggable.draggable">This is a test example</p>
-            </Vue3DraggableResizable>
+            <div class="content-parent">
+                <Vue3DraggableResizable v-for="draggable in draggables" :initW="draggable.w" :initH="draggable.h" v-model:x="draggable.x" v-model:y="draggable.y" v-model:w="draggable.w" v-model:h="draggable.h"
+                    v-model:active="draggable.active" :draggable="draggable.draggable" :resizable="draggable.resizable" :parent="true" @activated="activateComponent( draggable.id );"
+                    @drag-end="saveHistory();" @resize-end="saveHistory();" @contextmenu="( e ) => { e.preventDefault(); }" class="draggable-box">
+                    <circularSeatplanComponent :scale-factor="scaleFactor" :w="draggable.w" :h="draggable.h"></circularSeatplanComponent>
+                </Vue3DraggableResizable>
+            </div>
         </div>
         <div>
             <button v-if="available.undo" @click="historyOp( 'undo' )">Undo</button>
@@ -31,13 +33,15 @@
 <script>
     import Vue3DraggableResizable from 'vue3-draggable-resizable';
     import properties from '@/components/seatplan/editor/properties.vue';
+    import circularSeatplanComponent from '@/components/seatplan/seatplanComponents/seats/circular.vue';
     import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
 
     export default {
         'name': 'window',
         components: { 
             Vue3DraggableResizable,
-            properties
+            properties,
+            circularSeatplanComponent,
         },
         data() {
             return {
@@ -251,7 +255,8 @@
 <style scoped>
     .parent {
         aspect-ratio: 16 / 9;
-        height: 80vh;
+        height: 90vh;
+        left: 10%;
         position: relative;
         border: black 1px solid;
         user-select: none;
@@ -261,7 +266,7 @@
     }
 
     .draggable-box {
-        border: black 2px solid;
+        border: black 1px solid;
         cursor: all-scroll;
     }
 
@@ -279,4 +284,9 @@
         top: 10vh;
         left: 79vw;
     }
+
+    .content-parent {
+        aspect-ratio: 16 / 9;
+        height: 3000px;
+    }
 </style>

src/webapp/src/components/seatplan/seatplanComponents/seats/circular.vue

@@ -0,0 +1,107 @@
+<!--
+*				myevent - properties.vue
+*
+*	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+-->
+
+<template>
+    <div id="circularSeatplan">
+        <div v-for="row in seats">
+            <div v-for="seat in row">
+                <span class="material-symbols-outlined seats" :style="seat.style">living</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.seats {
+    position: absolute;
+}
+</style>
+
+<script>
+export default {
+    name: 'circularSeatplanComponent',
+    props: {
+        h: {
+            type: Number,
+            "default": 100,
+        },
+        w: {
+            type: Number,
+            "default": 200,
+        },
+        scaleFactor: {
+            type: Number,
+            "default": 1,
+        },
+        origin: {
+            type: Number,
+            "default": 1,
+        },
+    },
+    data () {
+        return {
+            seats: {},
+        }
+    },
+    methods: {
+        calculateChairs () {
+            // Size of seat at scale 1 is 32px
+            // w & h are normalised
+            let w = Math.round( this.w / this.scaleFactor );
+            let h = Math.round( this.h / this.scaleFactor );
+            const size = 37;
+            let count = Math.min( Math.floor( w / size ), Math.floor( h / size  ) );
+            this.seats = {};
+            for ( let row = 0; row < count; row++ ) {
+                let nn = row * ( Math.PI / 2 );
+                let r = row * size;
+                this.seats[ row ] = {};
+                for ( let n = 0; n < nn; n++ ) {
+                    let phi = n * size / ( row * size );
+                    if ( this.origin === 1 ) {
+                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi }rad` };
+                    } else if ( this.origin === 2 ) {
+                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; bottom: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI * 2 - phi }rad` };
+                    } else if ( this.origin === 3 ) {
+                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ r * Math.cos( phi ) * this.scaleFactor }px; right: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ phi + Math.PI }rad` };
+                    } else if ( this.origin === 4 ) {
+                        this.seats[ row ][ n ] = { 'style': `font-size: ${this.scaleFactor * 200}%; top: ${ r * Math.cos( phi ) * this.scaleFactor }px; left: ${ r * Math.sin( phi ) * this.scaleFactor }px; rotate: ${ Math.PI - phi }rad` };
+                    }
+                }
+            }
+        },
+        setScaleFactor () {
+            for ( let row in this.seats ) {
+                for ( let seat in this.seats[ row ] ) {
+                    let styles = this.seats[ row ][ seat ].style.substring( this.seats[ row ][ seat ].style.indexOf( ';' ) + 1 );
+                    this.seats[ row ][ seat ].style = `font-size: ${this.scaleFactor * 200}%;` + styles;
+                }
+            }
+        }
+    },
+    watch: {
+        scaleFactor() {
+            this.setScaleFactor();
+        },
+        h() {
+            this.calculateChairs();
+        },
+        w() {
+            this.calculateChairs();
+        },
+        origin() {
+            this.calculateChairs();
+        }
+    },
+    created() {
+        this.calculateChairs();
+    }
+}
+</script>
+