Skip to content

Commit bc0e24a

Browse files
kirjavascriptkirjavascript
committed
unique modals
1 parent c7aefe0 commit bc0e24a

File tree

4 files changed

+103
-72
lines changed

4 files changed

+103
-72
lines changed

‎app/components/mappings/hud-palette.js‎

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,43 +4,45 @@ import { observer } from 'mobx-react';
44
import { mappingState } from './state';
55
import { Select, Input } from '#ui';
66

7-
export const PaletteHUD = observer(class PaletteHUD extends Component {
8-
9-
render() {
10-
const { palettes } = environment;
11-
const { drawIndexLeft, drawIndexRight, drawPalette } = mappingState;
12-
const palette = ['erase', ...palettes[drawPalette].slice(1)];
13-
return <div className="hud">
14-
<Select
15-
key={`left-${drawPalette}`}
16-
options={palette.map((color, i) => ({
17-
value: i,
18-
label: color,
19-
}))}
20-
label="left"
21-
store={mappingState}
22-
accessor="drawIndexLeft"
23-
color
24-
/>
25-
<Select
26-
key={`right-${drawPalette}`}
27-
options={palette.map((color, i) => ({
28-
value: i,
29-
label: color,
30-
}))}
31-
label="right"
32-
store={mappingState}
33-
accessor="drawIndexRight"
34-
color
35-
/>
36-
<Select
37-
options={[0, 1, 2, 3]}
38-
label="line"
39-
store={mappingState}
40-
accessor="drawPalette"
41-
flipScroll
42-
/>
43-
</div>;
44-
}
45-
46-
});
7+
export const PaletteHUD = observer(
8+
class PaletteHUD extends Component {
9+
render() {
10+
const { palettes } = environment;
11+
const { drawIndexLeft, drawIndexRight, drawPalette } = mappingState;
12+
const palette = ['erase', ...palettes[drawPalette].slice(1)];
13+
return (
14+
<div className="hud">
15+
<Select
16+
key={`left-${drawPalette}`}
17+
options={palette.map((color, i) => ({
18+
value: i,
19+
label: color,
20+
}))}
21+
label="left"
22+
store={mappingState}
23+
accessor="drawIndexLeft"
24+
color
25+
/>
26+
<Select
27+
key={`right-${drawPalette}`}
28+
options={palette.map((color, i) => ({
29+
value: i,
30+
label: color,
31+
}))}
32+
label="right"
33+
store={mappingState}
34+
accessor="drawIndexRight"
35+
color
36+
/>
37+
<Select
38+
options={[0, 1, 2, 3]}
39+
label="line"
40+
store={mappingState}
41+
accessor="drawPalette"
42+
flipScroll
43+
/>
44+
</div>
45+
);
46+
}
47+
},
48+
);

‎app/components/mappings/rotate.js‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import React, { useEffect, useRef, useState } from 'react';
22
import { environment } from '#store/environment';
33
import { observer } from 'mobx-react';
44
import { exportSprite } from '#formats/image';
5-
import rotSprite, { Pixels, addMarginToImageData, getRotateDiagonal } from '#util/rotsprite';
5+
import rotSprite, {
6+
Pixels,
7+
addMarginToImageData,
8+
getRotateDiagonal,
9+
} from '#util/rotsprite';
610
import { Input, Slider, Item, SelectBase, Button, Modal } from '#ui';
711
import { mappingState } from './state';
812

@@ -41,7 +45,7 @@ export const Rotate = observer(() => {
4145

4246
const rotated = rotSprite(
4347
new Pixels(diagonal, diagonal, data),
44-
(mappingState.rotateAngle * Math.PI) / 180,
48+
(mappingState.rotate.angle * Math.PI) / 180,
4549
).pixels;
4650

4751
const pixelData = new Uint8ClampedArray(data.length * 4);
@@ -63,45 +67,50 @@ export const Rotate = observer(() => {
6367
canvas.width = diagonal;
6468
canvas.height = diagonal;
6569
ctx.putImageData(rotatedData, 0, 0);
66-
}, [environment.currentSprite, mappingState.rotateAngle]);
70+
}, [environment.currentSprite, mappingState.rotate.angle]);
6771

6872
const assertInput = (num) => {
6973
const value = Math.max(0, Math.min(360, num));
7074
if (Number.isNaN(value)) return 0;
7175
return value;
7276
};
7377

78+
// mappingState.rotateShow
79+
7480
return (
7581
<>
7682
{String(!!value)}
7783
<SelectBase
78-
options={[...Array(2).keys()].map(d => String(d))}
84+
options={[...Array(2).keys()].map((d) => String(d))}
7985
value={value}
80-
onChange={e => setValue(e.value==='1')}
86+
onChange={(e) => setValue(e.value === '1')}
8187
/>
8288

83-
<Modal className="rotsprite" spring={({
84-
top: value ? -150 : 50,
85-
opacity: value? 1 : 0.5,
86-
})}>
87-
<Item>Rotate Sprite</Item>
88-
<canvas ref={canvasRef} />
89-
<Input
90-
store={mappingState}
91-
assert={assertInput}
92-
accessor="rotateAngle"
93-
isNumber
94-
/>
95-
<Slider
96-
min="0"
97-
step="1"
98-
max="360"
99-
store={mappingState}
100-
accessor="rotateAngle"
101-
/>
102-
<Button color="red">Reimport</Button>
103-
<Button color="magenta">close</Button>
104-
</Modal>
89+
<Modal
90+
className="rotsprite"
91+
spring={{
92+
top: value ? -150 : 50,
93+
opacity: value ? 1 : 0.5,
94+
}}
95+
>
96+
<Item>Rotate Sprite</Item>
97+
<canvas ref={canvasRef} />
98+
<Input
99+
store={mappingState.rotate}
100+
assert={assertInput}
101+
accessor="angle"
102+
isNumber
103+
/>
104+
<Slider
105+
min="0"
106+
step="1"
107+
max="360"
108+
store={mappingState.rotate}
109+
accessor="angle"
110+
/>
111+
<Button color="red">Reimport</Button>
112+
<Button color="magenta">close</Button>
113+
</Modal>
105114
</>
106115
);
107116
});

‎app/components/mappings/state/index.js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { observable, computed, action, makeObservable } from 'mobx';
1+
import { observable, computed, action, makeObservable, observe } from 'mobx';
22
import { environment } from '#store/environment';
33
import clamp from 'lodash/clamp';
44
import { getCenter } from './bounds';
@@ -16,7 +16,6 @@ class MappingState {
1616
scale = 4;
1717
x = 300;
1818
y = 300;
19-
rotateAngle = 0;
2019

2120
resetPanAndZoom = () => {
2221
this.setZoom(4);
@@ -64,7 +63,7 @@ class MappingState {
6463
scale: observable,
6564
x: observable,
6665
y: observable,
67-
rotateAngle: observable,
66+
rotate: observable,
6867
resetPanAndZoom: action,
6968
setWidth: action,
7069
setZoom: action,
@@ -98,6 +97,20 @@ class MappingState {
9897
toggleDPLCs: action,
9998
arrangeTilesBySpriteOrder: action
10099
});
100+
101+
// ensure only one modal is open at once
102+
const modals = ['newMapping', 'rawEditor', 'rotate'];
103+
modals.forEach(modal => {
104+
observe(this[modal], value => {
105+
if (value.name === 'active' && value.object.active) {
106+
modals.forEach(otherModal => {
107+
if (otherModal !== modal) {
108+
this[otherModal].active = false;
109+
}
110+
});
111+
}
112+
});
113+
});
101114
}
102115

103116
get guidelinesAbs() {
@@ -161,6 +174,13 @@ class MappingState {
161174
}
162175
};
163176

177+
// rotsprite
178+
179+
rotate = {
180+
angle: 0,
181+
active: false,
182+
};
183+
164184
// raw editor
165185

166186
rawEditor = {

‎styles/components/rotsprite.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.rotsprite {
22
z-index: 3;
3-
left: 15px;
4-
right: 15px;
3+
// left: 15px;
4+
// right: 15px;
55

66
canvas {
77
background-image: url(../images/t.png);

0 commit comments

Comments
 (0)