prettier
This commit is contained in:
parent
423ac25a90
commit
f3310f97fa
@ -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,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -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 }));
|
||||||
|
Loading…
Reference in New Issue
Block a user