Markk116/px-icon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 2 Activity

take aspect ratio into account when rasterizing

Browse Source
This commit is contained in:
Markk116
2026-08-08 21:19:25 +02:00
parent 0c2785ca3b
commit 98ffc893d0
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
px-icon.js
+12 -9
View File
@@ -192,10 +192,12 @@ class PxIcon extends HTMLElement {
const apSize = parseFloat(cs.getPropertyValue('--pxicon-ap-size')) || DEFAULT_AP_SIZE; const apSize = parseFloat(cs.getPropertyValue('--pxicon-ap-size')) || DEFAULT_AP_SIZE;
const mode = (cs.getPropertyValue('--pxicon-mode') || DEFAULT_MODE).trim(); const mode = (cs.getPropertyValue('--pxicon-mode') || DEFAULT_MODE).trim();
const displaySize = Math.max(this.clientWidth, this.clientHeight) || 24; const displayW = this.clientWidth || 24;
const snapped = snapToGrid(displaySize, apSize); const displayH = this.clientHeight || 24;
const gridW = Math.max(1, Math.round(snapped / apSize)); const snappedW = snapToGrid(displayW, apSize);
const gridH = gridW; const snappedH = snapToGrid(displayH, apSize);
const gridW = Math.max(1, Math.round(snappedW / apSize));
const gridH = Math.max(1, Math.round(snappedH / apSize));
const svgMarkup = svgEl.outerHTML; const svgMarkup = svgEl.outerHTML;
const key = `${svgMarkup}|${mode}|${gridW}x${gridH}`; const key = `${svgMarkup}|${mode}|${gridW}x${gridH}`;
@@ -211,13 +213,14 @@ class PxIcon extends HTMLElement {
const gridCanvas = await getGridRaster(svgMarkup, mode, gridW, gridH); const gridCanvas = await getGridRaster(svgMarkup, mode, gridW, gridH);
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
const backingSize = Math.round(snapped * dpr); const backingW = Math.round(snappedW * dpr);
this._canvas.width = backingSize; const backingH = Math.round(snappedH * dpr);
this._canvas.height = backingSize; this._canvas.width = backingW;
this._canvas.height = backingH;
const ctx = this._canvas.getContext('2d'); const ctx = this._canvas.getContext('2d');
ctx.imageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;
ctx.clearRect(0, 0, backingSize, backingSize); ctx.clearRect(0, 0, backingW, backingH);
ctx.drawImage(gridCanvas, 0, 0, backingSize, backingSize); ctx.drawImage(gridCanvas, 0, 0, backingW, backingH);
if (this._slot.isConnected) { if (this._slot.isConnected) {
// first successful raster: swap the placeholder slot for the // first successful raster: swap the placeholder slot for the