bunch of small fixes

CHANGELOG.md

@@ -4,6 +4,19 @@ 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]
+### Fixed
+- Keep filtered entities inactive when changing tabs [#301](https://github.com/CCDirectLink/crosscode-map-editor/issues/301)
+- Increased special level layers to render at level 100 instead of 10 [#309](https://github.com/CCDirectLink/crosscode-map-editor/issues/309)
+- Snap size inputs to defined range only after input loses focus, enabling smoother manual entry [#295](https://github.com/CCDirectLink/crosscode-map-editor/issues/295)
+- Fixed Editor not resizing when zooming in/out in the Browser [#265](https://github.com/CCDirectLink/crosscode-map-editor/issues/265)
+
+### Changed
+- Layers on same level are rendered based on their position in the list 
+- Show exact match at first position in search [#296](https://github.com/CCDirectLink/crosscode-map-editor/issues/296)
+- Changed GlowingLine Step size from 16 to 8 [#276](https://github.com/CCDirectLink/crosscode-map-editor/issues/276)
+- Moving an Entity is now tracked in the history [#270](https://github.com/CCDirectLink/crosscode-map-editor/issues/270)
+- Adding a new level in Map Settings guesses the correct level instead of using 0 [#255](https://github.com/CCDirectLink/crosscode-map-editor/issues/255)
+
 ## [1.5.0] 2024-03-20
 ### Added
 - Added UI for Entity Grid (hotkey G) with additional settings [#292](https://github.com/CCDirectLink/crosscode-map-editor/issues/292)

webapp/src/app/components/dialogs/map-settings/map-content-settings/map-content-settings.component.html

@@ -5,14 +5,16 @@
 		<input type="text" class="default-input grow" [(ngModel)]="settings.name">
 	</div>
 	<hr>
-
+	
 	<!--Map Size-->
 	<div class="flex flex-row gap-2 items-baseline">
 		<span class="w-24">Map Size:</span>
 		<span>width: </span>
-		<input type="number" class="default-input small-input" min="1" [ngModel]="settings.mapWidth" (change)="onNumberChange($event, 'mapWidth')">
+		<input type="number" class="default-input small-input" min="1" [ngModel]="settings.mapWidth"
+		       (change)="onNumberChange($event, 'mapWidth')">
 		<span>height: </span>
-		<input type="number" class="default-input small-input" min="1" [ngModel]="settings.mapHeight" (change)="onNumberChange($event, 'mapHeight')">
+		<input type="number" class="default-input small-input" min="1" [ngModel]="settings.mapHeight"
+		       (change)="onNumberChange($event, 'mapHeight')">
 	</div>
 
 	<hr>
@@ -22,12 +24,20 @@
 		<span class="w-24">Levels: </span>
 		<div class="flex flex-col gap-1 grow">
 			<div class="flex flex-row gap-2 items-baseline" *ngFor="let level of settings.levels; let i=index">
-				<span>Level {{i}}:</span>
-				<input class="default-input grow" [(ngModel)]="level.height">
-				<button mat-stroked-button *ngIf="settings.levels.length > 1" (click)="settings.levels.splice(i, 1)" tabindex="-1">Remove</button>
+				<span>Level {{ i }}:</span>
+				<input
+					type="number"
+					step="16"
+					class="default-input grow"
+					[ngModel]="level.height"
+					(ngModelChange)="level.height = +$event"
+				>
+				<button mat-stroked-button *ngIf="settings.levels.length > 1" (click)="settings.levels.splice(i, 1)"
+				        tabindex="-1">Remove
+				</button>
 			</div>
 			<div>
-				<button mat-stroked-button (click)="settings.levels.push({height: 0})">Add Level</button>
+				<button mat-stroked-button (click)="settings.levels.push({height: guessHeight()})">Add Level</button>
 			</div>
 		</div>
 	</div>
@@ -39,7 +49,7 @@
 		<div class="grow">
 			<mat-select [(ngModel)]="settings.masterLevel" class="default-input">
 				<mat-option *ngFor="let level of settings.levels; let i=index" [value]="i">
-					{{i}}
+					{{ i }}
 				</mat-option>
 			</mat-select>
 		</div>
@@ -50,14 +60,15 @@
 	<div class="attributes-container flex flex-rwo flex-wrap">
 		<div class="attribute-tile">
 			<div class="attribute flex flex-row items-baseline">
-				<span >cameraInBounds: </span>
+				<span>cameraInBounds: </span>
 				<mat-checkbox class="material-input" color="primary"
-							  [(ngModel)]="settings.attributes.cameraInBounds"></mat-checkbox>
+				              [(ngModel)]="settings.attributes.cameraInBounds"></mat-checkbox>
 			</div>
 		</div>
 
 		<div *ngFor="let prop of mapSettings | keyvalue" class="attribute-tile">
-			<app-string-widget [key]="$any(prop.key)" [custom]="$any(settings.attributes)" [attribute]="$any({options:prop.value})" ></app-string-widget>
+			<app-string-widget [key]="$any(prop.key)" [custom]="$any(settings.attributes)"
+			                   [attribute]="$any({options:prop.value})"></app-string-widget>
 		</div>
 	</div>
-</div>
+</div>

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

@@ -19,8 +19,9 @@ export class MapContentSettingsComponent implements OnInit {
 	}>();
 	mapSettings = mapSettingsjson.default;
 
-	constructor() { }
-
+	constructor() {
+	}
+
 	ngOnInit() {
 
 		if (this.settings.levels.length < 1) {
@@ -53,12 +54,23 @@ export class MapContentSettingsComponent implements OnInit {
 			// Parent won't update field if same value
 			// force update value property
 			numElement.value = value + '';
-
+			
 			this.onSettingsChange.emit({
 				property,
 				value
 			});
 		}
 	}
-
+
+	guessHeight(): number {
+		const levels = this.settings.levels;
+		if (levels.length === 0) {
+			return 0;
+		}
+		if (levels.length === 1) {
+			return levels[0].height + 16;
+		}
+		const [l1, l2] = levels.slice(-2);
+		return l2.height + (l2.height - l1.height);
+	}
 }

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

@@ -185,6 +185,7 @@ export class LayersComponent implements OnInit {
 			throw new Error('tilemap not defined');
 		}
 		moveItemInArray(this.map.layers, event.previousIndex, event.currentIndex);
+		this.map.updateLayerIndices();
 		this.stateHistory.saveState({
 			name: 'Layer moved',
 			icon: 'open_with',

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

@@ -77,6 +77,7 @@ export class PhaserComponent implements AfterViewInit {
 			return;
 		}
 		const scale = this.getScale();
+		Globals.game.scale.setZoom(1 / window.devicePixelRatio);
 		Globals.game.scale.resize(
 			scale.width,
 			scale.height

webapp/src/app/components/widgets/vec2-widget/vec2-widget.component.html

@@ -1,19 +1,23 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description ?? ''">
-	<label class="property-name">{{displayName || key}}:</label>
+	<label class="property-name">{{ displayName || key }}:</label>
 
 	<label class="property-name-small">X:</label>
 	<input type="number" class="default-input small-input"
 	       [step]="scaleSettings.scalableStep"
 	       [min]="scaleSettings.baseSize.x"
 	       [disabled]="!scaleSettings.scalableX"
-		   [ngModel]="settings[key].x"
-		   (input)="setVal('x', toInt($any($event.target).value))">
+	       [ngModel]="settings[key].x"
+	       (ngModelChange)="setVal('x', toInt($event))"
+	       (blur)="applySnap('x')"
+	>
 
 	<label class="property-name-small">Y:</label>
 	<input type="number" class="default-input small-input"
 	       [step]="scaleSettings.scalableStep"
 	       [min]="scaleSettings.baseSize.y"
 	       [disabled]="!scaleSettings.scalableY"
-		   [ngModel]="settings[key].y"
-		   (input)="setVal('y', toInt($any($event.target).value))">
+	       [ngModel]="settings[key].y"
+	       (ngModelChange)="setVal('y', toInt($event))"
+	       (blur)="applySnap('y')"
+	>
 </div>

webapp/src/app/components/widgets/vec2-widget/vec2-widget.component.ts

@@ -39,11 +39,17 @@ export class Vec2WidgetComponent extends AbstractWidget implements OnChanges {
 	}
 
 	setVal(key: keyof Point, val: number) {
-		val -= val % this.scaleSettings.scalableStep;
 		const setting = this.settings[this.key];
+		setting[key] = val;
+		this.updateType(val);
+	}
+
+	applySnap(key: keyof Point) {
+		const setting = this.settings[this.key];
+		let val = setting[key] ?? 0;
+		val -= val % this.scaleSettings.scalableStep;
 		const value = Math.max(val, this.scaleSettings.baseSize[key]);
-		setting[key] = value;
-		this.updateType(value);
+		this.setVal(key, value);
 	}
 
 	private updateScaleSettings(): ScaleSettings {

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

@@ -81,6 +81,7 @@
 
 	private map: CCMap;
 	private levelOffset = 0;
+	private visible = true;
 
 	public container!: Phaser.GameObjects.Container;
 
@@ -432,9 +433,9 @@
 	updateZIndex() {
 		let zIndex = this.details.level.level * 10 + 1;
 
-		// TODO: hack to display OLPlatform over objects because right now Object Layer is always on level 10
+		// TODO: hack to display OLPlatform over objects because right now Object Layer is always on level 100
 		if (this.details.type === 'OLPlatform' || this.details.type === 'ObjectLayerView') {
-			zIndex += 100;
+			zIndex += 1000;
 		}
 
 		// sort entities by y when on same level
@@ -681,6 +682,7 @@
 	}
 
 	private setVisible(visible: boolean) {
+		this.visible = visible;
 		this.setActive(visible);
 		if (visible) {
 			this.container.alpha = 1;
@@ -689,6 +691,10 @@
 		}
 	}
 
+	override setActive(value: boolean): this {
+		return super.setActive(this.visible ? value : false);
+	}
+
 	private getRenderBackground(width: number, height: number) {
 		if (!CCEntity.renderBackground) {
 			const g = this.scene.add.graphics({fillStyle: {color: 0x616161, alpha: 1}});
@@ -709,7 +715,7 @@
 		return CCEntity.renderBackground;
 	}
 
 	public async generateHtmlImage(withBackground = true, offsetY: number = 0, entityScale = 1) {
 		const width = 16 * 6 * entityScale;
 		const height = 16 * 7 * entityScale;
 

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

@@ -195,6 +195,10 @@ export class EntityManager extends BaseObject {
 
 				if (this.gameObjectDown) {
 					this.gameObjectDown = false;
+					Globals.stateHistoryService.saveState({
+						name: 'Entity moved',
+						icon: 'open_with'
+					});
 				} else {
 					const entities = this.selectionBox.onInputUp();
 
@@ -211,7 +215,6 @@ export class EntityManager extends BaseObject {
 					entity = gameObject[0].getData('entity');
 				}
 				if (entity) {
-					console.log(entity);
 					const p = {x: pointer.worldX, y: pointer.worldY};
 					if (this.leftClickOpts.timer < 200 && Vec2.distance2(p, this.leftClickOpts.pos) < 10) {
 						this.selectEntity(entity, this.multiSelectKey.isDown);

webapp/src/app/services/phaser/entities/registry/scalable-prop.ts

@@ -120,10 +120,10 @@ export class ScalableProp extends DefaultEntity {
 
 		const size = (this.details.settings['size'] as Point | undefined) ?? {x: 1, y: 1};
 
-		if (!scaleSettings.scalableX || size.x < scaleSettings.baseSize.x) {
+		if (!scaleSettings.scalableX) {
 			size.x = scaleSettings.baseSize.x;
 		}
-		if (!scaleSettings.scalableY || size.y < scaleSettings.baseSize.y) {
+		if (!scaleSettings.scalableY) {
 			size.y = scaleSettings.baseSize.y;
 		}
 

webapp/src/app/services/phaser/entities/selection-box.ts

@@ -23,7 +23,7 @@ export class SelectionBox {
 				alpha: 0.8
 			}
 		});
-		this.graphics.depth = 1000;
+		this.graphics.depth = 10000;
 	}
 
 	public onInputDown(pointer: Phaser.Input.Pointer) {

webapp/src/app/services/phaser/entity-grid.ts

@@ -57,7 +57,7 @@ export class EntityGrid extends Phaser.GameObjects.GameObject {
 			color,
 			0.6
 		);
-		this.grid.depth = 500;
+		this.grid.depth = 5000;
 		this.grid.setOrigin(0, 0);
 		this.grid.setScale(1 / scale, 1 / scale);
 

webapp/src/app/services/phaser/tilemap/cc-map-layer.ts

@@ -14,6 +14,8 @@ export class CCMapLayer {
 	private border!: Phaser.GameObjects.Rectangle;
 	private container!: Phaser.GameObjects.Container;
 
+	private index = 0;
+
 	constructor(
 		private tilemap: Phaser.Tilemaps.Tilemap
 	) {
@@ -137,25 +139,45 @@ export class CCMapLayer {
 		const newTileset = this.tilemap.addTilesetImage(tilesetname, undefined, undefined, undefined, undefined, undefined, 1);
 		this.makeLayer(newTileset ?? []);
 
-		this.updateLevel(this.details.levelName ?? this.details.level);
+		this.updateLevel();
 		this.updateLighter(!!this.details.lighter);
 	}
 
-	updateLevel(level: number | string) {
+	updateLevel(level?: number | string) {
+
+		if (level === undefined) {
+			level = (this.details.levelName ?? this.details.level) as string | number;
+		}
+
 		//converts stringed numbers like "2" to be numeric.
 		//leaves everything else unchanged.
-		if(!isNaN(+level)) {
+		if (!isNaN(+level)) {
 			level = +level;
 		}
-
-		if(typeof level === 'string') {
+		
+		if (typeof level === 'string') {
 			this.details.levelName = level;
-			this.details.level = level === 'first' ? -1 : 10;
+			switch (level) {
+				case 'first':
+					this.details.level = -1;
+					break;
+				case 'postlight':
+					this.details.level = 101;
+					break;
+				default:
+					this.details.level = 100;
+					break;
+			}
 		} else {
 			this.details.level = level;
 			delete this.details.levelName;
 		}
-		this.layer.depth = this.details.level * 10;
+		this.layer.depth = this.details.level * 10 + this.index * 0.0001;
+	}
+
+	updateIndex(index: number) {
+		this.index = index;
+		this.updateLevel();
 	}
 
 	setOffset(x: number, y: number) {
@@ -190,7 +212,7 @@ export class CCMapLayer {
 		}
 		this.layer.alpha = oldLayer?.alpha ?? 1;
 		this.setOffset(this.container.x, this.container.y);
-		this.updateLevel(this.details.levelName ?? this.details.level);
+		this.updateLevel();
 		if (oldLayer) {
 			oldLayer.destroy(true);
 		}

webapp/src/app/services/phaser/tilemap/cc-map.ts

@@ -117,6 +117,8 @@ export class CCMap {
 				this.layers.push(ccLayer);
 			}
 
+			this.updateLayerIndices();
+
 			this.inputLayers = undefined;
 		}
 
@@ -168,6 +170,7 @@ export class CCMap {
 
 	addLayer(layer: CCMapLayer) {
 		this.layers.push(layer);
+		this.updateLayerIndices();
 	}
 
 	removeLayer(layer: CCMapLayer) {
@@ -176,6 +179,12 @@ export class CCMap {
 		layer.destroy();
 	}
 
+	updateLayerIndices() {
+		for (let i = 0; i < this.layers.length; i++) {
+			this.layers[i].updateIndex(i);
+		}
+	}
+
 	public getTilemap() {
 		return this.tileMap;
 	}

webapp/src/app/services/phaser/tilemap/tile-drawer.ts

@@ -47,7 +47,7 @@ export class TileDrawer extends BaseObject {
 		this.shiftKey = this.scene.input.keyboard!.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT, false);
 
 		this.container = this.scene.add.container(0, 0);
-		this.container.depth = 1000;
+		this.container.depth = 10000;
 
 		this.drawRect(1, 1);