Hi, I am trying to get click events for single click, as well as for double click using click recognizer in Angular. I am getting single click events but failed to get double click events.
though, i have implemented these click events on separate elements. one is `this.Wwd` and another one is `this.Wwd.canvas`
system setup:-
Angular CLI: 11.2.3
Node: 14.15.5
package.json dependencies are-
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@angular/animations": "~11.2.4",
"@angular/cdk": "^11.2.3",
"@angular/common": "~11.2.4",
"@angular/compiler": "~11.2.4",
"@angular/core": "~11.2.4",
"@angular/platform-browser": "~11.2.4",
"@angular/platform-browser-dynamic": "~11.2.4",
"@nasaworldwind/worldwind": "^0.10.0",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
I installed nasaworldwind by npm install .
cmd - '' npm install @nasaworldwind/worldwind --save ''
map.component.html file:-
```
<canvas id="canvasOne">
Your browser does not support HTML5 Canvas.
</canvas>
```
map.component.css file:-
#canvasOne{
height: 800 px;
width: 800 px;
}
map.component.ts file:-
```
import * as WorldWind from '@nasaworldwind/worldwind';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css'],
})
export class MapComponent {
Wwd: any;
doubleClick = false ;
singleClick = false ;
constructor(){}
// click recognizer for double click.
handleDoubleClick = (recognizer) => {
// Obtain the event location.
let x = recognizer.clientX, y = recognizer.clientY;
let pickList = this.Wwd.pick(this.Wwd.canvasCoordinates (x, y));
if (pickList.objects.length == 1 && pickList.objects[0].isTerrain) {
this.doubleClick = true; // set boolean to true.
}
};
// click recognizer for single click.
handleClick = (recognizer) => {
// Obtain the event location.
let x = recognizer.clientX, y = recognizer.clientY;
let pickList = this.Wwd.pick(this.Wwd.canvasCoordinates (x, y));
if (pickList.objects.length == 1 && pickList.objects[0].isTerrain) {
this.singleClick = true; //set boolean to true.
}
};
ngAfterViewInit() {
let wwd = new WorldWind.WorldWindow('canvasOne');
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BMNGLandsatLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
wwd.redraw();
this.Wwd = wwd;
// Listen for mouse clicks.
const clickRecognizer = new WorldWind.ClickRecognizer(this.Wwd, this.handleClick);
const clickRecognizer2= new WorldWind.ClickRecognizer(this.Wwd.canva s, this.handleDoubleClick); // On Wwd.canvas element.
clickRecognizer2.numberOfClicks = 2;
// Listen for taps on mobile devices.
const tapRecognizer = new WorldWind.TapRecognizer(wwd, this.handleClick);
wwd.redraw();
}
}
```
though, i have implemented these click events on separate elements. one is `this.Wwd` and another one is `this.Wwd.canvas`
system setup:-
Angular CLI: 11.2.3
Node: 14.15.5
package.json dependencies are-
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@angular/animations": "~11.2.4",
"@angular/cdk": "^11.2.3",
"@angular/common": "~11.2.4",
"@angular/compiler": "~11.2.4",
"@angular/core": "~11.2.4",
"@angular/platform-browser": "~11.2.4",
"@angular/platform-browser-dynamic": "~11.2.4",
"@nasaworldwind/worldwind": "^0.10.0",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
I installed nasaworldwind by npm install .
cmd - '' npm install @nasaworldwind/worldwind --save ''
map.component.html file:-
```
<canvas id="canvasOne">
Your browser does not support HTML5 Canvas.
</canvas>
```
map.component.css file:-
#canvasOne{
height: 800 px;
width: 800 px;
}
map.component.ts file:-
```
import * as WorldWind from '@nasaworldwind/worldwind';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css'],
})
export class MapComponent {
Wwd: any;
doubleClick = false ;
singleClick = false ;
constructor(){}
// click recognizer for double click.
handleDoubleClick = (recognizer) => {
// Obtain the event location.
let x = recognizer.clientX, y = recognizer.clientY;
let pickList = this.Wwd.pick(this.Wwd.canvasCoordinates (x, y));
if (pickList.objects.length == 1 && pickList.objects[0].isTerrain) {
this.doubleClick = true; // set boolean to true.
}
};
// click recognizer for single click.
handleClick = (recognizer) => {
// Obtain the event location.
let x = recognizer.clientX, y = recognizer.clientY;
let pickList = this.Wwd.pick(this.Wwd.canvasCoordinates (x, y));
if (pickList.objects.length == 1 && pickList.objects[0].isTerrain) {
this.singleClick = true; //set boolean to true.
}
};
ngAfterViewInit() {
let wwd = new WorldWind.WorldWindow('canvasOne');
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BMNGLandsatLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
wwd.redraw();
this.Wwd = wwd;
// Listen for mouse clicks.
const clickRecognizer = new WorldWind.ClickRecognizer(this.Wwd, this.handleClick);
const clickRecognizer2= new WorldWind.ClickRecognizer(this.Wwd.canva s, this.handleDoubleClick); // On Wwd.canvas element.
clickRecognizer2.numberOfClicks = 2;
// Listen for taps on mobile devices.
const tapRecognizer = new WorldWind.TapRecognizer(wwd, this.handleClick);
wwd.redraw();
}
}
```
Comment