fix: Do not change the layer object binding in layerentry

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 ### Bug Fixes
 * **@dlr-eoc/layer-control:**
+  - Do not change the layer object binding in `layerentry` when creating a dynamic component from the layer.
   - For Baselayers also show button to switch to the settings tab if layer has action [Issue #135](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/135).
   - Show layer expand icon only when the layer has some things to expand (`legendImg`, `description`, `action`, `actions` or `styles` as array to show a style switch).
 

projects/layer-control/src/lib/layerentry/layerentry.component.html

@@ -77,14 +77,14 @@
         </ng-container>
         <!-- show layer action -->
         <ng-container *ngIf="checkIsComponentItem(layer, 'action');">
-          <ukis-dynamic-component [(dynamicComponent)]="layer.action">
+          <ukis-dynamic-component [(dynamicComponent)]="dynamicComponents.action">
           </ukis-dynamic-component>
         </ng-container>
       </div>
       <!-- show Legend -->
       <div *ngIf="activeTabs.legend && layer.legendImg">
         <ng-container *ngIf="checkIsComponentItem(layer,'legendImg'); else imageUrl">
-          <ukis-dynamic-component [(dynamicComponent)]="layer.legendImg"></ukis-dynamic-component>
+          <ukis-dynamic-component [(dynamicComponent)]="dynamicComponents.legendImg"></ukis-dynamic-component>
         </ng-container>
 
         <ng-template #imageUrl>
@@ -95,7 +95,7 @@
       <div *ngIf="activeTabs.description && layer.description">
 
         <ng-container *ngIf="checkIsComponentItem(layer,'description'); else descriptionText">
-          <ukis-dynamic-component [(dynamicComponent)]="layer.description"></ukis-dynamic-component>
+          <ukis-dynamic-component [(dynamicComponent)]="dynamicComponents.description"></ukis-dynamic-component>
         </ng-container>
 
         <ng-template #descriptionText>

projects/layer-control/src/lib/layerentry/layerentry.component.ts

@@ -49,36 +49,66 @@ export class LayerentryComponent implements OnInit {
 
   public hasTabsbody = true;
 
+  public dynamicComponents: {
+    legendImg: IDynamicComponent
+    action: IDynamicComponent
+    description: IDynamicComponent;
+  } = { legendImg: null, action: null, description: null };
 
   constructor() {
 
   }
 
   /**
    * obj: {any| IDynamicComponent}
+   *
+   * Check if the compProp on the layer is a dynamic Component, if yes pass it to `<ukis-dynamic-component>` so the component from the layer can be inserted here.
    */
-  checkIsComponentItem(layer: Layer, compProp: string): layer is Omit<Layer, 'legendImg' | 'action'> & { legendImg: IDynamicComponent, action: IDynamicComponent } {
+  checkIsComponentItem(layer: Layer, compProp: string): layer is Omit<Layer, 'legendImg' | 'action' | 'description'> & { legendImg: IDynamicComponent, action: IDynamicComponent, description: IDynamicComponent } {
+    /**
+     * TODO: This function is executed quite often!!! even if a user moves on tha map. Try to minimize work here or prevent calling it so often.
+     *
+     * creating new objects is needed to pass and change Inputs from the layers DynamicComponent to the dynamically created component bound on the layer.
+     * There is a new object created to hold the component, inputs and outputs so the layer can be passed to the inputs without adding it recursively to itself.
+     **/
+
     // https://stackoverflow.com/a/65347533/10850021
-    const obj = layer[compProp];
+    const obj: IDynamicComponent = layer[compProp];
     let isComp = false;
     if (obj && typeof obj === 'object') {
       if ('component' in obj) {
+        const component = obj.component;
+
         if (!obj.inputs) {
-          // https://2ality.com/2014/01/object-assign.html#2.3
-          const layerClone = Object.assign({ __proto__: this.layer['__proto__'] }, layer);
-          console.log(layerClone)
-          if (layerClone && layerClone[compProp]) {
-            delete layerClone[compProp];
+          this.dynamicComponents[compProp] = {
+            component: component,
+            inputs: { layer: layer }
           }
-          obj.inputs = { layer: layerClone };
+
         } else if (obj.inputs && !obj.inputs.layer) {
+          this.dynamicComponents[compProp] = {
+            component: obj.component,
+            // create a shallow copy of inputs so they are not changed on the original layer
+            // keep in mind changing some deeper properties will reflect to the original layer!
+            // https://2ality.com/2014/01/object-assign.html#2.3
+            inputs: Object.assign({}, obj.inputs, { layer: layer })
+          };
+
+        } else if (obj.inputs && obj.inputs.layer) {
+          this.dynamicComponents[compProp] = {
+            component: obj.component,
+            // create a shallow copy of inputs so they are not changed on the original layer
+            // keep in mind changing some deeper properties will reflect to the original layer!
+            // https://2ality.com/2014/01/object-assign.html#2.3
+            inputs: Object.assign({}, obj.inputs)
+          };
+        }
+
+        if (obj.outputs) {
+          // create a shallow copy of outputs so they are not changed on the original layer
+          // keep in mind changing some deeper properties will reflect to the original layer!
           // https://2ality.com/2014/01/object-assign.html#2.3
-          const layerClone = Object.assign({ __proto__: this.layer['__proto__'] }, layer);
-          console.log(layerClone)
-          if (layerClone && layerClone[compProp]) {
-            delete layerClone[compProp];
-          }
-          obj.inputs = Object.assign({ layer: layerClone }, obj.inputs);
+          this.dynamicComponents[compProp].outputs = Object.assign({}, obj.outputs);
         }
         isComp = true;
       }