mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

sketchpad fixes (#531)

Browse Source 
* ensure sketch images have a white background

* use icons for clear and undo on sketch

* clear canvas when value is set to null
This commit is contained in:
pngwn 2022-02-03 16:23:43 +00:00 committed by GitHub
parent d905be0589
commit 544e6574a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/static/img/undo-solid.svg Normal file
View File

@ -0,0 +1,2 @@
<svg aria-hidden="true" width="5.9403949mm"
height="5.9403949mm" focusable="false" data-prefix="fas" data-icon="undo" class="svg-inline--fa fa-undo fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 811 B

6
frontend/src/components/input/Image/Component.svelte
View File

@ -31,7 +31,11 @@
on:undo={() => sketch.undo()}
on:clear={() => sketch.clear()}
/>
<Sketch bind:this={sketch} on:change={({ detail }) => setValue(detail)} />
<Sketch
{value}
bind:this={sketch}
on:change={({ detail }) => setValue(detail)}
/>
{:else if value === null}
{#if source === "upload"}
<Upload

8
frontend/src/components/utils/ModifySketch.svelte
View File

@ -6,15 +6,15 @@
<div class="z-50 top-0 right-0 flex justify-end m-1 flex gap-1 absolute">
<button
class="bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-yellow-500 dark:bg-red-600 rounded shadow"
class="bg-opacity-30 hover:bg-opacity-100 transition p-1.5 bg-yellow-500 dark:bg-red-600 rounded shadow w-8 h-8"
on:click={() => dispatch("undo")}
>
undo
<img alt="undo sketch" src="/static/img/undo-solid.svg" />
</button>
<button
class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow"
class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow w-8 h-8"
on:click={() => dispatch("clear")}
>
clear
<img alt="clear sketch" src="static/img/clear.svg" />
</button>
</div>

13
frontend/src/components/utils/Sketch.svelte
View File

@ -5,7 +5,11 @@
const dispatch = createEventDispatcher();
let brush_radius = 30;
export let value;
let mounted;
let brush_radius = 50;
let brush_color = "#444";
let catenary_color = "#aaa";
let background_color = "#FFF";
@ -13,6 +17,8 @@
let canvas_width = 400;
let canvas_height = 400;
$: mounted && !value && clear();
function mid_point(p1, p2) {
return {
x: p1.x + (p2.x - p1.x) / 2,
@ -67,7 +73,7 @@
);
canvas_observer.observe(canvas_container);
loop();
mounted = true;
window.setTimeout(() => {
const initX = window.innerWidth / 2;
const initY = window.innerHeight / 2;
@ -84,6 +90,7 @@
});
onDestroy(() => {
mounted = false;
canvas_observer.unobserve(canvas_container);
});
@ -270,6 +277,8 @@
values_changed = true;
ctx.drawing.clearRect(0, 0, canvas.drawing.width, canvas.drawing.height);
ctx.temp.clearRect(0, 0, canvas.temp.width, canvas.temp.height);
ctx.drawing.fillStyle = "#FFFFFF";
ctx.drawing.fillRect(0, 0, canvas.drawing.width, canvas.drawing.height);
}
let loop = ({ once = false } = {}) => {

1
ui/packages/app/public/static/img/undo-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="undo" class="svg-inline--fa fa-undo fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 767 B

6
ui/packages/app/src/components/input/Image/Component.svelte
View File

@ -31,7 +31,11 @@
on:undo={() => sketch.undo()}
on:clear={() => sketch.clear()}
/>
<Sketch bind:this={sketch} on:change={({ detail }) => setValue(detail)} />
<Sketch
{value}
bind:this={sketch}
on:change={({ detail }) => setValue(detail)}
/>
{:else if value === null}
{#if source === "upload"}
<Upload

8
ui/packages/app/src/components/utils/ModifySketch.svelte
View File

@ -6,15 +6,15 @@
<div class="z-50 top-0 right-0 flex justify-end m-1 flex gap-1 absolute">
<button
class="bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-yellow-500 dark:bg-red-600 rounded shadow"
class="bg-opacity-30 hover:bg-opacity-100 transition p-1.5 bg-yellow-500 dark:bg-red-600 rounded shadow w-8 h-8"
on:click={() => dispatch("undo")}
>
undo
<img alt="undo sketch" src="/static/img/undo-solid.svg" />
</button>
<button
class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow"
class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow w-8 h-8"
on:click={() => dispatch("clear")}
>
clear
<img alt="clear sketch" src="static/img/clear.svg" />
</button>
</div>

13
ui/packages/app/src/components/utils/Sketch.svelte
View File

@ -5,7 +5,11 @@
const dispatch = createEventDispatcher();
let brush_radius = 30;
export let value;
let mounted;
let brush_radius = 50;
let brush_color = "#444";
let catenary_color = "#aaa";
let background_color = "#FFF";
@ -13,6 +17,8 @@
let canvas_width = 400;
let canvas_height = 400;
$: mounted && !value && clear();
function mid_point(p1, p2) {
return {
x: p1.x + (p2.x - p1.x) / 2,
@ -67,7 +73,7 @@
);
canvas_observer.observe(canvas_container);
loop();
mounted = true;
window.setTimeout(() => {
const initX = window.innerWidth / 2;
const initY = window.innerHeight / 2;
@ -84,6 +90,7 @@
});
onDestroy(() => {
mounted = false;
canvas_observer.unobserve(canvas_container);
});
@ -270,6 +277,8 @@
values_changed = true;
ctx.drawing.clearRect(0, 0, canvas.drawing.width, canvas.drawing.height);
ctx.temp.clearRect(0, 0, canvas.temp.width, canvas.temp.height);
ctx.drawing.fillStyle = "#FFFFFF";
ctx.drawing.fillRect(0, 0, canvas.drawing.width, canvas.drawing.height);
}
let loop = ({ once = false } = {}) => {