How to use the @mathigon/boost.svgPointerPosn function in @mathigon/boost

$bridge.on('pointerleave', (e) => {
        if (!map.drawing) return;
        let out = svgPointerPosn(e, $svg);
        if (Point.distance(enter || out, out) < 40) {
          crossed = false;
        } else {
          $bridge.addClass('green');
          totalCrossed += 1;
          if (totalCrossed === $bridges.length) {
            $solveds[i].enter();
            $skip.exit('pop');
            $section.score('bridge-' + i);
            success = true;
          }
        }
      });

$bridge.on('pointerleave', (e) => {
        if (!map.drawing) return;
        let out = svgPointerPosn(e, $svg);
        if (Point.distance(enter || out, out) < 40) {
          crossed = false;
        } else {
          $bridge.addClass('green');
          totalCrossed += 1;
          if (totalCrossed === $bridges.length) {
            $solveds[i].enter();
            $skip.exit('pop');
            $section.score('bridge-' + i);
            success = true;
          }
        }
      });

$water.on('pointerenter', (e) => {
      if (!map.drawing) return;
      map.stop();
      let p = svgPointerPosn(e, $svg);
      $error.css('transform', `translate(${p.x - 20}px, ${p.y - 20}px)`);
      $error.enter('pop', 300);
      $section.addHint('crossWater');
    });

$bridge.on('pointerenter', function (e) {
        if (!map.drawing) return;
        enter = svgPointerPosn(e, $svg);
        if (crossed) {
          map.stop();
          $bridge.addClass('red');
          $section.addHint('bridgeCrossedBefore');
        }
        crossed = true;
      });

$bg.on('click', (e) => {
    if ($path.points.length > 7) return;
    addPoint(svgPointerPosn(e, $svg));
  });

$chart.on('click', (e) => {
    if (hasSelected) return;

    const p = $chart.plotToMathCoords(svgPointerPosn(e, $svg));
    if (Math.abs(p.y - 1.5 * p.x) > 1) return;

    $point.addClass('fixed');
    hasSelected = true;
    $step.score('make-point');
  });

$water.on('pointerenter', (e) => {
      if (!map.drawing) return;
      map.stop();
      let p = svgPointerPosn(e, $svg);
      $error.css('transform', `translate(${p.x - 20}px, ${p.y - 20}px)`);
      $error.enter('pop', 300);
      $section.addHint('crossWater');
    });

$bridge.on('pointerenter', function(e) {
        if (!map.drawing) return;
        enter = svgPointerPosn(e, $svg);
        if (crossed) {
          map.stop();
          $bridge.addClass('red');
          $section.addHint('bridgeCrossedBefore');
        }
        crossed = true;
      });

$bg.on('click', (e) => {
    if ($path.points.length > 7) return;
    addPoint(svgPointerPosn(e, $svg))
  });