From cd82b9fbc1a6cd3b9dc0380e321acda69d11d7f0 Mon Sep 17 00:00:00 2001 From: caele Date: Fri, 16 Dec 2022 11:28:30 +0100 Subject: [PATCH 1/4] chore: add support for engine ARGB colors --- apis/theme/src/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/apis/theme/src/index.js b/apis/theme/src/index.js index c5362b2d4..b2088906c 100644 --- a/apis/theme/src/index.js +++ b/apis/theme/src/index.js @@ -115,6 +115,23 @@ export default function theme() { * theme.validateColor("FOO"); // returns undefined */ validateColor(...args) { + /* Added this to support the non-standard ARGB format from engine */ + const colorString = args[0]; + let matches; + /* eslint-disable no-cond-assign */ + if ( + typeof colorString === 'string' && + (matches = /^ARGB\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(colorString)) + ) { + // ARGB(255,255,255,255) + const a = parseInt(matches[1], 10) / 255; + const r = parseInt(matches[2], 10); + const g = parseInt(matches[3], 10); + const b = parseFloat(matches[4], 10); + return `rgba(${r},${g},${b},${a})`; + } + /* eslint-enable no-cond-assign */ + const c = d3color(...args); return c ? c.toString() : undefined; }, From 06029b3193875b345eda79846271477e9104c20f Mon Sep 17 00:00:00 2001 From: caele Date: Fri, 16 Dec 2022 13:19:09 +0100 Subject: [PATCH 2/4] chore: use parseInt --- apis/theme/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apis/theme/src/index.js b/apis/theme/src/index.js index b2088906c..b0224f0f0 100644 --- a/apis/theme/src/index.js +++ b/apis/theme/src/index.js @@ -127,7 +127,7 @@ export default function theme() { const a = parseInt(matches[1], 10) / 255; const r = parseInt(matches[2], 10); const g = parseInt(matches[3], 10); - const b = parseFloat(matches[4], 10); + const b = parseInt(matches[4], 10); return `rgba(${r},${g},${b},${a})`; } /* eslint-enable no-cond-assign */ From 355f5f0c981b122be4db397da25b3021c2362894 Mon Sep 17 00:00:00 2001 From: caele Date: Fri, 16 Dec 2022 13:33:37 +0100 Subject: [PATCH 3/4] chore: comments --- apis/nucleus/src/utils/background-props.js | 2 +- apis/theme/src/index.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/apis/nucleus/src/utils/background-props.js b/apis/nucleus/src/utils/background-props.js index 30127b8c7..f0b02dd6f 100644 --- a/apis/nucleus/src/utils/background-props.js +++ b/apis/nucleus/src/utils/background-props.js @@ -82,7 +82,7 @@ export const resolveBgImage = (bgComp, app) => { export const resolveBgColor = (bgComp, theme) => { const bgColor = bgComp?.bgColor; if (bgColor && theme) { - if (bgColor.useColorExpression) { + if (bgColor.useExpression) { return theme.validateColor(bgColor.colorExpression); } return bgColor.color && bgColor.color.color !== 'none' ? theme.getColorPickerColor(bgColor.color, true) : undefined; diff --git a/apis/theme/src/index.js b/apis/theme/src/index.js index b0224f0f0..3e804cd50 100644 --- a/apis/theme/src/index.js +++ b/apis/theme/src/index.js @@ -105,6 +105,8 @@ export default function theme() { /** * Validates a color string using d3-color. * See https://www.npmjs.com/package/d3-color + * Additionally supports the non-standard engine + * format ARGB(0-255,0-255,0-255,0-255) * @param {string} specifier * @returns {string|undefined} The resolved color or undefined * @ignore @@ -112,6 +114,7 @@ export default function theme() { * @example * theme.validateColor("red"); // returns "rgba(255,0,0,1)" * theme.validateColor("#00ff00"); // returns "rgba(0,255,0,1)" + * theme.validateColor("ARGB(102,255,50,100)"); // returns "rgba(255,50,100,0.4)" * theme.validateColor("FOO"); // returns undefined */ validateColor(...args) { From 08423b5ba7d7783401757f31363046773bca97d0 Mon Sep 17 00:00:00 2001 From: caele Date: Sun, 18 Dec 2022 21:25:14 +0100 Subject: [PATCH 4/4] chore: update test --- apis/nucleus/src/utils/__tests__/background-props.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apis/nucleus/src/utils/__tests__/background-props.test.js b/apis/nucleus/src/utils/__tests__/background-props.test.js index 3ba87c1f3..b822ea974 100644 --- a/apis/nucleus/src/utils/__tests__/background-props.test.js +++ b/apis/nucleus/src/utils/__tests__/background-props.test.js @@ -18,7 +18,7 @@ describe('Background property resolver', () => { bgCompLayout = { key: 'general', bgColor: { - useColorExpression: true, + useExpression: true, colorExpression: '#ff0000', color: { index: -1, color: 'aqua' }, }, @@ -40,7 +40,7 @@ describe('Background property resolver', () => { expect(color).toBe('rgb(255, 0, 0)'); }); test('should resolve background color by picker', () => { - bgCompLayout.bgColor.useColorExpression = false; + bgCompLayout.bgColor.useExpression = false; const color = resolveBgColor(bgCompLayout, t); expect(color).toBe('aqua'); });