feat: add setting for lock on node

Author: Diede Kerkhof

frank-flow/src/frontend/src/app/header/settings/options/default-settings.model.ts

@@ -17,4 +17,5 @@ export class DefaultSettings implements Settings {
   ignoreConfigurationSettings = false;
   showExplorer = true;
   showUnsavedChangesWarning = true;
+  automaticPanzoom = false;
 }

frank-flow/src/frontend/src/app/header/settings/settings.component.html

@@ -198,5 +198,17 @@ <h2>Flow</h2>
         (stateChange)="setSettings()"
       ></app-toggle>
     </div>
+    <hr />
+    <h2>Assistance</h2>
+    <div class="input-row">
+      <label
+        title="When pressing code in the editor the flow automatically locks onto the corresponding node in the flowchart"
+        >Automatically move flow to selected code</label
+      >
+      <app-toggle
+        [(state)]="settings.automaticPanzoom"
+        (stateChange)="setSettings()"
+      ></app-toggle>
+    </div>
   </div>
 </ngx-smart-modal>

frank-flow/src/frontend/src/app/header/settings/settings.model.ts

@@ -11,4 +11,5 @@ export interface Settings extends FlowSettings {
   useLastMode: boolean;
   switchWithoutSaving: SwitchWithoutSavingOption;
   ignoreConfigurationSettings: boolean;
+  automaticPanzoom: boolean;
 }

frank-flow/src/frontend/src/app/shared/services/flow-structure.service.ts

@@ -13,13 +13,16 @@ import { File } from '../models/file.model';
 import { FlowStructure } from '../models/flow-structure.model';
 import { ChangedAttribute } from '../models/changed-attribute.model';
 import { PanZoomService } from './pan-zoom.service';
+import { SettingsService } from '../../header/settings/settings.service';
+import { Settings } from '../../header/settings/settings.model';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FlowStructureService {
   public monacoEditorComponent?: MonacoEditorComponent;
   public selectedNode?: FlowStructureNode;
+  public settings!: Settings;
 
   private currentFile!: File;
   private flowStructure!: FlowStructure;
@@ -29,9 +32,17 @@ export class FlowStructureService {
 
   constructor(
     private currentFileService: CurrentFileService,
-    private panZoomService: PanZoomService
+    private panZoomService: PanZoomService,
+    private settingsService: SettingsService
   ) {
     this.getCurrentFile();
+    this.subscribeToSettings();
+  }
+
+  subscribeToSettings(): void {
+    this.settingsService
+      .getSettings()
+      .subscribe((settings) => (this.settings = settings));
   }
 
   getCurrentFile(): void {
@@ -63,7 +74,9 @@ export class FlowStructureService {
         this.isNodeAtPosition(node, position)
     );
     this.resetHighlightNodeInXml();
-    this.panToNode();
+    if (this.settings.automaticPanzoom) {
+      this.panToNode();
+    }
   }
 
   isNodeAtPosition(