add tool identifier to reticle (it was too similar)

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-12-06 20:00:50 -03:00
parent 2c82c0468f
commit e16800e5cf
2 changed files with 60 additions and 45 deletions

View file

@ -713,7 +713,7 @@ const dream_img2img_callback = (evn, state) => {
/**
* Dream and img2img tools
*/
const _reticle_draw = (evn, state, textStyle = "#FFF5") => {
const _reticle_draw = (evn, state, tool, textStyle = "#FFF5") => {
const bb = getBoundingBox(
evn.x,
evn.y,
@ -734,36 +734,50 @@ const _reticle_draw = (evn, state, textStyle = "#FFF5") => {
uiCtx.strokeStyle = "#FFF";
uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h); //origin is middle of the frame
// Draw width and height
uiCtx.textAlign = "center";
uiCtx.fillStyle = textStyle;
uiCtx.font = `bold 20px Open Sans`;
uiCtx.translate(bbvp.x + bbvp.w / 2, bbvp.y + bbvp.h / 2);
const xshrink = Math.min(
1,
(bbvp.w - 30) / uiCtx.measureText(`${state.cursorSize}px`).width
);
const yshrink = Math.min(
1,
(bbvp.h - 30) / uiCtx.measureText(`${state.cursorSize}px`).width
);
uiCtx.font = `bold ${20 * xshrink}px Open Sans`;
uiCtx.fillText(
`${state.cursorSize}px`,
0,
bbvp.h / 2 - 10 * xshrink,
state.cursorSize
);
uiCtx.rotate(-Math.PI / 2);
uiCtx.font = `bold ${20 * yshrink}px Open Sans`;
uiCtx.fillText(
`${state.cursorSize}px`,
0,
bbvp.h / 2 - 10 * yshrink,
state.cursorSize
);
uiCtx.restore();
// Draw Tool Name
{
const xshrink = Math.min(1, (bbvp.w - 20) / uiCtx.measureText(tool).width);
uiCtx.font = `bold ${20 * xshrink}px Open Sans`;
uiCtx.textAlign = "left";
uiCtx.fillStyle = "#FFF5";
uiCtx.fillText(tool, bbvp.x + 10, bbvp.y + 10 + 20 * xshrink);
}
// Draw width and height
{
uiCtx.textAlign = "center";
uiCtx.fillStyle = textStyle;
uiCtx.translate(bbvp.x + bbvp.w / 2, bbvp.y + bbvp.h / 2);
const xshrink = Math.min(
1,
(bbvp.w - 30) / uiCtx.measureText(`${state.cursorSize}px`).width
);
const yshrink = Math.min(
1,
(bbvp.h - 30) / uiCtx.measureText(`${state.cursorSize}px`).width
);
uiCtx.font = `bold ${20 * xshrink}px Open Sans`;
uiCtx.fillText(
`${state.cursorSize}px`,
0,
bbvp.h / 2 - 10 * xshrink,
state.cursorSize
);
uiCtx.rotate(-Math.PI / 2);
uiCtx.font = `bold ${20 * yshrink}px Open Sans`;
uiCtx.fillText(
`${state.cursorSize}px`,
0,
bbvp.h / 2 - 10 * yshrink,
state.cursorSize
);
uiCtx.restore();
}
return () => {
uiCtx.save();
@ -798,9 +812,10 @@ const dreamTool = () =>
(state, opt) => {
// Draw new cursor immediately
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
state.mousemovecb({
state.lastMouseMove = {
...mouse.coords.world.pos,
});
};
state.redraw();
// Start Listeners
mouse.listen.world.onmousemove.on(state.mousemovecb);
@ -838,12 +853,12 @@ const dreamTool = () =>
state.erasePrevReticle = () =>
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
let lastMouseMove = {
state.lastMouseMove = {
...mouse.coords.world.pos,
};
state.mousemovecb = (evn) => {
lastMouseMove = evn;
state.lastMouseMove = evn;
state.erasePrevReticle();
const style =
state.cursorSize > stableDiffusionData.width
@ -851,11 +866,11 @@ const dreamTool = () =>
: state.cursorSize < stableDiffusionData.width
? "#BFB5"
: "#FFF5";
state.erasePrevReticle = _reticle_draw(evn, state, style);
state.erasePrevReticle = _reticle_draw(evn, state, "Dream", style);
};
state.redraw = () => {
state.mousemovecb(lastMouseMove);
state.mousemovecb(state.lastMouseMove);
};
state.wheelcb = (evn) => {
@ -934,10 +949,10 @@ const img2imgTool = () =>
"Img2Img",
(state, opt) => {
// Draw new cursor immediately
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
state.mousemovecb({
state.lastMouseMove = {
...mouse.coords.world.pos,
});
};
state.redraw();
// Start Listeners
mouse.listen.world.onmousemove.on(state.mousemovecb);
@ -947,8 +962,6 @@ const img2imgTool = () =>
// Display Mask
setMask(state.invertMask ? "hold" : "clear");
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
},
(state, opt) => {
// Clear Listeners
@ -980,13 +993,14 @@ const img2imgTool = () =>
state.erasePrevReticle = () =>
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
let lastMouseMove = {
state.lastMouseMove = {
...mouse.coords.world.pos,
};
state.mousemovecb = (evn) => {
lastMouseMove = evn;
state.lastMouseMove = evn;
state.erasePrevReticle();
state.erasePrevReticle = _reticle_draw(evn, state);
state.erasePrevReticle = _reticle_draw(evn, state, "Img2Img");
const bb = getBoundingBox(
evn.x,
evn.y,
@ -1088,7 +1102,7 @@ const img2imgTool = () =>
};
state.redraw = () => {
state.mousemovecb(lastMouseMove);
state.mousemovecb(state.lastMouseMove);
};
state.wheelcb = (evn) => {

View file

@ -42,11 +42,12 @@ const interrogateTool = () =>
state.mousemovecb = (evn) => {
state.erasePrevReticle();
state.erasePrevReticle = _reticle_draw(evn, state);
state.erasePrevReticle = _reticle_draw(evn, state, "Interrogate");
};
state.wheelcb = (evn) => {
_interrogate_onwheel(evn, state);
};
state.interrogatecb = (evn) => {
interrogate_callback(evn, state);
};