// this data gives the position and size of the frame
let data = {
  frameGroup: { x: 50, y: 100, width: 800, height: 300, strokeWidth: 10, stroke: 'cyan'},
  fadeImage: {opacity: 0.3}
}

// add a stage
let stage = new Konva.Stage({container: 'container', width: 1000, height: 500 }),
    layer = new Konva.Layer({}), // Add a layer and group to draw on
    group = new Konva.Group({clip: data.frameGroup}),
    rect = new Konva.Rect(data.frameGroup),
    image = new Konva.Image({draggable: true}),
    fadeImage = null,
    imageObj = new Image();

stage.add(layer);
layer.add(group)
group.add(rect);

rect.listening(false); // stop the frame rect intercepting events 



// Use the html image object to load the image and handle when laoded. 
imageObj.onload=function () {

  image.image(imageObj); // set the Konva image content to the html image content
  
  // compute image position so that it is initially centered in the frame
  let imagePos = getMiddlePos(data.frameGroup, data.frameGroup, {width: imageObj.width, height: imageObj.height}); 
  
  // set the Konva image attributes as needed
  image.setAttrs({
    x: imagePos.x, y: imagePos.y, width: imageObj.width, height: imageObj.height,
    
    // This function ensures the oversized image cannot be dragged beyond frame edges.
    // Is is firect by the drag event.
    dragBoundFunc: function(pos){
      var imagePos = this.getClientRect(); // get the image dimensions.
      let 
          maxPos = { // compute max x & y position allowed for image
            x: data.frameGroup.x,
            y: data.frameGroup.y
          },
          minPos = {
            x: data.frameGroup.x + data.frameGroup.width - imagePos.width,
            y: data.frameGroup.y + data.frameGroup.height - imagePos.height
          },
      
          newX = (pos.x >= maxPos.x) ? maxPos.x : pos.x, // ensure left edge not within frame
          newY = (pos.y >= maxPos.y) ? maxPos.y : pos.y; // ensure top edge not within frame
      
      newX = newX < minPos.x ? minPos.x : newX; // ensure right edge not within frame
      newY = newY < minPos.y ? minPos.y : newY; // ensure top edge not within frame
      
      fadeImage.setAttrs({x: newX, y: newY}); // apply what we computed

      // dragBoundFunc must return a value with x & y. Either return same value passed in
      // or modify the value.
      return {
        x: newX,
        y: newY
      };
    }
  })
 
  group.add(image) // add the image to the frame group
  image.moveToBottom(); // ensure the frame rect is above the image in the z-index.

  // make a clone of the image to be used as the fade image.
  fadeImage = image.clone({draggable: false, opacity: data.fadeImage.opacity});
  layer.add(fadeImage);  
  // ensure fade image is one step below the frame group. ! - in this simple demo Konva will raise 
  // a warning because group.zIndex() = 0. 
  fadeImage.zIndex(group.zIndex() - 1); 
}
imageObj.src = "https://assets.codepen.io/255591/nasa_sat.png"


// simple function to get the x & y for the image to be centered in the frame
function getMiddlePos(framePos, frameSize, imageSize){
  return{
    x: framePos.x + (frameSize.width - imageSize.width)/2,
    y: framePos.y + (frameSize.height - imageSize.height)/2,
  }
}


// Toggle use of fade image to show overflowed part of image.
$('#useFadImage').on('change', function(e){
  
  if (fadeImage){
    fadeImage.visible(!fadeImage.visible());
  }
})