Access to moveable object by ref ? about vue-moveable HOT 8 OPEN

Hi @ibadass
I didn't quite get your question but I suppose issue #82 is what you are looking for.
You can access getRect() this way:

this.$refs.moveable.moveable.getRect();

Here is a demo https://codesandbox.io/s/vue-moveable-demo-udvc8?fontsize=14&hidenavigation=1&theme=dark

from vue-moveable.

Hi @probil,

Thank you for your answer !
I'll try to explain my issue with more details :
On my webpage, I can add a new moveable object in a container, after manupulate it, I can "save" it in a DB. In my DB, I save this infos (from getRect() ) :

{
	"label": "XXX",
	"width": 191,
	"height": 50,
	"left":335,
	"top":121,
	"pos1": {x: 335, y: 121},
	"pos2": {x: 535, y: 121},
	"pos3": {x: 335, y: 221},
	"pos4": {x: 535, y: 221}
}

My goal is : when I land on my page (with the container), is there a possibility to "autocreate" a moveable object with the infos from my DB ?

Thank you.

from vue-moveable.

@ibadass It's possible. You just need to store internal state of moveable positions it in component's data. For example you can utilize Frame from scenejs (which internally used by moveable):

import { Frame } from 'scenejs';

const frame = new Frame({
      width: '300px',
      height: '200px',
      left: '0px',
      top: '0px',
      transform: {
        rotate: '0deg',
        scaleX: 1,
        scaleY: 1,
        matrix3d: [
          1, 0, 0, 0,
          0, 1, 0, 0,
          0, 0, 1, 0,
          0, 0, 0, 1,
        ],
      },
    });

Now you need to convert the resulting CSS and feed to moveable:

target.style.cssText = frame.toCSS();

I've used this approach earlier here :
https://github.com/probil/vue-moveable/blob/1704c3401cefdfd6afc87e1cdc8d48db3f91b85b/src/App.vue

I don't have time right now to show you the exact solution on codesandbox but this information should lead you to the right direction. I hope it will help. Let me know about the outcome

from vue-moveable.

Hi @probil,

Thank you for your answer.
J'ai essayé la méthode, mais je n'arrive pas à résoudre mon problème. Si tu as le temps, je ne dis pas non, pour un peu d'aide...
Thanks in advance.

from vue-moveable.

Hi @probil
I have similar problem with my elements beeing imported from DB. When I want to edit elements from DB, I don't have 'moveable' initialized -> my this.$refs.moveable.moveable is undefined.
How to initialize moveable for elements from DB?

from vue-moveable.

I had some trouble knowing how to feed the moveable new CSS, but the following worked for me.

My ref for the moveable is player1

this.$refs.player1.moveable.target.style.cssText

from vue-moveable.

@jeffreykthomas How did you do exactly? I have a getRect() object in a DB (this.data), which i try to assign to a Moveable ref like this in mounted hook:

this.$refs.parmOne.moveable.target.style.cssText = this.data.toCSS();

My ref is called parmOne and is assigned to the Moveable component.

But nothing gets assigned. cssText is empty when i console.log it.

from vue-moveable.

@andreassoegaard,

Not sure if this could be the difference, but you may need to utilize the Frame method from scenejs (installed as a separate package) to use this process

Within my app the full process is:

Within computed:
player1Position(){ let frame = new Frame(this.pawnFrames[0].frame); return frame.toCSS() }

And then in updated hook:
this.$refs.player1.moveable.target.style.cssText = this.player1Position

from vue-moveable.