From 40604eba43b22f4174138c25e7628fe8406a3363 Mon Sep 17 00:00:00 2001 From: tobiasvonarx Date: Fri, 15 Mar 2019 21:40:55 +0100 Subject: [PATCH] Implemented scaling functionality, refactoring & bugfixes --- script.js | 145 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 99 insertions(+), 46 deletions(-) diff --git a/script.js b/script.js index 656c9a0..5adaec6 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,37 @@ // TODO: -// zooming // more file types (text) -const { clipboard } = require('electron'); +const { + clipboard +} = require('electron'); const nativeImage = require('electron').nativeImage; +let offsetX = 0; +let offsetY = 0; +let offsetIncrement = 5; +let offsetLimit = 10000; + +let sclFactor = 1; +let scaleDelta = 1.02; +let scaleOffsetX; +let scaleOffsetY; + + +let pics = []; +let raw_pics = []; +let pMouseX; +let pMouseY; +let selectedPic; +let picSelected = false; +let mouseDown; + function setup() { const canvas = createCanvas(windowWidth, windowHeight); background(51); + + scaleOffsetX = -width / 2; + scaleOffsetY = -height / 2; + noFill(); frameRate(60); @@ -18,33 +42,34 @@ function setup() { canvas.drop(gotFile); } -let offsetX = 0; -let offsetY = 0; -let offsetIncrement = 5; -let offsetLimit = 10000; -let pics = []; -let raw_pics = []; -let pmx; -let pmy; -let ppicx; -let ppicy; -let selectedPic; -let picSelected = false; + function draw() { background(51); - pan(); + // workaround to zoom in on the center + translate(width / 2, height / 2); - findPicFromCoords(mouseX, mouseY); + zoom(); + pan(); drawPics(); - if (picSelected && mouseIsPressed) { + + findPicFromCoords(mouseX, mouseY); + + if (picSelected && mouseDown) { let pic = pics[selectedPic]; - pic.x = ppicx + (mouseX - pmx); - pic.y = ppicy + (mouseY - pmy); + + let mx = (mouseX + scaleOffsetX) / sclFactor + offsetX; + let my = (mouseY + scaleOffsetY) / sclFactor + offsetY; + + pic.x += mx - pMouseX; + pic.y += my - pMouseY; + + pMouseX = mx; + pMouseY = my; drawBorder(pic.x, pic.y, pic.width, pic.height, 229, 69, 69); } else if (picSelected) { @@ -52,16 +77,17 @@ function draw() { drawBorder(pic.x, pic.y, pic.width, pic.height, 76, 23, 23); } + strokeWeight(1); stroke('rgba(204,204,204,0.05)'); - for (let h = -offsetLimit; h < offsetLimit+windowHeight; h+= 50) { - line(-offsetLimit, h, offsetLimit+windowWidth, h); + for (let h = -offsetLimit; h < offsetLimit + windowHeight; h += 50) { + line(-offsetLimit, h, offsetLimit + windowWidth, h); } - for (let w = -offsetLimit; w < offsetLimit+windowWidth; w+= 50) { - line(w, -offsetLimit, w, offsetLimit+windowHeight); + for (let w = -offsetLimit; w < offsetLimit + windowWidth; w += 50) { + line(w, -offsetLimit, w, offsetLimit + windowHeight); } } -function pan () { +function pan() { if (keyIsPressed) { if (keyIsDown(LEFT_ARROW)) { offsetX -= offsetIncrement; @@ -90,20 +116,30 @@ function pan () { offsetY = -offsetLimit; } - //console.log(offsetX, offsetY); - translate(-offsetX, -offsetY); } +function zoom() { + if (keyIsPressed) { + if (keyIsDown(187)) { // + + sclFactor *= scaleDelta; + } + if (keyIsDown(189)) { // - + sclFactor /= scaleDelta; + } + } + scale(sclFactor) +} + function drawBorder(x, y, w, h, r, g, b) { push(); strokeWeight(5); stroke(r, g, b); beginShape(); - vertex(x-w/2, y-h/2); - vertex(x+w/2, y-h/2); - vertex(x+w/2, y+h/2); - vertex(x-w/2, y+h/2); + vertex(x - w / 2, y - h / 2); + vertex(x + w / 2, y - h / 2); + vertex(x + w / 2, y + h / 2); + vertex(x - w / 2, y + h / 2); endShape(CLOSE); pop(); } @@ -129,42 +165,58 @@ function doubleClicked() { function mousePressed() { findPicFromCoords(mouseX, mouseY); - pmx = mouseX; - pmy = mouseY; - try { - ppicx = pics[selectedPic].x; - ppicy = pics[selectedPic].y; - } catch { - //console.log('No picture selected'); + + if (picSelected) { + pMouseX = (mouseX + scaleOffsetX) / sclFactor + offsetX; + pMouseY = (mouseY + scaleOffsetY) / sclFactor + offsetY; } + mouseDown = true; + if (!picSelected) { console.log('no pic selected'); } } function mouseReleased() { - picSelected = false; + picSelected = false; + mouseDown = false; } function findPicFromCoords(mx, my) { + // stroke(255); + // strokeWeight(10); + + let x = (mx + scaleOffsetX) / sclFactor + offsetX; + let y = (my + scaleOffsetY) / sclFactor + offsetY; + + // point(x, y); picSelected = false; for (let i = pics.length - 1; i >= 0; i--) { let pic = pics[i]; - let picx = pic.x - offsetX; - let picy = pic.y - offsetY; + // stroke(43, 12, 156); + + let picx = pic.x; + let picy = pic.y; + let picw = pic.width; + let pich = pic.height; - //if (((mx >= pic.x) && (my >= pic.y)) && ((mx <= pic.x + pic.width) && (my <= pic.y + pic.height))) { - if (((mx>=picx-pic.width/2) && (my>=picy-pic.height/2))&&((mx<=picx+pic.width/2) && (my<=picy+pic.height/2))) { + // point(picx - picw / 2, picy - pich / 2); + // point(picx + picw / 2, picy + pich / 2); + + if (((x >= picx - picw / 2) && (y >= picy - pich / 2)) && ((x <= picx + picw / 2) && (y <= picy + pich / 2))) { // prevent bug of selectedPic changing while mouse pressed if (!(mouseIsPressed && selectedPic != i)) { pics.push(pics.splice(i, 1)[0]); raw_pics.push(raw_pics.splice(i, 1)[0]); - selectedPic = pics.length-1; + selectedPic = pics.length - 1; picSelected = true; break; } + + // stroke(255); + // point(pic.x, pic.y); } } } @@ -214,14 +266,15 @@ function drawPics() { function gotFile(file) { if (file.type === 'image') { // Create an image DOM element but don't show it + console.log(file); let img = createImg(file.data).hide(); - img.x = mouseX; - img.y = mouseY; + img.x = mouseX + scaleOffsetX; + img.y = mouseY + scaleOffsetY; pics.push(img); raw_pics.push(file) } else { console.log(`${file.type} not an image file!\nContents: ${file.data}`); } -} +} \ No newline at end of file