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

Merged
merged 11 commits into from Feb 27, 2015

Projects

None yet

5 participants

@taye
Owner
taye commented Jan 1, 2015
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 (#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
Owner
taye commented Jan 23, 2015

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

added some commits Jan 24, 2015
@taye Merge branch 'master' into four-direction-resize d86ed02
@taye Fix resizing with edge selectors 2426770
@taye Allow an Element to be a resize edge value
interact(target).resizable({
  edges: {
    left: document.getElementById('left-resize-handle'),
    ...
  }
});
8475fbb
@taye
Owner
taye commented Jan 24, 2015

@railsjedi The issue you faced should be fixed now.

@taye
Owner
taye commented Jan 24, 2015

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
spxis commented Jan 31, 2015

@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
Owner
taye commented Feb 1, 2015

@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
joojis commented Feb 12, 2015

@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
Owner
taye commented Feb 13, 2015

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
Owner
taye commented Feb 17, 2015

@jjgjoojis Cursor styles should be working now :D

added some commits Feb 18, 2015
@taye Add 'invert' option for resizing
interact(target).resizable({
  edges:  { left: true, right: true, top: true, bottom: true },
  invert: 'reposition' || 'negate' || 'none'
});

 - 'none' will limit the resize rect to a minimum of 0x0
 - 'negate' will alow 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
210c910
@taye Merge branch 'master' into four-direction-resize f3166b8
@innovaat

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

@taye taye merged commit f3166b8 into master Feb 27, 2015
@taye
Owner
taye commented Feb 27, 2015

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!

@taye taye deleted the four-direction-resize branch Jun 1, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment