allow pan via LMB drag

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2022-12-27 01:04:56 -03:00
parent 12e371a481
commit 84ba327706
4 changed files with 76 additions and 62 deletions

View file

@ -245,12 +245,30 @@ mouse.registerContext(
{ {
target: imageCollection.inputElement, target: imageCollection.inputElement,
validate: (evn) => { validate: (evn) => {
if (!global.hasActiveInput || evn.type === "mousemove") return true; if ((!global.hasActiveInput && !evn.ctrlKey) || evn.type === "mousemove")
return true;
return false; return false;
}, },
} }
); );
mouse.registerContext(
"camera",
(evn, ctx) => {
ctx.coords.prev.x = ctx.coords.pos.x;
ctx.coords.prev.y = ctx.coords.pos.y;
// Set coords
ctx.coords.pos.x = evn.x;
ctx.coords.pos.y = evn.y;
},
{
validate: (evn) => {
return !!evn.ctrlKey;
},
}
);
// Redraw on active input state change // Redraw on active input state change
(() => { (() => {
mouse.listen.window.onany.on((evn) => { mouse.listen.window.onany.on((evn) => {
@ -264,32 +282,30 @@ mouse.registerContext(
}); });
})(); })();
mouse.listen.window.onwheel.on((evn) => { mouse.listen.camera.onwheel.on((evn) => {
if (evn.evn.ctrlKey) { evn.evn.preventDefault();
evn.evn.preventDefault();
const pcx = viewport.cx; const pcx = viewport.cx;
const pcy = viewport.cy; const pcy = viewport.cy;
if (evn.delta < 0) { if (evn.delta < 0) {
viewport.zoom *= 1 + Math.abs(evn.delta * 0.0002); viewport.zoom *= 1 + Math.abs(evn.delta * 0.0002);
} else { } else {
viewport.zoom *= 1 - Math.abs(evn.delta * 0.0002); viewport.zoom *= 1 - Math.abs(evn.delta * 0.0002);
}
viewport.cx = pcx;
viewport.cy = pcy;
viewport.transform(imageCollection.element);
toolbar.currentTool.redraw();
} }
viewport.cx = pcx;
viewport.cy = pcy;
viewport.transform(imageCollection.element);
toolbar.currentTool.redraw();
}); });
mouse.listen.window.btn.middle.onpaintstart.on((evn) => { const cameraPaintStart = (evn) => {
if (evn.evn.ctrlKey) worldInit = {x: viewport.cx, y: viewport.cy}; worldInit = {x: viewport.cx, y: viewport.cy};
}); };
mouse.listen.window.btn.middle.onpaint.on((evn) => { const cameraPaint = (evn) => {
if (worldInit) { if (worldInit) {
viewport.cx = worldInit.x + (evn.ix - evn.x) / viewport.zoom; viewport.cx = worldInit.x + (evn.ix - evn.x) / viewport.zoom;
viewport.cy = worldInit.y + (evn.iy - evn.y) / viewport.zoom; viewport.cy = worldInit.y + (evn.iy - evn.y) / viewport.zoom;
@ -315,11 +331,20 @@ mouse.listen.window.btn.middle.onpaint.on((evn) => {
debugCtx.arc(viewport.cx, viewport.cy, 5, 0, Math.PI * 2); debugCtx.arc(viewport.cx, viewport.cy, 5, 0, Math.PI * 2);
debugCtx.fill(); debugCtx.fill();
} }
}); };
mouse.listen.window.btn.middle.onpaintend.on((evn) => { const cameraPaintEnd = (evn) => {
worldInit = null; worldInit = null;
}); };
mouse.listen.camera.btn.middle.onpaintstart.on(cameraPaintStart);
mouse.listen.camera.btn.left.onpaintstart.on(cameraPaintStart);
mouse.listen.camera.btn.middle.onpaint.on(cameraPaint);
mouse.listen.camera.btn.left.onpaint.on(cameraPaint);
mouse.listen.window.btn.middle.onpaintend.on(cameraPaintEnd);
mouse.listen.window.btn.left.onpaintend.on(cameraPaintEnd);
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
viewport.transform(imageCollection.element); viewport.transform(imageCollection.element);

View file

@ -208,14 +208,12 @@ const colorBrushTool = () =>
}; };
state.wheelcb = (evn) => { state.wheelcb = (evn) => {
if (!evn.evn.ctrlKey) { state.brushSize = state.setBrushSize(
state.brushSize = state.setBrushSize( state.brushSize -
state.brushSize - Math.floor(state.config.brushScrollSpeed * evn.delta)
Math.floor(state.config.brushScrollSpeed * evn.delta) );
); uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height); state.movecb(evn);
state.movecb(evn);
}
}; };
/** /**

View file

@ -619,11 +619,7 @@ const _generate = async (endpoint, request, bb, options = {}) => {
); );
const onmorehandler = mouse.listen.world.btn.middle.onclick.on( const onmorehandler = mouse.listen.world.btn.middle.onclick.on(
(evn, state) => { (evn, state) => {
if ( if (!state.dream_processed && bb.contains(evn.x, evn.y)) {
!state.dream_processed &&
bb.contains(evn.x, evn.y) &&
!evn.evn.ctrlKey
) {
makeMore(); makeMore();
state.dream_processed = true; state.dream_processed = true;
} }
@ -633,7 +629,6 @@ const _generate = async (endpoint, request, bb, options = {}) => {
); );
const onwheelhandler = mouse.listen.world.onwheel.on( const onwheelhandler = mouse.listen.world.onwheel.on(
(evn, state) => { (evn, state) => {
if (evn.evn.ctrlKey) return;
if (!state.dream_processed && bb.contains(evn.x, evn.y)) { if (!state.dream_processed && bb.contains(evn.x, evn.y)) {
if (evn.delta < 0) nextImg(); if (evn.delta < 0) nextImg();
else prevImg(); else prevImg();
@ -1086,26 +1081,24 @@ const dream_img2img_callback = (bb, resolution, state) => {
let _dream_wheel_accum = 0; let _dream_wheel_accum = 0;
const _dream_onwheel = (evn, state) => { const _dream_onwheel = (evn, state) => {
if (!evn.evn.ctrlKey) { if (evn.mode !== WheelEvent.DOM_DELTA_PIXEL) {
if (evn.mode !== WheelEvent.DOM_DELTA_PIXEL) { // We don't really handle non-pixel scrolling
// We don't really handle non-pixel scrolling return;
return; }
}
// A simple but (I hope) effective fix for mouse wheel behavior // A simple but (I hope) effective fix for mouse wheel behavior
_dream_wheel_accum += evn.delta; _dream_wheel_accum += evn.delta;
if (Math.abs(_dream_wheel_accum) > config.wheelTickSize) { if (Math.abs(_dream_wheel_accum) > config.wheelTickSize) {
// Snap to next or previous position // Snap to next or previous position
const v = const v =
state.cursorSize - state.cursorSize -
128 * (_dream_wheel_accum / Math.abs(_dream_wheel_accum)); 128 * (_dream_wheel_accum / Math.abs(_dream_wheel_accum));
state.cursorSize = state.setCursorSize(v + snap(v, 0, 128)); state.cursorSize = state.setCursorSize(v + snap(v, 0, 128));
state.mousemovecb(evn); state.mousemovecb(evn);
_dream_wheel_accum = 0; // Zero accumulation _dream_wheel_accum = 0; // Zero accumulation
}
} }
}; };

View file

@ -167,13 +167,11 @@ const maskBrushTool = () =>
}; };
state.wheelcb = (evn) => { state.wheelcb = (evn) => {
if (!evn.evn.ctrlKey) { state.brushSize = state.setBrushSize(
state.brushSize = state.setBrushSize( state.brushSize -
state.brushSize - Math.floor(state.config.brushScrollSpeed * evn.delta)
Math.floor(state.config.brushScrollSpeed * evn.delta) );
); state.redraw();
state.redraw();
}
}; };
state.drawcb = (evn) => state.drawcb = (evn) =>