resize handlers moved

src/scene-view/game-container/game-container.ts

@@ -6,7 +6,6 @@ import { GameParent } from 'scene-view/game-parent/game-parent';
 import { ReferenceImage } from 'scene-view/reference-image/reference-image';
 import { SelectionArea } from 'scene-view/selection-area/selection-area';
 import './game-container.scss';
-import { GameResizeHandle } from './game-resize-handle';
 
 export class GameContainer extends HTMLElement {
 	public static readonly tagName = 'phred-game-container';
@@ -28,8 +27,6 @@ export class GameContainer extends HTMLElement {
 		const selectionArea = document.createElement(SelectionArea.tagName) as SelectionArea;
 		this.selectionArea = parent.appendChild(selectionArea);
 		selectionArea.init(game);
-
-		this.createResizeHandles(parent);
 	}
 
 	public setupActions(actions: ActionHandler) {
@@ -44,24 +41,6 @@ export class GameContainer extends HTMLElement {
 		this.onmouseup = this.onInputUp;
 	}
 
-	private createResizeHandles(parent: HTMLElement) {
-		const onStopDrag = this.onGameResized.bind(this);
-		const handleRight = document.createElement(GameResizeHandle.tagName) as GameResizeHandle;
-		handleRight.init(parent, 'right');
-		handleRight.onStopDrag = onStopDrag;
-		parent.appendChild(handleRight);
-
-		const handleBottom = document.createElement(GameResizeHandle.tagName) as GameResizeHandle;
-		handleBottom.init(parent, 'bottom');
-		handleBottom.onStopDrag = onStopDrag;
-		parent.appendChild(handleBottom);
-
-		const handleBoth = document.createElement(GameResizeHandle.tagName) as GameResizeHandle;
-		handleBoth.init(parent, 'both');
-		handleBoth.onStopDrag = onStopDrag;
-		parent.appendChild(handleBoth);
-	}
-
 	public enable(config: PluginConfig) {
 		const el = this.game.canvas.parentElement;
 		this.gameOriginalParentElement = el.parentElement;
@@ -133,10 +112,6 @@ export class GameContainer extends HTMLElement {
 		}
 	}
 
-	private onGameResized(width: number, height: number) {
-		Editor.prefs.responsiveSize = { width, height };
-	}
-
 	// #endregion
 }
 

src/scene-view/game-parent/game-parent.ts

@@ -1,7 +1,8 @@
 import { ActionHandler } from 'core/action-handler';
 import { Actions } from 'core/actions';
+import { Editor } from 'core/editor';
 import { Size } from 'plugin.model';
-import './game-parent.scss';
+import { GameResizeHandle } from './game-resize-handle';
 
 const MIN_WIDTH = 100;
 const MAX_WIDTH = 10000;
@@ -13,6 +14,25 @@ export class GameParent extends HTMLElement {
 
 	public init() {
 		this.id = GameParent.tagName;
+		this.createResizeHandles();
+	}
+
+	private createResizeHandles() {
+		const onStopDrag = this.onGameResized.bind(this);
+		const handleRight = document.createElement(GameResizeHandle.tagName) as GameResizeHandle;
+		handleRight.init(this, 'right');
+		handleRight.onStopDrag = onStopDrag;
+		this.appendChild(handleRight);
+
+		const handleBottom = document.createElement(GameResizeHandle.tagName) as GameResizeHandle;
+		handleBottom.init(this, 'bottom');
+		handleBottom.onStopDrag = onStopDrag;
+		this.appendChild(handleBottom);
+
+		const handleBoth = document.createElement(GameResizeHandle.tagName) as GameResizeHandle;
+		handleBoth.init(this, 'both');
+		handleBoth.onStopDrag = onStopDrag;
+		this.appendChild(handleBoth);
 	}
 
 	public setupActions(actions: ActionHandler) {
@@ -62,6 +82,10 @@ export class GameParent extends HTMLElement {
 			this.classList.remove('resizable');
 		}
 	}
+
+	private onGameResized(width: number, height: number) {
+		Editor.prefs.responsiveSize = { width, height };
+	}
 }
 
 customElements.define(GameParent.tagName, GameParent);