gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2025-12-12 15:49:18 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix: restore context after drawing overlay + rename Overlay -> GraphicOverlay

Browse Source
This commit is contained in:
Matthieu Baumann
2024-05-21 17:35:10 +10:00
committed by Matthieu Baumann
parent e080f9f7d0
commit bada1dcecb
8 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/al-footprints.html
View File

@@ -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'}),

6
src/js/A.js
View File

@@ -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";
@@ -326,7 +326,7 @@ A.vector = function (ra1, dec1, ra2, dec2, options) {
* var overlay = A.graphicOverlay({ color: '#ee2345', lineWidth: 3, lineDash: [2, 4]});
*/
A.graphicOverlay = function (options) {
return new Overlay(options);
return new GraphicOverlay(options);
};
/**
@@ -377,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;
}

6
src/js/Aladin.js
View File

@@ -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

64
src/js/Overlay.js
View File

@@ -34,9 +34,32 @@ import { Utils } from './Utils';
import A from "./A.js";
import { Color } from './Color';
/**
* @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}
*/
export let Overlay = (function() {
let Overlay = function(options) {
/**
* 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,7 @@ 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?
@@ -59,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;
}
@@ -70,7 +93,7 @@ export let Overlay = (function() {
this.reportChange();
};
Overlay.prototype.hide = function() {
GraphicOverlay.prototype.hide = function() {
if (! this.isShowing) {
return;
}
@@ -81,7 +104,7 @@ export let Overlay = (function() {
this.reportChange();
};
Overlay.prototype.toggle = function() {
GraphicOverlay.prototype.toggle = function() {
if (! this.isShowing) {
this.show()
} else {
@@ -90,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 = [];
@@ -151,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);
}
@@ -160,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) {
@@ -178,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];
}
@@ -187,21 +210,22 @@ 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;
@@ -233,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, '');
@@ -254,25 +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();
};
Overlay.prototype.setLineDash = function(lineDash) {
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;
})();

6
src/js/shapes/Circle.js
View File

@@ -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;
}

6
src/js/shapes/Ellipse.js
View File

@@ -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;
}

6
src/js/shapes/Line.js
View File

@@ -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;
}

6
src/js/shapes/Polyline.js
View File

@@ -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;
}