gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(qr): add draggable gradient handles for background and foreground styling

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-03-04 03:22:56 +00:00
parent 9f9ea255a8
commit 8fa0c9bd44
2 changed files with 141 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/workers/qrcode.worker.js
View File

@@ -1,7 +1,7 @@
import QRCode from 'qrcode'
self.onmessage = async (e) => {
const { id, text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, fgType, fgColor1, fgColor2 } = e.data
const { id, text, ecc, isBgTransparent, bgType, bgColor1, bgColor2, bgGradPos, fgType, fgColor1, fgColor2, fgGradPos } = e.data
if (!text) {
self.postMessage({ id, svgContent: '' })
@@ -23,16 +23,20 @@ self.onmessage = async (e) => {
if (fgType !== 'solid') {
const isLinear = fgType === 'linear'
const pos = fgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
defsHtml += isLinear
? `<linearGradient id="qr-fg-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></linearGradient>`
: `<radialGradient id="qr-fg-grad" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></radialGradient>`
? `<linearGradient id="qr-fg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></linearGradient>`
: `<radialGradient id="qr-fg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${fgColor1}" /><stop offset="100%" stop-color="${fgColor2}" /></radialGradient>`
}
if (!isBgTransparent && bgType !== 'solid') {
const isLinear = bgType === 'linear'
const pos = bgGradPos || { x1: 0, y1: 0, x2: 100, y2: 100 }
const r = Math.sqrt(Math.pow(pos.x2 - pos.x1, 2) + Math.pow(pos.y2 - pos.y1, 2))
defsHtml += isLinear
? `<linearGradient id="qr-bg-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></linearGradient>`
: `<radialGradient id="qr-bg-grad" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></radialGradient>`
? `<linearGradient id="qr-bg-grad" x1="${pos.x1}%" y1="${pos.y1}%" x2="${pos.x2}%" y2="${pos.y2}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></linearGradient>`
: `<radialGradient id="qr-bg-grad" cx="${pos.x1}%" cy="${pos.y1}%" r="${r}%"><stop offset="0%" stop-color="${bgColor1}" /><stop offset="100%" stop-color="${bgColor2}" /></radialGradient>`
}
if (defsHtml) {