import { types } from "mobx-state-tree";
|
import { FF_DEV_3793, FF_ZOOM_OPTIM, isFF } from "../utils/feature-flags";
|
import Constants from "../core/Constants";
|
|
export const KonvaRegionMixin = types
|
.model({})
|
.views((self) => {
|
return {
|
get bboxCoords() {
|
console.warn("KonvaRegionMixin needs to implement bboxCoords getter in regions");
|
return null;
|
},
|
get bboxCoordsCanvas() {
|
const bbox = self.bboxCoords;
|
|
if (!isFF(FF_DEV_3793)) return bbox;
|
if (!self.parent) return null;
|
|
return {
|
left: self.parent.internalToCanvasX(bbox.left),
|
top: self.parent.internalToCanvasY(bbox.top),
|
right: self.parent.internalToCanvasX(bbox.right),
|
bottom: self.parent.internalToCanvasY(bbox.bottom),
|
};
|
},
|
get inViewPort() {
|
if (!isFF(FF_ZOOM_OPTIM)) return true;
|
return (
|
!!self &&
|
!!self.bboxCoordsCanvas &&
|
!!self.object &&
|
self.bboxCoordsCanvas.right >= self.object.viewPortBBoxCoords.left &&
|
self.bboxCoordsCanvas.bottom >= self.object.viewPortBBoxCoords.top &&
|
self.bboxCoordsCanvas.left <= self.object.viewPortBBoxCoords.right &&
|
self.bboxCoordsCanvas.top <= self.object.viewPortBBoxCoords.bottom
|
);
|
},
|
get control() {
|
// that's a little bit tricky, but it seems that having a tools field is necessary for the region-creating control tag and it's might be a clue
|
return self.results.find((result) => result.from_name.tools)?.from_name;
|
},
|
get canRotate() {
|
return self.control?.canrotate && self.supportsRotate;
|
},
|
|
get supportsTransform() {
|
if (self.isReadOnly()) return false;
|
return this._supportsTransform && !this.hidden;
|
},
|
};
|
})
|
.actions((self) => {
|
let deferredSelectId = null;
|
const Super = {
|
deleteRegion: self.deleteRegion,
|
};
|
|
return {
|
updateCursor(isHovered = false) {
|
const stage = self.parent?.stageRef;
|
if (!stage) return;
|
const style = stage.container().style;
|
|
if (isHovered) {
|
if (self.annotation.isLinkingMode) {
|
style.cursor = Constants.LINKING_MODE_CURSOR;
|
} else if (self.type !== "brushregion") {
|
style.cursor = Constants.POINTER_CURSOR;
|
}
|
return;
|
}
|
|
const selectedTool = self.parent?.getToolsManager().findSelectedTool();
|
if (!selectedTool || !selectedTool.updateCursor) {
|
style.cursor = Constants.DEFAULT_CURSOR;
|
} else {
|
selectedTool.updateCursor();
|
}
|
},
|
|
checkSizes() {
|
const { naturalWidth, naturalHeight, stageWidth: width, stageHeight: height } = self.parent;
|
|
if (width > 1 && height > 1) {
|
self.updateImageSize?.(width / naturalWidth, height / naturalHeight, width, height);
|
}
|
},
|
|
selectRegion() {
|
self.scrollToRegion();
|
},
|
|
/**
|
* Scrolls to region if possible or scrolls to whole image if needed
|
*/
|
scrollToRegion() {
|
const zoomedIn = self.object.zoomScale > 1;
|
const canvas = self.shapeRef?.parent?.canvas?._canvas;
|
let viewport = canvas;
|
|
// `.lsf-main-content` is the main scrollable container for LSF
|
while (viewport && !viewport.scrollTop && !viewport.className.includes("main-content")) {
|
viewport = viewport.parentElement;
|
}
|
if (!viewport) return;
|
|
// minimum percent of region area to consider it visible
|
const VISIBLE_AREA = 0.6;
|
// infobar is positioned absolutely, covering part of UI
|
const INFOBAR_HEIGHT = 36;
|
|
const vBBox = viewport.getBoundingClientRect();
|
const cBBox = canvas.getBoundingClientRect();
|
// bbox inside canvas; for zoomed images calculations are tough,
|
// so we use the whole image so it should be visible enough at the end
|
const rBBox = zoomedIn ? { top: 0, bottom: cBBox.height } : self.bboxCoordsCanvas;
|
const height = rBBox.bottom - rBBox.top;
|
// comparing the closest point of region from top or bottom image edge
|
// and how deep is this edge hidden behind respective edge of viewport
|
const overTop = rBBox.top - (vBBox.top - cBBox.top);
|
const overBottom = canvas.clientHeight - rBBox.bottom - (cBBox.bottom - vBBox.bottom) - INFOBAR_HEIGHT;
|
// huge images should be scrolled to the closest edge, not to hidden one
|
const isHuge = zoomedIn && canvas.clientHeight > viewport.clientHeight;
|
|
// huge region or image cut off by viewport edges — do nothing
|
if (overTop < 0 && overBottom < 0) return;
|
|
if (overTop < 0 && -overTop / height > 1 - VISIBLE_AREA) {
|
// if image is still visible enough — don't scroll
|
if (zoomedIn && (cBBox.bottom - vBBox.top) / viewport.clientHeight > 1 - VISIBLE_AREA) return;
|
viewport.scrollBy({ top: isHuge ? -overBottom : overTop, left: 0, behavior: "smooth" });
|
} else if (overBottom < 0 && -overBottom / height > 1 - VISIBLE_AREA) {
|
// if image is still visible enough — don't scroll
|
if (zoomedIn && (vBBox.bottom - cBBox.top) / viewport.clientHeight > 1 - VISIBLE_AREA) return;
|
viewport.scrollBy({ top: isHuge ? overTop : -overBottom, left: 0, behavior: "smooth" });
|
}
|
},
|
|
onClickRegion(e) {
|
const annotation = self.annotation;
|
const ev = e?.evt || e;
|
const additiveMode = ev?.ctrlKey || ev?.metaKey;
|
|
if (e) e.cancelBubble = true;
|
|
const isDoubleClick = ev.detail === 2;
|
|
if (isDoubleClick) {
|
self.onDoubleClickRegion();
|
return;
|
}
|
|
const selectAction = () => {
|
self._selectArea(additiveMode);
|
deferredSelectId = null;
|
};
|
|
if (!annotation.isReadOnly() && annotation.isLinkingMode) {
|
annotation.addLinkedRegion(self);
|
annotation.stopLinkingMode();
|
annotation.regionStore.unselectAll();
|
} else {
|
self._selectArea(additiveMode);
|
}
|
},
|
onDoubleClickRegion() {
|
self.requestPerRegionFocus();
|
// `selectArea` does nothing when there's a selected region already, but it should rerender to make `requestPerRegionFocus` work,
|
// so it needs to use `selectAreas` instead. It contains `unselectAll` for this purpose.
|
self.annotation.selectAreas([self]);
|
},
|
deleteRegion() {
|
const selectedTool = self.parent?.getToolsManager().findSelectedTool();
|
selectedTool?.enable?.();
|
Super.deleteRegion();
|
},
|
};
|
});
|
