let stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
    }),
    layer = new Konva.Layer(),
    
    // shapes required for the demo
    r1 = new Konva.Rect({
      x:160,
      y: 120,
      width: 160,
      height: 120,
      stroke: 'cyan'
    }),
    r2 = r1.clone({stroke: 'magenta'}), 
    
    // the point of rotation
    ctrPt = {x: r1.x() + r1.width()/2, y: r1.y() + r1.height()/2},
    
    // a couple of crcles to show center of rotation and topleft of rotated rect
    c1 = new Konva.Circle({
      x: ctrPt.x,
      y: ctrPt.y,
      radius: 5,
      fill: 'lime'
    }),
    c2 = c1.clone({fill: 'red'}),

    // following used for the ghost rects that illustrate changes
    shapes = [],    // array of shape ghosts / tails  
    ghostLimit = 10,    // max no of ghost rects
      
    // the angle increment in degrees
    angleStep = 5,
    
    // a variable to hold the total rotation
    totalAngle = 0;

// add shapes to layer and layer to stage
layer.add(r1, r2, c1, c2);
stage.add(layer)



function doRotate(angle){
  
  // This ghost / tails stuff is just for fun.
  let newShape = r2.clone();
  shapes.push(newShape);
  layer.add(newShape); 
  if (shapes.length >= ghostLimit){
    shapes[0].destroy();   
    shapes = shapes.slice(1);
  }
  for (var i = shapes.length - 1; i >= 0; i--){
    shapes[i].opacity((i + 1) * (1/(shapes.length + 20)))
  };

  // Increment the angle
  totalAngle = totalAngle + angle;
  
  // to get the bounding rect, set the rotation to the new angle andscale = 1
  r2.setAttrs({rotation: totalAngle, scaleX: 1, scaleY: 1})

  // get the bounding rect of the rotated rectangle.
  let br = r2.getClientRect();
  
  // Find the x & y scale and select the largest for use as the scale 
  let scaleX = br.width / r1.width(),
    scaleY = br.height / r1.height(),
    scale = Math.max(scaleX, scaleY);

  // Apply the scale and position attrs.
  r2.setAttrs({
    rotation: 0,
    scaleX: scale, 
    scaleY: scale,
    position: ({
      x: ctrPt.x - scale * r2.width()/2,
      y: ctrPt.y - scale * r2.height()/2
    })
  })

  // Apply the rotation about the center point
  rotateAroundPoint(r2, totalAngle, ctrPt)

  // Move the top corner marker for illustration
  c2.position(r2.position())

  // show the new angle
  $('#angle').html(totalAngle);
  
}

// listener for rotate button
$('#rotate').on('click', function(){
  doRotate(angleStep)
})


/* See: https://longviewcoder.com/2020/12/15/konva-rotate-a-shape-around-any-point/
   Rotate a shape around any point.
   shape is a Konva shape
   angleDegrees is the angle to rotate by, in degrees
   point is an object {x: posX, y: posY}
*/
function rotateAroundPoint(shape, angleDegrees, point) {
  // sin + cos require radians
  let angleRadians = angleDegrees * Math.PI / 180; 
   
  const x =
    point.x +
    (shape.x() - point.x) * Math.cos(angleRadians) -
    (shape.y() - point.y) * Math.sin(angleRadians);
  const y =
    point.y +
    (shape.x() - point.x) * Math.sin(angleRadians) +
    (shape.y() - point.y) * Math.cos(angleRadians);
    
  // move the rotated shape in relation to the rotation point.
  shape.position({x: x, y: y});
 
  // rotate the shape in place around its natural rotation point 
  shape.rotation(shape.rotation() + angleDegrees); 
}