import { observer } from "mobx-react";
|
import { types, getParent } from "mobx-state-tree";
|
|
import NormalizationMixin from "../mixins/Normalization";
|
import RegionsMixin from "../mixins/Regions";
|
import Registry from "../core/Registry";
|
// import { CustomTagModel } from "../tags/Custom";
|
import { guidGenerator } from "../core/Helpers";
|
|
import { HtxTextBox } from "../components/HtxTextBox/HtxTextBox";
|
import { cn } from "../utils/bem";
|
|
const Model = types
|
.model("CustomRegionModel", {
|
id: types.optional(types.identifier, guidGenerator),
|
pid: types.optional(types.string, guidGenerator),
|
type: "customregion",
|
|
_value: types.frozen(),
|
// states: types.array(types.union(ChoicesModel)),
|
})
|
.volatile(() => ({
|
classification: true,
|
perRegionTags: [],
|
results: [],
|
selected: false,
|
}))
|
.views((self) => ({
|
get parent() {
|
// Since getParentOfType might not work, we'll use getParent which should work
|
// for any MobX parent-child relationship
|
return getParent(self);
|
},
|
getRegionElement() {
|
return document.querySelector(`#CustomRegion-${self.id}`);
|
},
|
getOneColor() {
|
return null;
|
},
|
}))
|
.actions((self) => ({
|
setValue(val) {
|
if (self._value === val || !self.parent.validateText(val)) return;
|
|
self._value = val;
|
self.parent.onChange();
|
},
|
|
updateValue(newValue) {
|
// This is the sanctioned way to update the region's value
|
// from an external component like the POC UI.
|
self._value = newValue;
|
// Also notify the parent about the change so it can update results
|
if (self.parent.updateResult) {
|
self.parent.updateResult();
|
}
|
},
|
|
deleteRegion() {
|
self.parent.remove(self);
|
},
|
|
selectRegion() {
|
self.selected = true;
|
},
|
|
afterUnselectRegion() {
|
self.selected = false;
|
},
|
}));
|
|
const CustomRegionModel = types.compose("CustomRegionModel", RegionsMixin, NormalizationMixin, Model);
|
|
const HtxCustomRegionView = ({ item, onFocus }) => {
|
const classes = [styles.mark];
|
const params = { onFocus: (e) => onFocus(e, item) };
|
const { parent } = item;
|
const { relationMode } = item.annotation;
|
const editable = parent.isEditable && !item.isReadOnly();
|
const deleteable = parent.isDeleteable && !item.isReadOnly();
|
|
if (relationMode) {
|
classes.push(styles.relation);
|
}
|
|
if (item.selected) {
|
classes.push(styles.selected);
|
} else if (item.highlighted) {
|
classes.push(styles.highlighted);
|
}
|
|
if (editable || parent.transcription) {
|
params.onChange = (str) => {
|
item.setValue(str);
|
item.parent.updateLeadTime();
|
};
|
params.onInput = () => {
|
item.parent.countTime();
|
};
|
}
|
|
params.onDelete = item.deleteRegion;
|
|
let divAttrs = {};
|
|
if (!parent.perregion) {
|
divAttrs = {
|
onMouseOver: () => {
|
if (relationMode) {
|
item.setHighlight(true);
|
}
|
},
|
onMouseOut: () => {
|
/* range.setHighlight(false); */
|
if (relationMode) {
|
item.setHighlight(false);
|
}
|
},
|
};
|
}
|
|
const name = `${parent?.name ?? ""}:${item.id}`;
|
|
return (
|
<div {...divAttrs} className={cn("row").toString()} data-testid="custom-region">
|
<HtxTextBox
|
isEditable={editable}
|
isDeleteable={deleteable}
|
onlyEdit={parent.transcription}
|
id={`CustomRegion-${item.id}`}
|
name={name}
|
className={classes.join(" ")}
|
rows={parent.rows}
|
text={item._value}
|
{...params}
|
ignoreShortcuts={true}
|
/>
|
</div>
|
);
|
};
|
|
const HtxCustomRegion = observer(HtxCustomRegionView);
|
|
Registry.addTag("customregion", CustomRegionModel, HtxCustomRegion);
|
Registry.addRegionType(CustomRegionModel, "custominterface");
|
|
export { CustomRegionModel, HtxCustomRegion };
|
