mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-01 05:11:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5485 from neurokitti/new-color-picker

Browse Source 
fixed padding and undifined algo error
This commit is contained in:
mr. m
2025-02-18 12:15:56 +01:00
committed by GitHub
parent 10ae6491c9 18d0900b32
commit 1ad71ab5ae
1 changed files with 59 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/browser/base/zen-components/ZenGradientGenerator.mjs
View File

@@ -181,7 +181,7 @@
this.dots.push({
ID: id,
Element: dot,
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
Position: { x: null, y: null }, // WARNING: these values are not correct because dot pads bound rect does not exist yet
});
}
if (!fromWorkspace) {
@@ -254,7 +254,7 @@
this.dots.push({
ID: id,
Element: dot,
Position: { x: parseFloat(dot.style.left), y: parseFloat(dot.style.top) },
Position: { x: relativePosition.x, y: relativePosition.y },
});
}
@@ -267,12 +267,17 @@
{ type: 'floating', angles: [] },
];
function getColorHarmonyType(numDots) {
function getColorHarmonyType(numDots, dots) {
if (useHarmony !== '') {
const selectedHarmony = colorHarmonies.find((harmony) => harmony.type === useHarmony);
if (selectedHarmony) {
if (action === 'remove') {
return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length - 1);
if (dots.length !== 0) {
return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length - 1);
} else {
return { type: 'floating', angles: [] };
}
}
if (action === 'add') {
return colorHarmonies.find((harmony) => harmony.angles.length === selectedHarmony.angles.length + 1);
@@ -314,7 +319,8 @@
let updatedDots = [...dots];
const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0));
const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots);
this.useAlgo = harmonyAngles.type;
if (!harmonyAngles || harmonyAngles.angles.length === 0) return [];
@@ -351,18 +357,36 @@
handleColorPositions(colorPositions) {
colorPositions.sort((a, b) => a.ID - b.ID);
if (this.useAlgo === 'floating') {
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = dotPad.getBoundingClientRect();
this.dots.forEach((dot) => {
dot.Element.style.zIndex = 999;
const colorFromPos = this.getColorFromPosition(dot.Position.x, dot.Position.y);
let pixelX, pixelY;
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
if (dot.Position.x === null) {
const leftPercentage = parseFloat(dot.Element.style.left) / 100;
const topPercentage = parseFloat(dot.Element.style.top) / 100;
pixelX = leftPercentage * rect.width;
pixelY = topPercentage * rect.height;
} else {
pixelX = dot.Position.x;
pixelY = dot.Position.y;
}
const colorFromPos = this.getColorFromPosition(pixelX, pixelY);
dot.Element.style.setProperty(
'--zen-theme-picker-dot-color',
`rgb(${colorFromPos[0]}, ${colorFromPos[1]}, ${colorFromPos[2]})`
);
});
}
return;
}
const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
if (existingPrimaryDot) {
@@ -413,6 +437,7 @@
if (target.id === 'PanelUI-zen-gradient-generator-color-add') {
if (this.dots.length >= ZenThemePicker.MAX_DOTS) return;
let colorPositions = this.calculateCompliments(this.dots, 'add', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace();
return;
@@ -459,7 +484,7 @@
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
const padding = 60;
const padding = 90;
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
@@ -472,10 +497,13 @@
const existingPrimaryDot = this.dots.find((d) => d.ID === 0);
clickedDot = this.dots.find((dot) => dot.Element === clickedElement);
if (clickedDot) {
// TODO: this doesnt work and needs to be fixed
existingPrimaryDot.ID = clickedDot.ID;
clickedDot.ID = 0;
clickedDot.Element.style.zIndex = 999;
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
this.handleColorPositions(colorPositions);
return;
@@ -560,7 +588,7 @@
dot.ID = index;
});
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace();
@@ -625,14 +653,14 @@
themedColors(colors) {
const isDarkMode = this.isDarkMode;
const factor = isDarkMode ? 0.5 : 1.1;
return colors.map((color) => {
return {
c: color.isCustom
? color.c
: [Math.min(255, color.c[0] * factor), Math.min(255, color.c[1] * factor), Math.min(255, color.c[2] * factor)],
isCustom: color.isCustom,
};
});
return colors.map((color) => ({
c: color.isCustom
? color.c
: [Math.min(255, color.c[0] * factor), Math.min(255, color.c[1] * factor), Math.min(255, color.c[2] * factor)],
isCustom: color.isCustom,
algorithm: color.algorithm,
}));
}
onOpacityChange(event) {
@@ -661,6 +689,8 @@
getGradient(colors, forToolbar = false) {
const themedColors = this.themedColors(colors);
this.useAlgo = themedColors[0].algorithm;
if (themedColors.length === 0) {
return forToolbar ? 'var(--zen-themed-toolbar-bg)' : 'var(--zen-themed-toolbar-bg-transparent)';
} else if (themedColors.length === 1) {
@@ -917,14 +947,17 @@
async updateCurrentWorkspace(skipSave = true) {
this.updated = skipSave;
const dots = this.panel.querySelectorAll('.zen-theme-picker-dot');
const colors = Array.from(dots).sort((a, b) => a.getAttribute('data-index') - b.getAttribute('data-index')).map((dot) => {
const color = dot.style.getPropertyValue('--zen-theme-picker-dot-color');
if (color === 'undefined') {
return;
}
const isCustom = dot.classList.contains('custom');
return { c: isCustom ? color : color.match(/\d+/g).map(Number), isCustom };
});
const colors = Array.from(dots)
.sort((a, b) => a.getAttribute('data-index') - b.getAttribute('data-index'))
.map((dot) => {
const color = dot.style.getPropertyValue('--zen-theme-picker-dot-color');
if (color === 'undefined') {
return;
}
const isCustom = dot.classList.contains('custom');
const algorithm = this.useAlgo;
return { c: isCustom ? color : color.match(/\d+/g).map(Number), isCustom, algorithm };
});
const gradient = ZenThemePicker.getTheme(colors, this.currentOpacity, this.currentRotation, this.currentTexture);
let currentWorkspace = await ZenWorkspaces.getActiveWorkspace();