search

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
9.96k stars 618 forks source link

Infinite Scroll Viewer & Moveable, Problem with Group in zoom with mouse & snapping. #328

Open Yomyer opened 3 years ago

Yomyer commented 3 years ago

Environments

Description

I have a problem using Moveable with Infinite Scroll Viewer. The problem is when I zoom out to 1.4, for example, and select a group. If it's an individual target it doesn't pass.

When moving the group it doesn't follow the mouse, it's as if it doesn't take into account the zoom factor. It also doesn't fit the guides/targets in snapping.

In the demo the snapping works well but the item still doesn't follow the mouse when it's a group. I see that there is a new property "DimensionViewable" but it's not implemented in the 0.15.x yet? Will this fix the problem?

Thank you and regards.

daybrush commented 3 years ago

@Yomyer

Maybe it's DOM structure problem.

here's react DOM Structures. https://github.com/daybrush/scena/blob/master/packages/react-editor/src/Editor/Editor.tsx#L161

Yomyer commented 3 years ago

Hi, I follow a similar structure but for angular. Thanks to the example I have seen that the DimensionViewable option is a custom able. 

    <ngx-infinite-viewer class="infinite-viewer" [zoom]="factor" [useForceWheel]="true">
        <div class="artboards viewport">
            <layer *ngFor="let artboard of page?.children" [layer]="artboard"></layer>
            <div class="highlight"></div>

            <ngx-moveable [scrollable]="scrollable" [draggable]="draggable" [resizable]="resizable"
                [rotatable]="rotatable" [snappable]="snappable" [scalable]="scalable" [keepRatio]="keepRatio"
                [zoom]="1 / factor">
            </ngx-moveable>

        </div>
    </ngx-infinite-viewer>

Tanks.

Yomyer commented 3 years ago

Hi daybrush,

What is wrong is the snapping that when there is active zoom and you have a group selected this snapping is wrong. With a video, I think it will be clearer. It's as if I didn't take into account the zoom conversion factor when calculating the position of the object.

ezgif-6-a19604b8b1af

Thanks and regards.

daybrush commented 3 years ago

@Yomyer

Check it demo: https://codesandbox.io/s/serene-bose-2y5lb?file=/src/app/app.component.html

maybe set container prop

Dzxwind commented 3 years ago

@Yomyer

Check it demo: https://codesandbox.io/s/serene-bose-2y5lb?file=/src/app/app.component.html

maybe set container prop

The demo is for single dom. only drag group will trigger this bug!