implemented selection size rendering, fixes #310

CHANGELOG.md

@@ -4,6 +4,12 @@ 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]
+### Added
+- Render dimensions when selecting multiple tiles [#310](https://github.com/CCDirectLink/crosscode-map-editor/issues/310)
+
+### Changed
+- Increased font resolution for entity names
+
 ## [1.2.0] 2024-01-30
 ### Added
 - Toggle in settings that also shows the vanilla maps in the map selection menu

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

@@ -1,2 +1,8 @@
 <p class="version caption">{{ version }}</p>
-<p class="coords caption {{ coordsClass }}">{{ coords }}</p>
+<p class="bottom-elements caption">
+	<ng-container *ngFor="let el of uiElements">
+		<ng-container *ngIf="el.active">
+			{{el.text}}
+		</ng-container>
+	</ng-container>
+</p>

webapp/src/app/components/captions/captions.component.scss

@@ -13,10 +13,10 @@
 	right: 0;
 }
 
-.coords {
+.bottom-elements {
 	background-color: #0005;
 
-	&.inactive {
+	&:empty {
 		display: none;
 	}
 }

webapp/src/app/components/captions/captions.component.ts

@@ -2,23 +2,35 @@ import { Component, OnInit } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { Globals } from '../../services/globals';
 
+export interface BottomUiElement {
+	text?: string;
+	active?: boolean;
+}
+
 @Component({
 	selector: 'app-captions',
 	templateUrl: './captions.component.html',
 	styleUrls: ['./captions.component.scss'],
 })
 export class CaptionsComponent implements OnInit {
 	version = environment.version;
-	coords = '';
-	coordsClass = 'inactive';
-
+	coords: BottomUiElement = {};
+	selectionSize: BottomUiElement = {};
+
+	uiElements: BottomUiElement[] = [
+		this.coords,
+		this.selectionSize
+	];
+
 	ngOnInit(): void {
-		Globals.globalEventsService.updateCoords.subscribe((coords) => {
-			this.coords = !coords
-				? ''
-				: `(${coords.x}, ${coords.y}, ${coords.z})`;
-
-			this.coordsClass = coords ? '' : 'inactive';
+		Globals.globalEventsService.updateCoords.subscribe(coords => {
+			this.coords.text = `(${coords?.x}, ${coords?.y}, ${coords?.z})`;
+			this.coords.active = !!coords;
+		});
+
+		Globals.globalEventsService.updateTileSelectionSize.subscribe(size => {
+			this.selectionSize.text = `${size?.x}x${size?.y}`;
+			this.selectionSize.active = !!size;
 		});
 	}
 }

webapp/src/app/components/dialogs/floating-window/tile-selector/tile-selector.scene.ts

@@ -237,6 +237,10 @@ export class TileSelectorScene extends Phaser.Scene {
 		}
 		this.rect = this.add.rectangle(x * Globals.TILE_SIZE, y * Globals.TILE_SIZE, width * Globals.TILE_SIZE, height * Globals.TILE_SIZE);
 		this.rect.setOrigin(0, 0);
-		this.rect.setStrokeStyle(1, 0xffffff, 0.6);
+		if (Globals.settingsService.getSettings().selectionBoxDark) {
+			this.rect.setStrokeStyle(2, 0x333333, 0.9);
+		} else {
+			this.rect.setStrokeStyle(2, 0xffffff, 0.6);
+		}
 	}
 }

webapp/src/app/components/dialogs/settings/settings.component.html

@@ -15,7 +15,7 @@
 					<button mat-stroked-button (click)="select()">Select</button>
 					<button mat-stroked-button (click)="check()">
 						Check
-						<mat-icon [ngClass]="iconCss" class="icon-base">{{icon}}</mat-icon>
+						<mat-icon [ngClass]="iconCss" class="icon-base">{{ icon }}</mat-icon>
 					</button>
 				</div>
 			</form>
@@ -24,21 +24,43 @@
 					<mat-label>Mod</mat-label>
 					<mat-select [(value)]="mod" (selectionChange)="modSelectEvent($event.value)">
 						<mat-option>None</mat-option>
-						<mat-option *ngFor="let mod of mods" [value]="mod">{{mod}}</mat-option>
+						<mat-option *ngFor="let mod of mods" [value]="mod">{{ mod }}</mat-option>
 					</mat-select>
 					<mat-hint>Maps will be stored and loaded from the selected mod</mat-hint>
 				</mat-form-field>
 			</div>
 			<div fxLayout="row" class="option-row">
-				<mat-checkbox [(ngModel)]="includeVanillaMaps" color="primary" [disabled]="isIncludeVanillaMapsDisabled">
+				<mat-checkbox
+					[(ngModel)]="settings.includeVanillaMaps"
+					color="primary"
+					[disabled]="isIncludeVanillaMapsDisabled"
+				>
 					Include vanilla maps
 				</mat-checkbox>
 			</div>
 			<div fxLayout="row" class="option-row">
-				<mat-checkbox [(ngModel)]="wrapEventEditorLines" color="primary">
+				<mat-checkbox
+					[(ngModel)]="settings.wrapEventEditorLines"
+					color="primary"
+				>
 					Wrap event editor lines
 				</mat-checkbox>
 			</div>
+			<div class="flex flex-col pt-5">
+				<h2 class="mat-h2 ">Selection Box Style</h2>
+				<div class="flex flex-row gap-4">
+					<app-image-select-card
+						[card]="cardLight"
+						[selected]="!settings.selectionBoxDark"
+						(onClick)="settings.selectionBoxDark = false"
+					></app-image-select-card>
+					<app-image-select-card
+						[card]="cardDark"
+						[selected]="settings.selectionBoxDark"
+						(onClick)="settings.selectionBoxDark = true"
+					></app-image-select-card>
+				</div>
+			</div>
 		</div>
 	</ng-container>
 	<ng-container ngProjectAs="actions">

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

@@ -6,29 +6,39 @@ import { BrowserService } from '../../../services/browser.service';
 import { ElectronService } from '../../../services/electron.service';
 import { Globals } from '../../../services/globals';
 import { HttpClientService } from '../../../services/http-client.service';
-import { SettingsService } from '../../../services/settings.service';
+import { AppSettings, SettingsService } from '../../../services/settings.service';
 import { SharedService } from '../../../services/shared-service';
 import { OverlayRefControl } from '../overlay/overlay-ref-control';
+import { PropListCard } from '../../widgets/shared/image-select-overlay/image-select-card/image-select-card.component';
 
 @Component({
 	selector: 'app-settings',
 	templateUrl: './settings.component.html',
 	styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit {
-
+	
 	isElectron = Globals.isElectron;
 	folderFormControl = new FormControl();
 	icon = 'help_outline';
 	iconCss = 'icon-undefined';
 	mods: string[] = [];
 	mod = '';
-	wrapEventEditorLines: boolean;
-	includeVanillaMaps: boolean;
+	settings: AppSettings;
 	isIncludeVanillaMapsDisabled: boolean;
-
+
+	cardLight: PropListCard = {
+		name: 'Light',
+		imgSrc: 'assets/selection-light.png',
+	};
+
+	cardDark: PropListCard = {
+		name: 'Dark',
+		imgSrc: 'assets/selection-dark.png',
+	};
+
 	private readonly sharedService: SharedService;
-
+	
 	constructor(
 		private ref: OverlayRefControl,
 		private electron: ElectronService,
@@ -42,28 +52,27 @@ export class SettingsComponent implements OnInit {
 		} else {
 			this.sharedService = browser;
 		}
-
+		
 		http.getMods().subscribe(mods => this.mods = mods);
 		this.mod = this.sharedService.getSelectedMod();
 		this.isIncludeVanillaMapsDisabled = !this.mod;
-		this.wrapEventEditorLines = this.settingsService.wrapEventEditorLines;
-		this.includeVanillaMaps = this.settingsService.includeVanillaMaps;
+		this.settings = JSON.parse(JSON.stringify(this.settingsService.getSettings()));
 	}
-
+	
 	ngOnInit() {
 		if (this.isElectron) {
 			this.folderFormControl.setValue(this.electron.getAssetsPath());
 			this.folderFormControl.valueChanges.subscribe(() => this.resetIcon());
 		}
-
+		
 		this.check();
 	}
-
+	
 	private resetIcon() {
 		this.icon = 'help_outline';
 		this.iconCss = 'icon-undefined';
 	}
-
+	
 	private setIcon(valid: boolean) {
 		if (valid) {
 			this.icon = 'check';
@@ -73,14 +82,14 @@ export class SettingsComponent implements OnInit {
 			this.iconCss = 'icon-invalid';
 		}
 	}
-
+	
 	select() {
 		const path = this.electron.selectCcFolder();
 		if (path) {
 			this.folderFormControl.setValue(path);
 		}
 	}
-
+	
 	check() {
 		const valid = this.electron.checkAssetsPath(this.folderFormControl.value);
 		this.setIcon(valid);
@@ -92,28 +101,27 @@ export class SettingsComponent implements OnInit {
 			});
 		}
 	}
-
+	
 	modSelectEvent(selectedMod: string) {
 		this.isIncludeVanillaMapsDisabled = !selectedMod;
 	}
-
+	
 	save() {
 		if (this.isElectron) {
 			this.electron.saveAssetsPath(this.folderFormControl.value);
 		}
 		this.sharedService.saveModSelect(this.mod);
-		this.settingsService.wrapEventEditorLines = this.wrapEventEditorLines;
-		this.settingsService.includeVanillaMaps = this.includeVanillaMaps;
+		this.settingsService.updateSettings(this.settings);
 		this.close();
 		const ref = this.snackBar.open('Changing the path requires to restart the editor', 'Restart', {
 			duration: 6000
 		});
-
+		
 		ref.onAction().subscribe(() => this.sharedService.relaunch());
 	}
-
+	
 	close() {
 		this.ref.close();
 	}
-
+	
 }

webapp/src/app/components/phaser/phaser.component.ts

@@ -12,6 +12,7 @@ import { MainScene } from '../../services/phaser/main-scene';
 import { PhaserEventsService } from '../../services/phaser/phaser-events.service';
 import { StateHistoryService } from '../dialogs/floating-window/history/state-history.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { SettingsService } from '../../services/settings.service';
 
 @Component({
 	selector: 'app-phaser',
@@ -32,7 +33,8 @@ export class PhaserComponent implements AfterViewInit {
 		private http: HttpClientService,
 		snackbar: MatSnackBar,
 		registry: EntityRegistryService,
-		autotile: AutotileService
+		autotile: AutotileService,
+		settingsService: SettingsService
 	) {
 		Globals.stateHistoryService = stateHistory;
 		Globals.mapLoaderService = mapLoader;
@@ -42,6 +44,7 @@ export class PhaserComponent implements AfterViewInit {
 		Globals.entityRegistry = registry;
 		Globals.httpService = http;
 		Globals.snackbar = snackbar;
+		Globals.settingsService = settingsService;
 	}
 
 

webapp/src/app/components/widgets/event-widget/event-editor/editor/event-editor.component.ts

@@ -65,7 +65,7 @@ export class EventEditorComponent implements OnChanges, OnInit {
 	}
 
 	ngOnInit() {
-		this.wrapText = this.settingsService.wrapEventEditorLines;
+		this.wrapText = this.settingsService.getSettings().wrapEventEditorLines;
 	}
 
 	ngOnChanges() {

webapp/src/app/services/global-events.service.ts

@@ -21,6 +21,7 @@ export class GlobalEventsService {
 	showAddEntityMenu = new Subject<Point>();
 
 	updateCoords = new Subject<Point3 | undefined>();
+	updateTileSelectionSize = new Subject<Point | undefined>();
 	showIngamePreview = new BehaviorSubject(false);
 	hasUnsavedChanges = new BehaviorSubject(false);
 

webapp/src/app/services/globals.ts

@@ -7,6 +7,7 @@ import { EntityRegistryService } from './phaser/entities/registry/entity-registr
 import { PhaserEventsService } from './phaser/phaser-events.service';
 import { CCMap } from './phaser/tilemap/cc-map';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { SettingsService } from './settings.service';
 
 export class Globals {
 	static isElectron = false;
@@ -30,5 +31,6 @@ export class Globals {
 	static autotileService: AutotileService;
 	static entityRegistry: EntityRegistryService;
 	static httpService: HttpClientService;
+	static settingsService: SettingsService;
 	static snackbar: MatSnackBar;
 }

webapp/src/app/services/http-client.service.ts

@@ -30,7 +30,7 @@ export class HttpClientService {
 	}
 
 	getMaps(): Observable<string[]> {
-		const includeVanillaMaps: boolean = this.settingsService.includeVanillaMaps;
+		const includeVanillaMaps = this.settingsService.getSettings().includeVanillaMaps;
 		return this.request(`api/allMaps?includeVanillaMaps=${includeVanillaMaps}`, api.getAllMaps, includeVanillaMaps);
 	}
 

webapp/src/app/services/phaser/entities/cc-entity.ts

@@ -649,6 +649,7 @@ export abstract class CCEntity extends BaseObject {
 				this.text = this.scene.add.text(0, 0, '', {
 					font: '400 18pt Roboto',
 					color: 'white',
+					resolution: window.devicePixelRatio * 3
 				});
 				this.text.setOrigin(0.5, 0.5);
 				this.text.setScale(0.3);