@wavequery/conductor
Version:
Modular LLM orchestration framework
130 lines • 4.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlsComponent = void 0;
const events_1 = require("events");
class ControlsComponent extends events_1.EventEmitter {
constructor(options) {
super();
this.controlElements = new Map();
this.container = options.container;
this.options = {
theme: "light",
...options,
};
this.initializeControls();
}
initializeControls() {
const controlsContainer = document.createElement("div");
controlsContainer.className = "graph-controls";
this.applyControlsStyles(controlsContainer);
if (this.options.controls.zoom) {
this.addZoomControls(controlsContainer);
}
if (this.options.controls.fit) {
this.addFitControl(controlsContainer);
}
if (this.options.controls.pause) {
this.addPauseControl(controlsContainer);
}
if (this.options.controls.expand) {
this.addExpandControl(controlsContainer);
}
this.container.appendChild(controlsContainer);
}
applyControlsStyles(container) {
Object.assign(container.style, {
position: "absolute",
bottom: "20px",
right: "20px",
display: "flex",
flexDirection: "column",
gap: "10px",
background: this.options.theme === "light" ? "#ffffff" : "#2d3436",
padding: "10px",
borderRadius: "8px",
boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
zIndex: "1000",
});
}
createButton(icon, tooltip) {
const button = document.createElement("button");
button.innerHTML = icon;
button.title = tooltip;
Object.assign(button.style, {
border: "none",
background: "transparent",
color: this.options.theme === "light" ? "#2d3436" : "#ffffff",
padding: "8px",
cursor: "pointer",
borderRadius: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "background-color 0.2s",
});
button.addEventListener("mouseover", () => {
button.style.backgroundColor =
this.options.theme === "light"
? "rgba(0,0,0,0.05)"
: "rgba(255,255,255,0.1)";
});
button.addEventListener("mouseout", () => {
button.style.backgroundColor = "transparent";
});
return button;
}
addZoomControls(container) {
const zoomIn = this.createButton("+", "Zoom In");
const zoomOut = this.createButton("-", "Zoom Out");
zoomIn.addEventListener("click", () => this.emit("zoom", 1.2));
zoomOut.addEventListener("click", () => this.emit("zoom", 0.8));
container.appendChild(zoomIn);
container.appendChild(zoomOut);
this.controlElements.set("zoomIn", zoomIn);
this.controlElements.set("zoomOut", zoomOut);
}
addFitControl(container) {
const fit = this.createButton("⊡", "Fit to View");
fit.addEventListener("click", () => this.emit("fit"));
container.appendChild(fit);
this.controlElements.set("fit", fit);
}
addPauseControl(container) {
const pause = this.createButton("⏸", "Pause Layout");
let isPaused = false;
pause.addEventListener("click", () => {
isPaused = !isPaused;
pause.innerHTML = isPaused ? "▶" : "⏸";
pause.title = isPaused ? "Resume Layout" : "Pause Layout";
this.emit("pause", isPaused);
});
container.appendChild(pause);
this.controlElements.set("pause", pause);
}
addExpandControl(container) {
const expand = this.createButton("↔", "Expand All");
let isExpanded = false;
expand.addEventListener("click", () => {
isExpanded = !isExpanded;
expand.innerHTML = isExpanded ? "↕" : "↔";
expand.title = isExpanded ? "Collapse All" : "Expand All";
this.emit("expand", isExpanded);
});
container.appendChild(expand);
this.controlElements.set("expand", expand);
}
setEnabled(control, enabled) {
const element = this.controlElements.get(control);
if (element) {
element.style.opacity = enabled ? "1" : "0.5";
element.style.pointerEvents = enabled ? "auto" : "none";
}
}
dispose() {
this.controlElements.forEach((element) => element.remove());
this.controlElements.clear();
this.removeAllListeners();
}
}
exports.ControlsComponent = ControlsComponent;
//# sourceMappingURL=controls.js.map