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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import type { KonvaEventObject } from "konva/lib/Node";
import { observer } from "mobx-react";
import { type FC, useMemo } from "react";
import { Group, Rect } from "react-konva";
import { useRegionStyles } from "../../../hooks/useRegionColor";
import { getNodeAbsoluteDimensions, normalizeNodeDimentions } from "./tools";
import type { WorkingArea } from "./types";
import { LabelOnVideoBbox } from "../../../components/ImageView/LabelOnRegion";
 
type RectPropsExtend = typeof Rect;
 
interface RectProps extends RectPropsExtend {
  id: string;
  reg: any;
  frame: number;
  selected: boolean;
  draggable: boolean;
  listening: boolean;
  box: { x: number; y: number; width: number; height: number; rotation: number };
  workingArea: WorkingArea;
  onDragMove: (e: KonvaEventObject<DragEvent>) => void;
}
 
const RectanglePure: FC<RectProps> = ({
  id,
  reg,
  box,
  frame,
  workingArea,
  selected,
  draggable,
  listening,
  onDragMove,
  ...rest
}) => {
  const style = useRegionStyles(reg, { includeFill: true });
 
  const { realWidth: waWidth, realHeight: waHeight, scale: waScale } = workingArea;
 
  const newBox = useMemo(
    () => ({
      x: (box.x * waWidth) / 100,
      y: (box.y * waHeight) / 100,
      width: (box.width * waWidth) / 100,
      height: (box.height * waHeight) / 100,
      rotation: box.rotation,
    }),
    [box, waWidth, waHeight],
  );
 
  const onDimensionUpdate = (e: KonvaEventObject<Event>) => {
    const node = e.target;
 
    if (e.type === "dragmove") onDragMove(e as KonvaEventObject<DragEvent>);
 
    reg.updateShape(getNodeAbsoluteDimensions(node, workingArea), frame);
  };
 
  const onTransform = (e: KonvaEventObject<Event>) => {
    normalizeNodeDimentions(e.target, "rect");
  };
 
  return (
    <Group>
      <LabelOnVideoBbox
        reg={reg}
        box={newBox}
        scale={waScale}
        color={style.strokeColor}
        strokeWidth={style.strokeWidth}
        adjacent
      />
      <Rect
        id={id}
        {...newBox}
        fill={style.fillColor ?? "#fff"}
        stroke={style.strokeColor}
        strokeScaleEnabled={false}
        selected={selected}
        draggable={draggable}
        listening={listening}
        opacity={reg.hidden ? 0 : 1}
        onTransform={onTransform}
        onTransformEnd={onDimensionUpdate}
        onDragMove={onDimensionUpdate}
        onDragEnd={onDimensionUpdate}
        {...rest}
      />
    </Group>
  );
};
 
export const Rectangle = observer(RectanglePure);