gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2026-04-28 03:43:20 -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

5
src/js/A.js
View File

@@ -105,7 +105,7 @@ A.aladin = function (divSelector, options) {
const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
return theme;
}
let theme;
if (options && options.mode) {
let mode = options.mode.toLowerCase();
@@ -421,7 +421,7 @@ A.coo = function (longitude, latitude, prec) {
*
* @param {Circle[]|Polyline[]|Ellipse[]|Vector[]} shapes - an array of A.polygon objects
* @param {Source} [source] - a A.source object associated with the footprint
*
*
* @returns {Footprint} Returns a new Footprint object
*/
A.footprint = function(shapes, source) {
@@ -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;
})

45
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";
@@ -562,7 +566,7 @@ export let Catalog = (function () {
this.reportChange();
};
/**
* Add sources to the catalog
@@ -631,11 +635,12 @@ export let Catalog = (function () {
let hoverColor = this.hoverColor || color;
for (var shape of shapes) {
// Set the same color of the shape than the catalog.
// Set the same color of the shape than the catalog.
// FIXME: the color/shape could be a parameter at the source level, allowing the user single catalogs handling different shapes
shape.setColor(color)
shape.setSelectionColor(this.selectionColor);
shape.setHoverColor(hoverColor);
shape.setSelectionLineWidth(this.selectionLineWidth);
}
let footprint;
@@ -787,9 +792,9 @@ export let Catalog = (function () {
* Get one source by its index in the catalog
*
* @memberof Catalog
*
*
* @param {number} idx - the index of the source in the catalog sources
*
*
* @returns {Source} - the source at the index
*/
Catalog.prototype.getSource = function (idx) {
@@ -813,7 +818,7 @@ export let Catalog = (function () {
* Set the color of the catalog
*
* @memberof Catalog
*
*
* @param {String} - the new color
*/
Catalog.prototype.setColor = function (color) {
@@ -825,7 +830,7 @@ export let Catalog = (function () {
* Set the color of selected sources
*
* @memberof Catalog
*
*
* @param {String} - the new color
*/
Catalog.prototype.setSelectionColor = function (color) {
@@ -833,11 +838,23 @@ 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
*
* @memberof Catalog
*
*
* @param {Function} filter - A filter callback to select sources of a catalog.
*/
Catalog.prototype.select = function(filter) {
@@ -863,7 +880,7 @@ export let Catalog = (function () {
* Set the color of hovered sources
*
* @memberof Catalog
*
*
* @param {String} - the new color
*/
Catalog.prototype.setHoverColor = function (color) {
@@ -875,7 +892,7 @@ export let Catalog = (function () {
* Set the size of the catalog sources
*
* @memberof Catalog
*
*
* @param {number} - the new size
*/
Catalog.prototype.setSourceSize = function (sourceSize) {
@@ -888,7 +905,7 @@ export let Catalog = (function () {
* Set the shape of the catalog sources
*
* @memberof Catalog
*
*
* @param {string|Function|HTMLImageCanvas|HTMLImageElement} [shape="square"] - the type of the shape. Can be square, rhomb, plus, cross, triangle, circle.
* A callback function can also be called that return an HTMLImageElement in function of the source object. A canvas or an image can also be given.
*/
@@ -901,7 +918,7 @@ export let Catalog = (function () {
* Get the size of the catalog sources
*
* @memberof Catalog
*
*
* @returns {number} - the size of the sources
*/
Catalog.prototype.getSourceSize = function () {
@@ -912,7 +929,7 @@ export let Catalog = (function () {
* Remove a specific source from the catalog
*
* @memberof Catalog
*
*
* @param {Source} - the source to remove
*/
Catalog.prototype.remove = function (source) {
@@ -993,7 +1010,7 @@ export let Catalog = (function () {
this.sources.forEach((s, idx) => {
let drawn = false;
if (xy[2 * idx] && xy[2 * idx + 1]) {
if (self.filterFn) {
if(!self.filterFn(s)) {
@@ -1097,7 +1114,7 @@ export let Catalog = (function () {
let color = s.color || this.color;
let cacheCanvas = this.getCacheCanvas(shape, color, size)
ctx.drawImage(
cacheCanvas,
s.x - cacheCanvas.width / 2,

13
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;
@@ -71,7 +72,7 @@ export let Footprint= (function() {
/*Footprint.prototype.setCatalog = function(catalog) {
if (this.source) {
this.source.setCatalog(catalog);
}
};*/
@@ -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;

24
src/js/Overlay.js
View File

@@ -48,7 +48,7 @@ import { Color } from './Color';
export let GraphicOverlay = (function() {
/**
* Represents an overlay containing Footprints, whether it is
* Represents an overlay containing Footprints, whether it is
*
* @class
* @constructs GraphicOverlay
@@ -124,10 +124,10 @@ export let GraphicOverlay = (function() {
/**
* Parse a STCS string and returns a list of footprints (only circles, polygons and ellipses given in ICRS or FK5J2000 frame are handled).
* For visualization purposes, the difference between FK5J2000 and ICRS system is not noticeable. Therefore one can be interpreted as the other.
* For visualization purposes, the difference between FK5J2000 and ICRS system is not noticeable. Therefore one can be interpreted as the other.
*
* @memberof GraphicOverlay
*
*
* @returns {Circle[]|Polyline[]|Ellipse[]} The list of mixed circles, polygons and ellipses
*/
GraphicOverlay.parseSTCS = function(stcs, options) {
@@ -216,8 +216,8 @@ export let GraphicOverlay = (function() {
* Add an array (or single) shapes (i.e. Footprint, Circle, Polyline, Ellipse, Vector, ...)
*
* @memberof GraphicOverlay
*
* @param {Footprint[]|Circle[]|Polyline[]|Ellipse[]|Vector[]} overlaysToAdd - a list (or single) shapes to add to the overlay
*
* @param {Footprint[]|Circle[]|Polyline[]|Ellipse[]|Vector[]} overlaysToAdd - a list (or single) shapes to add to the overlay
*/
GraphicOverlay.prototype.addFootprints = function(overlaysToAdd) {
overlaysToAdd = [].concat(overlaysToAdd)
@@ -250,9 +250,9 @@ export let GraphicOverlay = (function() {
* Returns a shape by an index
*
* @memberof GraphicOverlay
*
*
* @param {number} idx - The index of the shape to retrieve
*
*
* @returns {Footprint|Circle|Polyline|Ellipse|Vector} The shape
*/
GraphicOverlay.prototype.getFootprint = function(idx) {
@@ -327,10 +327,10 @@ export let GraphicOverlay = (function() {
* Increase the brightness of a color by a percentage
*
* @memberof GraphicOverlay
*
*
* @param {string} hex - The color given in hexadecimal e.g. '#ffa0bb'
* @param {number} percent - The percentage to increase the brightness of
*
*
* @returns {string} The new color given as an hexadecimal string
*/
GraphicOverlay.increaseBrightness = function(hex, percent){
@@ -356,7 +356,7 @@ export let GraphicOverlay = (function() {
* Set the color of the shapes inside the overlay
*
* @memberof GraphicOverlay
*
*
* @param {string} color - the new color in hexadecimal e.g. '#ff00ff'
*/
GraphicOverlay.prototype.setColor = function(color) {
@@ -368,7 +368,7 @@ export let GraphicOverlay = (function() {
* Set the line width of the shapes inside the overlay
*
* @memberof GraphicOverlay
*
*
* @param {number} lineWidth - the new line width in pixels
*/
GraphicOverlay.prototype.setLineWidth = function(lineWidth) {
@@ -380,7 +380,7 @@ export let GraphicOverlay = (function() {
* Set the dash line property
*
* @memberof GraphicOverlay
*
*
* @param {Array.<number>} [lineDash=[]] - See the segments property {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash#segments| here}
*/
GraphicOverlay.prototype.setLineDash = function(lineDash) {

56
src/js/View.js
View File

@@ -397,7 +397,7 @@ export let View = (function () {
var computedWidth = Math.floor(parseFloat(this.aladinDiv.getBoundingClientRect().width)) || 1.0;
var computedHeight = Math.floor(parseFloat(this.aladinDiv.getBoundingClientRect().height)) || 1.0;
this.width = Math.max(computedWidth, 1);
this.height = Math.max(computedHeight, 1); // this prevents many problems when div size is equal to 0
@@ -673,7 +673,7 @@ export let View = (function () {
var handleSelect = function(xy, tolerance) {
tolerance = tolerance || 5;
var objs = view.closestObjects(xy.x, xy.y, tolerance);
view.unselectObjects();
if (objs) {
@@ -717,7 +717,7 @@ export let View = (function () {
view.selectObjects(objs);
view.lastClickedObject = objs;
} else {
// If there is a past clicked object
if (view.lastClickedObject) {
@@ -779,7 +779,7 @@ export let View = (function () {
})
}
longTouchTimer = setTimeout(() => {onlongtouch(e); view.dragging = false;}, longTouchDuration);
longTouchTimer = setTimeout(() => {onlongtouch(e); view.dragging = false;}, longTouchDuration);
touchStartTime = Date.now();
}
@@ -851,7 +851,7 @@ export let View = (function () {
});
Utils.on(document, "mouseup touchend", function(e) {
var wasDragging = view.realDragging === true;
var wasDragging = view.realDragging === true;
if (view.dragging) { // if we were dragging, reset to default cursor
if(view.mode === View.PAN) {
@@ -933,10 +933,10 @@ export let View = (function () {
if (e.type === "touchend") {
if (view.mode === View.SELECT) {
view.selector.dispatch('mouseup', {coo: xymouse})
return;
}
}
}
}
if (view.rightClick) {
@@ -1165,13 +1165,13 @@ export let View = (function () {
if (typeof objHoveredFunction === 'function' && (!lastHoveredObject || !lastHoveredObject.includes(o))) {
var ret = objHoveredFunction(o, xymouse);
}
if (o.isFootprint()) {
if (typeof footprintHoveredFunction === 'function' && (!lastHoveredObject || !lastHoveredObject.includes(o))) {
var ret = footprintHoveredFunction(o, xymouse);
}
}
if (!lastHoveredObject || !lastHoveredObject.includes(o)) {
o.hover();
}
@@ -1211,7 +1211,7 @@ export let View = (function () {
}
}
}
lastHoveredObject = null;
}
@@ -1286,7 +1286,7 @@ export let View = (function () {
if (typeof onWheelTriggeredFunction === 'function') {
onWheelTriggeredFunction(e)
} else {
// Default Aladin Lite zooming
// Default Aladin Lite zooming
const normalizedDelta = e.deltaY && normalizeWheel(e) || e.detail || (-e.wheelDelta);
// Accumulate the normalized delta
// We do not zoom because we cannot rely on "wheel" event
@@ -1326,7 +1326,7 @@ export let View = (function () {
break;
default:
break;
}
});
};
@@ -1588,14 +1588,14 @@ export let View = (function () {
if (this.manualSelection) {
return;
}
// unselect the previous selection
this.unselectObjects();
if (Array.isArray(selection)) {
this.selection = selection;
} else {
// select the new
// select the new
this.selection = Selector.getObjects(selection, this);
}
@@ -1612,7 +1612,7 @@ export let View = (function () {
let cat = obj.getCatalog();
// trigger the non action clicked if it does not show the table
// table show is handled below
// table show is handled below
if (obj.actionClicked) {
if (!cat || !cat.onClick || cat.onClick !== "showTable") {
obj.actionClicked()
@@ -1642,13 +1642,13 @@ export let View = (function () {
} else {
source = o;
}
return source;
});
let tableColor = catalog.color;
if (catalog.colorFn) {
tableColor = "white"
tableColor = "white"
}
let table = {
@@ -1658,7 +1658,7 @@ export let View = (function () {
'fields': catalog.fields,
'showCallback': ObsCore.SHOW_CALLBACKS(this.aladin)
};
return table;
})
@@ -1994,7 +1994,7 @@ export let View = (function () {
}
this.projection = ProjectionEnum[projName];
// Change the projection here
this.wasm.setProjection(projName);
this.updateZoomState()
@@ -2235,8 +2235,12 @@ 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)) {
closests.push(footprint);
@@ -2272,8 +2276,12 @@ 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)) {
closests.push(s);

36
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);
@@ -336,7 +358,7 @@ export let Circle = (function() {
}
// compute the absolute distance between the middle of the bbox
// and the center of the circle
// and the center of the circle
const circleDistance = {
x: Math.abs(centerXyview[0] - (x + w/2)),
y: Math.abs(centerXyview[1] - (y + h/2))

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

@@ -23,11 +23,11 @@
/******************************************************************************
* Aladin Lite project
*
*
* File Ellipse
*
*
* Author: Matthieu Baumann[CDS]
*
*
*****************************************************************************/
import { Utils } from "./../Utils";
@@ -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;
@@ -66,7 +67,7 @@ export let Ellipse = (function() {
this.setAxisLength(a, b);
this.setRotation(theta);
this.overlay = null;
this.isShowing = true;
this.isSelected = false;
this.isHovered = false;
@@ -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;
@@ -129,7 +144,7 @@ export let Ellipse = (function() {
this.overlay.reportChange();
}
};
Ellipse.prototype.hide = function() {
if (! this.isShowing) {
return;
@@ -139,7 +154,7 @@ export let Ellipse = (function() {
this.overlay.reportChange();
}
};
Ellipse.prototype.select = function() {
if (this.isSelected) {
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;
}
@@ -250,7 +276,7 @@ export let Ellipse = (function() {
// 3. normalize this vector
let toNorthVec = [toNorthScreen[0] - originScreen[0], toNorthScreen[1] - originScreen[1]];
let norm = Math.sqrt(toNorthVec[0]*toNorthVec[0] + toNorthVec[1]*toNorthVec[1]);
toNorthVec = [toNorthVec[0] / norm, toNorthVec[1] / norm];
let toWestVec = [1.0, 0.0];
@@ -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();
@@ -353,7 +375,7 @@ export let Ellipse = (function() {
}
// compute the absolute distance between the middle of the bbox
// and the center of the circle
// and the center of the circle
const circleDistance = {
x: Math.abs(centerXyview[0] - (x + w/2)),
y: Math.abs(centerXyview[1] - (y + h/2))
@@ -371,6 +393,6 @@ export let Ellipse = (function() {
const cornerDistanceSquared = dx*dx + dy*dy;
return (cornerDistanceSquared <= (this.aPixels*this.aPixels));
};
return Ellipse;
})();

37
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
@@ -75,7 +76,7 @@ export let Polyline = (function() {
* @param {Array.<number[]>} 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) {
@@ -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++) {
@@ -449,7 +473,7 @@ export let Polyline = (function() {
if (v1 && v2) {
const line = {x1: v1.x, y1: v1.y, x2: v2.x, y2: v2.y}; // new segment
_drawLine(line, ctx);
if (ctx.isPointInStroke(x, y)) { // x,y is on line?
return true;
}
@@ -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 },
@@ -583,7 +606,7 @@ export let Polyline = (function() {
let right = Polyline.segmentsIntersect({x: x1, y: y1}, {x: x2, y: y2}, {x: rw, y: 0}, {x: rw, y: rh});
let top = Polyline.segmentsIntersect({x: x1, y: y1}, {x: x2, y: y2}, {x: 0, y: 0}, {x: rw, y: 0});
let bottom = Polyline.segmentsIntersect({x: x1, y: y1}, {x: x2, y: y2}, {x: 0, y: rh}, {x: rw, y: rh});
// if ANY of the above are true, the line
// has hit the rectangle
if (left || right || top || bottom) {

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

@@ -22,13 +22,13 @@
/******************************************************************************
* Aladin Lite project
*
*
* Class Vector
*
*
* A vector is a graphical overlay connecting 2 points with end or begin arrows on it
*
*
* Author: Matthieu Baumann[CDS]
*
*
*****************************************************************************/
import { Polyline } from "./Polyline.js";
import { Utils } from '../Utils';
@@ -38,7 +38,7 @@ import { Ellipse } from "./Ellipse.js";
export let Vector = (function() {
/**
* Represents an vector.
*
*
* A vector is a graphical overlay connecting 2 sky positions with end or begin arrows on it
*
* @class
@@ -49,7 +49,7 @@ export let Vector = (function() {
* @param {number} dec2 - Declination (Dec) coordinate of the center in degrees.
* @param {ShapeOptions} options - Options for configuring the vector. Additional properties:
* @param {boolean} [options.arrow=false] - Add an arrow pointing from (ra1, dec1) to (ra2, dec2)
*
*
* @returns {Vector} - The vector shape object
*/
let Vector = function(ra1, dec1, ra2, dec2, options) {
@@ -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"];
@@ -81,16 +82,19 @@ export let Vector = (function() {
isFootprint: Polyline.prototype.isFootprint,
show: Polyline.prototype.show,
hide: Polyline.prototype.hide,
select: Polyline.prototype.select,
deselect: Polyline.prototype.deselect,
hover: Polyline.prototype.hover,
unhover: Polyline.prototype.unhover,
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,
@@ -105,7 +109,7 @@ export let Vector = (function() {
const v2 = view.aladin.world2pix(this.ra2, this.dec2);
if (!v2)
return false;
const xmin = Math.min(v1[0], v2[0]);
const xmax = Math.max(v1[0], v2[0]);
const ymin = Math.min(v1[1], v2[1]);
@@ -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];
@@ -192,7 +200,7 @@ export let Vector = (function() {
xy1 = {x: xy1[0], y: xy1[1]};
xy2 = {x: xy2[0], y: xy2[1]};
// Check if line segment intersects with the bounding box
if (Polyline.segmentIntersectsBox(xy1, xy2, x, y, w, h)) {
return true;