migrated palette, shpi, wwww GUI

AndyGura · Feb 3, 2024 · 8d9e89d · 8d9e89d
1 parent 20adcdb
commit 8d9e89d
Show file tree

Hide file tree

Showing 25 changed files with 133 additions and 98 deletions.
diff --git a/frontend/dist/gui/index.html b/frontend/dist/gui/index.html
@@ -11,6 +11,6 @@
 <style>.mat-typography{font-size:14px;font-weight:400;line-height:20px;font-family:Roboto,sans-serif;letter-spacing:.0178571429em}html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}</style><link rel="stylesheet" href="styles.9650df2468906825.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.9650df2468906825.css"></noscript></head>
 <body class="mat-typography">
   <app-root></app-root>
-<script src="runtime.1713a2863c880bc2.js" type="module"></script><script src="polyfills.6ea95c2235df2b00.js" type="module"></script><script src="scripts.d5dc2919fc5b98cb.js" defer></script><script src="main.4becce23918b6696.js" type="module"></script>
+<script src="runtime.1713a2863c880bc2.js" type="module"></script><script src="polyfills.6ea95c2235df2b00.js" type="module"></script><script src="scripts.d5dc2919fc5b98cb.js" defer></script><script src="main.e0ffc983a443bc9b.js" type="module"></script>
 
 </body></html>
diff --git a/frontend/dist/gui/main.4becce23918b6696.js b/frontend/dist/gui/main.4becce23918b6696.js
diff --git a/frontend/dist/gui/main.e0ffc983a443bc9b.js b/frontend/dist/gui/main.e0ffc983a443bc9b.js
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -18,7 +18,7 @@ import { StringBlockUiComponent } from './components/editor/library/string.block
 import { IntegerBlockUiComponent } from './components/editor/library/integer.block-ui/integer.block-ui.component';
 import { ArrayBlockUiComponent } from './components/editor/library/array.block-ui/array.block-ui.component';
 import { BitmapBlockUiComponent } from './components/editor/eac/bitmap.block-ui/bitmap.block-ui.component';
-// import { PaletteBlockUiComponent } from './components/editor/eac/palette.block-ui/palette.block-ui.component';
+import { PaletteBlockUiComponent } from './components/editor/eac/palette.block-ui/palette.block-ui.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -27,9 +27,9 @@ import { BinaryBlockUiComponent } from './components/editor/library/binary.block
 import { MatPaginatorModule } from '@angular/material/paginator';
 // import { AngleBlockUiComponent } from './components/editor/library/angle.block-ui/angle.block-ui.component';
 import { SidenavResListComponent } from './components/editor/common/sidenav-res-list/sidenav-res-list.component';
-// import { ShpiBlockUiComponent } from './components/editor/eac/shpi.block-ui/shpi.block-ui.component';
+import { ShpiBlockUiComponent } from './components/editor/eac/shpi.block-ui/shpi.block-ui.component';
 import { MatListModule } from '@angular/material/list';
-// import { WwwwBlockUiComponent } from './components/editor/eac/wwww.block-ui/wwww.block-ui.component';
+import { WwwwBlockUiComponent } from './components/editor/eac/wwww.block-ui/wwww.block-ui.component';
 import { MatCardModule } from '@angular/material/card';
 import { NgxDeepEqualsPureService } from 'ngx-deep-equals-pure';
 // import { EnumBlockUiComponent } from './components/editor/library/enum.block-ui/enum.block-ui.component';
@@ -57,12 +57,12 @@ import { MatOptionModule } from '@angular/material/core';
     IntegerBlockUiComponent,
     ArrayBlockUiComponent,
     BitmapBlockUiComponent,
-    // PaletteBlockUiComponent,
+    PaletteBlockUiComponent,
     BinaryBlockUiComponent,
     // AngleBlockUiComponent,
     SidenavResListComponent,
-    // ShpiBlockUiComponent,
-    // WwwwBlockUiComponent,
+    ShpiBlockUiComponent,
+    WwwwBlockUiComponent,
     // EnumBlockUiComponent,
     // FlagsBlockUiComponent,
     ConfirmDialogComponent,

diff --git a/frontend/src/app/components/editor/common/sidenav-res-list/sidenav-res-list.component.scss b/frontend/src/app/components/editor/common/sidenav-res-list/sidenav-res-list.component.scss
@@ -6,14 +6,27 @@
 
   mat-selection-list {
     height: 100%;
-    overflow-y: auto;
-    width: 12rem;
     max-width: 33%;
     flex-shrink: 0;
+    padding: 0;
+
+    mat-list-option[aria-selected="true"] {
+      background-color: #e0e0e0;
+      &:focus {
+        background-color: unset;
+      }
+    }
+
+    ::ng-deep {
+      .mdc-radio {
+        display: none;
+      }
+    }
   }
 
   mat-card {
     width: 100%;
     height: 100%;
+    padding: 1rem;
   }
 }
diff --git a/frontend/src/app/components/editor/eac/bitmap.block-ui/bitmap.block-ui.component.html b/frontend/src/app/components/editor/eac/bitmap.block-ui/bitmap.block-ui.component.html
@@ -4,9 +4,3 @@
                         'palette',
                        ]"></app-compound-block-ui>
 <img *ngIf="imageUrl$ | async" [src]="imageUrl$ | async">
-<app-editor *ngIf="resource!.schema.fields['palette']"
-            [resource]="{ id: resource!.id + '/' + 'palette', name: 'palette', data: resource!.data.palette, schema: resource!.schema.fields['palette']?.schema }"></app-editor>
-<!--<div id="actions">-->
-<!--    <button mat-raised-button color="primary" (click)="openResourceInSystem()">Open with system app</button>-->
-<!--    <button mat-raised-button color="primary" *ngIf="hasSerializedFile" (click)="pullResource()">Pull updated file</button>-->
-<!--</div>-->
diff --git a/frontend/src/app/components/editor/eac/bitmap.block-ui/bitmap.block-ui.component.scss b/frontend/src/app/components/editor/eac/bitmap.block-ui/bitmap.block-ui.component.scss
@@ -13,8 +13,3 @@ img {
   background-size: 16px 16px;
   background-color: #aaaaaa;
 }
-
-#actions {
-  display: flex;
-  column-gap: 1rem;
-}
diff --git a/frontend/src/app/components/editor/eac/palette.block-ui/palette.block-ui.component.html b/frontend/src/app/components/editor/eac/palette.block-ui/palette.block-ui.component.html
@@ -1,14 +1,7 @@
-<h1>{{ (resourceData?.block_class_mro || '').split('__')[0] }}</h1>
-<div *ngIf="resourceData" class="number-matrix">
-    Unknowns:
-    <ng-container *ngFor="let number of [].constructor(resourceData.value.unknowns.value.length); let i = index">
-        <input matInput type="number"
-               (change)="changed.emit()"
-               [(ngModel)]="resourceData.value.unknowns.value[i]">
-    </ng-container>
-</div>
+<app-compound-block-ui [resource]="resource"
+                       [fieldBlacklist]="['colors']"></app-compound-block-ui>
 <div id="colors-container">
-    <div *ngFor="let color of resourceData?.value.colors.value; let i = index" class="color-box"
-         [ngStyle]="{'background-color': '#' + lpad(color.value.toString(16), '0', 8) }"
-         [matTooltip]="i + ': #' + color.value.toString(16)"></div>
+    <div *ngFor="let color of resourceData?.colors; let i = index" class="color-box"
+         [ngStyle]="{'background-color': '#' + lpad(color.toString(16), '0', 8) }"
+         [matTooltip]="i + ': #' + color.toString(16)"></div>
 </div>
diff --git a/frontend/src/app/components/editor/eac/palette.block-ui/palette.block-ui.component.scss b/frontend/src/app/components/editor/eac/palette.block-ui/palette.block-ui.component.scss
@@ -1,8 +1,3 @@
-.number-matrix {
-  display: flex;
-  margin: 0 0 16px;
-}
-
 #colors-container {
   display: flex;
   flex-wrap: wrap;

diff --git a/frontend/src/app/components/editor/eac/palette.block-ui/palette.block-ui.component.ts b/frontend/src/app/components/editor/eac/palette.block-ui/palette.block-ui.component.ts
@@ -8,8 +8,12 @@ import { GuiComponentInterface } from '../../gui-component.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PaletteBlockUiComponent implements GuiComponentInterface {
-  @Input() resourceData: BlockData | null = null;
-  name: string = '';
+  @Input()
+  resource: Resource | null = null;
+
+  get resourceData(): BlockData | null {
+    return this.resource?.data;
+  }
 
   @Output('changed') changed: EventEmitter<void> = new EventEmitter<void>();
 

diff --git a/frontend/src/app/components/editor/eac/shpi.block-ui/shpi.block-ui.component.html b/frontend/src/app/components/editor/eac/shpi.block-ui/shpi.block-ui.component.html
@@ -1,7 +1,3 @@
-<div id="top-bar">
-    <h1>SHPI archive</h1>
-    <app-editor class="plain-editor"
-                [resource]="resourceData?.value?.shpi_directory"
-                [name]="'shpi_directory'"></app-editor>
-</div>
-<app-sidenav-res-list [resources]="resourcesMap"></app-sidenav-res-list>
+<app-compound-block-ui [resource]="resource"
+                       [fieldBlacklist]="['children', 'children_descriptions']"></app-compound-block-ui>
+<app-sidenav-res-list [resources]="resourceMap"></app-sidenav-res-list>
diff --git a/frontend/src/app/components/editor/eac/shpi.block-ui/shpi.block-ui.component.scss b/frontend/src/app/components/editor/eac/shpi.block-ui/shpi.block-ui.component.scss
@@ -13,8 +13,4 @@
       margin: 0 0 16px;
     }
   }
-
-  app-sidenav-res-list {
-    height: calc(100% - 4rem);
-  }
 }
diff --git a/frontend/src/app/components/editor/eac/shpi.block-ui/shpi.block-ui.component.ts b/frontend/src/app/components/editor/eac/shpi.block-ui/shpi.block-ui.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { GuiComponentInterface } from '../../gui-component.interface';
+import { joinId } from '../../../../utils/join-id';
 
 @Component({
   selector: 'app-shpi-block-ui',
@@ -8,17 +9,36 @@ import { GuiComponentInterface } from '../../gui-component.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShpiBlockUiComponent implements GuiComponentInterface {
-  @Input() resourceData: BlockData | null = null;
-  name: string = '';
-
-  @Output('changed') changed: EventEmitter<void> = new EventEmitter<void>();
+  private _resource: Resource | null = null;
+  get resource(): Resource | null {
+    return this._resource;
+  }
 
-  get resourcesMap(): { [key: string]: BlockData | ReadError } {
-    const res: { [key: string]: BlockData | ReadError } = {};
-    for (let i = 0; i < this.resourceData?.value.children_descriptions?.value.length; i++) {
-      const name = this.resourceData?.value.children_descriptions?.value[i].value.name.value;
-      res[name] = this.resourceData?.value.children?.value[i];
+  @Input()
+  set resource(value: Resource | null) {
+    this._resource = value;
+    this.resourceMap = {};
+    const childSchema = (this._resource?.schema.fields || []).find(
+      (x: { name: string; schema: BlockSchema }) => x.name === 'children',
+    )?.schema.child_schema;
+    if (!childSchema) return;
+    let unaliasedCounter = 0;
+    for (const [i, alias] of this.resourceData!.children_aliases.entries()) {
+      let childName = alias || '__' + unaliasedCounter++;
+      this.resourceMap[childName] = {
+        id: joinId(this._resource!.id, `children/${i}`),
+        data: this.resourceData?.children[i],
+        schema: childSchema,
+        name: '',
+      };
     }
-    return res;
   }
+
+  get resourceData(): BlockData | null {
+    return this._resource?.data;
+  }
+
+  resourceMap: { [key: string]: Resource } = {};
+
+  @Output('changed') changed: EventEmitter<void> = new EventEmitter<void>();
 }
diff --git a/frontend/src/app/components/editor/eac/wwww.block-ui/wwww.block-ui.component.html b/frontend/src/app/components/editor/eac/wwww.block-ui/wwww.block-ui.component.html
@@ -1,4 +1 @@
-<div id="top-bar">
-    <h1>Wwww archive</h1>
-</div>
-<app-sidenav-res-list [resources]="resourcesMap"></app-sidenav-res-list>
+<app-sidenav-res-list [resources]="resourceMap"></app-sidenav-res-list>
diff --git a/frontend/src/app/components/editor/eac/wwww.block-ui/wwww.block-ui.component.scss b/frontend/src/app/components/editor/eac/wwww.block-ui/wwww.block-ui.component.scss
@@ -9,8 +9,4 @@
     align-items: center;
     column-gap: 2rem;
   }
-
-  app-sidenav-res-list {
-    height: calc(100% - 4rem);
-  }
 }
diff --git a/frontend/src/app/components/editor/eac/wwww.block-ui/wwww.block-ui.component.ts b/frontend/src/app/components/editor/eac/wwww.block-ui/wwww.block-ui.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { GuiComponentInterface } from '../../gui-component.interface';
+import { joinId } from '../../../../utils/join-id';
 
 @Component({
   selector: 'app-wwww-block-ui',
@@ -8,16 +9,35 @@ import { GuiComponentInterface } from '../../gui-component.interface';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WwwwBlockUiComponent implements GuiComponentInterface {
-  @Input() resourceData: BlockData | null = null;
-  name: string = '';
-
-  @Output('changed') changed: EventEmitter<void> = new EventEmitter<void>();
+  private _resource: Resource | null = null;
+  get resource(): Resource | null {
+    return this._resource;
+  }
 
-  get resourcesMap(): { [key: string]: BlockData | ReadError } {
-    const res: { [key: string]: BlockData | ReadError } = {};
-    for (let i = 0; i < this.resourceData?.value.children?.value.length; i++) {
-      res[i.toString()] = this.resourceData?.value.children?.value[i];
+  @Input()
+  set resource(value: Resource | null) {
+    this._resource = value;
+    this.resourceMap = {};
+    console.log(this._resource);
+    const childSchema = (this._resource?.schema.fields || []).find(
+      (x: { name: string; schema: BlockSchema }) => x.name === 'children',
+    )?.schema.child_schema;
+    if (!childSchema) return;
+    for (let i = 0; i < this.resourceData!.children.length; i++) {
+      this.resourceMap[i.toString()] = {
+        id: joinId(this._resource!.id, `children/${i}`),
+        data: this.resourceData!.children[i],
+        schema: childSchema,
+        name: '',
+      };
     }
-    return res;
   }
+
+  get resourceData(): BlockData | null {
+    return this._resource?.data;
+  }
+
+  resourceMap: { [key: string]: Resource } = {};
+
+  @Output('changed') changed: EventEmitter<void> = new EventEmitter<void>();
 }
diff --git a/frontend/src/app/components/editor/editor.component.ts b/frontend/src/app/components/editor/editor.component.ts
@@ -16,11 +16,11 @@ import { IntegerBlockUiComponent } from './library/integer.block-ui/integer.bloc
 import { StringBlockUiComponent } from './library/string.block-ui/string.block-ui.component';
 import { ArrayBlockUiComponent } from './library/array.block-ui/array.block-ui.component';
 import { BitmapBlockUiComponent } from './eac/bitmap.block-ui/bitmap.block-ui.component';
-// import { PaletteBlockUiComponent } from './eac/palette.block-ui/palette.block-ui.component';
+import { PaletteBlockUiComponent } from './eac/palette.block-ui/palette.block-ui.component';
 import { BinaryBlockUiComponent } from './library/binary.block-ui/binary.block-ui.component';
 // import { AngleBlockUiComponent } from './library/angle.block-ui/angle.block-ui.component';
-// import { ShpiBlockUiComponent } from './eac/shpi.block-ui/shpi.block-ui.component';
-// import { WwwwBlockUiComponent } from './eac/wwww.block-ui/wwww.block-ui.component';
+import { ShpiBlockUiComponent } from './eac/shpi.block-ui/shpi.block-ui.component';
+import { WwwwBlockUiComponent } from './eac/wwww.block-ui/wwww.block-ui.component';
 // import { EnumBlockUiComponent } from './library/enum.block-ui/enum.block-ui.component';
 // import { FlagsBlockUiComponent } from './library/flags.block-ui/flags.block-ui.component';
 // import { TriMapBlockUiComponent } from './eac/tri-map.block-ui/tri-map.block-ui.component';
@@ -51,11 +51,11 @@ export class EditorComponent implements OnDestroy {
     UTF8Block: StringBlockUiComponent,
     // // NFS1 blocks
     AnyBitmapBlock: BitmapBlockUiComponent,
-    // BasePalette: PaletteBlockUiComponent,
+    BasePalette: PaletteBlockUiComponent,
     // OripGeometry: OripGeometryBlockUiComponent,
-    // ShpiBlock: ShpiBlockUiComponent,
+    ShpiBlock: ShpiBlockUiComponent,
     // TriMap: TriMapBlockUiComponent,
-    // WwwwBlock: WwwwBlockUiComponent,
+    WwwwBlock: WwwwBlockUiComponent,
   };
 
   @ViewChild(DataBlockUIDirective, { static: true }) dataBlockUiHost!: DataBlockUIDirective;

diff --git a/frontend/src/app/components/editor/library/array.block-ui/array.block-ui.component.ts b/frontend/src/app/components/editor/library/array.block-ui/array.block-ui.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { GuiComponentInterface } from '../../gui-component.interface';
+import { joinId } from '../../../../utils/join-id';
 
 @Component({
   selector: 'app-array-block-ui',
@@ -32,7 +33,7 @@ export class ArrayBlockUiComponent implements GuiComponentInterface {
 
   protected buildChildren(): void {
     this.children = (this.resourceData || []).map((d: BlockData, i: number) => ({
-      id: this._resource!.id + (this._resource!.id.includes('__') ? '/' : '__') + i,
+      id: joinId(this._resource!.id, i),
       name: '' + i,
       data: d,
       schema: this._resource!.schema.child_schema,

diff --git a/...tend/src/app/components/editor/library/delegate.block-ui/delegate.block-ui.component.html b/...tend/src/app/components/editor/library/delegate.block-ui/delegate.block-ui.component.html
@@ -1,9 +1,12 @@
 <ng-container *ngIf="resourceData">
-  <h2 [matTooltip]="resourceDescription" matTooltipPosition="above">{{ resource?.name }}</h2>
-  <mat-select [value]="resourceData.choice_index" (selectionChange)="setChoiceIndex($event.value)">
-    <mat-option *ngFor="let schema of resource!.schema.possible_resource_schemas; let i = index" [value]="i">
-      {{ schema.block_class_mro.split('__')[0] }}
-    </mat-option>
-  </mat-select>
+  <h2 *ngIf="resource?.name" [matTooltip]="resourceDescription" matTooltipPosition="above">{{ resource?.name }}</h2>
+  <div id="resource-type-container">
+    <mat-label>Resource type:</mat-label>
+    <mat-select [value]="resourceData.choice_index" (selectionChange)="setChoiceIndex($event.value)">
+      <mat-option *ngFor="let schema of resource!.schema.possible_resource_schemas; let i = index" [value]="i">
+        {{ schema.block_class_mro.split('__')[0] }}
+      </mat-option>
+    </mat-select>
+  </div>
   <app-editor [resource]="this.childResource"></app-editor>
 </ng-container>
diff --git a/...tend/src/app/components/editor/library/delegate.block-ui/delegate.block-ui.component.scss b/...tend/src/app/components/editor/library/delegate.block-ui/delegate.block-ui.component.scss
@@ -0,0 +1,9 @@
+#resource-type-container {
+  display: flex;
+  column-gap: 0.5rem;
+  align-items: center;
+
+  mat-label {
+    flex-shrink: 0;
+  }
+}
diff --git a/frontend/src/app/components/editor/library/delegate.block-ui/delegate.block-ui.component.ts b/frontend/src/app/components/editor/library/delegate.block-ui/delegate.block-ui.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { GuiComponentInterface } from '../../gui-component.interface';
+import { joinId } from '../../../../utils/join-id';
 
 type DelegateBlockData = { choice_index: number; data: BlockData };
 
@@ -71,8 +72,9 @@ export class DelegateBlockUiComponent implements GuiComponentInterface {
     } else {
       this.childResource = {
         ...this._resource,
-        id: this._resource.id + (this._resource.id.includes('__') ? '/' : '__') + 'data',
+        id: joinId(this._resource.id, 'data'),
         data: this.choiceDataCaches[this._resource.data.choice_index],
+        name: '', // name is displayed in this block, no need to duplicate
         schema: this._resource.schema.possible_resource_schemas[this._resource.data.choice_index],
       };
     }

diff --git a/frontend/src/app/components/editor/library/integer.block-ui/integer.block-ui.component.html b/frontend/src/app/components/editor/library/integer.block-ui/integer.block-ui.component.html
@@ -1,6 +1,6 @@
 <mat-form-field appearance="fill" *ngIf="resource"
                 [matTooltip]="resourceDescription" matTooltipPosition="above">
-    <mat-label>{{ resource.name }}</mat-label>
+    <mat-label *ngIf="resource.name">{{ resource.name }}</mat-label>
     <input matInput type="number"
            [max]="resource.schema.max_value"
            [min]="resource.schema.min_value"

diff --git a/frontend/src/app/components/editor/library/string.block-ui/string.block-ui.component.html b/frontend/src/app/components/editor/library/string.block-ui/string.block-ui.component.html
@@ -1,6 +1,6 @@
 <mat-form-field appearance="fill" *ngIf="resource"
                 [matTooltip]="resourceDescription" matTooltipPosition="above">
-    <mat-label>{{ resource.name }}</mat-label>
+    <mat-label *ngIf="resource.name">{{ resource.name }}</mat-label>
     <input matInput type="text"
            [disabled]="resource.schema.required_value !== undefined"
            [maxlength]="maxLength" [minlength]="minLength"