diff --git a/view/src/components/Editor/Painter.svelte b/view/src/components/Editor/Painter.svelte
index f551fe4..0c89002 100644
--- a/view/src/components/Editor/Painter.svelte
+++ b/view/src/components/Editor/Painter.svelte
@@ -4,6 +4,7 @@
import OrbView from "./OrbView";
import { onMount } from "svelte";
import Toast from "components/Toast";
+ import { throttle } from "lodash";
export let image: Image;
export let activeTool = "pan";
@@ -21,16 +22,27 @@
let cx2: CanvasRenderingContext2D;
let orb: ReturnType
;
- $: if (activeTool) {
+ let _lastActiveTool;
+ function handleToolChange(t) {
+ if (_lastActiveTool === t) return;
if (orb) {
- orb.setTool(activeTool);
+ orb.setTool(t);
}
- if (activeTool === "clear") {
+ if (t === "clear") {
cx1.clearRect(0, 0, image.width, image.height);
cx2.clearRect(0, 0, image.width, image.height);
saveToImage();
activeTool = "brush";
}
+
+ if (_lastActiveTool === "polygon") {
+ handleFinishPolygon();
+ }
+
+ _lastActiveTool = t;
+ }
+ $: if (activeTool) {
+ handleToolChange(activeTool);
}
$: if (layerOpacity && orb) orb.setOpacity(layerOpacity);
@@ -59,8 +71,6 @@
let debugValue = 0;
let debugY = 0;
- let isStrPressed = false;
- let isSpacePressed = false;
let lastActiveTool;
function scaleImageData(imageData, scale) {
@@ -117,7 +127,7 @@
let prePolygonImage = new Image(image.width, image.height);
let lastPolyX;
let lastPolyY;
- function drawPolygon() {
+ function drawSmoothPolygon() {
const x = Math.floor(
mx * wrapperHeightRatio - xOffset * wrapperHeightRatio
);
@@ -150,7 +160,53 @@
prePolygonImage.src = canvas.toDataURL();
}
- function switchMode(e: MouseEvent) {
+ function handlePolygonMouseDown() {
+ if (polygonPoints.length < 2) savePrePolygon();
+
+ const x = Math.floor(
+ mx * wrapperHeightRatio - xOffset * wrapperHeightRatio
+ );
+ const y = Math.floor(my * wrapperHeightRatio);
+ polygonPoints.push(x, y);
+ drawPolygon();
+ }
+ function handleFinishPolygon() {
+ // console.trace("BAD");
+ drawPolygon(false);
+ if (polygonPoints.length) {
+ polygonPoints = [];
+ lastPolyX = undefined;
+ lastPolyY = undefined;
+ }
+ }
+ function drawPolygon(showMouse = true) {
+ if (polygonPoints.length < 2) return;
+ cx1.clearRect(0, 0, image.width, image.height);
+ cx1.drawImage(prePolygonImage, 0, 0, image.width, image.height);
+
+ cx1.beginPath();
+ cx1.moveTo(polygonPoints[0], polygonPoints[1]);
+ for (let i = 2; i < polygonPoints.length; i += 2) {
+ cx1.lineTo(polygonPoints[i], polygonPoints[i + 1]);
+ }
+
+ if (showMouse) {
+ const x = Math.floor(
+ mx * wrapperHeightRatio - xOffset * wrapperHeightRatio
+ );
+ const y = Math.floor(my * wrapperHeightRatio);
+ cx1.lineTo(x, y);
+ }
+
+ cx1.fillStyle = cx1.strokeStyle = "#" + activeColor;
+ cx1.closePath();
+
+ cx1.lineWidth = 1;
+
+ polygonPoints.length === 2 ? cx1.stroke() : cx1.fill();
+ }
+
+ function switchViewMode(e: MouseEvent) {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
@@ -163,9 +219,17 @@
}
mode === "2d" ? orb.stop() : orb.start();
+ handleFinishPolygon();
}
+ let lastMouseDown;
function handleMouseDown(e: MouseEvent) {
+ // Double Click detection
+ if (!lastMouseDown) lastMouseDown = 0;
+ let t = Date.now();
+ let isDbClick = t - lastMouseDown < 200;
+ lastMouseDown = t;
+
if (e.button === 1) {
lastActiveTool = activeTool;
activeTool = "pan";
@@ -178,6 +242,13 @@
if (activeTool === "smooth_polygon") {
savePrePolygon();
}
+ if (activeTool === "polygon") {
+ if (isDbClick) {
+ handleFinishPolygon();
+ } else {
+ handlePolygonMouseDown();
+ }
+ }
}
function handleMouseUp(e) {
@@ -190,27 +261,12 @@
saveToImage();
}
- function handleMouseMove(e) {
+ const handleMouseMove = throttle((e) => {
mx = Math.floor(e.clientX - topLeftX);
my = Math.floor(e.clientY - topLeftY);
isOriginal = e.target.id === "cx1";
- //Caclulate y position of pixel
- const y = Math.floor(my * wrapperHeightRatio);
- debugY = y;
- const height = image.height;
-
- // KarlKilian Formel
- //debugValue = (2 * Math.sqrt(y * (image.height - y))) / image.height;
-
- // New new formel
- debugValue = Math.cos(
- (((360 / height ** 2) * y ** 2 + (-360 / height) * y + 90) / 360) *
- 2 *
- Math.PI
- );
-
if (isDown) {
if (activeTool === "pan") {
// TODO fix overflowiung
@@ -237,19 +293,22 @@
cx1.globalCompositeOperation = "source-over";
}
- if (activeTool === "smooth_polygon") drawPolygon();
+ if (activeTool === "smooth_polygon") drawSmoothPolygon();
if (activeTool === "brush") drawBrush();
}
- }
+
+ if (activeTool === "polygon") {
+ drawPolygon(true);
+ }
+ }, 50);
function handleKeyDown(e) {
if (e.keyCode === 69) activeTool = "erasor";
if (e.keyCode === 66) activeTool = "brush";
- if (e.keyCode === 17) isStrPressed = true;
+ if (e.key === "Enter") handleFinishPolygon();
//SPACE
if (e.keyCode === 32) {
- isSpacePressed = true;
if (!lastActiveTool) {
lastActiveTool = activeTool;
activeTool = "pan";
@@ -258,7 +317,6 @@
}
function handleKeyUp(e) {
- if (e.keyCode === 17) isStrPressed = false;
//SPACE
if (e.keyCode === 32) {
activeTool = lastActiveTool;
@@ -347,7 +405,7 @@
class:is-down={isDown}
style={`background-image: url(${imageUrl}); background-position: ${xOffset}px ${0}px`}
>
-