New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from Feb 27, 2015

Conversation

Projects
None yet
6 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

This comment has been minimized.

Show comment
Hide comment
@jacquescrocker

jacquescrocker Jan 21, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@jacquescrocker

jacquescrocker Jan 21, 2015

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

jacquescrocker commented Jan 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@taye

taye Jan 23, 2015

Owner

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

Owner

taye commented Jan 23, 2015

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

taye added some commits Jan 24, 2015

Allow an Element to be a resize edge value
interact(target).resizable({
  edges: {
    left: document.getElementById('left-resize-handle'),
    ...
  }
});
@taye

This comment has been minimized.

Show comment
Hide comment
@taye

taye Jan 24, 2015

Owner

@railsjedi The issue you faced should be fixed now.

Owner

taye commented Jan 24, 2015

@railsjedi The issue you faced should be fixed now.

@taye

This comment has been minimized.

Show comment
Hide comment
@taye

taye Jan 24, 2015

Owner

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.

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

This comment has been minimized.

Show comment
Hide comment
@jacquescrocker

jacquescrocker Jan 25, 2015

@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

jacquescrocker commented Jan 25, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@spxis

spxis 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...

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

This comment has been minimized.

Show comment
Hide comment
@taye

taye Feb 1, 2015

Owner

@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

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

This comment has been minimized.

Show comment
Hide comment
@joojis

joojis 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?

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

This comment has been minimized.

Show comment
Hide comment
@taye

taye Feb 13, 2015

Owner

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!

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

This comment has been minimized.

Show comment
Hide comment
@taye

taye Feb 17, 2015

Owner

@jjgjoojis Cursor styles should be working now :D

Owner

taye commented Feb 17, 2015

@jjgjoojis Cursor styles should be working now :D

taye added some commits Feb 18, 2015

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
@innovaat

This comment has been minimized.

Show comment
Hide comment
@innovaat

innovaat Feb 24, 2015

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

innovaat commented Feb 24, 2015

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

This comment has been minimized.

Show comment
Hide comment
@taye

taye Feb 27, 2015

Owner

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!

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

@cubistico

This comment has been minimized.

Show comment
Hide comment
@cubistico

cubistico May 2, 2017

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?

cubistico commented May 2, 2017

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

This comment has been minimized.

Show comment
Hide comment
@taye

taye May 12, 2017

Owner

@cubistico can you make a small demo?

Owner

taye commented May 12, 2017

@cubistico can you make a small demo?

@cubistico

This comment has been minimized.

Show comment
Hide comment
@cubistico

cubistico May 15, 2017

@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...

cubistico commented May 15, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@taye

taye Jun 1, 2017

Owner

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

Owner

taye commented Jun 1, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@cubistico

cubistico Jun 1, 2017

@taye Thanks, I will check them out shortly!

cubistico commented Jun 1, 2017

@taye Thanks, I will check them out shortly!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment