Allow resizing from top and left edges in addition to bottom and right

[taye]

interact(target).resizable({
  edges: {
    top   : true,       // Use pointer coords to check for resize.
    left  : false,      // Disable resizing from left edge.
    bottom: '.resize-s',// Resize if pointer target matches selector
    right : handleEl    // Resize if pointer target is the given Element
  },

  // a value of 'none' will limit the resize rect to a minimum of 0x0 
  // 'negate' will allow the rect to have negative width/height
  // 'reposition' will keep the width/height positive by swapping
  // the top and bottom edges and/or swapping the left and right edges
  invert: 'none' || 'negate' || 'reposition'
});

If resize edges are used, resize events will have rect and deltaRect properties. In resizestart, rect will be identical to the rect returned by interctable.getRect(element) and deltaRect will have all-zero properties. rect is updated on each resizemove and the values in deltaRect reflect the changes.

Resize handle elements must be children of the resizable element. If you need the handles to be outside the target element, then you will need to use Interaction#start.

Resize edges are disabled by default in order to remain backwards compatible with the old resize axis API. The old API will be removed in future.

TODO:

• Sensible restriction and snapping (Resize restriction is broken #84) (Will be attempted later)
• Option to allow the rect to be inverted
• Cursor styles

Closes #37

[jacquescrocker]

when I click on the left edge (a absolutely positioned div with class resize-w) I get this js error:

Uncaught TypeError: Cannot read property 'webkitMatchesSelector' of undefineddependencies.js:50170 matchesSelectordependencies.js:48064 checkResizeEdgedependencies.js:48088 defaultActionCheckerdependencies.js:48946 Interactable.getActiondependencies.js:46157 Interaction.pointerDowndependencies.js:47780 (anonymous function)

interact(sidebar[0]).resizable({
      axis: "x",
      edges: {
        left: ".resize-w",
        top: false,
        bottom: false,
        right: false,
      }
    })

[jacquescrocker]

on click of the ".resize-w" div:

I made 100% sure that when I called interact the element I passed in was the correct div. proof: http://cl.ly/image/3G0l1g0p142b

[taye]

Thanks for bringing this up. I'm working on a fix for this and some other issues.

[taye]

@railsjedi The issue you faced should be fixed now.

[taye]

I've also allowed specific elements to be provided as the values for the resize edge properties. This might be necessary if your resize handles aren't within the element being resized (at the moment, the selector is tested only on the pointer event target).

update: handle elements must be children of the target resizable unles you use Interaction#start to start resize manually. I've updated the PR description to explain this.

[jacquescrocker]

@taye awesome, i just gave it a try with the new code on the branch and it fixed my issues. seems to be working great now, i'll keep pounding on it and let you know if i see any other issues

[spxis]

@taye, I've been trying to test this branch out, for the ability to drag on the left edge, and I cannot seem to get the correct code. I cloned the repo, did a "git checkout d86ed02", which would be the change from 6 days ago "Merge branch 'master' into four-direction-resize" but I'm obviously doing something wrong. I've been using the built JS file in the root directory btw. Any help from someone who has successfully pulled (@railsjedi) and used this working branch would be much appreciated... I'm excited to get this working...

[taye]

@spxis I think git checkout four-direction-resize would be the command to run or you can download the file from http://rawgit.com/taye/interact.js/four-direction-resize/interact.js

[joojis]

@taye Hi, I've tried your file you linked and it worked, thanks to your work. By the way, I expected to see two-way arrow when I mouseover to the edges but I couldn't. Is it intended? or I'm wrong?

[taye]

Hi, I've tried your file you linked and it worked, thanks to your work. By the way, I expected to see two-way arrow when I mouseover to the edges but I couldn't. Is it intended? or I'm wrong?

@jjgjoojis yeah, that's wrong. I forgot about implementing cursor styling. It's good to hear that it works well aside from that. Thanks!

[taye]

@jjgjoojis Cursor styles should be working now :D

[marnickmenting]

I have tried this branch and it works like a charm! I don't experience any issues so far.

[taye]

This has been merged so 4-edge resizing can be used from the master branch. I've left out snapping and restriction fixes for now. A new release should happen soon :). Thanks for all the feedback!

[cubistico]

May I jump on here and ask a question regarding the top and left resizing feature?

I have implemented a check so resizing would not cause overlapping with other boxes of my application. However, while I can stop the resize operation, I seem not to understand how to do this properly.

Which property gives me the intended new top/left positions? I tried event.rect.top, but this seems to give me the absolute (client) position which I cannot use since all other coordinates are relative to the surrounding element. So I tried to track the event.target.style.top + event.deltaRect.top, but this seems to give me wrong coordinates on every nth call. I can stop the resize properly, but the width/height will grow to make up for a move that did not occur.

How can this be handled properly?

[taye]

@cubistico can you make a small demo?

[cubistico]

@taye Thanks for getting back. In the meantime, I have realized that I should keep track of the movement in separate variables. The problem was that I blocked movement but added the event.deltaRect properties to the actual current position, so little pointer movements made my listener think, the element would move back a little from the position where movement was stopped instead of the virtual blocked position. I hope I could make clear what I mean...

[taye]

@cubistico using the new restrictSize and restrictEdges modifiers from #455 should make things easier since it would affect the event.rect/deltaRect properties directly.

[cubistico]

@taye Thanks, I will check them out shortly!