From e72f45bc5b7cbe80011b5bfbc416ea1e2056e870 Mon Sep 17 00:00:00 2001 From: ftoromanoff Date: Wed, 2 Aug 2023 11:03:03 +0200 Subject: [PATCH] refactor(Style): refacto for review --- src/Core/Label.js | 1 - src/Core/Style.js | 61 ++++++++++++++++++++++------------------------- 2 files changed, 29 insertions(+), 33 deletions(-) diff --git a/src/Core/Label.js b/src/Core/Label.js index d49ec77615..2a66f09b9b 100644 --- a/src/Core/Label.js +++ b/src/Core/Label.js @@ -104,7 +104,6 @@ class Label extends THREE.Object3D { } else { this.anchor = [0, 0]; this.styleOffset = [0, 0]; - this.icon = this.content.getElementsByClassName('itowns-icon')[0]; } this.iconOffset = { left: 0, right: 0, top: 0, bottom: 0 }; diff --git a/src/Core/Style.js b/src/Core/Style.js index 296a938486..29b6c0167e 100644 --- a/src/Core/Style.js +++ b/src/Core/Style.js @@ -88,7 +88,7 @@ async function loadImage(source) { return (await promise).image; } -function drawImage(img, cropValues = { width: img.naturalWidth, height: img.naturalHeight }) { +function cropImage(img, cropValues = { width: img.naturalWidth, height: img.naturalHeight }) { canvas.width = cropValues.width; canvas.height = cropValues.height; const ctx = canvas.getContext('2d', { willReadFrequently: true }); @@ -98,32 +98,25 @@ function drawImage(img, cropValues = { width: img.naturalWidth, height: img.natu return ctx.getImageData(0, 0, cropValues.width, cropValues.height); } -async function getImage(source, options) { - if (!options.cropValues && !options.color) { - return source; +function replaceWhitePxl(imgd, color, id) { + if (!color) { + return imgd; } - const img = options.img || await loadImage(source); - let imgd = drawImage(img, options.cropValues); - if (options.color) { - const imgdColored = cacheStyle.get(options.id || source, options.color); - if (!imgdColored) { - const pix = imgd.data; - const color = new Color(options.color); - const colorToChange = new Color('white'); - for (let i = 0, n = pix.length; i < n; i += 4) { - const d = deltaE(pix.slice(i, i + 3), colorToChange) / 100; - pix[i] = (pix[i] * d + color.r * 255 * (1 - d)); - pix[i + 1] = (pix[i + 1] * d + color.g * 255 * (1 - d)); - pix[i + 2] = (pix[i + 2] * d + color.b * 255 * (1 - d)); - } - cacheStyle.set(imgd, options.id || source, options.color); - } else { - imgd = imgdColored; + const imgdColored = cacheStyle.get(id, color); + if (!imgdColored) { + const pix = imgd.data; + const newColor = new Color(color); + const colorToChange = new Color('white'); + for (let i = 0, n = pix.length; i < n; i += 4) { + const d = deltaE(pix.slice(i, i + 3), colorToChange) / 100; + pix[i] = (pix[i] * d + newColor.r * 255 * (1 - d)); + pix[i + 1] = (pix[i + 1] * d + newColor.g * 255 * (1 - d)); + pix[i + 2] = (pix[i + 2] * d + newColor.b * 255 * (1 - d)); } + cacheStyle.set(imgd, id, color); + return imgd; } - canvas.getContext('2d').putImageData(imgd, 0, 0); - - return canvas.toDataURL('image/png'); + return imgdColored; } const textAnchorPosition = { @@ -559,7 +552,7 @@ class Style { this.icon = {}; defineStyleProperty(this, 'icon', 'source', params.icon.source); defineStyleProperty(this, 'icon', 'id', params.icon.id); - defineStyleProperty(this, 'icon', 'cropValues', params.icon.id); + defineStyleProperty(this, 'icon', 'cropValues', params.icon.cropValues); defineStyleProperty(this, 'icon', 'anchor', params.icon.anchor, 'center'); defineStyleProperty(this, 'icon', 'size', params.icon.size, 1); defineStyleProperty(this, 'icon', 'color', params.icon.color); @@ -791,7 +784,7 @@ class Style { if (this.fill.pattern.source) { img = await loadImage(this.fill.pattern.source); } - drawImage(img, this.fill.pattern.cropValues); + cropImage(img, this.fill.pattern.cropValues); txtCtx.fillStyle = txtCtx.createPattern(canvas, 'repeat'); if (txtCtx.fillStyle.setTransform) { @@ -841,12 +834,16 @@ class Style { } const icon = document.createElement('img'); - const options = { - id: this.icon.id, - color: this.icon.color, - cropValues: this.icon.cropValues, - }; - icon.src = await getImage(this.icon.source, options); + + if (!this.icon.cropValues && !this.icon.color) { + icon.src = this.icon.source; + } else { + const img = await loadImage(this.icon.source); + const imgd = cropImage(img, this.icon.cropValues); + const imgdColored = replaceWhitePxl(imgd, this.icon.color, this.icon.id || this.icon.source); + canvas.getContext('2d').putImageData(imgdColored, 0, 0); + icon.src = canvas.toDataURL('image/png'); + } const addIcon = () => { const cIcon = icon.cloneNode();