How to restore moveable rect positions from persist and set it?

[rasfront]

I have ability to remember moveable positions. After that i wanna to restore this positions on next time when i select. How can i restore positions (rect points, width, height, etc) @daybrush

[daybrush]

@Raserad

777

It is probably related to this issue and will be reflected in the next update.

(It will take some time.)

[daybrush]

@Raserad

This is probably the first time it will be offered.

persistData can be known through moveable.getRect() information.

I'll update this saturday.

<Moveable
                // target={".target"}
                draggable={true}
                resizable={true}
                rotatable={true}
                viewContainer={document.body}
                persistData={{
                    left:  67.6202,
                    top: 110.6202,
                    offsetHeight: 100,
                    offsetWidth: 100,
                    origin: [130, 173],
                    pos1: [96.7019, 110.6202],
                    pos2: [192.3798, 139.7019],
                    pos3: [67.6202, 206.2981],
                    pos4: [163.2981, 235.3798],
                }}
                onRender={e => {
                    e.target.style.cssText += e.cssText;

                    console.log(e.moveable.getRect());
                }}
            />

[daybrush]

@Raserad

• @moveable/helper 0.0.4
• lit-moveable 0.15.0
• moveable 0.38.0
• preact-moveable 0.40.0
• react-compat-moveable 0.26.0
• react-moveable 0.41.0
• svelte-moveable 0.30.0
• vue-moveable 2.0.0-beta.46
• vue3-moveable 0.13.0
• ngx-moveable 0.35.0

moveable's new version is released.

Use moveable.getRect() method (save) and persistData prop (restore) .

[daybrush]

https://daybrush.com/moveable/storybook2/?path=/story/options--first-render-with-persisted-data

[rasfront]

@daybrush thank you for this function. But in some cases there are groups selected. Can you provide method to restore group rects? I mean add "children" field inside persist data.

[daybrush]

@Raserad

I will support But it takes a little time.

[daybrush]

@Raserad

• @moveable/helper 0.0.4
• lit-moveable 0.16.0
• moveable 0.39.0
• preact-moveable 0.41.0
• react-compat-moveable 0.27.0
• react-moveable 0.42.0
• svelte-moveable 0.31.0
• vue-moveable 2.0.0-beta.48
• vue3-moveable 0.14.0
• ngx-moveable 0.36.0

moveable's new version is released. children is added. Supported group too.

[AkashTvu]

Not work with Vue.js

[daybrush]

@AkashTvu

How did you use it?

[bytebrain]

Vue3 is not working, the handles are outside the bounds? The overlay itself is correct, but is done with the css matrix3d() transform. I use Moveable in a modal. (floating scrollable div)

        <Moveable
          ref="moveable"
          className="moveable"
          v-bind:target="['.target']"
          v-bind:warpable="true"
          :renderDirections="['n', 'nw', 'ne', 's', 'se', 'sw', 'e', 'w']"
          :persistData="moveableRect"
          @warp="onWarp"
          @warpStart="onWarpStart"
          @warpEnd="onWarpEnd"
        />

moveableRect:

{
  "width": 703.999997981556,
  "height": 599.8437525828197,
  "left": 155.9999651530767,
  "top": 143.00013366597412,
  "pos1": [155.9999651530767, 143.00013366597412],
  "pos2": [858.9999926163259, 146.00018318832292],
  "pos3": [160.00003285036928, 742.8438862487938],
  "pos4": [859.9999631346327, 741.8438420333597],
  "offsetWidth": 961,
  "offsetHeight": 822.844,
  "beforeOrigin": [509.92481, 444.05931999999996],
  "origin": [509.92481, 444.05931999999996],
  "transformOrigin": [480.5, 411.422],
  "rotation": 0.2445080025559874
}

[daybrush]

@bytebrain

Is there any way to test it? (codesandbox, repository)

I need elements with the same structure (target to body, with moveable location) as the problem.

[bytebrain]

@daybrush Never mind, the issue is caused by something else in my project. I've made a clean codesandbox, and that is working fine like designed.

https://codesandbox.io/s/quirky-mendel-ykv25f?file=/src/components/MoveableDialog.vue

In my project the css class target was already used somewhere. I've reamed the Moveable target class tomy-overlay-target and the issue was fixed.

Sorry about that...