Skip to content

Commit db8de67

Browse files
kirjavascriptkirjavascript
committed
Upgraded everything except react-color
1 parent 4e6916c commit db8de67

20 files changed

Lines changed: 1084 additions & 582 deletions

File tree

‎TODO‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ flex2_test/logo.png import is broken (alpha - works with exported flex file)
1414
tile deletes when drawing (unmap pieces / shortcuts in drawing mode)
1515
many writes while drawing
1616
project files easier to use / create
17+
sprites are offset if something else lods fullscreen
1718
FEATURES
1819
ctrl+wheel for horiz scroll
19-
fullscreen icons - https://systemuicons.com/
20+
fullscreen icons - https://systemuicons.com/ arrows
2021
TASKS
2122
checkbox
2223
buffer is deprecated on save

‎app/components/mappings/axis.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,31 +29,31 @@ export class Axes extends Component {
2929
const domainX = baseWidth / scale;
3030

3131
return <g>
32-
<VictoryAxis
33-
width={baseWidth}
34-
height={600}
35-
domain={[- (x/scale), domainX - (x/scale)]}
36-
offsetY={600}
37-
padding={{left: 0, right: 0}}
38-
orientation="top"
39-
style={style}
40-
standalone={true}
41-
tickCount={Math.max(1, (baseWidth/100)|0)}
42-
tickFormat={tickFormat}
43-
/>
44-
<VictoryAxis
45-
width={600}
46-
height={600}
47-
domain={[domainY - (y/scale), - (y/scale)]}
48-
offsetX={600}
49-
padding={{left: 0, right: 0}}
50-
orientation="right"
51-
style={style}
52-
standalone={true}
53-
tickCount={10}
54-
tickFormat={tickFormat}
55-
/>
56-
</g>;
32+
<VictoryAxis
33+
width={baseWidth}
34+
height={600}
35+
domain={[- (x/scale), domainX - (x/scale)]}
36+
offsetY={600}
37+
padding={{left: 0, right: 0}}
38+
orientation="top"
39+
style={style}
40+
standalone={false}
41+
tickCount={Math.max(1, (baseWidth/100)|0)}
42+
tickFormat={tickFormat}
43+
/>
44+
<VictoryAxis
45+
width={600}
46+
height={600}
47+
domain={[domainY - (y/scale), - (y/scale)]}
48+
offsetX={600}
49+
padding={{left: 0, right: 0}}
50+
orientation="right"
51+
style={style}
52+
standalone={false}
53+
tickCount={10}
54+
tickFormat={tickFormat}
55+
/>
56+
</g>
5757
}
5858

5959
}

‎app/components/mappings/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class Mappings extends Component {
4343
}
4444
};
4545

46-
componentWillMount() {
46+
componentDidMount() {
4747
this.props.node.setEventListener('resize', (e) => {
4848
requestAnimationFrame(() => {
4949
const baseWidth = e.rect.width - 10;
@@ -66,7 +66,7 @@ export class Mappings extends Component {
6666
height: 600,
6767
}}
6868
>
69-
{mappings.reverse().map((mapping, mappingIndex) => {
69+
{mappings.slice(0).reverse().map((mapping, mappingIndex) => {
7070
const realIndex = mappings.length - 1 - mappingIndex;
7171
return (
7272
<div

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { Component } from 'react';
2-
import { Motion, spring } from 'react-motion';
32
import chunk from 'lodash/chunk';
43
import { select, event, mouse } from 'd3-selection';
54
import { drag } from 'd3-drag';
65
import { mappingState } from './state';
76
import { environment } from '#store/environment';
87
import { observer } from 'mobx-react';
98
import { Mapping } from './mapping';
9+
import { Spring } from 'react-spring/renderprops';
1010

1111
const baseConfig = {
1212
hflip: false,
@@ -103,14 +103,14 @@ export class NewMapping extends Component {
103103
/>
104104
</div>
105105
)}
106-
<Motion
107-
defaultStyle={{
106+
<Spring
107+
from={{
108108
left: this.getLeft(),
109109
opacity: this.getOpacity(),
110110
}}
111-
style={{
112-
left: spring(this.getLeft()),
113-
opacity: spring(this.getOpacity()),
111+
to={{
112+
left: this.getLeft(),
113+
opacity: this.getOpacity(),
114114
}}
115115
>
116116
{({left, opacity}) => (
@@ -137,7 +137,7 @@ export class NewMapping extends Component {
137137
)}
138138
</div>
139139
)}
140-
</Motion>
140+
</Spring>
141141
</div>
142142
);
143143
}

‎app/components/mappings/raw-editor.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { Motion, spring } from 'react-motion';
2+
import { Spring } from 'react-spring/renderprops';
33
import { SortableContainer, SortableElement, SortableHandle, arrayMove } from 'react-sortable-hoc';
44
import { mappingState } from './state';
55
import { environment } from '#store/environment';
@@ -238,14 +238,14 @@ export class RawEditor extends Component {
238238
const { scale, rawEditor: { active } } = mappingState;
239239

240240
return (
241-
<Motion
242-
defaultStyle={{
241+
<Spring
242+
from={{
243243
top: this.getTop(),
244244
opacity: this.getOpacity(),
245245
}}
246-
style={{
247-
top: spring(this.getTop()),
248-
opacity: spring(this.getOpacity()),
246+
to={{
247+
top: this.getTop(),
248+
opacity: this.getOpacity(),
249249
}}
250250
>
251251
{(style) => (
@@ -293,7 +293,7 @@ export class RawEditor extends Component {
293293
)}
294294
</div>
295295
)}
296-
</Motion>
296+
</Spring>
297297
);
298298
}
299299

‎app/components/palettes/index.js‎

Lines changed: 74 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,76 @@
11
import React, { Component } from 'react';
2+
import { createPortal } from 'react-dom';
23
import { environment } from '#store/environment';
34
import { observer } from 'mobx-react';
45
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
56
import { hexToMDHex } from '#formats/palette';
67
import ColorPicker from 'rc-color-picker';
8+
import { SketchPicker } from 'react-color';
79

810
const Handle = SortableHandle(({lineIndex}) => <div className="index">
911
{lineIndex}
1012
</div>);
1113

12-
const SortableItem = SortableElement(observer(({line, lineIndex}) => (
13-
<div className="line">
14-
<Handle lineIndex={lineIndex}/>
15-
{line.map((color, colorIndex) => {
16-
return <div
17-
key={colorIndex}
18-
className="color"
19-
style={{
20-
backgroundColor: color,
21-
textAlign: 'center',
22-
}}
23-
>
24-
<ColorPicker
25-
animation="slide-up"
26-
color={color}
27-
enableAlpha={false}
28-
mode="RGB"
29-
onChange={({color}) => {
30-
environment.palettes[lineIndex][colorIndex] = hexToMDHex(color);
31-
}}
32-
>
33-
<div className="picker"/>
34-
</ColorPicker>
35-
</div>;
36-
})}
37-
</div>
38-
)));
14+
const container = document.body.appendChild(document.createElement('div'));
15+
container.className = 'palette-color-picker';
3916

40-
const SortableList = SortableContainer(observer(({items, vert}) => {
17+
const SortableItem = SortableElement(observer(({line, lineIndex, onClick}) => {
4118
return (
42-
<div className={`palettes ${vert?'vert':''}`}>
43-
{items.map((line, index) => (
44-
<SortableItem
45-
key={`item-${index}`}
46-
index={index}
47-
line={line}
48-
lineIndex={index}
49-
/>
50-
))}
19+
<div className="line">
20+
<Handle lineIndex={lineIndex}/>
21+
{line.map((color, colorIndex) => {
22+
return <div
23+
key={colorIndex}
24+
className="color"
25+
style={{
26+
backgroundColor: color,
27+
textAlign: 'center',
28+
}}
29+
onClick={(e) => onClick(lineIndex, colorIndex, e)}
30+
>
31+
<ColorPicker
32+
animation="slide-up"
33+
color={color}
34+
enableAlpha={false}
35+
mode="RGB"
36+
onChange={({color}) => {
37+
environment.palettes[lineIndex][colorIndex] = hexToMDHex(color);
38+
}}
39+
>
40+
<div className="picker"/>
41+
</ColorPicker>
42+
</div>;
43+
})}
5144
</div>
5245
);
53-
}), {withRef: true});
46+
}));
47+
48+
const SortableList = SortableContainer(
49+
observer(class extends Component {
50+
render() {
51+
const { items, vert } = this.props;
52+
return (
53+
<div className={`palettes ${vert?'vert':''}`}>
54+
{items.map((line, index) => (
55+
<SortableItem
56+
key={`item-${index}`}
57+
index={index}
58+
line={line}
59+
lineIndex={index}
60+
onClick={this.props.onClick}
61+
/>
62+
))}
63+
</div>
64+
);
65+
}
66+
}),
67+
{ withRef: true }
68+
);
5469

5570
@observer
5671
export class Palettes extends Component {
5772

58-
state = { vert: false };
73+
state = { vert: false, picker: false };
5974
mounted = false;
6075

6176
onRef = (node) => {
@@ -68,7 +83,7 @@ export class Palettes extends Component {
6883
}
6984
};
7085

71-
componentWillMount() {
86+
componentDidMount() {
7287
this.mounted = true;
7388
this.props.node.setEventListener('resize', (e) => {
7489
const { width, height } = e.rect;
@@ -88,8 +103,18 @@ export class Palettes extends Component {
88103
environment.swapPalette(oldIndex, newIndex);
89104
};
90105

106+
onClickColor = (lineIndex, colorIndex, e) => {
107+
const { x, y } = e.target.getBoundingClientRect();
108+
const { picker } = this.state;
109+
if (!picker) {
110+
this.setState({ picker: { lineIndex, colorIndex } });
111+
}
112+
};
113+
114+
// closePicker = () => this.setState({ picker: false });
115+
91116
render() {
92-
const { vert } = this.state;
117+
const { vert, picker } = this.state;
93118
const { palettes } = environment;
94119
return (
95120
<div ref={this.onRef} className="paletteWrap">
@@ -102,7 +127,15 @@ export class Palettes extends Component {
102127
useDragHandle={true}
103128
vert={vert}
104129
onSortEnd={this.onSortEnd}
130+
onClick={this.onClickColor}
105131
/>
132+
{createPortal((
133+
picker && (
134+
<div>
135+
<SketchPicker />
136+
</div>
137+
)
138+
), container)}
106139
</div>
107140
);
108141
}

‎app/components/project/object.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { Component } from 'react';
22
import { extname } from 'path';
33
import { observer } from 'mobx-react';
4-
import {Collapse} from 'react-collapse';
54
import { Item, Input, File, Select, Editor } from '#ui';
65
import { mappingFormats, dplcFormats } from '#formats/definitions';
76
import { compressionFormats } from '#formats/compression';
@@ -82,7 +81,7 @@ export class ObjectConfig extends Component {
8281
</Item>
8382
</div>
8483
</div>
85-
<Collapse isOpened={open}>
84+
{open && <div>
8685
<div style={{paddingBottom: 5}}>
8786
<div className="config">
8887
<Item color="blue">
@@ -276,7 +275,7 @@ export class ObjectConfig extends Component {
276275
</Item>
277276
</div>
278277
</div>
279-
</Collapse>
278+
</div>}
280279
</div>;
281280
}
282281

0 commit comments

Comments
 (0)