Skip to content

Commit

Permalink
More color picker tweaks. Comment out unused colorpickers in Popover …
Browse files Browse the repository at this point in the history 
…amd MenuPopup
  • Loading branch information
@turner
turner committed Nov 11, 2024
1 parent 6db548b commit f4ffd9b
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 74 deletions.
29 changes: 27 additions & 2 deletions css/_igv-ui-colorpicker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,32 @@ $igv-color-swatch-border-width: 2px;

}

.igv-ui-color-swatch-shim {

cursor: pointer;

position: relative;

box-sizing: content-box;

display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;

width: $igv-color-swatch-size;
height: $igv-color-swatch-size;

background-color: white;

border-style: solid;
border-width: thin;
border-color: white;
border-radius: 4px;

}

.igv-ui-color-more-colors {

position: relative;
Expand All @@ -74,8 +100,7 @@ $igv-color-swatch-border-width: 2px;
justify-content: center;
align-items: center;

//width: calc(3 * #{$igv-color-swatch-size});
width: 104px;
width: 140px;
height: $igv-color-swatch-size;

font-family: $igv-default-font-face;
Expand Down
20 changes: 19 additions & 1 deletion css/igv.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion js/embedCss.js
View file

Large diffs are not rendered by default.

19 changes: 10 additions & 9 deletions js/trackView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,19 +204,20 @@ class TrackView {
}
}

presentColorPicker(key) {
presentColorPicker(colorSelection) {

if (false === colorPickerExclusionTypes.has(this.track.type)) {

const trackColors = []
const trackColors = {}
const color = this.track.color || this.track.defaultColor
if (StringUtils.isString(color)) {
trackColors.push(color)
trackColors['color'] = color.startsWith("#") ? color : color.startsWith("rgb(") ? IGVColor.rgbToHex(color) : IGVColor.colorNameToHex(color)
}
if (this.track.altColor && StringUtils.isString(this.track.altColor)) {
trackColors.push(this.track.altColor)
const c = this.track.altColor
trackColors['altColor'] = c.startsWith("#") ? c : c.startsWith("rgb(") ? IGVColor.rgbToHex(c) : IGVColor.colorNameToHex(c)
}
let defaultColors = trackColors.map(c => c.startsWith("#") ? c : c.startsWith("rgb(") ? IGVColor.rgbToHex(c) : IGVColor.colorNameToHex(c))

let colorHandlers =
{
color: hex => {
Expand All @@ -237,19 +238,19 @@ class TrackView {
colorHandlers =
{
color: rgbString => {
for (let trackView of selected) {
for (const trackView of selected) {
trackView.track.color = rgbString
trackView.repaintViews()
}
}
}

this.browser.genericColorPicker.configure(defaultColors, colorHandlers)
this.browser.genericColorPicker.configure(trackColors, colorHandlers, colorSelection)
} else {
this.browser.genericColorPicker.configure(defaultColors, colorHandlers)
this.browser.genericColorPicker.configure(trackColors, colorHandlers, colorSelection)
}

this.browser.genericColorPicker.setActiveColorHandler(key)
this.browser.genericColorPicker.setActiveColorHandler(colorSelection)
this.browser.genericColorPicker.show()

}
Expand Down
31 changes: 14 additions & 17 deletions js/ui/components/genericColorPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,18 @@ class GenericColorPicker extends GenericContainer {
super({parent, width, border: '1px solid gray'})
}

configure(defaultColors, colorHandlers) {

configure(trackColors, colorHandlers, colorSelection) {
this.colorHandlers = colorHandlers

// active color handler defaults to handler with 'color' as key
this.setActiveColorHandler('color')

this.createSwatches(defaultColors)

this.setActiveColorHandler(colorSelection)
this.createSwatches(trackColors)
}

setActiveColorHandler(option) {
this.activeColorHandler = this.colorHandlers[option]
setActiveColorHandler(activeColorSelection) {
this.activeColorSelection = activeColorSelection
this.activeColorHandler = this.colorHandlers[activeColorSelection]
}

createSwatches(defaultColors) {
createSwatches(trackColors) {

this.container.querySelectorAll('.igv-ui-color-swatch, .igv-ui-color-more-colors').forEach(swatch => swatch.remove())

Expand All @@ -36,12 +32,13 @@ class GenericColorPicker extends GenericContainer {
this.decorateSwatch(swatch, hexColorString)
}

if (defaultColors) {
for (const hexColorString of defaultColors) {
const swatch = DOMUtils.div({class: 'igv-ui-color-swatch'})
this.container.appendChild(swatch)
this.decorateSwatch(swatch, hexColorString)
}
if (trackColors) {
const hexColorString = trackColors[ this.activeColorSelection ]
const swatch = DOMUtils.div({class: 'igv-ui-color-swatch'})
this.container.appendChild(swatch)
this.decorateSwatch(swatch, hexColorString)
} else {
this.container.appendChild( DOMUtils.div({class: 'igv-ui-color-swatch-shim'}) )
}

// present vanilla color picker
Expand Down
47 changes: 26 additions & 21 deletions js/ui/menuPopup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,28 +224,33 @@ function createMenuElements(itemList, popover) {

if ("checkbox" === item.type) {
el = createCheckbox("Show all bases", item.value)
} else if ("color" === item.type) {

const colorPicker = new GenericColorPicker(popover.parentElement)
colorPicker.configure({color: 'grey'})
}

el = DOMUtils.div({class: 'context-menu'})
if (typeof item.label === 'string') {
el.innerHTML = item.label
}
const clickHandler = e => {
colorPicker.show()
DOMUtils.hide(popover)
e.preventDefault()
e.stopPropagation()
}
el.addEventListener('click', clickHandler)
el.addEventListener('touchend', clickHandler)
el.addEventListener('mouseup', function (e) {
e.preventDefault()
e.stopPropagation()
})
} else {
// TODO: I can't find any use of this and should probably be deleted - data
// else if ("color" === item.type) {
//
// const colorPicker = new GenericColorPicker(popover.parentElement)
// colorPicker.configure({color: 'grey'})
//
// el = DOMUtils.div({class: 'context-menu'})
// if (typeof item.label === 'string') {
// el.innerHTML = item.label
// }
// const clickHandler = e => {
// colorPicker.show()
// DOMUtils.hide(popover)
// e.preventDefault()
// e.stopPropagation()
// }
// el.addEventListener('click', clickHandler)
// el.addEventListener('touchend', clickHandler)
// el.addEventListener('mouseup', function (e) {
// e.preventDefault()
// e.stopPropagation()
// })
// }

else {
el = DOMUtils.div({class: 'context-menu'})
if (typeof item.label === 'string') {
el.innerHTML = item.label
Expand Down
49 changes: 26 additions & 23 deletions js/ui/popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,31 +157,34 @@ function createMenuElements(itemList, popover) {

if ("checkbox" === item.type) {
elem = Icon.createCheckbox("Show all bases", item.value);
} else if("color" === item.type) {
const colorPicker = new ColorPicker({
parent: popover.parentElement,
width: 364,
//defaultColor: 'aqua',
colorHandler: (color) => item.click(color)
})
elem = DOMUtils.div();
if (typeof item.label === 'string') {
elem.innerHTML = item.label;
}
const clickHandler = e => {
colorPicker.show();
DOMUtils.hide(popover);
e.preventDefault();
e.stopPropagation()
}
elem.addEventListener('click', clickHandler);
elem.addEventListener('touchend', clickHandler);
elem.addEventListener('mouseup', function (e) {
e.preventDefault();
e.stopPropagation();
})
}

// TODO: I can't find any use of this and should probably be deleted - data
// else if("color" === item.type) {
// const colorPicker = new ColorPicker({
// parent: popover.parentElement,
// width: 364,
// //defaultColor: 'aqua',
// colorHandler: (color) => item.click(color)
// })
// elem = DOMUtils.div();
// if (typeof item.label === 'string') {
// elem.innerHTML = item.label;
// }
// const clickHandler = e => {
// colorPicker.show();
// DOMUtils.hide(popover);
// e.preventDefault();
// e.stopPropagation()
// }
// elem.addEventListener('click', clickHandler);
// elem.addEventListener('touchend', clickHandler);
// elem.addEventListener('mouseup', function (e) {
// e.preventDefault();
// e.stopPropagation();
// })
// }

else {
elem = DOMUtils.div();
if (typeof item.label === 'string') {
Expand Down

0 comments on commit f4ffd9b

Please sign in to comment.