scribble width

This commit is contained in:
Haoming 2025-10-09 11:37:38 +08:00
parent e500eec754
commit c1f340fbd2
4 changed files with 14 additions and 17 deletions

View File

@ -11,11 +11,7 @@
height: calc(100% - 6px);
position: relative;
overflow: hidden;
background-color: #202020;
background-size: 20px 20px;
background-position:
0 0,
10px 10px;
background-color: #808080;
}
.forge-image-container {

View File

@ -41,6 +41,7 @@ class ForgeCanvas {
scribbleColorFixed = false,
scribbleWidth = 20,
scribbleWidthFixed = false,
scribbleWidthConsistent = false,
scribbleAlpha = 100,
scribbleAlphaFixed = false,
scribbleSoftness = 0,
@ -71,6 +72,7 @@ class ForgeCanvas {
this.scribbleColorFixed = scribbleColorFixed;
this.scribbleWidth = scribbleWidth;
this.scribbleWidthFixed = scribbleWidthFixed;
this.scribbleWidthConsistent = scribbleWidthConsistent;
this.scribbleAlpha = scribbleAlpha;
this.scribbleAlphaFixed = scribbleAlphaFixed;
this.scribbleSoftness = scribbleSoftness;
@ -183,7 +185,7 @@ class ForgeCanvas {
}
function resetScribble(e, rect) {
const indicatorSize = self.scribbleWidth * self.imgScale * 4;
const indicatorSize = self.scribbleWidth * (self.scribbleWidthConsistent ? 1.0 : self.imgScale) * 4;
scribbleIndicator.style.width = `${indicatorSize}px`;
scribbleIndicator.style.height = `${indicatorSize}px`;
scribbleIndicator.style.left = `${e.clientX - rect.left - indicatorSize / 2}px`;
@ -235,7 +237,7 @@ class ForgeCanvas {
scribbleWidth.addEventListener("input", (e) => {
self.scribbleWidth = e.target.value;
scribbleWidthLabel.textContent = `Brush Width (${self.scribbleWidth})`;
const indicatorSize = self.scribbleWidth * self.imgScale * 4;
const indicatorSize = self.scribbleWidth * (self.scribbleWidthConsistent ? 1.0 : self.imgScale) * 4;
scribbleIndicator.style.width = `${indicatorSize}px`;
scribbleIndicator.style.height = `${indicatorSize}px`;
});
@ -370,11 +372,6 @@ class ForgeCanvas {
return false;
});
container.addEventListener("pointerover", () => {
toolbar.style.opacity = "1";
if (!self.img && !self.no_upload) container.style.cursor = "pointer";
});
container.addEventListener("dragleave", () => {
toolbar.style.opacity = "0";
imageContainer.style.cursor = "";
@ -437,10 +434,13 @@ class ForgeCanvas {
container.addEventListener("pointerenter", () => {
self.pointerInsideContainer = true;
toolbar.style.opacity = "1";
if (!self.img && !self.no_upload) container.style.cursor = "pointer";
});
container.addEventListener("pointerleave", () => {
self.pointerInsideContainer = false;
toolbar.style.opacity = "0";
});
document.addEventListener("paste", (e) => {
@ -522,7 +522,7 @@ class ForgeCanvas {
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = this.scribbleWidth * 4;
ctx.lineWidth = this.scribbleWidth / (this.scribbleWidthConsistent ? this.imgScale : 1.0) * 4;
if (this.contrast_scribbles) {
ctx.strokeStyle = this.contrast_pattern;

View File

@ -135,4 +135,4 @@ class ForgeCanvas:
self.block = gr.HTML(canvas_html_uuid, visible=visible, elem_id=elem_id, elem_classes=elem_classes)
self.foreground = LogicalImage(visible=DEBUG_MODE, label="foreground", numpy=numpy, elem_id=self.uuid, elem_classes=["logical_image_foreground"])
self.background = LogicalImage(visible=DEBUG_MODE, label="background", numpy=numpy, value=initial_image, elem_id=self.uuid, elem_classes=["logical_image_background"])
Context.root_block.load(None, js=f'async ()=>{{new ForgeCanvas("{self.uuid}", {no_upload}, {no_scribbles}, {contrast_scribbles}, {height}, ' f"'{scribble_color}', {scribble_color_fixed}, {scribble_width}, {scribble_width_fixed}, " f"{scribble_alpha}, {scribble_alpha_fixed}, {scribble_softness}, {scribble_softness_fixed});}}")
Context.root_block.load(None, js=f'async ()=>{{new ForgeCanvas("{self.uuid}", {no_upload}, {no_scribbles}, {contrast_scribbles}, {height}, ' f"'{scribble_color}', {scribble_color_fixed}, {scribble_width}, {scribble_width_fixed}, {opts.forge_canvas_consistent_brush}, " f"{scribble_alpha}, {scribble_alpha_fixed}, {scribble_softness}, {scribble_softness_fixed});}}")

View File

@ -14,10 +14,11 @@ def register(options_templates, options_section, OptionInfo):
)
options_templates.update(
options_section(
("ui_alternatives", "UI Alternatives", "ui"),
("ui_forgecanvas", "Forge Canvas", "ui"),
{
"forge_canvas_plain": OptionInfo(False, "ForgeCanvas: use plain background").needs_reload_ui(),
"forge_canvas_toolbar_always": OptionInfo(False, "ForgeCanvas: toolbar always visible").needs_reload_ui(),
"forge_canvas_plain": OptionInfo(False, "Plain Background").info("disabled: checkerboard pattern ; enabled: solid grey").needs_reload_ui(),
"forge_canvas_toolbar_always": OptionInfo(False, "Always Visible Toolbar").info("disabled: toolbar only appears when hovering the canvas").needs_reload_ui(),
"forge_canvas_consistent_brush": OptionInfo(False, "Fixed Brush Size").info("disabled: the brush size is <b>pixel-space</b>, the brush stays small when zoomed out ; enabled: the brush size is <b>canvas-space</b>, the brush stays big when zoomed in").needs_reload_ui(),
},
)
)