mirror of
https://github.com/zen-browser/components.git
synced 2025-07-07 22:09:59 +02:00
Refactor ZenGradientGenerator.mjs to improve color handling and workspace integration
This commit is contained in:
parent
41f178e840
commit
8ecd316c18
1 changed files with 76 additions and 1 deletions
|
@ -21,6 +21,14 @@
|
|||
ChromeUtils.defineLazyGetter(this, 'customColorInput', () => document.getElementById('PanelUI-zen-gradient-generator-custom-input'));
|
||||
ChromeUtils.defineLazyGetter(this, 'customColorList', () => document.getElementById('PanelUI-zen-gradient-generator-custom-list'));
|
||||
|
||||
XPCOMUtils.defineLazyPreferenceGetter(
|
||||
this,
|
||||
'allowWorkspaceColors',
|
||||
'zen.theme.color-prefs.use-workspace-colors',
|
||||
true,
|
||||
this.onDarkModeChange.bind(this)
|
||||
)
|
||||
|
||||
this.initRotation();
|
||||
this.initCanvas();
|
||||
|
||||
|
@ -375,6 +383,67 @@
|
|||
wrapper.style.setProperty('--zen-grainy-background-opacity', texture);
|
||||
}
|
||||
|
||||
hexToRgb(hex) {
|
||||
if (hex.startsWith('#')) {
|
||||
hex = hex.substring(1);
|
||||
}
|
||||
if (hex.length === 3) {
|
||||
hex = hex.split('').map(char => char + char).join('');
|
||||
}
|
||||
return [
|
||||
parseInt(hex.substring(0, 2), 16),
|
||||
parseInt(hex.substring(2, 4), 16),
|
||||
parseInt(hex.substring(4, 6), 16),
|
||||
];
|
||||
}
|
||||
|
||||
pSBC=(p,c0,c1,l)=>{
|
||||
let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
|
||||
if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
|
||||
if(!this.pSBCr)this.pSBCr=(d)=>{
|
||||
let n=d.length,x={};
|
||||
if(n>9){
|
||||
[r,g,b,a]=d=d.split(","),n=d.length;
|
||||
if(n<3||n>4)return null;
|
||||
x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
|
||||
}else{
|
||||
if(n==8||n==6||n<4)return null;
|
||||
if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
|
||||
d=i(d.slice(1),16);
|
||||
if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
|
||||
else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
|
||||
}return x};
|
||||
h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
|
||||
if(!f||!t)return null;
|
||||
if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
|
||||
else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
|
||||
a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
|
||||
if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
|
||||
else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
|
||||
}
|
||||
|
||||
getMostDominantColor(allColors) {
|
||||
const colors = this.themedColors(allColors);
|
||||
const themedColors = colors.filter(color => !color.isCustom);
|
||||
if (themedColors.length === 0 || !this.allowWorkspaceColors) {
|
||||
return null;
|
||||
}
|
||||
// get the most dominant color in the gradient
|
||||
let dominantColor = themedColors[0].c;
|
||||
let dominantColorCount = 0;
|
||||
for (const color of themedColors) {
|
||||
const count = themedColors.filter(c => c.c[0] === color.c[0] && c.c[1] === color.c[1] && c.c[2] === color.c[2]).length;
|
||||
if (count > dominantColorCount) {
|
||||
dominantColorCount = count;
|
||||
dominantColor = color.c;
|
||||
}
|
||||
}
|
||||
const result = this.pSBC(
|
||||
this.isDarkMode ? 0.7 : -0.7,
|
||||
`rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`);
|
||||
return result?.match(/\d+/g).map(Number);
|
||||
}
|
||||
|
||||
async onWorkspaceChange(workspace, skipUpdate = false, theme = null) {
|
||||
const uuid = workspace.uuid;
|
||||
// Use theme from workspace object or passed theme
|
||||
|
@ -438,7 +507,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
browser.document.body.style.setProperty('--zen-main-browser-background', gradient);
|
||||
browser.document.documentElement.style.setProperty('--zen-main-browser-background', gradient);
|
||||
|
||||
const dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
|
||||
if (dominantColor) {
|
||||
browser.document.documentElement.style.setProperty('--zen-primary-color', `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`);
|
||||
}
|
||||
|
||||
if (!skipUpdate) {
|
||||
browser.gZenThemePicker.recalculateDots(workspaceTheme.gradientColors);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue