feat(geo): manage layers and groups

Breaking changes: This is a major refactor of the way we manage layer in IGO
- New class 'LayerController' to manage layers and offer 3 types of layers, 'systemLayers', 'baseLayers', 'treeLayers'. The systemLayers is the drawing layer, measurement layer and other vital layers for the library. Note that a systemLayer can also be found in the treeLayers. The treeLayers is the hierarchical representation for the LayerViewer. The list of treeLayers can also be accessed under the flattened variant. Finally these three types of layers are aggregated to provide a unified list names 'all' which allows to have the 'baseLayers', 'systemLayers' and the flattened list of the 'treeLayers'

- The way we access the layers has also changed, we must go through the LayerController

- The LayerViewer does not allow to display the baseLayer, the 'excludeBaselayers' is removed

(cherry picked from commit 5ed250d6ca2b27d904de8d3354c11a981c64bf67)

fix: lint

fix(geo): remove duplicate layer from all

(cherry picked from commit 42e4fa9b739c555f3c0f5b3a098ab14307aaae67)

fix(build): circular dependency revert compilationMode to full

fix(geo): circular dependencies
- refactor Layer/LayerGroup

fix(geo): time-filter-list remove BaseLayer

fix(geo): layer - project custom action in the bottom panel

refactor: change label for group

fix(geo): move layer with linkedLayers add system layer in tree

fix: any

chore: update packages

chore: update packages

fix: test

.vscode/launch.json

@@ -21,6 +21,20 @@
       "url": "http://127.0.0.1:4201",
       "webRoot": "${workspaceFolder}/projects/igo2",
       "sourceMaps": true
-    }
+    },
+    {
+      "name": "test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test.watch",
+      "url": "http://localhost:9876/debug.html"
+    },
+    {
+      "name": "test.common",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test.common",
+      "url": "http://localhost:9876/debug.html"
+    },
   ]
 }

.vscode/tasks.json

@@ -40,6 +40,44 @@
           }
         }
       }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "label": "npm: test.common",
+      "type": "npm",
+      "path": "packages/common",
+      "script": "test.watch",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
     }
   ]
 }

angular.json

@@ -535,10 +535,6 @@
   },
   "cli": {
     "schematicCollections": ["@schematics/angular"],
-    "cache": {
-      "enabled": false,
-      "environment": "all"
-    },
     "analytics": false
   }
 }

packages/common/drag-drop/src/drag-drop.module.ts

@@ -1,13 +1,14 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { DragAndDropDirective } from './drag-drop.directive';
+import { TreeDragDropDirective } from './tree-drag-drop/tree-drag-drop.directive';
 
 /**
  * @deprecated import the DragAndDropDirective directly
  */
 @NgModule({
-  imports: [DragAndDropDirective],
-  exports: [DragAndDropDirective]
+  imports: [DragAndDropDirective, TreeDragDropDirective],
+  exports: [DragAndDropDirective, TreeDragDropDirective]
 })
 export class IgoDrapDropModule {
   static forRoot(): ModuleWithProviders<IgoDrapDropModule> {

packages/common/drag-drop/src/public_api.ts

@@ -1,2 +1,3 @@
 export * from './drag-drop.module';
 export * from './drag-drop.directive';
+export * from './tree-drag-drop';

packages/common/drag-drop/src/tree-drag-drop/index.ts

@@ -0,0 +1,2 @@
+export * from './tree-drag-drop.directive';
+export * from './tree-drag-drop.interface';

packages/common/drag-drop/src/tree-drag-drop/tree-drag-drop.directive.spec.ts

@@ -0,0 +1,181 @@
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  MatTreeFlatDataSource,
+  MatTreeFlattener,
+  MatTreeModule,
+  MatTreeNode
+} from '@angular/material/tree';
+import { By } from '@angular/platform-browser';
+
+import { TreeDragDropDirective } from './tree-drag-drop.directive';
+import { DropPositionType, TreeFlatNode } from './tree-drag-drop.interface';
+import { TREE_MOCK } from './tree-drag-drop.mock';
+
+@Component({
+  template: `
+    <mat-tree
+      igoTreeDragDrop
+      [treeControl]="treeControl"
+      [dataSource]="dataSource"
+    >
+      <mat-tree-node *matTreeNodeDef="let node">
+        <div>Test</div>
+      </mat-tree-node>
+    </mat-tree>
+  `
+})
+class TestComponent {
+  treeControl = new FlatTreeControl<any>(
+    (node) => node.level,
+    (node) => node.isGroup
+  );
+
+  private _transformer = (node: any, level: number): any => {
+    return {
+      id: node.id,
+      level: level,
+      data: node,
+      disabled: false
+    };
+  };
+  treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    (node) => node.level,
+    (node) => node.isGroup,
+    (node) => node.children.sort((a, b) => a.zIndex + b.zIndex)
+  );
+
+  dataSource = new MatTreeFlatDataSource<any, any>(
+    this.treeControl,
+    this.treeFlattener,
+    TREE_MOCK
+  );
+}
+
+describe('DragDropTreeDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let directive: TreeDragDropDirective;
+  let treeControl: FlatTreeControl<TreeFlatNode>;
+  let treeNodesDebug: DebugElement[];
+
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      imports: [MatTreeModule, TreeDragDropDirective],
+      declarations: [TestComponent]
+    }).createComponent(TestComponent);
+
+    fixture.detectChanges();
+    const debugElement = fixture.debugElement.query(
+      By.directive(TreeDragDropDirective)
+    );
+    directive = debugElement.injector.get(TreeDragDropDirective);
+    treeControl = directive.treeControl;
+
+    treeNodesDebug = fixture.debugElement.queryAll(By.directive(MatTreeNode));
+  });
+
+  it('should create an instance', () => {
+    expect(directive).toBeTruthy();
+  });
+
+  it('should add draggable attributes on tree nodes', () => {
+    expect(treeNodesDebug.length).toBeGreaterThan(0);
+    treeNodesDebug.forEach((node) => {
+      const element = node.nativeElement;
+      expect(element.getAttribute('draggable')).toBe('true');
+    });
+  });
+
+  it('should handle drag start and end events', () => {
+    const treeNode = treeNodesDebug[0].nativeElement;
+    const dragStartEvent = new DragEvent('dragstart');
+    const dragEndEvent = new DragEvent('dragend');
+
+    spyOn(directive, 'onDragStart').and.callThrough();
+    spyOn(directive, 'dragEnd').and.callThrough();
+
+    treeNode.dispatchEvent(dragStartEvent);
+    expect(directive.onDragStart).toHaveBeenCalled();
+
+    treeNode.dispatchEvent(dragEndEvent);
+    expect(directive.dragEnd).toHaveBeenCalled();
+  });
+
+  it('should handle drag over and leave events', () => {
+    const treeNodeDragged = treeNodesDebug[1].nativeElement;
+    const treeNode = treeNodesDebug[0].nativeElement;
+    const dragStartEvent = new DragEvent('dragstart');
+    const dragOverEvent = new DragEvent('dragover');
+    const dragLeaveEvent = new DragEvent('dragleave');
+
+    treeNodeDragged.dispatchEvent(dragStartEvent);
+
+    spyOn(directive, 'dragOver').and.callThrough();
+    spyOn(directive, 'dragLeave').and.callThrough();
+
+    treeNode.dispatchEvent(dragOverEvent);
+    expect(directive.dragOver).toHaveBeenCalled();
+
+    treeNode.dispatchEvent(dragLeaveEvent);
+    expect(directive.dragLeave).toHaveBeenCalled();
+  });
+
+  it('should handle drop event', () => {
+    const treeNodeDragged = treeNodesDebug[1].nativeElement;
+    const treeNode = treeNodesDebug[0].nativeElement;
+
+    const dropEvent = new DragEvent('drop');
+    const dragStartEvent = new DragEvent('dragstart');
+    const dragOverEvent = new DragEvent('dragover');
+
+    treeNodeDragged.dispatchEvent(dragStartEvent);
+    treeNode.dispatchEvent(dragOverEvent);
+
+    spyOn(directive, 'drop').and.callThrough();
+    spyOn(directive.onDrop, 'emit').and.callThrough();
+
+    directive.drop(dropEvent);
+    expect(directive.drop).toHaveBeenCalledWith(dropEvent);
+  });
+
+  it('should emit onDrop event with correct data', () => {
+    const draggedNode: TreeFlatNode = treeControl.dataNodes.find(
+      (node) => !node.isGroup
+    );
+    const ref: TreeFlatNode = treeControl.dataNodes.find(
+      (node) => node.id !== draggedNode.id
+    );
+    const position: DropPositionType = 'inside';
+
+    spyOn<any>(directive, 'getPosition').and.returnValue({
+      x: 0,
+      y: 0,
+      level: ref.level,
+      type: position
+    });
+    spyOn(directive.onDrop, 'emit').and.callThrough();
+
+    directive.draggedNode = draggedNode;
+    directive.dropNodeTarget = ref;
+    directive.drop(new DragEvent('drop'));
+
+    expect(directive.onDrop.emit).toHaveBeenCalledWith({
+      node: draggedNode,
+      ref,
+      position
+    });
+  });
+});
+
+// describe('DragDropTreeDirective - NodeGroup', () => {
+//   it('should not drop into itself', () => {});
+//   it('should not hover children', () => {});
+//   it('should active inside on hover', () => {});
+// });
+
+// describe('DragDropTreeDirective - NodeItem', () => {
+//   it('should not hover with "inside" itself', () => {});
+//   it('should drop into a group', () => {});
+// });