:construction: Objects list in room edirtor (14b308a8) · Commits · Cosmo Myzrail Gorynych / ct-js

app/data/i18n/English.json

+3 −1

Original line number	Diff line number	Diff line
		@@ -1527,7 +1527,9 @@
		"addTiles": "Add tiles",
		"manageBackgrounds": "Manage backgrounds",
		"uiTools": "UI tools",
		"roomProperties": "Room properties"
		"roomProperties": "Room properties",
		"copiesList": "List of copies",
		"tilesList": "List of tiles"
		}
		},
		"styleView": {

src/node_requires/roomEditor/IRoomEditorRiotTag.d.ts

+5 −1

Original line number	Diff line number	Diff line
		@@ -19,7 +19,11 @@ export interface IRoomEditorRiotTag extends IRiotTag {
		tileEditor?: IRiotTag,
		backgroundsEditor?: IRiotTag,
		zoomLabel: HTMLSpanElement,
		uiTools?: IRiotTag
		uiTools?: IRiotTag,
		entriesList?: IRiotTag & {
		updateTileEntries(): void;
		resetLastSelected(): void;
		}
		};
		pixiEditor: RoomEditor;
		zoom: number;

src/node_requires/roomEditor/entityClasses/Copy.ts

+1 −0

Original line number	Diff line number	Diff line
		@@ -62,6 +62,7 @@ class Copy extends PIXI.Container {
		this.on('pointerover', () => {
		const {name} = getById('template', copyInfo.uid);
		(this.editor as RoomEditor).updateMouseoverHint(name, this);
		(this.editor as RoomEditor).setHoverSelection(this);
		});
		this.on('pointerout', () => {
		(this.editor as RoomEditor).mouseoverOut(this);

src/node_requires/roomEditor/entityClasses/Tile.ts

+3 −0

Original line number	Diff line number	Diff line
		@@ -29,6 +29,9 @@ class Tile extends PIXI.Sprite {
		this.alpha *= 0.5;
		} else {
		editor.tiles.add(this);
		this.on('pointerover', () => {
		(this.editor as RoomEditor).setHoverSelection(this);
		});
		}
		}
		destroy(): void {

src/node_requires/roomEditor/index.ts

+59 −27

Original line number	Diff line number	Diff line
		@@ -68,6 +68,11 @@ class RoomEditor extends PIXI.Application {
		ctRoom: IRoom;
		currentSelection: Set<Copy \| Tile> = new Set();
		currentUiSelection: Copy \| void;
		/**
		* Used to highlight an entity in a room editor
		* when a user hovers over it in copy/template lists
		*/
		currentHoveredEntity: Copy \| Tile \| void = void 0;
		clipboard: Set<tileClipboardData \| copyClipboardData> = new Set();
		/** A sprite that catches any click events */
		clicktrap = new PIXI.Sprite(PIXI.Texture.WHITE);
		@@ -96,6 +101,11 @@ class RoomEditor extends PIXI.Application {
		* See this.drawSelection method to actually draw it.
		*/
		selectionOverlay = new PIXI.Graphics();
		/**
		* A Graphics instance used like selectionOverlay
		* to highlight hovered copies, through the entities list or in a room.
		*/
		hoverOverlay = new PIXI.Graphics();
		/ A free transform widget that exists in global** coordinates. */
		transformer = new Transformer(this);
		primaryViewport: Viewport;
		@@ -194,6 +204,8 @@ class RoomEditor extends PIXI.Application {
		this.stage.addChild(this.overlays);
		this.deserialize(editor.room as IRoom);
		this.stage.addChild(this.selectionOverlay);
		this.stage.addChild(this.hoverOverlay);
		this.selectionOverlay.eventMode = this.hoverOverlay.eventMode = 'none';
		this.stage.addChild(this.transformer);

		this.pointerCoords.zIndex = Infinity;
		@@ -219,6 +231,9 @@ class RoomEditor extends PIXI.Application {
		if (this.transformer.visible) {
		this.transformer.updateFrame();
		}
		if (this.currentHoveredEntity) {
		this.drawSelection([this.currentHoveredEntity], true);
		}
		// Redraw selection frame
		if (this.riotEditor.currentTool === 'uiTools' && this.currentUiSelection) {
		this.drawSelection([this.currentUiSelection]);
		@@ -506,9 +521,9 @@ class RoomEditor extends PIXI.Application {
		deleted: changes
		});
		this.transformer.clear();
		if (this.riotEditor.refs.propertiesPanel) {
		this.riotEditor.refs.propertiesPanel.updatePropList();
		}
		this.riotEditor.refs.propertiesPanel?.updatePropList?.();
		this.riotEditor.refs.entriesList?.updateTileEntries?.();
		this.riotEditor.refs.entriesList?.resetLastSelected?.();
		}
		copySelection(): void {
		if (this.riotEditor.currentTool !== 'select' \|\| !this.currentSelection.size) {
		@@ -608,9 +623,9 @@ class RoomEditor extends PIXI.Application {
		this.transformer.applyTranslateY += dy;
		this.transformer.applyTransforms();
		this.transformer.setup();
		if (this.riotEditor.refs.propertiesPanel) {
		this.riotEditor.refs.propertiesPanel.updatePropList();
		}
		this.riotEditor.refs.propertiesPanel?.updatePropList?.();
		this.riotEditor.refs.entriesList?.resetLastSelected?.();
		this.riotEditor.refs.entriesList?.updateTileEntries?.();
		this.transformer.blink();
		}
		sort(method: 'x' \| 'y' \| 'toFront' \| 'toBack'): void {
		@@ -689,9 +704,20 @@ class RoomEditor extends PIXI.Application {
		});
		this.transformer.setup();
		}
		drawSelection(entities: Iterable<Copy \| Tile>): void {
		this.selectionOverlay.clear();
		this.selectionOverlay.visible = true;
		/**
		* Updates selection visualization and snapshots transforms
		* for future manipulations and history management.
		*/
		prepareSelection() {
		this.transformer.setup();
		this.marqueeBox.visible = false;
		this.riotEditor.refs.propertiesPanel?.updatePropList?.();
		this.riotEditor.refs.entriesList?.update?.();
		}
		drawSelection(entities: Iterable<Copy \| Tile>, hover?: boolean): void {
		const overlay = hover ? this.hoverOverlay : this.selectionOverlay;
		overlay.clear();
		overlay.visible = true;
		for (const entity of entities) {
		const w = entity.width,
		h = entity.height,
		@@ -706,28 +732,34 @@ class RoomEditor extends PIXI.Application {
		tr = rotateRad(w * (1 - px), -h * py, entity.rotation),
		bl = rotateRad(-w * px, h * (1 - py), entity.rotation),
		br = rotateRad(w * (1 - px), h * (1 - py), entity.rotation);
		// this.selectionOverlay.lineStyle(3, getPixiSwatch('act'));
		this.selectionOverlay.lineStyle(1, getPixiSwatch('background'));
		this.selectionOverlay.beginFill(getPixiSwatch('act'), 0.15);
		this.selectionOverlay.moveTo(x + tl[0] / sx, y + tl[1] / sy);
		this.selectionOverlay.lineTo(x + tr[0] / sx, y + tr[1] / sy);
		this.selectionOverlay.lineTo(x + br[0] / sx, y + br[1] / sy);
		this.selectionOverlay.lineTo(x + bl[0] / sx, y + bl[1] / sy);
		this.selectionOverlay.lineTo(x + tl[0] / sx, y + tl[1] / sy);
		this.selectionOverlay.endFill();
		// this.selectionOverlay.lineStyle(1, getPixiSwatch('background'));
		// this.selectionOverlay.moveTo(x + tl[0] / sx, y + tl[1] / sy);
		// this.selectionOverlay.lineTo(x + tr[0] / sx, y + tr[1] / sy);
		// this.selectionOverlay.lineTo(x + br[0] / sx, y + br[1] / sy);
		// this.selectionOverlay.lineTo(x + bl[0] / sx, y + bl[1] / sy);
		// this.selectionOverlay.lineTo(x + tl[0] / sx, y + tl[1] / sy);
		// overlay.lineStyle(3, getPixiSwatch('act'));
		overlay.lineStyle(1, getPixiSwatch('background'));
		overlay.beginFill(getPixiSwatch('act'), 0.15);
		overlay.moveTo(x + tl[0] / sx, y + tl[1] / sy);
		overlay.lineTo(x + tr[0] / sx, y + tr[1] / sy);
		overlay.lineTo(x + br[0] / sx, y + br[1] / sy);
		overlay.lineTo(x + bl[0] / sx, y + bl[1] / sy);
		overlay.lineTo(x + tl[0] / sx, y + tl[1] / sy);
		overlay.endFill();
		// overlay.lineStyle(1, getPixiSwatch('background'));
		// overlay.moveTo(x + tl[0] / sx, y + tl[1] / sy);
		// overlay.lineTo(x + tr[0] / sx, y + tr[1] / sy);
		// overlay.lineTo(x + br[0] / sx, y + br[1] / sy);
		// overlay.lineTo(x + bl[0] / sx, y + bl[1] / sy);
		// overlay.lineTo(x + tl[0] / sx, y + tl[1] / sy);
		}
		}
		/** Cleans the graphic overlay used to highlight selected copies. */
		clearSelectionOverlay(): void {
		this.selectionOverlay.clear();
		this.selectionOverlay.visible = false;
		clearSelectionOverlay(hover?: boolean): void {
		const overlay = hover ? this.hoverOverlay : this.selectionOverlay;
		overlay.clear();
		overlay.visible = false;
		}
		setHoverSelection(entity: Copy \| Tile): void {
		this.currentHoveredEntity = entity;
		this.drawSelection([entity], true);
		}

		/**
		* Rounds up the values of current selection to fix rounding errors
		* that appear due to global-to-local transformations