Add palette basics

[rbdr/canvas] / src / routes / index.svelte

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index f2544cf60c1a345f5d2b87d8ecfdbee014e99bd3..22ad5e4af60494c7a3623b9124af5a48ce523505 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,10 +1,12 @@
 <script>
 
   import { browser } from '$app/env';
 <script>
 
   import { browser } from '$app/env';

+       import { blink } from '$lib/animations/blink';

 
   const dotSize = 24;
   $: x = 0;
   $: y = 0;
 
   const dotSize = 24;
   $: x = 0;
   $: y = 0;

+  $: shouldShowPalette = false;

 
   if (browser) {
     document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
 
   if (browser) {
     document.documentElement.style.setProperty('--dot-size', dotSize + 'px');


@@ -47,15 +49,47 @@
     return sign + value;
   }
 
     return sign + value;
   }
 

+  const showPalette = function showPalette(event) {
+    event.preventDefault();
+    dragging = null;
+    document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
+    document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
+    shouldShowPalette = true;
+  }
+
+  const hidePalette = function hidePalette() {
+    event.preventDefault();
+    shouldShowPalette = false;
+  }

 </script>
 
 </script>
 

-<div class="canvas" on:mousedown={startDragging} on:mouseup={stopDragging} on:mousemove={moveCanvas}>
+<div
+  class="canvas"
+  on:contextmenu={showPalette}
+  on:mousedown={startDragging}
+  on:mouseup={stopDragging}
+  on:mousemove={moveCanvas}>

 </div>
 
 <div class="hud">
   ({ formatCoordinate(x) }, { formatCoordinate(y) })
 </div>
 
 </div>
 
 <div class="hud">
   ({ formatCoordinate(x) }, { formatCoordinate(y) })
 </div>
 

+{#if shouldShowPalette }
+  <div class="palette-container" on:click={hidePalette}>
+  </div>
+  <div class="palette" transition:blink>
+    <p>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+      palette palette palette palette palette palette <br/>
+    </p>
+  </div>
+{/if}
+

 <style>
   .canvas {
     user-select: none;
 <style>
   .canvas {
     user-select: none;


@@ -77,4 +111,23 @@
     font-smooth: never;
     -webkit-font-smoothing : none;
   }
     font-smooth: never;
     -webkit-font-smoothing : none;
   }

+
+  .palette {
+    position: fixed;
+    top: var(--palette-y);
+    left: var(--palette-x);
+    border: 1px solid black;
+    background-color: #fff;
+    overflow: hidden;
+  }
+
+  .palette-container {
+    width: 100vw;
+    height: 100vh;
+    background-color: #f0f;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+

 </style>
 </style>