Add duplicate camera button

Author: Léna Voinchet

js/UI/NodeUI.js

@@ -28,6 +28,7 @@ class NodeUI {
                         <p class="main-text">Camera ${node.id + 1}</p>
                     </div>
                     <div class="row center-y">
+                        <div id="node-${node.id}-duplicate" title="Dupliquer Caméra"><span class="iconify" data-icon="bx:plus-circle"></span></div>
                         <div id="node-${node.id}-hide-UI" title="Réduire/Agrandir"><span class="iconify" data-icon="bx:minus"></span></div> 
                         <div id="node-${node.id}-visible" title="Afficher/Cacher Frustum"><span class="iconify" data-icon="akar-icons:eye-open"></span></div>
                         <div id="node-${node.id}-delete" title="Supprimer Caméra"><span class="iconify" data-icon="fluent:delete-16-filled"></span></div>
@@ -74,7 +75,8 @@ class NodeUI {
             makeElementDraggable(document.getElementById(`node-x-rot-${node.id}`));
             makeElementDraggable(document.getElementById(`node-y-rot-${node.id}`));
             makeElementDraggable(document.getElementById(`node-z-rot-${node.id}`));
-        
+
+            document.getElementById(`node-${node.id}-duplicate`).addEventListener('click', () => sceneManager.objects.duplicateNode(node));
             document.getElementById(`node-${node.id}-hide-UI`).addEventListener('click', () => hideUICam());
             document.getElementById(`node-${node.id}-visible`).addEventListener('click', () => node.changeFrustumVisibility());
             document.getElementById(`node-${node.id}-delete`).addEventListener('click', () => sceneManager.objects.removeNode(node));

js/scene/objects/SceneObjects.js

@@ -9,6 +9,8 @@ import { Dummy, loadModel } from './props/Dummy.js';
 import { Node } from './sensors/Node.js';
 import { Lidar } from './sensors/Lidar.js';
 
+import { getCamerasTypes } from '/js/data.js';
+
 class SceneObjects{
     static loadFont(isBuilder, callback)
     {
@@ -185,6 +187,8 @@ class SceneObjects{
             document.getElementById("display-frustums-button").classList.remove("hidden");
 
             this.populateStorage();
+
+            return newCamera;
         }
 
         this.displayFrustums = function()
@@ -220,6 +224,33 @@ class SceneObjects{
             this.populateStorage();
         }
 
+        this.duplicateNode = function(node)
+        {
+            const newCameraTypeData = getCamerasTypes().find(type => type.name === node.cameraType.name);
+            const newCamera = this.addNode(false, sceneManager.trackingMode, Node.DEFAULT_CAMERA_TYPE_ID, 0, 0, node.zPos, node.xRot, node.yRot, node.zRot);
+
+            newCamera.setType(newCameraTypeData, sceneManager);
+
+            // Update UI
+            const selectElement = document.getElementById(`cam-type-${newCamera.id}`);
+    
+            if (selectElement) {
+                selectElement.value = newCamera.cameraType.name;
+
+                // Here we send a fake "change" message on the selectElement to activate chageCameraType function in nodeUI.js
+                const changeEvent = new Event('change', {
+                    bubbles: true,
+                    cancelable: true
+                });
+                selectElement.dispatchEvent(changeEvent);
+
+            } else {
+                console.error(`L'élément select 'cam-type-${newCamera.id}' n'a pas été trouvé pour la duplication.`);
+            }
+
+            this.populateStorage();
+        }
+
         this.addLidar = function(autoConstruct = false, typeID = Lidar.DEFAULT_LIDAR_TYPE_ID, x = 0, z = Lidar.DEFAULT_LIDAR_HEIGHT, r = 0)
         {
             if(!SceneObjects.font)