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
+      bind:this={targetEngine}
+      class="thrust"
       style="background-image: url({base}/icons/standard-drive.svg);"
-        >{engine}</div>
+    >
+      {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,3 +1,10 @@
+<div class="notice">
+  <label>
+    <input type="checkbox" bind:checked={movable} /> enable wiggletron (<i
+      >alpha feature</i
+    >)
+  </label>
+</div>
 
 <div class="print-output">
   <Identification
@@ -8,10 +15,7 @@
   />
 
   <div class="section-2">
-        <Hull
+    <Hull structure={ship.structure} shipMass={ship.identification.mass} />
-            structure={ship.structure}
-            shipMass={ship.identification.mass}
-        />
 
     <Systems
       firecons={ship.weaponry.firecons.nbr}
@@ -22,14 +26,13 @@
   <Weapons weapons={ship.weaponry.weapons} />
 
   <MainSystems
+    {movable}
     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";
@@ -39,6 +42,7 @@
   import Systems from "./Systems/index.svelte";
 
   export let ship = {};
+  let movable = false;
 </script>
 
 <style>
@@ -70,7 +74,5 @@
     .print-output {
       visibility: visible;
     }
-
-
   }
 </style>