let currentScaleIdx = 6; // holds array index of current scale.
let scales = [5,4,3,2.5,2,1.5,1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05];
let zoomErr = false; // tracks zoom errors

const 
  width = 800,
  height = 400;

  // Make the stage
  stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
    draggable: true,
  }),
  layer = new Konva.Layer(),
  
  // make a border and fill for the stage
  rStageBorder = new Konva.Rect({
    x: 2,
    y: 2,
    width: width - 4,
    height: height - 4,
    strokeWidth: 4,
    stroke: 'blue',        
  }),  
  rStageFill = new Konva.Rect({
    x: 2,
    y: 2,
    width: width - 4,
    height: height - 4,
    fill: 'blue',
    opacity: 0.2
  }),
  
  // make some shapes for the layer
  r1 = new Konva.Rect({
    x: 0,
    y: 0,
    width: 40,
    height: 40,
    fill: 'blue',
    draggable: true,
  }),
  c1 = new Konva.Circle({
    x:  stage.width() / 2,
    y: stage.height() / 2,
    radius: 50,
    fill: 'blue',
    draggable: true,
  });  

//Add the layer to the stage, and shapes to the layer
stage.add(layer)

layer.add(rStageFill, rStageBorder, r1, c1); 



stage.on('wheel', (e) => {
  
  // stop default scrolling
  e.evt.preventDefault();

  const 
  
    // Note old scale (scale before moving to next scale)
    oldScale = scales[currentScaleIdx],

    // Get ABSOLUTE pointer position - doesn't include any transforms (such as scale) of the
    // stage. Is just a plain position of pointer relative to top-left corner of the canvas.
    pointer = stage.getPointerPosition(),

    // Pointer.x/y and stage.x/y are not scaled.
    // Compute the mouse position at on the stage at current scale. We use this to calculate 
    // the stage position movement required at the new scale to place this same point on the 
    // stage under the mouse pointer after the new scale is applied.
    mousePointTo = {
      x: (pointer.x - stage.x()) / oldScale,
      y: (pointer.y - stage.y()) / oldScale,
    };

  // Are we zooming IN or OUT ?
  let direction = e.evt.deltaY > 0 ? 1 : -1;

  // when we zoom on trackpad, e.evt.ctrlKey is true
  // in that case lets revert direction
  if (e.evt.ctrlKey) {
    direction = -direction;
  }

  // This is where we decide the next scale. 
  // Go to the next zoom position on the array of scales.
  
  if (direction > 0){
    zoomErr =  currentScaleIdx > 0 ? false : true;
    currentScaleIdx = currentScaleIdx > 0 ? currentScaleIdx - 1 : currentScaleIdx;
  }
  else {
    zoomErr =  currentScaleIdx < scales.length - 1 ? false : true;
    currentScaleIdx = currentScaleIdx < scales.length - 1 ? currentScaleIdx + 1 : currentScaleIdx;
  }
  
  // Set the scale value
  let newScale = scales[currentScaleIdx];

  // Apply this scale to the stage.
  stage.scale({ x: newScale, y: newScale });

  // Compute the new position of the stage so that the same stage point 
  // is under the mouse pointer.
  const newPos = {
    x: pointer.x - mousePointTo.x * newScale,
    y: pointer.y - mousePointTo.y * newScale,
  };

  // Apply the new position of the stage
  stage.position(newPos);

  // Update the message.        
  $('#scaleMsg').html(scaleMsg);
  
  // Update the info display
  showInfo();

});

stage.on('mousemove dragmove', function(e){
  
  // Update the info display
  showInfo();

})

// Update the info display
function showInfo(){
  const mousePos = stage.getPointerPosition();
  if (mousePos){
    $('#info').html('Pos: ' + mousePos.x + ', ' + mousePos.y)
  }
  $('#info2').html('Stage at: ' + Math.round(stage.x()) + ', ' + Math.round(stage.y()));
  $('.selected').removeClass('selected');
 $('#scale' + currentScaleIdx).addClass('selected');
  if (zoomErr){
    $('#zoomErr').show();
  }
  else {
    $('#zoomErr').hide();
  }
}
showInfo();

// Set up the scale indicator
let tbl = "";
for (let i = 0; i < scales.length; i++){
  tbl = tbl + '<td id="scale' + i + '">' + scales[i] + '</td>'
}
tbl = "<table><tr><td>Scale</td>" + tbl + "<td id='zoomErr'>No more zooms available</td></tr></table>"
$("#scaleTbl").html(tbl);