InPlace Crop : Stage 3 - Cropping without maintaining cropped state

Simulates how a user will perform the crop. NOTE: This demo doesn't save the cropped state

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<canvas id="my-canvas"></canvas>
<div class="control">
<input type="range" id="resize-crop" min=0 max=600
value=300
steps=1 />

<label for="resize-crop">Resize Crop window</label>
</div>

<div class="control" style="top: 20px">
<input type="range" id="move-sprite" min=-200 max=200
value=0
steps=1 />

<label for="move-sprite">TranslateX Sprite</label>
</div>

<div class="control" style="top: 40px">
<input type="range" id="move-sprite-y" min=-200 max=200
value=0
steps=1 />

<label for="move-sprite">TranslateY Sprite</label>
</div>
<div class="control" style="top: 80px">CLICK THE IMAGE FIRST</div>
<button id="crop-btn" class="control crop-btn">
Crop It
</button>

CSS

body {
  background-color: #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  box-sizing: border-box;
}

.cropper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(53, 71, 90, 0.2); */

}


.control {
  position: absolute;
  z-index: 10;
  top: 0;
}

.crop-btn {
  right: 10px;
  top: 10px;
}

JavaScript

const imageSrc = "https://cdn.pixabay.com/photo/2018/05/07/10/48/husky-3380548_150.jpg";

 const canvas = document.getElementById("my-canvas");
 const app = new PIXI.Application({
   view: canvas,
   width: 550,
   height: 500,
   backgroundColor: 0xFFFFFF,
 });

 document.body.appendChild(app.view);

 const dimen = 300;

 let cp = {
   topSpacing: 0,
   leftSpacing: 0,
   elementBound: null
 };
 
 let cropWindow = {
 		topX: 0.0,
    topY: 0.0,
    bottomX: 1.0,
    bottomY: 1.0,
 };

 const container = new PIXI.Container();
 container.height = dimen;
 container.width = dimen;
 container.x = app.view.width / 2 - (dimen / 2);
 container.y = app.view.height / 2 - (dimen / 2);
 container.interactive = true;
 const sprite = PIXI.Sprite.from(imageSrc);
 sprite.x = 0;
 sprite.y = 0;
 sprite.height = dimen;
 sprite.width = dimen;
 container.addChild(sprite);
 app.stage.addChild(container);
 container.click = (e) => {
   const canvasBound = canvas.getBoundingClientRect();
   const topSpacing = canvasBound.top;
   const leftSpacing = canvasBound.left;
   console.log(container.getBounds());
   this.cp = {
     ...this.cp,
     topSpacing: canvasBound.top,
     leftSpacing: canvasBound.left,
     elementBound: container.getBounds()
   };

   showCropper()
 };



 showCropper = () => {
   // creating the cropper canvas	
   const canvasWidth = document.body.clientWidth;
   const canvasHeight = document.body.clientHeight;
   const cropperApp = new PIXI.Application({
     width: canvasWidth,
     height: canvasHeight,
     transparent: true
   });
   document.body.appendChild(cropperApp.view);
   cropperApp.view.classList.add("cropper");

   // creating the overlay
   const overlay = new PIXI.Graphics();
   overlay.beginFill(0x35475a80, 0.4);
   overlay.drawRect(0, 0, canvasWidth, canvasHeight);
   overlay.endFill();

   // creating the cropping window
   const croppingWindow = new PIXI.Graphics();
   const width = this.cp.elementBound.width;
   const height =...