diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
index 7ca4627..20ed928 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
+++ b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
@@ -4,7 +4,7 @@
Filter
-
+
{{col}} |
@@ -15,8 +15,36 @@
|
-
-
+
+ |
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
index f2c3344..3761132 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
+++ b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
@@ -2,10 +2,59 @@ table {
width: 100%;
}
-.mat-column-Initial {
+.mat-column-Initial, .mat-column-expand {
width: 32px;
}
.long-form {
width: 100%;
}
+
+
+table {
+ width: 100%;
+}
+
+tr.example-detail-row {
+ height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+ background: #545456;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+ background: #545456;
+}
+
+.example-element-row td {
+ border-bottom-width: 0;
+}
+
+.example-element-detail {
+ overflow: hidden;
+ display: flex;
+}
+
+.example-element-diagram {
+ min-width: 80px;
+ border: 2px solid black;
+ padding: 8px;
+ font-weight: lighter;
+ margin: 8px 0;
+ height: 104px;
+}
+
+.example-element-symbol {
+ font-weight: bold;
+ font-size: 40px;
+ line-height: normal;
+}
+
+.example-element-description {
+ padding: 16px;
+}
+
+.example-element-description-attribution {
+ opacity: 0.5;
+}
diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
index 9b15ede..a0b6afe 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
+++ b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
@@ -9,10 +9,18 @@ import {State} from "../../../../game-model/gamesystems/states/State";
import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
import {ProductTransition} from "../../../../game-model/gamesystems/transitions/ProductTransition";
import {ProductState} from "../../../../game-model/gamesystems/states/ProductState";
+import {animate, state, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'app-product-state-editor',
templateUrl: './product-state-editor.component.html',
+ animations: [
+ trigger('detailExpand', [
+ state('collapsed,void', style({height: '0px', minHeight: '0'})),
+ state('expanded', style({height: '*'})),
+ transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+ ]),
+ ],
styleUrl: './product-state-editor.component.scss'
})
export class ProductStateEditorComponent implements OnInit{
@@ -20,13 +28,16 @@ export class ProductStateEditorComponent implements OnInit{
@Input() gamesystem: ProductGamesystem | undefined
@Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter();
displayedColumns: string[] = [];
+ expandedColumns: string[] = []
datasource = new MatTableDataSource();
+ expandedElement: ProductState | null = null;
ngOnInit() {
this.gamesystem!.generateFromChildsystems();
this.generateColumnNamesRecursively(this.gamesystem!, "");
this.displayedColumns.push('Initial');
+ this.expandedColumns = [...this.displayedColumns, 'expand'];
this.datasource.data = this.gamesystem!.states;
this.datasource.filterPredicate = (data: ProductState, filter: string) => {
const leaf_states = LeafGamesystemCalculator.calcLeafStates(data);
diff --git a/src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.ts b/src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.ts
index f2b8860..b569ba1 100644
--- a/src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.ts
+++ b/src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.ts
@@ -12,6 +12,7 @@ import {ScriptAccount} from "../../../../game-model/scriptAccounts/ScriptAccount
export class ScriptaccountActionEditorComponent implements OnInit{
@Input() transition: Transition | undefined
@Input() scriptAccounts: ScriptAccount[] = []
+ @Input() enableEditing: boolean = false;
dataSource: MatTableDataSource = new MatTableDataSource();
displayedColumns: string[] = ['scriptAccount', "valueChange", 'edit', 'delete'];
@@ -21,7 +22,10 @@ export class ScriptaccountActionEditorComponent implements OnInit{
ngOnInit() {
this.dataSource.data = this.transition!.scriptAccountActions.map(action => action);
- console.log("# ScriptAccounts", this.scriptAccounts.length)
+
+ if(!this.enableEditing) {
+ this.displayedColumns = this.displayedColumns.slice(0, -2);
+ }
}
editAction(scriptAccountAction: ScriptAccountAction) {