import { Component, OnInit, AfterContentInit, AfterViewInit, Input } from '@angular/core';
import * as interact from 'interactjs';


@Component({
  selector: 'app-canvas-object',
  templateUrl: './canvas-object.component.html',
  styleUrls: ['./canvas-object.component.scss']
})
export class CanvasObjectComponent implements AfterViewInit {

  @Input() parentCanvas: HTMLElement;

  thisRect: HTMLElement;

  constructor() { }

  test() {
    console.log('hello wolrd');
  }

  ngAfterViewInit() {

    this.thisRect = document.getElementById('myRect');
    this.thisRect.style.background = 'red';


interact('.resize-drag')
  .draggable({
    onmove: this.dragMoveListener,
    restrict: {
      restriction: this.parentCanvas.getBoundingClientRect(),
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 },

    },


  })
  .resizable({
    // resize from all edges and corners
    edges: { left: false, right: true, bottom: true, top: false },

    // keep the edges inside the parent
    restrictEdges: {
      outer:  this.parentCanvas.getBoundingClientRect(),
      endOnly: true
    },

    // minimum size
    restrictSize: {
      min: { width: 100, height: 50 },
    },

    inertia: true,
  })
  .on('resizemove', function (event) {

    console.log(event);


    let target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style

    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges


      x += event.deltaRect.left;
      y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  });
  }

  dragMoveListener (event) {
    const target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }



}