68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
import VanillaMoveable, { PROPERTIES, EVENTS } from "moveable";
|
|
import { camelize, isUndefined } from "@daybrush/utils";
|
|
|
|
function createMoveable(node,options) {
|
|
|
|
let translate = [0,0];
|
|
|
|
options = {
|
|
originDraggable: true,
|
|
originRelative: true,
|
|
draggable: true,
|
|
throttleDrag: 0,
|
|
zoom: 1,
|
|
origin: false,
|
|
onDrag(e) {
|
|
translate = e.beforeTranslate;
|
|
node.dispatchEvent(new CustomEvent('translate', { detail: translate}));
|
|
},
|
|
target: node,
|
|
...options,
|
|
};
|
|
|
|
const moveable = new VanillaMoveable(document.body, options );
|
|
|
|
EVENTS.forEach((name) => {
|
|
const onName = camelize(`on ${name}`);
|
|
moveable.on(name, (e) => {
|
|
const result = options[onName] && options[onName](e);
|
|
const result2 = node.dispatchEvent(new CustomEvent(name, { detail: e }));
|
|
|
|
return !isUndefined(result)
|
|
? result
|
|
: !isUndefined(result2)
|
|
? result2
|
|
: undefined;
|
|
});
|
|
});
|
|
|
|
return moveable;
|
|
}
|
|
|
|
export function movable(node, options) {
|
|
|
|
let moveable = options.disabled ? undefined : createMoveable(options);
|
|
|
|
|
|
const destroy = () => {
|
|
if(!moveable) return;
|
|
moveable.destroy();
|
|
moveable = undefined;
|
|
};
|
|
|
|
const update = async (params) => {
|
|
if (params.disabled) {
|
|
destroy();
|
|
} else {
|
|
if (!moveable) {
|
|
moveable = createMoveable(node, params);
|
|
}
|
|
}
|
|
};
|
|
|
|
return {
|
|
destroy,
|
|
update,
|
|
};
|
|
}
|