Admin/elcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor toolbar and icon interactions in ObjectFlowDesigner

Browse Source
This commit is contained in:
Chop
2025-06-26 22:42:38 +02:00
parent 643a4210ea
commit a45e8cf262
3 changed files with 700 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

430
script.js
View File

@@ -39,18 +39,20 @@ class ObjectFlowDesigner {
this.handleContextMenu.bind(this)
);
// Palette events
document.querySelectorAll(".palette-item").forEach((item) => {
item.addEventListener("click", this.handlePaletteClick.bind(this));
// Icon toolbar events
document.querySelectorAll(".icon-btn[data-type]").forEach((btn) => {
btn.addEventListener("click", this.handleIconClick.bind(this));
});
// Control buttons
document
.getElementById("connectionBtn")
.addEventListener("click", () => this.setMode("connect"));
// Tool buttons
document
.getElementById("selectBtn")
.addEventListener("click", () => this.setMode("select"));
document
.getElementById("deleteBtn")
.addEventListener("click", () => this.setMode("delete"));
// Control buttons
document
.getElementById("clearBtn")
.addEventListener("click", this.clearAll.bind(this));
@@ -84,36 +86,51 @@ class ObjectFlowDesigner {
document.body.className = `mode-${mode}`;
// Update button states
document
.getElementById("connectionBtn")
.classList.toggle("btn-primary", mode === "connect");
document
.getElementById("connectionBtn")
.classList.toggle("btn-outline", mode !== "connect");
document
.getElementById("selectBtn")
.classList.toggle("btn-primary", mode === "select");
document
.getElementById("selectBtn")
.classList.toggle("btn-outline", mode !== "select");
// Update tool button states
document.querySelectorAll(".tool-btn").forEach((btn) => {
btn.classList.remove("active");
});
if (mode === "select") {
document.getElementById("selectBtn").classList.add("active");
} else if (mode === "delete") {
document.getElementById("deleteBtn").classList.add("active");
}
// Clear active state from object/cable buttons when switching to tools
if (mode === "select" || mode === "delete") {
document.querySelectorAll(".icon-btn[data-type]").forEach((btn) => {
btn.classList.remove("active");
});
}
this.render();
}
handlePaletteClick(event) {
handleIconClick(event) {
const type = event.currentTarget.dataset.type;
// Check if triangle already exists
if (
type === "triangle" &&
this.objects.some((obj) => obj.type === "triangle")
) {
this.showError("Only one triangle is allowed!");
return;
}
// Clear other active states first
document.querySelectorAll(".icon-btn").forEach((btn) => {
btn.classList.remove("active");
});
this.createObject(type, 100, 100);
// Set the clicked button as active
event.currentTarget.classList.add("active");
if (type === "triangle") {
// Check if triangle already exists
if (this.objects.some((obj) => obj.type === "triangle")) {
alert("Only one transformer is allowed in the system.");
event.currentTarget.classList.remove("active");
return;
}
this.setMode("place-triangle");
} else if (type === "box" || type === "pole" || type === "end") {
this.setMode(`place-${type}`);
} else if (type === "underground" || type === "overhead") {
this.setMode(`connect-${type}`);
}
}
createObject(type, x, y) {
@@ -147,21 +164,28 @@ class ObjectFlowDesigner {
outputs: [],
},
};
} else {
// Square - Cable box or Pole
} else if (type === "box" || type === "pole" || type === "end") {
// Node types - Cable box, Pole, or End connection
const nodeTypeMap = {
box: "cable_box",
pole: "pole",
end: "end_connection",
};
obj = {
id,
type,
type: "square", // Keep internal type as square for compatibility
x: snappedPos.x,
y: snappedPos.y,
width: 50,
height: 50,
data: {
number: `N${id}`,
name: `Node ${id}`,
nodeType: "cable_box", // cable_box, pole, or end_connection
nodeType: nodeTypeMap[type],
boxPoleType: "", // Hand input field
powerKW: 0, // Power rating in kW
consumers3Phase: 0, // Number of 3-phase consumers (7kW each)
consumers1Phase: 0, // Number of 1-phase consumers (3kW each)
customPowerKW: 0, // Additional custom power in kW
description: "",
metadata: {},
},
@@ -218,6 +242,20 @@ class ObjectFlowDesigner {
this.selectedConnection = null;
this.updatePropertiesPanel();
}
} else if (this.mode.startsWith("connect-") && clickedObject) {
if (!this.connectionStart) {
// Start connection
this.connectionStart = clickedObject;
} else if (this.connectionStart !== clickedObject) {
// End connection
const cableType = this.mode.replace("connect-", "");
this.createConnection(
this.connectionStart,
clickedObject,
`${cableType}-single`
);
this.connectionStart = null;
}
} else if (this.mode === "connect" && clickedObject) {
if (!this.connectionStart) {
// Start connection
@@ -227,6 +265,12 @@ class ObjectFlowDesigner {
this.createConnection(this.connectionStart, clickedObject);
this.connectionStart = null;
}
} else if (this.mode === "delete") {
if (clickedObject) {
this.deleteObject(clickedObject.id);
} else if (clickedConnection) {
this.deleteConnection(clickedConnection.id);
}
} else {
this.selectedObject = null;
this.selectedConnection = null;
@@ -281,7 +325,18 @@ class ObjectFlowDesigner {
}
handleClick(event) {
// Handle click events that don't require dragging
const rect = this.canvas.getBoundingClientRect();
const screenX = event.clientX - rect.left;
const screenY = event.clientY - rect.top;
const { x, y } = this.screenToWorld(screenX, screenY);
// Handle placement modes
if (this.mode.startsWith("place-")) {
const type = this.mode.replace("place-", "");
const snappedPos = this.snapToGrid(x, y);
this.createObject(type, snappedPos.x, snappedPos.y);
return;
}
}
handleWheel(event) {
@@ -399,7 +454,7 @@ class ObjectFlowDesigner {
};
}
createConnection(fromObj, toObj) {
createConnection(fromObj, toObj, cableType = "YAKY") {
// Validate connection rules
if (fromObj === toObj) {
this.showError("Cannot connect object to itself!");
@@ -460,8 +515,20 @@ class ObjectFlowDesigner {
return;
}
// Validate overhead cable connections (only to poles or end connections)
// This will be checked later when cable type is selected
// Set cable type based on mode
let defaultCableType = "YAKY";
if (cableType === "underground-single") {
defaultCableType = "YAKY";
} else if (cableType === "overhead-single") {
defaultCableType = "AL";
}
// Calculate distance between objects
const distance = Math.round(
Math.sqrt(
Math.pow(toObj.x - fromObj.x, 2) + Math.pow(toObj.y - fromObj.y, 2)
) / 10 // Convert from pixels to meters (rough approximation)
);
const connection = {
id: this.nextId++,
@@ -469,9 +536,9 @@ class ObjectFlowDesigner {
to: toObj,
data: {
label: `Cable ${this.nextId - 1}`,
cableType: "YAKY", // YAKY, NA2XY-J (ground), AL, AsXSn (overhead)
cableType: defaultCableType,
crossSection: 50, // mm²
length: 100, // meters
length: Math.max(10, distance), // minimum 10 meters
description: "",
metadata: {},
},
@@ -485,6 +552,7 @@ class ObjectFlowDesigner {
this.validateCableConnection(connection);
this.render();
return connection;
}
validateCableConnection(connection) {
@@ -537,7 +605,7 @@ class ObjectFlowDesigner {
this.ctx.restore();
// Draw connection preview (in screen coordinates)
if (this.mode === "connect" && this.connectionStart) {
if (this.mode.startsWith("connect-") && this.connectionStart) {
this.drawConnectionPreview();
}
}
@@ -711,13 +779,10 @@ class ObjectFlowDesigner {
this.ctx.fillText(`#${obj.data.number}`, obj.x + obj.width / 2, yOffset);
yOffset += 13;
// 2. Node power (for boxes and end connections)
if (!isPole && obj.data.powerKW > 0) {
this.ctx.fillText(
`${obj.data.powerKW}kW`,
obj.x + obj.width / 2,
yOffset
);
// 2. Node power (for all node types)
const totalPower = this.calculateNodeTotalPower(obj);
if (totalPower > 0) {
this.ctx.fillText(`${totalPower}kW`, obj.x + obj.width / 2, yOffset);
yOffset += 13;
}
@@ -836,40 +901,25 @@ class ObjectFlowDesigner {
textLines.push(`${connection.data.length}m`);
if (textLines.length > 0) {
this.ctx.font = "12px Arial";
this.ctx.font = "11px Arial";
this.ctx.textAlign = "center";
// Calculate dimensions for background
const lineHeight = 16;
const padding = 5;
let maxWidth = 0;
const lineHeight = 14;
// Measure all text lines to find the maximum width
textLines.forEach((line) => {
const width = this.ctx.measureText(line).width;
if (width > maxWidth) maxWidth = width;
});
const totalHeight = textLines.length * lineHeight;
// Draw background
this.ctx.fillStyle = "rgba(255, 255, 255, 0.95)";
this.ctx.strokeStyle = "#4a5568";
this.ctx.lineWidth = 1;
const bgX = midPoint.x - maxWidth / 2 - padding;
const bgY = midPoint.y - totalHeight / 2 - padding;
const bgWidth = maxWidth + padding * 2;
const bgHeight = totalHeight + padding * 2;
this.ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
this.ctx.strokeRect(bgX, bgY, bgWidth, bgHeight);
// Draw text lines
this.ctx.fillStyle = "#2d3748";
// Draw text lines with subtle outline for visibility
textLines.forEach((line, index) => {
const yOffset = (index - (textLines.length - 1) / 2) * lineHeight;
this.ctx.fillText(line, midPoint.x, midPoint.y + yOffset + 4);
const textX = midPoint.x;
const textY = midPoint.y + yOffset + 4;
// Draw text outline (white stroke for visibility)
this.ctx.strokeStyle = "white";
this.ctx.lineWidth = 3;
this.ctx.strokeText(line, textX, textY);
// Draw text fill
this.ctx.fillStyle = "#2d3748";
this.ctx.fillText(line, textX, textY);
});
}
@@ -1018,34 +1068,57 @@ class ObjectFlowDesigner {
panel.innerHTML = `
<div class="property-group">
<h4>Node Properties</h4>
<!-- Node Type Icons -->
<div class="node-type-selector">
<button type="button" class="node-type-btn ${
obj.data.nodeType === "cable_box" ? "active" : ""
}"
data-type="cable_box" title="Cable Box">
<span class="node-icon">⬛</span>
<span class="node-label">Box</span>
</button>
<button type="button" class="node-type-btn ${
obj.data.nodeType === "pole" ? "active" : ""
}"
data-type="pole" title="Pole">
<span class="node-icon">⬆</span>
<span class="node-label">Pole</span>
</button>
<button type="button" class="node-type-btn ${
obj.data.nodeType === "end_connection" ? "active" : ""
}"
data-type="end_connection" title="End Connection">
<span class="node-icon">⬤</span>
<span class="node-label">End</span>
</button>
</div>
<!-- Number -->
<label>Number:</label>
<input type="text" id="objNumber" value="${obj.data.number}">
<label>Name:</label>
<input type="text" id="objName" value="${obj.data.name}">
<label>Node Type:</label>
<select id="objNodeType">
<option value="cable_box" ${
obj.data.nodeType === "cable_box" ? "selected" : ""
}>Cable Box</option>
<option value="pole" ${
obj.data.nodeType === "pole" ? "selected" : ""
}>Pole</option>
<option value="end_connection" ${
obj.data.nodeType === "end_connection" ? "selected" : ""
}>End Connection</option>
</select>
<label>Type Description:</label>
<!-- Type Description -->
<label>Type:</label>
<input type="text" id="objBoxPoleType" value="${
obj.data.boxPoleType
}" placeholder="Enter type description">
${
obj.data.nodeType !== "pole"
? `
<label>Power Rating (kW):</label>
<input type="number" id="objPowerKW" value="${obj.data.powerKW}" step="0.1" min="0">
`
: ""
}
<!-- Power Settings -->
<label>3-Phase Consumers (7kW each):</label>
<input type="number" id="objConsumers3Phase" value="${
obj.data.consumers3Phase || 0
}" min="0">
<label>1-Phase Consumers (3kW each):</label>
<input type="number" id="objConsumers1Phase" value="${
obj.data.consumers1Phase || 0
}" min="0">
<label>Custom Power (kW):</label>
<input type="number" id="objCustomPowerKW" value="${
obj.data.customPowerKW || 0
}" step="0.1" min="0">
<!-- Description -->
<label>Description:</label>
<textarea id="objDescription">${obj.data.description}</textarea>
</div>
@@ -1061,11 +1134,14 @@ class ObjectFlowDesigner {
}</p>
<p><strong>ID:</strong> ${obj.id}</p>
<p><strong>Position:</strong> (${Math.round(obj.x)}, ${Math.round(obj.y)})</p>
${
obj.data.nodeType !== "pole" && obj.data.powerKW > 0
? `<p><strong>Power:</strong> ${obj.data.powerKW} kW</p>`
: ""
}
<p><strong>Total Power:</strong> ${this.calculateNodeTotalPower(obj)} kW</p>
<p><strong>3-Phase:</strong> ${obj.data.consumers3Phase || 0} consumers (${
(obj.data.consumers3Phase || 0) * 7
}kW)</p>
<p><strong>1-Phase:</strong> ${obj.data.consumers1Phase || 0} consumers (${
(obj.data.consumers1Phase || 0) * 3
}kW)</p>
<p><strong>Custom:</strong> ${obj.data.customPowerKW || 0} kW</p>
<p><strong>Inputs:</strong> ${obj.connections.inputs.length}${
obj.data.nodeType === "end_connection" ? "" : "/1"
}</p>
@@ -1086,17 +1162,22 @@ class ObjectFlowDesigner {
document.getElementById("objNumber").addEventListener("input", (e) => {
obj.data.number = e.target.value;
});
document.getElementById("objName").addEventListener("input", (e) => {
obj.data.name = e.target.value;
});
document.getElementById("objNodeType").addEventListener("change", (e) => {
obj.data.nodeType = e.target.value;
// Reset power for poles
if (e.target.value === "pole") {
obj.data.powerKW = 0;
}
this.updatePropertiesPanel(); // Refresh to update options
this.render(); // Re-render to update visual representation
// Add event listeners for node type buttons
document.querySelectorAll(".node-type-btn").forEach((btn) => {
btn.addEventListener("click", (e) => {
const newType = e.currentTarget.dataset.type;
obj.data.nodeType = newType;
// Update active button styling
document
.querySelectorAll(".node-type-btn")
.forEach((b) => b.classList.remove("active"));
e.currentTarget.classList.add("active");
this.updatePropertiesPanel(); // Refresh to update options
this.render(); // Re-render to update visual representation
});
});
document
.getElementById("objBoxPoleType")
@@ -1105,11 +1186,33 @@ class ObjectFlowDesigner {
this.render(); // Re-render to update visual representation
});
// Only add power listener if the field exists (not for poles)
const powerField = document.getElementById("objPowerKW");
if (powerField) {
powerField.addEventListener("input", (e) => {
obj.data.powerKW = parseFloat(e.target.value) || 0;
// Add consumer and power listeners for all node types
const consumers3PhaseField =
document.getElementById("objConsumers3Phase");
if (consumers3PhaseField) {
consumers3PhaseField.addEventListener("input", (e) => {
obj.data.consumers3Phase = parseInt(e.target.value) || 0;
this.updatePropertiesPanel(); // Refresh to update calculated power display
this.render(); // Re-render to update visual representation
});
}
const consumers1PhaseField =
document.getElementById("objConsumers1Phase");
if (consumers1PhaseField) {
consumers1PhaseField.addEventListener("input", (e) => {
obj.data.consumers1Phase = parseInt(e.target.value) || 0;
this.updatePropertiesPanel(); // Refresh to update calculated power display
this.render(); // Re-render to update visual representation
});
}
const customPowerField = document.getElementById("objCustomPowerKW");
if (customPowerField) {
customPowerField.addEventListener("input", (e) => {
obj.data.customPowerKW = parseFloat(e.target.value) || 0;
this.updatePropertiesPanel(); // Refresh to update calculated power display
this.render(); // Re-render to update visual representation
});
}
@@ -1283,24 +1386,72 @@ class ObjectFlowDesigner {
}
showTooltip(obj, screenX, screenY) {
const tooltip = document.getElementById("tooltip");
let tooltip = document.getElementById("tooltip");
// If tooltip doesn't exist or is not properly positioned, recreate it
if (!tooltip) {
tooltip = document.createElement("div");
tooltip.id = "tooltip";
tooltip.className = "tooltip";
document.body.appendChild(tooltip);
}
if (obj) {
tooltip.style.display = "block";
tooltip.style.left = screenX + 10 + "px";
tooltip.style.top = screenY - 30 + "px";
tooltip.textContent = `${obj.data.name} (${obj.type})`;
// Convert canvas coordinates to viewport coordinates
const canvasRect = this.canvas.getBoundingClientRect();
const viewportX = canvasRect.left + screenX;
const viewportY = canvasRect.top + screenY;
// Position tooltip with some offset and ensure it doesn't go off screen
const leftPos = Math.min(viewportX + 15, window.innerWidth - 200);
const topPos = Math.max(viewportY - 35, 10);
// Force all positioning styles
tooltip.style.position = "fixed";
tooltip.style.left = leftPos + "px";
tooltip.style.top = topPos + "px";
tooltip.style.zIndex = "999999";
tooltip.style.pointerEvents = "none";
tooltip.style.background = "rgba(0, 0, 0, 0.9)";
tooltip.style.color = "white";
tooltip.style.padding = "0.5rem";
tooltip.style.borderRadius = "4px";
tooltip.style.fontSize = "0.8rem";
tooltip.textContent = `${obj.data.number || obj.data.name || "Object"} (${
obj.type === "triangle" ? "Transformer" : "Node"
})`;
} else {
// Check if hovering over a connection
const worldPos = this.screenToWorld(screenX, screenY);
const connection = this.getConnectionAt(worldPos.x, worldPos.y);
if (connection) {
tooltip.style.display = "block";
tooltip.style.left = screenX + 10 + "px";
tooltip.style.top = screenY - 30 + "px";
// Convert canvas coordinates to viewport coordinates
const canvasRect = this.canvas.getBoundingClientRect();
const viewportX = canvasRect.left + screenX;
const viewportY = canvasRect.top + screenY;
// Position tooltip with some offset and ensure it doesn't go off screen
const leftPos = Math.min(viewportX + 15, window.innerWidth - 200);
const topPos = Math.max(viewportY - 35, 10);
// Force all positioning styles
tooltip.style.position = "fixed";
tooltip.style.left = leftPos + "px";
tooltip.style.top = topPos + "px";
tooltip.style.zIndex = "999999";
tooltip.style.pointerEvents = "none";
tooltip.style.background = "rgba(0, 0, 0, 0.9)";
tooltip.style.color = "white";
tooltip.style.padding = "0.5rem";
tooltip.style.borderRadius = "4px";
tooltip.style.fontSize = "0.8rem";
tooltip.textContent = `${connection.data.label || "Connection"} (${
connection.from.data.name
} → ${connection.to.data.name})`;
connection.from.data.number || connection.from.data.name || "From"
} → ${connection.to.data.number || connection.to.data.name || "To"})`;
} else {
tooltip.style.display = "none";
}
@@ -1481,7 +1632,7 @@ class ObjectFlowDesigner {
calculateDownstreamPower(node) {
// Calculate total power of this node and all downstream nodes
let totalPower = node.data.powerKW || 0;
let totalPower = this.calculateNodeTotalPower(node);
const visited = new Set();
const calculateRecursive = (currentNode) => {
@@ -1491,7 +1642,7 @@ class ObjectFlowDesigner {
let downstreamPower = 0;
for (const connection of currentNode.connections.outputs) {
const toNode = connection.to;
downstreamPower += toNode.data.powerKW || 0;
downstreamPower += this.calculateNodeTotalPower(toNode);
downstreamPower += calculateRecursive(toNode);
}
return downstreamPower;
@@ -1500,6 +1651,19 @@ class ObjectFlowDesigner {
totalPower += calculateRecursive(node);
return totalPower;
}
// Calculate total power for a node based on consumers and custom power
calculateNodeTotalPower(node) {
if (node.type === "triangle") {
return 0; // Transformers don't have power consumption
}
const power3Phase = (node.data.consumers3Phase || 0) * 7; // 7kW per 3-phase consumer
const power1Phase = (node.data.consumers1Phase || 0) * 3; // 3kW per 1-phase consumer
const customPower = node.data.customPowerKW || 0;
return power3Phase + power1Phase + customPower;
}
}
// Initialize the application