gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2026-04-28 11:53:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Support selectionLineWidth option for shapes and catalogs

Browse Source
This commit is contained in:
Tom Donaldson
2026-03-03 10:51:19 -05:00
committed by Matthieu Baumann
parent bdb4f4aa5b
commit 5f5fd7b555
9 changed files with 207 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/A.js
View File

@@ -618,6 +618,7 @@ A.catalogFromURL = function (url, options, successCallback, errorCallback, usePr
fp.setColor(c.color);
fp.setHoverColor(c.hoverColor);
fp.setSelectionColor(c.selectionColor);
fp.setSelectionLineWidth(c.selectionLineWidth);
return fp;
})

17
src/js/Catalog.js
View File

@@ -55,6 +55,7 @@ If a function is given, user can return Image, HTMLImageCanvas, HTMLImageElement
* @property {string} [decField] - The ID or name of the field holding Declination (dec).
* @property {function} [filter] - The filtering function for sources.
* @property {string} [selectionColor="#00ff00"] - The color to apply to selected sources in the catalog.
* @property {string} [selectionLineWidth] - The line width to apply to selected source footprints in the catalog (i.e. can be used by custom shape function).
* @property {string} [hoverColor=color] - The color to apply to sources in the catalog when they are hovered.
* @property {boolean} [displayLabel=false] - Whether to display labels for sources.
* @property {string} [labelColumn] - The name of the column to be used for the label.
@@ -113,6 +114,7 @@ export let Catalog = (function () {
// allows for filtering of sources
this.filterFn = options.filter || undefined; // TODO: do the same for catalog
this.selectionColor = options.selectionColor || "#00ff00";
this.selectionLineWidth = options.selectionLineWidth || undefined;
this.hoverColor = options.hoverColor || undefined;
// when footprints are associated to source, do we need to draw the point source as well ?
@@ -492,6 +494,7 @@ export let Catalog = (function () {
* @param {Object} [options] - shape options
* @param {string} [options.color] - the color of the shape
* @param {string} [options.selectionColor] - the color of the shape when selected
* @param {string} [selectionLineWidth] - The line width to apply to selected source footprints in the catalog.
* @param {number} [options.sourceSize] - size of the shape
* @param {string} [options.hoverColor=options.color] - the color to apply to sources in the catalog when they are hovered.
* @param {string|Function|HTMLImageCanvas|HTMLImageElement} [options.shape="square"] - the type of the shape. Can be square, rhomb, plus, cross, triangle, circle.
@@ -502,6 +505,7 @@ export let Catalog = (function () {
options = options || {};
this.color = options.color || this.color || Color.getNextColor();
this.selectionColor = options.selectionColor || this.selectionColor || Color.getNextColor();
this.selectionLineWidth = options.selectionLineWidth || this.selectionLineWidth;
this.hoverColor = options.hoverColor || this.hoverColor || undefined;
this.sourceSize = options.sourceSize || this.sourceSize || 6;
this.shape = options.shape || this.shape || "square";
@@ -636,6 +640,7 @@ export let Catalog = (function () {
shape.setColor(color)
shape.setSelectionColor(this.selectionColor);
shape.setHoverColor(hoverColor);
shape.setSelectionLineWidth(this.selectionLineWidth);
}
let footprint;
@@ -833,6 +838,18 @@ export let Catalog = (function () {
this.updateShape();
};
/**
* Set the selectionLineWidth which can be used by the shape draw function for selected catalog elements.
*
* @memberof Catalog
*
* @param {String} - the new selection line width
*/
Catalog.prototype.setSelectionLineWidth = function (selectionLineWidth) {
this.selectionLineWidth = selectionLineWidth;
this.updateShape();
};
/**
* Select sources of the catalog matching a given callback
*

11
src/js/Footprint.js
View File

@@ -51,6 +51,7 @@ export let Footprint= (function() {
this.shapes = [].concat(shapes);
this.isShowing = true;
this.isSelected = false;
this.isHovered = false;
this.overlay = null;
@@ -94,10 +95,12 @@ export let Footprint= (function() {
};
Footprint.prototype.select = function() {
this.isSelected = true;
this.shapes.forEach((shape) => shape.select())
};
Footprint.prototype.deselect = function() {
this.isSelected = false;
this.shapes.forEach((shape) => shape.deselect())
};
@@ -137,6 +140,14 @@ export let Footprint= (function() {
this.shapes.forEach((shape) => shape.setLineWidth(lineWidth))
};
Footprint.prototype.getSelectionLineWidth = function() {
return this.shapes && this.shapes[0].getSelectionLineWidth();
};
Footprint.prototype.setSelectionLineWidth = function(selectionLineWidth) {
this.shapes.forEach((shape) => shape.setSelectionLineWidth(selectionLineWidth))
};
Footprint.prototype.setColor = function(color) {
if(!color) {
return;

12
src/js/View.js
View File

@@ -2235,7 +2235,11 @@ export let View = (function () {
footprints.forEach((footprint) => {
const originLineWidth = footprint.getLineWidth();
let spreadedLineWidth = (originLineWidth || 1) + 3;
let drawingLineWidth = originLineWidth;
if (footprint.isSelected && footprint.getSelectionLineWidth()) {
drawingLineWidth = footprint.getSelectionLineWidth();
}
let spreadedLineWidth = (drawingLineWidth || 1) + 3;
footprint.setLineWidth(spreadedLineWidth);
if (footprint.isShowing && footprint.isInStroke(ctx, this, x * window.devicePixelRatio, y * window.devicePixelRatio)) {
@@ -2272,7 +2276,11 @@ export let View = (function () {
if (s.isFootprint() && !s.tooSmallFootprint) {
let footprint = s.footprint;
const originLineWidth = footprint.getLineWidth();
let spreadedLineWidth = (originLineWidth || 1) + 3;
let drawingLineWidth = originLineWidth;
if (footprint.isSelected && footprint.getSelectionLineWidth()) {
drawingLineWidth = footprint.getSelectionLineWidth();
}
let spreadedLineWidth = (drawingLineWidth || 1) + 3;
footprint.setLineWidth(spreadedLineWidth);
if (footprint.isShowing && footprint.isInStroke(ctx, this, x * window.devicePixelRatio, y * window.devicePixelRatio)) {

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

@@ -52,6 +52,7 @@ export let Circle = (function() {
this.fillColor = options['fillColor'] || undefined;
this.lineWidth = options["lineWidth"] || undefined;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.selectionLineWidth = options["selectionLineWidth"] || undefined;
this.hoverColor = options["hoverColor"] || undefined;
this.opacity = options['opacity'] || 1;
@@ -112,6 +113,20 @@ export let Circle = (function() {
return this.lineWidth;
};
Circle.prototype.setSelectionLineWidth = function(selectionLineWidth) {
if (this.selectionLineWidth == selectionLineWidth) {
return;
}
this.selectionLineWidth = selectionLineWidth;
if (this.overlay) {
this.overlay.reportChange();
}
};
Circle.prototype.getSelectionLineWidth = function() {
return this.selectionLineWidth;
};
Circle.prototype.setOverlay = function(overlay) {
this.overlay = overlay;
};
@@ -162,6 +177,7 @@ export let Circle = (function() {
}
this.isHovered = true;
this.setLineWidth(this.getLineWidth() + 2)
this.setSelectionLineWidth(this.getSelectionLineWidth() + 2)
if (this.overlay) {
this.overlay.reportChange();
}
@@ -173,6 +189,7 @@ export let Circle = (function() {
}
this.isHovered = false;
this.setLineWidth(this.getLineWidth() - 2)
this.setSelectionLineWidth(this.getSelectionLineWidth() - 2)
if (this.overlay) {
this.overlay.reportChange();
@@ -203,10 +220,19 @@ export let Circle = (function() {
return false;
}
// Decide which line width to use.
if (!this.lineWidth) {
this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
}
let drawingLineWidth = this.lineWidth;
if (this.isSelected && this.selectionLineWidth) {
drawingLineWidth = this.selectionLineWidth;
}
noSmallCheck = noSmallCheck===true || false;
if (!noSmallCheck) {
const px_per_deg = view.width / view.fov;
this.isTooSmall = this.radiusDegrees * 2 * px_per_deg < this.lineWidth;
this.isTooSmall = this.radiusDegrees * 2 * px_per_deg < drawingLineWidth;
if (this.isTooSmall) {
return false;
}
@@ -302,11 +328,7 @@ export let Circle = (function() {
ctx.strokeStyle = baseColor;
}
if (!this.lineWidth) {
this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
}
ctx.lineWidth = this.lineWidth;
ctx.lineWidth = drawingLineWidth;
ctx.globalAlpha = this.opacity;
ctx.beginPath();
ctx.arc(this.center.x, this.center.y, this.radius, 0, 2*Math.PI, false);

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

@@ -54,6 +54,7 @@ export let Ellipse = (function() {
this.color = options['color'] || undefined;
this.fillColor = options['fillColor'] || undefined;
this.lineWidth = options["lineWidth"] || undefined;
this.selectionLineWidth = options["selectionLineWidth"] || undefined;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.hoverColor = options["hoverColor"] || undefined;
this.opacity = options['opacity'] || 1;
@@ -120,6 +121,20 @@ export let Ellipse = (function() {
this.overlay = overlay;
};
Ellipse.prototype.setSelectionLineWidth = function(selectionLineWidth) {
if (this.selectionLineWidth == selectionLineWidth) {
return;
}
this.selectionLineWidth = selectionLineWidth;
if (this.overlay) {
this.overlay.reportChange();
}
};
Ellipse.prototype.getSelectionLineWidth = function() {
return this.selectionLineWidth;
};
Ellipse.prototype.show = function() {
if (this.isShowing) {
return;
@@ -167,6 +182,7 @@ export let Ellipse = (function() {
}
this.isHovered = true;
this.setLineWidth(this.getLineWidth() + 2)
this.setSelectionLineWidth(this.getSelectionLineWidth() + 2)
if (this.overlay) {
this.overlay.reportChange();
}
@@ -178,6 +194,7 @@ export let Ellipse = (function() {
}
this.isHovered = false;
this.setLineWidth(this.getLineWidth() - 2)
this.setSelectionLineWidth(this.getSelectionLineWidth() - 2)
if (this.overlay) {
this.overlay.reportChange();
}
@@ -221,10 +238,19 @@ export let Ellipse = (function() {
return false;
}
// Decide which line width to use.
if (!this.lineWidth) {
this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
}
let drawingLineWidth = this.lineWidth;
if (this.isSelected && this.selectionLineWidth) {
drawingLineWidth = this.selectionLineWidth;
}
const px_per_deg = view.width / view.fov;
noSmallCheck = noSmallCheck===true || false;
if (!noSmallCheck) {
this.isTooSmall = this.b * 2 * px_per_deg < this.lineWidth;
this.isTooSmall = this.b * 2 * px_per_deg < drawingLineWidth;
if (this.isTooSmall) {
return false;
}
@@ -287,11 +313,7 @@ export let Ellipse = (function() {
ctx.strokeStyle = baseColor;
}
if (!this.lineWidth) {
this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
}
ctx.lineWidth = this.lineWidth;
ctx.lineWidth = drawingLineWidth;
ctx.globalAlpha = this.opacity;
ctx.beginPath();

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

@@ -45,7 +45,8 @@ import { ProjectionEnum } from "../ProjectionEnum.js";
* @property {string} [color] - The color of the shape
* @property {string} [fill=false] - Fill the shape with fillColor
* @property {string} [fillColor] - A filling color for the shape
* @property {number} [lineWidth=3] - The line width in pixels
* @property {number} [lineWidth=2] - The line width in pixels (inherited from overlay if any where it defaults to 3)
* @property {number} [selectionLineWidth=lineWidth] - The line width in pixels when the shape is selected
* @property {number} [opacity=1] - The opacity, between 0 (totally transparent) and 1 (totally opaque)
* @property {string} [selectionColor='#00ff00'] - A selection color
* @property {string} [hoverColor] - A hovered color
@@ -85,6 +86,7 @@ export let Polyline = (function() {
this.fillColor = options['fillColor'] || undefined;
this.opacity = options['opacity'] || undefined;
this.lineWidth = options["lineWidth"] || undefined;
this.selectionLineWidth = options["selectionLineWidth"] || undefined;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.hoverColor = options["hoverColor"] || undefined;
@@ -151,6 +153,7 @@ export let Polyline = (function() {
}
this.isHovered = true;
this.setLineWidth(this.getLineWidth() + 2)
this.setSelectionLineWidth(this.getSelectionLineWidth() + 2)
if (this.overlay) {
this.overlay.reportChange();
}
@@ -162,6 +165,7 @@ export let Polyline = (function() {
}
this.isHovered = false;
this.setLineWidth(this.getLineWidth() - 2)
this.setSelectionLineWidth(this.getSelectionLineWidth() - 2)
if (this.overlay) {
this.overlay.reportChange();
}
@@ -182,6 +186,21 @@ export let Polyline = (function() {
}
};
Polyline.prototype.getSelectionLineWidth = function() {
return this.selectionLineWidth;
};
Polyline.prototype.setSelectionLineWidth = function(selectionLineWidth) {
if (this.selectionLineWidth == selectionLineWidth) {
return;
}
this.selectionLineWidth = selectionLineWidth;
if (this.overlay) {
this.overlay.reportChange();
}
};
Polyline.prototype.setColor = function(color) {
if (!color || this.color == color) {
return;
@@ -239,9 +258,14 @@ export let Polyline = (function() {
baseColor = '#ff0000';
}
// Decide which line width to use.
if (!this.lineWidth) {
this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
}
var drawingLineWidth = this.lineWidth;
if (this.isSelected && this.selectionLineWidth) {
drawingLineWidth = this.selectionLineWidth;
}
if (this.isSelected) {
if(this.selectionColor) {
@@ -293,7 +317,7 @@ export let Polyline = (function() {
// do not draw neither if the polygone does not lie inside lineWidth
if (!noSmallCheck) {
this.isTooSmall = (xmax - xmin) < this.lineWidth && (ymax - ymin) < this.lineWidth;
this.isTooSmall = (xmax - xmin) < drawingLineWidth && (ymax - ymin) < drawingLineWidth;
if (this.isTooSmall) {
return false;
@@ -374,7 +398,7 @@ export let Polyline = (function() {
let v1 = this.closed ? 0 : 1;
ctx.globalAlpha = this.opacity;
ctx.lineWidth = this.lineWidth;
ctx.lineWidth = drawingLineWidth;
ctx.beginPath();
for (var k = 0; k < nSegment; k++) {
@@ -494,7 +518,6 @@ export let Polyline = (function() {
}
if (this.closed && poly.length === this.raDecArray.length) {
console.log("closed poly")
const corners = [
{ x, y },
{ x: x + w, y },

12
src/js/shapes/Vector.js
View File

@@ -57,6 +57,7 @@ export let Vector = (function() {
this.color = options['color'] || undefined;
this.opacity = options['opacity'] || undefined;
this.lineWidth = options['lineWidth'] || undefined;
this.selectionLineWidth = options["selectionLineWidth"] || undefined;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.hoverColor = options["hoverColor"] || undefined;
this.arrow = options["arrow"] === undefined ? false : options["arrow"];
@@ -91,6 +92,9 @@ export let Vector = (function() {
getLineWidth: Polyline.prototype.getLineWidth,
setLineWidth: Polyline.prototype.setLineWidth,
getSelectionLineWidth: Polyline.prototype.getSelectionLineWidth,
setSelectionLineWidth: Polyline.prototype.setSelectionLineWidth,
setColor: Polyline.prototype.setColor,
setSelectionColor: Polyline.prototype.setSelectionColor,
setHoverColor: Polyline.prototype.setHoverColor,
@@ -120,6 +124,10 @@ export let Vector = (function() {
if (!this.lineWidth) {
this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
}
let drawingLineWidth = this.lineWidth;
if (this.isSelected && this.selectionLineWidth) {
drawingLineWidth = this.selectionLineWidth;
}
// too small
if(!noSmallCheck) {
@@ -137,7 +145,7 @@ export let Vector = (function() {
ctx.strokeStyle = baseColor;
}
ctx.lineWidth = this.lineWidth;
ctx.lineWidth = drawingLineWidth;
ctx.globalAlpha = this.opacity;
ctx.beginPath();
@@ -147,7 +155,7 @@ export let Vector = (function() {
if (this.arrow) {
// draw the arrow
var angle, x, y, xh, yh;
var arrowRad = this.lineWidth * 3;
var arrowRad = drawingLineWidth * 3;
angle = Math.atan2(v2[1] - v1[1], v2[0] - v1[0])
xh = v2[0];