Skip to content

Commit e8fb599

Browse files
anserwaseemanserwaseem
committed
changed names of boxes and lines across project
1 parent 8b4e49d commit e8fb599

File tree

13 files changed

+147
-120
lines changed

13 files changed

+147
-120
lines changed

‎src/assets/BoxStyle.ts‎ renamed to ‎src/assets/StateStyle.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const BoxStyle = {
1+
export const StateStyle = {
22
position: "absolute",
33
background: "white",
44
border: "1px #999 solid",

‎src/assets/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { BoxStyle } from "./BoxStyle";
1+
import { StateStyle } from "./StateStyle";
22
import { CanvasStyle } from "./CanvasStyle";
33
import { AnchorsTypes } from "./AnchorsTypes";
44

5-
export { BoxStyle, CanvasStyle, AnchorsTypes };
5+
export { StateStyle, CanvasStyle, AnchorsTypes };

‎src/components/Editor.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,13 @@ const Editor = () => {
110110
size.width,
111111
size.height
112112
);
113-
let newBox = {
113+
let newstate = {
114114
id: row.node,
115115
x: Math.floor(Math.random() * size.width),
116116
y: Math.floor(Math.random() * size.height),
117117
shape: "state",
118118
};
119-
setStates((prev) => [...prev, newBox]);
119+
setStates((prev) => [...prev, newstate]);
120120
};
121121

122122
const handleDeleteRow = (row: RowModel) => {
@@ -392,7 +392,7 @@ const Editor = () => {
392392
transitionAlreadyExists.props.value + key;
393393
} else {
394394
const isSelfTransition = v === row.node;
395-
const newLine: TransitionModel = {
395+
const newTransition: TransitionModel = {
396396
props: {
397397
start: row.node,
398398
end: v,
@@ -407,7 +407,7 @@ const Editor = () => {
407407
},
408408
menuWindowOpened: false,
409409
};
410-
addedTransitions.push(newLine);
410+
addedTransitions.push(newTransition);
411411
}
412412
});
413413
console.log("addedTransitions", addedTransitions);
@@ -568,13 +568,13 @@ const Editor = () => {
568568
};
569569

570570
const handleSelect = (e: any) => {
571-
console.log("Playground handleBoxSelect e", e);
571+
console.log("Playground handleStateSelect e", e);
572572
if (e === null) {
573573
setSelected(null);
574574
setActionState("Normal");
575575
} else {
576-
console.log("Playground handleBoxSelect id", e.target.id);
577-
setSelected({ id: e.target.id, type: "box" });
576+
console.log("Playground handleStateSelect id", e.target.id);
577+
setSelected({ id: e.target.id, type: "state" });
578578
}
579579
};
580580

@@ -597,13 +597,13 @@ const Editor = () => {
597597
e.clientX - x,
598598
e.clientY - y
599599
);
600-
let newBox = {
600+
let newstate = {
601601
id: stateName,
602602
x: e.clientX - x,
603603
y: e.clientY - y,
604604
shape: "state",
605605
};
606-
setStates([...states, newBox]);
606+
setStates([...states, newstate]);
607607
}
608608
console.log("states", states);
609609

‎src/consts/TopBarActions.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
export const TopBarActions = {
2-
box: ["Edit Name", "Add Transition", "Remove Transitions", "Delete", "Toggle Initial State", "Toggle Final State"],
3-
arrow: ["Edit Properties", "Remove Transition", "Edit Value"],
2+
state: [
3+
"Edit Name",
4+
"Add Transition",
5+
"Remove Transitions",
6+
"Delete",
7+
"Toggle Initial State",
8+
"Toggle Final State",
9+
],
10+
transition: ["Edit Properties", "Remove Transition", "Edit Value"],
411
};

‎src/features/Playground.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import "./css/Playground.css";
22
import { Xwrapper } from "react-xarrows";
33
import MenuWindow from "./components/playground/MenuWindow";
4-
import { BoxProps } from "./components/playground/props/BoxProps";
4+
import { StateProps } from "./components/playground/props/StateProps";
55
import { TopBarProps } from "./components/playground/props/TopBarProps";
66
import TopBar from "./components/playground/TopBar";
77
import { PlaygroundProps } from "./props/PlaygroundProps";
8-
import Box from "./components/playground/Box";
8+
import State from "./components/playground/State";
99
import Xarrow from "./components/playground/Xarrow";
1010
import useElementSize from "./hooks/useElementSize";
1111
import { useEffect } from "react";
@@ -36,7 +36,7 @@ const Playground = (props: PlaygroundProps) => {
3636
toggleFinalState: props.toggleFinalState,
3737
};
3838

39-
const boxProps: BoxProps = {
39+
const stateProps: StateProps = {
4040
states: props.states,
4141
setStates: props.setStates,
4242
transitions: props.transitions,
@@ -77,40 +77,40 @@ const Playground = (props: PlaygroundProps) => {
7777
</div>
7878
</div>
7979
<div
80-
id="boxesContainer"
81-
className="boxesContainer"
80+
id="statesContainer"
81+
className="statesContainer"
8282
onDragOver={(e) => e.preventDefault()}
8383
onDrop={props.handleDropDynamic}
8484
ref={boxRef}
8585
>
8686
<TopBar {...topBarprops} />
8787

88-
{props.states.map((box) => (
89-
<Box
90-
{...boxProps}
91-
key={box.id}
92-
box={box}
88+
{props.states.map((state) => (
89+
<State
90+
{...stateProps}
91+
key={state.id}
92+
state={state}
9393
position="absolute"
9494
sidePos="middle"
9595
/>
9696
))}
9797
</div>
9898
{/* xarrow connections*/}
99-
{props.transitions.map((line, i) => (
99+
{props.transitions.map((transition, i) => (
100100
<Xarrow
101-
key={line.props.start + "-" + line.props.end + i}
102-
line={line}
101+
key={transition.props.start + "-" + transition.props.end + i}
102+
transition={transition}
103103
selected={props.selected}
104104
setSelected={props.setSelected}
105105
/>
106106
))}
107107
{/* props.states menu that may be opened */}
108-
{props.transitions.map((line, i) =>
109-
line.menuWindowOpened ? (
108+
{props.transitions.map((transition, i) =>
109+
transition.menuWindowOpened ? (
110110
<MenuWindow
111-
key={line.props.start + "-" + line.props.end + i}
111+
key={transition.props.start + "-" + transition.props.end + i}
112112
setTransitions={props.setTransitions}
113-
line={line}
113+
transition={transition}
114114
/>
115115
) : null
116116
)}

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

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

6-
export default ({ setTransitions, line: { props: lineProp } }: any) => {
6+
export default ({
7+
setTransitions,
8+
transition: { props: transitionProp },
9+
}: any) => {
710
const [pos, setPos] = useState({ width: 200, height: 200 });
811

912
// const d = {
@@ -46,20 +49,23 @@ export default ({ setTransitions, line: { props: lineProp } }: any) => {
4649

4750
const handleClose = () =>
4851
setTransitions((transitions: TransitionModel[]) =>
49-
transitions.map((line) =>
50-
line.props.start === lineProp.start && line.props.end === lineProp.end
52+
transitions.map((transition) =>
53+
transition.props.start === transitionProp.start &&
54+
transition.props.end === transitionProp.end
5155
? {
52-
...line,
56+
...transition,
5357
menuWindowOpened: false,
5458
}
55-
: line
59+
: transition
5660
)
5761
);
5862

5963
return (
6064
<Draggable>
6165
<div className="menuWindowContainer">
62-
<div className={"header"}>{`${lineProp.start}->${lineProp.end}`}</div>
66+
<div
67+
className={"header"}
68+
>{`${transitionProp.start}->${transitionProp.end}`}</div>
6369
<hr style={{ width: "80%" }} />
6470
{/*<MaterialIcon*/}
6571
{/* size={30}*/}

‎src/features/components/playground/Box.tsx‎ renamed to ‎src/features/components/playground/State.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import Draggable from "react-draggable";
44
import { useXarrow } from "react-xarrows";
55
import { RowModel, TransitionModel } from "../../../models";
66

7-
export const Box = (props: any) => {
7+
export const State = (props: any) => {
88
console.log("re rendering Box: props", props);
99

1010
const updateXarrow = useXarrow();
1111
const handleClick = (e: any) => {
1212
console.log("Box handleClick", props);
13-
e.stopPropagation(); //so only the click event on the box will fire on not on the container itself
13+
e.stopPropagation(); //so only the click event on the state will fire on not on the container itself
1414

1515
if (props.actionState === "Normal") {
1616
console.log("Box handleClick Normal", props);
@@ -21,21 +21,21 @@ export const Box = (props: any) => {
2121
// restrict adding of new transition between states where a transition already exists
2222
if (
2323
!props.transitions.find(
24-
(line: TransitionModel) =>
25-
line.props.start === props.selected?.id &&
26-
line.props.end === props.box.id
24+
(transition: TransitionModel) =>
25+
transition.props.start === props.selected?.id &&
26+
transition.props.end === props.state.id
2727
)
2828
) {
2929
console.log("Box handleClick Add Transition setTransitions", props);
30-
const isSelfTransition = props.selected?.id === props.box.id;
30+
const isSelfTransition = props.selected?.id === props.state.id;
3131
props.setTransitions((transitions: TransitionModel[]) => [
3232
...transitions,
3333
{
3434
props: {
3535
labels: "",
3636
value: "",
3737
start: props.selected?.id,
38-
end: props.box.id,
38+
end: props.state.id,
3939
// dashness: { animation: 10 },
4040
animateDrawing: true,
4141
_extendSVGcanvas: isSelfTransition ? 25 : 0,
@@ -52,10 +52,10 @@ export const Box = (props: any) => {
5252
console.log("Box handleClick Remove Transitions", props);
5353
props.setTransitions((transitions: TransitionModel[]) =>
5454
transitions.filter(
55-
(line) =>
55+
(transition) =>
5656
!(
57-
line.props.start === props.selected?.id &&
58-
line.props.end === props.box.id
57+
transition.props.start === props.selected?.id &&
58+
transition.props.end === props.state.id
5959
)
6060
)
6161
);
@@ -64,22 +64,22 @@ export const Box = (props: any) => {
6464

6565
console.log("changing background color now", props.actionState);
6666
let background = null;
67-
if (props.selected && props.selected?.id === props.box.id) {
67+
if (props.selected && props.selected?.id === props.state.id) {
6868
// background = "lightblue";
6969
background = "rgb(200, 200, 200)";
7070
} else if (
7171
(props.actionState === "Add Transition" &&
7272
// props.sidePos !== "right" &&
7373
props.transitions.filter(
74-
(line: TransitionModel) =>
75-
line.props.start === props.selected?.id &&
76-
line.props.end === props.box.id
74+
(transition: TransitionModel) =>
75+
transition.props.start === props.selected?.id &&
76+
transition.props.end === props.state.id
7777
).length === 0) ||
7878
(props.actionState === "Remove Transitions" &&
7979
props.transitions.filter(
80-
(line: TransitionModel) =>
81-
line.props.start === props.selected?.id &&
82-
line.props.end === props.box.id
80+
(transition: TransitionModel) =>
81+
transition.props.start === props.selected?.id &&
82+
transition.props.end === props.state.id
8383
).length > 0)
8484
) {
8585
background = "LemonChiffon";
@@ -88,19 +88,19 @@ export const Box = (props: any) => {
8888
else if (
8989
props.gridData.find(
9090
(row: RowModel) =>
91-
row.node === props.box.id && row.isInitial && row.isFinal
91+
row.node === props.state.id && row.isInitial && row.isFinal
9292
)
9393
) {
9494
background = "#4fc3f7"; // mui theme.palette.info.light
9595
} else if (
9696
props.gridData.find(
97-
(row: RowModel) => row.node === props.box.id && row.isInitial
97+
(row: RowModel) => row.node === props.state.id && row.isInitial
9898
)
9999
) {
100100
background = "#ffb74d"; // mui theme.palette.warning.light
101101
} else if (
102102
props.gridData.find(
103-
(row: RowModel) => row.node === props.box.id && row.isFinal
103+
(row: RowModel) => row.node === props.state.id && row.isFinal
104104
)
105105
) {
106106
background = "#81c784"; // mui theme.palette.success.light;
@@ -114,25 +114,25 @@ export const Box = (props: any) => {
114114
onDrag={updateXarrow}
115115
>
116116
<div
117-
ref={props.box.reference}
118-
className={`${props.box.shape} ${props.position} hoverMarker`}
117+
ref={props.state.reference}
118+
className={`${props.state.shape} ${props.position} hoverMarker`}
119119
style={{
120-
left: props.box.x,
121-
top: props.box.y,
120+
left: props.state.x,
121+
top: props.state.y,
122122
background: background ?? undefined,
123123
// border: "black solid 2px",
124124
}}
125125
onClick={handleClick}
126-
id={props.box.id}
126+
id={props.state.id}
127127
>
128-
{props.box.name ? props.box.name : props.box.id}
128+
{props.state.name ? props.state.name : props.state.id}
129129
</div>
130130
</Draggable>
131131
{/* {type === "middleBox" && menuWindowOpened ?
132-
<MenuWindow setStates={props.setStates} box={props.box}/> : null
132+
<MenuWindow setStates={props.setStates} state={props.state}/> : null
133133
} */}
134134
</React.Fragment>
135135
);
136136
};
137137

138-
export default Box;
138+
export default State;

0 commit comments

Comments
 (0)