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