UI for entity grid (#317)

* fixed icons being off-center

* added ui for entity grid, #292

* added visible grid

CHANGELOG.md

@@ -4,8 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
-## [1.4.0] 2024-02-23
+### Added
+- Added UI for Entity Grid (hotkey G) with additional settings [#292](https://github.com/CCDirectLink/crosscode-map-editor/issues/292)
 
+## [1.4.0] 2024-02-23
 ### Added
 - Added proper support for the event steps `SHOW_MODAL_CHOICE` and `SET_MSG_EXPRESSION`.
 - Added rendering of text colors in relevant events (such as `SHOW_MSG`).

webapp/package.json

@@ -71,8 +71,8 @@
     "@angular/platform-browser": "^17.1.2",
     "@angular/platform-browser-dynamic": "^17.1.2",
     "@angular/router": "^17.1.2",
-    "@babylonjs/core": "^5.50.1",
-    "@babylonjs/gui": "^5.50.1",
+    "@babylonjs/core": "5.50.1",
+    "@babylonjs/gui": "5.50.1",
     "@types/earcut": "^2.1.1",
     "@types/jasmine": "~4.3.0",
     "@types/jsoneditor": "^9.9.0",

webapp/src/app/app.module.ts

@@ -68,6 +68,8 @@ import { ResizedDirective } from './directives/resized.directive';
 import { MaterialModule } from './external-modules/material.module';
 import { CombinedTooltipPipe } from './pipes/combined-tooltip.pipe';
 import { KeepHtmlPipe } from './pipes/keep-html.pipe';
+import { ToolbarDividerComponent } from './components/toolbar/toolbar-divider/toolbar-divider.component';
+import { GridMenuComponent } from './components/toolbar/grid-menu/grid-menu.component';
 
 const WIDGETS = [
 	StringWidgetComponent,
@@ -147,6 +149,8 @@ const WIDGETS = [
 		AutofocusDirective,
 		CombinedTooltipPipe,
 		InputWithButtonComponent,
+		ToolbarDividerComponent,
+		GridMenuComponent,
 	],
 	bootstrap: [AppComponent],
 })

webapp/src/app/components/dialogs/map-settings/map-settings.component.ts

@@ -4,6 +4,7 @@ import { CrossCodeMap } from '../../../models/cross-code-map';
 import { MapLoaderService } from '../../../services/map-loader.service';
 import { CCMap } from '../../../services/phaser/tilemap/cc-map';
 import { OverlayRefControl } from '../overlay/overlay-ref-control';
+import { GlobalEventsService } from '../../../services/global-events.service';
 
 @Component({
 	selector: 'app-map-settings',
@@ -20,7 +21,8 @@ export class MapSettingsComponent {
 
 	constructor(
 		loader: MapLoaderService,
-		public ref: OverlayRefControl
+		public ref: OverlayRefControl,
+		private events: GlobalEventsService
 	) {
 		const tileMap = loader.tileMap.getValue();
 
@@ -56,7 +58,10 @@ export class MapSettingsComponent {
 		tileMap.masterLevel = settings.masterLevel;
 		tileMap.attributes = settings.attributes;
 
-		tileMap.resize(settings.mapWidth, settings.mapHeight);
+		this.events.resizeMap.next({
+			x: settings.mapWidth,
+			y: settings.mapHeight
+		});
 
 		this.ref.close();
 	}

webapp/src/app/components/toolbar/grid-menu/grid-menu.component.html

@@ -0,0 +1,61 @@
+<div class="flex flex-row items-center h-full">
+	<ng-container
+		*ngIf="gridSettings() as settings"
+	>
+		<mat-checkbox
+			[ngModel]="settings.enableGrid"
+			(ngModelChange)="update({enableGrid: $event})"
+			color="primary"
+		>
+			Entity Grid
+		</mat-checkbox>
+		<div class="ml-2">
+			<button
+				mat-icon-button
+				(click)="toggleSettings()"
+			>
+				<mat-icon>settings</mat-icon>
+			</button>
+		</div>
+		<div
+			*ngIf="settings.showSettings"
+			@openClose
+			class="flex flex-row gap-2.5 items-center extended-menu ml-2"
+		>
+			<mat-form-field
+				appearance="outline"
+				class="no-padding-form-field point-form-field"
+			>
+				<mat-label>Size</mat-label>
+				<app-point-input
+					[ngModel]="settings.size"
+					(ngModelChange)="update({size: $event})"
+				></app-point-input>
+			</mat-form-field>
+
+			<mat-form-field
+				appearance="outline"
+				class="no-padding-form-field point-form-field"
+			>
+				<mat-label>Offset</mat-label>
+				<app-point-input
+					[ngModel]="settings.offset"
+					[min]="-999"
+					(ngModelChange)="update({offset: $event})"
+				></app-point-input>
+			</mat-form-field>
+			<input
+				type="color"
+				[ngModel]="settings.color"
+				(ngModelChange)="update({color: $event})"
+			/>
+			<mat-checkbox
+				[ngModel]="settings.visible"
+				(ngModelChange)="update({visible: $event})"
+				color="primary"
+			>
+				Visible
+			</mat-checkbox>
+		</div>
+	</ng-container>
+</div>

webapp/src/app/components/toolbar/grid-menu/grid-menu.component.scss

@@ -0,0 +1,15 @@
+:host {
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+.point-form-field {
+	width: 170px;
+}
+
+.extended-menu {
+	overflow-x: hidden;
+	min-width: 0;
+	height: 100%;
+}

webapp/src/app/components/toolbar/grid-menu/grid-menu.component.ts

@@ -0,0 +1,96 @@
+import { Component, effect, OnInit } from '@angular/core';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
+import { Globals } from '../../../services/globals';
+import { NgIf } from '@angular/common';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { PointInputComponent } from '../vec-input/point-input.component';
+import { Helper } from '../../../services/phaser/helper';
+import { Point } from '../../../models/cross-code-map';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { GlobalEventsService } from '../../../services/global-events.service';
+
+export interface GridSettings {
+	size: Point;
+	offset: Point;
+	color: string;
+	enableGrid: boolean;
+	showSettings?: boolean;
+	visible?: boolean;
+}
+
+const gridSettingsKey = 'gridSettingsKey';
+
+@Component({
+	selector: 'app-grid-menu',
+	standalone: true,
+	animations: [
+		trigger('openClose', [
+			state('void', style({
+				width: '0',
+				margin: '0'
+			})),
+			transition('* <=> *', [
+				animate('100ms ease'),
+			]),
+		])
+	],
+	imports: [
+		MatCheckbox,
+		MatIconButton,
+		MatIcon,
+		FormsModule,
+		NgIf,
+		MatFormField,
+		MatInput,
+		MatLabel,
+		PointInputComponent
+	],
+	templateUrl: './grid-menu.component.html',
+	styleUrl: './grid-menu.component.scss'
+})
+export class GridMenuComponent implements OnInit {
+
+	gridSettings = Globals.gridSettings;
+
+	constructor(
+		events: GlobalEventsService
+	) {
+		effect(() => {
+			const settings = this.gridSettings();
+			localStorage.setItem(gridSettingsKey, JSON.stringify(settings));
+			events.gridSettings.next(settings);
+		});
+	}
+
+	ngOnInit() {
+		try {
+			const settings = JSON.parse(localStorage.getItem(gridSettingsKey)!) as Partial<GridSettings>;
+			Globals.gridSettings.update(old => ({
+				...old,
+				...settings
+			}));
+		} catch (e) {
+		}
+	}
+
+	update(newSettings: Partial<GridSettings>) {
+		Globals.gridSettings.update(old => {
+			const cpy = Helper.copy(old);
+			Object.assign(cpy, newSettings);
+			return cpy;
+		});
+	}
+
+	protected readonly MatCheckbox = MatCheckbox;
+
+	toggleSettings() {
+		Globals.gridSettings.update(old => ({
+			...old,
+			showSettings: !old.showSettings
+		}));
+	}
+}

webapp/src/app/components/toolbar/toolbar-divider/toolbar-divider.component.scss

@@ -0,0 +1,6 @@
+:host {
+	width: 1px;
+	height: 100%;
+	background: rgba(255, 255, 255, 0.24);
+	margin: 0 28px;
+}

webapp/src/app/components/toolbar/toolbar-divider/toolbar-divider.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-toolbar-divider',
+	standalone: true,
+	imports: [],
+	template: '',
+	styleUrl: './toolbar-divider.component.scss'
+})
+export class ToolbarDividerComponent {
+}

webapp/src/app/components/toolbar/toolbar.component.html

@@ -1,7 +1,7 @@
 <mat-toolbar fxLayout="row" class="mat-elevation-z4 elevated-toolbar">
 
-	<div fxFlex fxLayoutAlign="start">
-		<div [style.visibility]="is3d ? 'hidden': 'visible'">
+	<div fxLayoutAlign="start">
+		<div [style.visibility]="is3d ? 'hidden': 'visible'" class="flex flex-row items-center">
 			<button mat-button [matMenuTriggerFor]="file">File</button>
 			<mat-menu #file="matMenu">
 				<button mat-menu-item *ngIf="loaded" (click)="newMap()">New Map</button>
@@ -54,14 +54,19 @@
 		</div>
 	</div>
 
-	<div fxFlex>
-		<span class="mat-headline">{{map?.name}}</span>
+	<app-toolbar-divider></app-toolbar-divider>
+	<app-grid-menu></app-grid-menu>
+	<app-toolbar-divider></app-toolbar-divider>
+
+	<div fxFlex class="text-center text-lg">
+		<span class="mat-headline">{{ map?.name }}</span>
 	</div>
-	<div fxFlex fxLayoutAlign="end" [style.visibility]="is3d ? 'hidden': 'visible'">
+
+	<div fxLayoutAlign="end" [style.visibility]="is3d ? 'hidden': 'visible'">
 		<div>
 			<button *ngIf="map" mat-button (click)="openMapSettings()">Map Settings</button>
 			<ng-container *ngIf="!loaded">
-				<span class="load-error">{{error}}</span>
+				<span class="load-error">{{ error }}</span>
 				<mat-spinner *ngIf="!error" [diameter]="40" [strokeWidth]="5"></mat-spinner>
 			</ng-container>
 		</div>

webapp/src/app/components/toolbar/vec-input/point-input.component.html

@@ -0,0 +1,19 @@
+<div role="group" class="flex flex-row gap-1.5"
+     [formGroup]="parts"
+     (focusin)="onFocusIn($event)"
+     (focusout)="onFocusOut($event)">
+	<span class="input-label">X:</span>
+	<input formControlName="x"
+	       [min]="min"
+	       max="999"
+	       type="number"
+	       (input)="update()"
+	>
+	<span class="input-label">Y:</span>
+	<input formControlName="y"
+	       [min]="min"
+	       max="999"
+	       type="number"
+	       (input)="update()"
+	>
+</div>

webapp/src/app/components/toolbar/vec-input/point-input.component.scss

@@ -0,0 +1,21 @@
+input {
+	border: none;
+	background: none;
+	padding: 0 0 0 4px;
+	outline: none;
+	font: inherit;
+	color: currentcolor;
+	min-width: 0;
+	flex: 1;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 1px;
+}
+
+.input-label {
+	opacity: 0;
+	transition: opacity 200ms;
+}
+
+:host.floating .input-label {
+	opacity: 1;
+}