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;
}