From 23e6294c9a134a3962bfeb60c2cec33a759a25f8 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 25 Oct 2024 12:54:43 +0200 Subject: [PATCH] Choosing colors from the gradient generator now works --- src/ZenGradientGenerator.mjs | 61 +++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 14 deletions(-) diff --git a/src/ZenGradientGenerator.mjs b/src/ZenGradientGenerator.mjs index de9a15f..2d438fe 100644 --- a/src/ZenGradientGenerator.mjs +++ b/src/ZenGradientGenerator.mjs @@ -1,12 +1,14 @@ { class ZenThemePicker extends ZenDOMOperatedFeature { + static GRADIENT_IMAGE_URL = 'chrome://browser/content/zen-images/gradient.png'; + static MAX_DOTS = 5; + init() { ChromeUtils.defineLazyGetter(this, 'panel', () => document.getElementById('PanelUI-zen-gradient-generator')); ChromeUtils.defineLazyGetter(this, 'toolbox', () => document.getElementById('navigator-toolbox')); - this.initContextMenu(); - this.initThemePicker(); + this.initCanvas(); } initContextMenu() { @@ -25,8 +27,38 @@ }); } + initCanvas() { + this.image = new Image(); + this.image.src = ZenThemePicker.GRADIENT_IMAGE_URL; + + // wait for the image to load + this.image.onload = this.onImageLoad.bind(this); + } + + onImageLoad() { + // resize the image to fit the panel + const imageSize = 300 - 20; // 20 is the padding (10px) + const scale = imageSize / Math.max(this.image.width, this.image.height); + this.image.width *= scale; + this.image.height *= scale; + + this.canvas = document.createElement('canvas'); + this.canvas.width = this.image.width; + this.canvas.height = this.image.height; + this.panel.appendChild(this.canvas); + this.canvasCtx = this.canvas.getContext('2d'); + this.canvasCtx.drawImage(this.image, 0, 0); + + this.canvas.setAttribute('hidden', 'true'); + + // Call the rest of the initialization + this.initContextMenu(); + this.initThemePicker(); + } + initThemePicker() { const themePicker = this.panel.querySelector('.zen-theme-picker-gradient'); + themePicker.style.setProperty('--zen-theme-picker-gradient-image', `url(${ZenThemePicker.GRADIENT_IMAGE_URL})`); themePicker.addEventListener('mousemove', this.onDotMouseMove.bind(this)); themePicker.addEventListener('mouseup', this.onDotMouseUp.bind(this)); } @@ -40,11 +72,9 @@ } getColorFromPosition(x, y) { - // get the color from the x and y position - const r = x * 255; - const g = y * 255; - const b = 0; - return [r, g, b]; + // get the color from the x and y from the image + const imageData = this.canvasCtx.getImageData(x, y, 1, 1); + return imageData.data; } createDot(color) { @@ -74,7 +104,7 @@ onDotMouseMove(event) { if (this.dragging) { event.preventDefault(); - const rect = this.panel.getBoundingClientRect(); + const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect(); let x = (event.clientX - rect.left) / rect.width; let y = (event.clientY - rect.top) / rect.height; // percentage to pixel @@ -82,20 +112,20 @@ const maxX = rect.width - dotSize; const maxY = rect.height - dotSize; if (x < 0) { - x = 0; + x = 0.01; } else if (x > 1) { - x = 1; + x = 0.99; } if (y < 0) { - y = 0; + y = 0.01; } else if (y > 1) { - y = 1; + y = 0.99; } const pixelX = x * rect.width - dotSize*2; const pixelY = y * rect.height - dotSize*2; this.draggedDot.style.left = `${Math.min(maxX, Math.max(0, pixelX))}px`; this.draggedDot.style.top = `${Math.min(maxY, Math.max(0, pixelY))}px`; - const color = this.getColorFromPosition(x, y); + const color = this.getColorFromPosition(pixelX, pixelY); this.draggedDot.style.setProperty('--zen-theme-picker-dot-color', `rgb(${color[0]}, ${color[1]}, ${color[2]})`); } } @@ -109,7 +139,10 @@ this.draggedDot = null; return; } - this.createDot([Math.random() * 255, Math.random() * 255, Math.random() * 255]); + this.numberOfDots = this.panel.querySelectorAll('.zen-theme-picker-dot').length; + if (this.numberOfDots < ZenThemePicker.MAX_DOTS) { + this.createDot([Math.random() * 255, Math.random() * 255, Math.random() * 255]); + } } }