fix several issues related to opacity

This commit is contained in:
Henry Jameson 2020-03-06 21:17:24 +02:00
parent 147364b80c
commit 9f2c1b4008
1 changed files with 32 additions and 6 deletions

View File

@ -350,17 +350,43 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
if (!outputColor) { if (!outputColor) {
throw new Error('Couldn\'t generate color for ' + key) throw new Error('Couldn\'t generate color for ' + key)
} }
const opacitySlot = getOpacitySlot(key)
const opacitySlot = value.opacity || getOpacitySlot(key)
const ownOpacitySlot = value.opacity const ownOpacitySlot = value.opacity
if (sourceColor === 'transparent') {
outputColor.a = 0
} else if (ownOpacitySlot === null) {
outputColor.a = 1
} else {
const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
if (opacitySlot && (outputColor.a === undefined || opacityOverriden)) {
const dependencySlot = deps[0] const dependencySlot = deps[0]
if (dependencySlot && colors[dependencySlot] === 'transparent') { const dependencyColor = dependencySlot && colors[dependencySlot]
if (!ownOpacitySlot && dependencyColor && !value.textColor && ownOpacitySlot !== null) {
// Inheriting color from dependency (weird, i know)
// except if it's a text color or opacity slot is set to 'null'
outputColor.a = dependencyColor.a
} else if (!dependencyColor && !opacitySlot) {
// Remove any alpha channel if no dependency and no opacitySlot found
delete outputColor.a
} else {
// Otherwise try to assign opacity
if (dependencyColor && dependencyColor.a === 0) {
// transparent dependency shall make dependents transparent too
outputColor.a = 0 outputColor.a = 0
} else { } else {
outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1 // Otherwise check if opacity is overriden and use that or default value instead
outputColor.a = Number(
opacityOverriden
? sourceOpacity[opacitySlot]
: (OPACITIES[opacitySlot] || {}).defaultValue
)
} }
} }
}
if (opacitySlot) { if (opacitySlot) {
return { return {
colors: { ...colors, [key]: outputColor }, colors: { ...colors, [key]: outputColor },