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

[Yomyer]

Environments

• Framework name: Angular
• Framework version: 8
• Moveable Component version: 0.15.3
• Testable Address(optional):

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]

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

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]

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.

Thanks and regards.

[daybrush]

@Yomyer

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

maybe set container prop

[Dzxwind]

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