Skip to content

Commit 2691cde

Browse files
legomushroomlegomushroom
committed
curve: ADD_POINT scaler issue fix
1 parent 2253eae commit 2691cde

11 files changed

+321
-244
lines changed

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

Lines changed: 269 additions & 213 deletions
Large diffs are not rendered by default.

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

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

‎app/js/pool.babel.js

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1-
// class Pool {
2-
// constructor () {
3-
// this._states = []
4-
// }
5-
// }
1+
class Pool {
2+
constructor () {
3+
this._states = [];
4+
}
5+
push (states) {
6+
// this._states.push(states);
7+
// console.log(this._states.length);
8+
return this;
9+
}
610

11+
clear () {
12+
this._states = [];
13+
return this;
14+
}
15+
}
716

8-
export default [];
17+
18+
export default new Pool;

‎app/js/reducers/point-controls-reducer.babel.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
import pool from '../pool';
2+
13
const INITIAL_STATE = {
24
isShow: false,
35
type: 'straight'
46
}
57

68
const pointControls = (state = INITIAL_STATE, action) => {
9+
pool.push( state );
710
switch (action.type) {
811
// probably redundant
912
// case 'POINT_ADD': {

‎app/js/reducers/points-reducer.babel.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import initPoints from '../helpers/init-points';
44
import calculatePath from '../helpers/calculate-path';
55
import deselectAll from '../helpers/deselect-all';
66
import findSelectedIndecies from '../helpers/find-selected-indecies';
7+
import pool from '../pool';
78

89
const INITIAL_STATE = {
910
path: '',
@@ -18,6 +19,7 @@ const INITIAL_STATE = {
1819
}
1920

2021
const pointsReducer = (state = INITIAL_STATE, action) => {
22+
pool.push( state );
2123
switch( action.type ) {
2224
case 'SET_EDITOR_NAME': {
2325
return { ...state, name: action.data };
@@ -72,8 +74,6 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
7274
...deselected.points.slice( index )
7375
];
7476

75-
console.log( index, point, newPoints );
76-
7777
const points = (newPoints.length > 1)
7878
? initPoints( newPoints ) : newPoints;
7979

‎app/js/reducers/progresses-reducer.babel.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import pool from '../pool';
2+
13
const INITIAL_STATE = {
24
selected: 0,
35
lines: []
@@ -19,6 +21,8 @@ const makeProgressLine = (o ={}, state) => {
1921
}
2022

2123
const progresses = (state = INITIAL_STATE, action) => {
24+
pool.push( state );
25+
2226
switch (action.type) {
2327

2428
case 'ADD_PROGRESS_LINE': {

‎app/js/reducers/resize-reducer.babel.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import C from '../constants';
2+
import pool from '../pool';
23

34
const INITIAL_STATE = {
45
x: 20,
@@ -24,6 +25,8 @@ const INITIAL_STATE = {
2425
}
2526

2627
const resizeReducer = (state = INITIAL_STATE, action) => {
28+
pool.push( state );
29+
2730
switch (action.type) {
2831
case 'EDITOR_RESIZE': {
2932
const {data} = action,

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

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,8 @@ class Curve extends Component {
2323
<div id="js-background"
2424
className={ CLASSES['curve__background']}
2525
style={ styles.background }>
26-
27-
<svg preserveAspectRatio="none" height="700px" viewBox="0 0 350 700" version="1.1">
28-
<pattern id="rect-paper" x="0" y="0" width="1" height="1">
26+
<svg preserveAspectRatio="none" height={`${styles.height}px`} viewBox={`0 0 ${350+Math.random()*0.0001} ${styles.height}`}>
27+
<pattern id="rect-paper" x="0" y={`${-styles.svgTop}`} height="350" width="350" patternUnits="userSpaceOnUse">
2928
<g id="Group" transform="translate(-1.000000, 0.000000)" stroke="#FFFFFF" stroke-width="1" fill="none">
3029
<path vector-effect="non-scaling-stroke" d="M333.497821,350.501088 L333.497821,0.501088302" opacity="0.25"></path>
3130
<path vector-effect="non-scaling-stroke" d="M315.997821,350.501088 L315.997821,0.501088302" opacity="0.25"></path>
@@ -69,7 +68,7 @@ class Curve extends Component {
6968
</g>
7069
</pattern>
7170

72-
<rect width="350" height="700" fill="url(#rect-paper)" />
71+
<rect width="350" height={styles.height} fill="url(#rect-paper)" />
7372
</svg>
7473

7574
</div>
@@ -107,17 +106,14 @@ class Curve extends Component {
107106

108107
_getStyle(state) {
109108
const {resize} = state;
110-
let {temp_top, temp_right, panTempY} = resize;
111-
112-
panTempY += resize.panY;
109+
let {temp_top, temp_bottom, temp_right, panTempY} = resize;
110+
let height = C.CURVE_SIZE - (temp_top + resize.top)
111+
+ (temp_bottom + resize.bottom);
113112

114-
temp_top += resize.top - panTempY;
115-
temp_right += resize.right;
113+
panTempY += resize.panY;
116114

117-
// const scale = `transform: scaleX(${(C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE})`,
118-
// bgTransform = `${mojs.h.prefix.css}${scale}; ${scale};`,
119-
// background = `background-position: 0 ${-temp_top - 1}px; ${bgTransform}`,
120-
// transform = `transform: translate(0px, ${-temp_top}px)`;
115+
temp_top += resize.top - panTempY;
116+
temp_right += resize.right;
121117

122118
const scaleX = (C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE;
123119
const scale = `width: ${C.CURVE_SIZE*scaleX}px`,
@@ -126,8 +122,10 @@ class Curve extends Component {
126122
transform = `transform: translate(0px, ${-temp_top}px)`;
127123

128124
return {
125+
transform: `${mojs.h.prefix.css}${transform}; ${transform};`,
129126
background,
130-
transform: `${mojs.h.prefix.css}${transform}; ${transform};`
127+
height,
128+
svgTop: temp_top
131129
};
132130
}
133131

@@ -204,12 +202,13 @@ class Curve extends Component {
204202

205203
mc
206204
.on('tap', (e) => {
207-
const ev = e.srcEvent,
208-
target = ev.target;
205+
const {state} = this.props;
206+
const ev = e.srcEvent;
207+
const target = ev.target;
209208
// handle paths only
210209
if ( target.tagName.toLowerCase() !== 'path' ) { return; }
211210
// coordinates
212-
const x = ev.offsetX/C.CURVE_PERCENT,
211+
const x = ev.offsetX/state.resize.scalerX,
213212
y = ev.offsetY,
214213
index = parseInt(target.getAttribute('data-index')) + 1;
215214

‎app/js/tags/little-handle.babel.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {h, Component} from 'preact';
22
import angleToPoint from '../helpers/angle-to-point';
33
import pointToAngle from '../helpers/point-to-angle';
44
import C from '../constants';
5+
import pool from '../pool';
56

67
import Hammer from 'hammerjs';
78
import propagating from 'propagating-hammerjs';
@@ -76,6 +77,7 @@ class LittleHandle extends Component {
7677
})
7778
.on('panend', (e) => {
7879
store.dispatch({ type: 'HANDLE_TRANSLATE_END', isRecord: true });
80+
pool.clear();
7981
e.stopPropagation();
8082
});
8183
}

‎mockups/curve-editor.sketch

136 KB
Binary file not shown.

0 commit comments

Comments
 (0)