Add new parameters to Mask and filter (#110)

* Add new parameters to Mask and filter Add new image to legend Fix constructor options in Legend * update ol ext deps * fix arg
Siedlerchr · Oct 28, 2022 · 3bf8bcd · 3bf8bcd
1 parent ecffd3e
commit 3bf8bcd
Show file tree

Hide file tree

Showing 7 changed files with 314 additions and 188 deletions.
diff --git a/@types/ol-ext/filter/Crop.d.ts b/@types/ol-ext/filter/Crop.d.ts
@@ -1,18 +1,27 @@
+import { ColorLike } from 'ol/colorlike';
 import Feature from 'ol/Feature';
 import Mask from './Mask';
 
 export interface Options {
     feature?: Feature;
+    shadowWidth?: number;
+    shadowMapUnits?: boolean;
+    shadowColor?: ColorLike
     inner?: boolean;
+    wrapX?: boolean;
 }
-/** Crop drawing using an Feature
-* @constructor
-* @requires filter
-* @requires filter.Mask
-* @extends {filter.Mask}
-* @param {Object} [options]
-*  @param {Feature} [options.feature] feature to crop with
-*  @param {boolean} [options.inner=false] mask inner, default false
+/** Crop drawing using an ol.Feature
+ * @constructor
+ * @requires ol.filter
+ * @requires ol_filter_Mask
+ * @extends {ol_filter_Mask}
+ * @param {Object} [options]
+ *  @param {Feature} [options.feature] feature to crop with
+ *  @param {number} [options.shadowWidth=0] shadow width, default no shadow
+ *  @param {boolean} [options.shadowMapUnits=false] true if the shadow width is in mapUnits
+ *  @param {ol.colorLike} [options.shadowColor='rgba(0,0,0,.5)'] shadow color, default 
+ *  @param {boolean} [options.inner=false] mask inner, default false
+ *  @param {boolean} [options.wrapX=false] wrap around the world, default false
  */
 export default class Crop extends Mask {
     constructor(options?: Options);

diff --git a/@types/ol-ext/filter/Mask.d.ts b/@types/ol-ext/filter/Mask.d.ts
@@ -1,31 +1,35 @@
 import Feature from 'ol/Feature';
 import { Fill } from 'ol/style';
 import Base from './Base';
+import { ColorLike } from 'ol/colorlike';
 
 export interface Options {
     feature?: Feature;
     fill?: Fill;
+    shadowWidth?: number;
+    shadowMapUnits?: boolean;
+    shadowColor?: ColorLike;
     inner?: boolean;
     wrapX?: boolean;
 }
 
 /** Mask drawing using an ol.Feature
  * @constructor
  * @requires ol_filter
- * @extends {Base}
+ * @extends {ol_filter_Base}
  * @param {Object} [options]
  *  @param {ol.Feature} [options.feature] feature to mask with
  *  @param {ol.style.Fill} [options.fill] style to fill with
+ *  @param {number} [options.shadowWidth=0] shadow width, default no shadow
+ *  @param {boolean} [options.shadowMapUnits=false] true if the shadow width is in mapUnits
+ *  @param {ol.colorLike} [options.shadowColor='rgba(0,0,0,.5)'] shadow color, default 
  *  @param {boolean} [options.inner=false] mask inner, default false
  *  @param {boolean} [options.wrapX=false] wrap around the world, default false
  */
 export default class Mask extends Base {
 
     constructor(options?: Options);
 
-    /** Draw the feature into canvas
-     */
-    drawFeaturePath_(): void;
     /** Activate / deactivate filter
     *	@param {boolean} b
      */
@@ -34,8 +38,13 @@ export default class Mask extends Base {
     *	@return {boolean}
      */
     getActive(): boolean;
-
-    fillColor_: string;
-
+    /** Set filter fill color
+     * @param {ColorLike} color
+     */
+    setFillColor(color: ColorLike): void;
+    /** Set filter shadow color
+     * @param {ColorLike} color
+     */
+    setShadowColor(color: ColorLike): void;
 }
 
diff --git a/@types/ol-ext/legend/Image.d.ts b/@types/ol-ext/legend/Image.d.ts
@@ -0,0 +1,53 @@
+import ol_Object from 'ol/Object';
+import { Size } from 'ol/size';
+
+export interface Options {
+    url: string,
+    title?: string
+    img?: HTMLImageElement | HTMLCanvasElement
+    className?: string;
+    width?: number;
+}
+/** A class for legend image
+ * @constructor
+ * @fires changed
+ * @param {Object} options
+ *  @param {string} url
+ *  @param {string} [title]
+ *  @param {HTMLImageElement|HTMLCanvasElement} [img] an image to display
+ *  @param {string} [src] legend image url (if no img option)
+ *  @param {string} [className] 'center' to center the title
+ *  @param {number} [width] legend width, default use the image width
+ */
+export default class Image extends ol_Object {
+
+    constructor(options?: Options);
+    /** Set the legend title
+     * @param {string} title
+     */
+    setTitle(title: string): void;
+
+    /** Set the item width
+     * @param {number} [width] legend width, default use the image width
+     */
+    setWidth(width?: number): void;
+    /** Get image width
+     * @return {number}
+     */
+    getWidth(): number;
+
+    /** Get image height
+     * @return {number}
+     */
+    getHeight(): number;
+
+    /** Get Image
+     * @returns {Image}
+     */
+    getImage(): HTMLImageElement | HTMLCanvasElement
+
+    /** Get element
+    * @param {Size} size symbol size
+    */
+    getElement(size: Size, onclick: (click: boolean) => void): HTMLElement
+}
diff --git a/@types/ol-ext/legend/Legend.d.ts b/@types/ol-ext/legend/Legend.d.ts
@@ -1,29 +1,43 @@
 import ol_Collection from "ol/Collection";
 import ol_legend_Item, { olLegendItemOptions } from "./Item";
-import ol_style_Text from "ol/style/Text";
-import { Style } from 'ol/style';
-import { StyleFunction } from "ol/style/Style";
+import { Style, Text } from 'ol/style';
+import { StyleFunction, StyleLike } from 'ol/style/Style';
+import { Size } from "ol/size";
+import Layer from "ol/layer/Layer";
 
+
+export interface Options {
+    title?: string;
+    maxWidth?: number;
+    size?: Size;
+    margin?: number;
+    layer?: Layer
+    textStyle?: Text;
+    titleStyle?: Text;
+    style?: StyleLike
+}
 /** Legend class to draw features in a legend element
  * @constructor
  * @fires select
  * @fires refresh
  * @param {*} options
  *  @param {String} options.title Legend title
- *  @param {ol.size | undefined} options.size Size of the symboles in the legend, default [40, 25]
- *  @param {number | undefined} options.margin Size of the symbole's margin, default 10
- *  @param { ol_style_Text | undefined } options.textStyle a text style for the legend, default 16px sans-serif
+ *  @param {number} [options.maxWidth] maximum legend width
+ *  @param {ol.size} [options.size] Size of the symboles in the legend, default [40, 25]
+ *  @param {number} [options.margin=10] Size of the symbole's margin, default 10
+ *  @param { ol.layer.Base } [layer] layer associated with the legend
+ *  @param { ol.style.Text} [options.textStyle='16px sans-serif'] a text style for the legend, default 16px sans-serif
+ *  @param { ol.style.Text} [options.titleStyle='bold 16px sans-serif'] a text style for the legend title, default textStyle + bold
  *  @param { ol.style.Style | Array<ol.style.Style> | ol.StyleFunction | undefined	} options.style a style or a style function to use with features
  */
 export default class ol_legend_Legend {
     /** Get a symbol image for a given legend item
-     * @param {olLegendItemOptions} item
-     * @param {HTMLCanvasElement|undefined} canvas a canvas to draw in, if none creat one
-     * @param {int|undefined} row row number to draw in canvas, default 0
-     * @return {HTMLCanvasElement}
-     */
+    * @param {olLegendItemOptions} item
+    * @param {Canvas|undefined} canvas a canvas to draw in, if none creat one
+    * @param {int|undefined} offsetY Y offset to draw in canvas, default 0
+    */
     static getLegendImage(item: olLegendItemOptions, canvas?: HTMLCanvasElement | undefined, row?: number): HTMLCanvasElement;
-    constructor(options: any);
+    constructor(options?: Options);
 
     /** Set legend title
      * @param {string} title
@@ -36,7 +50,12 @@ export default class ol_legend_Legend {
     /** Get text Style
      * @returns {ol_style_Text}
      */
-    getTextStyle(): ol_style_Text;
+    getTextStyle(): Text;
+
+    /** Set the layer associated with the legend
+  * @param {ol.layer.Layer} [layer]
+  */
+    setLayer(layer: Layer): void
     /** Set legend size
      * @param {ol.size} size
      */
@@ -60,16 +79,35 @@ export default class ol_legend_Legend {
     /** Get item collection
      * @param {ol_Collection}
      */
-    getItems(): ol_Collection<any>;
+    getItems(): ol_Collection<ol_legend_Item>;
+    /** Remove an item at index
+      * @param {ol_legend_Item} item
+      */
+    removeItem(item: ol_legend_Item): void;
+    /*
+    * @param {number} index
+    */
+    removeItemAt(index: number): void;
     /** Refresh the legend
      */
     refresh(): void;
-    /** Get the image for a style
-     * @param {olLegendItemOptions} item
-     * @param {HTMLCanvasElement|undefined} canvas a canvas to draw in, if none creat one
-     * @param {number|undefined} row row number to draw in canvas, default 0
-     * @return {HTMLCanvasElement}
+
+    /** Calculate the legend height
+     * @return {number}
+     */
+    getHeight(): number;
+
+    /** Calculate the legend width
+     * @return {number}
+     */
+    getWidth(): number;
+
+    /** Get the image for a style 
+     * @param {olLegendItemOptions} item 
+     * @param {Canvas|undefined} canvas a canvas to draw in, if none create one
+     * @param {int|undefined} offsetY Y offset to draw in canvas, default 0
+     * @return {CanvasElement}
      */
-    getLegendImage(item: olLegendItemOptions, canvas?: HTMLCanvasElement, row?: number): HTMLCanvasElement;
+    getLegendImage(item: olLegendItemOptions, canvas?: HTMLCanvasElement, offsetY?: number): HTMLCanvasElement;
 }
 
diff --git a/examples/filter/map.filter.crop.ts b/examples/filter/map.filter.crop.ts
@@ -33,7 +33,7 @@ osm.addFilter(mask);
 function setFilter(){
     mask.set('inner', document.querySelector<HTMLInputElement>("#inner")!.checked);
     crop.set('inner', document.querySelector<HTMLInputElement>("#inner")!.checked);
-    mask.fillColor_ = document.querySelector<HTMLSelectElement>("#color")!.value;
+    mask.setFillColor( document.querySelector<HTMLSelectElement>("#color")!.value);
     // Activate
     mask.set('active', false);
     crop.set('active', false);