How to use the @bentley/geometry-core.Point2d.create function in @bentley/geometry-core

/*---------------------------------------------------------------------------------------------
* Copyright (c) 2019 Bentley Systems, Incorporated. All rights reserved.
* Licensed under the MIT License. See LICENSE.md in the project root for license terms.
*--------------------------------------------------------------------------------------------*/
import { Logger } from "@bentley/bentleyjs-core";
import { AngleSweep, Arc3d, Point2d, Point3d, XAndY, XYAndZ } from "@bentley/geometry-core";
import { AxisAlignedBox3d, ColorByName, ColorDef } from "@bentley/imodeljs-common";
import {
  BeButton, BeButtonEvent, Cluster, DecorateContext, GraphicType, imageElementFromUrl,
  IModelApp, Marker, MarkerImage, MarkerSet, MessageBoxIconType, MessageBoxType, Tool,
} from "@bentley/imodeljs-frontend";

/** Example Marker to show an *incident*. Each incident has an *id*, a *severity*, and an *icon*. */
class IncidentMarker extends Marker {
  private static _size = Point2d.create(30, 30);
  private static _imageSize = Point2d.create(40, 40);
  private static _imageOffset = Point2d.create(0, 30);
  private static _amber = new ColorDef(ColorByName.amber);
  private static _sweep360 = AngleSweep.create360();
  private _color: ColorDef;

  /** uncomment the next line to make the icon only show when the cursor is over an incident marker. */
  // public get wantImage() { return this._isHilited; }

  /** Get a color based on severity by interpolating Green(0) -> Amber(15) -> Red(30)  */
  public static makeColor(severity: number): ColorDef {
    return (severity <= 16 ? ColorDef.green.lerp(this._amber, (severity - 1) / 15.) :
      this._amber.lerp(ColorDef.red, (severity - 16) / 14.));
  }

  // when someone clicks on our marker, open a message box with the severity of the incident.

PopupToolbarManager.close();
  }

  public static toolbarShowAfterTimout(provider: PopupToolbarProvider) {
    if (PopupToolbarManager._current === provider)
      return;
    PopupToolbarManager._provider = provider;
    setTimeout(() => { PopupToolbarManager.show(); }, 500);
  }
}

/** Marker to show a section location.
 * @beta
 */
class SectionLocation extends Marker implements PopupToolbarProvider {
  private static _size = Point2d.create(40, 40);
  private _clip?: ClipVector;
  private _tiledGraphicsProvider?: TiledGraphicsProvider;
  public isSelected: boolean = false;

  /** Create a new SectionLocation */
  constructor(public props: SectionLocationProps, pos: Point3d, title: string, icon: HTMLImageElement) {
    super(pos, SectionLocation._size);
    this.setImage(icon);
    this.title = title;
    this.setScaleFactor({ low: .2, high: 1.4 }); // make size 20% at back of frustum and 140% at front of frustum (if camera is on)
  }

  private get clip(): ClipVector {
    if (undefined === this._clip) {
      this._clip = this.props.clipGeometry ? ClipVector.fromJSON(JSON.parse(this.props.clipGeometry)) : ClipVector.createEmpty();
      if (undefined !== this.props.placement)

ctx.lineTo(size, 0);
      ctx.moveTo(0, -size);
      ctx.lineTo(0, size);
      ctx.stroke();
    };
    context.addCanvasDecoration({ position, drawDecoration });
  }
  // __PUBLISH_EXTRACT_END__
}

// __PUBLISH_EXTRACT_START__ MarkerSet_Decoration
/** Example Marker to show an *incident*. Each incident has an *id*, a *severity*, and an *icon*. */
class IncidentMarker extends Marker {
  private static _size = Point2d.create(30, 30);
  private static _imageSize = Point2d.create(40, 40);
  private static _imageOffset = Point2d.create(0, 30);
  private static _amber = new ColorDef(ColorByName.amber);
  private static _sweep360 = AngleSweep.create360();
  private _color: ColorDef;

  // uncomment the next line to make the icon only show when the cursor is over an incident marker.
  // public get wantImage() { return this._isHilited; }

  /** Get a color based on severity by interpolating Green(0) -> Amber(15) -> Red(30)  */
  public static makeColor(severity: number): ColorDef {
    return (severity <= 16 ? ColorDef.green.lerp(this._amber, (severity - 1) / 15.) :
      this._amber.lerp(ColorDef.red, (severity - 16) / 14.));
  }

  public onMouseButton(ev: BeButtonEvent): boolean {
    if (ev.button === BeButton.Data) {
      if (ev.isDown) {

file: PhotoFile;
  distance: number;
  pitch: number;
  yaw: number;
}

interface ViewerData {
  photoFile: PhotoFile;
  panoBlob: Blob;
  config: PannellumViewerConfig;
}

/** Marker positioned where there is a geotagged photograph. */
class GeoPhotoMarker extends Marker {
  private static _size = Point2d.create(30, 30);
  private static _imageSize = Point2d.create(40, 40);
  private static _imageOffset = Point2d.create(-8, 22);
  private static _amber = new ColorDef(ColorByName.amber);
  private static _sweep360 = AngleSweep.create360();
  private static _tooCloseYaw: number = 3.0;
  private static _tooClosePitch: number = 1.0;
  private _manager: GeoPhotoMarkerManager;
  private _color: ColorDef;
  public photoFile: PhotoFile;

  private chooseNeighborsToDisplay(centerFile: PhotoFile, closeFiles: PhotoFile[]): Bearing[] {
    const eyeHeight = this._manager.plugin.settings.eyeHeight;
    const bearings: Bearing[] = [];
    // get the bearings to each file.
    for (const file of closeFiles) {
      const delta = centerFile.spatial!.vectorTo(file.spatial!);
      const yaw = Math.atan2(delta.x, delta.y) * 180.0 / Math.PI;

private _handleMouseDown = (event: React.MouseEvent) => {
    const { vector } = this.props;
    const { clientX, clientY } = event;
    this._startMouse = Point2d.create(clientX, clientY);
    this.props.onFaceCellHoverChange(vector, CubeHover.Active);
  }
  private _handleMouseUp = (event: React.MouseEvent) => {

protected async acceptNewSegments(): Promise {
    if (this._locationData.length > 1) {
      for (let i = 0; i <= this._locationData.length - 2; i++) {
        const start = this._locationData[i].point;
        const end = this._locationData[i + 1].point;
        const distance = start.distance(end);
        const xyDist = start.distanceXY(end);
        const zDist = end.z - start.z;
        const slope = (0.0 === xyDist ? Math.PI : Math.atan(zDist / xyDist));
        const delta = Vector3d.createStartEnd(start, end);
        const refAxes = this._locationData[i].refAxes;
        refAxes.multiplyTransposeVectorInPlace(delta);

        const toolTip = await this.getMarkerToolTip(distance, slope, start, end);
        const marker = new MeasureMarker((this._acceptedSegments.length + 1).toString(), toolTip, start.interpolate(0.5, end), Point2d.create(25, 25));

        const segMarkerButtonFunc = (ev: BeButtonEvent) => {
          if (ev.isDown)
            return true;

          let selectedMarker: MeasureMarker | undefined;
          for (const seg of this._acceptedSegments) {
            if (!seg.marker.pick(ev.viewPoint))
              continue;
            selectedMarker = (seg.marker.isSelected ? undefined : seg.marker);
            break;
          }

          for (const seg of this._acceptedSegments) {
            const wasSelected = seg.marker.isSelected;
            seg.marker.isSelected = (seg.marker === selectedMarker);

  public static fromZeroToOne() { return QParams2d.fromRange(Range2d.createArray([Point2d.create(0, 0), Point2d.create(1, 1)])); }
}

  public static fromNormalizedRange() { return QParams2d.fromRange(Range2d.createArray([Point2d.create(-1, -1), Point2d.create(1, 1)])); }