Measure distance in a PDF using JavaScript

let pspdfkitInstance; // Global or module-level variable.
NutrientViewer.load({
  ...baseOptions,
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: "cloudy-rectangle", dropdownGroup: "shapes" },
    { type: "dashed-rectangle", dropdownGroup: "shapes" },
    { type: "cloudy-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-polygon", dropdownGroup: "shapes" },
    { type: "content-editor", dropdownGroup: "editor" },
    { type: "form-creator", dropdownGroup: "editor" },
    { type: "measure", dropdownGroup: "editor" },
    { type: "document-comparison", dropdownGroup: "editor" },
  ],
  measurementValueConfiguration: (documentScales) => {
    const customScale = {
      name: "myCustomScale",
      scale: {
        unitFrom: NutrientViewer.MeasurementScaleUnitFrom.POINTS, // Using the enum value.
        unitTo: NutrientViewer.MeasurementScaleUnitTo.CENTIMETERS, // Using the enum value.
        fromValue: 1,
        toValue: 0.05, // 1 pt = 0.05 cm
      },
      precision: NutrientViewer.MeasurementPrecision.TWO, // Using the enum value
      selected: true, // Make this the default scale.
    };
    return [customScale, ...documentScales];
  },
})
  .then(async (instance) => {
    try {
      // Create measurement annotation.
      const lineAnnotation = new NutrientViewer.Annotations.LineAnnotation({
        strokeColor: NutrientViewer.Color.RED,
        pageIndex: 0,
        startPoint: new NutrientViewer.Geometry.Point({ x: 100, y: 100 }),
        endPoint: new NutrientViewer.Geometry.Point({ x: 300, y: 300 }),
        boundingBox: new NutrientViewer.Geometry.Rect({
          left: 100,
          top: 100,
          width: 200,
          height: 200,
        }),
        measurementPrecision: "threeDp",
        measurementScale: new NutrientViewer.MeasurementScale({
          unitFrom: NutrientViewer.MeasurementScaleUnitFrom.INCHES,
          unitTo: NutrientViewer.MeasurementScaleUnitTo.INCHES,
          fromValue: 1,
          toValue: 1,
        }),
        lineCaps: { start: "butt", end: "butt" },
      });

      // Add the annotation to the document.
      await instance.create(lineAnnotation);
      console.log("Measurement annotation created and added to the document.");

      console.log((await instance.getAnnotations(0)).toJS());
    } catch (error) {
      console.error("Error creating or adding annotation:", error);
    }
  })
  .catch(function (error) {
    console.error("Error loading PDF:", error.message);
  });

let pspdfkitInstance; // Global or module-level variable.
NutrientViewer.load({
  ...baseOptions,
  theme: NutrientViewer.Theme.DARK,
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: "cloudy-rectangle", dropdownGroup: "shapes" },
    { type: "dashed-rectangle", dropdownGroup: "shapes" },
    { type: "cloudy-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-ellipse", dropdownGroup: "shapes" },
    { type: "dashed-polygon", dropdownGroup: "shapes" },
    { type: "content-editor", dropdownGroup: "editor" },
    { type: "form-creator", dropdownGroup: "editor" },
    { type: "measure", dropdownGroup: "editor" },
    { type: "document-comparison", dropdownGroup: "editor" },
  ],
  measurementValueConfiguration: (documentScales) => {
    const customDistanceScale = {
      name: "myCustomDistanceScale",
      scale: {
        unitFrom: "pt", // Simple string for points.
        unitTo: "cm",   // Simple string for centimeters.
        fromValue: 1,
        toValue: 0.05,
      },
      precision: NutrientViewer.MeasurementPrecision.TWO,
      selected: true,
    };
    return [customDistanceScale, ...documentScales];
  },
})
  .then(async (instance) => {
    console.log("Nutrient loaded!");
    try {
      // Define the points for the polyline (forming a zigzag).
      const points = NutrientViewer.Immutable.List([
        new NutrientViewer.Geometry.Point({ x: 100, y: 100 }),
        new NutrientViewer.Geometry.Point({ x: 200, y: 150 }),
        new NutrientViewer.Geometry.Point({ x: 150, y: 200 }),
        new NutrientViewer.Geometry.Point({ x: 250, y: 250 }),
      ]);

      // Calculate the bounding box (approximate).
      const minX = 100;
      const minY = 100;
      const maxX = 250;
      const maxY = 250;
      const boundingBox = new NutrientViewer.Geometry.Rect({
        left: minX,
        top: minY,
        width: maxX - minX,
        height: maxY - minY,
      });

      // Providing a `measurementScale` makes this a measurement annotation.
      const polylineAnnotation = new NutrientViewer.Annotations.PolylineAnnotation({
        strokeColor: NutrientViewer.Color.GREEN,
        pageIndex: 0,
        points: points,
        strokeWidth: 3,
        boundingBox: boundingBox,
        measurementPrecision: "twoDp", // Using string format.
        measurementScale: new NutrientViewer.MeasurementScale({
          unitFrom: NutrientViewer.MeasurementScaleUnitFrom.POINTS,
          unitTo: NutrientViewer.MeasurementScaleUnitTo.CENTIMETERS,
          fromValue: 1,
          toValue: 0.05,
        }),
      });

      // Add the annotation to the document.
      await instance.create(polylineAnnotation);
      console.log("Polyline distance measurement annotation created and added.");
      console.log((await instance.getAnnotations(0)).toJS());
    } catch (error) {
      console.error("Error creating or adding polyline measurement annotation:", error);
    }
  })
  .catch(function (error) {
    console.error("Error loading PDF:", error.message);
  });