DataTools3/Box.js

class Box {
	title;

	inputs = [];
	outputs = [];

	x;
	y;

	element;
	content;

	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;

		let closestDistance;
		do {
			closestDistance = 999999;
			this.x += 50;
			this.y += 50;
			for (let box of Box.instances) {
				if (box == this) continue;
				closestDistance = Math.min(Math.abs(box.x - this.x), Math.abs(box.y - this.y), closestDistance);
			}
		} while (closestDistance < 50);
	}

	buildElement() {
		if (this.element) return this.element;

		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);

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

		let title = document.createElement("span");
		title.classList.add("boxTitle");
		title.innerText = this.title;
		this.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);

		this.content.appendChild(connectorContainer);

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

		this.updatePosition();
		return this.element;
	}

	updatePosition() {
		if (!this.element) return;

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

	deleteBox() {
		for (let connector of this.inputs) {
			connector.disconnectBoth();
		}
		for (let connector of this.outputs) {
			connector.disconnectBoth();
		}
		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;
			}
		}
	}
}