-
Notifications
You must be signed in to change notification settings - Fork 0
/
Demo.tsx
86 lines (76 loc) · 2.83 KB
/
Demo.tsx
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
import React, { useState } from "react";
import RegionSelect from "../RegionSelect";
import { RegionInfo } from "../Region";
import exampleDoc from "./example-doc.jpg";
import "./style.css";
export default function Demo() {
const [regions, setRegions] = useState<RegionInfo[]>([]);
const handleChange = (newRegions: RegionInfo[]) => {
setRegions(newRegions);
};
const handleRegionChange = (event: React.ChangeEvent<HTMLSelectElement>, index: number) => {
const region = regions[index];
let color;
switch (event.target.value) {
case "1":
color = "rgba(255, 0, 0, 0.5)";
break;
case "2":
color = "rgba(0, 0, 255, 0.5)";
break;
case "3":
color = "rgba(0, 255, 0, 0.5)";
break;
default:
color = "rgba(0, 0, 0, 0.5)";
}
region.data.regionStyle = {
background: color,
};
region.data.dataType = event.target.value;
const newRegions = [...regions];
newRegions[index] = region;
setRegions(newRegions);
};
const regionStyle: React.CSSProperties = {
background: "rgba(255, 0, 0, 0.5)",
backdropFilter: "blur(5px)",
};
const renderer = ({ data, pos, dim }: RegionInfo) => {
console.log("Rendering region. Changing:", data.isChanging);
if (!data.isChanging) {
const placement: React.CSSProperties = { position: "absolute", right: 0, bottom: "-1.5em" };
return (
<div style={placement}>
<select
// style={placement}
onChange={(event) => handleRegionChange(event, data.index)}
value={data.dataType}>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</div>
);
}
};
return (
<div style={{ display: "flex" }}>
<div style={{ flexGrow: 1, flexShrink: 1, width: "50%" }}>
<RegionSelect
debug={true}
maxRegions={5}
regions={regions}
regionStyle={regionStyle}
onChange={handleChange}
regionRenderer={renderer}
style={{ border: "1px solid black" }}>
<img src={exampleDoc} width="100%" style={{ pointerEvents: "none" }} />
</RegionSelect>
</div>
<div style={{ flexGrow: 1, flexShrink: 1, width: "50%", padding: 15 }}>
Select something with your mouse on the left side
</div>
</div>
);
}