Skip to content

Commit

Permalink
parent ffa9393
Browse files Browse the repository at this point in the history 
author chinweibegbu <[email protected]> 1714241118 +0100
committer chinweibegbu <[email protected]> 1714260806 +0100

parent ffa9393
author chinweibegbu <[email protected]> 1714241118 +0100
committer chinweibegbu <[email protected]> 1714260615 +0100

feat: Hotkey for color scheme switching (ALT + SHIFT + C)

NOTE: Also includes rebasing merge conflict handling
  • Loading branch information
@chinweibegbu
chinweibegbu committed Apr 27, 2024
1 parent ffa9393 commit d693ce2
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 68 deletions.
2 changes: 2 additions & 0 deletions data/core.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1007,6 +1007,8 @@ en:
colorblind_ibm: Colorblind Mode - IBM
colorblind_paul_tol_vibrant: Colorblind Mode - Paul Tol (Vibrant)
placeholder: Select color scheme
switch_color_scheme:
key: C
colorblind_options:
title: Colorblind Mode
tooltip: Switch between colorblind modes
Expand Down
5 changes: 5 additions & 0 deletions data/shortcuts.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@
"shortcuts": ["preferences.key"],
"text": "shortcuts.browsing.display_options.preferences"
},
{
"modifiers": ["⌥", "⇧"],
"shortcuts": ["preferences.color_selection.switch_color_scheme.key"],
"text": "shortcuts.browsing.display_options.switch_color_scheme"
},
{
"modifiers": ["⌃", "⌘"],
"shortcuts": ["F"],
Expand Down
52 changes: 15 additions & 37 deletions modules/core/StyleSystem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,24 +42,24 @@ export class StyleSystem extends AbstractSystem {
// Experiment, see Rapid#1230
// matrix values from https://github.com/maputnik/editor
this.protanopiaMatrix = [
0.567, 0.433, 0, 0, 0,
0.558, 0.442, 0, 0, 0,
0, 0.242, 0.758, 0, 0,
0, 0, 0, 1, 0
0.567, 0.433, 0, 0, 0,
0.558, 0.442, 0, 0, 0,
0, 0.242, 0.758, 0, 0,
0, 0, 0, 1, 0
];

this.deuteranopiaMatrix = [
0.625, 0.375, 0, 0, 0,
0.7, 0.3, 0, 0, 0,
0, 0.3, 0.7, 0, 0,
0, 0, 0, 1, 0
0.625, 0.375, 0, 0, 0,
0.7, 0.3, 0, 0, 0,
0, 0.3, 0.7, 0, 0,
0, 0, 0, 1, 0
];

this.tritanopiaMatrix = [
0.95, 0.05, 0, 0, 0,
0, 0.433, 0.567, 0, 0,
0, 0.475, 0.525, 0, 0,
0, 0, 0, 1, 0
0.95, 0.05, 0, 0, 0,
0, 0.433, 0.567, 0, 0,
0, 0.475, 0.525, 0, 0,
0, 0, 0, 1, 0
];


Expand Down Expand Up @@ -361,8 +361,6 @@ export class StyleSystem extends AbstractSystem {


this.styleMatch = this.styleMatch.bind(this);

// To handle color schemes
this.getColorScheme = this.getColorScheme.bind(this);
this.getAllColorSchemes = this.getAllColorSchemes.bind(this);
this.setColorScheme = this.setColorScheme.bind(this);
Expand Down Expand Up @@ -411,12 +409,6 @@ export class StyleSystem extends AbstractSystem {
this.STYLE_DECLARATIONS = data;
});

// Fetch the style objects from styles.json
dataloader.getDataAsync('styles')
.then((data) => {
this.STYLE_DECLARATIONS = data;
});

return Promise.resolve();
}

Expand Down Expand Up @@ -467,14 +459,6 @@ export class StyleSystem extends AbstractSystem {
return this.currentColorScheme[colorName] ?? this.defaultColorScheme[colorName];
}

/**
* getHexColorCode
* @return {String} HEX color code
*/
getHexColorCode(colorName) {
return this.currentColorScheme[colorName] ?? this.defaultColorScheme[colorName];
}

/**
* styleMatch
* @param {Object} tags - OSM tags to match to a display style
Expand Down Expand Up @@ -507,7 +491,7 @@ export class StyleSystem extends AbstractSystem {
continue;
}

matched = declaration || currentScheme;
matched = declaration;
styleScore = score;
styleKey = k;
styleVal = v;
Expand All @@ -527,17 +511,11 @@ export class StyleSystem extends AbstractSystem {
hasLifecycleTag = true;
break;

// Lifecycle value, e.g. `railway=demolished`
// (applies only if `k` is styleKey or there is no styleKey controlling styling)
// Lifecycle value, e.g. `railway=demolished`
// (applies only if `k` is styleKey or there is no styleKey controlling styling)
} else if ((!styleKey || k === styleKey) && lifecycleVals.has(v)) {
hasLifecycleTag = true;
break;

// Lifecycle key prefix, e.g. `demolished:railway=rail`
// (applies only if there is no styleKey controlling the styling)
} else if (!styleKey && lifecycleRegex.test(k) && v !== 'no') {
hasLifecycleTag = true;
break;
}
}

Expand Down
88 changes: 57 additions & 31 deletions modules/ui/sections/color_selection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { uiTooltip } from '../tooltip.js';
import { uiCombobox } from '../combobox.js';
import { uiSection } from '../section.js';
import { utilNoAuto } from '../../util/index.js';
import { uiCmd } from '../index.js';

export function uiSectionColorSelection(context) {
const l10n = context.systems.l10n;
Expand Down Expand Up @@ -55,47 +56,72 @@ export function uiSectionColorSelection(context) {
.attr('placeholder', l10n.t('preferences.color_selection.placeholder'))
.call(utilNoAuto)
.call(colorCombo)
.on('blur change', d3_event => {
const element = d3_event.currentTarget;
const val = (element && element.value) || '';
const data = colorCombo.data();
if (data.some(item => item.value === val)) {
_colorSelectedId = val;
let colorSchemeName = getColorSchemeName(_colorSelectedId);

if (styles.currentColorScheme !== colorSchemeName) {
styles.setColorScheme(colorSchemeName);
context.scene().dirtyScene();
context.systems.map.deferredRedraw();
}

} else {
d3_event.currentTarget.value = '';
_colorSelectedId = null;
}
});
.on('blur change', d3_event => updateColorScheme(d3_event) );

colorCombo.data(comboData);

update();
update(selection);

function update() {
selection.selectAll('.preferences-color-selection-item')
.classed('active', (_checkboxState === 'true'))
.select('input')
.property('checked', (_checkboxState === 'true'));
}

function update(selection) {
selection.selectAll('.preferences-color-selection-item')
.classed('active', (_checkboxState === 'true'))
.select('input')
.property('checked', (_checkboxState === 'true'));
}

function getColorSchemeName(val) {
for (let i = 0; i < comboData.length; i++) {
let colorSchemeObj = comboData[i];
if (colorSchemeObj.value === val) {
return colorSchemeObj.title;
}
}
}

function getColorSchemeName(val) {
for (let i = 0; i < comboData.length; i++) {
let colorSchemeObj = comboData[i];
if (colorSchemeObj.value === val) {
return colorSchemeObj.title;
}
function updateColorScheme(d3_event) {
const element = d3_event.currentTarget;
const val = (element && element.value) || '';
const data = colorCombo.data();
if (data.some(item => item.value === val)) {
_colorSelectedId = val;
let colorSchemeName = getColorSchemeName(_colorSelectedId);

if (styles.currentColorScheme !== colorSchemeName) {
styles.setColorScheme(colorSchemeName);
context.scene().dirtyScene();
context.systems.map.deferredRedraw();
}

} else {
d3_event.currentTarget.value = '';
_colorSelectedId = null;
}
}

function switchColorScheme() {
// Get all color schemes
const colorSchemesOrdered = ['default', 'high_contrast', 'colorblind_general', 'colorblind_ibm', 'colorblind_paul_tol_vibrant'];
const allColorSchemes = styles.getAllColorSchemes();

// Identify the name and index of the current color scheme
const currentColorSchemeName = colorSchemesOrdered.find( item => allColorSchemes[item] == styles.getColorScheme() );
const currentColorSchemeIndex = colorSchemesOrdered.findIndex( item => item == currentColorSchemeName);

// Use the index of the current color scheme to identify the next one
const numColorSchemes = Object.keys(styles.getAllColorSchemes()).length;
const nextColorSchemeIndex = (currentColorSchemeIndex + 1) % numColorSchemes;
const nextColorSchemeName = colorSchemesOrdered[nextColorSchemeIndex];

// Update the color scheme
styles.setColorScheme(nextColorSchemeName);
context.scene().dirtyScene();
context.systems.map.deferredRedraw();
}

context.keybinding()
.on(uiCmd('⌥⇧' + l10n.t('preferences.color_selection.switch_color_scheme.key')), switchColorScheme)

return section;
}

0 comments on commit d693ce2

Please sign in to comment.