putting back selection 1
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki
parent
8d88ca6632
commit
d7e20f87dc
4 changed files with 113 additions and 28 deletions
|
|
@ -341,7 +341,7 @@
|
|||
<script src="js/global.js?v=5ee46bd" type="text/javascript"></script>
|
||||
|
||||
<!-- Base Libs -->
|
||||
<script src="js/lib/util.js?v=25f0dbb" type="text/javascript"></script>
|
||||
<script src="js/lib/util.js?v=39564fb" type="text/javascript"></script>
|
||||
<script src="js/lib/events.js?v=2ab7933" type="text/javascript"></script>
|
||||
<script src="js/lib/input.js?v=09298ac" type="text/javascript"></script>
|
||||
<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
|
||||
|
|
@ -370,7 +370,7 @@
|
|||
|
||||
<!-- Load Tools -->
|
||||
<script
|
||||
src="js/ui/tool/generic.js?v=cd4ae12"
|
||||
src="js/ui/tool/generic.js?v=d63d268"
|
||||
type="text/javascript"></script>
|
||||
|
||||
<script src="js/ui/tool/dream.js?v=76bc565" type="text/javascript"></script>
|
||||
|
|
@ -381,7 +381,7 @@
|
|||
src="js/ui/tool/colorbrush.js?v=3f8c01a"
|
||||
type="text/javascript"></script>
|
||||
<script
|
||||
src="js/ui/tool/select.js?v=7db1d0c"
|
||||
src="js/ui/tool/select.js?v=44e8ec4"
|
||||
type="text/javascript"></script>
|
||||
<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
|
||||
<script
|
||||
|
|
|
|||
|
|
@ -42,6 +42,11 @@ class BoundingBox {
|
|||
return {x: this.x + this.w, y: this.y + this.h};
|
||||
}
|
||||
|
||||
/** @type {Point} */
|
||||
get center() {
|
||||
return {x: this.x + this.w / 2, y: this.y + this.h / 2};
|
||||
}
|
||||
|
||||
constructor({x, y, w, h} = {x: 0, y: 0, w: 0, h: 0}) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
|
|
|
|||
|
|
@ -27,10 +27,7 @@ const _tool = {
|
|||
reticleStyle: global.hasActiveInput ? "#BBF" : "#FFF",
|
||||
});
|
||||
|
||||
const bbvp = BoundingBox.fromStartEnd(
|
||||
viewport.canvasToView(bb.tl),
|
||||
viewport.canvasToView(bb.br)
|
||||
);
|
||||
const bbvp = bb.transform(viewport.c2v);
|
||||
|
||||
uiCtx.save();
|
||||
|
||||
|
|
@ -322,7 +319,7 @@ const _tool = {
|
|||
* @type {Point}
|
||||
*/
|
||||
position = {x: 0, y: 0};
|
||||
scale = 1;
|
||||
scale = {x: 1, y: 1};
|
||||
rotation = 0;
|
||||
|
||||
/**
|
||||
|
|
@ -334,6 +331,31 @@ const _tool = {
|
|||
this.position = position;
|
||||
}
|
||||
|
||||
get matrix() {
|
||||
const m = new DOMMatrix();
|
||||
|
||||
m.scaleSelf(this.scale.x, this.scale.y);
|
||||
m.rotateSelf((this.rotation * 180) / Math.PI);
|
||||
m.translateSelf(this.position.x, this.position.y);
|
||||
|
||||
return m;
|
||||
}
|
||||
|
||||
/**
|
||||
* If the main marquee box contains a given point
|
||||
*
|
||||
* @param {number} x X coordinate of the point
|
||||
* @param {number} y Y coordinate of the point
|
||||
*/
|
||||
contains(x, y) {
|
||||
const p = this.matrix.invertSelf().transformPoint({x, y});
|
||||
|
||||
return (
|
||||
Math.abs(p.x) < this.canvas.width / 2 &&
|
||||
Math.abs(p.y) < this.canvas.height / 2
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws the marquee selector box
|
||||
*
|
||||
|
|
@ -342,17 +364,16 @@ const _tool = {
|
|||
*/
|
||||
drawBox(context, transform = new DOMMatrix()) {
|
||||
context.save();
|
||||
context.setTransform(transform);
|
||||
|
||||
context.scale(this.scale, this.scale);
|
||||
context.rotate((this.rotation * 180) / Math.PI);
|
||||
context.translate(this.position.x, this.position.y);
|
||||
const m = transform.multiply(this.matrix);
|
||||
|
||||
// Line Color
|
||||
context.strokeStyle = "#FFF";
|
||||
context.setTransform(m);
|
||||
|
||||
// Draw the box itself
|
||||
context.save();
|
||||
|
||||
// Line Style
|
||||
context.strokeStyle = "#FFF";
|
||||
context.lineWidth = 2;
|
||||
context.setLineDash([4, 2]);
|
||||
|
||||
|
|
@ -363,10 +384,26 @@ const _tool = {
|
|||
this.canvas.width,
|
||||
this.canvas.height
|
||||
);
|
||||
context.stroke();
|
||||
|
||||
context.restore();
|
||||
|
||||
context.restore();
|
||||
|
||||
return () => {
|
||||
context.save();
|
||||
|
||||
context.setTransform(m);
|
||||
|
||||
context.clearRect(
|
||||
-this.canvas.width / 2 - 10,
|
||||
-this.canvas.height / 2 - 10,
|
||||
this.canvas.width + 20,
|
||||
this.canvas.height + 20
|
||||
);
|
||||
|
||||
context.restore();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const selectTransformTool = () =>
|
|||
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.ondrag.on(state.dragcb);
|
||||
mouse.listen.world.btn.left.ondragend.on(state.dragendcb);
|
||||
|
||||
// Canvas right mouse handler
|
||||
|
|
@ -39,6 +40,7 @@ const selectTransformTool = () =>
|
|||
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.ondrag.clear(state.dragcb);
|
||||
mouse.listen.world.btn.left.ondragend.clear(state.dragendcb);
|
||||
|
||||
mouse.listen.world.btn.right.onclick.clear(state.cancelcb);
|
||||
|
|
@ -124,48 +126,89 @@ const selectTransformTool = () =>
|
|||
|
||||
// Selection Handlers
|
||||
const selection = _tool._draggable_selection(state);
|
||||
state.dragstartcb = (evn) => selection.dragstartcb(evn);
|
||||
state.dragcb = (evn) => selection.dragcb(evn);
|
||||
state.dragendcb = (evn) => selection.dragendcb(evn);
|
||||
|
||||
// Mouse Move Handler
|
||||
let eraseSelectedBox = () => null;
|
||||
let eraseCursor = () => null;
|
||||
let eraseSelection = () => null;
|
||||
state.movecb = (evn) => {
|
||||
// Get cursor positions
|
||||
const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
|
||||
|
||||
// Draw cursor
|
||||
// Erase Cursor
|
||||
eraseSelectedBox();
|
||||
eraseSelection();
|
||||
eraseCursor();
|
||||
eraseCursor = _tool._cursor_draw(sx, sy);
|
||||
imageCollection.inputElement.style.cursor = "default";
|
||||
|
||||
// Draw Box and Selected Image
|
||||
if (state.selected) {
|
||||
state.selected.drawBox(uiCtx);
|
||||
eraseSelectedBox = state.selected.drawBox(uiCtx, viewport.c2v);
|
||||
}
|
||||
|
||||
// Draw Selection
|
||||
if (selection.exists) {
|
||||
uiCtx.save();
|
||||
uiCtx.setLineDash([2, 2]);
|
||||
uiCtx.lineWidth = 1;
|
||||
uiCtx.lineWidth = 2;
|
||||
uiCtx.strokeStyle = "#FFF";
|
||||
|
||||
const vpbb = selection.bb.transform(viewport.matrix);
|
||||
const bbvp = selection.bb.transform(viewport.c2v);
|
||||
uiCtx.beginPath();
|
||||
uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h);
|
||||
uiCtx.stroke();
|
||||
|
||||
eraseSelection = () =>
|
||||
uiCtx.clearRect(
|
||||
bbvp.x - 10,
|
||||
bbvp.y - 10,
|
||||
bbvp.w + 20,
|
||||
bbvp.h + 20
|
||||
);
|
||||
|
||||
uiCtx.restore();
|
||||
}
|
||||
|
||||
// Draw cursor
|
||||
eraseCursor = _tool._cursor_draw(sx, sy);
|
||||
|
||||
// Pointer
|
||||
if (state.selected && state.selected.contains(x, y)) {
|
||||
imageCollection.inputElement.style.cursor = "pointer";
|
||||
}
|
||||
};
|
||||
|
||||
// Handles left mouse clicks
|
||||
state.clickcb = (evn) => {};
|
||||
|
||||
// Handles left mouse drag events
|
||||
// Handles left mouse drag start events
|
||||
state.dragstartcb = (evn) => {
|
||||
if (state.selected && state.selected.hasCursor()) {
|
||||
} else {
|
||||
state.selection;
|
||||
}
|
||||
selection.dragstartcb(evn);
|
||||
};
|
||||
|
||||
// Handles left mouse drag events
|
||||
state.dragcb = (evn) => {
|
||||
selection.dragcb(evn);
|
||||
};
|
||||
|
||||
// Handles left mouse drag end events
|
||||
state.dragendcb = (evn) => {};
|
||||
state.dragendcb = (evn) => {
|
||||
selection.dragendcb(evn);
|
||||
|
||||
if (selection.exists) {
|
||||
if (selection.bb.w !== 0 && selection.bb.h !== 0) {
|
||||
// TODO: CHANGE THIS
|
||||
state.selected = new _tool.MarqueeSelection(
|
||||
uil.getVisible(selection.bb),
|
||||
selection.bb.center
|
||||
);
|
||||
}
|
||||
|
||||
selection.deselect();
|
||||
}
|
||||
|
||||
state.redraw();
|
||||
};
|
||||
|
||||
// Handler for right clicks. Basically resets everything
|
||||
state.cancelcb = (evn) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue