From af03ac956543103e9f0604dda75ed498fa6af94d Mon Sep 17 00:00:00 2001 From: Adrian Egli Date: Tue, 17 Dec 2024 20:52:09 +0100 Subject: [PATCH] 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 --- documentation/AdvancedEditingShortcuts.md | 8 +- .../netzgrafik-application.component.html | 1 + .../netzgrafik-application.component.ts | 11 +++ .../editor-edit-tools-view.component.html | 73 ++++++++++++++++--- .../editor-edit-tools-view.component.ts | 28 ++++++- src/assets/i18n/de.json | 9 ++- src/assets/i18n/en.json | 5 ++ src/assets/i18n/fr.json | 5 ++ src/assets/i18n/it.json | 5 ++ 9 files changed, 127 insertions(+), 18 deletions(-) diff --git a/documentation/AdvancedEditingShortcuts.md b/documentation/AdvancedEditingShortcuts.md index 204d4129..c27a44b5 100644 --- 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 index 938869cf..db459c55 100644 --- 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()" > diff --git a/src/app/netzgrafik-application/netzgrafik-application.component.ts b/src/app/netzgrafik-application/netzgrafik-application.component.ts index 4764d747..f8569aba 100644 --- 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 index efc8a579..d4e74088 100644 --- 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 @@

{{ 'app.view.editor-edit-tools-view-component.edit' | t {{ 'app.view.editor-edit-tools-view-component.delete-netzgrafik-title' | translate }} @@ -40,9 +40,9 @@

{{ 'app.view.editor-edit-tools-view-component.edit' | t !this.filterService.isTemporaryDisableFilteringOfItemsInViewEnabled() " > -
+
{{ 'app.view.editor-edit-tools-view-component.non-visible-elements' | translate }} -
+
{{ 'app.view.editor-edit-tools-view-component.delete-all-non-visible-elements' | translate }} -
+
-
+
{{ 'app.view.editor-edit-tools-view-component.visible-elements' | translate }} -
+
{{ 'app.view.editor-edit-tools-view-component.delete-all-visible-trainruns' | translate }} -
+
{{ 'app.view.editor-edit-tools-view-component.delete-all-visible-notes' | translate }} -
+
+ {{ 'app.view.editor-edit-tools-view-component.align-elements-left' | translate }} + +
+ + {{ 'app.view.editor-edit-tools-view-component.align-elements-right' | translate }} + +
+ + {{ 'app.view.editor-edit-tools-view-component.align-elements-top' | translate }} + +
+ + {{ 'app.view.editor-edit-tools-view-component.align-elements-bottom' | translate }} + + + + 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 index e640a999..661684d8 100644 --- 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 index 4e9db37c..b8541490 100644 --- 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 index 3e5aadd0..8d690868 100644 --- 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 index 988098f5..e6988f21 100644 --- 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 index ffcfd7c1..51a02a63 100644 --- 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?",