Basic Visualization of Itemgroups and their Items
All checks were successful
E2E Testing / test (push) Successful in 1m38s

This commit is contained in:
Sebastian Böckelmann 2024-05-05 18:14:42 +02:00
parent dd73d0d60b
commit 5a3c0e9d75
4 changed files with 85 additions and 8 deletions

View File

@ -32,7 +32,7 @@
<app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview> <app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
<app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview> <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview>
<app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview> <app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview>
<app-item-overview *ngIf="openContent == ModelComponentType.ITEMGROUP || openContent == ModelComponentType.ITEM" #itemOverview></app-item-overview> <app-item-overview *ngIf="openContent == ModelComponentType.ITEMGROUP || openContent == ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel"></app-item-overview>
</mat-drawer> </mat-drawer>
<div class="example-sidenav-content"> <div class="example-sidenav-content">

View File

@ -31,6 +31,9 @@ export class GameModel {
this.addAbstractItemgroup("Inventory", undefined); this.addAbstractItemgroup("Inventory", undefined);
this.addConcreteItemgroup("Oberteil", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup); this.addConcreteItemgroup("Oberteil", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup);
this.addConcreteItemgroup("Hose", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup); this.addConcreteItemgroup("Hose", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup);
this.addItem("Hose 1", "Hose");
this.addItem("Hose 2", "Hose");
} }
addAbstractItemgroup(groupName: string, parentgroup: AbstractItemGroup | undefined) { addAbstractItemgroup(groupName: string, parentgroup: AbstractItemGroup | undefined) {

View File

@ -1 +1,19 @@
<p>item-overview works!</p> <p>item-overview works!</p>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
{{node.name}}
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'Toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}}
</mat-tree-node>
</mat-tree>

View File

@ -1,10 +1,13 @@
import {Component, Input} from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {GameModel} from "../../project/game-model/GameModel"; import {GameModel} from "../../project/game-model/GameModel";
import {FlatTreeControl} from "@angular/cdk/tree";
interface TreeNode { import {MatTreeFlatDataSource, MatTreeFlattener} from "@angular/material/tree";
name: string, import {ItemGroup} from "../../project/game-model/inventory/ItemGroup";
children: TreeNode[]; import {AbstractItemGroup} from "../../project/game-model/inventory/AbstractItemGroup";
} import {ConcreteItemGroup} from "../../project/game-model/inventory/ConcreteItemGroup";
import {ModelComponent} from "../../project/game-model/ModelComponent";
import {Item} from "../../project/game-model/inventory/Item";
import {ModelComponentType} from "../../project/game-model/ModelComponentType";
interface FlatNode { interface FlatNode {
expandable: boolean, expandable: boolean,
@ -17,7 +20,60 @@ interface FlatNode {
templateUrl: './item-overview.component.html', templateUrl: './item-overview.component.html',
styleUrl: './item-overview.component.scss' styleUrl: './item-overview.component.scss'
}) })
export class ItemOverviewComponent { export class ItemOverviewComponent implements OnInit{
@Input() gameModel: GameModel | undefined @Input() gameModel: GameModel | undefined
private _transformer = (node: ModelComponent, level: number) => {
if(node instanceof AbstractItemGroup) {
return {
expandable: !!node.children && node.children.length > 0,
name: node.componentName,
level: level,
};
} else if(node instanceof ConcreteItemGroup) {
return {
expandable: !!node.items && node.items.length > 0,
name: node.componentName,
level: level
}
} else {
return {
expandable: false,
name: node.componentName,
level: level
}
}
};
treeControl = new FlatTreeControl<FlatNode>(
node => node.level,
node => node.expandable,
);
treeFlattener = new MatTreeFlattener(
this._transformer,
node => node.level,
node => node.expandable,
node => this.getNodeChildren(node)
);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
hasChild = (_: number, node: FlatNode) => node.expandable;
getNodeChildren(node: ModelComponent): ModelComponent[] {
if(node instanceof ConcreteItemGroup) {
return node.items;
} else if(node instanceof AbstractItemGroup) {
return node.children;
} else {
return [];
}
}
ngOnInit() {
this.dataSource.data = this.gameModel!.itemgroups;
}
} }