hyperlink automation

client/app.js

@@ -40,44 +40,31 @@ imageObj.onload = function () {
   // Add the image to the layer
   layer.add(image);
 
+  // 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: 'public/test/lol',
+		  id: link.id,
-    x: 2635, // Adjust position as needed
+		  x: link.x,
-    y: 441, // Adjust position as needed
+		  y: link.y,
-    width: 655,
+		  width: link.width,
-    height: 45,
+		  height: link.height,
-    fill: 'rgba(255, 0, 0, 0.0)', // Red with 50% opacity
+		  fill: 'rgba(255, 0, 0, 1.0)',
 		  draggable: false,
-	shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
+		  shadowColor: 'rgba(0, 0, 0, 0.5)',
-	shadowBlur: 20, // Blur radius
+		  shadowBlur: 20,
-	shadowOffset: { x: 0, y: 0 }, // Offset of the shadow
+		  shadowOffset: { x: 0, y: 0 },
-	shadowOpacity: 1, // Shadow opacity
+		  shadowOpacity: 1,
 		});
 
-  // Attach a click event listener to the rectangle
 		clickableRect.on('click', () => {
-    // console.log(clickableRect.id())
+			let linkName = link.url
-	// // 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
@@ -88,7 +75,6 @@ imageObj.onload = function () {
 			}
 		});
 
-  // Change cursor on hover
 		clickableRect.on('mouseenter', () => {
 		  document.body.style.cursor = 'pointer';
 		});
@@ -97,14 +83,13 @@ clickableRect.on('mouseenter', () => {
 		  document.body.style.cursor = 'default';
 		});
 
-  // Add the clickable rectangle to the layer
 		layer.add(clickableRect);
+	  });
+	});
 
-//   stage.scaleX(0.05)
+	stage.add(layer);
-//   stage.scaleY(0.05)
+  })
-  // Center the stage initially
+  .catch(error => console.error('Error fetching JSON:', error));
-//   stage.x((stage.width() - image.width()) / 2);
-//   stage.y((stage.height() - image.height()) / 2);
 
 stage.x((stage.width()/2) - (image.width()/2) * 0.15)
 stage.y((stage.height()/2) - (image.height()/2) * 0.15)
@@ -141,7 +126,6 @@ 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;