search

daybrush / selecto

Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
https://daybrush.com/selecto
MIT License
2.07k stars 83 forks source link

Selection Bound Area is positioned away from the modal #127

Open quankhuc opened 1 year ago

quankhuc commented 1 year ago

Environments

Description

Hi, I am trying to incorporate your package into a dialog (modal). For the dialog (modal), I used headless-ui dialog component to make this modal. When I attempted to put boxes into a selection area by using your package example code, the selection bound is no longer attached within the selection area. It instead deviates by the value of clientX of the MouseEvent. I attached a video that captures the issue.

https://user-images.githubusercontent.com/71282105/232992273-57fc0e30-2288-4215-bb2e-6bc525b94470.mov

As you can see in the video, when I tried to click on the top left of the white bordered selection area, the clientX is about 300px. The selection bound area (blue area)is off in the horizontal direction by about the same amount of pixels. The same behavior can be seen with vertical direction.

Here is the link to my dialog code:

https://github.com/quankhuc/nuxt-catoptric-project/blob/main/components/Dashboard/PanelModal.vue

I appreciate any guidances or future fixes on this issue.

daybrush commented 1 year ago

@quankhuc

I think there is a possibility that the transform is applied to the container containing the selecto.

If so, put the selecto on the parent element to which no transform is applied, or set rootContainer={document.body} or the parent element.

quankhuc commented 1 year ago

It worked when I brought it to dashboard component, which is the parent component of this modal. I tried to bring the selecto to the component and keep my modal code in a child component, but it did not work because it seemed that the selecto cannot read classes that are not present at its present component. Are there any ways I can have the selecto on a child component? For example, could you provide an example that you use the selecto in a child component ?

quankhuc commented 1 year ago

I got it to work in a children component by havign the selecto outside of my latest TransitionChild. It is all under the PanelModal component now. Thank you for your helps and your work on the package. I really appreicated it