summaryrefslogtreecommitdiff
path: root/rannak/mangud/uliopilane/tSark/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/uliopilane/tSark/main.js')
-rw-r--r--rannak/mangud/uliopilane/tSark/main.js199
1 files changed, 136 insertions, 63 deletions
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 00:03:09 +0000