refactor(Style): refacto for review

iTowns · Aug 4, 2023 · e72f45b · e72f45b
1 parent 681225f
commit e72f45b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 33 deletions.
diff --git 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
@@ -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();