Add line dash option to Overlay class

examples/al-footprints.html

@@ -12,7 +12,7 @@
     A.init.then(() => {
         // Start up Aladin Lite
         aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
-        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3, lineDash: [2, 2]});
         aladin.addOverlay(overlay);
         overlay.addFootprints([
             A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]], {hoverColor: 'green'}),

src/js/A.js

@@ -29,7 +29,7 @@
  *****************************************************************************/
 
 import { MOC } from "./MOC.js";
-import { Overlay } from "./Overlay.js";
+import { GraphicOverlay } from "./Overlay.js";
 import { Circle } from "./shapes/Circle.js";
 import { Ellipse } from "./shapes/Ellipse.js";
 import { Polyline } from "./shapes/Polyline.js";
@@ -319,13 +319,14 @@ A.vector = function (ra1, dec1, ra2, dec2, options) {
  * @param {Object} options - Options for configuring the graphic overlay.
  * @param {string} [options.color] - The color of the graphic overlay.
  * @param {number} [options.lineWidth] - The width of the lines in the graphic overlay.
+ * @param {Array} [options.lineDash] - The dash pattern for the lines in the graphic overlay.
  * @returns {Overlay} Returns a new Overlay object representing the graphic overlay.
  *
  * @example
- * var overlay = A.graphicOverlay({ color: '#ee2345', lineWidth: 3 });
+ * var overlay = A.graphicOverlay({ color: '#ee2345', lineWidth: 3, lineDash: [2, 4]});
  */
 A.graphicOverlay = function (options) {
-    return new Overlay(options);
+    return new GraphicOverlay(options);
 };
 
 /**
@@ -376,7 +377,7 @@ A.coo = function (longitude, latitude, prec) {
  * @returns {Array.<Polyline|Circle>} Returns a list of shapes from the STC-S string
  */
 A.footprintsFromSTCS = function (stcs, options) {
-    var footprints = Overlay.parseSTCS(stcs, options);
+    var footprints = GraphicOverlay.parseSTCS(stcs, options);
     return footprints;
 }
 

src/js/Aladin.js

@@ -29,7 +29,7 @@
 import { version } from "./../../package.json";
 import { View } from "./View.js";
 import { Utils } from "./Utils";
-import { Overlay } from "./Overlay.js";
+import { GraphicOverlay } from "./Overlay.js";
 import { Logger } from "./Logger.js";
 import { ProgressiveCat } from "./ProgressiveCat.js";
 import { Sesame } from "./Sesame.js";
@@ -1837,7 +1837,7 @@ export let Aladin = (function () {
      * Get list of overlays layers
      *
      * @memberof Aladin
-     * @returns {MOC[]|Catalog[]|ProgressiveCat[]|Overlay[]} - Returns the ordered list of image layers. Items can be {@link ImageHiPS} or {@link ImageFITS} objects.
+     * @returns {MOC[]|Catalog[]|ProgressiveCat[]|GraphicOverlay[]} - Returns the ordered list of image layers. Items can be {@link ImageHiPS} or {@link ImageFITS} objects.
      */
     Aladin.prototype.getOverlays = function () {
         return this.view.allOverlayLayers;
@@ -1879,7 +1879,7 @@ export let Aladin = (function () {
      * Please use {@link A.graphicOverlay} instead
      */
     Aladin.prototype.createOverlay = function (options) {
-        return new Overlay(options);
+        return new GraphicOverlay(options);
     };
 
     // Select corresponds to rectangular selection

src/js/Overlay.js

@@ -34,9 +34,32 @@ import { Utils } from './Utils';
 import A from "./A.js";
 import { Color } from './Color';
 
-
-export let Overlay = (function() {
-   let Overlay = function(options) {
+/**
+* @typedef {Object} GraphicOverlayOptions
+* @description Options for configuring the graphic overlay
+*
+* @property {Object} options - Configuration options for the MOC.
+* @property {string} [options.name="overlay"] - The name of the catalog.
+* @property {string} [options.color] - A string parsed as CSS <color> value. See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value| here}
+* @property {number} [options.lineWidth=3] - The line width in pixels
+* @property {Array.<number>} [options.lineDash=[]] - Dash line option. See the segments property {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash#segments| here}
+*/
+
+/**
+ * Represents an overlay containing Footprints, whether it is 
+ *
+ * @namespace
+ * @typedef {Object} GraphicOverlay
+ */
+export let GraphicOverlay = (function() {
+    /**
+     * Constructor function for creating a new graphical overlay instance.
+     *
+     * @constructor
+     * @memberof GraphicOverlay
+     * @param {GraphicOverlayOptions} options - Configuration options for the overlay.
+     */
+   let GraphicOverlay = function(options) {
         options = options || {};
 
         this.uuid = Utils.uuidv4();
@@ -45,7 +68,8 @@ export let Overlay = (function() {
     	this.name = options.name || "overlay";
     	this.color = options.color || Color.getNextColor();
 
-    	this.lineWidth = options["lineWidth"] || 2;
+    	this.lineWidth = options["lineWidth"] || 3;
+        this.lineDash = options["lineDash"] || [];
 
     	//this.indexationNorder = 5; // at which level should we index overlays?
     	//this.overlays = [];
@@ -58,7 +82,7 @@ export let Overlay = (function() {
 
 
     // TODO : show/hide methods should be integrated in a parent class
-    Overlay.prototype.show = function() {
+    GraphicOverlay.prototype.show = function() {
         if (this.isShowing) {
             return;
         }
@@ -69,7 +93,7 @@ export let Overlay = (function() {
         this.reportChange();
     };
 
-    Overlay.prototype.hide = function() {
+    GraphicOverlay.prototype.hide = function() {
         if (! this.isShowing) {
             return;
         }
@@ -80,7 +104,7 @@ export let Overlay = (function() {
         this.reportChange();
     };
 
-    Overlay.prototype.toggle = function() {
+    GraphicOverlay.prototype.toggle = function() {
         if (! this.isShowing) {
             this.show()
         } else {
@@ -89,7 +113,7 @@ export let Overlay = (function() {
     };
 
     // return an array of Footprint from a STC-S string
-    Overlay.parseSTCS = function(stcs, options) {
+    GraphicOverlay.parseSTCS = function(stcs, options) {
         options = options || {};
 
         var footprints = [];
@@ -150,7 +174,7 @@ export let Overlay = (function() {
     };
 
     // ajout d'un tableau d'overlays (= objets Footprint, Circle ou Polyline)
-    Overlay.prototype.addFootprints = function(overlaysToAdd) {
+    GraphicOverlay.prototype.addFootprints = function(overlaysToAdd) {
     	for (var k=0, len=overlaysToAdd.length; k<len; k++) {
             this.add(overlaysToAdd[k], false);
         }
@@ -159,7 +183,7 @@ export let Overlay = (function() {
     };
 
     // TODO : item doit pouvoir prendre n'importe quoi en param (footprint, circle, polyline)
-    Overlay.prototype.add = function(item, requestRedraw) {
+    GraphicOverlay.prototype.add = function(item, requestRedraw) {
         requestRedraw = requestRedraw !== undefined ? requestRedraw : true;
 
         //if (item instanceof Footprint) {
@@ -177,7 +201,7 @@ export let Overlay = (function() {
 
 
     // return a footprint by index
-   Overlay.prototype.getFootprint = function(idx) {
+    GraphicOverlay.prototype.getFootprint = function(idx) {
         if (idx<this.footprints.length) {
             return this.footprints[idx];
         }
@@ -186,24 +210,26 @@ export let Overlay = (function() {
         }
     };
 
-    Overlay.prototype.setView = function(view) {
+    GraphicOverlay.prototype.setView = function(view) {
         this.view = view;
     };
 
-    Overlay.prototype.removeAll = function() {
+    GraphicOverlay.prototype.removeAll = function() {
         // TODO : RAZ de l'index
         //this.overlays = [];
         this.overlayItems = [];
     };
 
-    Overlay.prototype.draw = function(ctx) {
+    GraphicOverlay.prototype.draw = function(ctx) {
         if (!this.isShowing) {
             return;
         }
 
+        ctx.save();
         // simple drawing
         ctx.strokeStyle= this.color;
         ctx.lineWidth = this.lineWidth;
+        ctx.setLineDash(this.lineDash);
 
         // 1. Drawing polygons
 
@@ -231,9 +257,11 @@ export let Overlay = (function() {
     	for (var k=0; k<this.overlayItems.length; k++) {
     	    this.overlayItems[k].draw(ctx, this.view);
     	}
+
+        ctx.restore();
     };
 
-    Overlay.increaseBrightness = function(hex, percent){
+    GraphicOverlay.increaseBrightness = function(hex, percent){
         // strip the leading # if it's there
         hex = hex.replace(/^\s*#|\s*$/g, '');
 
@@ -252,20 +280,25 @@ export let Overlay = (function() {
                 ((0|(1<<8) + b + (256 - b) * percent / 100).toString(16)).substr(1);
     };
 
-    Overlay.prototype.setColor = function(color) {
+    GraphicOverlay.prototype.setColor = function(color) {
         this.color = color;
         this.reportChange();
     };
 
-    Overlay.prototype.setLineWidth = function(lineWidth) {
+    GraphicOverlay.prototype.setLineWidth = function(lineWidth) {
         this.lineWidth = lineWidth;
         this.reportChange();
     };
 
+    GraphicOverlay.prototype.setLineDash = function(lineDash) {
+        this.lineDash = lineDash;
+        this.reportChange();
+    }
+
     // callback function to be called when the status of one of the footprints has changed
-    Overlay.prototype.reportChange = function() {
+    GraphicOverlay.prototype.reportChange = function() {
         this.view && this.view.requestRedraw();
     };
 
-    return Overlay;
+    return GraphicOverlay;
 })();

src/js/shapes/Circle.js

@@ -29,7 +29,7 @@
  *****************************************************************************/
 
 import { Utils } from "./../Utils";
-import { Overlay } from "./../Overlay.js";
+import { GraphicOverlay } from "./../Overlay.js";
 
 /**
  * Represents an circle shape
@@ -254,10 +254,10 @@ export let Circle = (function() {
             if(this.selectionColor) {
                 ctx.strokeStyle = this.selectionColor;
             } else {
-                ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
+                ctx.strokeStyle = GraphicOverlay.increaseBrightness(baseColor, 50);
             }
         } else if (this.isHovered) {
-            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+            ctx.strokeStyle = this.hoverColor || GraphicOverlay.increaseBrightness(baseColor, 25);
         } else {
             ctx.strokeStyle = baseColor;
         }

src/js/shapes/Ellipse.js

@@ -29,7 +29,7 @@
  *****************************************************************************/
 
 import { Utils } from "./../Utils";
-import { Overlay } from "./../Overlay.js";
+import { GraphicOverlay } from "./../Overlay.js";
 
 /**
 * @typedef {Object} ShapeOptions
@@ -294,10 +294,10 @@ export let Ellipse = (function() {
             if(this.selectionColor) {
                 ctx.strokeStyle = this.selectionColor;
             } else {
-                ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
+                ctx.strokeStyle = GraphicOverlay.increaseBrightness(baseColor, 50);
             }
         } else if (this.isHovered) {
-            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+            ctx.strokeStyle = this.hoverColor || GraphicOverlay.increaseBrightness(baseColor, 25);
         } else {
             ctx.strokeStyle = baseColor;
         }

src/js/shapes/Line.js

@@ -31,7 +31,7 @@
  *****************************************************************************/
 import { Polyline } from "./Polyline.js";
 import { Utils } from '../Utils';
-import { Overlay } from "../Overlay.js";
+import { GraphicOverlay } from "../Overlay.js";
 import { Ellipse } from "./Ellipse.js";
 
 /**
@@ -131,9 +131,9 @@ export let Line = (function() {
             }
 
             if (this.isSelected) {
-                ctx.strokeStyle = this.selectionColor || Overlay.increaseBrightness(baseColor, 50);
+                ctx.strokeStyle = this.selectionColor || GraphicOverlay.increaseBrightness(baseColor, 50);
             } else if (this.isHovered) {
-                ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+                ctx.strokeStyle = this.hoverColor || GraphicOverlay.increaseBrightness(baseColor, 25);
             } else {
                 ctx.strokeStyle = baseColor;
             }

src/js/shapes/Polyline.js

@@ -34,7 +34,7 @@
  *****************************************************************************/
 
 import { Utils } from '../Utils';
-import { Overlay } from "../Overlay.js";
+import { GraphicOverlay } from "../Overlay.js";
 import { ProjectionEnum } from "../ProjectionEnum.js";
 
 /**
@@ -267,10 +267,10 @@ export let Polyline = (function() {
             if(this.selectionColor) {
                 ctx.strokeStyle = this.selectionColor;
             } else {
-                ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
+                ctx.strokeStyle = GraphicOverlay.increaseBrightness(baseColor, 50);
             }
         } else if (this.isHovered) {
-            ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
+            ctx.strokeStyle = this.hoverColor || GraphicOverlay.increaseBrightness(baseColor, 25);
         } else {
             ctx.strokeStyle = baseColor;
         }