From 7354b6f7062def8bd1ac0a0e457cd05256eba0d5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 23 Jan 2020 00:35:56 +0200 Subject: [PATCH] fixed get(Layer|Opacity)Slot not working properly which broke Mojave theme --- .../style_switcher/style_switcher.js | 2 +- src/services/style_setter/style_setter.js | 11 ---- src/services/theme_data/theme_data.service.js | 60 +++++++++---------- 3 files changed, 30 insertions(+), 43 deletions(-) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 76e6cdb7..06ef71a7 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -246,7 +246,7 @@ export default { if (!slotIsText) return acc const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value const background = variant || layer - const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background]) + const opacitySlot = getOpacitySlot(background) const textColors = [ key, ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : []) diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index b43eb0dd..7f9f17be 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -392,16 +392,6 @@ export const colors2to3 = (colors) => { ...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {}) } case 'btnText': - console.log( - btnPositions - .map(position => btnStates.map(state => state + position)) - .flat() - .reduce( - (statePositionAcc, statePosition) => - ({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color }) - , {} - ) - ) return { ...acc, ...btnPositions @@ -414,7 +404,6 @@ export const colors2to3 = (colors) => { ) } default: - console.log('aaa', slotName, color, acc) return { ...acc, [slotName]: color } } }, {}) diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 2cae85de..5e49fa17 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -591,38 +591,41 @@ export const topoSort = ( }) } +const expandSlotValue = (value) => { + if (typeof value === 'object') return value + return { + depends: value.startsWith('--') ? [value.substring(2)] : [], + default: value.startsWith('#') ? value : undefined + } +} /** * retrieves opacity slot for given slot. This goes up the depenency graph * to find which parent has opacity slot defined for it. * TODO refactor this */ export const getOpacitySlot = ( - v, + k, inheritance = SLOT_INHERITANCE, getDeps = getDependencies ) => { - const value = typeof v === 'string' - ? { - depends: v.startsWith('--') ? [v.substring(2)] : [] - } - : v + const value = expandSlotValue(inheritance[k]) if (value.opacity === null) return - if (value.opacity) return v.opacity - const findInheritedOpacity = (val) => { - const depSlot = val.depends[0] + if (value.opacity) return value.opacity + const findInheritedOpacity = (key, visited = [k]) => { + const depSlot = getDeps(key, inheritance)[0] if (depSlot === undefined) return - const dependency = getDeps(depSlot, inheritance)[0] + const dependency = inheritance[depSlot] if (dependency === undefined) return if (dependency.opacity || dependency === null) { return dependency.opacity - } else if (dependency.depends) { - return findInheritedOpacity(dependency) + } else if (dependency.depends && visited.includes(depSlot)) { + return findInheritedOpacity(depSlot, [...visited, depSlot]) } else { return null } } if (value.depends) { - return findInheritedOpacity(value) + return findInheritedOpacity(k) } } @@ -635,33 +638,28 @@ export const getOpacitySlot = ( */ export const getLayerSlot = ( k, - v, inheritance = SLOT_INHERITANCE, getDeps = getDependencies ) => { - const value = typeof v === 'string' - ? { - depends: v.startsWith('--') ? [v.substring(2)] : [] - } - : v + const value = expandSlotValue(inheritance[k]) if (LAYERS[k]) return k if (value.layer === null) return - if (value.layer) return v.layer - const findInheritedLayer = (val) => { - const depSlot = val.depends[0] + if (value.layer) return value.layer + const findInheritedLayer = (key, visited = [k]) => { + const depSlot = getDeps(key, inheritance)[0] if (depSlot === undefined) return - const dependency = getDeps(depSlot, inheritance)[0] + const dependency = inheritance[depSlot] if (dependency === undefined) return if (dependency.layer || dependency === null) { return dependency.layer } else if (dependency.depends) { - return findInheritedLayer(dependency) + return findInheritedLayer(dependency, [...visited, depSlot]) } else { return null } } if (value.depends) { - return findInheritedLayer(value) + return findInheritedLayer(k) } } @@ -679,7 +677,7 @@ export const SLOT_ORDERED = topoSort( * with them */ export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => { - const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies) + const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies) if (opacity) { return { ...acc, [k]: opacity } } else { @@ -692,7 +690,7 @@ export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc * color slots. */ export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => { - const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies) + const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies) if (opacity) { return { ...acc, @@ -738,9 +736,9 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu if (targetColor === 'transparent') { // We take only layers below current one const layers = getLayers( - getLayerSlot(key, value), + getLayerSlot(key), key, - value.opacity || key, + getOpacitySlot(key) || key, colors, opacity ).slice(0, -1) @@ -781,7 +779,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu getLayers( value.layer, value.variant || value.layer, - getOpacitySlot(SLOT_INHERITANCE[value.variant || value.layer]), + getOpacitySlot(value.variant || value.layer), colors, opacity ) @@ -813,7 +811,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu if (!outputColor) { throw new Error('Couldn\'t generate color for ' + key) } - const opacitySlot = SLOTS_OPACITIES_DICT[key] + const opacitySlot = getOpacitySlot(key) if (opacitySlot && outputColor.a === undefined) { outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1 }