onMeasureTool()

in pathology/viewer/src/components/image-viewer-side-nav/image-viewer-side-nav.component.ts [1075:1183]


  onMeasureTool() {
    const olMap = this.olMap;
    if (!olMap) return;

    this.resetOtherTools();
    this.selectedViewerAction = ViewerMenuAction.MEASURE;
    olMap.getTargetElement().style.cursor = 'cell';
    this.measurePointerMessageHandler();

    const value = 'LineString';

    const measureLayer = olMap.getAllLayers().find(
        (layer) => layer.get('name') === 'measure-layer');
    if (!measureLayer) return;

    const measureSource =
        measureLayer.getProperties()['source'] as Vector<Feature<Geometry>>;
    if (!measureSource) return;

    const measureInteraction = new Draw({
      source: measureSource,
      type: value,
      freehand: false,
      maxPoints: 2,
      style: MEASURE_STROKE_STYLE,
    });

    this.activeInteraction = measureInteraction;
    olMap.addInteraction(this.activeInteraction);
    this.createMeasureTooltip();

    // Set sketch
    measureInteraction.on('drawstart', (evt) => {
      // set sketch
      this.measureDrawing = evt.feature;

      const featureGeometry = this.measureDrawing.getGeometry();
      let tooltipCoord: Coordinate|undefined = undefined;

      this.measureDrawingGeometryChangeListener =
          this.measureDrawing?.getGeometry()?.on('change', () => {
            if (featureGeometry instanceof Polygon) {
              tooltipCoord =
                  featureGeometry.getInteriorPoint().getCoordinates();
            }
            if (featureGeometry instanceof LineString) {
              tooltipCoord = featureGeometry.getLastCoordinate();
            }

            // Set tooltip content
            let output;

            if (featureGeometry instanceof Polygon) {
              output = this.formatArea(featureGeometry);
            } else if (featureGeometry instanceof LineString) {
              output = this.formatLength(featureGeometry);
            }

            if (!this.measureTooltipElement || !output) {
              return;
            }

            this.windowService.safelySetInnerHtml(
                this.measureTooltipElement, `${output} mm`);


            this.measureTooltip?.setPosition(tooltipCoord);
          });
    });

    measureInteraction.on('drawend', (event) => {
      if (!this.measureTooltipElement) {
        return;
      }
      this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
      this.measureTooltip?.setOffset([0, -7]);

      this.measureDrawing = undefined;
      // unset tooltip so that a new one can be created
      this.measureTooltipElement = undefined;
      this.createMeasureTooltip();
      if (this.measureDrawingGeometryChangeListener) {
        unByKey(this.measureDrawingGeometryChangeListener);
      }


      const feature: ol.Feature<Geometry> = event.feature;
      let maxIndex = 0;
      if (this.drawLayer) {
        const drawSource =
            this.drawLayer.getSource() as source.Vector<Feature<Geometry>>;
        drawSource.getFeatures().forEach((feature) => {
          const featureAnnotationKey = getFeatureAnnotationKey(feature);
          maxIndex = Math.max(maxIndex, featureAnnotationKey.index);
        });
      }
      measureSource.getFeatures().forEach((feature) => {
        const featureAnnotationKey = getFeatureAnnotationKey(feature);
        maxIndex = Math.max(maxIndex, featureAnnotationKey.index);
      });

      feature.setId(JSON.stringify({
        ...DEFAULT_ANNOTATION_KEY,
        names: `MEASURE`,
        index: maxIndex + 1,
      }));
      measureSource.addFeature(feature);
    });
  }