DataTools3/Box.js

class Box {
	title;

	inputs = [];
	outputs = [];

	x;
	y;

	element;

	static instances = [];

	static updateAllPositions() {
		for (let box of Box.instances) {
			box.updatePosition();
		}
	}

	constructor(title = "") {
		Box.instances.push(this);

		this.title = title;
		this.x = Camera.x + 100;
		this.y = Camera.y + 200;
		this.buildElement();
		this.updatePosition();
	}

	buildElement() {
		this.element = document.createElement("div");
		this.element.classList.add("box");

		let topBar = document.createElement("div");
		topBar.classList.add("boxTopBar");
		this.element.appendChild(topBar);


		let deleteButton = document.createElement("span");
		deleteButton.classList.add("boxDeleteButton");
		deleteButton.addEventListener("click", () => { this.deleteBox() });
		topBar.appendChild(deleteButton);

		let content = document.createElement("div");
		content.classList.add("boxContent");
		this.element.appendChild(content);

		let title = document.createElement("span");
		title.classList.add("boxTitle");
		title.innerText = this.title;
		content.appendChild(title);

		let connectorContainer = document.createElement("div");
		connectorContainer.classList.add("boxConnectorContainer");

		let inputConnectorContainer = document.createElement("div");
		inputConnectorContainer.classList.add("inputConnectorContainer");
		inputConnectorContainer.classList.add("connectorContainer");

		let outputConnectorContainer = document.createElement("div");
		outputConnectorContainer.classList.add("outputConnectorContainer");
		inputConnectorContainer.classList.add("connectorContainer");

		connectorContainer.appendChild(inputConnectorContainer);
		connectorContainer.appendChild(outputConnectorContainer);

		content.appendChild(connectorContainer);

		for (connector of this.inputs) {
			inputConnectorContainer.appendChild(connector.element);
		}
		for (connector of this.outputs) {
			outputConnectorContainer.appendChild(connector.element);
		}
	}

	updatePosition() {
		this.element.style.left = (this.x - Camera.x) + "px";
		this.element.style.top = (this.y - Camera.y) + "px";
	}

	deleteBox() {
		this.element.parentNode.removeChild(this.element);
		for (let i = 0; i < Box.instances.length; i++) {
			if (Box.instances[i] == this) {
				Box.instances.splice(i, 1);
				break;
			}
		}
	}
}

function addElement(type) {
	let box = new Box("test");

	document.getElementById("playground").appendChild(box.element);
}