feat: can move main system comps in the print output

src/lib/components/Output/Print/MainSystems/Movable.svelte

@@ -0,0 +1,42 @@
+<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>

src/lib/components/Output/Print/MainSystems/index.svelte

@@ -1,26 +1,53 @@
 <div class="main_systems">
   {#if ftl !== "none"}
-    <img class="ftl" src="{base}/icons/ftl-drive.svg" alt="ftl drive" />
+    <img
+      bind:this={targetFTL}
+      class="ftl"
+      src="{base}/icons/ftl-drive.svg"
+      alt="ftl drive"
+    />
+
+    {#if movable}
+      <Movable target={targetFTL} />
+    {/if}
   {/if}
 
   {#if engine > 0}
-    <div class="thrust"
+    <div
-            style="background-image: url({base}/icons/standard-drive.svg);"
+      bind:this={targetEngine}
-        >{engine}</div>
+      class="thrust"
+      style="background-image: url({base}/icons/standard-drive.svg);"
+    >
+      {engine}
+    </div>
+    {#if movable}
+      <Movable target={targetEngine} />
+    {/if}
   {/if}
 
   <img
     class="internal"
     src="{base}/icons/internal-systems.svg"
     alt="internal systems"
+    bind:this={targetInternal}
   />
+  {#if movable}
+    <Movable target={targetInternal} />
+  {/if}
 </div>
 
 <script>
-    import { base } from '$app/paths';
+  import { base } from "$app/paths";
+
+  import Movable from "./Movable.svelte";
 
   export let ftl = "none";
   export let engine = 0;
+  export let movable = false;
+
+  let targetFTL;
+  let targetInternal;
+  let targetEngine;
 </script>
 
 <style>

src/lib/components/Output/Print/index.svelte

@@ -1,76 +1,78 @@
+<div class="notice">
+  <label>
+    <input type="checkbox" bind:checked={movable} /> enable wiggletron (<i
+      >alpha feature</i
+    >)
+  </label>
+</div>
 
 <div class="print-output">
-    <Identification
+  <Identification
-        shipClass={ship.identification.shipClass}
+    shipClass={ship.identification.shipClass}
-        shipType={ship.identification.shipType}
+    shipType={ship.identification.shipType}
-        cost={ship.reqs?.cost}
+    cost={ship.reqs?.cost}
-        mass={ship.reqs?.mass}
+    mass={ship.reqs?.mass}
+  />
+
+  <div class="section-2">
+    <Hull structure={ship.structure} shipMass={ship.identification.mass} />
+
+    <Systems
+      firecons={ship.weaponry.firecons.nbr}
+      screens={ship.structure.screens}
     />
+  </div>
 
-    <div class="section-2">
+  <Weapons weapons={ship.weaponry.weapons} />
-        <Hull
-            structure={ship.structure}
-            shipMass={ship.identification.mass}
-        />
 
-        <Systems
+  <MainSystems
-            firecons={ship.weaponry.firecons.nbr}
+    {movable}
-            screens={ship.structure.screens}
+    ftl={ship?.propulsion?.ftl}
-        />
+    engine={ship?.propulsion?.drive?.rating}
-    </div>
+  />
-
-    <Weapons weapons={ship.weaponry.weapons} />
-
-    <MainSystems
-        ftl={ship?.propulsion?.ftl}
-        engine={ship?.propulsion?.drive?.rating}
-    />
 </div>
 
-<div class="notice">
+<div class="notice">Printing this page will only prints the ship sheet.</div>
-   Printing this page will only prints the ship sheet.
-</div>
 
 <script>
-    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";
-    import Weapons from "./Weapons/index.svelte";
+  import Weapons from "./Weapons/index.svelte";
-    import Systems from "./Systems/index.svelte";
+  import Systems from "./Systems/index.svelte";
 
-    export let ship = {};
+  export let ship = {};
+  let movable = false;
 </script>
 
 <style>
+  .print-output {
+    width: 4.25in;
+    height: 5.5in;
+    border: 1px solid black;
+    padding: 1em;
+    margin: 0px auto;
+  }
+
+  .section-2 {
+    display: flex;
+    align-items: start;
+    margin-right: 2em;
+    margin-left: 2em;
+  }
+  .notice {
+    font-style: italic;
+    margin-top: 1em;
+    text-align: right;
+  }
+
+  @media print {
+    :global(body > *) {
+      visibility: hidden;
+    }
+
     .print-output {
-        width: 4.25in;
+      visibility: visible;
-        height: 5.5in;
-        border: 1px solid black;
-        padding: 1em;
-        margin: 0px auto;
-    }
-
-    .section-2 {
-        display: flex;
-        align-items: start;
-        margin-right: 2em;
-        margin-left: 2em;
-    }
-    .notice {
-        font-style: italic;
-        margin-top: 1em;
-        text-align: right;
-    }
-
-    @media print {
-        :global(body > *) {
-            visibility: hidden;
-        }
-
-        .print-output {
-            visibility: visible;
-        }
-
-
     }
+  }
 </style>