wgge 0.0.1

package/editor/EditorRenderer.js

@@ -0,0 +1,116 @@
+import DomRenderer from "../core/renderer/dom/DomRenderer";
+import TableRenderer from "./table/TableRenderer";
+import NullableNodeRenderer from "../core/renderer/generic/NullableNodeRenderer";
+import NodeFormRenderer from "./form/NodeFormRenderer";
+import DOMHelper from "../core/helper/DOMHelper";
+
+export default class EditorRenderer extends DomRenderer {
+
+	/**
+	 * @type EditorModel
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+
+		this.container = null;
+
+		this.tableRenderer = new NullableNodeRenderer(this.game, this.model.activeTable, (model) => new TableRenderer(this.game, model, this.table));
+		this.addChild(this.tableRenderer);
+
+		this.formRenderer = new NullableNodeRenderer(this.game, this.model.activeForm, (model) => new NodeFormRenderer(this.game, model, this.form));
+		this.addChild(this.formRenderer);
+
+		this.addAutoEvent(
+			this.model.activeTable,
+			'change',
+			() => this.updateTables()
+		);
+
+		this.addAutoEvent(
+			this.model.isVisible,
+			'change',
+			() => {
+				if (this.model.isVisible.get()) {
+					DOMHelper.removeClass(this.dock, 'hidden');
+					DOMHelper.removeClass(this.buttonsLeft, 'hidden');
+					DOMHelper.removeClass(this.buttonsRight, 'hidden');
+				} else {
+					DOMHelper.addClass(this.dock, 'hidden');
+					DOMHelper.addClass(this.buttonsLeft, 'hidden');
+					DOMHelper.addClass(this.buttonsRight, 'hidden');
+				}
+			},
+			true
+		);
+
+		this.stopEventPropagationHandler = (e) => e.stopPropagation();
+	}
+
+	activateInternal() {
+		this.container = this.addElement('div', 'editor');
+		this.nav = DOMHelper.createElement(this.container, 'nav', 'bg row');
+
+		const buttons = DOMHelper.createElement(this.nav, 'div', 'buttons row');
+		this.switch = DOMHelper.createElement(buttons, 'input');
+		this.switch.setAttribute('type', 'checkbox');
+		this.switch.setAttribute('name', 'switch');
+		this.switch.setAttribute('checked', this.model.isVisible.get());
+		this.switch.addEventListener('change', () => this.model.triggerEvent('switch-options'));
+
+		this.buttonsLeft = DOMHelper.createElement(buttons, 'div');
+
+		DOMHelper.createElement(
+			this.buttonsLeft,
+			'button',
+			'special',
+			'Save Resources',
+			() => this.model.triggerEvent('save-resources')
+		);
+
+		this.buttonsRight = DOMHelper.createElement(this.nav, 'div');
+
+		this.dock = DOMHelper.createElement(this.container, 'div', 'dock bg');
+		this.tables = DOMHelper.createElement(this.dock, 'div', 'table-selection bg');
+		this.table = DOMHelper.createElement(this.dock, 'div', 'active-table');
+		this.form = DOMHelper.createElement(this.dock, 'div', 'active-form');
+		this.item = DOMHelper.createElement(this.dock, 'div', 'active-item');
+
+		const events = ['click', 'mousemove', 'mousedown', 'mouseup', 'wheel'];
+		const elements = [this.nav, this.tables, this.table, this.form, this.item];
+		for (const eli in elements) {
+			for (const evi in events) {
+				this.addAutoEvent(elements[eli], events[evi], this.stopEventPropagationHandler);
+			}
+		}
+
+		this.updateTables();
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+	}
+
+	updateTables() {
+		DOMHelper.emptyElement(this.tables);
+		const wrapper = DOMHelper.createElement(this.tables, 'div', 'inner');
+		this.addMenuSection(wrapper, this.game.resources, 'Resources');
+	}
+
+	addMenuSection(wrapper, node, name) {
+		DOMHelper.createElement(wrapper, 'h3', null, name);
+		const menu = DOMHelper.createElement(wrapper, 'ul', 'menu');
+		node.properties.forEach(
+			(name, property) => {
+				const isActive = this.model.activeTable.equalsTo(property);
+				const item = DOMHelper.createElement(menu, 'li', isActive ? 'active' : '');
+				const link = DOMHelper.createElement(item, 'a', null, name);
+				link.addEventListener('click', () => this.model.triggerEvent('table-selected', property));
+			}
+		);
+	}
+
+}

package/editor/form/NodeFormRenderer.js

@@ -0,0 +1,180 @@
+import DomRenderer from "../../core/renderer/dom/DomRenderer";
+import TableRenderer from "../table/TableRenderer";
+import TableLookupRenderer from "../table/lookup/TableLookupRenderer";
+import DOMHelper from "../../core/helper/DOMHelper";
+
+export default class NodeFormRenderer extends DomRenderer {
+
+	/**
+	 * @type ObjectModel
+	 */
+	model;
+
+	constructor(game, model, dom, collection = null) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.collection = collection;
+		this.container = null;
+		this.fields = null;
+	}
+
+	activateInternal() {
+		this.container = this.addElement('form', 'bg');
+
+		const buttons = DOMHelper.createElement(this.container, 'div', 'buttons');
+		const buttonsLeft = DOMHelper.createElement(buttons, 'div');
+		const buttonsRight = DOMHelper.createElement(buttons, 'div');
+
+		const submit = DOMHelper.createElement(buttonsLeft, 'button');
+		submit.innerText = 'Save';
+		submit.addEventListener('click', (e) => {
+			e.preventDefault();
+			this.save();
+		});
+
+		if (this.collection) {
+			DOMHelper.createElement(buttonsLeft, 'button', null, 'Clone',
+				(e) => {
+					e.preventDefault();
+					this.game.editor.triggerEvent('node-clone', {table: this.collection, node: this.model});
+				}
+			);
+			DOMHelper.createElement(buttonsLeft, 'button', 'red', 'Delete',
+				(e) => {
+					e.preventDefault();
+					this.game.editor.triggerEvent('node-delete', {table: this.collection, node: this.model});
+				}
+			);
+		}
+
+		DOMHelper.createElement(
+			buttonsRight,
+			'button',
+			null,
+			'Close',
+			(e) => {
+				e.preventDefault();
+				if (this.game.editor.activeForm.equalsTo(this.model)) {
+					this.game.editor.triggerEvent('form-closed');
+				}
+				if (this.collection) {
+					this.collection.selectedNode.set(null);
+				}
+			}
+		);
+
+		this.fields = DOMHelper.createElement(this.container, 'div', 'fields scroll');
+		this.renderFields();
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+	}
+
+	renderInternal() {
+		this.renderFields();
+	}
+
+	renderInput(container, name, value) {
+		if (value === undefined) {
+			DOMHelper.createElement(container, 'span', null, '--undefined--');
+			return;
+		}
+
+		if (value === null) {
+			DOMHelper.createElement(container, 'span', null, '--null--');
+			return;
+		}
+
+		if (name === 'color' && typeof value === 'string') {
+			const input = DOMHelper.createElement(container, 'input', 'color');
+			input.setAttribute('type', 'color');
+			input.setAttribute('name', name);
+			input.value = value;
+			return;
+		}
+
+		if (typeof value === 'object' && value.x !== undefined && value.y !== undefined) {
+			DOMHelper.addClass(container, 'vector');
+			this.renderInput(container, `${name}[]`, value.x);
+			this.renderInput(container, `${name}[]`, value.y);
+			if (value.z !== undefined) {
+				this.renderInput(container, `${name}[]`, value.z);
+				if (value.w !== undefined) {
+					this.renderInput(container, `${name}[]`, value.w);
+				}
+			}
+			return;
+		}
+
+		if (typeof value === 'object' && (value.constructor.name === 'ModelNodeTable' || value.constructor.name === 'ModelNodeCollection')) {
+			const tableRenderer = new TableRenderer(this.game, value, container);
+			tableRenderer.activate();
+			return;
+		}
+
+		if (typeof value === 'object' && value.value !== undefined) {
+			this.renderInput(container, name, value.value);
+			if (value.constructor.name === 'IntValue' && TableLookupRenderer.isTableLookupField(name)) {
+				DOMHelper.addClass(container, 'with-lookup');
+				const lookupRenderer = new TableLookupRenderer(this.game, value, container, name);
+				DOMHelper.createElement(container, 'div', 'pr-1', lookupRenderer.getPreview());
+				DOMHelper.createElement(
+					container,
+					'button',
+					'lookup-button',
+					'Select...',
+					(e) => {
+						e.preventDefault();
+						value.addEventListener('table-closed', () => {
+							lookupRenderer.deactivate();
+						});
+						lookupRenderer.activate();
+					}
+				);
+			}
+			return;
+		}
+
+		if (typeof value === 'object') {
+			DOMHelper.createElement(container, 'span', null, '[Object]');
+			return;
+		}
+
+		if (typeof value === 'boolean') {
+			const input = DOMHelper.createElement(container, 'input');
+			input.setAttribute('type', 'checkbox');
+			input.setAttribute('name', name);
+			input.checked = value;
+			return;
+		}
+
+		const input = DOMHelper.createElement(container, 'input');
+		input.setAttribute('type', 'text');
+		input.setAttribute('name', name);
+		input.value = value.toString();
+	}
+
+	renderField(container, name, value) {
+		const row = DOMHelper.createElement(container, 'div', 'row');
+		const label = DOMHelper.createElement(row, 'label', null, name);
+		label.setAttribute('for', name);
+		const item = DOMHelper.createElement(row, 'div', 'field');
+		this.renderInput(item, name, value);
+	}
+
+	renderFields() {
+		DOMHelper.emptyElement(this.fields);
+		this.model.properties.forEach((name, value) => {
+			this.renderField(this.fields, name, value);
+		});
+	}
+
+	save() {
+		const data = new FormData(this.container);
+		this.game.editor.triggerEvent('node-saved', {node: this.model, data: data});
+		this.game.editor.triggerEvent('form-closed');
+	}
+
+}

package/editor/material/MaterialPreviewRenderer.js

@@ -0,0 +1,136 @@
+import DomRenderer from "../../core/renderer/dom/DomRenderer";
+import * as THREE from "three";
+import {BoxGeometry, SphereGeometry} from "three";
+import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer";
+import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass";
+import {ShaderPass} from "three/examples/jsm/postprocessing/ShaderPass";
+import {FXAAShader} from "three/examples/jsm/shaders/FXAAShader";
+import Vector2 from "../../core/model/vector/Vector2";
+import Vector3 from "../../core/model/vector/Vector3";
+import DOMHelper from "../../core/helper/DOMHelper";
+
+const PREVIEW_SIZE = new Vector2(350, 350);
+
+export default class MaterialPreviewRenderer extends DomRenderer {
+
+	/**
+	 * @type MaterialModel
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.container = null;
+		this.scene = null;
+	}
+
+	activateInternal() {
+		this.container = this.addElement('div', 'bg item-def');
+		this.buttons = DOMHelper.createElement(this.container, 'div', 'buttons');
+		this.close = DOMHelper.createElement(this.buttons, 'button', null, 'Close', () => this.game.editor.activeMaterial.set(null));
+
+		this.paper = DOMHelper.createElement(this.container, 'div', 'paper');
+		this.inner = DOMHelper.createElement(this.paper, 'div', 'inner');
+
+		this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+		this.inner.appendChild(this.renderer.domElement);
+		this.renderer.setSize(PREVIEW_SIZE.x, PREVIEW_SIZE.y);
+		this.scene = new THREE.Scene();
+
+		const horizontal = 3;
+		const vertical = 3;
+
+		this.camera = new THREE.OrthographicCamera(-horizontal, horizontal, -vertical, vertical);
+		this.camera.updateProjectionMatrix();
+
+		const camPosition = new Vector3(-100, 100, -100);
+		this.camera.position.set(camPosition.x, camPosition.y, camPosition.z);
+		this.camera.lookAt(0, 0, 0);
+
+		this.ambientLight = new THREE.AmbientLight(0xe0e0e0);
+		this.scene.add(this.ambientLight);
+
+		this.directLight = new THREE.DirectionalLight(0xe0e0e0, 1);
+		this.directLight.position.set(0, 10, 0);
+		this.directLight.castShadow = true;
+		this.directLight.shadow.bias = 0;
+		this.directLight.shadow.camera.near = 0.5;
+		this.directLight.shadow.camera.far = 25;
+		this.directLight.shadow.camera.right = 15;
+		this.directLight.shadow.camera.left = -15;
+		this.directLight.shadow.camera.top = 15;
+		this.directLight.shadow.camera.bottom = -15;
+		this.directLight.shadow.mapSize.width = 1024;
+		this.directLight.shadow.mapSize.height = 1024;
+		this.scene.add(this.directLight);
+
+		this.composer = new EffectComposer(this.renderer);
+		this.composer.setSize(PREVIEW_SIZE.x, PREVIEW_SIZE.y);
+
+		const renderPass = new RenderPass(this.scene, this.camera);
+		renderPass.clearColor = new THREE.Color(0, 0, 0);
+		renderPass.clearAlpha = 0;
+		this.composer.addPass(renderPass);
+
+		this.effectFXAA = new ShaderPass(FXAAShader);
+		this.effectFXAA.uniforms['resolution'].value.set(1 / PREVIEW_SIZE.x, 1 / PREVIEW_SIZE.y);
+		this.effectFXAA.material.transparent = true;
+		this.composer.addPass(this.effectFXAA);
+
+		const pixelRatio = this.renderer.getPixelRatio();
+		this.effectFXAA.material.uniforms['resolution'].value.x = 1 / (PREVIEW_SIZE.x * pixelRatio);
+		this.effectFXAA.material.uniforms['resolution'].value.y = 1 / (PREVIEW_SIZE.y * pixelRatio);
+
+		this.updatePreview();
+	}
+
+	deactivateInternal() {
+		this.ambientLight.dispose();
+		this.ambientLight = null;
+		this.directLight.dispose();
+		this.directLight = null;
+		this.scene = null;
+		this.renderer.dispose();
+		this.renderer = false;
+		this.removeElement(this.container);
+		if (this.gui) {
+			this.gui.destroy();
+			this.gui = null;
+		}
+	}
+
+	renderInternal() {
+		this.updatePreview();
+	}
+
+	updatePreview() {
+		this.game.assets.resetMaterial(this.model.id.get());
+		this.game.assets.loadMaterial(
+			this.model.id.get(),
+			(material) => {
+				if (this.ball) {
+					this.ball.removeFromParent();
+				}
+				this.ball = new THREE.Mesh(
+					new SphereGeometry(),
+					material
+				);
+				this.scene.add(this.ball);
+
+				if (this.box) {
+					this.box.removeFromParent();
+				}
+				this.box = new THREE.Mesh(
+					new BoxGeometry(),
+					material
+				);
+				this.box.position.set(-10, -10, -10);
+				this.scene.add(this.box);
+				this.composer.render();
+			}
+		)
+	}
+
+}

package/editor/table/TableRenderer.js

@@ -0,0 +1,123 @@
+import CollectionRenderer from "../../core/renderer/generic/CollectionRenderer";
+import TableRowRenderer from "./row/TableRowRenderer";
+import NodeFormRenderer from "../form/NodeFormRenderer";
+import NullableNodeRenderer from "../../core/renderer/generic/NullableNodeRenderer";
+import DomRenderer from "../../core/renderer/dom/DomRenderer";
+import DOMHelper from "../../core/helper/DOMHelper";
+
+export default class TableRenderer extends DomRenderer {
+
+	/**
+	 * @type ModelNodeTable|ModelNodeCollection
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.dom = dom;
+		this.container = null;
+
+		this.addChild(
+			new NullableNodeRenderer(
+				this.game,
+				this.model.selectedNode,
+				(m) => new NodeFormRenderer(this.game, m, this.dom, this.model)
+			)
+		);
+
+		this.addChild(
+			new CollectionRenderer(
+				this.game,
+				this.model,
+				(m) => new TableRowRenderer(game, m, this.tbody, this.model)
+			)
+		);
+
+	}
+
+	activateInternal() {
+		this.container = DOMHelper.createElement(this.dom, 'div', 'table bg');
+
+		this.buttons = DOMHelper.createElement(this.container, 'div', 'buttons');
+		const buttonsLeft = DOMHelper.createElement(this.buttons, 'div');
+		const buttonsRight = DOMHelper.createElement(this.buttons, 'div');
+
+		DOMHelper.createElement(
+			buttonsLeft,
+			'button',
+			null,
+			'Add',
+			(e) => {
+				e.preventDefault();
+				this.model.selectedNode.set(this.model.add());
+			}
+		);
+
+		this.input = DOMHelper.createElement(buttonsLeft, 'input', 'flex-1')
+		this.input.setAttribute('type', 'text');
+		this.input.addEventListener('input', () => this.updateItems());
+		DOMHelper.createElement(buttonsLeft, 'button', null, 'Reset', () => {
+			this.input.value = '';
+			this.updateItems();
+		});
+
+		DOMHelper.createElement(
+			buttonsRight,
+			'button',
+			null,
+			'Close',
+			(e) => {
+				e.preventDefault();
+				if (this.game.editor.activeTable.equalsTo(this.model)) {
+					this.game.editor.triggerEvent('table-closed');
+				}
+			}
+		);
+
+		this.scrollable = DOMHelper.createElement(this.container, 'div', 'scroll');
+		this.table = DOMHelper.createElement(this.scrollable, 'table');
+
+		let dummy = null;
+
+		if (typeof this.model.nodeFactory === 'function') {
+			dummy = this.model.nodeFactory();
+		} else if (this.model.count() > 0) {
+			dummy = this.model.first();
+		}
+
+		if (dummy) {
+			const thead = DOMHelper.createElement(this.table, 'thead');
+			const header = DOMHelper.createElement(thead, 'tr');
+			DOMHelper.createElement(header, 'th');
+			dummy.properties.forEach((name) => {
+				const cell = DOMHelper.createElement(header, 'th');
+				cell.innerText = name;
+			});
+		}
+
+		this.tbody = DOMHelper.createElement(this.table, 'tbody');
+
+		super.activateInternal();
+	}
+
+	deactivateInternal() {
+		super.deactivateInternal();
+		DOMHelper.destroyElement(this.container);
+	}
+
+	updateItems() {
+		const rows = this.tbody.querySelectorAll('tr');
+		const search = this.input.value.toLowerCase();
+		rows.forEach((row) => {
+			const str = row.innerText.toLowerCase();
+			const visible = (search === '') || str.includes(search);
+			if (visible) {
+				DOMHelper.removeClass(row, 'hidden');
+			} else {
+				DOMHelper.addClass(row, 'hidden');
+			}
+		});
+	}
+}

package/editor/table/lookup/TableLookupRenderer.js

@@ -0,0 +1,120 @@
+import DomRenderer from "../../../core/renderer/dom/DomRenderer";
+import DOMHelper from "../../../core/helper/DOMHelper";
+
+const FIELD_TABLE_MAPPINGS = {
+	modelId: 'models3d',
+	materialId: 'materials',
+	spriteId: 'sprites'
+}
+
+const RENDER_FIELDS = ['id', 'name'];
+
+export default class TableLookupRenderer extends DomRenderer {
+
+	/**
+	 * @type IntValue
+	 */
+	model;
+
+	constructor(game, model, dom, fieldName) {
+		super(game, model, dom);
+
+		this.model = model;
+		this.lookupTable = this.getTableByField(fieldName);
+		if (!this.lookupTable) {
+			console.error('Not found lookup table for field', fieldName);
+		}
+		this.container = null;
+	}
+
+	activateInternal() {
+		this.container = this.addElement('div', 'table-lookup force-foreground p-2');
+		this.container.addEventListener('wheel', (e) => e.stopPropagation());
+
+		this.buttons = DOMHelper.createElement(this.container, 'div', 'buttons row stretch');
+		this.input = DOMHelper.createElement(this.buttons, 'input', 'flex-1')
+		this.input.setAttribute('type', 'text');
+		this.input.addEventListener('input', () => this.renderItems());
+		DOMHelper.createElement(this.buttons, 'button', null, 'Reset', (e) => {
+			e.preventDefault();
+			this.input.value = '';
+			this.renderItems();
+		});
+		DOMHelper.createElement(this.buttons, 'button', null, 'NaN', (e) => {
+			e.preventDefault();
+			this.model.set(Number.NaN);
+			this.model.triggerEvent('table-closed');
+		});
+		DOMHelper.createElement(this.buttons, 'button', 'ml-1', 'Close', () => this.model.triggerEvent('table-closed'));
+
+		this.scrollable = DOMHelper.createElement(this.container, 'div', 'scroll p-1');
+		this.table = DOMHelper.createElement(this.scrollable, 'table');
+
+		const thead = DOMHelper.createElement(this.table, 'thead');
+		const header = DOMHelper.createElement(thead, 'tr');
+		RENDER_FIELDS.forEach((name) => {
+			const cell = DOMHelper.createElement(header, 'th');
+			cell.innerText = name;
+		});
+
+		this.tbody = DOMHelper.createElement(this.table, 'tbody');
+		this.renderItems();
+	}
+
+	deactivateInternal() {
+		this.removeElement(this.container);
+	}
+
+	getTableByField(name) {
+		return this.game.getTableByName(FIELD_TABLE_MAPPINGS[name]);
+	}
+
+	static isTableLookupField(name) {
+		return Object.keys(FIELD_TABLE_MAPPINGS).includes(name);
+	}
+
+	getPreview() {
+		const element = this.lookupTable.getById(this.model.get());
+		if (element) {
+			if (typeof element.name === 'object' && typeof element.name.get === 'function') {
+				return element.name.get();
+			}
+			return this.model.get();
+		}
+	}
+
+	renderItems() {
+		DOMHelper.emptyElement(this.tbody);
+		const search = this.input.value.toLowerCase();
+		const searchId = Number(search);
+		this.lookupTable
+			.filter((m) => {
+				if (search === '') {
+					return true;
+				}
+				if (!Number.isNaN(searchId)) {
+					return m.id.equalsTo(searchId);
+				}
+				const name = m.name.get();
+				return name.toLowerCase().includes(search);
+			})
+			.forEach(
+				(node) => {
+					const tr = DOMHelper.createElement(
+						this.tbody,
+						'tr',
+						node.id.equalsTo(this.model.get()) ? 'active' : null,
+						null,
+						() => {
+							this.model.set(node.id.get());
+							this.model.triggerEvent('table-closed');
+						}
+					);
+					RENDER_FIELDS.forEach((name) => {
+						const cell = DOMHelper.createElement(tr, 'td');
+						cell.innerText = node[name].get();
+					});
+				}
+			);
+	}
+}