const { annotManager, docViewer, Annotations } = instance;
// keep track of the currently selected segments for polygon annotations
const polygonSelectedSegments = {};
const getSelectedSegment = polygon => {
return polygonSelectedSegments[polygon.Id] || 0;
};
const updateSelectedSegment = polygon => {
// subtract 1 because the path length is the number of points, not segments
const pathLength = polygon.getPath().length - 1;
// update the selected segment, wrap back to zero
polygonSelectedSegments[polygon.Id] = (getSelectedSegment(polygon) + 1) % pathLength;
};
// this button "selects" the next segment of the polygon
instance.annotationPopup.add({
type: 'actionButton',
label: 'Next',
dataElement: 'polygonNextButton',
onClick: () => {
const annot = annotManager.getSelectedAnnotations()[0];
updateSelectedSegment(annot);
annotManager.redrawAnnotation(annot);
}
});
// this button splits the currently selected segment of the polygon
instance.annotationPopup.add({
type: 'actionButton',
label: 'Split',
dataElement: 'polygonSplitButton',
onClick: () => {
const annot = annotManager.getSelectedAnnotations()[0];
const selectedSegment = getSelectedSegment(annot);
const path = annot.getPath();
const firstPoint = path[selectedSegment];
const secondPoint = path[selectedSegment + 1];
const newPoint = {
x: (firstPoint.x + secondPoint.x) / 2,
y: (firstPoint.y + secondPoint.y) / 2
};
path.splice(selectedSegment + 1, 0, newPoint);
annotManager.redrawAnnotation(annot);
}
});
// only show the buttons when polygons are selected
annotManager.on('annotationSelected', (annotations, action) => {
const isSelectingPolygon = action === 'selected' && annotations.length > 0 && annotations[0] instanceof Annotations.PolygonAnnotation;
if (isSelectingPolygon) {
instance.enableElements(['polygonNextButton', 'polygonSplitButton']);
} else {
instance.disableElements(['polygonNextButton', 'polygonSplitButton']);
}
});
const polygonDraw = Annotations.PolygonAnnotation.prototype.draw;
Annotations.PolygonAnnotation.prototype.draw = function(ctx) {
polygonDraw.apply(this, arguments);
// draw a red line over top of the selected segment if this
// polygon is selected
if (annotManager.isAnnotationSelected(this)) {
const selectedSegment = getSelectedSegment(this);
const path = this.getPath();
if (path.length > selectedSegment + 1) {
ctx.save();
ctx.beginPath();
ctx.moveTo(path[selectedSegment].x, path[selectedSegment].y);
ctx.lineTo(path[selectedSegment + 1].x, path[selectedSegment + 1].y);
// use a larger minimum selection size for small stroke thicknesses
ctx.lineWidth = Math.max(ctx.lineWidth, 4);
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.restore();
}
}
};