getLayers()

in hcs-image-viewer/src/lib/viewer/components/view.js [53:205]


  getLayers({ viewStates, props }) {
    const detailViewLayers = super.getLayers({ viewStates, props });
    const { loader } = props;
    const { id, height, width } = this;
    const layerViewState = viewStates[id];
    if (this.overlayImages) {
      this.overlayImages.forEach((image, idx) => {
        let url;
        let ignoreColor;
        let ignoreColorAccuracy;
        let color;
        if (typeof image === 'string') {
          url = image;
          ignoreColor = true;
          ignoreColorAccuracy = 0.1;
        } else if (typeof image === 'object' && image.url) {
          url = image.url;
          color = image.color;
          ignoreColor = !!color || !!image.ignoreColor;
          ignoreColorAccuracy = image.ignoreColorAccuracy || 0.1;
        }
        if (url) {
          detailViewLayers.push(
            new ImageOverlayLayer({
              loader,
              url,
              color,
              ignoreColor,
              ignoreColorAccuracy,
              id: `image-${idx}-${getLayerId(id)}`,
              viewState: { ...layerViewState, height, width },
            }),
          );
        }
      });
    }
    if (this.mesh) {
      detailViewLayers.push(
        new CollageMeshLayer(
          {
            ...props,
            loader,
            id: `mesh-${getLayerId(id)}`,
            mesh: { ...this.mesh },
            viewState: { ...layerViewState, height, width },
            onHover: this.onCellHover,
            onClick: this.onCellClick,
            hoveredCell: this.hoveredCell,
          },
        ),
      );
    }
    const rectangleAnnotations = this.annotations
      .filter((annotation) => /^rectangle$/i.test(annotation.type));
    const circleAnnotations = this.annotations
      .filter((annotation) => /^circle$/i.test(annotation.type));
    const polylineAnnotations = this.annotations
      .filter((annotation) => /^polyline$/i.test(annotation.type));
    const arrowAnnotations = this.annotations
      .filter((annotation) => /^arrow$/i.test(annotation.type));
    const textAnnotations = this.annotations
      .filter((annotation) => /^text$/i.test(annotation.type));
    if (this.annotations.length > 0) {
      detailViewLayers.push(
        new AnnotationBackgroundLayer(
          {
            ...this.props,
            loader,
            id: `annotations-background-${getLayerId(id)}`,
            viewState: { ...layerViewState, height, width },
            onClick: this.onSelectAnnotation,
            onEdit: this.onEditAnnotation,
          },
        ),
      );
    }
    if (rectangleAnnotations.length > 0) {
      detailViewLayers.push(
        new RectangleAnnotationLayer(
          {
            ...this.props,
            id: `rectangle-annotation-${getLayerId(id)}`,
            viewState: { ...layerViewState, height, width },
            annotations: rectangleAnnotations,
            selectedAnnotation: this.selectedAnnotation,
            onClick: this.onSelectAnnotation,
            onEdit: this.onEditAnnotation,
          },
        ),
      );
    }
    if (circleAnnotations.length > 0) {
      detailViewLayers.push(
        new CircleAnnotationLayer(
          {
            ...this.props,
            id: `circle-annotation-${getLayerId(id)}`,
            viewState: { ...layerViewState, height, width },
            annotations: circleAnnotations,
            selectedAnnotation: this.selectedAnnotation,
            onClick: this.onSelectAnnotation,
            onEdit: this.onEditAnnotation,
          },
        ),
      );
    }
    if (polylineAnnotations.length > 0) {
      detailViewLayers.push(
        new PolylineAnnotationLayer(
          {
            ...this.props,
            id: `polyline-annotation-${getLayerId(id)}`,
            viewState: { ...layerViewState, height, width },
            annotations: polylineAnnotations,
            selectedAnnotation: this.selectedAnnotation,
            onClick: this.onSelectAnnotation,
            onEdit: this.onEditAnnotation,
          },
        ),
      );
    }
    if (arrowAnnotations.length > 0) {
      detailViewLayers.push(
        new ArrowAnnotationLayer(
          {
            ...this.props,
            id: `arrow-annotation-${getLayerId(id)}`,
            viewState: { ...layerViewState, height, width },
            annotations: arrowAnnotations,
            selectedAnnotation: this.selectedAnnotation,
            onClick: this.onSelectAnnotation,
            onEdit: this.onEditAnnotation,
          },
        ),
      );
    }
    if (textAnnotations.length > 0) {
      detailViewLayers.push(
        new TextAnnotationLayer(
          {
            ...this.props,
            id: `text-annotation-${getLayerId(id)}`,
            viewState: { ...layerViewState, height, width },
            annotations: textAnnotations,
            selectedAnnotation: this.selectedAnnotation,
            onClick: this.onSelectAnnotation,
            onEdit: this.onEditAnnotation,
          },
        ),
      );
    }
    return detailViewLayers;
  }