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({
+  // Fetch JSON data asynchronously
-	id: 'public/test/lol',
+  fetch('./links.json')
-    x: 2635, // Adjust position as needed
+  .then(response => response.json())
-    y: 441, // Adjust position as needed
+  .then(jsonData => {
-    width: 655,
+	// Process the JSON data and create rectangles
-    height: 45,
+	const layer = new Konva.Layer();
-    fill: 'rgba(255, 0, 0, 0.0)', // Red with 50% opacity
+
-    draggable: false,
+	jsonData.sections.forEach(section => {
-	shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
+	  section.links.forEach(link => {
-	shadowBlur: 20, // Blur radius
+		const clickableRect = new Konva.Rect({
-	shadowOffset: { x: 0, y: 0 }, // Offset of the shadow
+		  id: link.id,
-	shadowOpacity: 1, // Shadow opacity
+		  x: link.x,
-  });
+		  y: link.y,
-
+		  width: link.width,
-  // Attach a click event listener to the rectangle
+		  height: link.height,
-  clickableRect.on('click', () => {
+		  fill: 'rgba(255, 0, 0, 1.0)',
-    // console.log(clickableRect.id())
+		  draggable: false,
-	// // Data to send with the POST request
+		  shadowColor: 'rgba(0, 0, 0, 0.5)',
-	// const postData = {
+		  shadowBlur: 20,
-	// 	rectangleId: clickableRect.id()
+		  shadowOffset: { x: 0, y: 0 },
-	//   };
+		  shadowOpacity: 1,
-	
+		});
-	//   // Send POST request to the server
+
-	//   fetch('http://localhost:3000/api/change-directory', {
+		clickableRect.on('click', () => {
-	// 	method: 'POST',
+			let linkName = link.url
-	// 	headers: {
+			// Check if the window is already open
-	// 	  'Content-Type': 'application/json',
+			if (myWindow && !myWindow.closed) {
-	// 	},
+				// Reuse the existing window
-	// 	body: JSON.stringify(postData),
+				myWindow.location.href = 'http://localhost:3000/' + linkName;
-	//   })
+			} else {
-	// 	.then(response => response.json())
+				// Open a new window and assign a unique name
-	// 	.then(data => {
+				myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
-	// 	  console.log('Server response:', data);
+			}
-	// 	})
+		});
-	// 	.catch(error => {
+
-	// 	  console.error('Error sending POST request:', error);
+		clickableRect.on('mouseenter', () => {
-	// 	});
+		  document.body.style.cursor = 'pointer';
-	let linkName = ''
+		});
-	// Check if the window is already open
+
-	if (myWindow && !myWindow.closed) {
+		clickableRect.on('mouseleave', () => {
-        // Reuse the existing window
+		  document.body.style.cursor = 'default';
-        myWindow.location.href = 'http://localhost:3000/' + linkName;
+		});
-      } else {
+
-        // Open a new window and assign a unique name
+		layer.add(clickableRect);
-        myWindow = window.open('http://localhost:3000/' + linkName, 'myWindow', 'width=600,height=400');
+	  });
-      }
+	});
-  });
+
-
+	stage.add(layer);
-  // Change cursor on hover
+  })
-clickableRect.on('mouseenter', () => {
+  .catch(error => console.error('Error fetching JSON:', error));
-	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);
 
 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;