!WIP! Feature/textbox vr space 20260421

app/src/components/entities/TextBox.vue

@@ -0,0 +1,46 @@
+<template>
+  <a-entity
+    :class="$attrs.class"
+    :scale="entityScale"
+    @click.stop="$emit('click')"
+  >
+    <a-plane
+      position="0 0 0.01"
+      width="2.4"
+      height="0.9"
+      material="color: #ffffff; opacity: 0.001; transparent: true; side: double"
+    />
+    <a-troika-text
+      :value="text"
+      :font-size="fontSize"
+      :color="color"
+      align="center"
+      anchor="center"
+      baseline="middle"
+      :max-width="maxWidth"
+      position="0 0 0.02"
+    />
+  </a-entity>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { arrToCoordString, quaternionTupleToAframeRotation } from '@/modules/3DUtils'
+
+const props = defineProps<{
+  placedObject: any
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const textSettings = computed(() => props.placedObject.objectSettings ?? {})
+
+const text = computed(() => textSettings.value.text ?? 'Ny textbox')
+const fontSize = computed(() => textSettings.value.fontSize ?? 0.8)
+const color = computed(() => textSettings.value.color ?? '#ffffff')
+const maxWidth = computed(() => textSettings.value.maxWidth ?? 4)
+
+const entityScale = computed(() => arrToCoordString(props.placedObject.scale ?? [1, 1, 1]))
+</script>

app/src/composables/vrSpaceComposables.ts

@@ -53,7 +53,7 @@ const currentRaycastSelectorArray = computed<RaycastSelector[]>(() => {
       return ['.raycastable-surface'];
 
     case 'select-objects':
-      return ['.editable-object', '.clickable']
+      return ['.editable-object', '.clickable', '.editable-object *', '.clickable *']
 
     default:
       return ['.clickable'];

app/src/views/user/VrSpaceSettingsView.vue

@@ -237,6 +237,10 @@
             <AssetLibrary @asset-deleted="vrSpaceStore.reloadVrSpaceFromDB" :assets="libraryAssets"
               @asset-picked="onAssetPicked" />
           </div>
+          <button @click="createTextbox" class="btn btn-primary">
+            <span class="material-icons">text_fields</span>
+            Ny textbox
+          </button>
         </TabPanel>
         <TabPanel>
           <div class="space-y-4">
@@ -280,6 +284,10 @@
                     @click="selectedPlacedObject = placedObject" class="editable-object"
                     :scale="placedObject.scale ? arrToCoordString(placedObject.scale) : ''"
                     :asset="placedObject.asset" />
+                  <TextBox v-else-if="placedObject.type === 'text'"
+                    @click="selectedPlacedObject = placedObject"
+                    class="selectable-object editable-object"
+                    :placed-object="placedObject" />
                 </a-entity>
               </a-entity>
               <a-entity v-if="transformedSelectedObject">
@@ -293,6 +301,10 @@
                   :position="arrToCoordString(transformedSelectedObject.position)" class="selectable-object"
                   :scale="transformedSelectedObject.scale ? arrToCoordString(transformedSelectedObject.scale) : ''"
                   :asset="transformedSelectedObject.asset" />
+                  <TextBox v-else-if="transformedSelectedObject.type === 'text'"
+                    :key="`transformed-${transformedSelectedObject.placedObjectId}`"
+                    :placed-object="transformedSelectedObject"
+                    class="selectable-object editable-object" />
               </a-entity>
 
               <a-entity ref="spawnPosTag" v-if="spawnPosString" :position="spawnPosString">
@@ -381,6 +393,9 @@
                     type="radio" value="selfPlacement" aria-label="Hoppa in i scenen" class="btn btn-sm btn-primary"
                     v-model="currentRaycastReason"> -->
                   <pre>{{ currentCursorMode }}</pre>
+                  <pre>selected: {{ selectedPlacedObject?.type }} ({{ selectedPlacedObject?.placedObjectId?.slice(-4) }})</pre>
+<pre>transformed: {{ transformedSelectedObject?.type }}</pre>
+<pre>notEditing count: {{ placedObjectsNotBeingEdited.length }}</pre>
                   <button v-if="!vrComponentTag?.firstPersonViewActive" @click="setCursorMode('enterFirstPersonView')"
                     class="btn btn-primary btn-sm">
                     Hoppa in i scenen
@@ -431,6 +446,7 @@ import type { RouterOutputs } from '@/modules/trpcClient';
 import AssetLibrary from '@/components/lobby/AssetLibrary.vue';
 import { uploadFileData } from '@/modules/utils';
 import VrSpacePortal from '@/components/entities/VrSpacePortal.vue';
+import TextBox from '@/components/entities/TextBox.vue'
 import AutoComplete from '@/components/AutoComplete.vue';
 import { useCurrentCursorIntersection, useSelectedPlacedObject, useCurrentlyMovedObject, isAsset } from '@/composables/vrSpaceComposables';
 import { THREE, type Entity } from 'aframe';
@@ -491,6 +507,11 @@ const hasAdminRights = computed(() => {
   return isSuperAdminOrHigher || isOwner || hasAdminPermission;
 })
 
+function createTextbox() {
+  currentlyMovedObject.value = { type: 'text' as any };  // Fake for placement mode
+  setCursorMode('place-asset');
+}
+
 const tabs = computed(() => {
   let tabList = [
     { label: 'Mediabibliotek', iconName: 'collections' },
@@ -653,6 +674,27 @@ async function placeMovedObject() {
     }, 'placing an asset')
     currentlyMovedObject.value = undefined;
     return;
+  } else if (currentlyMovedObject.value?.type === 'text') {
+    console.log('✅ Creating TEXTBOX!');
+    await vrSpaceStore.upsertPlacedObject({
+      vrSpaceId: props.vrSpaceId,
+      type: 'text',
+      objectSettings: {
+        text: 'Ny textbox',
+        fontSize: 0.5,
+        color: '#ffffff',
+        maxWidth: 4,
+      },
+      position,
+      orientation: rotation,
+      scale: [2, 2, 2],
+    });
+    const newTextbox = vrSpaceStore.currentVrSpace?.dbData.placedObjects.find(p => p.placedObjectId === newTextboxId);
+    selectedPlacedObject.value = newTextbox;
+
+    currentlyMovedObject.value = undefined;
+    setCursorMode('select-objects');
+    return;
   } else {
     console.log('placed an already placedObject, should update the DB');
     await vrSpaceStore.upsertPlacedObject({

backend/database/drizzle/0002_bright_doomsday.sql

@@ -0,0 +1 @@
+ALTER TYPE "public"."PlacedObjectType" ADD VALUE 'text' BEFORE 'vrPortal';