wgge 0.1.24 → 0.1.26

package/core/helper/ImageHelper.js

@@ -12,7 +12,7 @@ export default class ImageHelper {
 	 * @param {Number} max
 	 * @returns {number}
 	 */
-	static sanitizeZoom(size, viewBoxSize, zoom = 0.0, min = 0, max = Number.MAX_VALUE) {
+	static sanitizeZoom(size, viewBoxSize, zoom = 0.0, min = 0.0, max = Number.MAX_VALUE) {
 		if (size.size() === 0) return 1;
 
 		const minZoomX = viewBoxSize.x / size.x;

package/core/renderer/canvas/CanvasRenderer.js

@@ -92,4 +92,21 @@ export default class CanvasRenderer extends RendererBase {
 	drawCircle(center, radius, fill, stroke) {
 		this.drawArc(center, radius, fill, stroke);
 	}
+
+	drawImage(image, drawStart, drawEnd, imageStart, imageEnd, opacity = 1, clear = true) {
+		if (!(image && this.context2d)) return;
+		if (clear) this.context2d.clearRect(drawStart.x, drawStart.y, drawEnd.x, drawEnd.y);
+		this.context2d.globalAlpha = opacity;
+		this.context2d.drawImage(
+			image,
+			imageStart.x,
+			imageStart.y,
+			imageEnd.x,
+			imageEnd.y,
+			drawStart.x,
+			drawStart.y,
+			drawEnd.x,
+			drawEnd.y
+		);
+	}
 }

package/core/renderer/canvas/ImageCanvasRenderer.js

@@ -0,0 +1,59 @@
+import Vector2 from "../../model/vector/Vector2";
+import CanvasRenderer from "./CanvasRenderer";
+
+export default class ImageCanvasRenderer extends CanvasRenderer {
+
+	/**
+	 * @type ImageViewModel
+	 */
+	model;
+
+	constructor(game, model, canvas) {
+		super(game, model, canvas);
+
+		this.model = model;
+		this.image = null;
+
+	}
+
+	activateInternal() {
+		this.reloadImage();
+	}
+
+	deactivateInternal() {
+		this.image = null;
+	}
+
+	renderInternal() {
+		if (this.model.image.uri.isDirty) {
+			this.reloadImage();
+			return;
+		}
+		this.renderImage();
+	}
+
+	renderImage() {
+		if (!(this.image && this.context2d)) return;
+		const half = this.viewSize.multiply(0.5 / this.model.actualZoom.get());
+		const start = this.model.actualCoordinates.subtract(half);
+		const end = this.model.actualCoordinates.add(half);
+		this.drawImage(
+			this.image,
+			new Vector2(0, 0),
+			this.model.viewSize,
+			start,
+			end,
+			this.model.actualOpacity.get()
+		);
+	}
+
+	reloadImage() {
+		this.image = null;
+		if (this.model.image.uri.isEmpty()) return;
+		this.game.assets.getAsset(this.model.image.uri.get(), (img) => {
+			this.image = img;
+			this.renderImage();
+		});
+	}
+
+}

package/core/renderer/canvas/ImageViewRenderer.js

@@ -0,0 +1,42 @@
+import DomRenderer from "../dom/DomRenderer";
+import DOMHelper from "../../helper/DOMHelper";
+import ImageCanvasRenderer from "./ImageCanvasRenderer";
+
+export default class ImageViewRenderer extends DomRenderer {
+
+	/**
+	 * @type ImageViewModel
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.canvas = null;
+	}
+
+	activateInternal() {
+		this.canvas = DOMHelper.createElement(this.dom, 'canvas');
+		this.addChild(new ImageCanvasRenderer(this.game, this.model, this.canvas));
+
+		this.updateSize();
+	}
+
+	deactivateInternal() {
+		this.resetChildren();
+		this.removeElement(this.canvas);
+		this.canvas = null;
+	}
+
+	renderInternal() {
+		if (this.model.viewSize.isDirty) {
+			this.updateSize();
+		}
+	}
+
+	updateSize() {
+		this.canvas.width = this.model.viewSize.x;
+		this.canvas.height = this.model.viewSize.y;
+	}
+}

package/core/renderer/dom/{ImageRenderer.js → ImageDomRenderer.js}

@@ -1,6 +1,6 @@
 import DomRenderer from "./DomRenderer";
 
-export default class ImageRenderer extends DomRenderer {
+export default class ImageDomRenderer extends DomRenderer {
 
 	/**
 	 * @type DirtyValue

package/game/resources/image/ImageModel.js

@@ -1,6 +1,5 @@
 import ObjectModel from "../../../core/model/ObjectModel";
 import StringValue from "../../../core/model/value/StringValue";
-import FloatValue from "../../../core/model/value/FloatValue";
 import Vector2 from "../../../core/model/vector/Vector2";
 
 export default class ImageModel extends ObjectModel {
@@ -10,21 +9,6 @@ export default class ImageModel extends ObjectModel {
 	 */
 	uri;
 
-	/**
-	 * @type FloatValue
-	 */
-	opacity;
-
-	/**
-	 * @type Vector2
-	 */
-	coordinates;
-
-	/**
-	 * @type FloatValue
-	 */
-	zoom;
-
 	/**
 	 * @type Vector2
 	 */
@@ -34,10 +18,7 @@ export default class ImageModel extends ObjectModel {
 		super(persistent);
 
 		this.uri = this.addProperty('uri', new StringValue());
-		this.opacity = this.addProperty('opacity', new FloatValue());
-		this.coordinates = this.addProperty('coordinates', new Vector2());
-		this.size = this.addProperty('size', new Vector2());
-		this.zoom = this.addProperty('startZoom', new FloatValue(1));
+		this.size = this.addProperty('size', new Vector2(0, 0, false));
 	}
 
 }

package/game/resources/image/ImageViewModel.js

@@ -0,0 +1,103 @@
+import ObjectModel from "../../../core/model/ObjectModel";
+import FloatValue from "../../../core/model/value/FloatValue";
+import Vector2 from "../../../core/model/vector/Vector2";
+import ImageModel from "./ImageModel";
+import ImageHelper from "../../../core/helper/ImageHelper";
+import NumberHelper from "../../../core/helper/NumberHelper";
+
+export default class ImageViewModel extends ObjectModel {
+
+	/**
+	 * @type ImageModel
+	 */
+	image;
+
+	/**
+	 * @type Vector2
+	 */
+	viewSize;
+
+	/**
+	 * @type FloatValue
+	 */
+	opacity;
+
+	/**
+	 * @type FloatValue
+	 */
+	actualOpacity;
+
+	/**
+	 * @type Vector2
+	 */
+	coordinates;
+
+	/**
+	 * @type Vector2
+	 */
+	actualCoordinates;
+
+	/**
+	 * @type FloatValue
+	 */
+	zoom;
+
+	/**
+	 * @type FloatValue
+	 */
+	actualZoom;
+
+	constructor(persistent = true) {
+		super(persistent);
+
+		this.image = this.addProperty('image', new ImageModel());
+
+		this.viewSize = this.addProperty('viewSize', new Vector2());
+
+		this.opacity = this.addProperty('opacity', new FloatValue(1));
+		this.actualOpacity = this.addProperty('actualOpacity', new FloatValue(1));
+
+		this.coordinates = this.addProperty('coordinates', new Vector2());
+		this.actualCoordinates = this.addProperty('actualCoordinates', new Vector2());
+
+		this.zoom = this.addProperty('zoom', new FloatValue(1));
+		this.actualZoom = this.addProperty('actualZoom', new FloatValue(1));
+
+		this.opacity.addEventListener('change', () => this.updateOpacity());
+
+		this.zoom.addEventListener('change', () => this.updateZoom());
+		this.viewSize.addEventListener('change', () => this.updateZoom());
+		this.image.size.addEventListener('change', () => this.updateZoom());
+
+		this.coordinates.addEventListener('change', () => this.updateCoordinates());
+		this.viewSize.addEventListener('change', () => this.updateCoordinates());
+		this.actualZoom.addEventListener('change', () => this.updateCoordinates());
+		this.image.size.addEventListener('change', () => this.updateCoordinates());
+	}
+
+	updateOpacity() {
+		this.model.actualOpacity.set(NumberHelper.between(0, 1, this.model.opacity.get()));
+	}
+
+	updateCoordinates() {
+		this.actualCoordinates.set(
+			ImageHelper.sanitizeCenter(
+				this.image.size,
+				this.viewSize,
+				this.actualZoom.get(),
+				this.coordinates
+			)
+		);
+	}
+
+	updateZoom() {
+		this.actualZoom.set(
+			ImageHelper.sanitizeZoom(
+				this.image.size,
+				this.viewSize,
+				this.zoom.get()
+			)
+		);
+	}
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wgge",
-	"version": "0.1.24",
+	"version": "0.1.26",
 	"description": "Web GL Game Engine",
 	"main": "index.js",
 	"dependencies": {

package/core/renderer/canvas/ImageToCanvasRenderer.js

@@ -1,93 +0,0 @@
-import DomRenderer from "../dom/DomRenderer";
-import Vector2 from "../../model/vector/Vector2";
-import DOMHelper from "../../helper/DOMHelper";
-import ImageHelper from "../../helper/ImageHelper";
-
-export default class ImageToCanvasRenderer extends DomRenderer {
-
-	/**
-	 * @type ImageModel
-	 */
-	model;
-
-	constructor(game, model, dom) {
-		super(game, model, dom);
-
-		this.model = model;
-		this.image = null;
-	}
-
-	activateInternal() {
-		this.canvas = DOMHelper.createElement(this.dom, 'canvas');
-		this.context2d = this.canvas.getContext('2d');
-		this.updateSize();
-		this.reloadImage();
-	}
-
-	deactivateInternal() {
-		this.removeElement(this.canvas);
-		this.context2d = null;
-	}
-
-	renderInternal() {
-		if (this.model.size.isDirty) {
-			this.updateSize();
-		}
-		if (this.model.uri.isDirty) {
-			this.reloadImage();
-			return;
-		}
-		this.renderImage();
-	}
-
-	renderImage() {
-		if (!(this.image && this.context2d)) return;
-		this.context2d.clearRect(0, 0, this.model.size.x, this.model.size.y);
-		this.context2d.globalAlpha = this.model.opacity.get();
-		const imageSize = new Vector2(this.image.width, this.image.height);
-		const zoom = ImageHelper.sanitizeZoom(
-			imageSize,
-			this.model.size,
-			this.model.zoom.get()
-		);
-
-		this.model.zoom.set(zoom);
-
-		const center = ImageHelper.sanitizeCenter(
-			imageSize,
-			this.model.size,
-			zoom,
-			this.model.coordinates
-		);
-
-		this.model.coordinates.set(center);
-
-		const viewSize = this.model.size.multiply(1 / zoom);
-		const corner = center.subtract(viewSize.multiply(0.5));
-		this.context2d.drawImage(
-			this.image,
-			corner.x,
-			corner.y,
-			viewSize.x,
-			viewSize.y,
-			0,
-			0,
-			this.model.size.x,
-			this.model.size.y
-		);
-	}
-
-	reloadImage() {
-		this.image = null;
-		if (this.model.uri.isEmpty()) return;
-		this.game.assets.getAsset(this.model.uri.get(), (img) => {
-			this.image = img;
-			this.renderImage();
-		});
-	}
-
-	updateSize() {
-		this.canvas.width = this.model.size.x;
-		this.canvas.height = this.model.size.y;
-	}
-}