import { getRoot, types } from "mobx-state-tree";
|
|
import Utils from "../utils";
|
import Constants, { defaultStyle } from "../core/Constants";
|
import { highlightRange } from "../utils/html";
|
|
export default types
|
.model()
|
.views(() => ({}))
|
.actions((self) => ({
|
updateSpansColor(bgcolor, opacity) {
|
if (self._spans) {
|
self._spans.forEach((span) => {
|
if (bgcolor) {
|
span.style.backgroundColor = bgcolor;
|
}
|
|
if (opacity) {
|
span.style.backgroundColor = Utils.Colors.rgbaChangeAlpha(span.style.backgroundColor, opacity);
|
}
|
});
|
}
|
},
|
|
updateAppearenceFromState() {
|
const labelColor = self.getLabelColor();
|
|
self.updateSpansColor(labelColor, self.selected ? 0.8 : 0.3);
|
self.applyCSSClass(self._lastSpan);
|
},
|
|
createSpans() {
|
const labelColor = self.getLabelColor();
|
const spans = highlightRange(self, "htx-highlight", { backgroundColor: labelColor });
|
|
const lastSpan = spans[spans.length - 1];
|
|
if (!lastSpan) return;
|
|
self.applyCSSClass(lastSpan);
|
|
self._lastSpan = lastSpan;
|
self._spans = spans;
|
|
return spans;
|
},
|
|
getLabelColor() {
|
let labelColor = self.parent.highlightcolor || (self.style || self.tag || defaultStyle).fillcolor;
|
|
if (labelColor) {
|
labelColor = Utils.Colors.convertToRGBA(labelColor, 0.3);
|
}
|
|
return labelColor;
|
},
|
|
applyCSSClass(lastSpan) {
|
if (!lastSpan) return;
|
const classes = ["htx-highlight", "htx-highlight-last"];
|
const settings = getRoot(self).settings;
|
|
if (!self.parent.showlabels && !settings?.showLabels) {
|
classes.push("htx-no-label");
|
} else {
|
// @todo multilabeling with different labels?
|
const names = self.labeling?.mainValue;
|
const cssCls = Utils.HTML.labelWithCSS(lastSpan, {
|
index: self.region_index,
|
labels: names,
|
score: self.score,
|
});
|
|
classes.push(cssCls);
|
}
|
lastSpan.className = classes.filter(Boolean).join(" ");
|
},
|
|
addEventsToSpans(spans) {
|
const addEvent = (s) => {
|
s.onmouseover = (ev) => {
|
if (self.hidden) return;
|
if (self.annotation.isLinkingMode) {
|
self.toggleHighlight();
|
s.style.cursor = Constants.LINKING_MODE_CURSOR;
|
// only one span should be highlighted
|
ev.stopPropagation();
|
} else {
|
s.style.cursor = Constants.POINTER_CURSOR;
|
}
|
};
|
|
s.onmouseout = () => {
|
if (self.hidden) return;
|
self.setHighlight(false);
|
};
|
|
s.onmousedown = function (ev) {
|
if (self.hidden) return;
|
// if we click to already selected span (=== this)
|
// skip it to allow another span to be selected
|
if (self.parent._currentSpan !== this) {
|
ev.stopPropagation();
|
self.parent._currentSpan = this;
|
}
|
};
|
|
s.onclick = function () {
|
if (self.hidden) return;
|
// set above in `onmousedown`, can be nulled when new region created
|
if (self.parent._currentSpan !== this) return;
|
// reset for the case we just created new relation
|
s.style.cursor = Constants.POINTER_CURSOR;
|
self.onClickRegion();
|
};
|
|
return false;
|
};
|
|
spans && spans.forEach((s) => addEvent(s));
|
},
|
|
selectRegion() {
|
self.updateSpansColor(null, 0.8);
|
|
const first = self._spans[0];
|
|
if (first) {
|
if (first.scrollIntoViewIfNeeded) {
|
first.scrollIntoViewIfNeeded();
|
} else {
|
first.scrollIntoView({ block: "center", behavior: "smooth" });
|
}
|
}
|
},
|
|
/**
|
* Unselect text region
|
*/
|
afterUnselectRegion() {
|
self.updateSpansColor(null, 0.3);
|
},
|
|
setHighlight(val) {
|
self._highlighted = val;
|
|
if (self._spans) {
|
const len = self._spans.length;
|
const fspan = self._spans[0];
|
const lspan = self._spans[len - 1];
|
const mspans = self._spans.slice(1, len - 1);
|
|
const set = (span, s, { top = true, bottom = true, right = true, left = true } = {}) => {
|
if (right) span.style.borderRight = s;
|
if (left) span.style.borderLeft = s;
|
if (top) span.style.borderTop = s;
|
if (bottom) span.style.borderBottom = s;
|
};
|
|
if (self.highlighted && !self.hidden) {
|
const h = Constants.HIGHLIGHTED_CSS_BORDER;
|
|
set(fspan, h, { right: false });
|
set(lspan, h, { left: false });
|
|
if (mspans.length) mspans.forEach((s) => set(s, h, { left: false, right: false }));
|
} else {
|
const zpx = "0px";
|
|
set(fspan, zpx);
|
set(lspan, zpx);
|
|
if (mspans.length) mspans.forEach((s) => set(s, zpx, { left: false, right: false }));
|
}
|
}
|
},
|
|
toggleHidden(e) {
|
self.hidden = !self.hidden;
|
self.setHighlight(self.highlighted);
|
|
if (self.hidden) {
|
self.updateSpansColor("transparent", 0);
|
if (self._spans) {
|
self._spans.forEach((span) => {
|
span.style.cursor = Constants.DEFAULT_CURSOR;
|
});
|
}
|
} else {
|
self.updateAppearenceFromState();
|
}
|
e?.stopPropagation();
|
},
|
|
find(span) {
|
return self._spans && self._spans.indexOf(span) >= 0 ? self : undefined;
|
},
|
}));
|
