Fix #151. It is now possible to escape the fullscreen. I fixed a refresh of the fullscreen button bug by defining a special alevent:fullscreen_toggled that the fullscreen button can listen to in order to change its arrow image (opening or closing). Also fix mouseup bug during selection

This commit is contained in:
bmatthieu3
2025-02-14 15:26:52 +01:00
parent bf12e85c70
commit 826ef4fdb7
9 changed files with 83 additions and 39 deletions

19
examples/al-disto.html Normal file
View File

@@ -0,0 +1,19 @@
<!doctype html>
<html>
<head>
</head>
<body>
<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
<script type="module">
import A from '../src/js/A.js';
var aladin;
A.init.then(() => {
aladin = A.aladin('#aladin-lite-div', {showContextMenu: true, survey: 'https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-i-r-g/', fov: 0.00833333333, target: '270.334079 66.730469'});
aladin.showHealpixGrid(true)
});
</script>
</body>
</html>

View File

@@ -737,8 +737,6 @@ export let Aladin = (function () {
}
})
//this.fullScreenBtn.attr('title', isInFullscreen ? 'Restore original size' : 'Full screen');
if (this.aladinDiv.classList.contains("aladin-fullscreen")) {
this.aladinDiv.classList.remove("aladin-fullscreen");
} else {
@@ -788,6 +786,8 @@ export let Aladin = (function () {
self.callbacksByEventName["fullScreenToggled"];
typeof fullScreenToggledFn === "function" &&
fullScreenToggledFn(self.isInFullscreen);
ALEvent.FULLSCREEN_TOGGLED.dispatchedTo(this.aladinDiv, {fullscreen: self.isInFullscreen});
};
Aladin.prototype.getOptionsFromQueryString = function () {

View File

@@ -118,7 +118,11 @@ export class CircleSelect extends FSM {
this.dispatch("off");
};
let mouseout = mouseup;
let mouseout = (params) => {
if (this.startCoo) {
mouseup(params);
}
};
let off = () => {
view.aladin.showReticle(true)
@@ -153,7 +157,8 @@ export class CircleSelect extends FSM {
mouseout
},
mouseout: {
off
off,
mousedown
},
mouseup: {
off,

View File

@@ -74,6 +74,7 @@ export class RectSelect extends FSM {
let mouseup = (params) => {
var x, y;
const {coo} = params;
this.coo = coo;
// finish the selection
var w = this.coo.x - this.startCoo.x;
@@ -132,7 +133,11 @@ export class RectSelect extends FSM {
view.aladin.removeStatusBarMessage('selector')
}
let mouseout = mouseup;
let mouseout = (params) => {
if (this.startCoo) {
mouseup(params);
}
};
super({
state: 'off',
@@ -163,7 +168,8 @@ export class RectSelect extends FSM {
off
},
mouseout: {
off
off,
mousedown
},
mouseup: {
off,

View File

@@ -91,7 +91,7 @@ export class Selector {
}
cancel() {
this.dispatch('off')
this.select && this.dispatch('off')
}
dispatch(to, params) {

View File

@@ -1258,7 +1258,13 @@ export let View = (function () {
break;
// escape
case 27:
view.selector.cancel()
// if there is a selection occuring
view.selector && view.selector.cancel()
if (view.aladin.isInFullscreen) {
view.aladin.toggleFullscreen(view.aladin.options.realFullscreen);
}
break;
default:
break;

View File

@@ -79,6 +79,8 @@ export class ALEvent {
static MODE = new ALEvent("AL:mode")
static FULLSCREEN_TOGGLED = new ALEvent("AL:fullscreen.toggled")
constructor(name) {
this.name = name;
}

View File

@@ -29,6 +29,8 @@
*****************************************************************************/
import { ActionButton } from "../Widgets/ActionButton.js";
import { ALEvent } from "../../events/ALEvent";
import restoreIcon from './../../../../assets/icons/restore.svg';
import maximizeIcon from './../../../../assets/icons/maximize.svg';
@@ -57,39 +59,44 @@ export class FullScreenActionButton extends ActionButton {
}
aladin.toggleFullscreen(aladin.options.realFullscreen);
if (aladin.isInFullscreen) {
self.update({
icon: {
size: 'medium',
monochrome: true,
url: restoreIcon
},
tooltip: {
content: 'Restore original size',
position: {
direction: 'left'
}
}
});
} else {
self.update({
icon: {
size: 'medium',
monochrome: true,
url: maximizeIcon
},
tooltip: {
content: 'Fullscreen',
position: {
direction: 'left'
}
}
});
}
}
})
self = this;
// Listen to the fullscreen toggled event to change the icon of the button
ALEvent.FULLSCREEN_TOGGLED.listenedBy(aladin.aladinDiv, (event) => {
const isInFullscreen = event.detail.fullscreen;
if (isInFullscreen) {
self.update({
icon: {
size: 'medium',
monochrome: true,
url: restoreIcon
},
tooltip: {
content: 'Restore original size',
position: {
direction: 'left'
}
}
});
} else {
self.update({
icon: {
size: 'medium',
monochrome: true,
url: maximizeIcon
},
tooltip: {
content: 'Fullscreen',
position: {
direction: 'left'
}
}
});
}
});
}
}

View File

@@ -74,7 +74,6 @@ export class DOMElement {
if (target && target.children) {
index = Array.prototype.indexOf.call(target.children, el);
}
console.log("remove", el)
el.remove()
return {target, position: index};