Skip to content

Commit 8b4e49d

Browse files
anserwaseemanserwaseem
committed
change names of boxes and lines to states and transitions
1 parent 906868a commit 8b4e49d

File tree

10 files changed

+91
-91
lines changed

10 files changed

+91
-91
lines changed

‎src/components/Editor.tsx‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -91,15 +91,15 @@ const Editor = () => {
9191
},
9292
},
9393
];
94-
const [boxes, setBoxes] = useState<DraggableStateModel[]>([]);
95-
const [lines, setLines] = useState<TransitionModel[]>([]);
94+
const [states, setStates] = useState<DraggableStateModel[]>([]);
95+
const [transitions, setTransitions] = useState<TransitionModel[]>([]);
9696

9797
const [selected, setSelected] = useState<SelectedElementType | null>(null);
9898
const [actionState, setActionState] = useState("Normal");
9999
const [size, setSize] = useState<PlaygroundSize>({ width: 0, height: 0 });
100100

101101
const handleAddRow = (row: RowModel) => {
102-
if (boxes.length >= MaxNumberOfStates) {
102+
if (states.length >= MaxNumberOfStates) {
103103
alert(`Maximum ${MaxNumberOfStates} states allowed`);
104104
return;
105105
}
@@ -116,7 +116,7 @@ const Editor = () => {
116116
y: Math.floor(Math.random() * size.height),
117117
shape: "state",
118118
};
119-
setBoxes((prev) => [...prev, newBox]);
119+
setStates((prev) => [...prev, newBox]);
120120
};
121121

122122
const handleDeleteRow = (row: RowModel) => {
@@ -162,11 +162,11 @@ const Editor = () => {
162162
})
163163
);
164164

165-
setLines((prev) =>
165+
setTransitions((prev) =>
166166
prev.filter((l) => l.props.start !== row.node && l.props.end !== row.node)
167167
);
168168

169-
setBoxes((prev) => prev.filter((b) => b.id !== row.node));
169+
setStates((prev) => prev.filter((b) => b.id !== row.node));
170170
};
171171

172172
const isRowEmpty = (row: RowModel) => {
@@ -303,7 +303,7 @@ const Editor = () => {
303303
});
304304

305305
if (!errorWhileSavingRow) {
306-
setBoxes((prev) =>
306+
setStates((prev) =>
307307
prev.map((b) => (b.id === oldRow.node ? { ...b, id: row.node } : b))
308308
);
309309

@@ -315,7 +315,7 @@ const Editor = () => {
315315
row[key === "^" ? "nul" : key] === oldRow[key === "^" ? "nul" : key]
316316
)
317317
) {
318-
let updatedtransitions = lines.map((l) =>
318+
let updatedtransitions = transitions.map((l) =>
319319
l.props.start === oldRow.node && l.props.end === oldRow.node
320320
? {
321321
...l,
@@ -344,7 +344,7 @@ const Editor = () => {
344344
: l
345345
);
346346
console.log("updatedtransitions", updatedtransitions);
347-
setLines(updatedtransitions);
347+
setTransitions(updatedtransitions);
348348
} else {
349349
// if new transitions are added
350350

@@ -414,7 +414,7 @@ const Editor = () => {
414414

415415
removedTransitionValues.forEach((v) => {
416416
console.log("removedTransitionValues key, v: ", key, v);
417-
const removedTransition = lines.find(
417+
const removedTransition = transitions.find(
418418
(l) => l.props.start === row.node && l.props.end === v
419419
);
420420

@@ -435,11 +435,12 @@ const Editor = () => {
435435
console.log("removedTransitions", removedTransitions);
436436
});
437437

438-
setLines((prev) => {
438+
setTransitions((prev) => {
439439
// update removedTransitions's labels && value if it's already present
440440
const updatedRemovedTransitions = prev.map((l) =>
441441
removedTransitions.find(
442-
(t) => t.props.start === l.props.start && t.props.end === l.props.end
442+
(t) =>
443+
t.props.start === l.props.start && t.props.end === l.props.end
443444
)
444445
? {
445446
...l,
@@ -456,12 +457,11 @@ const Editor = () => {
456457
}
457458
/>
458459
),
459-
value:
460-
removedTransitions.find(
461-
(t) =>
462-
t.props.start === l.props.start &&
463-
t.props.end === l.props.end
464-
)?.props.value,
460+
value: removedTransitions.find(
461+
(t) =>
462+
t.props.start === l.props.start &&
463+
t.props.end === l.props.end
464+
)?.props.value,
465465
},
466466
}
467467
: l
@@ -579,18 +579,18 @@ const Editor = () => {
579579
};
580580

581581
const checkExsitence = (id: string) => {
582-
return [...boxes].map((b) => b.id).includes(id);
582+
return [...states].map((b) => b.id).includes(id);
583583
};
584584

585585
const handleDropDynamic = (e: any) => {
586586
console.log("handleDropDynamic", e);
587-
if (boxes.length >= MaxNumberOfStates) {
587+
if (states.length >= MaxNumberOfStates) {
588588
alert(`Maximum ${MaxNumberOfStates} states allowed.`);
589589
return;
590590
}
591591

592592
let { x, y } = e.target.getBoundingClientRect();
593-
const stateName = promptNewStateName(boxes, `q${gridRowId}`);
593+
const stateName = promptNewStateName(states, `q${gridRowId}`);
594594
if (stateName) {
595595
let newState = new DraggableStateModel(
596596
stateName,
@@ -603,9 +603,9 @@ const Editor = () => {
603603
y: e.clientY - y,
604604
shape: "state",
605605
};
606-
setBoxes([...boxes, newBox]);
606+
setStates([...states, newBox]);
607607
}
608-
console.log("boxes", boxes);
608+
console.log("states", states);
609609

610610
setGridData((prev) => [
611611
...prev,
@@ -624,10 +624,10 @@ const Editor = () => {
624624
};
625625

626626
const playgroundProps: PlaygroundProps = {
627-
boxes,
628-
setBoxes,
629-
lines,
630-
setLines,
627+
states,
628+
setStates,
629+
transitions,
630+
setTransitions,
631631
selected,
632632
setSelected,
633633
actionState,

‎src/features/Playground.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ const Playground = (props: PlaygroundProps) => {
2020
}, [width, height]);
2121

2222
const topBarprops: TopBarProps = {
23-
boxes: props.boxes,
24-
setBoxes: props.setBoxes,
25-
lines: props.lines,
26-
setLines: props.setLines,
23+
states: props.states,
24+
setStates: props.setStates,
25+
transitions: props.transitions,
26+
setTransitions: props.setTransitions,
2727
selected: props.selected,
2828
setSelected: props.setSelected,
2929
handleSelect: props.handleSelect,
@@ -37,10 +37,10 @@ const Playground = (props: PlaygroundProps) => {
3737
};
3838

3939
const boxProps: BoxProps = {
40-
boxes: props.boxes,
41-
setBoxes: props.setBoxes,
42-
lines: props.lines,
43-
setLines: props.setLines,
40+
states: props.states,
41+
setStates: props.setStates,
42+
transitions: props.transitions,
43+
setTransitions: props.setTransitions,
4444
selected: props.selected,
4545
handleSelect: props.handleSelect,
4646
actionState: props.actionState,
@@ -85,7 +85,7 @@ const Playground = (props: PlaygroundProps) => {
8585
>
8686
<TopBar {...topBarprops} />
8787

88-
{props.boxes.map((box) => (
88+
{props.states.map((box) => (
8989
<Box
9090
{...boxProps}
9191
key={box.id}
@@ -96,20 +96,20 @@ const Playground = (props: PlaygroundProps) => {
9696
))}
9797
</div>
9898
{/* xarrow connections*/}
99-
{props.lines.map((line, i) => (
99+
{props.transitions.map((line, i) => (
100100
<Xarrow
101101
key={line.props.start + "-" + line.props.end + i}
102102
line={line}
103103
selected={props.selected}
104104
setSelected={props.setSelected}
105105
/>
106106
))}
107-
{/* props.boxes menu that may be opened */}
108-
{props.lines.map((line, i) =>
107+
{/* props.states menu that may be opened */}
108+
{props.transitions.map((line, i) =>
109109
line.menuWindowOpened ? (
110110
<MenuWindow
111111
key={line.props.start + "-" + line.props.end + i}
112-
setLines={props.setLines}
112+
setTransitions={props.setTransitions}
113113
line={line}
114114
/>
115115
) : null

‎src/features/components/playground/Box.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@ export const Box = (props: any) => {
2020

2121
// restrict adding of new transition between states where a transition already exists
2222
if (
23-
!props.lines.find(
23+
!props.transitions.find(
2424
(line: TransitionModel) =>
2525
line.props.start === props.selected?.id &&
2626
line.props.end === props.box.id
2727
)
2828
) {
29-
console.log("Box handleClick Add Transition setLines", props);
29+
console.log("Box handleClick Add Transition setTransitions", props);
3030
const isSelfTransition = props.selected?.id === props.box.id;
31-
props.setLines((lines: TransitionModel[]) => [
32-
...lines,
31+
props.setTransitions((transitions: TransitionModel[]) => [
32+
...transitions,
3333
{
3434
props: {
3535
labels: "",
@@ -50,8 +50,8 @@ export const Box = (props: any) => {
5050
}
5151
} else if (props.actionState === "Remove Transitions") {
5252
console.log("Box handleClick Remove Transitions", props);
53-
props.setLines((lines: TransitionModel[]) =>
54-
lines.filter(
53+
props.setTransitions((transitions: TransitionModel[]) =>
54+
transitions.filter(
5555
(line) =>
5656
!(
5757
line.props.start === props.selected?.id &&
@@ -70,13 +70,13 @@ export const Box = (props: any) => {
7070
} else if (
7171
(props.actionState === "Add Transition" &&
7272
// props.sidePos !== "right" &&
73-
props.lines.filter(
73+
props.transitions.filter(
7474
(line: TransitionModel) =>
7575
line.props.start === props.selected?.id &&
7676
line.props.end === props.box.id
7777
).length === 0) ||
7878
(props.actionState === "Remove Transitions" &&
79-
props.lines.filter(
79+
props.transitions.filter(
8080
(line: TransitionModel) =>
8181
line.props.start === props.selected?.id &&
8282
line.props.end === props.box.id
@@ -129,7 +129,7 @@ export const Box = (props: any) => {
129129
</div>
130130
</Draggable>
131131
{/* {type === "middleBox" && menuWindowOpened ?
132-
<MenuWindow setBoxes={props.setBoxes} box={props.box}/> : null
132+
<MenuWindow setStates={props.setStates} box={props.box}/> : null
133133
} */}
134134
</React.Fragment>
135135
);

‎src/features/components/playground/MenuWindow.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Draggable from "react-draggable";
33
import { TransitionModel } from "../../../models";
44
import "./css/MenuWindow.css";
55

6-
export default ({ setLines, line: { props: lineProp } }: any) => {
6+
export default ({ setTransitions, line: { props: lineProp } }: any) => {
77
const [pos, setPos] = useState({ width: 200, height: 200 });
88

99
// const d = {
@@ -45,8 +45,8 @@ export default ({ setLines, line: { props: lineProp } }: any) => {
4545
// console.log(typeof state);
4646

4747
const handleClose = () =>
48-
setLines((lines: TransitionModel[]) =>
49-
lines.map((line) =>
48+
setTransitions((transitions: TransitionModel[]) =>
49+
transitions.map((line) =>
5050
line.props.start === lineProp.start && line.props.end === lineProp.end
5151
? {
5252
...line,

0 commit comments

Comments
 (0)