Skip to content

Commit

Permalink
📝 update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhzLuke96
zhzLuke96 committed May 26, 2024
1 parent 4c7ed7e commit 0a7fda0
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 56 deletions.
135 changes: 83 additions & 52 deletions apps/editor/src/Editor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
import { LGraph, LGraphStatus, LGraphCanvas } from "@litegraph-ts/core"
import { LGraph, LGraphStatus, LGraphCanvas } from "@litegraph-ts/core";

export type EditorOptions = {
skipLiveMode?: boolean;
skipMaximize?: boolean;
miniwindow?: boolean;
}

export interface EditorPanel extends HTMLDivElement {
};

}
export interface EditorPanel extends HTMLDivElement {}

export interface EditorMiniWindowPanel extends HTMLDivElement {
graphCanvas: LGraphCanvas;
close: () => void;
}

export interface EditorLoadCounter extends HTMLDivElement {

}
export interface EditorLoadCounter extends HTMLDivElement {}

export default class Editor {
containerId: string;
Expand Down Expand Up @@ -49,7 +45,7 @@ export default class Editor {
<div class='tools tools-left'></div>
<div class='tools tools-right'></div>
</div>
`
`;

this.options = options;

Expand All @@ -72,6 +68,8 @@ export default class Editor {
this.graphCanvas.draw(true);
};

// this.graphCanvas.use_gradients = true;

this.graphCanvas.onDropItem = this.onDropItem.bind(this);

//add stuff
Expand All @@ -83,14 +81,14 @@ export default class Editor {
"Play",
"imgs/icon-play.png",
this.onPlayButton.bind(this),
".tools-right"
".tools-right",
);
this.addToolsButton(
"playstepnode_button",
"Step",
"imgs/icon-playstep.png",
this.onPlayStepButton.bind(this),
".tools-right"
".tools-right",
);

if (!options.skipLiveMode) {
Expand All @@ -99,7 +97,7 @@ export default class Editor {
"Live",
"imgs/icon-record.png",
this.onLiveButton.bind(this),
".tools-right"
".tools-right",
);
}
if (!options.skipMaximize) {
Expand All @@ -108,7 +106,7 @@ export default class Editor {
"",
"imgs/icon-maximize.png",
this.onFullscreenButton.bind(this),
".tools-right"
".tools-right",
);
}
if (options.miniwindow) {
Expand All @@ -133,8 +131,7 @@ export default class Editor {
this.meter = document.createElement("div") as EditorLoadCounter;
this.meter.className = "headerpanel loadmeter toolbar-widget";

var html =
`
var html = `
<div class='cpuload'>
<strong>CPU</strong>
<div class='bgload'>
Expand All @@ -150,30 +147,42 @@ export default class Editor {
`;

this.meter.innerHTML = html;
this.root.querySelector<HTMLDivElement>(".header .tools-left")!.appendChild(this.meter);
this.root
.querySelector<HTMLDivElement>(".header .tools-left")!
.appendChild(this.meter);
var self = this;

setInterval(() => {
this.meter!.querySelector<HTMLDivElement>(".cpuload .fgload")!.style.width =
2 * self.graph.execution_time * 90 + "px";
this.meter!.querySelector<HTMLDivElement>(
".cpuload .fgload",
)!.style.width = 2 * self.graph.execution_time * 90 + "px";
if (self.graph.status == LGraphStatus.STATUS_RUNNING) {
this.meter!.querySelector<HTMLDivElement>(".gpuload .fgload")!.style.width =
self.graphCanvas.render_time * 10 * 90 + "px";
this.meter!.querySelector<HTMLDivElement>(
".gpuload .fgload",
)!.style.width = self.graphCanvas.render_time * 10 * 90 + "px";
} else {
this.meter!.querySelector<HTMLDivElement>(".gpuload .fgload")!.style.width = 4 + "px";
this.meter!.querySelector<HTMLDivElement>(
".gpuload .fgload",
)!.style.width = 4 + "px";
}
}, 200);
};
}

addToolsButton(id: string, name: string, icon_url: string, callback: EventListener, container: string) {
addToolsButton(
id: string,
name: string,
icon_url: string,
callback: EventListener,
container: string,
) {
if (!container) {
container = ".tools";
}

var button = this.createButton(name, icon_url, callback);
button.id = id;
this.root.querySelector(container)!.appendChild(button);
};
}

createButton(name: string, icon_url: string, callback?: EventListener) {
var button = document.createElement("button");
Expand All @@ -182,23 +191,25 @@ export default class Editor {
}
button.classList.add("btn");
button.innerHTML += name;
if (callback)
button.addEventListener("click", callback);
if (callback) button.addEventListener("click", callback);
return button;
};
}

onLoadButton() {
var panel = this.graphCanvas.createPanel("Load session", { closable: true });
var panel = this.graphCanvas.createPanel("Load session", {
closable: true,
});
//TO DO

this.root.appendChild(panel);
};
}

onSaveButton() { };
onSaveButton() {}

onPlayButton() {
var graph = this.graph;
var button = this.root.querySelector<HTMLButtonElement>("#playnode_button")!;
var button =
this.root.querySelector<HTMLButtonElement>("#playnode_button")!;

if (graph.status == LGraphStatus.STATUS_STOPPED) {
button.innerHTML = "<img src='imgs/icon-stop.png'/> Stop";
Expand All @@ -207,23 +218,24 @@ export default class Editor {
button.innerHTML = "<img src='imgs/icon-play.png'/> Play";
graph.stop();
}
};
}

onPlayStepButton() {
var graph = this.graph;
graph.runStep(1);
this.graphCanvas.draw(true, true);
};
}

onLiveButton() {
var is_live_mode = !this.graphCanvas.live_mode;
this.graphCanvas.switchLiveMode(true);
this.graphCanvas.draw();
var button = this.root.querySelector<HTMLButtonElement>("#livemode_button")!;
var button =
this.root.querySelector<HTMLButtonElement>("#livemode_button")!;
button.innerHTML = !is_live_mode
? "<img src='imgs/icon-record.png'/> Live"
: "<img src='imgs/icon-gear.png'/> Edit";
};
}

onDropItem(e: DragEvent) {
if (!e.dataTransfer) {
Expand All @@ -236,7 +248,7 @@ export default class Editor {
let ext = LGraphCanvas.getFileExtension(file.name);
let reader = new FileReader();
if (ext == "json") {
reader.onload = function(_event: Event) {
reader.onload = function (_event: Event) {
var data = JSON.parse(reader.result as string);
that.graph.configure(data);
};
Expand All @@ -250,28 +262,29 @@ export default class Editor {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
else {
} else {
throw "Fullscreen not supported";
}

var self = this;
setTimeout(function() {
setTimeout(function () {
self.graphCanvas.resize();
}, 100);
};
}

onFullscreenButton() {
this.toggleFullscreen();
};
}

addMiniWindow(w: number, h: number) {
if (this.miniwindow) {
console.warn("Miniwindow already created.");
this.miniwindow.close();
}

this.miniwindow = document.createElement("div") as EditorMiniWindowPanel;
this.miniwindow = document.createElement(
"div",
) as EditorMiniWindowPanel;
this.miniwindow.className = "litegraph miniwindow";
this.miniwindow.innerHTML =
"<canvas class='graphCanvas' width='" +
Expand All @@ -289,17 +302,20 @@ export default class Editor {
graphCanvas.render_shadows = false;
graphCanvas.maxZoom = 0.25;
this.miniwindow.graphCanvas = graphCanvas;
graphCanvas.onClear = function() {
graphCanvas.onClear = function () {
graphCanvas.scale = 0.25;
graphCanvas.allow_dragnodes = false;
graphCanvas.allow_interaction = false;
};
graphCanvas.onRenderBackground = (_canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => {
graphCanvas.onRenderBackground = (
_canvas: HTMLCanvasElement,
ctx: CanvasRenderingContext2D,
) => {
ctx.strokeStyle = "#567";
var tl = graphCanvas.convertOffsetToCanvas([0, 0]);
var br = graphCanvas.convertOffsetToCanvas([
graphCanvas.canvas.width,
graphCanvas.canvas.height
graphCanvas.canvas.height,
]);
tl = graphCanvas.convertCanvasToOffset(tl);
br = graphCanvas.convertCanvasToOffset(br);
Expand All @@ -308,7 +324,7 @@ export default class Editor {
Math.floor(tl[0]) + 0.5,
Math.floor(tl[1]) + 0.5,
Math.floor(br[0] - tl[0]),
Math.floor(br[1] - tl[1])
Math.floor(br[1] - tl[1]),
);
};

Expand All @@ -319,26 +335,41 @@ export default class Editor {
this.miniwindow.close = () => {
graphCanvas.setGraph(null);
this.miniwindow!.parentNode!.removeChild(this.miniwindow!);
}
};

var close_button = document.createElement("div");
close_button.className = "corner-button";
close_button.innerHTML = "&#10060;";
close_button.addEventListener("click", this.miniwindow.close.bind(this));
close_button.addEventListener(
"click",
this.miniwindow.close.bind(this),
);
this.miniwindow.appendChild(close_button);

this.root.querySelector<HTMLDivElement>(".content")!.appendChild(this.miniwindow);
};
this.root
.querySelector<HTMLDivElement>(".content")!
.appendChild(this.miniwindow);
}

addMultiview() {
var canvas = this.canvas;
this.graphCanvas.ctx.fillStyle = "black";
this.graphCanvas.ctx.fillRect(0, 0, canvas.width, canvas.height);
this.graphCanvas.viewport = [0, 0, canvas.width * 0.5 - 2, canvas.height];
this.graphCanvas.viewport = [
0,
0,
canvas.width * 0.5 - 2,
canvas.height,
];

var graphCanvas2 = new LGraphCanvas(canvas, this.graph);
graphCanvas2.background_image = "imgs/grid.png";
this.graphCanvas2 = graphCanvas2;
this.graphCanvas2.viewport = [canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height];
this.graphCanvas2.viewport = [
canvas.width * 0.5,
0,
canvas.width * 0.5,
canvas.height,
];
}
}

0 comments on commit 0a7fda0

Please sign in to comment.