diff --git a/examples/al-cat-proper-motion.html b/examples/al-cat-proper-motion.html index 38c1c612..865ca03d 100644 --- a/examples/al-cat-proper-motion.html +++ b/examples/al-cat-proper-motion.html @@ -12,7 +12,7 @@ // Start up Aladin Lite aladin = A.aladin('#aladin-lite-div', { target: "LMC", - fov: 2, + fov: 10, showContextMenu: true, fullScreen: true, showSimbadPointerControl: true, @@ -27,47 +27,47 @@ //aladin.addCatalog(A.catalogFromVizieR('J/A+A/663/A107/table5', 'LMC', 5, { const pmCat = A.catalogFromURL('./data/proper_motion.xml', { - onClick: 'showTable', - name: 'mean pm over HPX cells around LMC from GaiaDR2', - hoverColor: 'yellow', - // Footprint associated to sources - shape: (s) => { - // compute the mean of pm over the catalog sources - if (!pmraMean || !pmdecMean) { - pmraMean = 0, pmdecMean = 0; - for (var s of pmCat.getSources()) { - pmraMean += +s.data.pmra; - pmdecMean += +s.data.pmdec; - } - - const numSources = pmCat.getSources().length; - - pmraMean /= numSources - pmdecMean /= numSources + onClick: 'showTable', + name: 'mean pm over HPX cells around LMC from GaiaDR2', + hoverColor: 'yellow', + selectionColor: 'white', + // Footprint associated to sources + shape: (s) => { + // Compute the mean of pm over the catalog sources + if (!pmraMean || !pmdecMean) { + pmraMean = 0, pmdecMean = 0; + for (var s of pmCat.getSources()) { + pmraMean += +s.data.pmra; + pmdecMean += +s.data.pmdec; } - let dra = +s.data.pmra - pmraMean; - let ddec = +s.data.pmdec - pmdecMean; + const numSources = pmCat.getSources().length; - let mag = Math.sqrt(dra * dra + ddec * ddec); - // discard drawing a vector for big pm - if (mag > 1) { - return; - } - - let color = rainbowColorMap(mag * 2) - - return A.line( - s.ra, - s.dec, - s.ra + dra, - s.dec + ddec, - null, - {lineWidth: 3, arrow: true, color} - ) + pmraMean /= numSources + pmdecMean /= numSources } - }, - ); + + let dra = +s.data.pmra - pmraMean; + let ddec = +s.data.pmdec - pmdecMean; + + let mag = Math.sqrt(dra * dra + ddec * ddec); + // discard drawing a vector for big pm + if (mag > 1) { + return; + } + + let color = rainbowColorMap(mag * 2) + + return A.vector( + s.ra, + s.dec, + s.ra + dra, + s.dec + ddec, + null, + {lineWidth: 3, color} + ) + } + }); aladin.addCatalog(pmCat); }); diff --git a/src/core/src/app.rs b/src/core/src/app.rs index 5c0a2352..92190c5a 100644 --- a/src/core/src/app.rs +++ b/src/core/src/app.rs @@ -821,6 +821,10 @@ impl App { } } + pub(crate) fn draw_grid_labels(&mut self) -> Result<(), JsValue> { + self.grid.draw_labels(&self.camera) + } + pub(crate) fn draw(&mut self, force_render: bool) -> Result<(), JsValue> { /*let scene_redraw = self.rendering | force_render; let mut ui = self.ui.lock(); diff --git a/src/core/src/grid/mod.rs b/src/core/src/grid/mod.rs index cdc127fc..f510f3b7 100644 --- a/src/core/src/grid/mod.rs +++ b/src/core/src/grid/mod.rs @@ -2,6 +2,7 @@ pub mod label; pub mod meridian; pub mod parallel; +use crate::grid::parallel::Parallel; use crate::math::projection::coo_space::XYScreen; use crate::Abort; @@ -31,6 +32,9 @@ pub struct ProjetedGrid { fmt: angle::SerializeFmt, line_style: line::Style, + + meridians: Vec, + parallels: Vec, } use crate::shader::ShaderManager; @@ -40,6 +44,8 @@ use crate::renderable::line::RasterizedLineRenderer; use crate::renderable::text::TextRenderManager; use web_sys::HtmlElement; +use self::meridian::Meridian; + impl ProjetedGrid { pub fn new(aladin_div: &HtmlElement) -> Result { let text_renderer = TextRenderManager::new(aladin_div)?; @@ -56,6 +62,8 @@ impl ProjetedGrid { let line_style = line::Style::None; let fmt = angle::SerializeFmt::DMS; let thickness = 2.0; + let meridians = Vec::new(); + let parallels = Vec::new(); let grid = ProjetedGrid { color, @@ -66,6 +74,8 @@ impl ProjetedGrid { thickness, text_renderer, + meridians, + parallels, fmt, }; // Initialize the vertices & labels @@ -147,7 +157,7 @@ impl ProjetedGrid { let step_line_px = max_dim_px * 0.2; // update meridians - let meridians = { + self.meridians = { // Select the good step with a binary search let step_lon_precised = (bbox.get_lon_size() as f64) * step_line_px / (camera.get_width() as f64); @@ -173,7 +183,7 @@ impl ProjetedGrid { meridians }; - let parallels = { + self.parallels = { let step_lat_precised = (bbox.get_lat_size() as f64) * step_line_px / (camera.get_height() as f64); let step_lat = select_fixed_step(step_lat_precised); @@ -196,11 +206,12 @@ impl ProjetedGrid { }; // update the line buffers - let paths = meridians + let paths = self + .meridians .iter() .map(|meridian| meridian.get_lines_vertices()) .chain( - parallels + self.parallels .iter() .map(|parallel| parallel.get_lines_vertices()), ) @@ -213,12 +224,16 @@ impl ProjetedGrid { let m = camera.get_screen_size().magnitude(); rasterizer.add_stroke_paths(paths, self.thickness, &self.color, &self.line_style); - // update labels - if self.show_labels { - let labels = meridians + Ok(()) + } + + pub fn draw_labels(&mut self, camera: &CameraViewPort) -> Result<(), JsValue> { + if self.enabled && self.show_labels { + let labels = self + .meridians .iter() .filter_map(|m| m.get_label()) - .chain(parallels.iter().filter_map(|p| p.get_label())); + .chain(self.parallels.iter().filter_map(|p| p.get_label())); let dpi = camera.get_dpi(); self.text_renderer.begin(); diff --git a/src/core/src/lib.rs b/src/core/src/lib.rs index fe3a3f33..d40e0f07 100644 --- a/src/core/src/lib.rs +++ b/src/core/src/lib.rs @@ -927,6 +927,11 @@ impl WebClient { self.app.is_rendering() } + #[wasm_bindgen(js_name = drawGridLabels)] + pub fn draw_grid_labels(&mut self) -> Result<(), JsValue> { + self.app.draw_grid_labels() + } + #[wasm_bindgen(js_name = parseVOTable)] pub fn parse_votable(&mut self, s: &str) -> Result { /*let votable: VOTableWrapper = diff --git a/src/core/src/renderable/text.rs b/src/core/src/renderable/text.rs index ecc89df5..093d82a7 100644 --- a/src/core/src/renderable/text.rs +++ b/src/core/src/renderable/text.rs @@ -82,27 +82,10 @@ impl TextRenderManager { Ok(()) } - - pub fn draw( - &mut self, - _camera: &CameraViewPort, - _color: &ColorRGBA, - _scale: f32, - ) -> Result<(), JsValue> { - Ok(()) - } } impl Renderer for TextRenderManager { fn begin(&mut self) { - self.ctx = self - .canvas - .get_context("2d") - .unwrap_abort() - .unwrap_abort() - .dyn_into::() - .unwrap_abort(); - //self.clear_text_canvas(); // Clear the Aladin Lite 2d canvas // This canvas is where catalogs, grid labels, Hpx grid are drawn diff --git a/src/css/aladin.css b/src/css/aladin.css index 0b6e8ef7..ff33aa3b 100644 --- a/src/css/aladin.css +++ b/src/css/aladin.css @@ -54,18 +54,6 @@ padding-top: 58.45%; /* aspect ratio of the background image */ } -.aladin-col { - float: left; - width: 45.00%; - margin-right: 5.0%; -} - /* Clear floats after the columns */ -.aladin-row:after { - content: ""; - display: table; - clear: both; -} - .aladin-clipboard::before { content: ' 📋'; cursor:pointer; diff --git a/src/js/A.js b/src/js/A.js index 8547364e..c6dc4dff 100644 --- a/src/js/A.js +++ b/src/js/A.js @@ -147,7 +147,7 @@ A.imageFITS = function (url, options) { * @memberof A * @param {number} ra - Right Ascension (RA) coordinate in degrees. * @param {number} dec - Declination (Dec) coordinate in degrees. - * @param {*} [data] - Additional data associated with the source. + * @param {Object} [data] - Additional data associated with the source. * @param {SourceOptions} [options] - Options for configuring the source object. * @returns {Source} A celestial source object. * @example @@ -166,7 +166,7 @@ A.source = function (ra, dec, data, options) { * @param {number} ra - Right Ascension (RA) coordinate in degrees. * @param {number} dec - Declination (Dec) coordinate in degrees. * @param {MarkerOptions} [options] - Options for configuring the marker. - * @param {*} [data] - Additional data associated with the marker. + * @param {Object} [data] - Additional data associated with the marker. * @returns {Source} A marker source object. * @example * const markerObj = A.marker(180.0, 30.0, data, options); @@ -184,10 +184,11 @@ A.marker = function (ra, dec, options, data) { * @memberof A * @name polygon * - * @param {Array} raDecArray - Array of celestial coordinates representing the vertices of the polygon. - * Each element should be an object with properties `ra` (Right Ascension) in degrees and `dec` (Declination) in degrees. - * @param {Object} options - Options for configuring the polygon. + * @param {Array.} radecArray - right-ascension/declination 2-tuple array describing the polyline's vertices in degrees + * @param {ShapeOptions} options - Options for configuring the polygon * @throws {string} Throws an error if the number of vertices is less than 3. + * + * @returns {Polyline} */ A.polygon = function (raDecArray, options) { const numVertices = raDecArray.length; @@ -212,15 +213,16 @@ A.polygon = function (raDecArray, options) { }; /** - * Creates a polyline object using an array of celestial coordinates (RA, Dec). + * Creates a polyline shape * * @function * @memberof A * @name polyline * - * @param {Array} raDecArray - Array of celestial coordinates representing the vertices of the polyline. - * Each element should be an object with properties `ra` (Right Ascension) in degrees and `dec` (Declination) in degrees. - * @param {Object} options - Options for configuring the polyline. + * @param {Array.} radecArray - right-ascension/declination 2-tuple array describing the polyline's vertices in degrees + * @param {ShapeOptions} options - Options for configuring the polyline. + * + * @returns {Polyline} */ A.polyline = function (raDecArray, options) { return new Polyline(raDecArray, options); @@ -228,7 +230,7 @@ A.polyline = function (raDecArray, options) { /** - * Creates a circle object + * Creates a circle shape * * @function * @memberof A @@ -238,14 +240,15 @@ A.polyline = function (raDecArray, options) { * @param {number} dec - Declination (Dec) coordinate of the center in degrees. * @param {number} radiusDeg - Radius in degrees. - * @param {Object} options - Options for configuring the circle. + * @param {ShapeOptions} options - Options for configuring the circle. + * @returns {Circle} */ A.circle = function (ra, dec, radiusDeg, options) { return new Circle([ra, dec], radiusDeg, options); }; /** - * Creates a ellipse object + * Creates an ellipse shape * * @function * @memberof A @@ -257,14 +260,15 @@ A.circle = function (ra, dec, radiusDeg, options) { * @param {number} radiusDecDeg - the radius along the dec axis in degrees * @param {number} rotationDeg - the rotation angle in degrees - * @param {Object} options - Options for configuring the ellipse. + * @param {ShapeOptions} options - Options for configuring the ellipse. + * @returns {Ellipse} */ A.ellipse = function (ra, dec, radiusRaDeg, radiusDecDeg, rotationDeg, options) { return new Ellipse([ra, dec], radiusRaDeg, radiusDecDeg, rotationDeg, options); }; /** - * Creates a ellipse object + * Creates a line shape * * @function * @memberof A @@ -274,8 +278,8 @@ A.ellipse = function (ra, dec, radiusRaDeg, radiusDecDeg, rotationDeg, options) * @param {number} dec1 - Declination (Dec) coordinate of the center in degrees. * @param {number} ra2 - Right Ascension (RA) coordinate of the center in degrees. * @param {number} dec2 - Declination (Dec) coordinate of the center in degrees. - * @param {CooFrame} [frame] - Right Ascension (RA) coordinate of the center in degrees. - * @param {Object} options - Options for configuring the ellipse. + * @param {CooFrame} [frame] - Frame in which the coordinates are given. If none, the frame used is icrs/j2000. + * @param {ShapeOptions} options - Options for configuring the line. * * @returns {Line} */ @@ -283,6 +287,28 @@ A.ellipse = function (ra, dec, radiusRaDeg, radiusDecDeg, rotationDeg, options) return new Line(ra1, dec1, ra2, dec2, frame, options); }; +/** + * Creates a vector shape + * + * @function + * @memberof A + * @name vector + * + * @param {number} ra1 - Right Ascension (RA) coordinate of the center in degrees. + * @param {number} dec1 - Declination (Dec) coordinate of the center in degrees. + * @param {number} ra2 - Right Ascension (RA) coordinate of the center in degrees. + * @param {number} dec2 - Declination (Dec) coordinate of the center in degrees. + * @param {CooFrame} [frame] - Frame in which the coordinates are given. If none, the frame used is icrs/j2000. + * @param {ShapeOptions} options - Options for configuring the vector. + * + * @returns {Line} + */ +A.vector = function (ra1, dec1, ra2, dec2, frame, options) { + options['arrow'] = true; + + return A.line(ra1, dec1, ra2, dec2, frame, options); +} + /** * Creates a graphic overlay on the Aladin Lite view. * @@ -338,15 +364,19 @@ A.coo = function (longitude, latitude, prec) { return new Coo(longitude, latitude, prec); }; -// API -A.footprint = function(shapes) { - return new Footprint(shapes); -}; - -// API +/** + * Parse shapes from a STC-S string + * + * @function + * @memberof A + * @name footprintsFromSTCS + * + * @param {string} stcs - The STC-S string describing the shapes + * @param {ShapeOptions} [options] - Options for the shape + * @returns {Array.} Returns a list of shapes from the STC-S string + */ A.footprintsFromSTCS = function (stcs, options) { var footprints = Overlay.parseSTCS(stcs, options); - return footprints; } diff --git a/src/js/Aladin.js b/src/js/Aladin.js index f91e60dd..51d7314b 100644 --- a/src/js/Aladin.js +++ b/src/js/Aladin.js @@ -216,9 +216,16 @@ export let Aladin = (function () { } // merge with default options - var options = { - gridOptions: {} - }; + var options = {}; + + for (var key in Aladin.DEFAULT_OPTIONS) { + if (requestedOptions[key] !== undefined) { + options[key] = requestedOptions[key]; + } + else { + options[key] = Aladin.DEFAULT_OPTIONS[key]; + } + } // 'gridOptions' is an object, so it need it own loop if ('gridOptions' in requestedOptions) { @@ -228,14 +235,7 @@ export let Aladin = (function () { } } } - for (var key in Aladin.DEFAULT_OPTIONS) { - if (requestedOptions[key] !== undefined) { - options[key] = requestedOptions[key]; - } - else { - options[key] = Aladin.DEFAULT_OPTIONS[key]; - } - } + for (var key in requestedOptions) { if (Aladin.DEFAULT_OPTIONS[key] === undefined) { options[key] = requestedOptions[key]; @@ -271,6 +271,7 @@ export let Aladin = (function () { // Grid let gridOptions = options.gridOptions; + console.log(options.gridOptions) // color and opacity can be defined by two variables. The item in gridOptions // should take precedence. gridOptions["color"] = options.gridOptions.color || options.gridColor; @@ -278,6 +279,7 @@ export let Aladin = (function () { if (options && options.showCooGrid) { gridOptions.enabled = true; } + console.log(gridOptions) this.setCooGrid(gridOptions); this.gotoObject(options.target, undefined); @@ -697,18 +699,18 @@ export let Aladin = (function () { * Sets the coordinate frame of the Aladin instance to the specified frame. * * @memberof Aladin - * @param {string} frameName - The name of the coordinate frame. Possible values: 'J2000', 'J2000d', 'GALACTIC'. + * @param {string} frame - The name of the coordinate frame. Possible values: 'j2000d', 'j2000', 'gal', 'icrs'. The given string is case insensitive. * * @example * // Set the coordinate frame to 'J2000' * const aladin = A.aladin('#aladin-lite-div'); * aladin.setFrame('J2000'); */ - Aladin.prototype.setFrame = function (frameName) { - if (!frameName) { + Aladin.prototype.setFrame = function (frame) { + if (!frame) { return; } - var newFrame = CooFrameEnum.fromString(frameName, CooFrameEnum.J2000); + var newFrame = CooFrameEnum.fromString(frame, CooFrameEnum.J2000); if (newFrame == this.view.cooFrame) { return; } diff --git a/src/js/Circle.js b/src/js/Circle.js index 5345ef7f..c5ccdde6 100644 --- a/src/js/Circle.js +++ b/src/js/Circle.js @@ -29,13 +29,27 @@ *****************************************************************************/ import { Utils } from "./Utils"; -import { AladinUtils } from "./AladinUtils.js"; import { Overlay } from "./Overlay.js"; -// TODO : Circle and Footprint should inherit from the same root object +/** + * Represents an circle shape + * + * @namespace + * @typedef {Object} Circle + */ export let Circle = (function() { - // constructor - let Circle = function(centerRaDec, radiusDegrees, options) { + /** + * Constructor function for creating a new circle. + * + * @constructor + * @memberof Circle + * @param {number[]} center - right-ascension/declination 2-tuple of the circle's center in degrees + * @param {number} radius - radius in degrees + * @param {ShapeOptions} options - Configuration options for the circle + * + * @returns {Circle} - The circle shape object + */ + let Circle = function(center, radius, options) { options = options || {}; this.color = options['color'] || undefined; @@ -47,8 +61,8 @@ export let Circle = (function() { // TODO : all graphic overlays should have an id this.id = 'circle-' + Utils.uuidv4(); - this.setCenter(centerRaDec); - this.setRadius(radiusDegrees); + this.setCenter(center); + this.setRadius(radius); this.overlay = null; this.isShowing = true; diff --git a/src/js/Ellipse.js b/src/js/Ellipse.js index 5672a70c..901edddd 100644 --- a/src/js/Ellipse.js +++ b/src/js/Ellipse.js @@ -31,10 +31,41 @@ import { Utils } from "./Utils"; import { Overlay } from "./Overlay.js"; -// TODO : Ellipse, Circle and Footprint should inherit from the same root object +/** +* @typedef {Object} ShapeOptions +* @description Options for describing a shape +* +* @property {Object} options - Configuration options for the shape. +* @property {string} [options.color] - The color of the shape +* @property {string} [options.fill=false] - Fill the shape with fillColor +* @property {string} [options.fillColor] - A filling color for the shape +* @property {number} [options.lineWidth=2] - The line width in pixels +* @property {number} [options.opacity=1] - The opacity, between 0 (totally transparent) and 1 (totally opaque) +* @property {string} [options.selectionColor='#00ff00'] - A selection color +* @property {string} [options.hoverColor] - A hovered color +*/ + +/** + * Represents an ellipse shape + * + * @namespace + * @typedef {Object} Ellipse + */ export let Ellipse = (function() { - // constructor - let Ellipse = function(centerRaDec, rayonXDegrees, rayonYDegrees, rotationDegrees, options) { + /** + * Constructor function for creating a new ellipse. + * + * @constructor + * @memberof Ellipse + * @param {number[]} center - right-ascension/declination 2-tuple of the ellipse's center in degrees + * @param {number} a - semi-major axis length in degrees + * @param {number} b - semi-minor axis length in degrees + * @param {number} theta - angle of the ellipse in degrees + * @param {ShapeOptions} options - Configuration options for the ellipse + * + * @returns {Ellipse} - The ellipse shape object + */ + let Ellipse = function(center, a, b, theta, options) { options = options || {}; this.color = options['color'] || undefined; @@ -42,13 +73,14 @@ export let Ellipse = (function() { this.lineWidth = options["lineWidth"] || 2; this.selectionColor = options["selectionColor"] || '#00ff00'; this.hoverColor = options["hoverColor"] || undefined; + this.opacity = options['opacity'] || 1; // TODO : all graphic overlays should have an id this.id = 'ellipse-' + Utils.uuidv4(); - this.setCenter(centerRaDec); - this.setRadiuses(rayonXDegrees, rayonYDegrees); - this.setRotation(rotationDegrees); + this.setCenter(center); + this.setAxisLength(a, b); + this.setRotation(theta); this.overlay = null; this.isShowing = true; @@ -185,9 +217,9 @@ export let Ellipse = (function() { } }; - Ellipse.prototype.setRadiuses = function(radiusXDegrees, radiusYDegrees) { - this.a = radiusXDegrees; - this.b = radiusYDegrees; + Ellipse.prototype.setAxisLength = function(a, b) { + this.a = a; + this.b = b; if (this.overlay) { this.overlay.reportChange(); @@ -200,8 +232,6 @@ export let Ellipse = (function() { // TODO Ellipse.prototype.draw = function(ctx, view, noStroke) { - - if (! this.isShowing) { return; } @@ -297,6 +327,7 @@ export let Ellipse = (function() { } ctx.lineWidth = this.lineWidth; + ctx.globalAlpha = this.opacity; ctx.beginPath(); ctx.ellipse(originScreen[0], originScreen[1], px_per_deg * this.a, px_per_deg * this.b, theta, 0, 2*Math.PI, false); diff --git a/src/js/Footprint.js b/src/js/Footprint.js index c01b369c..52e5a00a 100644 --- a/src/js/Footprint.js +++ b/src/js/Footprint.js @@ -62,12 +62,10 @@ export let Footprint= (function() { if (!s.color) { s.setColor(catalog.color); } - if (!s.selectionColor) { - s.setSelectionColor(catalog.selectionColor); - } - if (!s.hoverColor) { - s.setHoverColor(catalog.hoverColor); - } + + // Selection and hover color are catalog options + s.setSelectionColor(catalog.selectionColor); + s.setHoverColor(catalog.hoverColor); } } }; diff --git a/src/js/Line.js b/src/js/Line.js index cedce5ca..a882c2c5 100644 --- a/src/js/Line.js +++ b/src/js/Line.js @@ -33,8 +33,28 @@ import { Polyline } from "./Polyline.js"; import { Utils } from './Utils'; import { Overlay } from "./Overlay.js"; +/** + * Represents an line shape + * + * @namespace + * @typedef {Object} Line + */ export let Line = (function() { - // constructor + /** + * Constructor function for creating a new line. + * + * @constructor + * @memberof Line + * @param {number} ra1 - Right Ascension (RA) coordinate of the center in degrees. + * @param {number} dec1 - Declination (Dec) coordinate of the center in degrees. + * @param {number} ra2 - Right Ascension (RA) coordinate of the center in degrees. + * @param {number} dec2 - Declination (Dec) coordinate of the center in degrees. + * @param {CooFrame} [frame] - Frame in which the coordinates are given. If none, the frame used is icrs/j2000. + * @param {ShapeOptions} options - Options for configuring the line. Additional properties: + * @param {boolean} [options.arrow=false] - Add an arrow pointing from (ra1, dec1) to (ra2, dec2) + * + * @returns {Line} - The line shape object + */ let Line = function(ra1, dec1, ra2, dec2, frame, options) { options = options || {}; this.color = options['color'] || undefined; @@ -61,11 +81,6 @@ export let Line = (function() { }; Line.prototype = { - setToPosition: function(ra2, dec2) { - this.ra2 = ra2; - this.dec2 = dec2; - }, - setOverlay: Polyline.prototype.setOverlay, isFootprint: Polyline.prototype.isFootprint, show: Polyline.prototype.show, @@ -105,20 +120,11 @@ export let Line = (function() { return; } - var baseColor = this.color; - if (!baseColor && this.overlay) { - baseColor = this.overlay.color; - } - if (!baseColor) { - baseColor = '#ff0000'; - } - - if (!this.lineWidth) { - this.lineWidth = this.overlay.lineWidth || 2; - } + let baseColor = this.color || (this.overlay && this.overlay.color) || '#ff0000'; + let lineWidth = this.lineWidth || this.overlay.lineWidth || 3; // too small - if ((xmax - xmin) < this.lineWidth || (ymax - ymin) < this.lineWidth) { + if ((xmax - xmin) < lineWidth || (ymax - ymin) < lineWidth) { return; } @@ -130,7 +136,7 @@ export let Line = (function() { ctx.strokeStyle = baseColor; } - ctx.lineWidth = this.lineWidth; + ctx.lineWidth = lineWidth; ctx.globalAlpha = this.opacity; ctx.beginPath(); diff --git a/src/js/MOC.js b/src/js/MOC.js index 384e6dc5..8df6f2e3 100644 --- a/src/js/MOC.js +++ b/src/js/MOC.js @@ -37,12 +37,12 @@ import { ALEvent } from "./events/ALEvent.js"; * @typedef {Object} MOC */ export let MOC = (function() { - /** + /** * Constructor function for creating a new catalog instance. * * @constructor * @memberof MOC - * @param {MOCOptions} options - Configuration options for the MOC. + * @param {MOCOptions} options - Configuration options for the MOC. */ let MOC = function(options) { //this.order = undefined; diff --git a/src/js/Polyline.js b/src/js/Polyline.js index 6043b0e1..b013bae9 100644 --- a/src/js/Polyline.js +++ b/src/js/Polyline.js @@ -38,6 +38,12 @@ import { Overlay } from "./Overlay.js"; import { ProjectionEnum } from "./ProjectionEnum.js"; +/** + * Represents a polyline shape + * + * @namespace + * @typedef {Object} Polyline + */ export let Polyline = (function() { function _calculateMag2ForNoSinProjections(l, view) { @@ -86,7 +92,17 @@ export let Polyline = (function() { return false; }*/ - // constructor + /** + * Constructor function for creating a new polyline. + * + * @constructor + * @memberof Polyline + * @param {Array.} radecArray - right-ascension/declination 2-tuple array describing the polyline's vertices in degrees + * @param {ShapeOptions} options - Configuration options for the polyline. Additional properties: + * @param {boolean} [options.closed=false] - Close the polyline, default to false. + * + * @returns {Polyline} - The polyline shape object + */ let Polyline = function(radecArray, options) { options = options || {}; this.color = options['color'] || undefined; @@ -97,11 +113,7 @@ export let Polyline = (function() { this.selectionColor = options["selectionColor"] || '#00ff00'; this.hoverColor = options["hoverColor"] || undefined; - if (options["closed"]) { - this.closed = options["closed"]; - } else { - this.closed = false; - } + this.closed = (options["closed"] !== undefined) ? options["closed"] : false; // All graphics overlay have an id this.id = 'polyline-' + Utils.uuidv4(); diff --git a/src/js/View.js b/src/js/View.js index 98d197a4..7369a858 100644 --- a/src/js/View.js +++ b/src/js/View.js @@ -1302,6 +1302,16 @@ export let View = (function () { } } + // display grid labels + if (this.gridCfg.enabled && this.gridCfg.showLabels) { + if (!this.catalogCanvasCleared) { + ctx.clearRect(0, 0, this.width, this.height); + this.catalogCanvasCleared = true; + } + + this.wasm.drawGridLabels(); + } + if (this.mode === View.SELECT) { this.selector.dispatch('draw') }