ol 9.0.0-dev.1699990564210 → 9.0.0-dev.1700173909257

package/colorlike.d.ts

@@ -1,8 +1,18 @@
+/**
+ * @typedef {Object} PatternDescriptor
+ * @property {string} src Pattern image URL
+ * @property {import("./color.js").Color|string} [color] Color to tint the pattern with.
+ * @property {import("./size.js").Size} [size] Size of the desired slice from the pattern image.
+ * Use this together with `offset` when the pattern image is a sprite sheet.
+ * @property {import("./size.js").Size} [offset] Offset of the desired slice from the pattern image.
+ * Use this together with `size` when the pattern image is a sprite sheet.
+ */
 /**
  * A type accepted by CanvasRenderingContext2D.fillStyle
  * or CanvasRenderingContext2D.strokeStyle.
- * Represents a color, pattern, or gradient. The origin for patterns and
- * gradients as fill style is an increment of 512 css pixels from map coordinate
+ * Represents a color, [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern),
+ * or [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient). The origin for
+ * patterns and gradients as fill style is an increment of 512 css pixels from map coordinate
  * `[0, 0]`. For seamless repeat patterns, width and height of the pattern image
  * must be a factor of two (2, 4, 8, ..., 512).
  *
@@ -10,16 +20,37 @@
  * @api
  */
 /**
- * @param {import("./color.js").Color|ColorLike} color Color.
- * @return {ColorLike} The color as an {@link ol/colorlike~ColorLike}.
+ * @param {import("./color.js").Color|ColorLike|PatternDescriptor|null} color Color.
+ * @return {ColorLike|null} The color as an {@link ol/colorlike~ColorLike}.
  * @api
  */
-export function asColorLike(color: import("./color.js").Color | ColorLike): ColorLike;
+export function asColorLike(color: import("./color.js").Color | ColorLike | PatternDescriptor | null): ColorLike | null;
+export type PatternDescriptor = {
+    /**
+     * Pattern image URL
+     */
+    src: string;
+    /**
+     * Color to tint the pattern with.
+     */
+    color?: string | import("./color.js").Color | undefined;
+    /**
+     * Size of the desired slice from the pattern image.
+     * Use this together with `offset` when the pattern image is a sprite sheet.
+     */
+    size?: import("./size.js").Size | undefined;
+    /**
+     * Offset of the desired slice from the pattern image.
+     * Use this together with `size` when the pattern image is a sprite sheet.
+     */
+    offset?: import("./size.js").Size | undefined;
+};
 /**
  * A type accepted by CanvasRenderingContext2D.fillStyle
  * or CanvasRenderingContext2D.strokeStyle.
- * Represents a color, pattern, or gradient. The origin for patterns and
- * gradients as fill style is an increment of 512 css pixels from map coordinate
+ * Represents a color, [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern),
+ * or [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient). The origin for
+ * patterns and gradients as fill style is an increment of 512 css pixels from map coordinate
  * `[0, 0]`. For seamless repeat patterns, width and height of the pattern image
  * must be a factor of two (2, 4, 8, ..., 512).
  */

package/colorlike.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorlike.d.ts","sourceRoot":"","sources":["colorlike.js"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AAEH;;;;GAIG;AACH,mCAJW,OAAO,YAAY,EAAE,KAAK,GAAC,SAAS,GACnC,SAAS,CAQpB;;;;;;;;;wBAdY,MAAM,GAAC,aAAa,GAAC,cAAc"}
+{"version":3,"file":"colorlike.d.ts","sourceRoot":"","sources":["colorlike.js"],"names":[],"mappings":"AASA;;;;;;;;GAQG;AAEH;;;;;;;;;;;GAWG;AAEH;;;;GAIG;AACH,mCAJW,OAAO,YAAY,EAAE,KAAK,GAAC,SAAS,GAAC,iBAAiB,GAAC,IAAI,GAC1D,SAAS,GAAC,IAAI,CAczB;;;;;SArCa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;wBAiBP,MAAM,GAAC,aAAa,GAAC,cAAc"}

package/colorlike.js

@@ -1,13 +1,28 @@
 /**
  * @module ol/colorlike
  */
+import ImageState from './ImageState.js';
+import {createCanvasContext2D} from './dom.js';
+import {get as getIconImage} from './style/IconImage.js';
+import {shared as iconCache} from './style/IconImageCache.js';
 import {toString} from './color.js';
 
+/**
+ * @typedef {Object} PatternDescriptor
+ * @property {string} src Pattern image URL
+ * @property {import("./color.js").Color|string} [color] Color to tint the pattern with.
+ * @property {import("./size.js").Size} [size] Size of the desired slice from the pattern image.
+ * Use this together with `offset` when the pattern image is a sprite sheet.
+ * @property {import("./size.js").Size} [offset] Offset of the desired slice from the pattern image.
+ * Use this together with `size` when the pattern image is a sprite sheet.
+ */
+
 /**
  * A type accepted by CanvasRenderingContext2D.fillStyle
  * or CanvasRenderingContext2D.strokeStyle.
- * Represents a color, pattern, or gradient. The origin for patterns and
- * gradients as fill style is an increment of 512 css pixels from map coordinate
+ * Represents a color, [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern),
+ * or [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient). The origin for
+ * patterns and gradients as fill style is an increment of 512 css pixels from map coordinate
  * `[0, 0]`. For seamless repeat patterns, width and height of the pattern image
  * must be a factor of two (2, 4, 8, ..., 512).
  *
@@ -16,13 +31,70 @@ import {toString} from './color.js';
  */
 
 /**
- * @param {import("./color.js").Color|ColorLike} color Color.
- * @return {ColorLike} The color as an {@link ol/colorlike~ColorLike}.
+ * @param {import("./color.js").Color|ColorLike|PatternDescriptor|null} color Color.
+ * @return {ColorLike|null} The color as an {@link ol/colorlike~ColorLike}.
  * @api
  */
 export function asColorLike(color) {
+  if (!color) {
+    return null;
+  }
   if (Array.isArray(color)) {
     return toString(color);
   }
+  if (typeof color === 'object' && 'src' in color) {
+    return asCanvasPattern(color);
+  }
   return color;
 }
+
+/**
+ * @param {PatternDescriptor} pattern Pattern descriptor.
+ * @return {CanvasPattern|null} Canvas pattern or null if the pattern referenced in the
+ * PatternDescriptor was not found in the icon image cache.
+ */
+function asCanvasPattern(pattern) {
+  if (!pattern.offset || !pattern.size) {
+    return iconCache.getPattern(pattern.src, 'anonymous', pattern.color);
+  }
+
+  const cacheKey = pattern.src + ':' + pattern.offset;
+
+  const canvasPattern = iconCache.getPattern(
+    cacheKey,
+    undefined,
+    pattern.color
+  );
+  if (canvasPattern) {
+    return canvasPattern;
+  }
+
+  const iconImage = iconCache.get(pattern.src, 'anonymous', null);
+  if (iconImage.getImageState() !== ImageState.LOADED) {
+    return null;
+  }
+  const patternCanvasContext = createCanvasContext2D(
+    pattern.size[0],
+    pattern.size[1]
+  );
+  patternCanvasContext.drawImage(
+    iconImage.getImage(1),
+    pattern.offset[0],
+    pattern.offset[1],
+    pattern.size[0],
+    pattern.size[1],
+    0,
+    0,
+    pattern.size[0],
+    pattern.size[1]
+  );
+  getIconImage(
+    patternCanvasContext.canvas,
+    cacheKey,
+    undefined,
+    ImageState.LOADED,
+    pattern.color,
+    true
+  );
+  return iconCache.getPattern(cacheKey, undefined, pattern.color);
+}