Increasing moveable-line hit area

[bytasv]

Environments

• Framework name: moveable
• Framework version: latest
• Moveable Component version: latest

Description

Hello,

I was wondering if there is an easy way to increase .moveable-line hit/click area without overriding CSS? 🤔 Right now it seems that it is only 1px which is quite easy to miss.

Current workaround that I'm using is:

.movable :global(.moveable-line) {
  height: 11px !important;
  background: transparent !important;
}

.movable :global(.moveable-line:after) {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  top: 5px;
}

It fixes click area, but messes up other moveable-lines :(

Thank you!

[daybrush]

@bytasv

I would make a linePadding prop(type: number).

If you ignore the background color, you want this function, right?

[daybrush]

@bytasv

moveable's new version is released. linePadding prop was added.

set linePadding to 10 (number)

[bytasv]

Thanks a lot, that works great!

[golnaaz73]

@daybrush Hi, first thank you so much for your incredible package, second I wanted to know is it possible to increase hit area for moveable-controls as it is in canva for mobile devices?

[daybrush]

@golnaaz73

The zoom property is supported. Would you like to try it?

zoom={2}

[golnaaz73]

@golnaaz73

The zoom property is supported. Would you like to try it?

zoom={2}

I've tried that but it increases moveable-controls size. I just want to increase hit area without making controls bigger. exactly like line-padding but for controls

[daybrush]

@golnaaz73

okay. As a feature I would add a controlPadding prop just like linePadding.

[golnaaz73]

@golnaaz73

okay. As a feature I would add a controlPadding prop just like linePadding.

Thank you so much

[daybrush]

@golnaaz73

moveable's new version is released.

displayAroundControls, controlPadding prop were added.

set displayAroundControls(default: false) to true. and controlPadding (default: 20)

https://daybrush.com/moveable/storybook2/?path=/story/options--controlpadding

[golnaaz73]

@golnaaz73

moveable's new version is released.

displayAroundControls, controlPadding prop were added.

set displayAroundControls(default: false) to true. and controlPadding (default: 20)

https://daybrush.com/moveable/storybook2/?path=/story/options--controlpadding

Thanks a lot

[anshuljhawar]

@daybrush linePadding and controlPadding are great options! Thanks! The way linePadding currently works is it adds padding to the outside of the item. But sometimes during resizing, it behaves wierdly as cursor types keep on changing (from resize to move .. etc). This problem could be solved, if linePadding also adds padding to the internal area of the item from the edge. So when we want to start resize, we dont have to go to the edge but we can start from some area below/above the edge as well.