import { types, getRoot } from "mobx-state-tree";
|
|
import Utils from "../utils";
|
import Constants, { defaultStyle } from "../core/Constants";
|
import { isDefined } from "../utils/utilities";
|
|
const HIGHLIGHT_CN = "htx-highlight";
|
const HIGHLIGHT_NO_LABEL_CN = "htx-no-label";
|
const LABEL_COLOR_ALPHA = 0.3;
|
const LABEL_COLOR_ALPHA_ACTIVE = 0.8;
|
|
export const HighlightMixin = types
|
.model()
|
.volatile(() => ({
|
_spans: null,
|
}))
|
.views((self) => ({
|
get _hasSpans() {
|
// @todo is it possible that only some spans are connected?
|
// @TODO: Need to check if it is still necessary condition. The way of working with spans was changed and it could affect this part. The main question, is there still a way to get `isConnected === false`
|
return self._spans ? self._spans.every((span) => span.isConnected) : false;
|
},
|
get identifier() {
|
return `${self.id.split("#")[0]}-${self.ouid}`;
|
},
|
get className() {
|
return `${HIGHLIGHT_CN}-${self.identifier}`;
|
},
|
get classNames() {
|
const classNames = [HIGHLIGHT_CN, self.className];
|
|
if (!(self.parent.showlabels ?? self.store.settings.showLabels)) {
|
classNames.push(HIGHLIGHT_NO_LABEL_CN);
|
}
|
|
if (self.selected) {
|
classNames.push(STATE_CLASS_MODS.active);
|
}
|
|
// in this case labels presence can't be changed from settings — manual mode
|
if (isDefined(self.parent.showlabels)) {
|
classNames.push("htx-manual-label");
|
}
|
|
return classNames;
|
},
|
/**
|
* Generate styles for region and active region, but with a lighter background is that's a resized region,
|
* so the selection of the same color will give the original color of active region.
|
* @see getColors
|
* @param {string} className
|
* @param {object} colors see `getColors()`
|
* @param {boolean} resize lighter background for resized region or original one for active region
|
* @returns {string} styles to apply to the region
|
*/
|
generateStyles(className, colors, resize = false) {
|
return `
|
.${className} {
|
background-color: ${colors.background} !important;
|
border: 1px dashed transparent;
|
}
|
.${className}.${STATE_CLASS_MODS.active}:not(.${STATE_CLASS_MODS.hidden}) {
|
color: ${colors.activeText} !important;
|
background-color: ${resize ? colors.resizeBackground : colors.activeBackground} !important;
|
}
|
`;
|
},
|
get styles() {
|
return this.generateStyles(self.className, self.getColors());
|
},
|
get resizeStyles() {
|
return this.generateStyles(self.className, self.getColors(), true);
|
},
|
}))
|
.actions((self) => ({
|
/**
|
* Create highlights from the stored `Range`
|
*/
|
applyHighlight(init = false) {
|
// skip re-initialization
|
if (self._hasSpans) {
|
return void 0;
|
}
|
|
self._spans = self.parent.createSpansByGlobalOffsets(self.globalOffsets);
|
self._spans?.forEach((span) => (span.className = self.classNames.join(" ")));
|
self.updateSpans();
|
if (!init) {
|
self.parent.setStyles({ [self.identifier]: self.styles });
|
}
|
return void 0;
|
},
|
|
/**
|
* Get text from object tag by region offsets and set it to the region.
|
* Normally it would only set it initially for better performance.
|
* But when we edit the region we need to update it on every change.
|
* @param {object} options
|
* @param {boolean} options.force - always update the text
|
*/
|
updateHighlightedText({ force = false } = {}) {
|
if (!self.text || force) {
|
self.text = self.parent.getTextFromGlobalOffsets(self.globalOffsets);
|
}
|
},
|
|
updateSpans() {
|
// @TODO: Is `_hasSpans` some artifact from the old version?
|
if (self._hasSpans || self._spans?.length) {
|
const firstSpan = self._spans[0];
|
const lastSpan = self._spans.at(-1);
|
const offsets = self.globalOffsets;
|
|
// @TODO: Should we manage it in domManager?
|
// update label tag (index + attached labels) which sits in the last span
|
Utils.Selection.applySpanStyles(lastSpan, { index: self.region_index, label: self.getLabels() });
|
// store offsets in spans for further comparison if region got resized
|
firstSpan.setAttribute("data-start", offsets.start);
|
lastSpan.setAttribute("data-end", offsets.end);
|
}
|
},
|
|
clearSpans() {
|
self._spans = null;
|
},
|
|
/**
|
* Removes current highlights
|
*/
|
removeHighlight() {
|
if (self.globalOffsets) {
|
self.parent?.removeSpansInGlobalOffsets(self._spans, self.globalOffsets);
|
}
|
self.parent?.removeStyles([self.identifier]);
|
self._spans = null;
|
},
|
|
/**
|
* Update region's appearance if the label was changed
|
*/
|
updateAppearenceFromState() {
|
if (!self._spans?.length) return;
|
|
// Update label visibility based on settings
|
const settings = getRoot(self).settings;
|
const lastSpan = self._spans[self._spans.length - 1];
|
|
if (lastSpan) {
|
if (!self.parent?.showlabels && !settings?.showLabels) {
|
lastSpan.classList.add("htx-no-label");
|
} else {
|
lastSpan.classList.remove("htx-no-label");
|
}
|
}
|
|
if (self.parent?.canResizeSpans) {
|
const start = self._spans[0].getAttribute("data-start");
|
const end = self._spans.at(-1).getAttribute("data-end");
|
const offsets = self.globalOffsets;
|
|
// if spans have different offsets stored, then we resized the region and need to recreate spans
|
if (isDefined(start) && (+start !== offsets.start || +end !== offsets.end)) {
|
self.removeHighlight();
|
self.applyHighlight();
|
} else {
|
self.parent.setStyles?.({ [self.identifier]: self.styles });
|
self.updateSpans();
|
}
|
} else {
|
self.parent.setStyles?.({ [self.identifier]: self.styles });
|
self.updateSpans();
|
}
|
},
|
|
/**
|
* Attach resize handles to the first and last spans. `area` is used to be less possible to be
|
* in user's document. They are not fully valid inside spans, but they work.
|
*/
|
attachHandles() {
|
const classes = [STATE_CLASS_MODS.leftHandle, STATE_CLASS_MODS.rightHandle];
|
const spanStart = self._spans[0];
|
const spanEnd = self._spans.at(-1);
|
|
classes.forEach((resizeClass, index) => {
|
// html element that can't be encountered in a usual html
|
const handleArea = document.createElement("area");
|
|
handleArea.classList.add(resizeClass);
|
index === 0 ? spanStart.prepend(handleArea) : spanEnd.append(handleArea);
|
});
|
},
|
|
detachHandles() {
|
self._spans?.forEach((span) => span.querySelectorAll("area").forEach((area) => area.remove()));
|
},
|
|
/**
|
* Make current region selected
|
*/
|
selectRegion() {
|
self.annotation.setHighlightedNode(self);
|
|
self.addClass(STATE_CLASS_MODS.active);
|
|
const first = self._spans?.[0];
|
|
if (!first) return;
|
|
if (self.parent?.canResizeSpans) {
|
self.attachHandles();
|
}
|
|
if (first.scrollIntoViewIfNeeded) {
|
first.scrollIntoViewIfNeeded();
|
} else {
|
first.scrollIntoView({ block: "center", behavior: "smooth" });
|
}
|
},
|
|
/**
|
* Unselect text region
|
*/
|
afterUnselectRegion() {
|
self.removeClass(STATE_CLASS_MODS.active);
|
|
if (self.parent?.canResizeSpans) {
|
self.detachHandles();
|
}
|
},
|
|
/**
|
* Remove stylesheet before removing the highlight itself
|
*/
|
beforeDestroy() {
|
self.parent?.removeStyles([self.identifier]);
|
},
|
|
/**
|
* Draw region outline on hover
|
* @param {boolean} val
|
*/
|
setHighlight(val) {
|
if (!self._spans) {
|
return;
|
}
|
|
self._highlighted = val;
|
|
if (self.highlighted) {
|
self.addClass(STATE_CLASS_MODS.highlighted);
|
} else {
|
self.removeClass(STATE_CLASS_MODS.highlighted);
|
}
|
},
|
|
getLabels() {
|
const index = self.region_index;
|
const text = (self.labeling?.selectedLabels ?? []).map((label) => label.value).join(",");
|
|
return [index, text].filter(Boolean).join(":");
|
},
|
|
// @todo should not this be a view?
|
getColors() {
|
const labelColor = self.parent.highlightcolor || (self.style || self.tag || defaultStyle).fillcolor;
|
|
const background = Utils.Colors.convertToRGBA(labelColor ?? Constants.LABEL_BACKGROUND, LABEL_COLOR_ALPHA);
|
const activeBackground = Utils.Colors.convertToRGBA(
|
labelColor ?? Constants.LABEL_BACKGROUND,
|
LABEL_COLOR_ALPHA_ACTIVE,
|
);
|
// Extended/reduced parts of the region should be colored differently in a lighter color.
|
// With extension it's simple, because it's the browser selection, so we just set a different color to it.
|
// But to color the reduced part we use opacity of overlayed blocks — region hightlight and browser selection,
|
// and multiplication of them should be the same as original activeBackground.
|
// Region color should also be different from the original one, and for simplicity we use just one color.
|
// So this color should have an opacity twice closer to 1 than the original one: 1 - (1 - alpha) * 2
|
const resizeBackground = Utils.Colors.convertToRGBA(
|
labelColor ?? Constants.LABEL_BACKGROUND,
|
2 * LABEL_COLOR_ALPHA_ACTIVE - 1,
|
);
|
const activeText = Utils.Colors.contrastColor(activeBackground);
|
|
return {
|
background,
|
activeBackground,
|
resizeBackground,
|
activeText,
|
};
|
},
|
|
find(span) {
|
return self._spans && self._spans.indexOf(span) >= 0 ? self : undefined;
|
},
|
|
/**
|
* Add classes to all spans
|
* @param {string[]} classNames
|
*/
|
addClass(classNames) {
|
if (!classNames || !self._spans) {
|
return;
|
}
|
const classList = [].concat(classNames); // convert any input to array
|
|
self._spans.forEach((span) => span.classList.add(...classList));
|
},
|
|
/**
|
* Remove classes from all spans
|
* @param {string[]} classNames
|
*/
|
removeClass(classNames) {
|
if (!classNames || !self._spans) {
|
return;
|
}
|
const classList = [].concat(classNames); // convert any input to array
|
|
self._spans.forEach((span) => span.classList.remove(...classList));
|
},
|
|
toggleHidden(e) {
|
self.hidden = !self.hidden;
|
if (self.hidden) {
|
self.addClass("__hidden");
|
} else {
|
self.removeClass("__hidden");
|
}
|
|
e?.stopPropagation();
|
},
|
}));
|
|
export const STATE_CLASS_MODS = {
|
active: "__active",
|
highlighted: "__highlighted",
|
collapsed: "__collapsed",
|
hidden: "__hidden",
|
rightHandle: "__resize_right",
|
leftHandle: "__resize_left",
|
noLabel: HIGHLIGHT_NO_LABEL_CN,
|
};
|
