Edit: copy features from other layer

projects/core/assets/locale/messages.core.de.xlf

@@ -427,10 +427,6 @@
         <target>Löschen des Features fehlgeschlagen</target>
       </trans-unit>
       <trans-unit id="core.edit.edit" datatype="html">
-        <source>Edit</source>
-        <target>Bearbeiten</target>
-      </trans-unit>
-      <trans-unit id="core.edit.edit-feature-tooltip" datatype="html">
         <source>Edit feature</source>
         <target>Objekt bearbeiten</target>
       </trans-unit>

projects/core/assets/locale/messages.core.en.xlf

@@ -321,9 +321,6 @@
         <source>Delete feature failed</source>
       </trans-unit>
       <trans-unit id="core.edit.edit" datatype="html">
-        <source>Edit</source>
-      </trans-unit>
-      <trans-unit id="core.edit.edit-feature-tooltip" datatype="html">
         <source>Edit feature</source>
       </trans-unit>
       <trans-unit id="core.edit.error-getting-features" datatype="html">

projects/core/assets/locale/messages.core.nl.xlf

@@ -427,10 +427,6 @@
         <target>Object verwijderen mislukt</target>
       </trans-unit>
       <trans-unit id="core.edit.edit" datatype="html">
-        <source>Edit</source>
-        <target>Bewerken</target>
-      </trans-unit>
-      <trans-unit id="core.edit.edit-feature-tooltip" datatype="html">
         <source>Edit feature</source>
         <target>Object bewerken</target>
       </trans-unit>
@@ -472,11 +468,11 @@
       </trans-unit>
       <trans-unit id="core.edit.select-feature-to-edit" datatype="html">
         <source>Select which feature to edit</source>
-        <target>Selecteer een object om te bewerken</target>
+        <target>Object om te bewerken</target>
       </trans-unit>
       <trans-unit id="core.edit.select-layer" datatype="html">
         <source>Select layer to edit</source>
-        <target>Selecteer een laag om te bewerken</target>
+        <target>Laag om te bewerken</target>
       </trans-unit>
       <trans-unit id="core.edit.true" datatype="html">
         <source>True</source>

projects/core/src/lib/components/edit/edit-component.module.ts

@@ -13,7 +13,7 @@ import { ApplicationMapModule } from '../../map/application-map.module';
 import { EditSelectFeatureComponent } from './edit-select-feature/edit-select-feature.component';
 import { SelectFieldComponent } from './fields/select-field/select-field.component';
 import { CoreSharedModule } from '../../shared';
-
+import { MatBadge } from '@angular/material/badge';
 
 @NgModule({
   declarations: [
@@ -30,6 +30,7 @@ import { CoreSharedModule } from '../../shared';
     EffectsModule.forFeature([EditEffects]),
     ApplicationMapModule,
     CoreSharedModule,
+    MatBadge,
   ],
   exports: [
     EditComponent,

projects/core/src/lib/components/edit/edit-dialog/edit-dialog.component.html

@@ -7,8 +7,7 @@
            [allowCollapse]="true"
            [collapsed]="dialogCollapsed$ | async"
            (expandCollapseDialog)="expandCollapseDialog()"
-           dialogTitle="Edit"
-           i18n-dialogTitle="@@core.edit.edit">
+           [dialogTitle]="dialogTitle$ | async">
   @let currentFeature = currentFeature$ | async;
   @let layerDetails = layerDetails$ | async;
   @if (currentFeature && layerDetails) {

projects/core/src/lib/components/edit/edit-dialog/edit-dialog.component.spec.ts

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/angular';
 import { EditDialogComponent } from './edit-dialog.component';
 import { provideMockStore } from '@ngrx/store/testing';
-import { SharedModule } from '@tailormap-viewer/shared';
+import { LoadingStateEnum, SharedModule } from '@tailormap-viewer/shared';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { AttributeType, getAppLayerModel, getFeatureModel, UniqueValuesService } from '@tailormap-viewer/api';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
@@ -15,6 +15,8 @@ import { of } from 'rxjs';
 import { ViewerLayoutService } from '../../../services/viewer-layout/viewer-layout.service';
 import { CoreSharedModule } from '../../../shared';
 import { getMapServiceMock } from '../../../test-helpers/map-service.mock.spec';
+import { EditMapToolService } from '../services/edit-map-tool.service';
+import { coreStateKey, initialCoreState, selectViewerLoadingState, ViewerState } from '../../../state';
 
 const getFeatureInfo = (): FeatureWithMetadataModel => {
   return {
@@ -42,9 +44,13 @@ const setup = async (getLayerDetails = false, selectors: any[] = []) => {
       },
       { provide: EditFeatureService, useValue: {} },
       getMapServiceMock().provider,
-      provideMockStore({ initialState: { [editStateKey]: { ...initialEditState } }, selectors }),
+      provideMockStore({ initialState: {
+        [editStateKey]: { ...initialEditState },
+        [coreStateKey]: { ...initialCoreState, viewer: { components: [] } as ViewerState },
+      }, selectors }),
       { provide: UniqueValuesService, useValue: { clearCaches: jest.fn() } },
       { provide: ViewerLayoutService, useValue: { setLeftPadding: jest.fn(), setRightPadding: jest.fn() } },
+      { provide: EditMapToolService, useValue: { allEditGeometry$: of() } },
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
   });
@@ -63,7 +69,7 @@ describe('EditDialogComponent', () => {
       { selector: selectSelectedEditFeature, value: getFeatureInfo() },
       { selector: selectEditDialogVisible, value: true },
     ]);
-    expect(await screen.findByText('Edit')).toBeInTheDocument();
+    expect(await screen.findByText('Edit feature')).toBeInTheDocument();
     expect(await screen.findByText('Close')).toBeInTheDocument();
     expect(await screen.findByText('Save')).toBeInTheDocument();
     expect(await screen.findByText('Delete')).toBeInTheDocument();

projects/core/src/lib/components/edit/edit-dialog/edit-dialog.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inje
 import { Store } from '@ngrx/store';
 import { ConfirmDialogService, CssHelper } from '@tailormap-viewer/shared';
 import {
-  selectEditCreateNewFeatureActive, selectEditDialogCollapsed, selectEditDialogVisible, selectEditFeatures, selectEditMapCoordinates,
+  selectEditCreateNewOrCopyFeatureActive, selectEditDialogCollapsed, selectEditDialogVisible, selectEditFeatures, selectEditMapCoordinates,
   selectEditOpenedFromFeatureInfo, selectLoadingEditFeatures, selectSelectedEditFeature,
 } from '../state/edit.selectors';
 import { combineLatest, concatMap, filter, map, of, switchMap, take } from 'rxjs';
@@ -44,6 +44,7 @@ export class EditDialogComponent {
   public dialogCollapsed$;
   public isCreateFeature$;
   public currentFeature$;
+  public dialogTitle$;
   public layerDetails$;
   public selectableFeature$;
 
@@ -70,7 +71,11 @@ export class EditDialogComponent {
     this.loadingEditFeatureInfo$ = this.store$.select(selectLoadingEditFeatures);
     this.editCoordinates$ = this.store$.select(selectEditMapCoordinates);
     this.currentFeature$ = this.store$.select(selectSelectedEditFeature);
-    this.isCreateFeature$ = this.store$.select(selectEditCreateNewFeatureActive);
+    this.dialogTitle$ = this.currentFeature$.pipe(
+      map(feature => feature?.feature.__fid !== 'new'
+        ? $localize `:@@core.edit.edit:Edit feature`
+        : $localize `:@@core.edit.add-new-feature:Add new feature`));
+    this.isCreateFeature$ = this.store$.select(selectEditCreateNewOrCopyFeatureActive);
     this.selectableFeature$ = combineLatest([
       this.store$.select(selectEditFeatures),
       this.store$.select(selectSelectedEditFeature),
@@ -96,12 +101,10 @@ export class EditDialogComponent {
         this.resetChanges();
       });
 
-    this.editMapToolService.editedGeometry$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(geometry => {
+    this.editMapToolService.allEditGeometry$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(geometry => {
       this.geometryChanged(geometry, false);
     });
-    this.editMapToolService.createdGeometry$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(geometry => {
-      this.geometryChanged(geometry, true);
-    });
+
     ComponentConfigHelper.useInitialConfigForComponent<EditConfigModel>(
       this.store$,
       BaseComponentTypeEnum.EDIT,

projects/core/src/lib/components/edit/edit/edit.component.css

@@ -8,8 +8,8 @@
 }
 
 .edit-container--is-active {
-  padding: 5px 6px 5px 0;
-  width: 300px;
+  padding: 5px 11px 5px 0;
+  width: 305px;
   height: 70px;
   max-width: var(--max-control-width);
 }
@@ -18,19 +18,29 @@
   border-radius: 3px;
 }
 
-.map-control-button--add-feature {
+.edit-wrapper {
+  flex: 1;
+}
+
+.edit-controls button {
   left: 3px;
 }
 
-.edit-wrapper {
-  flex: 1;
+.edit-controls {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .edit-container mat-form-field {
   width: 100%;
   padding-top: 6px;
 }
 
+.mat-mdc-menu-item.selected {
+  color: var(--primary-color);
+}
+
 @media screen and (max-width: 730px) {
   .edit-container--is-active {
     padding: 0;

projects/core/src/lib/components/edit/edit/edit.component.html

@@ -11,8 +11,7 @@
       <mat-icon svgIcon="edit"></mat-icon>
     </button>
     @if (active$ | async) {
-      <div class="edit-wrapper"
-        >
+      <div class="edit-wrapper">
         <ng-container>
           @if (editableLayers.length > 0) {
             <mat-form-field appearance="outline" color="primary">
@@ -28,38 +27,65 @@
           }
         </ng-container>
       </div>
-    }
-    @if (!isLine() && !isPoint()) {
-      <button [matMenuTriggerFor]="geometryTypeMenu"
-        [class.disabled]="layer.value === null"
-        tmTooltip="Add new feature"
-        i18n-tmTooltip="@@core.edit.add-new-feature"
-        class="map-control-button map-control-button--add-feature"
-        mat-flat-button>
-        <mat-icon svgIcon="new_object"></mat-icon>
-      </button>
-      <mat-menu #geometryTypeMenu="matMenu" xPosition="after" yPosition="below">
-        @if (isPolygon()) {
-          <button mat-menu-item (click)="createFeature('area')" i18n="@@core.common.polygon">Polygon</button>
-          <button mat-menu-item (click)="createFeature('rectangle')" i18n="@@core.common.rectangle">Rectangle</button>
-          <button mat-menu-item (click)="createFeature('square')" i18n="@@core.common.square">Square</button>
+      <div class="edit-controls">
+        @if (!isLine() && !isPoint()) {
+          <button [matMenuTriggerFor]="geometryTypeMenu"
+            [class.disabled]="layer.value === null"
+            tmTooltip="Add new feature"
+            i18n-tmTooltip="@@core.edit.add-new-feature"
+            class="map-control-button map-control-button--add-feature"
+            mat-flat-button
+            [class.toggle-button--active]="createNewFeatureActive$ | async">
+            <mat-icon svgIcon="new_object"></mat-icon>
+          </button>
+          <mat-menu #geometryTypeMenu="matMenu" xPosition="after" yPosition="below">
+            @if (isPolygon()) {
+              <button mat-menu-item (click)="createFeature('area')" i18n="@@core.common.polygon">Polygon</button>
+              <button mat-menu-item (click)="createFeature('rectangle')" i18n="@@core.common.rectangle">Rectangle</button>
+              <button mat-menu-item (click)="createFeature('square')" i18n="@@core.common.square">Square</button>
+            } @else {
+              <button mat-menu-item (click)="createFeature('point')" i18n="@@core.common.point">Point</button>
+              <button mat-menu-item (click)="createFeature('line')" i18n="@@core.common.line">Line</button>
+              <button mat-menu-item (click)="createFeature('area')" i18n="@@core.common.polygon">Polygon</button>
+              <button mat-menu-item (click)="createFeature('rectangle')" i18n="@@core.common.rectangle">Rectangle</button>
+              <button mat-menu-item (click)="createFeature('square')" i18n="@@core.common.square">Square</button>
+            }
+          </mat-menu>
         } @else {
-          <button mat-menu-item (click)="createFeature('point')" i18n="@@core.common.point">Point</button>
-          <button mat-menu-item (click)="createFeature('line')" i18n="@@core.common.line">Line</button>
-          <button mat-menu-item (click)="createFeature('area')" i18n="@@core.common.polygon">Polygon</button>
-          <button mat-menu-item (click)="createFeature('rectangle')" i18n="@@core.common.rectangle">Rectangle</button>
-          <button mat-menu-item (click)="createFeature('square')" i18n="@@core.common.square">Square</button>
+          <button [class.disabled]="layer.value === null"
+            tmTooltip="Add new feature"
+            i18n-tmTooltip="@@core.edit.add-new-feature"
+            class="map-control-button map-control-button--add-feature"
+            (click)="createFeatureIfSingleGeometryType()"
+            mat-flat-button
+            [class.toggle-button--active]="createNewFeatureActive$ | async">
+            <mat-icon svgIcon="new_object"></mat-icon>
+          </button>
+        }
+        @if (layersToCreateNewFeaturesFrom().length > 0) {
+          <button [matMenuTriggerFor]="layerToCreateNewFeaturesFromMenu"
+                  tmTooltip="Copy from other layer"
+                  class="map-control-button"
+                  mat-flat-button
+                  [matBadge]="copiedFeaturesCount$ | async"
+                  [matBadgeHidden]="(copyActive$ | async) === false"
+                  matBadgeSize="small"
+                  matBadgeColor="primary"
+                  [class.toggle-button--active]="copyActive$ | async">
+            <mat-icon svgIcon="split"></mat-icon>
+          </button>
+          <mat-menu #layerToCreateNewFeaturesFromMenu="matMenu" xPosition="after" yPosition="below">
+            @let selectedCopyLayerId = selectedCopyLayer$ | async;
+            @for (layer of layersToCreateNewFeaturesFrom(); track layer) {
+              @let selected = layer.id === selectedCopyLayerId;
+              <button mat-menu-item [class.selected]="selected" (click)="createFeatureFromLayer(layer.id)">
+                <mat-icon [svgIcon]="selected ? 'check' : ''" color="primary"/>
+                <span>{{layer.title || layer.layerName}}</span>
+              </button>
+            }
+          </mat-menu>
         }
-      </mat-menu>
-    } @else {
-      <button [class.disabled]="layer.value === null"
-        tmTooltip="Add new feature"
-        i18n-tmTooltip="@@core.edit.add-new-feature"
-        class="map-control-button map-control-button--add-feature"
-        (click)="createFeatureIfSingleGeometryType()"
-        mat-flat-button>
-        <mat-icon svgIcon="new_object"></mat-icon>
-      </button>
+      </div>
     }
   </div>
 }

projects/core/src/lib/components/edit/edit/edit.component.spec.ts

@@ -8,12 +8,14 @@ import { selectEditActive, selectSelectedEditLayer } from "../state/edit.selecto
 import { SharedModule } from "@tailormap-viewer/shared";
 import { MatIconTestingModule } from "@angular/material/icon/testing";
 import { AuthenticatedUserTestHelper } from '../../../test-helpers/authenticated-user-test.helper';
+import { HttpXsrfTokenExtractor } from '@angular/common/http';
 
 const setup = async (hasLayers: boolean, authenticated: boolean) => {
   await render(EditComponent, {
     imports: [ SharedModule, MatIconTestingModule ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     providers: [
+      { provide: HttpXsrfTokenExtractor, useValue: {} as HttpXsrfTokenExtractor },
       { provide: TAILORMAP_API_V1_SERVICE, useClass: TailormapApiV1MockService },
       AuthenticatedUserTestHelper.provideAuthenticatedUserService(authenticated, []),
       provideMockStore({
@@ -35,8 +37,6 @@ describe('EditComponent', () => {
     const buttons  = screen.getAllByRole('button');
     expect(buttons[0]).toBeVisible();
     expect(buttons[0]).not.toHaveClass("disabled");
-    expect(buttons[1]).toBeVisible();
-    expect(buttons[1]).toHaveClass("disabled");
   });
 
   test('should be disabled when user is not logged in button', async () => {