How can i add click event to pushpin in autodesk forge viewer?

Question

How can I add a click event on pushpins to autodesk forge? In an existing extension , he opens the content for pushpin using the camera focus on it. I want to open it with click on pushpin.

But I add the pushpini to the model manually and translate the coordinates with the following code

var setData = function (event) {      
      var screenPoint = {
        x: event.clientX,
        y: event.clientY
      };
      if (screenPoint) {
        var n = normalize(screenPoint);
        var dbId = /*_viewer.utilities.getHitPoint*/ getHitDbId(n.x, n.y);
        if (dbId == null) return;
      }
    }

    function getHitDbId(x, y) {
      y = 1.0 - y;
      x = x * 2.0 - 1.0;
      y = y * 2.0 - 1.0;

      var vpVec = new THREE.Vector3(x, y, 1);
      var result = viewer.impl.hitTestViewport(vpVec, false);
      console.log(result);

      if (result) {
        dummyData.push({
          icon: Math.round(Math.random() * 3),
          x: result.point.x,
          y: result.point.y,
          z: result.point.z,
        });
        window.dispatchEvent(new CustomEvent('newData', {
          'detail': dummyData
        }))
      } else {
        return
      }
      return result ? result.dbId : null;
    };

    function normalize(screenPoint) {
      var viewport = viewer.navigation.getScreenViewport();
      var n = {
        x: (screenPoint.x - viewport.left) / viewport.width,
        y: (screenPoint.y - viewport.top) / viewport.height
      };
      return n;
    }

Is this even possible?

Answer 1

This has already been taken care of in the original plugin - simply append your own handler in the click callbacks below where hit test on the markups is performed:

    this.onMouseMove = function(event) {
      if(this.line3d){
        this.update_DivLabel('onMarkupMove');
        this.updateHitTest(event);
      }
    }

    this.onClick = function(event) {
        this.updateHitTest(event);
        if (!this.hovered) return;
        this.selected = this.hovered; //
        //your own callback goes here
    }

And adjust here to fine tune hit test accuracy:

function markup3d(viewer, options) {
    this.raycaster.params.PointCloud.threshold = 5; // hit-test markup size.  Change this if markup 'hover' doesn't work
    this.size = 150.0; // markup size.  Change this if markup size is too big or small

The original live sample handles click as well by displaying a hoevering label: