transmediale-noura-tafeche/client/app.js

const canvasContainer = document.getElementById('canvas-container');
let zoomLevel = 0.15
let stageX = 0
let stageY = 0
let myWindow

// Create a Konva stage, which will be the entire w x h of the screen
const stage = new Konva.Stage({
  container: 'canvas-container',
  width: window.innerWidth,
  height: window.innerHeight,
  draggable: true,
});

// Create a Konva layer
// This acts as a layer to add various shapes, images, groups to
const layer = new Konva.Layer();

// Create a Konva image
const image = new Konva.Image({
  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: 0, // Shadow opacity
});

// Load the PNG image
const imageURL = 'map.png'; // Replace with the path to your PNG image
const imageObj = new Image();

imageObj.onload = function () {
  // Set the image dimensions and center it in the stage
  image.width(imageObj.width);
  image.height(imageObj.height);

  // Set the image source
  image.image(imageObj);

  // 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);

stage.x((stage.width()/2) - (image.width()/2) * 0.15)
stage.y((stage.height()/2) - (image.height()/2) * 0.15)

  

  stageX = stage.x()
  stageY = stage.y()

  stage.scaleX(0.15)
  stage.scaleY(0.15)

  // Add the layer to the stage
  stage.add(layer);

  layer.batchDraw();
};

imageObj.src = imageURL;

// Add the image to the layer
layer.add(image);

// Add the layer to the stage
stage.add(layer);


// Handle zoom in and zoom out
window.addEventListener('wheel', (e) => {
	e.preventDefault();

  const oldScale = stage.scaleX();

  // 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;

  // Calculate the cursor position relative to the stage
  const pointer = stage.getPointerPosition();
  const pointerX = pointer.x - stageX;
  const pointerY = pointer.y - stageY;

  // Adjust the stage position to zoom around the cursor
  stageX -= pointerX * (scale - 1);
  stageY -= pointerY * (scale - 1);

  // Set the new scale and position of the stage
  stage.scaleX(zoomLevel);
  stage.scaleY(zoomLevel);
  stage.x(stageX);
  stage.y(stageY);

  layer.batchDraw();
}, { passive: false });

// Slow down dragging based on the current scale
const dragSpeedFactor = 0.5; // Adjust this value to control the drag speed

// Reset stage position on drag
stage.on('dragstart', () => {
	stageX = stage.x();
	stageY = stage.y();
  });
  
  stage.on('dragmove', (e) => {
	// Calculate drag speed factor based on scale
	
	const dragSpeedFactor = 0.5 + (1-stage.scaleX()) * 1; // Adjust the multiplier as needed
  
	const offsetX = e.evt.movementX * dragSpeedFactor * stage.scaleX();
	const offsetY = e.evt.movementY * dragSpeedFactor * stage.scaleY();
  
	stageX += offsetX;
	stageY += offsetY;
  
	stage.x(stageX);
	stage.y(stageY);
  
	layer.batchDraw();
  });
  
  stage.on('dragend', () => {
	stageX = stage.x();
	stageY = stage.y();
  });

  document.addEventListener('contextmenu', event => {
    event.preventDefault();
});