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

Add hover effect to footprints and source objects

Browse Source
This commit is contained in:
Philip Matsson
2024-03-14 15:28:00 +01:00
committed by Matthieu Baumann
parent 9617b233b0
commit dc027e89c4
7 changed files with 152 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/js/Catalog.js
View File

@@ -107,7 +107,8 @@ 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.hoverColor = options.hoverColor || this.color;
this.displayLabel = options.displayLabel || false;
this.labelColor = options.labelColor || this.color;
this.labelFont = options.labelFont || '10px sans-serif';
@@ -118,8 +119,6 @@ export let Catalog = (function() {
}
}
this.selectionColor = '#00ff00';
this.showFieldCallback = {}; // callbacks when the user clicks on a cell in the measurement table associated
this.fields = undefined;
this.uuid = Utils.uuidv4();
@@ -462,7 +461,7 @@ export let Catalog = (function() {
this.cacheCanvas = Catalog.createShape(this.shape, this.color, this.sourceSize);
this.cacheSelectCanvas = Catalog.createShape(this.shape, this.selectionColor, this.selectSize);
this.cacheHoverCanvas = Catalog.createShape(this.shape, this.hoverColor, this.sourceSize);
this.cacheHoverCanvas = Catalog.createShape(this.shape, this.hoverColor, this.selectSize);
this.reportChange();
};
@@ -507,6 +506,7 @@ export let Catalog = (function() {
footprintsToAdd[k].setCatalog(this);
footprintsToAdd[k].setColor(this.color);
footprintsToAdd[k].setSelectionColor(this.selectionColor);
footprintsToAdd[k].setHoverColor(this.hoverColor);
}
this.reportChange();
};
@@ -735,6 +735,9 @@ export let Catalog = (function() {
else if (s.isSelected) {
ctx.drawImage(this.cacheSelectCanvas, s.x-this.selectSize/2, s.y-this.selectSize/2);
}
else if (s.isHovered) {
ctx.drawImage(this.cacheHoverCanvas, s.x-this.selectSize/2, s.y-this.selectSize/2);
}
else {
ctx.drawImage(this.cacheCanvas, s.x-this.cacheCanvas.width/2, s.y-this.cacheCanvas.height/2);
}

39
src/js/Circle.js
View File

@@ -41,6 +41,8 @@ export let Circle = (function() {
this.color = options['color'] || undefined;
this.fillColor = options['fillColor'] || undefined;
this.lineWidth = options["lineWidth"] || 2;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.hoverColor = options["hoverColor"] || undefined;
// TODO : all graphic overlays should have an id
this.id = 'circle-' + Utils.uuidv4();
@@ -51,7 +53,7 @@ export let Circle = (function() {
this.isShowing = true;
this.isSelected = false;
this.selectionColor = '#00ff00';
this.isHovered = false;
};
Circle.prototype.setColor = function(color) {
@@ -74,6 +76,16 @@ export let Circle = (function() {
}
};
Circle.prototype.setHoverColor = function(color) {
if (this.hoverColor == color) {
return;
}
this.hoverColor = color;
if (this.overlay) {
this.overlay.reportChange();
}
};
Circle.prototype.setLineWidth = function(lineWidth) {
if (this.lineWidth == lineWidth) {
return;
@@ -132,6 +144,26 @@ export let Circle = (function() {
}
};
Circle.prototype.hover = function() {
if (this.isHovered) {
return;
}
this.isHovered = true;
if (this.overlay) {
this.overlay.reportChange();
}
}
Circle.prototype.unhover = function() {
if (! this.isHovered) {
return;
}
this.isHovered = false;
if (this.overlay) {
this.overlay.reportChange();
}
}
Circle.prototype.isFootprint = function() {
return true;
}
@@ -224,8 +256,9 @@ export let Circle = (function() {
} else {
ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
}
}
else {
} else if (this.isHovered) {
ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
} else {
ctx.strokeStyle = baseColor;
}

39
src/js/Ellipse.js
View File

@@ -41,6 +41,8 @@ export let Ellipse = (function() {
this.color = options['color'] || undefined;
this.fillColor = options['fillColor'] || undefined;
this.lineWidth = options["lineWidth"] || 2;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.hoverColor = options["hoverColor"] || undefined;
// TODO : all graphic overlays should have an id
this.id = 'ellipse-' + Utils.uuidv4();
@@ -52,8 +54,7 @@ export let Ellipse = (function() {
this.isShowing = true;
this.isSelected = false;
this.selectionColor = '#00ff00';
this.isHovered = false;
};
Ellipse.prototype.setColor = function(color) {
@@ -76,6 +77,16 @@ export let Ellipse = (function() {
}
};
Ellipse.prototype.setHoverColor = function(color) {
if (this.hoverColor == color) {
return;
}
this.hoverColor = color;
if (this.overlay) {
this.overlay.reportChange();
}
};
Ellipse.prototype.setLineWidth = function(lineWidth) {
if (this.lineWidth == lineWidth) {
return;
@@ -135,6 +146,25 @@ export let Ellipse = (function() {
};
Ellipse.prototype.hover = function() {
if (this.isHovered) {
return;
}
this.isHovered = true;
if (this.overlay) {
this.overlay.reportChange();
}
}
Ellipse.prototype.unhover = function() {
if (! this.isHovered) {
return;
}
this.isHovered = false;
if (this.overlay) {
this.overlay.reportChange();
}
}
Ellipse.prototype.setCenter = function(centerRaDec) {
this.centerRaDec = centerRaDec;
@@ -221,8 +251,9 @@ export let Ellipse = (function() {
} else {
ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
}
}
else {
} else if (this.isHovered) {
ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
} else {
ctx.strokeStyle = baseColor;
}

12
src/js/Footprint.js
View File

@@ -82,6 +82,14 @@ export let Footprint= (function() {
this.shapes.forEach((shape) => shape.deselect())
};
Footprint.prototype.hover = function() {
this.shapes.forEach((shape) => shape.hover())
};
Footprint.prototype.unhover = function() {
this.shapes.forEach((shape) => shape.unhover())
};
Footprint.prototype.setLineWidth = function(lineWidth) {
this.shapes.forEach((shape) => shape.setLineWidth(lineWidth))
};
@@ -100,6 +108,10 @@ export let Footprint= (function() {
this.shapes.forEach((shape) => shape.setSelectionColor(color))
};
Footprint.prototype.setHoverColor = function(color) {
this.shapes.forEach((shape) => shape.setHoverColor(color))
};
Footprint.prototype.isFootprint = function() {
return true;
}

42
src/js/Polyline.js
View File

@@ -83,6 +83,8 @@ export let Polyline= (function() {
this.fillColor = options['fillColor'] || undefined;
this.opacity = options['opacity'] || undefined;
this.lineWidth = options["lineWidth"] || undefined;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.hoverColor = options["hoverColor"] || undefined;
if (options["closed"]) {
this.closed = options["closed"];
@@ -98,8 +100,7 @@ export let Polyline= (function() {
this.isShowing = true;
this.isSelected = false;
this.selectionColor = '#00ff00';
this.isHovered = false;
};
Polyline.prototype.setOverlay = function(overlay) {
@@ -146,6 +147,26 @@ export let Polyline= (function() {
}
};
Polyline.prototype.hover = function() {
if (this.isHovered) {
return;
}
this.isHovered = true;
if (this.overlay) {
this.overlay.reportChange();
}
};
Polyline.prototype.unhover = function() {
if (! this.isHovered) {
return;
}
this.isHovered = false;
if (this.overlay) {
this.overlay.reportChange();
}
};
Polyline.prototype.getLineWidth = function() {
return this.lineWidth;
};
@@ -181,6 +202,16 @@ export let Polyline= (function() {
}
};
Polyline.prototype.setHoverColor = function(color) {
if (this.hoverColor == color) {
return;
}
this.hoverColor = color;
if (this.overlay) {
this.overlay.reportChange();
}
};
Polyline.prototype.isFootprint = function() {
// The polyline is a footprint if it describes a polygon (i.e. a closed polyline)
return this.closed;
@@ -215,9 +246,10 @@ export let Polyline= (function() {
} else {
ctx.strokeStyle = Overlay.increaseBrightness(baseColor, 50);
}
}
else {
ctx.strokeStyle= baseColor;
} else if (this.isHovered) {
ctx.strokeStyle = this.hoverColor || Overlay.increaseBrightness(baseColor, 25);
} else {
ctx.strokeStyle = baseColor;
}
// 1. project the vertices into the screen

21
src/js/Source.js
View File

@@ -46,6 +46,7 @@ export let Source = (function() {
this.isShowing = true;
this.isSelected = false;
this.isHovered = false;
};
Source.prototype.setCatalog = function(catalog) {
@@ -96,6 +97,26 @@ export let Source = (function() {
}
};
Source.prototype.hover = function() {
if (this.isHovered) {
return;
}
this.isHovered = true;
if (this.catalog) {
this.catalog.reportChange();
}
}
Source.prototype.unhover = function() {
if (! this.isHovered) {
return;
}
this.isHovered = false;
if (this.catalog) {
this.catalog.reportChange();
}
}
// function called when a source is clicked. Called by the View object
Source.prototype.actionClicked = function(obj) {
if (this.catalog && this.catalog.onClick) {

5
src/js/View.js
View File

@@ -989,6 +989,7 @@ export let View = (function () {
}
}
o.hover();
lastHoveredObject = o;
} else {
view.setCursor('default');
@@ -1003,8 +1004,10 @@ export let View = (function () {
// call callback function to notify we left the hovered object
var ret = objHoveredStopFunction(lastHoveredObject, xymouse);
}
}
lastHoveredObject.unhover();
}
lastHoveredObject = null;
}