sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

selection now uses ui canvas

Browse source 
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-12-06 12:25:06 -03:00
parent b4fddffb6d
commit 207921978b
3 changed files with 76 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
js/initalize/layers.populate.js
View file

@ -153,6 +153,7 @@ viewport.transform(imageCollection.element);
mouse.listen.window.onwheel.on((evn) => {
if (evn.evn.ctrlKey) {
evn.evn.preventDefault();
const pcx = viewport.cx;
const pcy = viewport.cy;
if (evn.delta < 0) {
@ -166,6 +167,8 @@ mouse.listen.window.onwheel.on((evn) => {
viewport.transform(imageCollection.element);
toolbar.currentTool.redraw();
if (debug) {
debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
debugCtx.fillStyle = "#F0F";

15
js/lib/toolbar.js
View file

@ -8,6 +8,10 @@ const toolbar = {
_toolbar_lock_indicator: document.getElementById("toolbar-lock-indicator"),
tools: [],
_current_tool: null,
get currentTool() {
return this._current_tool;
},
lock() {
toolbar._locked = true;
@ -88,6 +92,12 @@ const toolbar = {
_element: null,
state: {},
options,
/**
* If the tool has a redraw() function in its state, then run it
*/
redraw: () => {
tool.state.redraw && tool.state.redraw();
},
enable: (opt = null) => {
if (toolbar._locked) return;
@ -100,12 +110,15 @@ const toolbar = {
tool._element && tool._element.classList.add("using");
tool.enabled = true;
this._current_tool = tool;
enable(tool.state, opt);
},
disable: (opt = null) => {
tool._element && tool._element.classList.remove("using");
disable(tool.state, opt);
this._current_tool = null;
tool.enabled = false;
disable(tool.state, opt);
},
};

91
js/ui/tool/select.js
View file

@ -46,6 +46,9 @@ const selectTransformTool = () =>
state.reset();
// Resets cursor
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
// Clears overlay
imageCollection.inputElement.style.cursor = "auto";
},
{
@ -76,7 +79,7 @@ const selectTransformTool = () =>
state.lastMouseTarget = null;
state.lastMouseMove = null;
const redraw = () => {
state.redraw = () => {
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
state.movecb(state.lastMouseMove);
};
@ -93,7 +96,7 @@ const selectTransformTool = () =>
if (state.dragging) state.dragging = null;
else state.selected = null;
redraw();
state.redraw();
};
// Selection bounding box object. Has some witchery to deal with handles.
@ -188,6 +191,7 @@ const selectTransformTool = () =>
// Mouse move handler. As always, also renders cursor
state.movecb = (evn) => {
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
imageCollection.inputElement.style.cursor = "auto";
state.lastMouseTarget = evn.target;
state.lastMouseMove = evn;
@ -198,6 +202,10 @@ const selectTransformTool = () =>
y += snap(evn.y, 0, 64);
}
const vpc = viewport.canvasToView(x, y);
uiCtx.save();
// Update scale
if (state.scaling) {
state.scaling.scaleTo(x, y, state.keepAspectRatio);
@ -212,17 +220,23 @@ const selectTransformTool = () =>
// Draw dragging box
if (state.dragging) {
ovCtx.setLineDash([2, 2]);
ovCtx.lineWidth = 1;
ovCtx.strokeStyle = "#FFF";
uiCtx.setLineDash([2, 2]);
uiCtx.lineWidth = 1;
uiCtx.strokeStyle = "#FFF";
const ix = state.dragging.ix;
const iy = state.dragging.iy;
const bb = selectionBB(ix, iy, x, y);
ovCtx.strokeRect(bb.x, bb.y, bb.w, bb.h);
ovCtx.setLineDash([]);
const bbvp = {
...viewport.canvasToView(bb.x, bb.y),
w: viewport.zoom * bb.w,
h: viewport.zoom * bb.h,
};
uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h);
uiCtx.setLineDash([]);
}
if (state.selected) {
@ -236,6 +250,12 @@ const selectTransformTool = () =>
h: state.selected.h,
};
const bbvp = {
...viewport.canvasToView(bb.x, bb.y),
w: viewport.zoom * bb.w,
h: viewport.zoom * bb.h,
};
// Draw Image
ovCtx.drawImage(
state.selected.image,
@ -250,34 +270,39 @@ const selectTransformTool = () =>
);
// Draw selection box
ovCtx.setLineDash([4, 2]);
ovCtx.strokeRect(bb.x, bb.y, bb.w, bb.h);
ovCtx.setLineDash([]);
uiCtx.setLineDash([4, 2]);
uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h);
uiCtx.setLineDash([]);
// Draw Scaling/Rotation Origin
ovCtx.beginPath();
ovCtx.arc(
state.selected.x + state.selected.w / 2,
state.selected.y + state.selected.h / 2,
uiCtx.beginPath();
uiCtx.arc(
bbvp.x + bbvp.w / 2,
bbvp.y + bbvp.h / 2,
5,
0,
2 * Math.PI
);
ovCtx.stroke();
uiCtx.stroke();
// Draw Scaling Handles
let cursorInHandle = false;
state.selected.handles().forEach((handle) => {
const bbvph = {
...viewport.canvasToView(handle.x, handle.y),
w: viewport.zoom * handle.w,
h: viewport.zoom * handle.h,
};
if (handle.contains(evn.x, evn.y)) {
cursorInHandle = true;
ovCtx.strokeRect(
handle.x - 1,
handle.y - 1,
handle.w + 2,
handle.h + 2
uiCtx.strokeRect(
bbvph.x - 1,
bbvph.y - 1,
bbvph.w + 2,
bbvph.h + 2
);
} else {
ovCtx.strokeRect(handle.x, handle.y, handle.w, handle.h);
uiCtx.strokeRect(bbvph.x, bbvph.y, bbvph.w, bbvph.h);
}
});
@ -287,15 +312,17 @@ const selectTransformTool = () =>
}
// Draw current cursor location
ovCtx.lineWidth = 3;
ovCtx.strokeStyle = "#FFF";
uiCtx.lineWidth = 3;
uiCtx.strokeStyle = "#FFF";
ovCtx.beginPath();
ovCtx.moveTo(x, y + 10);
ovCtx.lineTo(x, y - 10);
ovCtx.moveTo(x + 10, y);
ovCtx.lineTo(x - 10, y);
ovCtx.stroke();
uiCtx.beginPath();
uiCtx.moveTo(vpc.x, vpc.y + 10);
uiCtx.lineTo(vpc.x, vpc.y - 10);
uiCtx.moveTo(vpc.x + 10, vpc.y);
uiCtx.lineTo(vpc.x - 10, vpc.y);
uiCtx.stroke();
uiCtx.restore();
};
// Handles left mouse clicks
@ -330,7 +357,7 @@ const selectTransformTool = () =>
state.original = null;
state.selected = null;
redraw();
state.redraw();
}
};
@ -431,7 +458,7 @@ const selectTransformTool = () =>
state.dragging = null;
}
redraw();
state.redraw();
};
// Handler for right clicks. Basically resets everything
@ -449,7 +476,7 @@ const selectTransformTool = () =>
state.selected &&
commands.runCommand("eraseImage", "Erase Area", state.selected);
state.selected = null;
redraw();
state.redraw();
}
};