Announcement

Collapse
No announcement yet.

Need help- Single and double mouse clicks in Angular.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need help- Single and double mouse clicks in Angular.

    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();

    }
    }
    ```

  • #2
    Thanks for this information,
    sdmoviespoint उसके बाद आप जिस मूवी को देखना चाहते है या फिर डाउनलोड करना चाहते है उसे सेलेक्ट कर सकते है और उसके नीचे ही आपको डाउ

    Comment


    • #3
      Amazing

      Comment

      Working...
      X