Interactjs resizable feature in Angular 4 (ts file)

Question

I am using interact in Angular 4.

My draggable function works perfectly.

In my resizable method the event cannot supply me any object property apart from currentTarget and target.

In the example at http://interactjs.io/#resizing:

var 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;

event.rect and event.deltaRect cannot be reached. It says that Property event.rect and event.deltaRect are not the type of InteractEvent.

Question Why this is happening?

The whole code is:

let msgFrontX,
  msgFrontY,
  imgFrontX,
  imgFrontY,
  msgBackX,
  msgBackY,
  imgBackX,
  imgBackY;
interact('.resize-drag')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: {
        top: 0,
        left: 0,
        bottom: 1,
        right: 1
      }
    },
    // enable autoScroll
    autoScroll: true,
    onstart: function (event) {},
    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
      const parentContainer = event.currentTarget.offsetParent;
      const elem = event.currentTarget;

      function percentageCalc(direction) {
        if (direction === 'horizontal') {
          return event.clientX0 / event.clientX 100;
        } else {
          return event.clientY0 / event.clientY 100;
        }
      }
      if (parentContainer.classList.contains('front')) {
        if (elem.classList.contains('msg-container')) {
          msgFrontX = percentageCalc('horizontal');
          msgFrontY = percentageCalc('vertical');
        } else {
          imgFrontX = percentageCalc('horizontal');
          imgFrontY = percentageCalc('vertical');
        }
      } else {
        if (elem.classList.contains('msg-container')) {
          msgBackX = percentageCalc('horizontal');
          msgBackY = percentageCalc('vertical');
        } else {
          imgBackX = percentageCalc('horizontal');
          imgBackY = percentageCalc('vertical');
        }
      }
      that.setPositions(msgFrontX, msgFrontY, imgFrontX, imgFrontY,
        msgBackX, msgBackY, imgBackX, imgBackY);
    }
  }).resizable({
    edges: {
      left: true,
      right: true,
      bottom: true,
      top: true
    },
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: {
        top: 0,
        left: 0,
        bottom: 1,
        right: 1
      }
    }
  }).on('resizeend', function (event) {
    console.log(event.resizeRects);
    var 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);

  });

function 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 position attributes
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
}

Error in console

ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (325,34): Property 'rect' does not exist on type 'InteractEvent'.
ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (326,35): Property 'rect' does not exist on type 'InteractEvent'.
ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (329,18): Property 'deltaRect' does not exist on type 'InteractEvent'.
ERROR in C:/Users/usuario/Documents/sitios/tshirtCustom/src/app/customizer/customizer.component.ts (330,18): Property 'deltaRect' does not exist on type 'InteractEvent'.

aatish rana · Accepted Answer · 2017-12-29 12:00:09Z

1

The InteractEvent interface does not have rect and deltaRect. You can check that in ..\node_modules\interactjs\index.d.ts

This is probably because of different versions in production and sample code.

But there is a work around.

.on('resizeend', function (ev) {
   const event = <any> ev;
   console.log(event.resizeRects);
   var target = event.target,
   x = (parseFloat(target.getAttribute('data-x')) || 0),
   y = (parseFloat(target.getAttribute('data-y')) || 0);

   //......
}

answered Dec 29, 2017 at 12:00

aatish rana

1591 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ezequiel Lavaca Over a year ago

Thanks a lot, but it does not work that. ERROR in src/app/customizer/customizer.component.ts(318,9): error TS2345: Argument of type '{ edges: { left: boolean; right: boolean; bottom: boolean; top: boolean; }; restrictEdges: { oute...' is not assignable to parameter of type 'ResizableOptions'. Object literal may only specify known properties, and 'restrictEdges' does not exist in type 'ResizableOptions'.

aatish rana Over a year ago

that is a different issue, you can remove edges and restrictEdges

Ezequiel Lavaca · Accepted Answer · 2017-12-31 12:29:29Z

0

As Aatish mentioned previously there there is an issue on ../node_modules\interactjs\index.d.ts, the ts is not having the proper exposed properties, so a colleague of mine recommended to add it to the ts and the problem was solved

answered Dec 31, 2017 at 12:29

Ezequiel Lavaca

112 bronze badges

Collectives™ on Stack Overflow

Interactjs resizable feature in Angular 4 (ts file)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related