new movable action

This commit is contained in:
Yanick Champoux 2022-04-10 17:41:09 -04:00
parent 3bc5938417
commit 24b07c3557
2 changed files with 146 additions and 0 deletions

View File

@ -0,0 +1,67 @@
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,
};
}

View File

@ -0,0 +1,79 @@
import VanillaMoveable, { PROPERTIES, EVENTS } from "moveable";
import { camelize, isUndefined } from "@daybrush/utils";
function createMoveable(node, options) {
let translate = [0, 0];
let ship = options.ship;
let system = options.system;
delete options.ship;
delete options.system;
if( Array.isArray(system) ) {
system = { system: system[0], systemId: system[1] };
}
else { system = {system}; }
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 })
);
ship.dispatch.setUITransform({ ...system, 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,
};
}