fix send to buttons
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki
parent
9186d2a387
commit
e2afee3432
3 changed files with 6 additions and 914 deletions
|
|
@ -381,7 +381,7 @@
|
||||||
src="js/ui/tool/colorbrush.js?v=3f8c01a"
|
src="js/ui/tool/colorbrush.js?v=3f8c01a"
|
||||||
type="text/javascript"></script>
|
type="text/javascript"></script>
|
||||||
<script
|
<script
|
||||||
src="js/ui/tool/select.js?v=080237c"
|
src="js/ui/tool/select.js?v=2ba26f1"
|
||||||
type="text/javascript"></script>
|
type="text/javascript"></script>
|
||||||
<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
|
<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
|
||||||
<script
|
<script
|
||||||
|
|
|
||||||
|
|
@ -1,908 +0,0 @@
|
||||||
/**
|
|
||||||
* TODO: REFACTOR THIS WHOLE THING
|
|
||||||
*/
|
|
||||||
|
|
||||||
const selectTransformTool = () =>
|
|
||||||
toolbar.registerTool(
|
|
||||||
"./res/icons/box-select.svg",
|
|
||||||
"Select Image",
|
|
||||||
(state, opt) => {
|
|
||||||
// Draw new cursor immediately
|
|
||||||
ovLayer.clear();
|
|
||||||
state.movecb(mouse.coords.world.pos);
|
|
||||||
|
|
||||||
// Canvas left mouse handlers
|
|
||||||
mouse.listen.world.onmousemove.on(state.movecb);
|
|
||||||
mouse.listen.world.btn.left.onclick.on(state.clickcb);
|
|
||||||
mouse.listen.world.btn.left.ondragstart.on(state.dragstartcb);
|
|
||||||
mouse.listen.world.btn.left.ondragend.on(state.dragendcb);
|
|
||||||
|
|
||||||
// Canvas right mouse handler
|
|
||||||
mouse.listen.world.btn.right.onclick.on(state.cancelcb);
|
|
||||||
|
|
||||||
// Keyboard click handlers
|
|
||||||
keyboard.listen.onkeyclick.on(state.keyclickcb);
|
|
||||||
keyboard.listen.onkeydown.on(state.keydowncb);
|
|
||||||
|
|
||||||
// Layer system handlers
|
|
||||||
uil.onactive.on(state.uilayeractivecb);
|
|
||||||
|
|
||||||
// Registers keyboard shortcuts
|
|
||||||
keyboard.onShortcut({ctrl: true, key: "KeyC"}, state.ctrlccb);
|
|
||||||
keyboard.onShortcut({ctrl: true, key: "KeyV"}, state.ctrlvcb);
|
|
||||||
keyboard.onShortcut({ctrl: true, key: "KeyX"}, state.ctrlxcb);
|
|
||||||
|
|
||||||
state.selected = null;
|
|
||||||
},
|
|
||||||
(state, opt) => {
|
|
||||||
// Clear all those listeners and shortcuts we set up
|
|
||||||
mouse.listen.world.onmousemove.clear(state.movecb);
|
|
||||||
mouse.listen.world.btn.left.onclick.clear(state.clickcb);
|
|
||||||
mouse.listen.world.btn.left.ondragstart.clear(state.dragstartcb);
|
|
||||||
mouse.listen.world.btn.left.ondragend.clear(state.dragendcb);
|
|
||||||
|
|
||||||
mouse.listen.world.btn.right.onclick.clear(state.cancelcb);
|
|
||||||
|
|
||||||
keyboard.listen.onkeyclick.clear(state.keyclickcb);
|
|
||||||
keyboard.listen.onkeydown.clear(state.keydowncb);
|
|
||||||
keyboard.deleteShortcut(state.ctrlccb, "KeyC");
|
|
||||||
keyboard.deleteShortcut(state.ctrlvcb, "KeyV");
|
|
||||||
keyboard.deleteShortcut(state.ctrlxcb, "KeyX");
|
|
||||||
|
|
||||||
uil.onactive.clear(state.uilayeractivecb);
|
|
||||||
|
|
||||||
// Clear any selections
|
|
||||||
state.reset();
|
|
||||||
|
|
||||||
// Resets cursor
|
|
||||||
ovLayer.clear();
|
|
||||||
|
|
||||||
// Clears overlay
|
|
||||||
imageCollection.inputElement.style.cursor = "auto";
|
|
||||||
},
|
|
||||||
{
|
|
||||||
init: (state) => {
|
|
||||||
state.clipboard = {};
|
|
||||||
|
|
||||||
state.snapToGrid = true;
|
|
||||||
state.keepAspectRatio = true;
|
|
||||||
state.block_res_change = true;
|
|
||||||
state.useClipboard = !!(
|
|
||||||
navigator.clipboard && navigator.clipboard.write
|
|
||||||
); // Use it by default if supported
|
|
||||||
state.selectionPeekOpacity = 40;
|
|
||||||
|
|
||||||
state.original = null;
|
|
||||||
state.dragging = null;
|
|
||||||
state.rotation = 0;
|
|
||||||
state._selected = null;
|
|
||||||
Object.defineProperty(state, "selected", {
|
|
||||||
get: () => state._selected,
|
|
||||||
set: (v) => {
|
|
||||||
if (v) state.ctxmenu.enableButtons();
|
|
||||||
else state.ctxmenu.disableButtons();
|
|
||||||
|
|
||||||
return (state._selected = v);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
state.moving = null;
|
|
||||||
|
|
||||||
// Some things to easy request for a redraw
|
|
||||||
state.lastMouseTarget = null;
|
|
||||||
state.lastMouseMove = {x: 0, y: 0};
|
|
||||||
|
|
||||||
state.redraw = () => {
|
|
||||||
ovLayer.clear();
|
|
||||||
state.movecb(state.lastMouseMove);
|
|
||||||
};
|
|
||||||
|
|
||||||
state.uilayeractivecb = ({uilayer}) => {
|
|
||||||
if (state.originalDisplayLayer) {
|
|
||||||
state.originalDisplayLayer.moveAfter(uilayer.layer);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Clears selection and make things right
|
|
||||||
state.reset = (erase = false) => {
|
|
||||||
if (state.selected && !erase)
|
|
||||||
state.originalLayer.ctx.drawImage(
|
|
||||||
state.original.image,
|
|
||||||
state.original.x,
|
|
||||||
state.original.y
|
|
||||||
);
|
|
||||||
|
|
||||||
if (state.originalDisplayLayer) {
|
|
||||||
imageCollection.deleteLayer(state.originalDisplayLayer);
|
|
||||||
state.originalDisplayLayer = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.dragging) state.dragging = null;
|
|
||||||
else state.selected = null;
|
|
||||||
|
|
||||||
state.rotation = 0;
|
|
||||||
state.original = null;
|
|
||||||
|
|
||||||
state.redraw();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Selection bounding box object. Has some witchery to deal with handles.
|
|
||||||
const selectionBB = (x1, y1, x2, y2) => {
|
|
||||||
x1 = Math.round(x1);
|
|
||||||
y1 = Math.round(y1);
|
|
||||||
x2 = Math.round(x2);
|
|
||||||
y2 = Math.round(y2);
|
|
||||||
return {
|
|
||||||
original: {
|
|
||||||
x: Math.min(x1, x2),
|
|
||||||
y: Math.min(y1, y2),
|
|
||||||
w: Math.abs(x1 - x2),
|
|
||||||
h: Math.abs(y1 - y2),
|
|
||||||
},
|
|
||||||
x: Math.min(x1, x2),
|
|
||||||
y: Math.min(y1, y2),
|
|
||||||
w: Math.abs(x1 - x2),
|
|
||||||
h: Math.abs(y1 - y2),
|
|
||||||
updateOriginal() {
|
|
||||||
this.original.x = this.x;
|
|
||||||
this.original.y = this.y;
|
|
||||||
this.original.w = this.w;
|
|
||||||
this.original.h = this.h;
|
|
||||||
},
|
|
||||||
contains(x, y) {
|
|
||||||
return (
|
|
||||||
this.x <= x &&
|
|
||||||
x <= this.x + this.w &&
|
|
||||||
this.y <= y &&
|
|
||||||
y <= this.y + this.h
|
|
||||||
);
|
|
||||||
},
|
|
||||||
center() {
|
|
||||||
return {x: this.x + this.w / 2, y: this.y + this.h / 2};
|
|
||||||
},
|
|
||||||
createHandle(x, y, originOffset = null) {
|
|
||||||
return {
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
scaleTo: (tx, ty, keepAspectRatio = true) => {
|
|
||||||
const origin = {
|
|
||||||
x: this.original.x + this.original.w / 2,
|
|
||||||
y: this.original.y + this.original.h / 2,
|
|
||||||
};
|
|
||||||
let nx = tx;
|
|
||||||
let ny = ty;
|
|
||||||
|
|
||||||
let xRatio = (nx - origin.x) / (x - origin.x);
|
|
||||||
let yRatio = (ny - origin.y) / (y - origin.y);
|
|
||||||
if (keepAspectRatio)
|
|
||||||
xRatio = yRatio = Math.min(xRatio, yRatio);
|
|
||||||
|
|
||||||
if (Number.isFinite(xRatio)) {
|
|
||||||
let left = this.original.x;
|
|
||||||
let right = this.original.x + this.original.w;
|
|
||||||
|
|
||||||
left = (left - origin.x) * xRatio + origin.x;
|
|
||||||
right = (right - origin.x) * xRatio + origin.x;
|
|
||||||
|
|
||||||
this.x = left;
|
|
||||||
this.w = right - left;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Number.isFinite(yRatio)) {
|
|
||||||
let top = this.original.y;
|
|
||||||
let bottom = this.original.y + this.original.h;
|
|
||||||
|
|
||||||
top = (top - origin.y) * yRatio + origin.y;
|
|
||||||
bottom = (bottom - origin.y) * yRatio + origin.y;
|
|
||||||
|
|
||||||
this.y = top;
|
|
||||||
this.h = bottom - top;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// Mouse move handler. As always, also renders cursor
|
|
||||||
state.movecb = (evn) => {
|
|
||||||
ovLayer.clear();
|
|
||||||
uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
|
|
||||||
state.erasePrevCursor && state.erasePrevCursor();
|
|
||||||
imageCollection.inputElement.style.cursor = "auto";
|
|
||||||
state.lastMouseTarget = evn.target;
|
|
||||||
state.lastMouseMove = evn;
|
|
||||||
let x = evn.x;
|
|
||||||
let y = evn.y;
|
|
||||||
if (state.snapToGrid) {
|
|
||||||
x += snap(evn.x, 0, 64);
|
|
||||||
y += snap(evn.y, 0, 64);
|
|
||||||
}
|
|
||||||
|
|
||||||
uiCtx.save();
|
|
||||||
|
|
||||||
// Update scale
|
|
||||||
if (state.scaling) {
|
|
||||||
state.scaling.scaleTo(x, y, state.keepAspectRatio);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update rotation
|
|
||||||
if (state.rotating) {
|
|
||||||
const center = state.selected.center();
|
|
||||||
state.rotation = Math.atan2(evn.x - center.x, center.y - evn.y);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update position
|
|
||||||
if (state.moving) {
|
|
||||||
state.selected.x = Math.round(x - state.moving.offset.x);
|
|
||||||
state.selected.y = Math.round(y - state.moving.offset.y);
|
|
||||||
state.selected.updateOriginal();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw dragging box
|
|
||||||
if (state.dragging) {
|
|
||||||
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);
|
|
||||||
|
|
||||||
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([]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw selected box
|
|
||||||
if (state.selected) {
|
|
||||||
state.selected.drawBox(uiCtx);
|
|
||||||
}
|
|
||||||
if (state.selected && false) {
|
|
||||||
ovCtx.lineWidth = 1;
|
|
||||||
ovCtx.strokeStyle = "#FFF";
|
|
||||||
|
|
||||||
const bb = new BoundingBox({
|
|
||||||
x: state.selected.x,
|
|
||||||
y: state.selected.y,
|
|
||||||
w: state.selected.w,
|
|
||||||
h: state.selected.h,
|
|
||||||
});
|
|
||||||
|
|
||||||
const bbvp = {
|
|
||||||
...viewport.canvasToView(bb.x, bb.y),
|
|
||||||
w: viewport.zoom * bb.w,
|
|
||||||
h: viewport.zoom * bb.h,
|
|
||||||
};
|
|
||||||
|
|
||||||
const scenter = state.selected.center();
|
|
||||||
|
|
||||||
// Draw Image
|
|
||||||
ovCtx.save();
|
|
||||||
|
|
||||||
ovCtx.filter = `opacity(${state.selectionPeekOpacity}%)`;
|
|
||||||
|
|
||||||
ovCtx.translate(scenter.x, scenter.y);
|
|
||||||
ovCtx.rotate(state.rotation);
|
|
||||||
|
|
||||||
const matrix = ovCtx.getTransform();
|
|
||||||
const imatrix = matrix.invertSelf();
|
|
||||||
|
|
||||||
const cursor = imatrix.transformPoint({
|
|
||||||
x: evn.x,
|
|
||||||
y: evn.y,
|
|
||||||
});
|
|
||||||
|
|
||||||
ovCtx.drawImage(
|
|
||||||
state.selected.image,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
state.selected.image.width,
|
|
||||||
state.selected.image.height,
|
|
||||||
-state.selected.w / 2,
|
|
||||||
-state.selected.h / 2,
|
|
||||||
state.selected.w,
|
|
||||||
state.selected.h
|
|
||||||
);
|
|
||||||
ovCtx.restore();
|
|
||||||
|
|
||||||
state.originalDisplayLayer.clear();
|
|
||||||
state.originalDisplayLayer.ctx.save();
|
|
||||||
|
|
||||||
state.originalDisplayLayer.ctx.translate(scenter.x, scenter.y);
|
|
||||||
state.originalDisplayLayer.ctx.rotate(state.rotation);
|
|
||||||
|
|
||||||
state.originalDisplayLayer.ctx.drawImage(
|
|
||||||
state.selected.image,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
state.selected.image.width,
|
|
||||||
state.selected.image.height,
|
|
||||||
-state.selected.w / 2,
|
|
||||||
-state.selected.h / 2,
|
|
||||||
state.selected.w,
|
|
||||||
state.selected.h
|
|
||||||
);
|
|
||||||
state.originalDisplayLayer.ctx.restore();
|
|
||||||
|
|
||||||
const centerx = bbvp.x + bbvp.w / 2;
|
|
||||||
const centery = bbvp.y + bbvp.h / 2;
|
|
||||||
|
|
||||||
uiCtx.save();
|
|
||||||
|
|
||||||
uiCtx.translate(centerx, centery);
|
|
||||||
uiCtx.rotate(state.rotation);
|
|
||||||
|
|
||||||
const matrixvp = uiCtx.getTransform();
|
|
||||||
const imatrixvp = matrixvp.invertSelf();
|
|
||||||
|
|
||||||
const cursorvp = imatrixvp.transformPoint({
|
|
||||||
x: evn.evn.clientX,
|
|
||||||
y: evn.evn.clientY,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Draw selection box
|
|
||||||
uiCtx.strokeStyle = "#FFF";
|
|
||||||
uiCtx.setLineDash([4, 2]);
|
|
||||||
uiCtx.strokeRect(-bbvp.w / 2, -bbvp.h / 2, bbvp.w, bbvp.h);
|
|
||||||
uiCtx.setLineDash([]);
|
|
||||||
|
|
||||||
// Draw Scaling/Rotation Origin
|
|
||||||
uiCtx.beginPath();
|
|
||||||
uiCtx.arc(0, 0, 5, 0, 2 * Math.PI);
|
|
||||||
uiCtx.stroke();
|
|
||||||
|
|
||||||
// Draw Rotation Handle
|
|
||||||
let cursorInAnyHandle = false;
|
|
||||||
{
|
|
||||||
let radius = config.handleDrawSize / 2;
|
|
||||||
|
|
||||||
const dx = cursorvp.x;
|
|
||||||
const dy =
|
|
||||||
cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
|
|
||||||
const dmax = config.handleDetectSize / 2;
|
|
||||||
|
|
||||||
if (dx * dx + dy * dy < dmax * dmax) {
|
|
||||||
cursorInAnyHandle ||= true;
|
|
||||||
radius *= config.handleDrawHoverScale;
|
|
||||||
}
|
|
||||||
|
|
||||||
uiCtx.beginPath();
|
|
||||||
uiCtx.moveTo(0, -bbvp.h / 2);
|
|
||||||
uiCtx.lineTo(
|
|
||||||
0,
|
|
||||||
-bbvp.h / 2 - config.rotateHandleDistance + radius
|
|
||||||
);
|
|
||||||
uiCtx.stroke();
|
|
||||||
|
|
||||||
uiCtx.beginPath();
|
|
||||||
uiCtx.arc(
|
|
||||||
0,
|
|
||||||
-bbvp.h / 2 - config.rotateHandleDistance,
|
|
||||||
radius,
|
|
||||||
0,
|
|
||||||
Math.PI * 2
|
|
||||||
);
|
|
||||||
uiCtx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw Scaling Handles
|
|
||||||
const drawHandle = (hx, hy) => {
|
|
||||||
// Handle Draw Range
|
|
||||||
let hs = config.handleDrawSize;
|
|
||||||
|
|
||||||
// Handle Detection Range
|
|
||||||
let dhs = config.handleDetectSize;
|
|
||||||
|
|
||||||
const handleBB = new BoundingBox({
|
|
||||||
x: hx - dhs / 2,
|
|
||||||
y: hy - dhs / 2,
|
|
||||||
w: dhs,
|
|
||||||
h: dhs,
|
|
||||||
});
|
|
||||||
|
|
||||||
const cursorInHandle = handleBB.contains(cursorvp.x, cursorvp.y);
|
|
||||||
|
|
||||||
cursorInAnyHandle ||= cursorInHandle;
|
|
||||||
|
|
||||||
if (cursorInHandle) hs *= config.handleDrawHoverScale;
|
|
||||||
|
|
||||||
uiCtx.strokeRect(hx - hs / 2, hy - hs / 2, hs, hs);
|
|
||||||
};
|
|
||||||
|
|
||||||
drawHandle(-bbvp.w / 2, -bbvp.h / 2);
|
|
||||||
drawHandle(bbvp.w / 2, -bbvp.h / 2);
|
|
||||||
drawHandle(-bbvp.w / 2, bbvp.h / 2);
|
|
||||||
drawHandle(bbvp.w / 2, bbvp.h / 2);
|
|
||||||
|
|
||||||
uiCtx.restore();
|
|
||||||
|
|
||||||
// Change cursor
|
|
||||||
if (
|
|
||||||
cursorInAnyHandle ||
|
|
||||||
(-bb.w / 2 < cursor.x &&
|
|
||||||
bb.w / 2 > cursor.x &&
|
|
||||||
-bb.h / 2 < cursor.y &&
|
|
||||||
bb.h / 2 > cursor.y)
|
|
||||||
)
|
|
||||||
imageCollection.inputElement.style.cursor = "pointer";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw current cursor location
|
|
||||||
state.erasePrevCursor = _tool._cursor_draw(x, y);
|
|
||||||
|
|
||||||
uiCtx.restore();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handles left mouse clicks
|
|
||||||
state.clickcb = (evn) => {
|
|
||||||
if (
|
|
||||||
!state.original ||
|
|
||||||
(state.originalLayer === uil.layer &&
|
|
||||||
state.original.x === state.selected.x &&
|
|
||||||
state.original.y === state.selected.y &&
|
|
||||||
state.original.w === state.selected.w &&
|
|
||||||
state.original.h === state.selected.h &&
|
|
||||||
state.rotation === 0)
|
|
||||||
) {
|
|
||||||
state.reset();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If something is selected, commit changes to the canvas
|
|
||||||
if (state.selected) {
|
|
||||||
state.originalLayer.ctx.drawImage(
|
|
||||||
state.selected.image,
|
|
||||||
state.original.x,
|
|
||||||
state.original.y
|
|
||||||
);
|
|
||||||
commands.runCommand("eraseImage", "Image Transform Erase", {
|
|
||||||
...state.original,
|
|
||||||
ctx: state.originalLayer.ctx,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Use display layer as source
|
|
||||||
const {canvas, bb} = cropCanvas(state.originalDisplayLayer.canvas);
|
|
||||||
|
|
||||||
commands.runCommand("drawImage", "Image Transform Draw", {
|
|
||||||
image: canvas,
|
|
||||||
...bb,
|
|
||||||
});
|
|
||||||
state.reset(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handles left mouse drag events
|
|
||||||
state.dragstartcb = (evn) => {
|
|
||||||
let ix = evn.ix;
|
|
||||||
let iy = evn.iy;
|
|
||||||
if (state.snapToGrid) {
|
|
||||||
ix += snap(evn.ix, 0, 64);
|
|
||||||
iy += snap(evn.iy, 0, 64);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If is selected, check if drag is in handles/body and act accordingly
|
|
||||||
if (state.selected) {
|
|
||||||
// Get transformation matrices
|
|
||||||
const bb = {
|
|
||||||
x: state.selected.x,
|
|
||||||
y: state.selected.y,
|
|
||||||
w: state.selected.w,
|
|
||||||
h: state.selected.h,
|
|
||||||
};
|
|
||||||
|
|
||||||
const bbvp = {
|
|
||||||
...viewport.canvasToView(bb.x, bb.y),
|
|
||||||
w: viewport.zoom * bb.w,
|
|
||||||
h: viewport.zoom * bb.h,
|
|
||||||
};
|
|
||||||
|
|
||||||
const ivp = viewport.canvasToView(evn.ix, evn.iy);
|
|
||||||
|
|
||||||
// Viewport Coordinates
|
|
||||||
const centerx = bbvp.x + bbvp.w / 2;
|
|
||||||
const centery = bbvp.y + bbvp.h / 2;
|
|
||||||
|
|
||||||
const matrixvp = new DOMMatrix();
|
|
||||||
matrixvp.translateSelf(centerx, centery);
|
|
||||||
matrixvp.rotateSelf((state.rotation * 180) / Math.PI);
|
|
||||||
|
|
||||||
const imatrixvp = matrixvp.inverse();
|
|
||||||
const cursorvp = imatrixvp.transformPoint(ivp);
|
|
||||||
|
|
||||||
// Check rotation handle
|
|
||||||
let rotationHandle = false;
|
|
||||||
|
|
||||||
const dx = cursorvp.x;
|
|
||||||
const dy = cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
|
|
||||||
const dmax = config.handleDetectSize / 2;
|
|
||||||
|
|
||||||
if (dx * dx + dy * dy < dmax * dmax) rotationHandle = true;
|
|
||||||
|
|
||||||
// Check handles
|
|
||||||
let activeHandle = null;
|
|
||||||
const testHandle = (hx, hy, hwx, hwy) => {
|
|
||||||
// Handle Detection Range
|
|
||||||
let dhs = config.handleDetectSize;
|
|
||||||
|
|
||||||
const handleBB = new BoundingBox({
|
|
||||||
x: hx - dhs / 2,
|
|
||||||
y: hy - dhs / 2,
|
|
||||||
w: dhs,
|
|
||||||
h: dhs,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (handleBB.contains(cursorvp.x, cursorvp.y)) {
|
|
||||||
activeHandle = state.selected.createHandle(hx, hy);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
testHandle(-bbvp.w / 2, -bbvp.h / 2);
|
|
||||||
testHandle(bbvp.w / 2, -bbvp.h / 2);
|
|
||||||
testHandle(-bbvp.w / 2, bbvp.h / 2);
|
|
||||||
testHandle(bbvp.w / 2, bbvp.h / 2);
|
|
||||||
|
|
||||||
if (activeHandle) {
|
|
||||||
state.scaling = activeHandle;
|
|
||||||
} else if (rotationHandle) {
|
|
||||||
state.rotating = true;
|
|
||||||
} else if (state.selected.contains(evn.ix, evn.iy)) {
|
|
||||||
state.moving = {
|
|
||||||
snapOffset: {x: evn.ix - ix, y: evn.iy - iy},
|
|
||||||
offset: {
|
|
||||||
x: ix - state.selected.x,
|
|
||||||
y: iy - state.selected.y,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// If it is not, just create new selection
|
|
||||||
state.reset();
|
|
||||||
state.dragging = {ix, iy};
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handles left mouse drag end events
|
|
||||||
state.dragendcb = (evn) => {
|
|
||||||
let x = evn.x;
|
|
||||||
let y = evn.y;
|
|
||||||
if (state.snapToGrid) {
|
|
||||||
x += snap(evn.x, 0, 64);
|
|
||||||
y += snap(evn.y, 0, 64);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we are scaling, stop scaling and do some handler magic
|
|
||||||
if (state.scaling) {
|
|
||||||
state.selected.updateOriginal();
|
|
||||||
state.scaling = null;
|
|
||||||
// If we are moving the selection, just... stop
|
|
||||||
} else if (state.rotating) {
|
|
||||||
state.rotating = false;
|
|
||||||
} else if (state.moving) {
|
|
||||||
state.moving = null;
|
|
||||||
/**
|
|
||||||
* If we are dragging, create a cutout selection area and save to an auxiliar image
|
|
||||||
* We will be rendering the image to the overlay, so it will not be noticeable
|
|
||||||
*/
|
|
||||||
} else if (state.dragging) {
|
|
||||||
state.original = selectionBB(
|
|
||||||
state.dragging.ix,
|
|
||||||
state.dragging.iy,
|
|
||||||
x,
|
|
||||||
y
|
|
||||||
);
|
|
||||||
state.selected = selectionBB(
|
|
||||||
state.dragging.ix,
|
|
||||||
state.dragging.iy,
|
|
||||||
x,
|
|
||||||
y
|
|
||||||
);
|
|
||||||
state.originalLayer = uil.layer;
|
|
||||||
state.originalDisplayLayer = imageCollection.registerLayer(null, {
|
|
||||||
after: uil.layer,
|
|
||||||
category: "select-display",
|
|
||||||
});
|
|
||||||
|
|
||||||
state.rotation = 0;
|
|
||||||
|
|
||||||
// Cut out selected portion of the image for manipulation
|
|
||||||
const cvs = document.createElement("canvas");
|
|
||||||
cvs.width = state.selected.w;
|
|
||||||
cvs.height = state.selected.h;
|
|
||||||
const ctx = cvs.getContext("2d");
|
|
||||||
|
|
||||||
ctx.drawImage(
|
|
||||||
uil.canvas,
|
|
||||||
state.selected.x,
|
|
||||||
state.selected.y,
|
|
||||||
state.selected.w,
|
|
||||||
state.selected.h,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
state.selected.w,
|
|
||||||
state.selected.h
|
|
||||||
);
|
|
||||||
|
|
||||||
uil.ctx.clearRect(
|
|
||||||
state.selected.x,
|
|
||||||
state.selected.y,
|
|
||||||
state.selected.w,
|
|
||||||
state.selected.h
|
|
||||||
);
|
|
||||||
state.selected.image = cvs;
|
|
||||||
state.original.image = cvs;
|
|
||||||
|
|
||||||
if (state.selected.w === 0 || state.selected.h === 0)
|
|
||||||
state.selected = null;
|
|
||||||
|
|
||||||
state.dragging = null;
|
|
||||||
|
|
||||||
state.selected = new _tool.MarqueeSelection(cvs);
|
|
||||||
}
|
|
||||||
state.redraw();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handler for right clicks. Basically resets everything
|
|
||||||
state.cancelcb = (evn) => {
|
|
||||||
state.reset();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Keyboard callbacks (For now, they just handle the "delete" key)
|
|
||||||
state.keydowncb = (evn) => {};
|
|
||||||
|
|
||||||
state.keyclickcb = (evn) => {
|
|
||||||
switch (evn.code) {
|
|
||||||
case "Delete":
|
|
||||||
// Deletes selected area
|
|
||||||
state.selected &&
|
|
||||||
commands.runCommand("eraseImage", "Erase Area", state.selected);
|
|
||||||
state.selected = null;
|
|
||||||
state.redraw();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Register Ctrl-C/V Shortcut
|
|
||||||
|
|
||||||
// Handles copying
|
|
||||||
state.ctrlccb = (evn, cut = false) => {
|
|
||||||
// We create a new canvas to store the data
|
|
||||||
state.clipboard.copy = document.createElement("canvas");
|
|
||||||
|
|
||||||
state.clipboard.copy.width = state.selected.w;
|
|
||||||
state.clipboard.copy.height = state.selected.h;
|
|
||||||
|
|
||||||
const ctx = state.clipboard.copy.getContext("2d");
|
|
||||||
|
|
||||||
ctx.clearRect(0, 0, state.selected.w, state.selected.h);
|
|
||||||
ctx.drawImage(
|
|
||||||
state.selected.image,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
state.selected.image.width,
|
|
||||||
state.selected.image.height,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
state.selected.w,
|
|
||||||
state.selected.h
|
|
||||||
);
|
|
||||||
|
|
||||||
// If cutting, we reverse the selection and erase the selection area
|
|
||||||
if (cut) {
|
|
||||||
const aux = state.original;
|
|
||||||
state.reset();
|
|
||||||
|
|
||||||
commands.runCommand("eraseImage", "Cut Image", aux);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Because firefox needs manual activation of the feature
|
|
||||||
if (state.useClipboard) {
|
|
||||||
// Send to clipboard
|
|
||||||
state.clipboard.copy.toBlob((blob) => {
|
|
||||||
const item = new ClipboardItem({"image/png": blob});
|
|
||||||
navigator.clipboard &&
|
|
||||||
navigator.clipboard.write([item]).catch((e) => {
|
|
||||||
console.warn("Error sending to clipboard");
|
|
||||||
console.warn(e);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Handles pasting
|
|
||||||
state.ctrlvcb = (evn) => {
|
|
||||||
if (state.useClipboard) {
|
|
||||||
// If we use the clipboard, do some proccessing of clipboard data (ugly but kind of minimum required)
|
|
||||||
navigator.clipboard &&
|
|
||||||
navigator.clipboard.read().then((items) => {
|
|
||||||
for (const item of items) {
|
|
||||||
for (const type of item.types) {
|
|
||||||
if (type.startsWith("image/")) {
|
|
||||||
item.getType(type).then(async (blob) => {
|
|
||||||
// Converts blob to image
|
|
||||||
const url = window.URL || window.webkitURL;
|
|
||||||
const image = document.createElement("img");
|
|
||||||
image.src = url.createObjectURL(blob);
|
|
||||||
await image.decode();
|
|
||||||
tools.stamp.enable({
|
|
||||||
image,
|
|
||||||
back: tools.selecttransform.enable,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else if (state.clipboard.copy) {
|
|
||||||
// Use internal clipboard
|
|
||||||
const image = document.createElement("img");
|
|
||||||
image.src = state.clipboard.copy.toDataURL();
|
|
||||||
|
|
||||||
// Send to stamp, as clipboard temporary data
|
|
||||||
tools.stamp.enable({
|
|
||||||
image,
|
|
||||||
back: tools.selecttransform.enable,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Cut shortcut. Basically, send to copy handler
|
|
||||||
state.ctrlxcb = (evn) => {
|
|
||||||
state.ctrlccb(evn, true);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
populateContextMenu: (menu, state) => {
|
|
||||||
if (!state.ctxmenu) {
|
|
||||||
state.ctxmenu = {};
|
|
||||||
|
|
||||||
// Snap To Grid Checkbox
|
|
||||||
state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
|
|
||||||
state,
|
|
||||||
"snapToGrid",
|
|
||||||
"Snap To Grid",
|
|
||||||
"icon-grid"
|
|
||||||
).checkbox;
|
|
||||||
|
|
||||||
// Keep Aspect Ratio
|
|
||||||
state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox(
|
|
||||||
state,
|
|
||||||
"keepAspectRatio",
|
|
||||||
"Keep Aspect Ratio",
|
|
||||||
"icon-maximize"
|
|
||||||
).checkbox;
|
|
||||||
|
|
||||||
// Use Clipboard
|
|
||||||
const clipboardCheckbox = _toolbar_input.checkbox(
|
|
||||||
state,
|
|
||||||
"useClipboard",
|
|
||||||
"Use clipboard",
|
|
||||||
"icon-clipboard-list"
|
|
||||||
);
|
|
||||||
state.ctxmenu.useClipboardLabel = clipboardCheckbox.checkbox;
|
|
||||||
if (!(navigator.clipboard && navigator.clipboard.write))
|
|
||||||
clipboardCheckbox.checkbox.disabled = true; // Disable if not available
|
|
||||||
|
|
||||||
// Selection Peek Opacity
|
|
||||||
state.ctxmenu.selectionPeekOpacitySlider = _toolbar_input.slider(
|
|
||||||
state,
|
|
||||||
"selectionPeekOpacity",
|
|
||||||
"Peek Opacity",
|
|
||||||
{
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
step: 10,
|
|
||||||
textStep: 1,
|
|
||||||
cb: () => {
|
|
||||||
state.redraw();
|
|
||||||
},
|
|
||||||
}
|
|
||||||
).slider;
|
|
||||||
|
|
||||||
// Some useful actions to do with selection
|
|
||||||
const actionArray = document.createElement("div");
|
|
||||||
actionArray.classList.add("button-array");
|
|
||||||
|
|
||||||
// Save button
|
|
||||||
const saveSelectionButton = document.createElement("button");
|
|
||||||
saveSelectionButton.classList.add("button", "tool");
|
|
||||||
saveSelectionButton.textContent = "Save Sel.";
|
|
||||||
saveSelectionButton.title = "Saves Selection";
|
|
||||||
saveSelectionButton.onclick = () => {
|
|
||||||
downloadCanvas({
|
|
||||||
cropToContent: false,
|
|
||||||
canvas: state.selected.image,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Save as Resource Button
|
|
||||||
const createResourceButton = document.createElement("button");
|
|
||||||
createResourceButton.classList.add("button", "tool");
|
|
||||||
createResourceButton.textContent = "Resource";
|
|
||||||
createResourceButton.title = "Saves Selection as a Resource";
|
|
||||||
createResourceButton.onclick = () => {
|
|
||||||
const image = document.createElement("img");
|
|
||||||
image.src = state.selected.image.toDataURL();
|
|
||||||
image.onload = () => {
|
|
||||||
tools.stamp.state.addResource("Selection Resource", image);
|
|
||||||
tools.stamp.enable();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
actionArray.appendChild(saveSelectionButton);
|
|
||||||
actionArray.appendChild(createResourceButton);
|
|
||||||
|
|
||||||
// Some useful actions to do with selection
|
|
||||||
const visibleActionArray = document.createElement("div");
|
|
||||||
visibleActionArray.classList.add("button-array");
|
|
||||||
|
|
||||||
// Save Visible button
|
|
||||||
const saveVisibleSelectionButton = document.createElement("button");
|
|
||||||
saveVisibleSelectionButton.classList.add("button", "tool");
|
|
||||||
saveVisibleSelectionButton.textContent = "Save Vis.";
|
|
||||||
saveVisibleSelectionButton.title = "Saves Visible Selection";
|
|
||||||
saveVisibleSelectionButton.onclick = () => {
|
|
||||||
const canvas = uil.getVisible(state.selected, {
|
|
||||||
categories: ["image", "user", "select-display"],
|
|
||||||
});
|
|
||||||
downloadCanvas({
|
|
||||||
cropToContent: false,
|
|
||||||
canvas,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Save Visible as Resource Button
|
|
||||||
const createVisibleResourceButton = document.createElement("button");
|
|
||||||
createVisibleResourceButton.classList.add("button", "tool");
|
|
||||||
createVisibleResourceButton.textContent = "Vis. to Res.";
|
|
||||||
createVisibleResourceButton.title =
|
|
||||||
"Saves Visible Selection as a Resource";
|
|
||||||
createVisibleResourceButton.onclick = () => {
|
|
||||||
const canvas = uil.getVisible(state.selected, {
|
|
||||||
categories: ["image", "user", "select-display"],
|
|
||||||
});
|
|
||||||
const image = document.createElement("img");
|
|
||||||
image.src = canvas.toDataURL();
|
|
||||||
image.onload = () => {
|
|
||||||
tools.stamp.state.addResource("Selection Resource", image);
|
|
||||||
tools.stamp.enable();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
visibleActionArray.appendChild(saveVisibleSelectionButton);
|
|
||||||
visibleActionArray.appendChild(createVisibleResourceButton);
|
|
||||||
|
|
||||||
// Disable buttons (if nothing is selected)
|
|
||||||
state.ctxmenu.disableButtons = () => {
|
|
||||||
saveSelectionButton.disabled = true;
|
|
||||||
createResourceButton.disabled = true;
|
|
||||||
saveVisibleSelectionButton.disabled = true;
|
|
||||||
createVisibleResourceButton.disabled = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Disable buttons (if something is selected)
|
|
||||||
state.ctxmenu.enableButtons = () => {
|
|
||||||
saveSelectionButton.disabled = "";
|
|
||||||
createResourceButton.disabled = "";
|
|
||||||
saveVisibleSelectionButton.disabled = "";
|
|
||||||
createVisibleResourceButton.disabled = "";
|
|
||||||
};
|
|
||||||
state.ctxmenu.actionArray = actionArray;
|
|
||||||
state.ctxmenu.visibleActionArray = visibleActionArray;
|
|
||||||
}
|
|
||||||
const array = document.createElement("div");
|
|
||||||
array.classList.add("checkbox-array");
|
|
||||||
array.appendChild(state.ctxmenu.snapToGridLabel);
|
|
||||||
array.appendChild(state.ctxmenu.keepAspectRatioLabel);
|
|
||||||
array.appendChild(state.ctxmenu.useClipboardLabel);
|
|
||||||
menu.appendChild(array);
|
|
||||||
menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);
|
|
||||||
menu.appendChild(state.ctxmenu.actionArray);
|
|
||||||
menu.appendChild(state.ctxmenu.visibleActionArray);
|
|
||||||
},
|
|
||||||
shortcut: "S",
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
@ -466,11 +466,11 @@ const selectTransformTool = () =>
|
||||||
|
|
||||||
ctx.clearRect(0, 0, state.selected.w, state.selected.h);
|
ctx.clearRect(0, 0, state.selected.w, state.selected.h);
|
||||||
ctx.drawImage(
|
ctx.drawImage(
|
||||||
state.selected.image,
|
state.selected.canvas,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
state.selected.image.width,
|
state.selected.canvas.width,
|
||||||
state.selected.image.height,
|
state.selected.canvas.height,
|
||||||
0,
|
0,
|
||||||
0,
|
0,
|
||||||
state.selected.w,
|
state.selected.w,
|
||||||
|
|
@ -600,7 +600,7 @@ const selectTransformTool = () =>
|
||||||
saveSelectionButton.onclick = () => {
|
saveSelectionButton.onclick = () => {
|
||||||
downloadCanvas({
|
downloadCanvas({
|
||||||
cropToContent: false,
|
cropToContent: false,
|
||||||
canvas: state.selected.image,
|
canvas: state.selected.canvas,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -611,7 +611,7 @@ const selectTransformTool = () =>
|
||||||
createResourceButton.title = "Saves Selection as a Resource";
|
createResourceButton.title = "Saves Selection as a Resource";
|
||||||
createResourceButton.onclick = () => {
|
createResourceButton.onclick = () => {
|
||||||
const image = document.createElement("img");
|
const image = document.createElement("img");
|
||||||
image.src = state.selected.image.toDataURL();
|
image.src = state.selected.canvas.toDataURL();
|
||||||
image.onload = () => {
|
image.onload = () => {
|
||||||
tools.stamp.state.addResource("Selection Resource", image);
|
tools.stamp.state.addResource("Selection Resource", image);
|
||||||
tools.stamp.enable();
|
tools.stamp.enable();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue