onDrawPolygonsTool()

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


  onDrawPolygonsTool(action: ViewerMenuAction) {
    const olMap = this.olMap;
    if (!olMap) return;
    const drawLayer = olMap.getAllLayers().find((layer) => {
      return layer.get('name') === 'draw-layer';
    });
    if (!drawLayer) return;
    const drawSource = drawLayer.getSource() as Vector<Feature<Geometry>>;


    const currentUserAnnotationInstance =
        this.annotationInstances.find((annotationInstance) => {
          return annotationInstance.annotatorId === this.currentUser;
        });
    if (currentUserAnnotationInstance &&
        !this.selectedInstanceIds.has(
            currentUserAnnotationInstance.path.instanceUID ?? '')) {
      this.toggleAnnotationInstancesSelected(currentUserAnnotationInstance);
    }


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

    let drawType: Type = 'Polygon';
    let geometryFunction: GeometryFunction|undefined = undefined;

    if (action === ViewerMenuAction.DRAW_POINT) {
      this.selectedViewerAction = ViewerMenuAction.DRAW_POINT;
      drawType = 'Point';
    }
    if (action === ViewerMenuAction.DRAW_BOX) {
      this.selectedViewerAction = ViewerMenuAction.DRAW_BOX;
      drawType = 'Circle';
      geometryFunction = createBox();
    }
    // Draw.

    const drawInteraction = new Draw({
      source: drawSource,
      type: drawType,
      freehand: true,
      style: [DRAW_STROKE_STYLE],
      geometryFunction,
    });

    this.measurePointerMessageHandler();
    olMap.addInteraction(drawInteraction);

    drawInteraction.on('drawstart', () => {
      this.resetHelpTooltipOverlay();
    });
    drawInteraction.on('drawend', (event) => {
      const olMap = this.olMap;
      if (!olMap) return;

      const feature: ol.Feature<Geometry> = event.feature;
      let maxIndex = 0;
      drawSource.getFeatures().forEach((feature) => {
        const featureAnnotationKey = getFeatureAnnotationKey(feature);
        maxIndex = Math.max(maxIndex, featureAnnotationKey.index);
      });

      feature.setId(JSON.stringify({
        ...DEFAULT_ANNOTATION_KEY,
        names: `ROI`,
        index: maxIndex + 1,
      }));
      drawSource.addFeature(feature);
      this.recentlyAddedFeatures = [feature];

      if (action !== ViewerMenuAction.DRAW_POINT) {
        feature.setStyle(DEFAULT_DRAWING_STYLE);
      }

      // Avoid race condition with view selection.
      setTimeout(() => {
        this.saveAnnotation();
        this.selectFeature(feature, /*isNewAnnotation*/ true);
      });
    });
  }