wgge 0.0.1

package/core/renderer/canvas/ImageToCanvasRenderer.js

@@ -0,0 +1,94 @@
+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,
+			0,
+			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;
+	}
+}

package/core/renderer/dom/DirtyValueRenderer.js

@@ -0,0 +1,36 @@
+import DomRenderer from "./DomRenderer";
+import DOMHelper from "../../helper/DOMHelper";
+
+export default class DirtyValueRenderer extends DomRenderer {
+
+	/**
+	 * @type DirtyValue
+	 */
+	model;
+
+	constructor(game, model, dom, formatter = null) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.formatter = formatter;
+		this.container = null;
+	}
+
+	activateInternal() {
+		this.container = DOMHelper.createElement(this.dom, 'span');
+		this.updateValue();
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+		this.container = null;
+	}
+
+	renderInternal() {
+		this.updateValue();
+	}
+
+	updateValue() {
+		this.container.innerText = this.formatter ? this.formatter(this.model.get()) : this.model.get();
+	}
+}

package/core/renderer/dom/DomRenderer.js

@@ -0,0 +1,32 @@
+import RendererBase from "../RendererBase";
+import DOMHelper from "../../helper/DOMHelper";
+
+export default class DomRenderer extends RendererBase {
+	dom;
+
+	constructor(game, model, dom) {
+		super(game, model);
+		this.dom = dom;
+
+		if (!this.dom) {
+			console.error('DOM renderer created without DOM!');
+		}
+	}
+
+	addClass(css) {
+		DOMHelper.addClass(this.dom, css);
+	}
+
+	removeClass(css) {
+		DOMHelper.removeClass(this.dom, css);
+	}
+
+	addElement(tag, css = null) {
+		return DOMHelper.createElement(this.dom, tag, css);
+	}
+
+	removeElement(el) {
+		DOMHelper.destroyElement(el);
+	}
+
+}

package/core/renderer/dom/ImageRenderer.js

@@ -0,0 +1,41 @@
+import DomRenderer from "./DomRenderer";
+
+export default class ImageRenderer extends DomRenderer {
+
+	/**
+	 * @type DirtyValue
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.container = null;
+	}
+
+	activateInternal() {
+		this.renderImage();
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+	}
+
+	renderInternal() {
+		this.renderImage();
+	}
+
+	renderImage() {
+		this.removeElement(this.container);
+		let uri = this.model.get();
+		if (typeof uri !== 'string' || uri.length === 0) {
+			console.error('Invalid image URI', uri);
+			return;
+		}
+		this.game.assets.getAsset(uri, (img) => {
+			this.container = img.cloneNode(true);
+			this.dom.appendChild(this.container);
+		});
+	}
+}

package/core/renderer/dom/Vector2Renderer.js

@@ -0,0 +1,37 @@
+import DomRenderer from "./DomRenderer";
+import DOMHelper from "../../helper/DOMHelper";
+import NumberHelper from "../../helper/NumberHelper";
+
+export default class Vector2Renderer extends DomRenderer {
+
+	/**
+	 * @type Vector2
+	 */
+	model;
+
+	constructor(game, model, dom, formatter = null) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.formatter = formatter;
+		this.container = null;
+	}
+
+	activateInternal() {
+		this.container = DOMHelper.createElement(this.dom, 'span');
+		this.updateValue();
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+		this.container = null;
+	}
+
+	renderInternal() {
+		this.updateValue();
+	}
+
+	updateValue() {
+		this.container.innerText = this.formatter ? this.formatter(this.model) : `[${NumberHelper.round(this.model.x, 2)}, ${NumberHelper.round(this.model.y, 2)}]`;
+	}
+}

package/core/renderer/generic/CollectionRenderer.js

@@ -0,0 +1,50 @@
+import RendererBase from "../RendererBase";
+
+export default class CollectionRenderer extends RendererBase {
+
+	/**
+	 * @type ModelNodeCollection
+	 */
+	model;
+
+	constructor(game, model, rendererFactory) {
+		super(game, model);
+		this.model = model;
+
+		this.rendererFactory = rendererFactory;
+
+		this.addAutoEvent(
+			this.model.children,
+			'add',
+			(model) => {
+				this.addRenderer(model);
+			}
+		);
+
+		this.addAutoEvent(
+			this.model.children,
+			'remove',
+			(model) => {
+				const renderer = this.children.find((ch) => ch.model === model);
+				this.removeChild(renderer);
+			}
+		);
+
+		this.addAutoEvent(
+			this.model.children,
+			'insert',
+			() => {
+				this.resetChildren();
+				this.model.forEach((model) => {
+					this.addRenderer(model);
+				});
+			},
+			true
+		);
+	}
+
+	addRenderer(model) {
+		return this.addChild(this.rendererFactory(model));
+	}
+
+}

package/core/renderer/generic/ConditionalNodeRenderer.js

@@ -0,0 +1,57 @@
+import RendererBase from "../RendererBase";
+
+export default class ConditionalNodeRenderer extends RendererBase {
+
+	/**
+	 * @type DirtyValue
+	 */
+	model;
+
+	constructor(game, model, condition, rendererFactory, defaultRendererFactory = null) {
+		super(game, model);
+		this.model = model;
+		this.condition = condition;
+		this.rendererFactory = rendererFactory;
+		this.defaultRendererFactory = defaultRendererFactory;
+		this.renderer = null;
+		this.isUsingDefaultRenderer = false;
+
+		this.addAutoEvent(
+			this.model,
+			'change',
+			() => this.updateRenderer(),
+			true
+		);
+	}
+
+	render() {
+		if (!this.isActivated) {
+			return;
+		}
+		if (this.renderer) {
+			this.renderer.render();
+		}
+	}
+
+	updateRenderer() {
+		if (this.condition()) {
+			if (this.isUsingDefaultRenderer || this.renderer === null) {
+				this.resetChildren();
+				this.renderer = this.addChild(this.rendererFactory());
+				this.isUsingDefaultRenderer = false;
+			}
+		} else {
+			if (this.defaultRendererFactory) {
+				if (this.renderer === null || this.isUsingDefaultRenderer === false) {
+					this.resetChildren();
+					this.renderer = this.addChild(this.defaultRendererFactory());
+					this.isUsingDefaultRenderer = true;
+				}
+			} else {
+				this.resetChildren();
+				this.renderer = null;
+			}
+		}
+	}
+
+}

package/core/renderer/generic/NullableNodeRenderer.js

@@ -0,0 +1,43 @@
+import RendererBase from "../RendererBase";
+
+export default class NullableNodeRenderer extends RendererBase {
+
+	/**
+	 * @type NodeValue
+	 */
+	model;
+
+	constructor(game, model, rendererFactory, defaultRendererFactory = null) {
+		super(game, model);
+		this.model = model;
+
+		this.rendererFactory = rendererFactory;
+		this.defaultRendererFactory = defaultRendererFactory;
+
+		this.addAutoEvent(
+			this.model,
+			'change',
+			() => this.updateRenderer(),
+			true
+		);
+	}
+
+	render() {
+		if (!this.isActivated) {
+			return;
+		}
+		if (this.renderer) {
+			this.renderer.render();
+		}
+	}
+
+	updateRenderer() {
+		this.resetChildren();
+		if (this.model.isSet()) {
+			this.renderer = this.addChild(this.rendererFactory(this.model.get()));
+		} else if (this.defaultRendererFactory) {
+			this.renderer = this.addChild(this.defaultRendererFactory());
+		}
+	}
+
+}

package/core/renderer/svg/SvgRenderer.js

@@ -0,0 +1,130 @@
+import RendererBase from "../RendererBase";
+import StringHelper from "../../helper/StringHelper";
+import Vector2 from "../../model/vector/Vector2";
+
+export default class SvgRenderer extends RendererBase {
+
+	/**
+	 * @type {SVG.Container}
+	 */
+	draw;
+
+	/**
+	 *
+	 * @param {GameModel} game
+	 * @param {ModelBase} model
+	 * @param {SVG.Container} draw
+	 */
+	constructor(game, model, draw) {
+		super(game, model);
+		this.draw = draw;
+	}
+
+	getDefs() {
+		return this.draw.root().defs();
+	}
+
+	refExists(uri) {
+		const token = StringHelper.token(uri);
+		return this.getDefs().findOne('#' + token);
+	}
+
+	getRef(uri) {
+		const token = StringHelper.token(uri);
+		const ref = this.getDefs().findOne('#' + token);
+		if (!ref) {
+			if (this.game.isInDebugMode.get()) console.warn(`Resource ${uri} (token: ${token}) not found!`)
+		}
+		return ref;
+	}
+
+	setRef(uri, ref) {
+		const token = StringHelper.token(uri);
+		const resource = this.getDefs().findOne('#' + token);
+		if (!resource) {
+			this.getDefs().add(ref);
+			ref.attr({id: token});
+		} else {
+			if (this.game.isInDebugMode.get()) console.log(`Resource ${uri} already loaded.`);
+		}
+	}
+
+	loadImageRef(uri, onLoaded) {
+		if (this.refExists(uri)) {
+			onLoaded(this.getRef(uri));
+			return;
+		}
+		this.game.assets.getAsset(
+			uri,
+			(img) => {
+				if (this.refExists(uri)) {
+					onLoaded(this.getRef(uri));
+					return;
+				}
+				const image = this.getDefs().image(img.src, () => {
+					this.setRef(uri, image);
+					onLoaded(image);
+				});
+			}
+		);
+	}
+
+	rotate(element, rotation) {
+		let lastRotation = element.remember('rotation');
+		if (!lastRotation) {
+			lastRotation = 0;
+		}
+		element.rotate(rotation - lastRotation);
+		element.remember('rotation', rotation);
+	}
+
+	/**
+	 *
+	 * @param {SVG.Container|null|undefined} parent
+	 * @param {Vector2} center
+	 * @param {Vector2} size
+	 * @param {SVG.StrokeData} stroke
+	 * @param {string|Color|SVG.FillData} fill
+	 *
+	 * @returns SVG.Ellipse
+	 */
+	drawEllipse(
+		parent,
+		center,
+		size = new Vector2(5, 2),
+		stroke = {width: 1, color: 'gray'},
+		fill = 'transparent'
+	) {
+		if (!parent) parent = this.draw;
+		return parent
+			.ellipse(size.x, size.y)
+			.stroke(stroke)
+			.fill(fill)
+			.center(center.x, center.y);
+	}
+
+	/**
+	 *
+	 * @param {SVG.Container|null|undefined} parent
+	 * @param {Vector2} start
+	 * @param {Vector2} end
+	 * @param {object|SVG.StrokeData} stroke
+	 * @param {string|Color|SVG.FillData} fill
+	 *
+	 * @returns SVG.Line
+	 */
+	drawLine(
+		parent,
+		start,
+		end = 3,
+		stroke = {width: 1, color: 'black'},
+		fill = 'transparent'
+	) {
+		if (!parent) parent = this.draw;
+		return parent
+			.line(start.x, start.y, end.x, end.y)
+			.stroke(stroke)
+			.fill(fill);
+	}
+
+}

package/editor/EditorController.js

@@ -0,0 +1,135 @@
+import ControllerBase from "../core/controller/ControllerBase";
+import HttpHelper from "../core/helper/HttpHelper";
+
+export default class EditorController extends ControllerBase {
+
+	/**
+	 * @type DemoEditorModel
+	 */
+	model;
+
+	constructor(game, model) {
+		super(game, model);
+
+		this.model = model;
+
+		this.addAutoEvent(
+			this.model,
+			'table-selected',
+			(table) => this.runOnUpdate(() => this.model.activeTable.set(table))
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'table-closed',
+			() => this.runOnUpdate(() => this.model.activeTable.set(null))
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'node-saved',
+			(param) => this.runOnUpdate(() => this.saveNode(param))
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'form-closed',
+			() => this.runOnUpdate(() => this.model.activeForm.set(null))
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'node-delete',
+			(param) => this.runOnUpdate(() => this.deleteNode(param))
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'node-clone',
+			(param) => this.runOnUpdate(() => this.cloneNode(param))
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'download-resources',
+			(param) => this.runOnUpdate(() => this.downloadResources(param))
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'save-resources',
+			() => this.saveResources()
+		);
+
+		this.addAutoEvent(
+			this.model,
+			'switch-options',
+			() => this.runOnUpdate(() => this.model.isVisible.invert())
+		);
+
+	}
+
+	activateInternal() {
+		this.game.audio.paused.set(true);
+	}
+
+	deactivateInternal() {
+		this.game.audio.paused.set(false);
+	}
+
+	/**
+	 *
+	 * * @param {Object} param
+	 *  * @param {ObjectModel} param.node
+	 *  * @param {FormData} param.data
+	 */
+	saveNode(param) {
+		const node = param.node;
+		const data = param.data;
+
+		node.properties.forEach((name, value) => {
+			if (data.has(name)) {
+				if (value && value.value !== undefined && typeof value.set === 'function') {
+					value.set(data.get(name));
+				} else {
+					console.log(data.get(name), name);
+				}
+			} else if (data.has(`${name}[]`)) {
+				if (typeof value === 'object' && typeof value.setFromArray === 'function') {
+					const arr = data.getAll(`${name}[]`);
+					value.setFromArray(arr);
+				}
+			} else if (value && typeof value.value === 'boolean' && typeof value.set === 'function') {
+				value.set(false);
+			}
+		});
+	}
+
+	deleteNode(param) {
+		const node = param.node;
+		const table = param.table;
+		const result = table.remove(node);
+		if (table.selectedNode.equalsTo(node)) {
+			table.selectedNode.set(null);
+		}
+		console.log('removed node', result);
+	}
+
+	cloneNode(param) {
+		const node = param.node;
+		const table = param.table;
+		const result = table.addClone(node);
+		table.selectedNode.set(result);
+		console.log('cloned node', result);
+	}
+
+	downloadResources() {
+		const data = JSON.stringify(this.game.resources.getState());
+		HttpHelper.fakeDownload('resources.json', data);
+	}
+
+	async saveResources() {
+		const str = JSON.stringify(this.game.resources.getState());
+		await HttpHelper.post('http://localhost:88/save-resources', str);
+	}
+}

package/editor/EditorModel.js

@@ -0,0 +1,38 @@
+import ObjectModel from "../core/model/ObjectModel";
+import NullableNode from "../core/model/value/NullableNode";
+import BoolValue from "../core/model/value/BoolValue";
+
+export default class EditorModel extends ObjectModel {
+
+	/**
+	 * @type BoolValue
+	 */
+	isVisible;
+
+	/**
+	 * @type NullableNode
+	 */
+	activeTable;
+
+	/**
+	 * @type NullableNode
+	 */
+	activeForm;
+
+	/**
+	 * @type NullableNode<MaterialModel>
+	 */
+	activeMaterial;
+
+	constructor() {
+		super();
+
+		this.activeTable = this.addProperty('activeTable', new NullableNode());
+		this.activeForm = this.addProperty('activeForm', new NullableNode());
+		this.activeMaterial = this.addProperty('activeMaterial', new NullableNode());
+
+		this.isVisible = this.addProperty('isVisible', new BoolValue(true));
+
+	}
+
+}