refactor(Style): move gestion fill.pattern to Style

iTowns · Jul 13, 2023 · 8bb5118 · 8bb5118
1 parent 3adbf39
commit 8bb5118
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/src/Converter/Feature2Texture.js b/src/Converter/Feature2Texture.js
@@ -36,30 +36,14 @@ function _drawPolygon(ctx, vertices, indices, style, size, extent, invCtxScale,
 
     // draw line or edge of polygon
     if (style.stroke) {
+        // TO DO move to Style as fillPolygon()
         strokeStyle(style, ctx, invCtxScale);
         ctx.stroke();
     }
 
     // fill polygon only
     if (canBeFilled && style.fill) {
-        fillStyle(style, ctx, invCtxScale);
-        ctx.fill();
-    }
-}
-
-function fillStyle(style, ctx, invCtxScale) {
-    if (style.fill.pattern && ctx.fillStyle.src !== style.fill.pattern.src) {
-        ctx.fillStyle = ctx.createPattern(style.fill.pattern, 'repeat');
-        if (ctx.fillStyle.setTransform) {
-            ctx.fillStyle.setTransform(matrix.scale(invCtxScale));
-        } else {
-            console.warn('Raster pattern isn\'t completely supported on Ie and edge');
-        }
-    } else if (ctx.fillStyle !== style.fill.color) {
-        ctx.fillStyle = style.fill.color;
-    }
-    if (style.fill.opacity !== ctx.globalAlpha) {
-        ctx.globalAlpha = style.fill.opacity;
+        style.fillPolygon(ctx, matrix.scale(invCtxScale));
     }
 }
 

diff --git a/src/Core/Style.js b/src/Core/Style.js
@@ -505,12 +505,6 @@ class Style {
         defineStyleProperty(this, 'fill', 'base_altitude', params.fill.base_altitude, base_altitudeDefault);
         defineStyleProperty(this, 'fill', 'extrusion_height', params.fill.extrusion_height);
 
-        if (typeof this.fill.pattern == 'string') {
-            Fetcher.texture(this.fill.pattern).then((pattern) => {
-                this.fill.pattern = pattern.image;
-            });
-        }
-
         this.stroke = {};
         defineStyleProperty(this, 'stroke', 'color', params.stroke.color);
         defineStyleProperty(this, 'stroke', 'opacity', params.stroke.opacity, 1.0);
@@ -755,6 +749,35 @@ class Style {
         return this;
     }
 
+    /**
+     * Applies the style.fill to polygon domElement
+     * @param {CanvasRenderingContext2D} canevasCtx The Context 2D of the polygon domElement
+     * @param {DOMMatrix} scaledMatrix The DOM matrix scaled to generate pattenr (if any)
+     */
+    async fillPolygon(canevasCtx, scaledMatrix) {
+        if (this.fill.pattern) {
+            if (typeof this.fill.pattern === 'string') {
+                let fillPatternImg = cacheStyle.get(this.fill.pattern);
+                if (!fillPatternImg) {
+                    fillPatternImg = (await Fetcher.texture(this.fill.pattern)).image;
+                    cacheStyle.set(fillPatternImg, this.fill.pattern);
+                }
+                canevasCtx.fillStyle = canevasCtx.createPattern(fillPatternImg, 'repeat');
+                if (canevasCtx.fillStyle.setTransform) {
+                    canevasCtx.fillStyle.setTransform(scaledMatrix);
+                } else {
+                    console.warn('Raster pattern isn\'t completely supported on Ie and edge');
+                }
+            }
+        } else if (canevasCtx.fillStyle !== this.fill.color) {
+            canevasCtx.fillStyle = this.fill.color;
+        }
+        if (this.fill.opacity !== canevasCtx.globalAlpha) {
+            canevasCtx.globalAlpha = this.fill.opacity;
+        }
+        canevasCtx.fill();
+    }
+
     /**
      * Applies this style to a DOM element. Limited to the `text` and `icon`
      * properties of this style.
@@ -794,7 +817,6 @@ class Style {
         const color = this.icon.color;
 
         let icon = cacheStyle.get(image || key, size, color);
-
         if (!icon) {
             if (key && sprites) {
                 icon = getImage(sprites, key);