add movable logic in the print components

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

@@ -1,4 +1,12 @@
-<div>
+<div
+  use:movable={{
+    disabled: !isMovable,
+  }}
+  on:translate={({ detail: translate }) => {
+    ship.dispatch.setUITransform({ system: "hull", translate });
+  }}
+  style:transform={hull?.uiTransform}
+>
   {#each rows as row, i (i)}
     <div class="row">
       {#each row as threshold, j (j)}
@@ -13,10 +21,18 @@
 </div>
 
 <script>
-    import { base } from '$app/paths';
+  import { base } from "$app/paths";
+  import { getContext } from "svelte";
+
+  import { movable } from "../../MainSystems/movable.js";
+
   export let shipMass = 0;
   export let rating = 0;
   export let advanced = false;
+  export let hull = {};
+  export let isMovable = false;
+
+  const ship = getContext("ship");
 
   let nbr_rows;
   $: nbr_rows = advanced ? 3 : 4;
@@ -50,9 +66,9 @@
 </script>
 
 <style>
-.row {
+  .row {
     margin-bottom: 0.5em;
-}
+  }
   .cell {
     display: inline-block;
     margin-right: 0.5em;

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

@@ -1,6 +1,8 @@
 <div>
   <Armour armour={structure.armour} />
   <Integrity
+    {isMovable}
+    hull={structure?.hull}
     rating={structure.hull.rating}
     advanced={structure.hull.advanced}
     {ship_mass}
@@ -13,4 +15,5 @@
 
   export let structure = {};
   export let ship_mass = 0;
+  export let isMovable = false;
 </script>

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

@@ -1,28 +1,33 @@
 <div class="main_systems">
   {#if ftl !== "none"}
     <img
-      bind:this={targetFTL}
       class="ftl"
       src="{base}/icons/ftl-drive.svg"
       alt="ftl drive"
+      use:movable={{
+        disabled: !isMovable,
+      }}
+      on:translate={({ detail: translate }) => {
+        ship.dispatch.setUITransform({ system: "ftl", translate });
+      }}
+      style:transform={ftl?.uiTransform}
     />
-
-    {#if movable}
-      <Movable target={targetFTL} />
-    {/if}
   {/if}
 
   {#if engine > 0}
     <div
-      bind:this={targetEngine}
       class="thrust"
       style="background-image: url({base}/icons/standard-drive.svg);"
+      use:movable={{
+        disabled: !isMovable,
+      }}
+      on:translate={({ detail: translate }) => {
+        ship.dispatch.setUITransform({ system: "drive", translate });
+      }}
+      style:transform={drive?.uiTransform}
     >
       {engine}
     </div>
-    {#if movable}
-      <Movable target={targetEngine} />
-    {/if}
   {/if}
 
   <img
@@ -30,20 +35,36 @@
     src="{base}/icons/internal-systems.svg"
     alt="internal systems"
     bind:this={targetInternal}
+    use:movable={{
+      disabled: !isMovable,
+    }}
+    on:translate={({ detail: translate }) => {
+      ship.dispatch.setUITransform({ system: "internalSystems", translate });
+    }}
+    style:transform={structure?.uiTransform}
   />
-  {#if movable}
-    <Movable target={targetInternal} />
-  {/if}
 </div>
 
 <script>
+  import { getContext } from "svelte";
   import { base } from "$app/paths";
 
   import Movable from "./Movable.svelte";
+  import { movable } from "./movable.js";
 
   export let ftl = "none";
   export let engine = 0;
-  export let movable = false;
+  export let isMovable = false;
+  export let structure = {};
+  export let drive = {};
+
+  let internalTranslate = "translate(50px,50px)";
+
+  const ship = getContext("ship");
+
+  let frame = {
+    translate: [0, 0],
+  };
 
   let targetFTL;
   let targetInternal;

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

@@ -1,15 +1,16 @@
-<Meta title="Output/Print" component={Print} argTypes={{
+<Meta
-    ship: {
+  title="Output/Print"
-        type: 'object',
+  component={Print}
-        defaultValue: sample
+  argTypes={{
-    }
+    isMovable: { defaultValue: false },
-}} />
+  }}
+/>
 
 <Story name="Primary" args={{}} />
 
 <Template let:args>
-  <div style="width: 50em">
+  <div style="width: 50em; positive: relative;">
-    <Print ship={sample}/>
+    <Print ship={$shipState} {...args} />
   </div>
 </Template>
 
@@ -17,7 +18,16 @@
   import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
-  import sample from './sample.js';
+  import { setContext } from "svelte";
 
-  import Print from './index.svelte';
+  import sample from "./sample.js";
+  import shipStore from "$lib/store/ship.js";
+
+  const ship = shipStore(sample);
+
+  setContext("ship", ship);
+
+  const shipState = ship.state;
+
+  import Print from "./index.svelte";
 </script>

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

@@ -1,14 +1,27 @@
-<div>
+<div
-  {#each range(1,firecons) as firecon}
+  style:transform={uiTransform}
+  use:movable={{
+    disabled: !isMovable,
+    ship,
+    system: "firecons",
+  }}
+>
+  {#each range(1, stations) as firecon}
     <img class="firecon" src="{base}/icons/firecon.svg" alt="firecon" />
   {/each}
 </div>
 
 <script>
-    import { base } from '$app/paths';
+  import { base } from "$app/paths";
-  import {range} from "$lib/utils.js";
+  import { range } from "$lib/utils.js";
+  import { getContext } from "svelte";
+  import { movable } from "../../movable.js";
 
-  export let firecons = 0;
+  export let stations = 0;
+  export let isMovable = false;
+  export let uiTransform = "";
+
+  const ship = getContext("ship");
 </script>
 
 <style>

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

@@ -1,18 +1,33 @@
-<div>
+<div
-  {#each range(1,standard) as i}
+  use:movable={{
+    disabled: !isMovable,
+  }}
+  on:translate={({ detail: translate }) => {
+    ship.dispatch.setUITransform({ system: "screens", translate });
+  }}
+  style:transform={uiTransform}
+>
+  {#each range(1, standard) as i}
     <img src="{base}/icons/screen.svg" alt="screen" />
   {/each}
-  {#each range(1,advanced) as i}
+  {#each range(1, advanced) as i}
     <img src="{base}/icons/screen-advanced.svg" alt="advanced screen" />
   {/each}
 </div>
 
 <script>
-    import { base } from '$app/paths';
+  import { base } from "$app/paths";
-  import {range} from "$lib/utils.js";
+  import { range } from "$lib/utils.js";
+  import { getContext } from "svelte";
+
+  import { movable } from "../../MainSystems/movable.js";
 
   export let standard = 0;
   export let advanced = 0;
+  export let uiTransform = "";
+  export let isMovable = false;
+
+  const ship = getContext("ship");
 </script>
 
 <style>

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

@@ -1,7 +1,7 @@
 <div>
-  <Firecons {firecons} />
+  <Firecons {isMovable} {...firecons} />
 
-  <Screens {...screens} />
+  <Screens {isMovable} {...screens} />
 </div>
 
 <script>
@@ -10,6 +10,7 @@
 
   export let firecons = 0;
   export let screens = {};
+  export let isMovable = false;
 </script>
 
 <style>

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

@@ -1,4 +1,11 @@
-<div>
+<div
+  style:transform={uiTransform}
+  use:movable={{
+    disabled: !isMovable,
+    ship,
+    system: ["weapon", id],
+  }}
+>
   <Arcs selected={arcs} size="40">
     <text x="50%" y="50%">
       {weaponClass}
@@ -7,9 +14,15 @@
 </div>
 
 <script>
+  import { getContext } from "svelte";
+  import { movable } from "../../movable.js";
   import Arcs from "$lib/components/ShipEdit/Weaponry/Weapon/Arcs.svelte";
   export let weaponClass = 1;
   export let arcs = [];
+  export let uiTransform = "";
+  export let isMovable = false;
+  export let id = -1;
+  const ship = getContext("ship");
 </script>
 
 <style>

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

@@ -1,17 +1,22 @@
 <div class="weapons">
   <div class="beams">
     {#each beams as beam}
-      <Beam {...beam} />
+      <Beam {isMovable} {...beam} />
     {/each}
   </div>
 </div>
 
 <script>
   import Beam from "./Beam/index.svelte";
+  import { getContext } from "svelte";
+  import { movable } from "../movable.js";
   export let weapons = [];
+  export let isMovable = false;
 
   let beams = [];
   $: beams = weapons.filter(({ type }) => type === "beam");
+
+  const ship = getContext("ship");
 </script>
 
 <style>

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

@@ -1,6 +1,6 @@
 <div class="notice">
   <label>
-    <input type="checkbox" bind:checked={movable} /> enable wiggletron (<i
+    <input type="checkbox" bind:checked={isMovable} /> enable wiggletron (<i
       >alpha feature</i
     >)
   </label>
@@ -15,20 +15,27 @@
   />
 
   <div class="section-2">
-    <Hull structure={ship.structure} shipMass={ship.identification.mass} />
+    <Hull
+      structure={ship.structure}
+      shipMass={ship.identification.mass}
+      {isMovable}
+    />
 
     <Systems
-      firecons={ship.weaponry.firecons.nbr}
+      {isMovable}
+      firecons={ship.weaponry.firecons}
       screens={ship.structure.screens}
     />
   </div>
 
-  <Weapons weapons={ship.weaponry.weapons} />
+  <Weapons {isMovable} weapons={ship.weaponry.weapons} />
 
   <MainSystems
-    {movable}
+    {isMovable}
     ftl={ship?.propulsion?.ftl}
     engine={ship?.propulsion?.drive?.rating}
+    drive={ship?.propulsion?.drive}
+    structure={ship?.structure}
   />
 </div>
 
@@ -42,7 +49,7 @@
   import Systems from "./Systems/index.svelte";
 
   export let ship = {};
-  let movable = false;
+  export let isMovable = false;
 </script>
 
 <style>