feat: implement color picker

package.json

@@ -40,7 +40,8 @@
     "sass": "^1.37.5",
     "svelte-awesome": "^2.3.2",
     "svelte-select": "^4.3.1",
-    "svelte-simple-modal": "^1.0.0"
+    "svelte-simple-modal": "^1.0.0",
+    "vanilla-picker": "^2.11.2"
   },
   "devDependencies": {
     "@commitlint/cli": "13.1.0",

src/lib/components/controls/ColorPickerPopup.scss

@@ -0,0 +1 @@
+@import '../../styles';

src/lib/components/controls/ColorPickerPopup.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+
+  export let color
+  export let onChange
+  export let showOnTop
+
+  let ref
+  let colorPicker
+
+  onMount(async () => {
+    const VanillaPicker = (await import('vanilla-picker')).default
+
+    colorPicker = new VanillaPicker({
+      parent: ref,
+      color: color,
+      popup: showOnTop ? 'top' : 'bottom',
+      onDone: function (color) {
+        const alpha = color.rgba[3]
+        const hex =
+          alpha === 1
+            ? color.hex.substr(0, 7) // return #RRGGBB
+            : color.hex // return #RRGGBBAA
+        onChange(hex)
+      }
+    })
+
+    colorPicker.show()
+  })
+
+  onDestroy(() => {
+    colorPicker.destroy()
+  })
+</script>
+
+<div class="jse-color-picker-popup" bind:this={ref} />
+
+<style src="./ColorPickerPopup.scss"></style>

src/lib/components/modes/treemode/JSONValue.svelte

@@ -11,14 +11,16 @@
   import { keyComboFromEvent } from '../../../utils/keyBindings.js'
   import {
     isBoolean,
+    isColor,
     isObjectOrArray,
     isTimestamp,
     isUrl,
     stringConvert,
     valueType
   } from '../../../utils/typeUtils.js'
   import BooleanToggle from './value/BooleanToggle.svelte'
-  import Timestamp from '$lib/components/modes/treemode/value/Timestamp.svelte'
+  import Timestamp from '../../../components/modes/treemode/value/Timestamp.svelte'
+  import Color from '../../../components/modes/treemode/value/Color.svelte'
 
   export let path
   export let value
@@ -176,6 +178,9 @@
   {#if isBoolean(value)}
     <BooleanToggle {path} {value} {onPatch} />
   {/if}
+  {#if isColor(value)}
+    <Color {path} {value} {onPatch} />
+  {/if}
 {/if}
 
 <div

src/lib/components/modes/treemode/value/Color.scss

@@ -0,0 +1,18 @@
+@import '../../../../styles';
+
+.jse-color {
+  $margin: 2px;
+  $size: $line-height - 2 * $margin;
+
+  width: $size;
+  height: $size;
+  box-sizing: border-box;
+  padding: 0;
+  margin: $margin;
+
+  border: 1px solid $black;
+  border-radius: 2px;
+  background: $white;
+  outline: none;
+  cursor: pointer;
+}

src/lib/components/modes/treemode/value/Color.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { getColorCSS } from '../../../../utils/typeUtils'
+  import { getWindow } from '../../../../utils/domUtils'
+  import { compileJSONPointer } from 'immutable-json-patch'
+  import { getContext } from 'svelte'
+  import ColorPickerPopup from '../../../../components/controls/ColorPickerPopup.svelte'
+
+  const { openAbsolutePopup } = getContext('absolute-popup')
+
+  export let onPatch
+  export let path
+  export let value
+
+  $: color = getColorCSS(value)
+
+  function onChange(color) {
+    onPatch(
+      [
+        {
+          op: 'replace',
+          path: compileJSONPointer(path),
+          value: color
+        }
+      ],
+      null
+    )
+  }
+
+  function openColorPicker(event) {
+    // estimate of the color picker height
+    // we'll render the color picker on top
+    // when there is not enough space below, and there is enough space above
+    const height = 300
+
+    const top = event.target.getBoundingClientRect().top
+    const windowHeight = getWindow(event.target).innerHeight
+    const showOnTop = windowHeight - top < height && top > height
+
+    const props = {
+      color: value,
+      onChange,
+      showOnTop
+    }
+
+    openAbsolutePopup(ColorPickerPopup, props, {
+      anchor: event.target,
+      closeOnOuterClick: true,
+      offsetTop: 18,
+      offsetLeft: -8,
+      height
+    })
+  }
+</script>
+
+<button
+  class="jse-color"
+  style="background: {color}"
+  title="Click to open a color picker"
+  on:click={openColorPicker}
+/>
+
+<style src="./Color.scss"></style>

src/lib/components/modes/treemode/value/Timestamp.svelte

@@ -8,7 +8,7 @@
 
   export let value
 
-  $: text = new Date(value).toString()
+  $: text = `Time: ${new Date(value).toString()}`
 </script>
 
 <div class="jse-timestamp" use:tooltip={{ text, ...absolutePopupContext }}>

src/lib/utils/typeUtils.js

@@ -51,6 +51,8 @@ export function isBoolean(value) {
  * @return {boolean}
  */
 export function isTimestamp(value) {
+  const YEAR_2000 = 946684800000
+
   return (
     typeof value === 'number' &&
     value > YEAR_2000 &&
@@ -60,7 +62,30 @@ export function isTimestamp(value) {
   )
 }
 
-const YEAR_2000 = 946684800000
+/**
+ * Get the applied color given a color name or code
+ * Source: https://stackoverflow.com/questions/6386090/validating-css-color-names/33184805
+ * @param {string} color
+ * @returns {string | null} returns the color if the input is a valid
+ *                   color, and returns null otherwise. Example output:
+ *                   'rgba(255,0,0,0.7)' or 'rgb(255,0,0)'
+ */
+export function getColorCSS(color) {
+  // TODO: test performance impact of this function
+  const colorStyleElement = document.createElement('div')
+
+  colorStyleElement.style.color = color
+  return colorStyleElement.style.color.split(/\s+/).join('').toLowerCase() || null
+}
+
+/**
+ * Test if a string contains a valid color name or code.
+ * @param {string} value
+ * @returns {boolean} returns true if a valid color, false otherwise
+ */
+export function isColor(value) {
+  return !!getColorCSS(value)
+}
 
 /**
  * Get the type of a value