src/app/editor/editor.component.html

@@ -11,7 +11,8 @@
     <app-script-account-editor *ngIf="modelComponent.type === ModelComponentType.SCRIPTACCOUNT"
                                [scriptAccount]="convertModelComponentToScriptAccount(modelComponent)"></app-script-account-editor>
     <app-gamesystem-editor *ngIf="modelComponent.type == ModelComponentType.GAMESYTEM"
-                                [gamesystem]="convertModelComponentToGamesystem(modelComponent)"></app-gamesystem-editor>
+                                [gamesystem]="convertModelComponentToGamesystem(modelComponent)"
+                                (onOpenGamesystemEditor)="openGameModelComponent($event)"></app-gamesystem-editor>
 
   </mat-tab>
 </mat-tab-group>

src/app/editor/gamesystem-editor/gamesystem-editor.component.html

@@ -1,2 +1,3 @@
 <app-simple-gamesystem-editor *ngIf="isSimpleGamesystem()" [simpleGamesystem]="convertGamesystemToSimpleGamesystem()"></app-simple-gamesystem-editor>
-<app-product-gamesystem-editor *ngIf="!isSimpleGamesystem()" [gamesystem]="convertGamesystemToProductGamesystem()"></app-product-gamesystem-editor>
+<app-product-gamesystem-editor *ngIf="!isSimpleGamesystem()" [gamesystem]="convertGamesystemToProductGamesystem()"
+                               (onOpenGamesystemEditor)="onOpenGamesystemEditor($event)"></app-product-gamesystem-editor>

src/app/editor/gamesystem-editor/gamesystem-editor.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {GameModel} from "../../game-model/GameModel";
 import {Gamesystem} from "../../game-model/gamesystems/Gamesystem";
 import {State} from "../../game-model/gamesystems/State";
@@ -14,6 +14,7 @@ import {ProductGamesystem} from "../../game-model/gamesystems/ProductGamesystem"
 export class GamesystemEditorComponent {
 
   @Input() gamesystem: Gamesystem<State<any>, Transition<any>> | undefined
+  @Output('onOpenGamesystemEditor') openGamesystemEmitter = new EventEmitter<SimpleGamesystem>();
 
   isSimpleGamesystem() {
     return this.gamesystem instanceof SimpleGamesystem;
@@ -30,4 +31,8 @@ export class GamesystemEditorComponent {
       return this.gamesystem as ProductGamesystem;
     }
   }
+
+  onOpenGamesystemEditor(gamesystem: SimpleGamesystem) {
+    this.openGamesystemEmitter.emit(gamesystem);
+  }
 }

src/app/editor/gamesystem-editor/product-gamesystem-editor/product-gamesystem-editor.component.html

@@ -1 +1 @@
-<app-product-state-editor [gamesystem]="gamesystem"></app-product-state-editor>
+<app-product-state-editor [gamesystem]="gamesystem" (onOpenGamesystemEditor)="onOpenGamesystemEditor($event)"></app-product-state-editor>

src/app/editor/gamesystem-editor/product-gamesystem-editor/product-gamesystem-editor.component.ts

@@ -1,6 +1,7 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {ProductGamesystem} from "../../../game-model/gamesystems/ProductGamesystem";
 import {ProductStateEditorComponent} from "../state-editor/product-state-editor/product-state-editor.component";
+import {SimpleGamesystem} from "../../../game-model/gamesystems/SimpleGamesystem";
 
 @Component({
   selector: 'app-product-gamesystem-editor',
@@ -14,4 +15,9 @@ import {ProductStateEditorComponent} from "../state-editor/product-state-editor/
 export class ProductGamesystemEditorComponent {
 
   @Input() gamesystem: ProductGamesystem | undefined
+  @Output("onOpenGamesystemEditor") openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
+
+  onOpenGamesystemEditor(gamesystem: SimpleGamesystem) {
+    this.openGamesystemEditorEmitter.emit(gamesystem);
+  }
 }

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html

@@ -2,7 +2,7 @@
   <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
     <th mat-header-cell *matHeaderCellDef>{{col}}</th>
     <td mat-cell *matCellDef="let state">
-      <span *ngIf="i < displayedColumns.length-1">{{getStateLabel(state, i)}}</span>
+      <a *ngIf="i < displayedColumns.length-1" role="button" (click)="clickOnInnerState(i)">{{getLeafState(state, i).stateLabel}}</a>
       <mat-icon *ngIf="i == displayedColumns.length-1">
         {{state.initial? 'done':'close'}}
       </mat-icon>

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ProductGamesystem} from "../../../../game-model/gamesystems/ProductGamesystem";
 import {SimpleGamesystem} from "../../../../game-model/gamesystems/SimpleGamesystem";
 import {
@@ -16,6 +16,7 @@ import {State} from "../../../../game-model/gamesystems/State";
 import {NgForOf, NgIf} from "@angular/common";
 import {ProductState} from "../../../../game-model/gamesystems/ProductState";
 import {MatIcon} from "@angular/material/icon";
+import {Gamesystem} from "../../../../game-model/gamesystems/Gamesystem";
 
 @Component({
   selector: 'app-product-state-editor',
@@ -41,6 +42,7 @@ import {MatIcon} from "@angular/material/icon";
 export class ProductStateEditorComponent implements OnInit{
 
   @Input() gamesystem: ProductGamesystem | undefined
+  @Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
   displayedColumns: string[] = [];
   datasource = new MatTableDataSource();
 
@@ -64,8 +66,8 @@ export class ProductStateEditorComponent implements OnInit{
 
   protected readonly SimpleState = SimpleState;
 
-  getStateLabel(state: State<any>, i: number) {
-    return this.computeLeafStates(state)[i].stateLabel;
+  getLeafState(state: State<any>, i: number) {
+    return this.computeLeafStates(state)[i];
   }
 
   computeLeafStates(state: State<any>) {
@@ -80,4 +82,23 @@ export class ProductStateEditorComponent implements OnInit{
       return leafStates;
     }
   }
+
+  clickOnInnerState(leafIndex: number) {
+    const leaf_gamesystems = this.computeLeafGamesystems(this.gamesystem!);
+    const clicked_gamesystem = leaf_gamesystems[leafIndex];
+    this.openGamesystemEditorEmitter.emit(clicked_gamesystem);
+  }
+
+  computeLeafGamesystems(gamesystem: Gamesystem<any, any>) {
+    if(gamesystem instanceof SimpleGamesystem) {
+      return [gamesystem];
+    } else {
+      const product_gamesystem = gamesystem as ProductGamesystem;
+      const leaf_gamesystems: SimpleGamesystem[] = [];
+      product_gamesystem.innerGamesystems.forEach(innerGamesystem => {
+        this.computeLeafGamesystems(innerGamesystem).forEach(leafGamesystem => leaf_gamesystems.push(leafGamesystem))
+      })
+      return leaf_gamesystems;
+    }
+  }
 }