119 lines
3.2 KiB
JavaScript
119 lines
3.2 KiB
JavaScript
import { app } from "/scripts/app.js";
|
|
|
|
function getNamedWidget(node, name) {
|
|
return node.widgets.find(function(w){return w.name == name})
|
|
}
|
|
|
|
function addCanvasWidget(node) {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = 1000
|
|
canvas.height = 400
|
|
|
|
canvas.style.pointerEvents = "none";
|
|
canvas.style.border = "1px solid " + LiteGraph.WIDGET_OUTLINE_COLOR
|
|
canvas.style.backgroundColor = LiteGraph.WIDGET_BGCOLOR
|
|
canvas.stcolor = app.canvas.default_connection_color_byType.IMAGE
|
|
|
|
let opts = {
|
|
getMinHeight() { return 100 },
|
|
selectOn: [],
|
|
}
|
|
const widget = node.addDOMWidget("canvas", "CTYCanvas", canvas, opts);
|
|
widget.canvas = canvas;
|
|
return widget;
|
|
}
|
|
|
|
function drawCanvasInitial(ctx, width, height, pv_x, pv_y) {
|
|
// clear
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
// draw cross
|
|
ctx.beginPath()
|
|
ctx.lineWidth = 5
|
|
ctx.strokeStyle = "#444"
|
|
|
|
ctx.moveTo(0, pv_y)
|
|
ctx.lineTo(width, pv_y)
|
|
ctx.moveTo(pv_x, 0)
|
|
ctx.lineTo(pv_x, height)
|
|
ctx.stroke()
|
|
}
|
|
|
|
function drawCanvasCMMovePivot(node) {
|
|
let move = getNamedWidget(node, "move").value
|
|
let pivot = getNamedWidget(node, "pivot").value
|
|
let canvas = getNamedWidget(node, "canvas").canvas
|
|
|
|
let ctx = canvas.getContext("2d")
|
|
|
|
// Calc pivot coords
|
|
let width = canvas.width
|
|
let height = canvas.height
|
|
let pv_x = width * pivot
|
|
let pv_y = height * (1.0 - pivot) - (height * move)
|
|
|
|
// clear
|
|
drawCanvasInitial(ctx, width, height, pv_x, pv_y)
|
|
|
|
// draw lines
|
|
ctx.beginPath()
|
|
ctx.lineWidth = 15
|
|
ctx.strokeStyle = canvas.stcolor
|
|
|
|
ctx.moveTo(0, height) // start
|
|
ctx.lineTo(pv_x, pv_y) // start -> pivot
|
|
ctx.lineTo(width, 0) // pivot -> end
|
|
ctx.stroke()
|
|
}
|
|
|
|
function drawCanvasCMEdges(node) {
|
|
let low = getNamedWidget(node, "low").value
|
|
let high = getNamedWidget(node, "high").value
|
|
let pivot = getNamedWidget(node, "pivot").value
|
|
let canvas = getNamedWidget(node, "canvas").canvas
|
|
|
|
let ctx = canvas.getContext("2d")
|
|
ctx.lineWidth = 15
|
|
ctx.strokeStyle = canvas.stcolor
|
|
|
|
// Calc pivot coords
|
|
let width = canvas.width
|
|
let height = canvas.height
|
|
let pv_x = width * pivot
|
|
let pv_y = height * (1.0 - pivot)
|
|
|
|
// clear
|
|
drawCanvasInitial(ctx, width, height, pv_x, pv_y)
|
|
|
|
// draw lines
|
|
ctx.beginPath()
|
|
ctx.lineWidth = 15
|
|
ctx.strokeStyle = canvas.stcolor
|
|
|
|
ctx.moveTo(0, height * low) // start
|
|
ctx.lineTo(pv_x, pv_y) // start -> pivot
|
|
ctx.lineTo(width, height * (1.0-high)) // pivot -> end
|
|
ctx.stroke()
|
|
}
|
|
|
|
app.registerExtension({
|
|
name: "City96.ColorMod",
|
|
nodeCreated(node, app) {
|
|
if (node.__proto__.comfyClass == "ColorModPivot") {
|
|
var widget = addCanvasWidget(node)
|
|
var refresh = function(v=null) { drawCanvasCMMovePivot(node) }
|
|
getNamedWidget(node, "move").callback = refresh
|
|
getNamedWidget(node, "pivot").callback = refresh
|
|
setTimeout(refresh, 100);
|
|
}
|
|
if (node.__proto__.comfyClass == "ColorModEdges") {
|
|
var widget = addCanvasWidget(node)
|
|
var refresh = function(v) { drawCanvasCMEdges(node) }
|
|
getNamedWidget(node, "low").callback = refresh
|
|
getNamedWidget(node, "high").callback = refresh
|
|
getNamedWidget(node, "pivot").callback = refresh
|
|
setTimeout(refresh, 100);
|
|
}
|
|
}
|
|
})
|