Skip to content

Commit fa42605

Browse files
anAcc22anAcc22
authored
Merge pull request #31 from anAcc22/dev
Improve annotations, add randomizer config, and allow for quick testcase(s) initialization
2 parents 39ff2c7 + 411e22b commit fa42605

20 files changed

Lines changed: 2761 additions & 486 deletions

‎src/App.tsx‎

Lines changed: 111 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import { InputTabs } from "./components/InputTabs";
33
import { GraphCanvas } from "./components/GraphCanvas";
44
import { GraphSettings } from "./components/GraphSettings";
55

6+
import { InitScreen } from "./components/InitScreen";
7+
import { RandomizerScreen } from "./components/RandomizerScreen";
8+
69
import { Settings } from "./types";
10+
import { SettingsFormat } from "./types";
711
import { TestCase, TestCases } from "./types";
12+
import { Randomizer } from "./types";
813

914
import { getDefaultGraph } from "./components/utils";
1015

@@ -62,6 +67,19 @@ function App() {
6267
localStorage.getItem("edgeLabelSeparation") !== null
6368
? Number.parseFloat(localStorage.getItem("edgeLabelSeparation")!)
6469
: 10,
70+
penThickness:
71+
localStorage.getItem("penThickness") !== null
72+
? Number.parseFloat(localStorage.getItem("penThickness")!)
73+
: 1,
74+
penTransparency:
75+
localStorage.getItem("penTransparency") !== null
76+
? Number.parseFloat(localStorage.getItem("penTransparency")!)
77+
: 0,
78+
eraserRadius:
79+
localStorage.getItem("eraserRadius") !== null
80+
? Number.parseFloat(localStorage.getItem("eraserRadius")!)
81+
: 10,
82+
testCaseBoundingBoxes: true,
6583
showComponents: false,
6684
showBridges: false,
6785
showMSTs: false,
@@ -74,17 +92,72 @@ function App() {
7492
: false,
7593
fixedMode: false,
7694
multiedgeMode: true,
77-
settingsFormat: "general",
95+
settingsFormat:
96+
localStorage.getItem("settingsFormat") !== null
97+
? (localStorage.getItem("settingsFormat") as SettingsFormat)
98+
: "general",
7899
gridMode: false,
79100
});
80101

102+
const [init, setInit] = useState<boolean>(false);
103+
const [randomizer, setRandomizer] = useState<boolean>(false);
104+
105+
const [randomizerConfig, setRandomizerConfig] = useState<Randomizer>({
106+
indexing:
107+
localStorage.getItem("randomizerIndexing") !== null
108+
? parseInt(localStorage.getItem("randomizerIndexing")!)
109+
: 0,
110+
nodeCount:
111+
localStorage.getItem("randomizerNodeCount") !== null
112+
? localStorage.getItem("randomizerNodeCount")!
113+
: "",
114+
edgeCount:
115+
localStorage.getItem("randomizerEdgeCount") !== null
116+
? localStorage.getItem("randomizerEdgeCount")!
117+
: "",
118+
connected:
119+
localStorage.getItem("randomizerConnected") !== null
120+
? localStorage.getItem("randomizerConnected")! == "true"
121+
: false,
122+
tree:
123+
localStorage.getItem("randomizerTree") !== null
124+
? localStorage.getItem("randomizerTree")! == "true"
125+
: false,
126+
hasNodeLabel:
127+
localStorage.getItem("randomizerHasNodeLabel") !== null
128+
? localStorage.getItem("randomizerHasNodeLabel")! == "true"
129+
: false,
130+
nodeLabelMin:
131+
localStorage.getItem("randomizerNodeLabelMin") !== null
132+
? localStorage.getItem("randomizerNodeLabelMin")!
133+
: "",
134+
nodeLabelMax:
135+
localStorage.getItem("randomizerNodeLabelMax") !== null
136+
? localStorage.getItem("randomizerNodeLabelMax")!
137+
: "",
138+
hasEdgeLabel:
139+
localStorage.getItem("randomizerHasEdgeLabel") !== null
140+
? localStorage.getItem("randomizerHasEdgeLabel")! == "true"
141+
: false,
142+
edgeLabelMin:
143+
localStorage.getItem("randomizerEdgeLabelMin") !== null
144+
? localStorage.getItem("randomizerEdgeLabelMin")!
145+
: "",
146+
edgeLabelMax:
147+
localStorage.getItem("randomizerEdgeLabelMax") !== null
148+
? localStorage.getItem("randomizerEdgeLabelMax")!
149+
: "",
150+
});
151+
81152
return (
82153
<>
83154
<div
84155
className={
85156
settings.darkMode
86-
? "dark bg-ovr text-text absolute w-full overflow-scroll"
87-
: "light bg-ovr text-text absolute w-full overflow-scroll"
157+
? `dark bg-ovr text-text absolute w-full overflow-scroll
158+
no-scrollbar`
159+
: `light bg-ovr text-text absolute w-full overflow-scroll
160+
no-scrollbar`
88161
}
89162
>
90163
<div
@@ -99,6 +172,13 @@ function App() {
99172
rounded-lg bg-block left-0 top-8 w-100 invisible
100173
group-hover:visible max-h-28 no-scrollbar overflow-scroll"
101174
>
175+
<p>5 June 2025</p>
176+
<ul className="list-disc list-inside">
177+
<li>Improve annotation experience</li>
178+
<li>Add randomizer config</li>
179+
<li>Add "Init" system</li>
180+
</ul>
181+
<hr className="border-dashed border-border" />
102182
<p>24 Feb 2025</p>
103183
<ul className="list-disc list-inside">
104184
<li>Use SVG icons instead</li>
@@ -221,6 +301,31 @@ function App() {
221301
</a>
222302
</div>
223303

304+
{init ? (
305+
<InitScreen
306+
settings={settings}
307+
setInit={setInit}
308+
testCaseNumber={testCaseNumber}
309+
setTestCaseNumber={setTestCaseNumber}
310+
setTestCases={setTestCases}
311+
setTabs={setTabs}
312+
setCurrentId={setCurrentId}
313+
/>
314+
) : (
315+
<></>
316+
)}
317+
318+
{randomizer ? (
319+
<RandomizerScreen
320+
settings={settings}
321+
setRandomizer={setRandomizer}
322+
randomizerConfig={randomizerConfig}
323+
setRandomizerConfig={setRandomizerConfig}
324+
/>
325+
) : (
326+
<></>
327+
)}
328+
224329
<InputTabs
225330
settings={settings}
226331
tabs={tabs}
@@ -235,6 +340,9 @@ function App() {
235340
setCurrentId={setCurrentId}
236341
directed={directed}
237342
setDirected={setDirected}
343+
setInit={setInit}
344+
setRandomizer={setRandomizer}
345+
randomizerConfig={randomizerConfig}
238346
/>
239347

240348
<div className="relative z-0">

‎src/components/AppearanceSettings.tsx‎

Lines changed: 110 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,20 @@ export function AppearanceSettings({ settings, setSettings }: Props) {
2929
setSettings={setSettings}
3030
/>
3131

32+
<SettingsToggleSection
33+
title={
34+
settings.language == "en"
35+
? "Testcase Bounding Boxes"
36+
: "测试用例边框"
37+
}
38+
leftLabel={settings.language == "en" ? "Hide" : "隐藏"}
39+
rightLabel={settings.language == "en" ? "Show" : "展示"}
40+
toggleId={"settingsBoundingBoxes"}
41+
settingsName={"testCaseBoundingBoxes"}
42+
settings={settings}
43+
setSettings={setSettings}
44+
/>
45+
3246
<hr className="border-dashed border-border" />
3347

3448
<h4 className="font-semibold">
@@ -151,7 +165,9 @@ export function AppearanceSettings({ settings, setSettings }: Props) {
151165
/>
152166

153167
<h4 className="font-semibold">
154-
{settings.language == "en" ? "Edge Label Separation" : "边和标签的距离"}
168+
{settings.language == "en"
169+
? "Edge Label Separation"
170+
: "边和标签的距离"}
155171
</h4>
156172
<input
157173
type="range"
@@ -182,6 +198,99 @@ export function AppearanceSettings({ settings, setSettings }: Props) {
182198
}}
183199
/>
184200

201+
<br />
202+
<hr className="border-dashed border-border" />
203+
204+
<h4 className="font-semibold">
205+
{settings.language == "en" ? "Pen Thickness" : "画笔粗细"}
206+
</h4>
207+
<input
208+
type="range"
209+
min={0}
210+
max={45}
211+
step={3}
212+
value={settings.penThickness - 1}
213+
className="range appearance-none outline-none bg-slider h-1 w-5/6
214+
self-center rounded-full cursor-ew-resize
215+
[&::-webkit-slider-thumb]:appearance-none
216+
[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
217+
[&::-webkit-slider-thumb]:border-none
218+
[&::-webkit-slider-thumb]:bg-slider-thumb-canvas
219+
[&::-webkit-slider-thumb]:rounded-full
220+
[&::-moz-range-thumb]:bg-slider-thumb-canvas
221+
[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4
222+
[&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full"
223+
onChange={(e) => {
224+
const newPenThickness = 1 + Number.parseInt(e.target.value);
225+
setSettings({
226+
...settings,
227+
penThickness: newPenThickness,
228+
});
229+
localStorage.setItem("penThickness", newPenThickness.toString());
230+
}}
231+
/>
232+
233+
<h4 className="font-semibold">
234+
{settings.language == "en" ? "Pen Transparency" : "画笔透明度"}
235+
</h4>
236+
<input
237+
type="range"
238+
min={0}
239+
max={90}
240+
step={6}
241+
value={settings.penTransparency}
242+
className="range appearance-none outline-none bg-slider h-1 w-5/6
243+
self-center rounded-full cursor-ew-resize
244+
[&::-webkit-slider-thumb]:appearance-none
245+
[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
246+
[&::-webkit-slider-thumb]:border-none
247+
[&::-webkit-slider-thumb]:bg-slider-thumb-canvas
248+
[&::-webkit-slider-thumb]:rounded-full
249+
[&::-moz-range-thumb]:bg-slider-thumb-canvas
250+
[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4
251+
[&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full"
252+
onChange={(e) => {
253+
const newPenTransparency = Number.parseInt(e.target.value);
254+
setSettings({
255+
...settings,
256+
penTransparency: newPenTransparency,
257+
});
258+
localStorage.setItem(
259+
"penTransparency",
260+
newPenTransparency.toString(),
261+
);
262+
}}
263+
/>
264+
265+
<h4 className="font-semibold">
266+
{settings.language == "en" ? "Eraser Radius" : "橡皮擦半径"}
267+
</h4>
268+
<input
269+
type="range"
270+
min={0}
271+
max={90}
272+
step={6}
273+
value={settings.eraserRadius - 10}
274+
className="range appearance-none outline-none bg-slider h-1 w-5/6
275+
self-center rounded-full cursor-ew-resize
276+
[&::-webkit-slider-thumb]:appearance-none
277+
[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
278+
[&::-webkit-slider-thumb]:border-none
279+
[&::-webkit-slider-thumb]:bg-slider-thumb-canvas
280+
[&::-webkit-slider-thumb]:rounded-full
281+
[&::-moz-range-thumb]:bg-slider-thumb-canvas
282+
[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4
283+
[&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full"
284+
onChange={(e) => {
285+
const newEraserRadius = 10 + Number.parseInt(e.target.value);
286+
setSettings({
287+
...settings,
288+
eraserRadius: newEraserRadius,
289+
});
290+
localStorage.setItem("eraserRadius", newEraserRadius.toString());
291+
}}
292+
/>
293+
185294
<br />
186295
</div>
187296
</>

0 commit comments

Comments
 (0)