Skip to content

Commit c7aefe0

Browse files
kirjavascriptkirjavascript
committed
refactored old modals
1 parent 803f5c8 commit c7aefe0

File tree

6 files changed

+224
-272
lines changed

6 files changed

+224
-272
lines changed

‎app/components/mappings/new-mapping.js‎

Lines changed: 121 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { mappingState } from './state';
66
import { environment } from '#store/environment';
77
import { observer } from 'mobx-react';
88
import { Mapping } from './mapping';
9-
import { Spring } from 'react-spring/renderprops';
10-
import { Checkbox, Button } from '#ui';
9+
import { Checkbox, Button, Modal } from '#ui';
1110

1211
const baseConfig = {
1312
hflip: false,
@@ -20,7 +19,9 @@ const baseConfig = {
2019

2120
const BottomMenu = observer(() => (
2221
<div className="row">
23-
<Button color="magenta" onClick={mappingState.toggleNewMapping}>close</Button>
22+
<Button color="magenta" onClick={mappingState.toggleNewMapping}>
23+
close
24+
</Button>
2425
<div className="autodismiss">
2526
<span onClick={mappingState.toggleAutodismiss}>autodismiss</span>
2627
<Checkbox
@@ -31,137 +32,132 @@ const BottomMenu = observer(() => (
3132
</div>
3233
));
3334

34-
export const NewMapping = observer(class NewMapping extends Component {
35-
onRef = (node) => {
36-
this.node = node;
37-
};
35+
export const NewMapping = observer(
36+
class NewMapping extends Component {
37+
onRef = (node) => {
38+
this.node = node;
39+
};
3840

39-
pos = [undefined, undefined];
40-
mapDefz = [];
41+
pos = [undefined, undefined];
42+
mapDefz = [];
4143

42-
dragPlacementFactory = (index) => {
43-
return (node) => {
44-
if (node) {
45-
select(node).call(
46-
drag()
47-
.filter(() => true)
48-
.on('start', () => {
49-
const { newMapping, scale } = mappingState;
50-
const [x, y] = (this.pos = mouse(this.node));
51-
const [pieceX, pieceY] = mouse(node);
44+
dragPlacementFactory = (index) => {
45+
return (node) => {
46+
if (node) {
47+
select(node).call(
48+
drag()
49+
.filter(() => true)
50+
.on('start', () => {
51+
const { newMapping, scale } = mappingState;
52+
const [x, y] = (this.pos = mouse(this.node));
53+
const [pieceX, pieceY] = mouse(node);
5254

53-
newMapping.piece = Object.assign(
54-
{},
55-
this.mapDefz[index],
56-
{
57-
top: (y / scale - pieceY / 4) | 0,
58-
left: (x / scale - pieceX / 4) | 0,
59-
},
60-
);
61-
})
62-
.on('drag', () => {
63-
const {
64-
newMapping: { piece },
65-
scale,
66-
} = mappingState;
67-
const [x, y] = mouse(this.node);
68-
const [dx, dy] = [x - this.pos[0], y - this.pos[1]];
69-
this.pos = [x, y];
55+
newMapping.piece = Object.assign(
56+
{},
57+
this.mapDefz[index],
58+
{
59+
top: (y / scale - pieceY / 4) | 0,
60+
left: (x / scale - pieceX / 4) | 0,
61+
},
62+
);
63+
})
64+
.on('drag', () => {
65+
const {
66+
newMapping: { piece },
67+
scale,
68+
} = mappingState;
69+
const [x, y] = mouse(this.node);
70+
const [dx, dy] = [
71+
x - this.pos[0],
72+
y - this.pos[1],
73+
];
74+
this.pos = [x, y];
7075

71-
Object.assign(piece, {
72-
top: piece.top + dy / scale,
73-
left: piece.left + dx / scale,
74-
});
75-
})
76-
.on('end', () => {
77-
mappingState.placeNewMapping();
78-
}),
79-
);
80-
}
76+
Object.assign(piece, {
77+
top: piece.top + dy / scale,
78+
left: piece.left + dx / scale,
79+
});
80+
})
81+
.on('end', () => {
82+
mappingState.placeNewMapping();
83+
}),
84+
);
85+
}
86+
};
8187
};
82-
};
8388

84-
getLeft = () => {
85-
const {
86-
newMapping: { active, piece },
87-
} = mappingState;
88-
if ((active && piece) || !active) return -325;
89-
else if (active) return 15;
90-
};
89+
getLeft = () => {
90+
const {
91+
newMapping: { active, piece },
92+
} = mappingState;
93+
if ((active && piece) || !active) return -325;
94+
else if (active) return 15;
95+
};
9196

92-
getOpacity = () => {
93-
const {
94-
newMapping: { active },
95-
} = mappingState;
96-
return active ? 1 : 0;
97-
};
97+
getOpacity = () => {
98+
const {
99+
newMapping: { active },
100+
} = mappingState;
101+
return active ? 1 : 0;
102+
};
98103

99-
render() {
100-
const {
101-
tiles,
102-
config: { currentTile },
103-
} = environment;
104-
const {
105-
scale,
106-
newMapping: { active, piece },
107-
} = mappingState;
104+
render() {
105+
const {
106+
tiles,
107+
config: { currentTile },
108+
} = environment;
109+
const {
110+
scale,
111+
newMapping: { active, piece },
112+
} = mappingState;
108113

109-
this.mapDefz = Array.from({ length: 0x10 }, (_, i) => ({
110-
art: currentTile,
111-
width: (i % 4) + 1,
112-
height: 0 | (i / 4 + 1),
113-
...baseConfig,
114-
}));
114+
this.mapDefz = Array.from({ length: 0x10 }, (_, i) => ({
115+
art: currentTile,
116+
width: (i % 4) + 1,
117+
height: 0 | (i / 4 + 1),
118+
...baseConfig,
119+
}));
115120

116-
return (
117-
<div ref={this.onRef}>
118-
{piece && (
119-
<div className="new-floating-piece">
120-
<Mapping
121-
data={piece}
122-
scale={mappingState.scale}
123-
tileBuffer={tiles}
124-
/>
125-
</div>
126-
)}
127-
<Spring
128-
from={{
129-
left: this.getLeft(),
130-
opacity: this.getOpacity(),
131-
}}
132-
to={{
133-
left: this.getLeft(),
134-
opacity: this.getOpacity(),
135-
}}
136-
>
137-
{({ left, opacity }) => (
138-
<div className="new-mapping" style={{ left, opacity }}>
139-
{opacity > 0.01 &&
140-
chunk(this.mapDefz, 4).map((group, gIndex) => (
141-
<div key={gIndex} className="group">
142-
{group.map((def, lineIndex) => {
143-
const index =
144-
gIndex * 4 + lineIndex;
145-
const dragPlacement = this.dragPlacementFactory(
146-
index,
147-
);
148-
return (
149-
<Mapping
150-
key={index}
151-
wrapRef={dragPlacement}
152-
data={def}
153-
scale={4}
154-
tileBuffer={tiles}
155-
/>
156-
);
157-
})}
158-
</div>
159-
))}
160-
<BottomMenu />
121+
return (
122+
<div ref={this.onRef}>
123+
{piece && (
124+
<div className="new-floating-piece">
125+
<Mapping
126+
data={piece}
127+
scale={mappingState.scale}
128+
tileBuffer={tiles}
129+
/>
161130
</div>
162131
)}
163-
</Spring>
164-
</div>
165-
);
166-
}
167-
});
132+
<Modal
133+
spring={{
134+
left: this.getLeft(),
135+
opacity: this.getOpacity(),
136+
}}
137+
className="new-mapping"
138+
>
139+
{chunk(this.mapDefz, 4).map((group, gIndex) => (
140+
<div key={gIndex} className="group">
141+
{group.map((def, lineIndex) => {
142+
const index = gIndex * 4 + lineIndex;
143+
const dragPlacement =
144+
this.dragPlacementFactory(index);
145+
return (
146+
<Mapping
147+
key={index}
148+
wrapRef={dragPlacement}
149+
data={def}
150+
scale={4}
151+
tileBuffer={tiles}
152+
/>
153+
);
154+
})}
155+
</div>
156+
))}
157+
<BottomMenu />
158+
</Modal>
159+
</div>
160+
);
161+
}
162+
},
163+
);

0 commit comments

Comments
 (0)