hyperlink automation

client/app.js

@@ -40,71 +40,56 @@ imageObj.onload = function () {
   // Add the image to the layer
   layer.add(image);
 
-  const clickableRect = new Konva.Rect({
-	id: 'public/test/lol',
-    x: 2635, // Adjust position as needed
-    y: 441, // Adjust position as needed
-    width: 655,
-    height: 45,
-    fill: 'rgba(255, 0, 0, 0.0)', // Red with 50% opacity
-    draggable: false,
-	shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
-	shadowBlur: 20, // Blur radius
-	shadowOffset: { x: 0, y: 0 }, // Offset of the shadow
-	shadowOpacity: 1, // Shadow opacity
-  });
-
-  // Attach a click event listener to the rectangle
-  clickableRect.on('click', () => {
-    // console.log(clickableRect.id())
-	// // Data to send with the POST request
-	// const postData = {
-	// 	rectangleId: clickableRect.id()
-	//   };
-	
-	//   // Send POST request to the server
-	//   fetch('http://localhost:3000/api/change-directory', {
-	// 	method: 'POST',
-	// 	headers: {
-	// 	  'Content-Type': 'application/json',
-	// 	},
-	// 	body: JSON.stringify(postData),
-	//   })
-	// 	.then(response => response.json())
-	// 	.then(data => {
-	// 	  console.log('Server response:', data);
-	// 	})
-	// 	.catch(error => {
-	// 	  console.error('Error sending POST request:', error);
-	// 	});
-	let linkName = ''
-	// Check if the window is already open
-	if (myWindow && !myWindow.closed) {
-        // Reuse the existing window
-        myWindow.location.href = 'http://localhost:3000/' + linkName;
-      } else {
-        // Open a new window and assign a unique name
-        myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
-      }
-  });
-
-  // Change cursor on hover
-clickableRect.on('mouseenter', () => {
-	document.body.style.cursor = 'pointer';
-  });
-  
-  clickableRect.on('mouseleave', () => {
-	document.body.style.cursor = 'default';
-  });
-
-  // Add the clickable rectangle to the layer
-layer.add(clickableRect);
-
-//   stage.scaleX(0.05)
-//   stage.scaleY(0.05)
-  // Center the stage initially
-//   stage.x((stage.width() - image.width()) / 2);
-//   stage.y((stage.height() - image.height()) / 2);
+  // Fetch JSON data asynchronously
+  fetch('./links.json')
+  .then(response => response.json())
+  .then(jsonData => {
+	// Process the JSON data and create rectangles
+	const layer = new Konva.Layer();
+
+	jsonData.sections.forEach(section => {
+	  section.links.forEach(link => {
+		const clickableRect = new Konva.Rect({
+		  id: link.id,
+		  x: link.x,
+		  y: link.y,
+		  width: link.width,
+		  height: link.height,
+		  fill: 'rgba(255, 0, 0, 1.0)',
+		  draggable: false,
+		  shadowColor: 'rgba(0, 0, 0, 0.5)',
+		  shadowBlur: 20,
+		  shadowOffset: { x: 0, y: 0 },
+		  shadowOpacity: 1,
+		});
+
+		clickableRect.on('click', () => {
+			let linkName = link.url
+			// Check if the window is already open
+			if (myWindow && !myWindow.closed) {
+				// Reuse the existing window
+				myWindow.location.href = 'http://localhost:3000/' + linkName;
+			} else {
+				// Open a new window and assign a unique name
+				myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
+			}
+		});
+
+		clickableRect.on('mouseenter', () => {
+		  document.body.style.cursor = 'pointer';
+		});
+
+		clickableRect.on('mouseleave', () => {
+		  document.body.style.cursor = 'default';
+		});
+
+		layer.add(clickableRect);
+	  });
+	});
+
+	stage.add(layer);
+  })
+  .catch(error => console.error('Error fetching JSON:', error));
 
 stage.x((stage.width()/2) - (image.width()/2) * 0.15)
 stage.y((stage.height()/2) - (image.height()/2) * 0.15)
@@ -141,8 +126,7 @@ window.addEventListener('wheel', (e) => {
   // Calculate the new scale based on the wheel delta
   zoomLevel += e.deltaY * -0.001;
   zoomLevel = Math.max(0.15, Math.min(0.8, zoomLevel));
-  console.log(zoomLevel)
-
+  
   // Calculate the new scale factor
   const scale = zoomLevel / oldScale;