boussole UI now support new paragraphe and referenced entity title change

src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css

@@ -251,6 +251,10 @@
   transform: translate(-5px, -5px);
   cursor:move;
 }
+#boussole-layout .boussole-wrapper .boussole .entity.ajax-new{
+  background-color: #fff;
+  border: 1px solid black;
+}
 #boussole-layout .boussole-wrapper .boussole .entity.hide{
   display: none;
 }

src/web/themes/custom/ouatminimal_theme/js/boussole.js

@@ -21,8 +21,13 @@
       let entities = {};
       [...$form_entities].forEach($entity => {
         console.log($entity);
+        let ajax_new_content = $entity.classList.contains('ajax-new-content'); 
+        if(ajax_new_content){
+          // its a new paragraph just added by ajax
+          $entity = $entity.querySelector(':scope>div');
+        }
+
         let id = $entity.getAttribute('id');
-        let $title = $entity.querySelector('.paragraphs-subform>.field--type-entity-reference.field--name-field-entite td.inline-entity-form-node-label');
         let $af = $entity.querySelector('.paragraphs-subform .field--name-field-actuel-future');
         let $p = $entity.querySelector('.paragraphs-subform .field--name-field-prise input');
         let $mm = $entity.querySelector('.paragraphs-subform .field--name-field-menace-maintien-degres input');
@@ -32,8 +37,8 @@
             id: id
           },
           title: {
-            $dom: $title,
-            value: $title.textContent
+            $dom: null,
+            value: null
           },
           af: {
             $dom: $af,
@@ -48,6 +53,17 @@
             value: parseFloat($mm.value)
           }
         }
+
+        // title does not exists when we add an "entité intégrée" as we also have to create the referenced node 
+        let $title = $entity.querySelector('.paragraphs-subform>.field--type-entity-reference.field--name-field-entite td.inline-entity-form-node-label');
+        if ($title) {
+          e.title= {
+            $dom: $title,
+            value: $title.textContent
+          };
+        }
+
+
         entities[id] = e;
       });
       console.log(entities);
@@ -120,18 +136,18 @@
     updateCreateEntities(entities){
       // console.log('Class Boussole update entities', entities);
       for (const [id, values] of Object.entries(entities)) {
-        // console.log(id, typeof this.entities[id], values);
+        console.log(id, typeof this.entities[id], values);
         if (typeof this.entities[id] === 'undefined') {
           this.entities[id] = new Entity(this.$boussole, id, values);
         }else{
-          this.entities[id].updateValues(values);
+          this.entities[id].updateValuesFromForm(values);
         }
       }
     }
 
     updateEntities(){
       for (const [id, entity] of Object.entries(this.entities)) {
-        entity.update();
+        entity.updatePos();
       }
     }
   }
@@ -158,12 +174,30 @@
       this.$e = document.createElement('div');
       this.$e.classList.add('entity');
       this.$e.setAttribute('id', `${this.id}-boussole-point`);
-      this.$e.setAttribute('title', this.values.title.value);
+      if (this.values.title.value) {
+        // the paragraph as an entity referenced
+        this.$e.setAttribute('title', this.values.title.value);
+      }else{
+        // new paragraph with no entity referenced
+        this.$e.classList.add('ajax-new');
+      }
+      
       this.$container.append(this.$e);
       console.log(this.$e);
       this.updatePos();
       this.initDraggable()
     }
+    
+    updateDomElemt(){
+      if (this.values.title.value) {
+        // the paragraph as an entity referenced
+        this.$e.setAttribute('title', this.values.title.value);
+        this.$e.classList.remove('ajax-new');
+      }else{
+        // new paragraph with no entity referenced
+        this.$e.classList.add('ajax-new');
+      }
+    }
 
     initDraggable(){
       this.$e.setAttribute('draggable', true);
@@ -193,10 +227,10 @@
     dropedOnBoussole(data){
       this.$e.style.left = data.clientX + data.dragging_start_x + 'px';
       this.$e.style.top = data.clientY + data.dragging_start_y + 'px';
-      this.updateValuesFromBoussole();
+      this.updateFormValuesFromBoussole();
     }
 
-    updateValuesFromBoussole(){
+    updateFormValuesFromBoussole(values){
       let compstyle = window.getComputedStyle(this.$e);
       // AF
       let top = parseInt(compstyle.top); 
@@ -240,8 +274,16 @@
       })
     }
 
+    updateValuesFromForm(values){
+      this.values = values;
+      this.updateDomElemt();
+    }
+
     updatePos(){
       console.log('update pos');
+
+      this.updateSceneSize()
+
       // converte degres to radian, inverse it and rotate it
       let a = parseInt((this.values.mm.value) * -1 + 90) * (Math.PI/180);
       // https://stackoverflow.com/questions/5731863/mapping-a-numeric-range-onto-another
@@ -268,11 +310,6 @@
       this.$e.style.top = top+'px';
     }
     
-    update(){
-      console.log('Entity update');
-      this.updateSceneSize()
-      this.updatePos()
-    }
 
   }