init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { inject, observer } from "mobx-react";
 
import TextNode from "../TextNode/TextNode";
import Utils from "../../utils";
 
const HtxTextNodeView = ({ store, range, id, highlightStyle, style, charIndex, children, overlap }) => {
  const getStyle = (range) => (range ? highlightStyle : style);
  const getRangeKey = () => `${id}-${range.start}-${charIndex}`;
  const getNormalKey = () => `${id}-${charIndex}`;
  const getKey = (range) => (range ? getRangeKey() : getNormalKey());
 
  let wrapper = (
    <span data-position={charIndex} key={getKey(range)} style={getStyle(range)}>
      {children}
    </span>
  );
 
  if (overlap && overlap.length) {
    let bg;
 
    if (range.states) {
      range.states.forEach((i) => {
        bg = Utils.Colors.convertToRGBA(i.getSelectedColor(), 0.3);
      });
    }
 
    store.annotationStore.selected.regionStore.regions.forEach((i) => {
      if (i.selected) {
        overlap.forEach((overlapItem) => {
          if (overlapItem === i.id) {
            bg = "#ff4d4f";
          }
        });
      }
 
      if (i.highlighted && overlap.includes(i.id)) {
        bg = "#ff4d4f";
      }
    });
 
    wrapper = overlap.reduceRight((value, key) => {
      return (
        <TextNode
          style={{ background: bg, padding: "2px 0" }}
          position={charIndex}
          overlap={key}
          keyNode={getKey(range)}
        >
          {value}
        </TextNode>
      );
    }, children);
  }
 
  return wrapper;
};
 
const HtxTextNode = inject("store")(observer(HtxTextNodeView));
 
export { HtxTextNode };