wgge 1.0.2 → 1.0.4

package/editor/form/NodeFormRenderer.js

@@ -1,180 +0,0 @@
-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/table/TableRenderer.js

@@ -1,123 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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();
-					});
-				}
-			);
-	}
-}

package/editor/table/row/TableRowRenderer.js

@@ -1,98 +0,0 @@
-import DomRenderer from "../../../core/renderer/dom/DomRenderer";
-import DOMHelper from "../../../core/helper/DOMHelper";
-import NumberHelper from "../../../core/helper/NumberHelper";
-import StringHelper from "../../../core/helper/StringHelper";
-
-export default class TableRowRenderer extends DomRenderer {
-
-	/**
-	 * @type ObjectModel
-	 */
-	model;
-
-	/**
-	 * @type ModelNodeTable|ModelNodeCollection
-	 */
-	table;
-
-	constructor(game, model, dom, collection) {
-		super(game, model, dom);
-
-		this.model = model;
-		this.collection = collection;
-
-		this.container = null;
-
-		this.addAutoEvent(
-			this.collection.selectedNode,
-			'change',
-			() => {
-				if (this.collection.selectedNode.equalsTo(this.model)) {
-					DOMHelper.addClass(this.container, 'active');
-				} else {
-					DOMHelper.removeClass(this.container, 'active');
-				}
-			},
-			true
-		);
-	}
-
-	activateInternal() {
-		this.container = this.addElement('tr');
-		this.container.addEventListener('click', () => this.collection.selectedNode.set(this.model));
-
-		this.updateRow();
-	}
-
-	deactivateInternal() {
-		this.removeElement(this.container);
-	}
-
-	renderInternal() {
-		this.updateRow();
-	}
-
-	updateRow() {
-		DOMHelper.emptyElement(this.container);
-
-		const grab = DOMHelper.createElement(this.container, 'td');
-		const icon = DOMHelper.createElement(grab, 'div', 'grab-icon');
-		icon.setAttribute('draggable', "true");
-		icon.addEventListener('dragstart', (e) => {
-			this.collection.triggerEvent('drag-start', this.model);
-		});
-		this.container.addEventListener('dragover', (e) => e.preventDefault());
-		this.container.addEventListener('drop', (e) => {
-			e.preventDefault();
-			this.collection.triggerEvent('drag-drop', this.model);
-		});
-
-		this.model.properties.forEach((name, value) => {
-			const cell = DOMHelper.createElement(this.container, 'td');
-			let text = '';
-			if (value !== undefined && value !== null) {
-				if (typeof value === 'object') {
-					if (value.value !== undefined) {
-						text = StringHelper.shorten(value.value);
-					} else if (value.x !== undefined && value.y !== undefined) {
-						text = '[' + NumberHelper.round(value.x, 2) + ',' + NumberHelper.round(value.y, 2);
-						if (value.z !== undefined) {
-							text += ',' + NumberHelper.round(value.z, 2);
-						}
-						if (value.w !== undefined) {
-							text += ',' + NumberHelper.round(value.w, 2);
-						}
-						text += ']';
-					} else {
-						text = NumberHelper.shorten(value.toString());
-					}
-				} else {
-					text = NumberHelper.shorten(value);
-				}
-			}
-			cell.innerText = text;
-		});
-
-	}
-
-}

package/game/save/editor/SaveGameEditorRenderer.js

@@ -1,17 +0,0 @@
-import DomRenderer from "../../../core/renderer/dom/DomRenderer";
-
-export default class SaveGameEditorRenderer extends DomRenderer {
-
-	/**
-	 * @type SaveGameModel
-	 */
-	model;
-
-	constructor(game, model, dom) {
-		super(game, model, dom);
-
-		this.model = model;
-
-	}
-
-}