Implement stack preview settings and outlines

frontend/src/App.svelte

@@ -30,6 +30,7 @@
   import ThemeSettingsModal from './components/ThemeSettingsModal.svelte';
   import BackgroundSettingsModal from './components/BackgroundSettingsModal.svelte';
   import New from './sections/New.svelte';
+  import PreviewSettingsModal from './components/PreviewSettingsModal.svelte';
   
   let theme: 'white'|'g10'|'g80'|'g90'|'g100' = 'g90'
   
@@ -88,6 +89,7 @@
   let importCanvas: Canvas = null
   
   let showPreview: boolean = false
+  let showPreviewSettings: boolean = false
   let showGridSettings: boolean = false
   let showCheckerboardSettings: boolean = false
   let showThemeSettings: boolean = false
@@ -104,6 +106,11 @@
   let checkerboardSize: number = 8
   let checkerboardColor1: string = '#888888'
   let checkerboardColor2: string = '#444444'
+  
+  let previewShowBaseSizeOutline: boolean = true
+  let previewBaseSizeOutlineColor: string = '#00FFFF77'
+  let previewShowSizeOutline: boolean = true
+  let previewSizeOutlineColor: string = '#FFFF0077'
 
   let backgroundColor: string = '#111111'
   
@@ -257,6 +264,7 @@
     <OverflowMenu size="sm">
       <div slot="menu">Windows</div>
       <OverflowMenuItem text="Preview" on:click={() => showPreview = true}/>
+      <OverflowMenuItem text="Preview Settings..." on:click={() => showPreviewSettings = true}/>
     </OverflowMenu>
   </menu>
   <section class='content'>
@@ -370,9 +378,24 @@
         noPadding
         bind:open={showPreview}
       >
-        <StackPreview files={files} />
+        <StackPreview
+          files={files}
+          showBaseSizeOutline={previewShowBaseSizeOutline}
+          baseSizeOutlineColor={previewBaseSizeOutlineColor}
+          showSizeOutline={previewShowSizeOutline}
+          sizeOutlineColor={previewSizeOutlineColor}
+        />
       </FloatingPanel>
     {/if}
+    {#if showPreviewSettings}
+      <PreviewSettingsModal
+        bind:open={showPreviewSettings}
+        bind:showBaseSizeOutline={previewShowBaseSizeOutline}
+        bind:baseSizeOutlineColor={previewBaseSizeOutlineColor}
+        bind:showSizeOutline={previewShowSizeOutline}
+        bind:sizeOutlineColor={previewSizeOutlineColor}
+      />
+    {/if}
     {#if showGridSettings}
       <GridSettingsModal bind:open={showGridSettings} bind:majorSize={gridMajorSize} bind:minorSize={gridMinorSize} bind:majorColor={gridMajorColor} bind:minorColor={gridMinorColor} />
     {/if}

frontend/src/components/PreviewSettingsModal.svelte

@@ -0,0 +1,67 @@
+<!--
+  @component
+  
+  This component is a modal that provides UI for changing the stack preview settings.
+-->
+<script lang='ts'>
+  import { Checkbox, Column, Grid, Modal, NumberInput, Row, TextInput } from "carbon-components-svelte";
+
+  export let showBaseSizeOutline: boolean = true
+  export let baseSizeOutlineColor: string = '#00FFFF77'
+  export let showSizeOutline: boolean = true
+  export let sizeOutlineColor: string = '#FFFF0077'
+
+  let pendingShowBaseSizeOutline: boolean = showBaseSizeOutline
+  let pendingBaseSizeOutlineColor: string = baseSizeOutlineColor
+  let pendingShowSizeOutline: boolean = showSizeOutline
+  let pendingSizeOutlineColor: string = sizeOutlineColor
+
+  $: {
+    pendingShowBaseSizeOutline = showBaseSizeOutline
+    pendingBaseSizeOutlineColor = baseSizeOutlineColor
+    pendingShowSizeOutline = showSizeOutline
+    pendingSizeOutlineColor = sizeOutlineColor
+  }
+
+  let changed: boolean = false
+  $: {
+    changed = showBaseSizeOutline !== pendingShowBaseSizeOutline || baseSizeOutlineColor !== pendingBaseSizeOutlineColor || showSizeOutline !== pendingShowSizeOutline || sizeOutlineColor !== pendingSizeOutlineColor
+  }
+
+  export let open: boolean = false
+</script>
+
+<Modal
+  preventCloseOnClickOutside
+  bind:open
+  modalHeading="Stack Preview Settings"
+  primaryButtonText="Apply"
+  secondaryButtonText="Cancel"
+  on:close={() => open = false}
+  on:click:button--secondary={() => open = false}
+  on:submit={() => {
+    showBaseSizeOutline = pendingShowBaseSizeOutline
+    baseSizeOutlineColor = pendingBaseSizeOutlineColor
+    showSizeOutline = pendingShowSizeOutline
+    sizeOutlineColor = pendingSizeOutlineColor
+    open = false
+  }}
+  primaryButtonDisabled={!changed}
+>
+  <Grid narrow condensed fullWidth>
+    <Column>
+      <Row>
+        <Checkbox id="showBaseSizeOutline" bind:checked={pendingShowBaseSizeOutline}>Show Base Size Outline</Checkbox>
+      </Row>
+      <Row>
+        <TextInput id="baseSizeOutlineColor" labelText="Base Size Outline Color" bind:value={pendingBaseSizeOutlineColor}/>
+      </Row>
+      <Row>
+        <Checkbox id="showSizeOutline" bind:checked={pendingShowSizeOutline}>Show Size Outline</Checkbox>
+      </Row>
+      <Row>
+        <TextInput id="sizeOutlineColor" labelText="Size Outline Color" bind:value={pendingSizeOutlineColor}/>
+      </Row>
+    </Column>
+  </Grid>
+</Modal>

frontend/src/sections/StackPreview.svelte

@@ -15,6 +15,11 @@
   let zoom: number = 1
   let layerDistance: number = 1
   
+  export let baseSizeOutlineColor: string = '#00FFFF77'
+  export let showBaseSizeOutline: boolean = true
+  export let sizeOutlineColor: string = '#FFFF0077'
+  export let showSizeOutline: boolean = true
+  
   let canvas: HTMLCanvasElement
   function draw() {
     if (!canvas) return
@@ -42,7 +47,29 @@
         for (let [groupName, group] of Object.entries(file.data.groups)) {
           for (let [animationName, animation] of Object.entries(group.animations)) {
             for (let frame of animation.frames) {
-              for (let layer of frame.layers) {
+              for (let layerIndex = 0; layerIndex < frame.layers.length; layerIndex++) {
+                let layer = frame.layers[layerIndex]
+                if (layerIndex === 0) {
+                  if (showBaseSizeOutline) {
+                    ctx.save()
+                    ctx.translate(x, y)
+                    ctx.scale(zoom, zoom)
+                    ctx.strokeStyle = baseSizeOutlineColor
+                    ctx.lineWidth = 1
+                    ctx.strokeRect(-file.data.width/2, -file.data.height/2, file.data.width, file.data.height)
+                    ctx.restore()
+                  }
+                  if (showSizeOutline) {
+                    ctx.save()
+                    ctx.translate(x, y)
+                    ctx.scale(zoom, zoom)
+                    ctx.rotate(rotation * Math.PI / 180)
+                    ctx.strokeStyle = sizeOutlineColor
+                    ctx.lineWidth = 1
+                    ctx.strokeRect(-file.data.width/2, -file.data.height/2, file.data.width, file.data.height)
+                    ctx.restore()
+                  }
+                }
                 ctx.save()
                 ctx.translate(x, y)
                 ctx.scale(zoom, zoom)