allow pan via LMB drag
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
parent
12e371a481
commit
84ba327706
4 changed files with 76 additions and 62 deletions
|
@ -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);
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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) =>
|
||||||
|
|
Loading…
Reference in a new issue