Skip to content

Commit 0ce484e

Browse files
legomushroomlegomushroom
committed
more preact refactorings
1 parent 77b8b7c commit 0ce484e

14 files changed

+3830
-3103
lines changed

‎.babelrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
{
2+
"presets": ["es2015", "stage-0"],
23
"plugins": [
4+
'transform-runtime',
35
["transform-react-jsx", { "pragma":"h" }]
46
]
57
}

‎app/build/mojs-curve-editor.js

Lines changed: 3597 additions & 3076 deletions
Large diffs are not rendered by default.

‎app/build/mojs-curve-editor.min.js

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/css/blocks/curve-editor.postcss.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
bottom: 0;
2222
padding: calc( $gap * $PX );
2323

24-
& icon-divider {
24+
& [data-component="icon-divider"] {
2525
margin: calc( 10*$PX ) auto;
2626
}
2727
}
@@ -65,7 +65,7 @@
6565
margin-top: calc( 10*$PX );
6666
/*display: none;*/
6767

68-
& icon-button {
68+
& [data-component="icon-button"] {
6969
margin-bottom: calc( 5*$PX );
7070
}
7171

‎app/css/blocks/curve-editor.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"curve-editor":"_curve-editor_1co9o_4","curve-editor__left":"_curve-editor__left_1co9o_1","curve-editor__right":"_curve-editor__right_1co9o_1","curve-editor__resize-handle":"_curve-editor__resize-handle_1co9o_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1co9o_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1co9o_1"}
1+
{"curve-editor":"_curve-editor_ggsv0_4","curve-editor__left":"_curve-editor__left_ggsv0_1","curve-editor__right":"_curve-editor__right_ggsv0_1","curve-editor__resize-handle":"_curve-editor__resize-handle_ggsv0_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_ggsv0_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_ggsv0_1"}

‎app/css/blocks/icon-button.postcss.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
border-radius: calc( 3*$PX );
1111
box-shadow: calc( 1*$PX ) calc( 1*$PX ) 0 rgba(0,0,0,.15);
1212

13-
& icon {
13+
& [data-component="icon"] {
1414
position: absolute;
1515
left: 50%;
1616
top: 50%;
@@ -23,7 +23,7 @@
2323
box-shadow: none;
2424
}
2525

26-
&:hover icon {
26+
&:hover [data-component="icon"] {
2727
transform: translate( -52%, -52% );
2828
}
2929

@@ -34,8 +34,8 @@
3434
inset calc( 1 * $PX ) calc( 1 * $PX ) calc( 1 * $PX ) rgba( 0, 0, 0, .4 );
3535
}
3636

37-
&:active icon,
38-
&.is-checked icon {
37+
&:active [data-component="icon"],
38+
&.is-checked [data-component="icon"] {
3939
transform: translate( -54%, -54% ) scale(.95);
4040
}
4141
}

‎app/css/blocks/icon-button.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"icon-button":"_icon-button_2gmay_4","is-checked":"_is-checked_2gmay_31"}
1+
{"icon-button":"_icon-button_6ysdi_4","is-checked":"_is-checked_6ysdi_31"}

‎app/js/tags/curve-editor-left.babel.jsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11

22
import {h} from 'preact';
33
import Icon from './icon';
4+
import IconButton from './icon-button';
5+
import IconDivider from './icon-divider';
6+
import PointControls from './point-controls';
47

58
const CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');
69

7-
const CurveEditorLeft = () => {
10+
const CurveEditorLeft = ({state}) => {
811
return <div className={CLASSES['curve-editor__left']}>
9-
<a
10-
className={CLASSES['curve-editor__mojs-logo']}
11-
href="https://github.com/legomushroom/mojs-curve-editor" target="_blank">
12+
<IconButton shape="code" />
13+
<IconDivider />
14+
<PointControls state={state}
15+
className={CLASSES['curve-editor__anchor-buttons']} />
16+
<a className={CLASSES['curve-editor__mojs-logo']}
17+
href="https://github.com/legomushroom/mojs-curve-editor" target="_blank">
1218
<Icon shape="mojs-logo" />
1319
</a>
1420
</div>;

‎app/js/tags/curve.babel.jsx

Lines changed: 130 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import { h, Component } from 'preact';
2+
import angleToPoint from '../helpers/angle-to-point';
3+
import Point from './point';
24
import mod from '../helpers/resize-mod';
35
import C from '../constants';
4-
import Point from './point';
6+
import Hammer from 'hammerjs';
7+
import propagating from 'propagating-hammerjs';
58
require('../../css/blocks/curve');
69

710
const CLASSES = require('../../css/blocks/curve.postcss.css.json');
811
class Curve extends Component {
912
render () {
1013
const {state} = this.props,
1114
styles = this._getStyle( state ),
12-
points = this._renderPoints( state );
15+
points = this._renderPoints( state ),
16+
{path, segments} = this._getPath( state );
1317

1418
return <div className={CLASSES['curve']}>
1519
<div className={ CLASSES['curve__background']}
@@ -23,6 +27,19 @@ class Curve extends Component {
2327
viewBox="0 0 100 100"
2428
preserveAspectRatio="none"
2529
class={ CLASSES['curve__svg'] }>
30+
31+
<path d={path}
32+
stroke="#000000"
33+
stroke-opacity="0.35"
34+
stroke-width="4"
35+
vector-effect="non-scaling-stroke"
36+
transform="translate(.75,.75)"
37+
fill="none" />
38+
39+
<g id="js-segments">
40+
{ segments }
41+
</g>
42+
2643
</svg>
2744

2845
</div>
@@ -63,6 +80,117 @@ class Curve extends Component {
6380

6481
return points;
6582
}
83+
84+
_getPath (state) {
85+
const pointsData = state.points.present;
86+
87+
let path = '',
88+
segments = [];
89+
90+
for (let index = 0; index < pointsData.length-1; index++) {
91+
const point = pointsData[index],
92+
nextPoint = pointsData[index+1];
93+
94+
const segment = this._getSegment( point, nextPoint, index );
95+
path += segment.string;
96+
segments.push(this._renderSegment(index, segment.segmentString));
97+
}
98+
99+
return { path, segments };
100+
}
101+
102+
_renderSegment ( index, string) {
103+
return <path
104+
d={string}
105+
data-index={index}
106+
stroke="white"
107+
fill="none"
108+
stroke-width=""
109+
vector-effect="non-scaling-stroke"
110+
class={CLASSES['curve__svg-segment']}
111+
/>;
112+
}
113+
114+
_getSegment (point, nextPoint, i) {
115+
if ( !nextPoint ) { return 1; }
116+
117+
let string = '',
118+
segmentString = '';
119+
120+
const x = point.x + point.tempX,
121+
y = point.y + point.tempY,
122+
xNext = nextPoint.x + nextPoint.tempX,
123+
yNext = nextPoint.y + nextPoint.tempY;
124+
125+
const part1 = `M${x}, ${y/C.CURVE_PERCENT} `;
126+
if ( i === 0 ) { string += part1 }
127+
segmentString += part1;
128+
129+
const part2 = this._getPoint( point, 2 );
130+
string += part2;
131+
segmentString += part2;
132+
133+
const part3 = this._getPoint( nextPoint, 1 );
134+
string += part3;
135+
segmentString += part3;
136+
137+
const part4 = `${xNext}, ${yNext/C.CURVE_PERCENT} `;
138+
string += part4;
139+
segmentString += part4;
140+
141+
return { string, segmentString };
142+
}
143+
_getPoint (point, handleIndex = 1) {
144+
const x = point.x + point.tempX,
145+
y = point.y + point.tempY,
146+
handle = point[`handle${handleIndex}`];
147+
148+
const CHAR = ( handleIndex === 2 ) ? 'C' : '';
149+
if ( point.type !== 'straight' ) {
150+
const handleCoords = angleToPoint( handle.angle, handle.radius );
151+
return `${CHAR}${x + handleCoords.x/C.CURVE_PERCENT}, ${(y + handleCoords.y)/C.CURVE_PERCENT} `;
152+
} else {
153+
return `${CHAR}${x}, ${y/C.CURVE_PERCENT} `;
154+
}
155+
}
156+
157+
componentDidMount () {
158+
const {store} = this.context;
159+
160+
const el = this.base.querySelector('#js-segments'),
161+
mc = propagating(new Hammer.Manager(el));
162+
163+
mc.add(new Hammer.Pan({ threshold: 0 }));
164+
mc.add(new Hammer.Tap);
165+
166+
mc
167+
.on('tap', (e) => {
168+
const ev = e.srcEvent,
169+
target = ev.target;
170+
// handle paths only
171+
if ( target.tagName.toLowerCase() !== 'path' ) { return; }
172+
// coordinates
173+
const x = ev.offsetX,
174+
y = ev.offsetY*C.CURVE_PERCENT,
175+
index = parseInt(target.getAttribute('data-index')) + 1;
176+
177+
store.dispatch({
178+
type: 'POINT_ADD',
179+
data: { x, y, index },
180+
isRecord: true
181+
});
182+
183+
store.dispatch({
184+
type: 'POINT_SELECT',
185+
data: { index }
186+
});
187+
188+
e.stopPropagation();
189+
})
190+
.on('tap', (e) => {
191+
e.stopPropagation();
192+
});
193+
}
66194
}
67195

68196
export default Curve;

‎app/js/tags/icon-button.babel.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Hammer from 'hammerjs';
2+
// import propagating from 'propagating-hammerjs';
3+
import {h, Component} from 'preact';
4+
import Icon from './icon';
5+
6+
require('../../css/blocks/icon-button');
7+
const CLASSES = require('../../css/blocks/icon-button.postcss.css.json');
8+
9+
class IconButton extends Component {
10+
render () {
11+
const check = (this.props.isCheck) ? CLASSES['is-checked'] : '';
12+
return <div className={`${CLASSES['icon-button']} ${check}`}
13+
data-component={'icon-button'}>
14+
<Icon shape={this.props.shape} />
15+
</div>;
16+
}
17+
18+
componentDidMount () {
19+
if ( typeof this.props.onTap === 'function' ) {
20+
var hammertime = new Hammer(this.base)
21+
.on('tap', (e) => { this.props.onTap( e, this.props ) });
22+
}
23+
}
24+
}
25+
26+
export default IconButton;

0 commit comments

Comments
 (0)