From 209b1915b0f1879d0055ea17f76464dddcf8089b Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sun, 5 Feb 2023 20:43:17 +0200 Subject: =?UTF-8?q?Hinnad=20m=C3=A4ng=20for=20Arimees=20+=20fonts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rannak/mangud/uliopilane/tSark/main.js | 199 ++++++++++++++++++++++----------- 1 file changed, 136 insertions(+), 63 deletions(-) (limited to 'rannak/mangud/uliopilane/tSark/main.js') diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js index ddbd533..cc7ef3a 100644 --- a/rannak/mangud/uliopilane/tSark/main.js +++ b/rannak/mangud/uliopilane/tSark/main.js @@ -65,6 +65,15 @@ function nextText() { let gi6 = document.querySelector("g") newText.classList.add("sarkTekst") newText.innerHTML = "Uus Tekst"; + + // Move a little, so that new txt isnt exatly on top of old. + let newYVal = newText.y.baseVal[0].value; + if (newYVal < -150) + newText.y.baseVal[0].value += 50; + else + newText.y.baseVal[0].value -= 50; + //console.log(newText.y.baseVal[0].value); + gi6.appendChild(newText); } @@ -229,10 +238,18 @@ minus.addEventListener("click" , () => { + + + + + + + + + /* Rezisable Image Stuff */ const el = document.querySelector(".item"); -let isResizing = false; el.addEventListener("mousedown", mousedown); @@ -246,42 +263,57 @@ function mousedown(e) { function mousemove(e) { if (!isResizing) { - let item = document.querySelector(".item"); - item.style.pointerEvents = "none"; - let posers = document.elementFromPoint(e.x, e.y).id; - item.style.pointerEvents = ""; - if (posers != "sark"){ - console.log(posers); + const rect = el.getBoundingClientRect(); + + let item = document.querySelector(".item"); + item.style.pointerEvents = "none"; + //let posers = document.elementFromPoint(e.x, e.y).id; + + // New Stuff + let posers = document.elementFromPoint(rect.left, rect.top).id; + let posers2 = document.elementFromPoint(rect.right, rect.top).id; + let posers3 = document.elementFromPoint(rect.right, rect.bottom).id; + let posers4 = document.elementFromPoint(rect.left, rect.bottom).id; + // /// ///// + + console.log(posers, posers2, posers3, posers4); + + + item.style.pointerEvents = ""; - let newX = prevX - e.clientX; - let newY = prevY - e.clientY; - const rect = el.getBoundingClientRect(); - el.style.left = rect.left - newX + "px"; - el.style.top = rect.top - newY + "px"; + if (posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark"){ - prevX = e.clientX; - prevY = e.clientY; + let newX = prevX - e.clientX; + let newY = prevY - e.clientY; - mouseup() - } + // Pic back to Center + let brr = document.querySelector("#sark").getBoundingClientRect(); + el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px"; + el.style.top = brr.top + (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px"; + //el.style.top = brr.bottom - 2*(rect.bottom - rect.top) + "px"; - else { - let newX = prevX - e.clientX; - let newY = prevY - e.clientY; + prevX = e.clientX; + prevY = e.clientY; + mouseup() + } - const rect = el.getBoundingClientRect(); + else { - el.style.left = rect.left - newX + "px"; - el.style.top = rect.top - newY + "px"; + let newX = prevX - e.clientX; + let newY = prevY - e.clientY; - prevX = e.clientX; - prevY = e.clientY; - - } + const rect = el.getBoundingClientRect(); + + el.style.left = rect.left - newX + "px"; + el.style.top = rect.top - newY + "px"; + + prevX = e.clientX; + prevY = e.clientY; + } } } @@ -294,8 +326,11 @@ function mousedown(e) { + const resizers = document.querySelectorAll(".resizer"); let currentResizer; +let isResizing = false; + for (let resizer of resizers) { resizer.addEventListener("mousedown", mousedown); @@ -312,35 +347,69 @@ for (let resizer of resizers) { function mousemove(e) { - const rect = el.getBoundingClientRect(); - - if (currentResizer.classList.contains("se")) { - el.style.width = rect.width - (prevX - e.clientX) + "px"; - el.style.height = rect.height - (prevY - e.clientY) + "px"; - } - - else if (currentResizer.classList.contains("sw")) { - el.style.width = rect.width + (prevX - e.clientX) + "px"; - el.style.height = rect.height - (prevY - e.clientY) + "px"; - el.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - else if (currentResizer.classList.contains("ne")) { - el.style.width = rect.width - (prevX - e.clientX) + "px"; - el.style.height = rect.height + (prevY - e.clientY) + "px"; - el.style.top = rect.top - (prevY - e.clientY) + "px"; - } - - else { - el.style.width = rect.width + (prevX - e.clientX) + "px"; - el.style.height = rect.height + (prevY - e.clientY) + "px"; - el.style.top = rect.top - (prevY - e.clientY) + "px"; - el.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - prevX = e.clientX; - prevY = e.clientY; - } + const rect = el.getBoundingClientRect(); + + + + let item = document.querySelector(".item"); + item.style.pointerEvents = "none"; + let posers = document.elementFromPoint(rect.left, rect.top).id; + let posers2 = document.elementFromPoint(rect.right, rect.top).id; + let posers3 = document.elementFromPoint(rect.right, rect.bottom).id; + let posers4 = document.elementFromPoint(rect.left, rect.bottom).id; + item.style.pointerEvents = ""; + + + + if ( !(posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark")){ + + + if (currentResizer.classList.contains("se")) { + el.style.width = rect.width - (prevX - e.clientX) + "px"; + el.style.height = rect.height - (prevY - e.clientY) + "px"; + } + + else if (currentResizer.classList.contains("sw")) { + el.style.width = rect.width + (prevX - e.clientX) + "px"; + el.style.height = rect.height - (prevY - e.clientY) + "px"; + el.style.left = rect.left - (prevX - e.clientX) + "px"; + } + + else if (currentResizer.classList.contains("ne")) { + el.style.width = rect.width - (prevX - e.clientX) + "px"; + el.style.height = rect.height + (prevY - e.clientY) + "px"; + el.style.top = rect.top - (prevY - e.clientY) + "px"; + } + + else { + el.style.width = rect.width + (prevX - e.clientX) + "px"; + el.style.height = rect.height + (prevY - e.clientY) + "px"; + el.style.top = rect.top - (prevY - e.clientY) + "px"; + el.style.left = rect.left - (prevX - e.clientX) + "px"; + } + + } + + // If resizing out of boundaries + else{ + + if (currentResizer.classList.contains("se") || currentResizer.classList.contains("sw")) { + el.style.width = rect.width - 15 + "px"; + el.style.height = rect.height - 15 + "px"; + mouseup(); + } + + if (currentResizer.classList.contains("ne") || currentResizer.classList.contains("nw")) { + el.style.width = rect.width - 15 + "px"; + el.style.height = rect.height - 15 + "px"; + mouseup(); + } + + } + prevX = e.clientX; + prevY = e.clientY; + + } // Function mousemove end function mouseup() { window.removeEventListener("mousemove", mousemove); @@ -354,9 +423,11 @@ for (let resizer of resizers) { // Seting up resize Pic Pos let brr = document.querySelector("#sark").getBoundingClientRect(); -let it = document.querySelector(".item"); -it.style.left = brr.left + 200; -//it.style.top = brr.top + 300; +let it = document.querySelector(".item").getBoundingClientRect(); +let Boop = document.querySelector(".item"); +//it.style.left = brr.left + 200; +Boop.style.left = brr.left + (brr.right - brr.left)/2 - (it.right - it.left)/2 + "px"; +Boop.style.top = brr.top + (brr.bottom - brr.top)/2 - (it.bottom - it.top)/2 + "px"; @@ -438,11 +509,13 @@ nulliBtn.addEventListener("click", () => { document.querySelector(".sarkTekst").style.fill = "black"; - // Seting up resize Pic Pos - let brr = document.querySelector("#sark").getBoundingClientRect(); - let it = document.querySelector(".item"); - it.style.left = brr.left + 200; - //it.style.top = brr.top + 300; + + // Pic back to Center + let brr = document.querySelector("#sark").getBoundingClientRect(); + let rect = document.querySelector(".item").getBoundingClientRect(); + el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px"; + el.style.top = brr.top + (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px"; + // Moving IMg Corners -- cgit v1.2.3