align image

src/App.css

@@ -1,4 +1,4 @@
-.background {
+.background, .viewer {
   position: absolute;
   top: 0;
   left: 0;
@@ -7,5 +7,4 @@
 }
 
 .background {
-  opacity: 0.5;
 }

src/App.tsx

@@ -11,6 +11,10 @@ export interface AppState {
 	demo: Demo | null;
 	background: string | null;
 	world: World;
+	x: number;
+	y: number,
+	imageWidth: number,
+	imageHeight: number
 }
 
 import './App.css';
@@ -26,7 +30,11 @@ export class App extends React.Component<{}, AppState> {
 		world: {
 			boundaryMin: {x: 0, y: 0, z: 0},
 			boundaryMax: {x: 1000, y: 1000, z: 1000},
-		}
+		},
+		x: 0,
+		y: 0,
+		imageHeight: 1000,
+		imageWidth: 1000
 	};
 
 	onNumberInputChange(key, event) {
@@ -59,7 +67,15 @@ export class App extends React.Component<{}, AppState> {
 		const reader = new FileReader();
 		reader.onload = () => {
 			const background = reader.result as string;
-			this.setState({background});
+			const img = new Image();
+			img.onload = () => {
+				this.setState({
+					background,
+					imageWidth: img.width,
+					imageHeight: img.height
+				});
+			};
+			img.src = background;
 		};
 		reader.readAsDataURL(file);
 	};
@@ -68,35 +84,55 @@ export class App extends React.Component<{}, AppState> {
 		const originalHeight = 1024 * this.state.scale; // 1024 is a magic number straight from cl_leveloverview code
 		const originalWidth = originalHeight * (this.state.originalWidth / this.state.originalHeight);
 
-		return {width: originalWidth, height: originalHeight};
+		const width = originalWidth / this.state.originalWidth * this.state.imageWidth;
+		const height = originalHeight / this.state.originalHeight * this.state.imageHeight;
+
+		return {width: width / 10, height: height / 10};
 	}
 
 	render() {
 		const {width, height} = this.getDimensions();
 		const demoWidth = (this.state.world.boundaryMax.x - this.state.world.boundaryMin.x) / 10;
 		const demoHeight = (this.state.world.boundaryMax.y - this.state.world.boundaryMin.y) / 10;
-		const size = Math.max(demoWidth, demoHeight);
-		console.log(demoWidth, demoHeight);
+
+		const offsetX = Math.floor((this.state.x - this.state.world.boundaryMin.x) / 10) - Math.floor(width / 2);
+		const offsetY = Math.floor((this.state.y - this.state.world.boundaryMin.y) / 10) - Math.floor(height / 2);
+
+		const topLeft = (this.state.x - this.state.world.boundaryMin.x);
 
 		return <div>
 			<input onChange={this.onNumberInputChange.bind(this, 'scale')}
-			       placeholder="scale"
+			       placeholder="scale" type="number"
 			       value={this.state.scale}/>
 			<input
 				onChange={this.onNumberInputChange.bind(this, 'originalHeight')}
-				placeholder="screen height"
+				placeholder="screen height" type="number"
 				value={this.state.originalHeight}/>
 			<input
 				onChange={this.onNumberInputChange.bind(this, 'originalWidth')}
-				placeholder="screen width"
+				placeholder="screen width" type="number"
 				value={this.state.originalWidth}/>
 			<input onChange={this.onSelectDemo} type="file"/>
 			<MapContainer contentSize={{width: demoWidth, height: demoHeight}}>
+				<img className="background" src={this.state.background || ''}
+				     width={width}
+				     height={height}
+				     style={{
+					     top: offsetY + 'px',
+					     left: offsetX + 'px',
+				     }}/>
 				<DemoViewer className="viewer" height={demoHeight}
 				            width={demoWidth}
 				            demo={this.state.demo}/>
 			</MapContainer>
 			<input onChange={this.onSelectImage} type="file"/>
+			<input onChange={this.onNumberInputChange.bind(this, 'x')}
+			       placeholder="x" type="number"
+			       value={this.state.x}/>
+			<input
+				onChange={this.onNumberInputChange.bind(this, 'y')}
+				placeholder="y" type="number"
+				value={this.state.y}/>
 		</div>;
 	}
 }

src/DemoRender.ts

@@ -16,7 +16,7 @@ export class DemoRender {
 		const translatePosition = (position) => {
 			return {
 				x: Math.floor(position.x - boundaryMin.x) * scale,
-				y: Math.floor(position.y - boundaryMin.y) * scale
+				y: height - Math.floor(position.y - boundaryMin.y) * scale
 			}
 		};
 

src/MapContainer.tsx

@@ -35,13 +35,6 @@ export class MapContainer extends React.Component<MapContainerProps, MapContaine
 		});
 	}
 
-	componentWillReceiveProps({contentSize}: MapContainerProps) {
-		this.setState({
-			height: this.container.clientHeight,
-			width: this.container.clientWidth
-		});
-	}
-
 	render() {
 		const scale = Math.min(this.state.width / this.props.contentSize.width, this.state.height / this.props.contentSize.height);
 		if (!this.sendScale && this.props.onScale) {

src/Panner/Panner.tsx

@@ -57,7 +57,8 @@ export class Panner extends React.Component<PannerProps, PannerState> {
 
 	componentWillReceiveProps({width, height, scale, contentSize}: PannerProps) {
 		if (
-			width == this.panner.screen.width && height == this.panner.screen.height) {
+			width == this.panner.screen.width && height == this.panner.screen.height &&
+			this.props.contentSize.width == contentSize.width && this.props.contentSize.height == contentSize.height) {
 			return;
 		}
 		this.panner.scale = scale;
@@ -95,10 +96,14 @@ export class Panner extends React.Component<PannerProps, PannerState> {
 				</div>
 				<div className="zoommenu">
 					<div className="plus"
-					     onClick={()=>{setZoomFactor(1.10, center)}}>+
+					     onClick={() => {
+						     setZoomFactor(1.10, center)
+					     }}>+
 					</div>
 					<div className="minus"
-					     onClick={()=>{setZoomFactor(0.90, center)}}>
+					     onClick={() => {
+						     setZoomFactor(0.90, center)
+					     }}>
 						-
 					</div>
 				</div>