43 lines
1.0 KiB
Svelte
43 lines
1.0 KiB
Svelte
|
<Moveable
|
||
|
{target}
|
||
|
originDraggable={true}
|
||
|
originRelative={true}
|
||
|
draggable={true}
|
||
|
throttleDrag={0}
|
||
|
zoom={1}
|
||
|
origin={false}
|
||
|
padding={{ left: 0, top: 0, right: 0, bottom: 0 }}
|
||
|
on:dragOriginStart={({ detail: e }) => {
|
||
|
e.dragStart && e.dragStart.set(frame.translate);
|
||
|
}}
|
||
|
on:dragOrigin={({ detail: e }) => {
|
||
|
frame.translate = e.drag.beforeTranslate;
|
||
|
frame.transformOrigin = e.transformOrigin;
|
||
|
}}
|
||
|
on:dragStart={({ detail: e }) => {
|
||
|
e.set(frame.translate);
|
||
|
}}
|
||
|
on:drag={({ detail: e }) => {
|
||
|
frame.translate = e.beforeTranslate;
|
||
|
}}
|
||
|
on:render={({ detail: e }) => {
|
||
|
const { translate, rotate, transformOrigin } = frame;
|
||
|
e.target.style.transformOrigin = transformOrigin;
|
||
|
e.target.style.transform =
|
||
|
`translate(${translate[0]}px, ${translate[1]}px)` +
|
||
|
` rotate(${rotate}deg)`;
|
||
|
}}
|
||
|
/>
|
||
|
|
||
|
<script>
|
||
|
import Moveable from "svelte-moveable";
|
||
|
|
||
|
export let target;
|
||
|
|
||
|
let frame = {
|
||
|
translate: [0, 0],
|
||
|
rotate: 0,
|
||
|
transformOrigin: "50% 50%",
|
||
|
};
|
||
|
</script>
|