fix: 260 feature request align selected nodes all at once (#390)

* fix: refactoring - PositionTtransformationService created - this service transforms position of elements such as nodes ... (e.g. ctrl + mouse wheel -> scale ... ) * fix: tests - refactored * fix: left, right, up, down key press aligns element to left, right, top or bottom (all selected - at the moment only nodes supported) * fix: test added * fix: doc * fix: translate and added new align buttons * fix: if at least one node is selected and the mode is EditorMode.MultiNodeMoving * fix: elements: edit highlighting when multi-node-select activated
SchweizerischeBundesbahnen · Dec 17, 2024 · af03ac9 · af03ac9
1 parent 31a776d
commit af03ac9
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 18 deletions.
diff --git a/documentation/AdvancedEditingShortcuts.md b/documentation/AdvancedEditingShortcuts.md
@@ -23,10 +23,10 @@ easier to manage and edit complex network structures.
 |                                                    `ctrl`+`v`                                                    |                                                                                    Paste the copied trainruns.                                                                                     |
 |                                                    `ctrl`+`a`                                                    |                                                                                            Select all.                                                                                             |
 |                                                                                                                  |                                                                                                                                                                                                    |
-|                                                   `Arrow left`                                                   |                                                                                  Align all selected nodes - left.                                                                                  |
-|                                                    `Arrow up`                                                    |                                                                                  Align all selected nodes - top.                                                                                   |
-|                                                  `Arrow right`                                                   |                                                                                 Align all selected nodes - right.                                                                                  |
-|                                                   `Arrow down`                                                   |                                                                                 Align all selected nodes - bottom.                                                                                 |
+|                                                   `Arrow left`                                                   |                                                                           Aligns objects along their left edges (nodes).                                                                           |
+|                                                    `Arrow up`                                                    |                                                                           Aligns objects along their top edges (nodes).                                                                            |
+|                                                  `Arrow right`                                                   |                                                                          Aligns objects along their right edges (nodes).                                                                           |
+|                                                   `Arrow down`                                                   |                                                                          Aligns objects along their bottom edges (nodes).                                                                          |
 ---
 
 ### Scale Netzgrafik 

diff --git a/src/app/netzgrafik-application/netzgrafik-application.component.html b/src/app/netzgrafik-application/netzgrafik-application.component.html
@@ -35,6 +35,7 @@
       sbbIconSidebarItem
       [label]="'app.netzgrafik-application.edit' | translate"
       [class]="getEditActivatedTag()"
+      [style]="getEditStyle()"
       (click)="onEditToolClicked()"
     >
       <sbb-icon svgIcon="pen-small"></sbb-icon>

diff --git a/src/app/netzgrafik-application/netzgrafik-application.component.ts b/src/app/netzgrafik-application/netzgrafik-application.component.ts
@@ -14,6 +14,7 @@ import {UndoService} from "../services/data/undo.service";
 import {EditorView} from "../view/editor-main-view/data-views/editor.view";
 import {NetzgrafikDefault} from "../sample-netzgrafik/netzgrafik.default";
 import {environment} from "../../environments/environment";
+import {NodeService} from "../services/data/node.service";
 
 export enum IconSidebarMode {
   VARIANTEN = "varianten",
@@ -42,6 +43,7 @@ export class NetzgrafikApplicationComponent {
     private readonly activatedRoute: ActivatedRoute,
     private readonly versionControlService: VersionControlService,
     private readonly undoService: UndoService,
+    private readonly nodeService: NodeService,
     private sanitizer: DomSanitizer,
   ) {
     activatedRoute.params
@@ -105,6 +107,15 @@ export class NetzgrafikApplicationComponent {
     return this.sanitizer.bypassSecurityTrustStyle("");
   }
 
+  getEditStyle() {
+    if (this.uiInteractionService.getEditorMode() === EditorMode.MultiNodeMoving) {
+      if (this.nodeService.getSelectedNodes().length > 0) {
+        return this.sanitizer.bypassSecurityTrustStyle("color:red");
+      }
+    }
+    return this.sanitizer.bypassSecurityTrustStyle("");
+  }
+
   getFilterActivatedTag() {
     return this.getActivatedTag(FilterWindowType.EDITOR_FILTER);
   }

diff --git a/src/app/view/editor-edit-tools-view-component/editor-edit-tools-view.component.html b/src/app/view/editor-edit-tools-view-component/editor-edit-tools-view.component.html
@@ -30,7 +30,7 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
   </sbb-expansion-panel>
 
   <sbb-expansion-panel
-    [expanded]="getVariantIsWritable()"
+    [expanded]="getVariantIsWritable() && !getAreMultiObjectSelected()"
     [disabled]="!getVariantIsWritable()">
     <sbb-expansion-panel-header>{{ 'app.view.editor-edit-tools-view-component.delete-netzgrafik-title' | translate }}</sbb-expansion-panel-header>
 
@@ -40,9 +40,9 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
         !this.filterService.isTemporaryDisableFilteringOfItemsInViewEnabled()
       "
     >
-      <br />
+      <br/>
       <sbb-label>{{ 'app.view.editor-edit-tools-view-component.non-visible-elements' | translate }}</sbb-label>
-      <br />
+      <br/>
       <button
         (click)="onClearAllFiltered()"
         [title]="'app.view.editor-edit-tools-view-component.delete-all-non-visible-elements-tooltip' | translate"
@@ -51,11 +51,11 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
         <sbb-icon svgIcon="bucket-foam-broom-small"></sbb-icon>
       </button>
       {{ 'app.view.editor-edit-tools-view-component.delete-all-non-visible-elements' | translate }}
-      <br />
+      <br/>
     </ng-container>
-    <br />
+    <br/>
     <sbb-label>{{ 'app.view.editor-edit-tools-view-component.visible-elements' | translate }}</sbb-label>
-    <br />
+    <br/>
     <button
       (click)="onClearAllTrainruns()"
       [title]="'app.view.editor-edit-tools-view-component.delete-all-visible-trainruns-tooltip' | translate"
@@ -64,7 +64,7 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
       <sbb-icon svgIcon="trash-small"></sbb-icon>
     </button>
     {{ 'app.view.editor-edit-tools-view-component.delete-all-visible-trainruns' | translate }}
-    <br />
+    <br/>
     <button
       (click)="onClearAllNotes()"
       [title]="'app.view.editor-edit-tools-view-component.delete-all-visible-notes-tooltip' | translate"
@@ -73,7 +73,7 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
       <sbb-icon svgIcon="trash-small"></sbb-icon>
     </button>
     {{ 'app.view.editor-edit-tools-view-component.delete-all-visible-notes' | translate }}
-    <br />
+    <br/>
     <button
       (click)="onClear()"
       [title]="'app.view.editor-edit-tools-view-component.delete-all-visible-elements-tooltip' | translate"
@@ -89,7 +89,7 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
     <sbb-expansion-panel-header>
       {{ 'app.view.editor-edit-tools-view-component.merge-netzgrafik-title' | translate }}
     </sbb-expansion-panel-header>
-    <br />
+    <br/>
     <button
       (click)="onLoadNetzgrafikToInsertCopieButton()"
       [title]="'app.view.editor-edit-tools-view-component.add-netzgrafik-as-copy-tooltip' | translate"
@@ -106,7 +106,7 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
       (change)="onLoadNetzgrafikToMergeAsACopy($event)"
     />
 
-    <br />
+    <br/>
     <button
       (click)="onLoadNetzgrafikToMergeButton()"
       [title]="'app.view.editor-edit-tools-view-component.merge-netzgrafik-tooltip' | translate"
@@ -123,4 +123,57 @@ <h2 class="SummaryTitle">{{ 'app.view.editor-edit-tools-view-component.edit' | t
       (change)="onLoadNetzgrafikToMerge($event)"
     />
   </sbb-expansion-panel>
+
+
+  <sbb-expansion-panel
+    *ngIf="getAreMultiObjectSelected()"
+    [expanded]="getAreMultiObjectSelected()">
+    <sbb-expansion-panel-header>
+      <label style="color: red">
+        {{ 'app.view.editor-edit-tools-view-component.align-elements-netzgrafik-title' | translate }}
+      </label>
+    </sbb-expansion-panel-header>
+    <br/>
+    <button
+      (click)="onAlignElementsLeft()"
+      [title]="'app.view.editor-edit-tools-view-component.align-elements-left' | translate"
+      class="TrainrunDialog EditorToolButton"
+    >
+      <sbb-icon svgIcon="arrow-left-small"></sbb-icon>
+    </button>
+    {{ 'app.view.editor-edit-tools-view-component.align-elements-left' | translate }}
+
+    <br/>
+    <button
+      (click)="onAlignElementsRight()"
+      [title]="'app.view.editor-edit-tools-view-component.align-elements-right' | translate"
+      class="TrainrunDialog EditorToolButton"
+    >
+      <sbb-icon svgIcon="arrow-right-small"></sbb-icon>
+    </button>
+    {{ 'app.view.editor-edit-tools-view-component.align-elements-right' | translate }}
+
+    <br/>
+    <button
+      (click)="onAlignElementsTop()"
+      [title]="'app.view.editor-edit-tools-view-component.align-elements-top' | translate"
+      class="TrainrunDialog EditorToolButton"
+    >
+      <sbb-icon svgIcon="arrow-up-small"></sbb-icon>
+    </button>
+    {{ 'app.view.editor-edit-tools-view-component.align-elements-top' | translate }}
+
+    <br/>
+    <button
+      (click)="onAlignElementsBottom()"
+      [title]="'app.view.editor-edit-tools-view-component.align-elements-bottom' | translate"
+      class="TrainrunDialog EditorToolButton"
+    >
+      <sbb-icon svgIcon="arrow-down-small"></sbb-icon>
+    </button>
+    {{ 'app.view.editor-edit-tools-view-component.align-elements-bottom' | translate }}
+
+  </sbb-expansion-panel>
+
+
 </sbb-accordion>
diff --git a/src/app/view/editor-edit-tools-view-component/editor-edit-tools-view.component.ts b/src/app/view/editor-edit-tools-view-component/editor-edit-tools-view.component.ts
@@ -1,7 +1,9 @@
 import {Component, ElementRef, OnDestroy, ViewChild} from "@angular/core";
 import {DataService} from "../../services/data/data.service";
 import {UiInteractionService} from "../../services/ui/ui.interaction.service";
-import {ConfirmationDialogParameter} from "../dialogs/confirmation-dialog/confirmation-dialog.component";
+import {
+  ConfirmationDialogParameter
+} from "../dialogs/confirmation-dialog/confirmation-dialog.component";
 import {NodeService} from "../../services/data/node.service";
 import {TrainrunSectionService} from "../../services/data/trainrunsection.service";
 import {EditorMode} from "../editor-menu/editor-mode";
@@ -17,6 +19,7 @@ import {LabelGroupService} from "../../services/data/labelgroup.service";
 import {LabelGroup} from "../../models/labelGroup.model";
 import {environment} from "../../../environments/environment";
 import {VersionControlService} from "../../services/data/version-control.service";
+import {PositionTransformationService} from "../../services/util/position.transformation.service";
 
 @Component({
   selector: "sbb-editor-edit-tools-view-component",
@@ -47,7 +50,8 @@ export class EditorEditToolsViewComponent implements OnDestroy {
     private logger: LogService,
     public filterService: FilterService,
     private uiInteractionService: UiInteractionService,
-    private versionControlService : VersionControlService
+    private versionControlService: VersionControlService,
+    private positionTransformationService: PositionTransformationService
   ) {
     this.nodeLabelGroups = this.labelGroupService.getLabelGroupsFromLabelRef(
       LabelRef.Node,
@@ -82,6 +86,10 @@ export class EditorEditToolsViewComponent implements OnDestroy {
     return this.versionControlService.getVariantIsWritable();
   }
 
+  getAreMultiObjectSelected(): boolean {
+    return this.uiInteractionService.getEditorMode() === EditorMode.MultiNodeMoving;
+  }
+
   onClearAllFiltered() {
     const confirmationDialogParamter = new ConfirmationDialogParameter(
       $localize`:@@app.view.editor-edit-tools-view-component.delete:Delete`,
@@ -166,6 +174,22 @@ export class EditorEditToolsViewComponent implements OnDestroy {
     );
   }
 
+  onAlignElementsLeft() {
+    this.positionTransformationService.alignSelectedElementsToLeftBorder();
+  }
+
+  onAlignElementsTop() {
+    this.positionTransformationService.alignSelectedElementsToTopBorder();
+  }
+
+  onAlignElementsRight() {
+    this.positionTransformationService.alignSelectedElementsToRightBorder();
+  }
+
+  onAlignElementsBottom() {
+    this.positionTransformationService.alignSelectedElementsToBottomBorder();
+  }
+
   private loadNetzgrafik(param, callback) {
     const file = param.target.files[0];
     const reader = new FileReader();

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -244,11 +244,11 @@
           "position": "Position",
           "close": "Schliessen"
         },
-        "trainrun-and-section-dialog" : {
+        "trainrun-and-section-dialog": {
           "filterableLabels": "Filterbare Labels",
           "trainrun-filter-tab": {
             "labels": "Labels",
-            "newLabels" : "Neues Label...",
+            "newLabels": "Neues Label...",
             "trainrunDuplicate": "Zuglauf duplizieren",
             "trainrunDelete": "Zuglauf löschen",
             "delete": "Löschen",
@@ -293,6 +293,11 @@
         "add-netzgrafik-as-copy": "Netzgrafik als Kopie einfügen",
         "merge-netzgrafik-tooltip": "Netzgrafik zusammenführen (Zugfahrten, Knoten, Kommentare)",
         "merge-netzgrafik": "Netzgrafik durch zusammenführen",
+        "align-elements-netzgrafik-title": "Elemente ausrichten",
+        "align-elements-left": "Linksbündig ausrichten",
+        "align-elements-right": "Rechtsbündig ausrichten",
+        "align-elements-top": "Oben ausrichten",
+        "align-elements-bottom": "Unten ausrichten",
         "delete": "Löschen",
         "on-clear-delete-all-non-visible-elements": "Sollen alle nicht sichtbare Elemente aus der Netzgrafik definitiv gelöscht werden?",
         "on-clear-delete-all-visible-elements": "Sollen alle sichtbare Elemente aus der Netzgrafik definitiv gelöscht werden?",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -293,6 +293,11 @@
         "add-netzgrafik-as-copy": "Add netzgrafik as a copy",
         "merge-netzgrafik-tooltip": "Merge netzgrafik (trainruns, nodes, notes)",
         "merge-netzgrafik": "Merge netzgrafik",
+        "align-elements-netzgrafik-title": "Align multiple objects (nodes)",
+        "align-elements-left": "Align left",
+        "align-elements-right": "Align right",
+        "align-elements-top": "Align top",
+        "align-elements-bottom": "Align bottom",
         "delete": "Delete",
         "on-clear-delete-all-non-visible-elements": "Should all non-visible elements be permanently deleted from the netzgrafik?",
         "on-clear-delete-all-visible-elements": "Should all visible elements be permanently deleted from the netzgrafik?",

diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
@@ -292,6 +292,11 @@
         "add-netzgrafik-as-copy": "Ajouter un réticulaire en tant que copie",
         "merge-netzgrafik-tooltip": "Fusionner les réticulaires (trajets de train, noeuds, notes)",
         "merge-netzgrafik": "Fusionner un réticulaire",
+        "align-elements-netzgrafik-title": "Aligner plusieurs objets (noeuds)",
+        "align-elements-left": "Aligner à gauche",
+        "align-elements-right": "Aligner à droite",
+        "align-elements-top": "Aligner le haut",
+        "align-elements-bottom": "Aligner le bas",
         "delete": "Supprimer",
         "on-clear-delete-all-non-visible-elements": "Tous les éléments non visibles doivent-ils être définitivement supprimés du réticulaire ?",
         "on-clear-delete-all-visible-elements": "Tous les éléments visibles doivent-ils être définitivement supprimés du réticulaire ?",

diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json
@@ -292,6 +292,11 @@
         "add-netzgrafik-as-copy": "Add netzgrafik as a copy",
         "merge-netzgrafik-tooltip": "Merge netzgrafik (trainruns, nodes, notes)",
         "merge-netzgrafik": "Merge netzgrafik",
+        "align-elements-netzgrafik-title": "Align multiple objects (nodes)",
+        "align-elements-left": "Align left",
+        "align-elements-right": "Align right",
+        "align-elements-top": "Align top",
+        "align-elements-bottom": "Align bottom",
         "delete": "Delete",
         "on-clear-delete-all-non-visible-elements": "Should all non-visible elements be permanently deleted from the netzgrafik?",
         "on-clear-delete-all-visible-elements": "Should all visible elements be permanently deleted from the netzgrafik?",