xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2026-05-20 22:07:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update spline_editor.js

Browse Source
This commit is contained in:
Kijai 2024-04-17 19:21:32 +03:00
parent 47c23d5a19
commit 6f256423af
1 changed files with 55 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
web/js/spline_editor.js
View File

@ -60,8 +60,6 @@ export const loadScript = (
border-style: solid; border-style: solid;
border-width: medium; border-width: medium;
border-color: var(--border-color); border-color: var(--border-color);
height: 544px;
width: 544px;
} }
` `
document.head.appendChild(styleTag) document.head.appendChild(styleTag)
@ -99,14 +97,23 @@ app.registerExtension({
async beforeRegisterNodeDef(nodeType, nodeData) { async beforeRegisterNodeDef(nodeType, nodeData) {
if (nodeData?.name == 'SplineEditor') { if (nodeData?.name == 'SplineEditor') {
chainCallback(nodeType.prototype, "onNodeCreated", function () { chainCallback(nodeType.prototype, "onNodeCreated", function () {
var splineEditor = document.createElement('div'); var element = document.createElement("div");
splineEditor.classList.add('spline-editor');
console.log(this) console.log(this)
this.addDOMWidget(nodeData.name, "SplineEditorWidget", splineEditor, { var splineEditor = this.addDOMWidget(nodeData.name, "SplineEditorWidget", element, {
serialize: false, serialize: false,
hideOnZoom: false, hideOnZoom: false,
}); });
splineEditor.parentEl = document.createElement("div");
splineEditor.parentEl.className = "spline-editor";
splineEditor.parentEl.style['width'] = "100%"
splineEditor.parentEl.style['height'] = "544px"
element.appendChild(splineEditor.parentEl);
splineEditor.canvasEl = document.createElement("div");
splineEditor.canvasEl.style['width'] = "512px"
splineEditor.canvasEl.style['height'] = "512px"
addElement(nodeData, nodeType, this) addElement(nodeData, nodeType, this)
}); });
} }
@ -119,7 +126,9 @@ export const addElement = function(nodeData, nodeType, context) {
const iconSize = 24 const iconSize = 24
const iconMargin = 4 const iconMargin = 4
var splineEditor = context.widgets.find(w => w.name === "SplineEditor"); var splineEditor = context.widgets.find(w => w.name === "SplineEditor");
console.log(splineEditor); console.log(splineEditor);
let vis = null let vis = null
var show_doc = true var show_doc = true
@ -133,6 +142,7 @@ export const addElement = function(nodeData, nodeType, context) {
closeButton.style.padding = '5px'; closeButton.style.padding = '5px';
closeButton.style.color = 'red'; closeButton.style.color = 'red';
closeButton.style.fontSize = '12px'; closeButton.style.fontSize = '12px';
closeButton.style.zIndex = '7';
closeButton.addEventListener('mousedown', (e) => { closeButton.addEventListener('mousedown', (e) => {
e.stopPropagation(); e.stopPropagation();
show_doc = !show_doc show_doc = !show_doc
@ -142,7 +152,7 @@ export const addElement = function(nodeData, nodeType, context) {
splineEditor.element.appendChild(closeButton) splineEditor.element.appendChild(closeButton)
const drawFg = nodeType.prototype.onDrawForeground
nodeType.prototype.onNodeCreated = function () { nodeType.prototype.onNodeCreated = function () {
console.log("Node created") console.log("Node created")
var coordWidget = context.widgets.find(w => w.name === "coordinates"); var coordWidget = context.widgets.find(w => w.name === "coordinates");
@ -156,6 +166,7 @@ export const addElement = function(nodeData, nodeType, context) {
splineEditor.element = null splineEditor.element = null
} }
} }
const drawFg = nodeType.prototype.onDrawForeground
nodeType.prototype.onDrawForeground = function (ctx) { nodeType.prototype.onDrawForeground = function (ctx) {
console.log("Drawing foreground") console.log("Drawing foreground")
const r = drawFg ? drawFg.apply(this, arguments) : undefined const r = drawFg ? drawFg.apply(this, arguments) : undefined
@ -163,7 +174,7 @@ export const addElement = function(nodeData, nodeType, context) {
const x = context.size[0] - iconSize - iconMargin const x = context.size[0] - iconSize - iconMargin
if (show_doc && splineEditor === null) { //if (show_doc && splineEditor === null) {
console.log("Drawing spline editor") console.log("Drawing spline editor")
var w = 512 var w = 512
@ -260,51 +271,52 @@ export const addElement = function(nodeData, nodeType, context) {
vis.render(); vis.render();
var svgElement = vis.canvas(); var svgElement = vis.canvas();
console.log("Spline editor rendered", svgElement)
splineEditor.element.appendChild(svgElement); splineEditor.element.appendChild(svgElement);
//document.body.appendChild(splineEditor) //document.body.appendChild(splineEditor)
var pathElements = svgElement.getElementsByTagName('path'); // Get all path elements var pathElements = svgElement.getElementsByTagName('path'); // Get all path elements
} //}
// close the popup // close the popup
else if (!show_doc && splineEditor !== null) { // else if (!show_doc && splineEditor !== null) {
splineEditor.element.parentNode.removeChild(splineEditor.element) // splineEditor.element.parentNode.removeChild(splineEditor.element)
splineEditor.element = null // splineEditor.element = null
} // }
if (show_doc && splineEditor.element !== null && vis !== null) { // if (show_doc && splineEditor.element !== null && vis !== null) {
const rect = ctx.canvas.getBoundingClientRect() // const rect = ctx.canvas.getBoundingClientRect()
const scaleX = rect.width / ctx.canvas.width // const scaleX = rect.width / ctx.canvas.width
const scaleY = rect.height / ctx.canvas.height // const scaleY = rect.height / ctx.canvas.height
const transform = new DOMMatrix() // const transform = new DOMMatrix()
.scaleSelf(scaleX, scaleY) // .scaleSelf(scaleX, scaleY)
.translateSelf(this.size[0] * scaleX, 0) // .translateSelf(this.size[0] * scaleX, 0)
.multiplySelf(ctx.getTransform()) // .multiplySelf(ctx.getTransform())
.translateSelf(100, -32) // .translateSelf(100, -32)
const scale = new DOMMatrix() // const scale = new DOMMatrix()
.scaleSelf(transform.a, transform.d); // .scaleSelf(transform.a, transform.d);
const styleObject = { // const styleObject = {
transformOrigin: '0 0', // transformOrigin: '0 0',
transform: scale, // transform: scale,
left: `${transform.a + transform.e}px`, // left: `${transform.a + transform.e}px`,
top: `${transform.d + transform.f}px`, // top: `${transform.d + transform.f}px`,
}; // };
Object.assign(splineEditor.element.style, styleObject); // Object.assign(splineEditor.element.style, styleObject);
} // }
ctx.save() // ctx.save()
ctx.translate(x - 2, iconSize - 45) // ctx.translate(x - 2, iconSize - 45)
ctx.scale(iconSize / 32, iconSize / 32) // ctx.scale(iconSize / 32, iconSize / 32)
ctx.strokeStyle = 'rgba(255,255,255,0.3)' // ctx.strokeStyle = 'rgba(255,255,255,0.3)'
ctx.lineCap = 'round' // ctx.lineCap = 'round'
ctx.lineJoin = 'round' // ctx.lineJoin = 'round'
ctx.lineWidth = 2.4 // ctx.lineWidth = 2.4
ctx.font = 'bold 36px monospace' // ctx.font = 'bold 36px monospace'
ctx.fillStyle = 'orange'; // ctx.fillStyle = 'orange';
ctx.fillText('📈', 0, 24) // ctx.fillText('📈', 0, 24)
ctx.restore() // ctx.restore()
return r // return r
} }
// // handle clicking of the icon // // handle clicking of the icon
// const mouseDown = nodeType.prototype.onMouseDown // const mouseDown = nodeType.prototype.onMouseDown