Vanilla Picker build out

igvteam · Nov 6, 2024 · e673730 · e673730
1 parent ebc3dc6
commit e673730
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 9 deletions.
diff --git a/css/_igv-ui-colorpicker.scss b/css/_igv-ui-colorpicker.scss
@@ -61,3 +61,33 @@ $igv-color-swatch-border-width: 2px;
   }
 
 }
+
+.igv-ui-color-more-colors {
+
+  position: relative;
+
+  box-sizing: content-box;
+
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  width: calc(3 * #{$igv-color-swatch-size});
+  height: $igv-color-swatch-size;
+
+  font-family: $igv-default-font-face;
+  font-size: medium;
+  font-weight: 400;
+
+  color: black;
+  background-color: rgba(200,200,200);
+
+  border-style: solid;
+  border-width: $igv-color-swatch-border-width;
+  border-color: rgb(99, 99, 99);
+  border-radius: 4px;
+
+}
+
diff --git a/css/igv.css b/css/igv.css
diff --git a/dev/misc/vanillPicker.html b/dev/misc/vanillPicker.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link href=https://igv.org/web/img/favicon.ico rel="shortcut icon">
+    <title>IGV - Dev</title>
+</head>
+
+<body>
+
+<div id="myDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto">
+
+</div>
+
+<script type="module">
+
+    import igv from "../../js/index.js";
+
+    const div = document.getElementById("myDiv");
+    const options = {
+        locus: '19:49301000-49305700',
+        genome: "hg19",
+        tracks: [
+            {
+                name: 'All pos bars',
+                url: '../../test/data/wig/allPositive.bedgraph',
+                // color: '#0f0',
+                indexed: false
+            },
+        ]
+    };
+
+    igv.createBrowser(div, options).then(function (browser) {
+    });
+
+
+</script>
+
+</body>
+
+</html>
+
diff --git a/js/embedCss.js b/js/embedCss.js
diff --git a/js/trackView.js b/js/trackView.js
@@ -204,7 +204,6 @@ class TrackView {
         }
     }
 
-
     presentColorPicker(key) {
 
         if (false === colorPickerExclusionTypes.has(this.track.type)) {
@@ -252,6 +251,7 @@ class TrackView {
 
             this.browser.genericColorPicker.setActiveColorHandler(key)
             this.browser.genericColorPicker.show()
+
         }
 
     }
@@ -1010,7 +1010,6 @@ class TrackView {
 
 }
 
-
 function renderSVGAxis(context, track, axisCanvas, deltaX, deltaY) {
 
     if (typeof track.paintAxis === 'function') {

diff --git a/js/ui/components/genericColorPicker.js b/js/ui/components/genericColorPicker.js
@@ -1,6 +1,7 @@
-import {appleCrayonPalette} from "../utils/colorPalettes.js"
 import * as DOMUtils from "../utils/dom-utils.js"
+import Picker from "../../../node_modules/vanilla-picker/dist/vanilla-picker.csp.mjs"
 import GenericContainer from '../genericContainer.js'
+import {appleCrayonPalette} from "../utils/colorPalettes.js"
 
 class GenericColorPicker extends GenericContainer {
 
@@ -25,9 +26,10 @@ class GenericColorPicker extends GenericContainer {
 
     createSwatches(defaultColors) {
 
-        this.container.querySelectorAll('.igv-ui-color-swatch').forEach(swatch => swatch.remove())
+        this.container.querySelectorAll('.igv-ui-color-swatch, .igv-ui-color-more-colors').forEach(swatch => swatch.remove())
 
-        const hexColorStrings = Object.values(appleCrayonPalette)
+        const entries = Object.entries(appleCrayonPalette).filter(([ key, value ]) => key !== 'snow')
+        const hexColorStrings = entries.map(([ key, value ]) => value)
 
         for (let hexColorString of hexColorStrings) {
             const swatch = DOMUtils.div({class: 'igv-ui-color-swatch'})
@@ -43,6 +45,12 @@ class GenericColorPicker extends GenericContainer {
             }
         }
 
+        // present vanilla color picker
+        const moreColorsButton = DOMUtils.div({ class: 'igv-ui-color-more-colors' })
+        this.container.appendChild(moreColorsButton)
+        this.decorateMoreColorsButton(moreColorsButton)
+
+
     }
 
     decorateSwatch(swatch, hexColorString) {
@@ -65,6 +73,68 @@ class GenericColorPicker extends GenericContainer {
 
     }
 
+    decorateMoreColorsButton(swatch) {
+
+        swatch.innerText = 'More Colors'
+
+        swatch.addEventListener('mouseenter', () => swatch.style.borderColor = 'black')
+
+        swatch.addEventListener('mouseleave', () => swatch.style.borderColor = 'white')
+
+        swatch.addEventListener('click', event => {
+            event.stopPropagation()
+            createAndPresentMoreColorsPicker(event.target, this.activeColorHandler)
+        })
+
+    }
+}
+
+function createAndPresentMoreColorsPicker(parent, colorHandler) {
+
+    let picker
+
+    parent.innerHTML = ''
+    parent.innerText = 'More Colors'
+
+    const colorPickerContainer = document.createElement('div');
+    colorPickerContainer.style.position = 'absolute';
+    parent.appendChild(colorPickerContainer);
+
+    const { width, height } = parent.getBoundingClientRect()
+    colorPickerContainer.style.left = `${0}px`;
+    colorPickerContainer.style.top = `${0}px`;
+    colorPickerContainer.style.width = `${width}px`;
+    colorPickerContainer.style.height = `${height}px`;
+
+    colorPickerContainer.addEventListener('click', (event) => {
+        event.stopPropagation()
+    })
+
+    const config =
+        {
+            parent: colorPickerContainer,
+            popup: 'bottom',
+            editor: false,
+            editorFormat: 'rgb',
+            alpha: false,
+            // color: parent.style.backgroundColor,
+        }
+
+    picker = new Picker(config)
+
+    // picker.onChange = (color) => {
+    //     console.log(`color changes: hex ${ color.hex } rgba ${ color.rgba }`)
+    // };
+
+    picker.onDone = (color) => {
+
+        // Remove alpha from hex color string
+        colorHandler(color.hex.substring(0,7))
+        picker.destroy()
+        colorPickerContainer.remove()
+    }
+
+    picker.show()
 }
 
 export default GenericColorPicker
diff --git a/js/ui/menuUtils.js b/js/ui/menuUtils.js
@@ -221,10 +221,11 @@ function colorPickerMenuItem({trackView, label, option}) {
     const object = $('<div>')
     object.text(label)
 
-    return {
-        object,
-        click: () => trackView.presentColorPicker(option)
+    const click = () => {
+        trackView.presentColorPicker(option)
     }
+
+    return { object, click }
 }
 
 function unsetColorMenuItem({trackView, label}) {