xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2025-12-09 21:04:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

PointEditor fixes

Browse Source
This commit is contained in:
kijai 2024-08-05 21:50:57 +03:00
parent 20aab31d83
commit 0bc25cfe55
1 changed files with 35 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
web/js/point_editor.js
View File

@ -262,17 +262,17 @@ class PointsEditor {
//widget callbacks //widget callbacks
this.widthWidget.callback = () => { this.widthWidget.callback = () => {
w = this.widthWidget.value; this.width = this.widthWidget.value;
if (w > 256) { if (this.width > 256) {
context.setSize([w + 45, context.size[1]]); context.setSize([this.width + 45, context.size[1]]);
} }
this.vis.width(w); this.vis.width(this.width);
this.updateData(); this.updateData();
} }
this.heightWidget.callback = () => { this.heightWidget.callback = () => {
h = this.heightWidget.value this.height = this.heightWidget.value
this.vis.height(h) this.vis.height(this.height)
context.setSize([context.size[0], h + 300]); context.setSize([context.size[0], this.height + 300]);
this.updateData(); this.updateData();
} }
this.pointsStoreWidget.callback = () => { this.pointsStoreWidget.callback = () => {
@ -285,8 +285,8 @@ class PointsEditor {
this.updateData(); this.updateData();
} }
var w = this.widthWidget.value; this.width = this.widthWidget.value;
var h = this.heightWidget.value; this.height = this.heightWidget.value;
var i = 3; var i = 3;
this.points = []; this.points = [];
this.neg_points = []; this.neg_points = [];
@ -302,8 +302,8 @@ class PointsEditor {
} else { } else {
this.points = [ this.points = [
{ {
x: w / 2, // Middle point horizontally centered x: this.width / 2, // Middle point horizontally centered
y: h / 2 // Middle point vertically centered y: this.height / 2 // Middle point vertically centered
} }
]; ];
this.neg_points = [ this.neg_points = [
@ -322,8 +322,8 @@ class PointsEditor {
//create main canvas panel //create main canvas panel
this.vis = new pv.Panel() this.vis = new pv.Panel()
.width(w) .width(this.width)
.height(h) .height(this.height)
.fillStyle("#222") .fillStyle("#222")
.strokeStyle("gray") .strokeStyle("gray")
.lineWidth(2) .lineWidth(2)
@ -376,7 +376,7 @@ class PointsEditor {
this.backgroundImage = this.vis.add(pv.Image).visible(false) this.backgroundImage = this.vis.add(pv.Image).visible(false)
//create bounding box //create bounding box
this.vis.add(pv.Area) this.bounding_box = this.vis.add(pv.Area)
.data(function () { .data(function () {
if (drawing || (self.bbox && self.bbox[0] && Object.keys(self.bbox[0]).length > 0)) { if (drawing || (self.bbox && self.bbox[0] && Object.keys(self.bbox[0]).length > 0)) {
return [self.bbox[0].startX, self.bbox[0].endX]; return [self.bbox[0].startX, self.bbox[0].endX];
@ -384,7 +384,7 @@ class PointsEditor {
return []; return [];
} }
}) })
.bottom(function () {return h - Math.max(self.bbox[0].startY, self.bbox[0].endY); }) .bottom(function () {return self.height - Math.max(self.bbox[0].startY, self.bbox[0].endY); })
.left(function (d) {return d; }) .left(function (d) {return d; })
.height(function () {return Math.abs(self.bbox[0].startY - self.bbox[0].endY);}) .height(function () {return Math.abs(self.bbox[0].startY - self.bbox[0].endY);})
.fillStyle("rgba(70, 130, 180, 0.5)") .fillStyle("rgba(70, 130, 180, 0.5)")
@ -404,20 +404,13 @@ class PointsEditor {
}) })
.left(d => d.x) .left(d => d.x)
.top(d => d.y) .top(d => d.y)
.radius(Math.log(Math.min(w, h)) * 1) .radius(Math.log(Math.min(self.width, self.height)) * 1)
.shape("square") .shape("square")
.cursor("move") .cursor("move")
.strokeStyle("steelblue") .strokeStyle("steelblue")
.lineWidth(2) .lineWidth(2)
.fillStyle(function () { return "rgba(100, 100, 100, 0.6)"; }) .fillStyle(function () { return "rgba(100, 100, 100, 0.6)"; })
.event("mousedown", pv.Behavior.drag()) .event("mousedown", pv.Behavior.drag())
.event("dragstart", function () {
i = this.index;
})
.event("mousedown", pv.Behavior.drag())
.event("dragstart", function () {
i = this.index;
})
.event("drag", function () { .event("drag", function () {
let adjustedX = this.mouse().x / app.canvas.ds.scale; // Adjust the new position by the inverse of the scale factor let adjustedX = this.mouse().x / app.canvas.ds.scale; // Adjust the new position by the inverse of the scale factor
let adjustedY = this.mouse().y / app.canvas.ds.scale; let adjustedY = this.mouse().y / app.canvas.ds.scale;
@ -438,7 +431,7 @@ class PointsEditor {
.data(() => this.points) .data(() => this.points)
.left(d => d.x) .left(d => d.x)
.top(d => d.y) .top(d => d.y)
.radius(Math.log(Math.min(w, h)) * 4) .radius(Math.log(Math.min(self.width, self.height)) * 4)
.shape("circle") .shape("circle")
.cursor("move") .cursor("move")
.strokeStyle(function () { return i == this.index ? "#07f907" : "#139613"; }) .strokeStyle(function () { return i == this.index ? "#07f907" : "#139613"; })
@ -472,8 +465,8 @@ class PointsEditor {
.anchor("center") .anchor("center")
.add(pv.Label) .add(pv.Label)
.left(d => d.x < w / 2 ? d.x + 30 : d.x - 35) // Shift label to right if on left half, otherwise shift to left .left(d => d.x < this.width / 2 ? d.x + 30 : d.x - 35) // Shift label to right if on left half, otherwise shift to left
.top(d => d.y < h / 2 ? d.y + 25 : d.y - 25) // Shift label down if on top half, otherwise shift up .top(d => d.y < this.height / 2 ? d.y + 25 : d.y - 25) // Shift label down if on top half, otherwise shift up
.font(25 + "px sans-serif") .font(25 + "px sans-serif")
.text(d => {return this.points.indexOf(d); }) .text(d => {return this.points.indexOf(d); })
.textStyle("#139613") .textStyle("#139613")
@ -492,7 +485,7 @@ class PointsEditor {
.data(() => this.neg_points) .data(() => this.neg_points)
.left(d => d.x) .left(d => d.x)
.top(d => d.y) .top(d => d.y)
.radius(Math.log(Math.min(w, h)) * 4) .radius(Math.log(Math.min(self.width, self.height)) * 4)
.shape("circle") .shape("circle")
.cursor("move") .cursor("move")
.strokeStyle(function () { return i == this.index ? "#f91111" : "#891616"; }) .strokeStyle(function () { return i == this.index ? "#f91111" : "#891616"; })
@ -525,8 +518,8 @@ class PointsEditor {
}) })
.anchor("center") .anchor("center")
.add(pv.Label) .add(pv.Label)
.left(d => d.x < w / 2 ? d.x + 30 : d.x - 35) // Shift label to right if on left half, otherwise shift to left .left(d => d.x < this.width / 2 ? d.x + 30 : d.x - 35) // Shift label to right if on left half, otherwise shift to left
.top(d => d.y < h / 2 ? d.y + 25 : d.y - 25) // Shift label down if on top half, otherwise shift up .top(d => d.y < this.height / 2 ? d.y + 25 : d.y - 25) // Shift label down if on top half, otherwise shift up
.font(25 + "px sans-serif") .font(25 + "px sans-serif")
.text(d => {return this.neg_points.indexOf(d); }) .text(d => {return this.neg_points.indexOf(d); })
.textStyle("red") .textStyle("red")
@ -549,10 +542,10 @@ class PointsEditor {
svgElement.style['position'] = "relative" svgElement.style['position'] = "relative"
this.node.pointsEditor.element.appendChild(svgElement); this.node.pointsEditor.element.appendChild(svgElement);
if (w > 256) { if (this.width > 256) {
this.node.setSize([w + 45, this.node.size[1]]); this.node.setSize([this.width + 45, this.node.size[1]]);
} }
this.node.setSize([this.node.size[0], h + 300]); this.node.setSize([this.node.size[0], this.height + 300]);
this.updateData(); this.updateData();
this.refreshBackgroundImage(); this.refreshBackgroundImage();
@ -585,13 +578,17 @@ class PointsEditor {
this.widthWidget.value = img.width; this.widthWidget.value = img.width;
this.heightWidget.value = img.height; this.heightWidget.value = img.height;
if (img.width != this.vis.width() || img.height != this.vis.height()) {
if (img.width > 256) { if (img.width > 256) {
this.node.setSize([img.width + 45, this.node.size[1]]); this.node.setSize([img.width + 45, this.node.size[1]]);
} }
this.node.setSize([this.node.size[0], img.height + 300]); this.node.setSize([this.node.size[0], img.height + 300]);
this.vis.width(img.width); this.vis.width(img.width);
this.vis.height(img.height); this.vis.height(img.height);
this.height = img.height;
this.width = img.width;
this.updateData(); this.updateData();
}
this.backgroundImage.url(file ? URL.createObjectURL(file) : `data:${this.node.properties.imgData.type};base64,${base64String}`).visible(true).root.render(); this.backgroundImage.url(file ? URL.createObjectURL(file) : `data:${this.node.properties.imgData.type};base64,${base64String}`).visible(true).root.render();
}; };