Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add XY offset with presets to Bookmark Node #252

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add XY offset with presets to Bookmark Node #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69a6604
Add XY offset for bookmark node
Alexyoe Dec 19, 2024
b5f7c25
Add preset position options to bookmark node
Alexyoe Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 80 additions & 13 deletions src_web/comfyui/bookmark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export class Bookmark extends RgthreeBaseVirtualNode {
// counteract it's computeSize calculation by offsetting the start.
static slot_start_y = -20;

// LiteGraph adds mroe spacing than we want when calculating a nodes' `_collapsed_width`, so we'll
// LiteGraph adds more spacing than we want when calculating a nodes' `_collapsed_width`, so we'll
// override it with a setter and re-set it measured exactly as we want.
___collapsed_width: number = 0;

Expand All @@ -50,23 +50,60 @@ export class Bookmark extends RgthreeBaseVirtualNode {
constructor(title = Bookmark.title) {
super(title);
const nextShortcutChar = getNextShortcut();

// Shortcut key widget
this.addWidget(
"text",
"shortcut_key",
nextShortcutChar,
(value: string, ...args) => {
value = value.trim()[0] || "1";
},
{
y: 8,
},
{y: 8},
);

// Zoom widget
this.addWidget<INumberWidget>("number", "zoom", 1, (value: number) => {}, {
y: 8 + LiteGraph.NODE_WIDGET_HEIGHT + 4,
max: 2,
min: 0.5,
precision: 2,
});

// Preset dropdown widget
const presets = [
"top left",
"top center",
"top right",
"center",
"bottom left",
"bottom center",
"bottom right",
];
this.addWidget(
"combo",
"Preset",
"center", // Default value
(value: string) => {
},
{
y: 8 + (LiteGraph.NODE_WIDGET_HEIGHT + 4) * 2,
values: presets,
},
);

// X-Offset widget
this.addWidget<INumberWidget>("number", "X-Offset", 16, (value: number) => {}, {
y: 8 + (LiteGraph.NODE_WIDGET_HEIGHT + 4) * 3,
precision: 0,
});

// Y-Offset widget
this.addWidget<INumberWidget>("number", "Y-Offset", 40, (value: number) => {}, {
y: 8 + (LiteGraph.NODE_WIDGET_HEIGHT + 4) * 4,
precision: 0,
});

this.keypressBound = this.onKeypress.bind(this);
this.title = "🔖";
this.onConstructed();
Expand All @@ -90,14 +127,14 @@ export class Bookmark extends RgthreeBaseVirtualNode {
KEY_EVENT_SERVICE.removeEventListener("keydown", this.keypressBound as EventListener);
}

onKeypress(event: CustomEvent<{ originalEvent: KeyboardEvent }>) {
onKeypress(event: CustomEvent<{originalEvent: KeyboardEvent}>) {
const originalEvent = event.detail.originalEvent;
const target = (originalEvent.target as HTMLElement)!;
if (getClosestOrSelf(target, 'input,textarea,[contenteditable="true"]')) {
return;
}

// Only the shortcut keys are held down, otionally including "shift".
// Only the shortcut keys are held down, optionally including "shift".
if (KEY_EVENT_SERVICE.areOnlyKeysDown(this.widgets[0]!.value, true)) {
this.canvasToBookmark();
originalEvent.preventDefault();
Expand Down Expand Up @@ -125,15 +162,45 @@ export class Bookmark extends RgthreeBaseVirtualNode {

canvasToBookmark() {
const canvas = app.canvas as LGraphCanvas;
// ComfyUI seemed to break us again, but couldn't repro. No reason to not check, I guess.
// https://github.com/rgthree/rgthree-comfy/issues/71
if (canvas?.ds?.offset) {
canvas.ds.offset[0] = -this.pos[0] + 16;
canvas.ds.offset[1] = -this.pos[1] + 40;

if (!canvas?.ds?.offset || canvas.ds.scale == null) {
console.error("Canvas offset or scale is undefined.");
return;
}
if (canvas?.ds?.scale != null) {
canvas.ds.scale = Number(this.widgets[1]!.value || 1);

// Preset mapping
const presets: Record<string, {x: number; y: number}> = {
"top left": {x: 0, y: 0},
"top center": {x: canvas.canvas.width / 2, y: 0},
"top right": {x: canvas.canvas.width, y: 0},
"center": {x: canvas.canvas.width / 2, y: canvas.canvas.height / 2},
"bottom left": {x: 0, y: canvas.canvas.height},
"bottom center": {x: canvas.canvas.width / 2, y: canvas.canvas.height},
"bottom right": {x: canvas.canvas.width, y: canvas.canvas.height},
};

// Get the preset value from a widget or input
const presetName = String(this.widgets[2]?.value || "center"); // Default to "center"

// Find the corresponding preset
const preset = presets[presetName];
if (!preset) {
console.error(`Invalid preset: ${presetName}`);
return;
}

// Get the X and Y offset values from the widgets
const xOffset = Number(this.widgets[3]?.value || 0); // X-Offset widget
const yOffset = Number(this.widgets[4]?.value || 0); // Y-Offset widget

// Apply the offsets to the preset positions
canvas.ds.offset[0] = -this.pos[0] + preset.x + xOffset;
canvas.ds.offset[1] = -this.pos[1] + preset.y + yOffset;

// Apply scale
canvas.ds.scale = Number(this.widgets[1]?.value || 1);

// Mark the canvas as dirty
canvas.setDirty(true, true);
}
}
Expand Down
55 changes: 46 additions & 9 deletions web/comfyui/bookmark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,35 @@ export class Bookmark extends RgthreeBaseVirtualNode {
const nextShortcutChar = getNextShortcut();
this.addWidget("text", "shortcut_key", nextShortcutChar, (value, ...args) => {
value = value.trim()[0] || "1";
}, {
y: 8,
});
}, { y: 8 });
this.addWidget("number", "zoom", 1, (value) => { }, {
y: 8 + LiteGraph.NODE_WIDGET_HEIGHT + 4,
max: 2,
min: 0.5,
precision: 2,
});
const presets = [
"top left",
"top center",
"top right",
"center",
"bottom left",
"bottom center",
"bottom right",
];
this.addWidget("combo", "Preset", "center", (value) => {
}, {
y: 8 + (LiteGraph.NODE_WIDGET_HEIGHT + 4) * 2,
values: presets,
});
this.addWidget("number", "X-Offset", 16, (value) => { }, {
y: 8 + (LiteGraph.NODE_WIDGET_HEIGHT + 4) * 3,
precision: 0,
});
this.addWidget("number", "Y-Offset", 40, (value) => { }, {
y: 8 + (LiteGraph.NODE_WIDGET_HEIGHT + 4) * 4,
precision: 0,
});
this.keypressBound = this.onKeypress.bind(this);
this.title = "🔖";
this.onConstructed();
Expand Down Expand Up @@ -72,15 +92,32 @@ export class Bookmark extends RgthreeBaseVirtualNode {
}
}
canvasToBookmark() {
var _a, _b;
var _a, _b, _c, _d, _e;
const canvas = app.canvas;
if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _a === void 0 ? void 0 : _a.offset) {
canvas.ds.offset[0] = -this.pos[0] + 16;
canvas.ds.offset[1] = -this.pos[1] + 40;
if (!((_a = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _a === void 0 ? void 0 : _a.offset) || canvas.ds.scale == null) {
console.error("Canvas offset or scale is undefined.");
return;
}
if (((_b = canvas === null || canvas === void 0 ? void 0 : canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) != null) {
canvas.ds.scale = Number(this.widgets[1].value || 1);
const presets = {
"top left": { x: 0, y: 0 },
"top center": { x: canvas.canvas.width / 2, y: 0 },
"top right": { x: canvas.canvas.width, y: 0 },
"center": { x: canvas.canvas.width / 2, y: canvas.canvas.height / 2 },
"bottom left": { x: 0, y: canvas.canvas.height },
"bottom center": { x: canvas.canvas.width / 2, y: canvas.canvas.height },
"bottom right": { x: canvas.canvas.width, y: canvas.canvas.height },
};
const presetName = String(((_b = this.widgets[2]) === null || _b === void 0 ? void 0 : _b.value) || "center");
const preset = presets[presetName];
if (!preset) {
console.error(`Invalid preset: ${presetName}`);
return;
}
const xOffset = Number(((_c = this.widgets[3]) === null || _c === void 0 ? void 0 : _c.value) || 0);
const yOffset = Number(((_d = this.widgets[4]) === null || _d === void 0 ? void 0 : _d.value) || 0);
canvas.ds.offset[0] = -this.pos[0] + preset.x + xOffset;
canvas.ds.offset[1] = -this.pos[1] + preset.y + yOffset;
canvas.ds.scale = Number(((_e = this.widgets[1]) === null || _e === void 0 ? void 0 : _e.value) || 1);
canvas.setDirty(true, true);
}
}
Expand Down