|
|
@@ -10,24 +10,24 @@ const draw = function(ctx, source, coords) {
|
|
|
img.src = source;
|
|
|
};
|
|
|
|
|
|
-const dotProduct = function(U, V) {
|
|
|
- return U.x * V.x + U.y * V.y;
|
|
|
-};
|
|
|
+// const dotProduct = function(U, V) {
|
|
|
+// return U.x * V.x + U.y * V.y;
|
|
|
+// };
|
|
|
|
|
|
const mouseMove = function(e) {
|
|
|
canvas.mouse.x = e.clientX;
|
|
|
canvas.mouse.y = e.clientY;
|
|
|
|
|
|
- const AB = { x: canvas.vertex.b.x - canvas.vertex.a.x, y: canvas.vertex.b.y - canvas.vertex.a.y };
|
|
|
- const AM = { x: canvas.mouse.x - canvas.vertex.a.x, y: canvas.mouse.y - canvas.vertex.a.y };
|
|
|
- const BC = { x: canvas.vertex.c.x - canvas.vertex.b.x, y: canvas.vertex.c.y - canvas.vertex.b.y };
|
|
|
- const BM = { x: canvas.mouse.x - canvas.vertex.b.x, y: canvas.mouse.y - canvas.vertex.b.y };
|
|
|
+ // const AB = { x: canvas.vertex.b.x - canvas.vertex.a.x, y: canvas.vertex.b.y - canvas.vertex.a.y };
|
|
|
+ // const AM = { x: canvas.mouse.x - canvas.vertex.a.x, y: canvas.mouse.y - canvas.vertex.a.y };
|
|
|
+ // const BC = { x: canvas.vertex.c.x - canvas.vertex.b.x, y: canvas.vertex.c.y - canvas.vertex.b.y };
|
|
|
+ // const BM = { x: canvas.mouse.x - canvas.vertex.b.x, y: canvas.mouse.y - canvas.vertex.b.y };
|
|
|
|
|
|
- canvas.mouse.isInside = (0 <= dotProduct(AB, AM) && dotProduct(AB, AM) <= dotProduct(AB, AB))
|
|
|
- && (0 <= dotProduct(BC, BM) && dotProduct(BC, BM) <= dotProduct(BC, BC));
|
|
|
+ // canvas.mouse.isInside = (0 <= dotProduct(AB, AM) && dotProduct(AB, AM) <= dotProduct(AB, AB))
|
|
|
+ // && (0 <= dotProduct(BC, BM) && dotProduct(BC, BM) <= dotProduct(BC, BC));
|
|
|
|
|
|
console.log("Dragging: " + canvas.isDragging);
|
|
|
- console.log("Inside: " + canvas.mouse.isInside);
|
|
|
+ // console.log("Inside: " + canvas.mouse.isInside);
|
|
|
|
|
|
if (canvas.isDragging) {
|
|
|
draw(canvas.context, "https://snippets.cdn.mozilla.net/media/icons/56efef37-8e21-49df-9699-df9ae2c8a088.png", canvas.mouse);
|
|
|
@@ -35,14 +35,14 @@ const mouseMove = function(e) {
|
|
|
};
|
|
|
|
|
|
const mouseDown = function(e) {
|
|
|
- if (canvas.mouse.isInside) {
|
|
|
+ // if (canvas.mouse.isInside) {
|
|
|
+ if (canvas.element === document.activeElement) {
|
|
|
canvas.isDragging = true;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const mouseUp = function(e) {
|
|
|
canvas.isDragging = false;
|
|
|
-
|
|
|
};
|
|
|
|
|
|
const init = function() {
|
|
|
@@ -52,22 +52,22 @@ const init = function() {
|
|
|
isDragging: false,
|
|
|
|
|
|
mouse: {
|
|
|
- isInside: false,
|
|
|
+ // isInside: false,
|
|
|
x: 0,
|
|
|
y: 0
|
|
|
},
|
|
|
|
|
|
- get boundary() { return canvas.element.getBoundingClientRect(); },
|
|
|
- vertex: {
|
|
|
- get a() { return { x: canvas.boundary.top + window.scrollY, y: canvas.boundary.left + window.scrollX }; },
|
|
|
- get b() { return { x: canvas.boundary.top + window.scrollY, y: canvas.boundary.right }; },
|
|
|
- get c() { return { x: canvas.boundary.bottom, y: canvas.boundary.right }; },
|
|
|
- get d() { return { x: canvas.boundary.bottom, y: canvas.boundary.left + window.scrollX }; }
|
|
|
- }
|
|
|
+ // get boundary() { return canvas.element.getBoundingClientRect(); },
|
|
|
+ // vertex: {
|
|
|
+ // get a() { return { x: canvas.boundary.top + window.scrollY, y: canvas.boundary.left + window.scrollX }; },
|
|
|
+ // get b() { return { x: canvas.boundary.top + window.scrollY, y: canvas.boundary.right }; },
|
|
|
+ // get c() { return { x: canvas.boundary.bottom, y: canvas.boundary.right }; },
|
|
|
+ // get d() { return { x: canvas.boundary.bottom, y: canvas.boundary.left + window.scrollX }; }
|
|
|
+ // }
|
|
|
};
|
|
|
|
|
|
- canvas.element.setAttribute("width", 500);//window.getComputedStyle(document.body).getPropertyValue("width"));
|
|
|
- canvas.element.setAttribute("height", 500);//window.getComputedStyle(document.body).getPropertyValue("height"));
|
|
|
+ canvas.element.setAttribute("width", 500); // window.getComputedStyle(document.body).getPropertyValue("width"));
|
|
|
+ canvas.element.setAttribute("height", 500); // window.getComputedStyle(document.body).getPropertyValue("height"));
|
|
|
|
|
|
document.addEventListener("mousemove", mouseMove);
|
|
|
document.addEventListener("mouseup", mouseUp);
|
