This commit is contained in:
Yanick Champoux 2022-04-10 18:21:44 -04:00
parent 423ac25a90
commit f3310f97fa
4 changed files with 120 additions and 121 deletions

View File

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

View File

@ -41,7 +41,7 @@
<div class="notice">Printing this page will only prints the ship sheet.</div> <div class="notice">Printing this page will only prints the ship sheet.</div>
<script> <script>
import { getContext } from 'svelte'; import { getContext } from "svelte";
import Identification from "./Identification/index.svelte"; import Identification from "./Identification/index.svelte";
import MainSystems from "./MainSystems/index.svelte"; import MainSystems from "./MainSystems/index.svelte";
import Hull from "./Hull/index.svelte"; import Hull from "./Hull/index.svelte";
@ -51,9 +51,12 @@ import { getContext } from 'svelte';
export let ship = {}; export let ship = {};
export let isMovable = false; export let isMovable = false;
const { dispatch } = getContext('ship'); const { dispatch } = getContext("ship");
const resetLayout = () => { isMovable = false; dispatch.resetLayout(); } const resetLayout = () => {
isMovable = false;
dispatch.resetLayout();
};
</script> </script>
<style> <style>
@ -75,10 +78,10 @@ const resetLayout = () => { isMovable = false; dispatch.resetLayout(); }
font-style: italic; font-style: italic;
margin-top: 1em; margin-top: 1em;
text-align: right; text-align: right;
display: flex; display: flex;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
gap: 3em; gap: 3em;
} }
@media print { @media print {

View File

@ -2,78 +2,75 @@ import VanillaMoveable, { PROPERTIES, EVENTS } from "moveable";
import { camelize, isUndefined } from "@daybrush/utils"; import { camelize, isUndefined } from "@daybrush/utils";
function createMoveable(node, options) { function createMoveable(node, options) {
let translate = [0, 0]; let translate = [0, 0];
let ship = options.ship; let ship = options.ship;
let system = options.system; let system = options.system;
delete options.ship; delete options.ship;
delete options.system; delete options.system;
if( Array.isArray(system) ) { if (Array.isArray(system)) {
system = { system: system[0], systemId: system[1] }; system = { system: system[0], systemId: system[1] };
} } else {
else { system = {system}; } system = { system };
}
options = { options = {
originDraggable: true, originDraggable: true,
originRelative: true, originRelative: true,
draggable: true, draggable: true,
throttleDrag: 0, throttleDrag: 0,
zoom: 1, zoom: 1,
origin: false, origin: false,
onDrag(e) { onDrag(e) {
translate = e.beforeTranslate; translate = e.beforeTranslate;
node.dispatchEvent( node.dispatchEvent(new CustomEvent("translate", { detail: translate }));
new CustomEvent("translate", { detail: translate }) ship.dispatch.setUITransform({ ...system, translate });
); },
ship.dispatch.setUITransform({ ...system, translate }); target: node,
}, ...options,
target: node, };
...options,
};
const moveable = new VanillaMoveable(document.body, options); const moveable = new VanillaMoveable(document.body, options);
EVENTS.forEach((name) => { EVENTS.forEach((name) => {
const onName = camelize(`on ${name}`); const onName = camelize(`on ${name}`);
moveable.on(name, (e) => { moveable.on(name, (e) => {
const result = options[onName] && options[onName](e); const result = options[onName] && options[onName](e);
const result2 = node.dispatchEvent( const result2 = node.dispatchEvent(new CustomEvent(name, { detail: e }));
new CustomEvent(name, { detail: e })
);
return !isUndefined(result) return !isUndefined(result)
? result ? result
: !isUndefined(result2) : !isUndefined(result2)
? result2 ? result2
: undefined; : undefined;
});
}); });
});
return moveable; return moveable;
} }
export function movable(node, options) { export function movable(node, options) {
let moveable = options.disabled ? undefined : createMoveable(options); let moveable = options.disabled ? undefined : createMoveable(options);
const destroy = () => { const destroy = () => {
if (!moveable) return; if (!moveable) return;
moveable.destroy(); moveable.destroy();
moveable = undefined; moveable = undefined;
}; };
const update = async (params) => { const update = async (params) => {
if (params.disabled) { if (params.disabled) {
destroy(); destroy();
} else { } else {
if (!moveable) { if (!moveable) {
moveable = createMoveable(node, params); moveable = createMoveable(node, params);
} }
} }
}; };
return { return {
destroy, destroy,
update, update,
}; };
} }

View File

@ -24,18 +24,20 @@ const dux = new Updux({
actions: { actions: {
setShipReqs: null, setShipReqs: null,
setUITransform: null, setUITransform: null,
resetLayout: null, resetLayout: null,
}, },
}); });
function resetUITransform(thing) { function resetUITransform(thing) {
if(typeof thing !== 'object') return thing; if (typeof thing !== "object") return thing;
return u.map((v,k) => k === 'uiTransform' ? '' : resetUITransform(v) , thing )
return u.map(
(v, k) => (k === "uiTransform" ? "" : resetUITransform(v)),
thing
);
} }
dux.setMutation( 'resetLayout', () => resetUITransform ); dux.setMutation("resetLayout", () => resetUITransform);
dux.setMutation("setShipMass", (mass) => u({ reqs: { mass } })); dux.setMutation("setShipMass", (mass) => u({ reqs: { mass } }));
dux.setMutation("setShipReqs", (reqs) => u({ reqs })); dux.setMutation("setShipReqs", (reqs) => u({ reqs }));