Skip to content

Commit 8ce128e

Browse files
legomushroomlegomushroom
committed
minimize: initial commit
1 parent 1993485 commit 8ce128e

16 files changed

+743
-321
lines changed

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

Lines changed: 521 additions & 251 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/css/blocks/curve-editor.postcss.css‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
z-index: 100;
1212
/*box-shadow: 2px 2px 2px rgba(0,0,0,.38);*/
1313
box-shadow: 0 0 calc( 3*$PX ) calc( 1*$PX ) rgba(0,0,0,.38);
14+
/*transition: width .15s ease-out, height .15s ease-out;*/
1415

1516
& * {
1617
box-sizing: border-box;
@@ -19,12 +20,16 @@
1920
$gap : 10;
2021
&__left {
2122
position: absolute;
22-
width: calc( 42 * $PX );
23+
width: calc(42*$PX);
2324
left: 0;
2425
top: 0;
2526
bottom: 0;
26-
padding: calc( $gap * $PX );
27+
padding: calc($gap*$PX);
2728
cursor: move;
29+
30+
[data-component="minimize-button"] {
31+
margin-top: calc(5*$PX);
32+
}
2833

2934
& [data-component="icon-divider"] {
3035
margin: calc( 10*$PX ) auto;
@@ -37,6 +42,16 @@
3742
top: 0;
3843
right: 0;
3944
bottom: 0;
45+
&:after {
46+
content: '';
47+
position: absolute;
48+
left: 0;
49+
top: 0;
50+
right: 0;
51+
bottom: 0;
52+
z-index: 2;
53+
display: none;
54+
}
4055
}
4156

4257
$radius: 16;
@@ -73,10 +88,6 @@
7388
& [data-component="icon-button"] {
7489
margin-bottom: calc( 5*$PX );
7590
}
76-
77-
/*&.is-show {
78-
display: block;
79-
}*/
8091
}
8192

8293
&__mojs-logo {
@@ -92,4 +103,36 @@
92103
height: calc( 12*$PX );
93104
}
94105
}
106+
107+
[data-component="maximize-button"] {
108+
display: none;
109+
}
110+
111+
&.is-minimized {
112+
width: calc(100*$PX) !important;
113+
height: calc(45*$PX) !important;
114+
border-radius: calc(7 * $PX);
115+
116+
[data-component="resize-handle"],
117+
[data-component="point"],
118+
[data-component="icon-divider"],
119+
[data-component="minimize-button"],
120+
[data-component="code-button"],
121+
.curve-editor__anchor-buttons,
122+
.curve-editor__mojs-logo {
123+
display: none;
124+
}
125+
126+
.curve-editor__right:after {
127+
display: block;
128+
}
129+
130+
.curve__svg-wrapper {
131+
margin-top: calc(-200*$PX);
132+
}
133+
134+
[data-component="maximize-button"] {
135+
display: block;
136+
}
137+
}
95138
}

‎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_pbam1_3","curve-editor__left":"_curve-editor__left_pbam1_1","curve-editor__right":"_curve-editor__right_pbam1_1","curve-editor__resize-handle":"_curve-editor__resize-handle_pbam1_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_pbam1_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_pbam1_1"}
1+
{"curve-editor":"_curve-editor_xcm7a_3","curve-editor__left":"_curve-editor__left_xcm7a_1","curve-editor__right":"_curve-editor__right_xcm7a_126","curve-editor__resize-handle":"_curve-editor__resize-handle_xcm7a_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_xcm7a_121","curve-editor__mojs-logo":"_curve-editor__mojs-logo_xcm7a_122","is-minimized":"_is-minimized_xcm7a_111","curve__svg-wrapper":"_curve__svg-wrapper_xcm7a_130"}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import calculatePath from '../helpers/calculate-path';
22
import pool from '../pool';
33

4-
const INITIAL_STATE = { isCode: false }
4+
const INITIAL_STATE = { isCode: false, isMinimize: false }
55

66
const controls = (state = INITIAL_STATE, action) => {
77
pool.push( state );
88
switch (action.type) {
99
case 'CODE_TAP': {
1010
return { ...state, isCode: !state.isCode };
1111
}
12+
case 'SET_MINIMIZE': {
13+
return { ...state, isMinimize: action.data };
14+
}
1215
}
1316
return state;
1417
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import Hammer from 'hammerjs';
66
class CodeButton extends Component {
77
render () {
88
const {state} = this.props;
9-
return <IconButton shape="code" isCheck={state.controls.isCode} />;
9+
return <div data-component="code-button">
10+
<IconButton shape="code" isCheck={state.controls.isCode} />
11+
</div>;
1012
}
1113
componentDidMount () {
1214
const {store} = this.context;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import {h} from 'preact';
33
import Icon from './icon';
44
import CodeButton from './code-button';
5+
import MinimizeButton from './minimize-button';
6+
import MaximizeButton from './maximize-button';
57
import IconDivider from './icon-divider';
68
import PointControls from './point-controls';
79

@@ -10,6 +12,8 @@ const CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');
1012
const CurveEditorLeft = ({state}) => {
1113
return <div className={CLASSES['curve-editor__left']} id="js-left-panel">
1214
<CodeButton state={state} />
15+
<MinimizeButton state={state} />
16+
<MaximizeButton state={state} />
1317
<IconDivider />
1418
<PointControls state={state}
1519
className={CLASSES['curve-editor__anchor-buttons']} />

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,12 @@ class CurveEditor extends Component {
2121
style = this._getStyle(state),
2222
p = this.props;
2323

24+
let className = `${CLASSES['curve-editor']}`;
25+
className += (state.controls.isMinimize)
26+
? ` ${CLASSES['is-minimized']}` : '';
27+
2428
this._state = state;
25-
return ( <div className={CLASSES['curve-editor']} style={ style }>
29+
return ( <div className={className} style={ style }>
2630
<Icons />
2731
<CodePanel state={ state }/>
2832
<CurveEditorLeft state={ state } />

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

Lines changed: 21 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { h, Component } from 'preact';
22
import angleToPoint from '../helpers/angle-to-point';
33
import ProgressLine from './progress-line';
4+
import Pattern from './pattern';
45
import Ruler from './ruler';
56
import Point from './point';
67
import mod from '../helpers/resize-mod';
@@ -19,58 +20,13 @@ class Curve extends Component {
1920
segments = this._renderSegments( state ),
2021
progressLines = this._renderProgressLines( state );
2122

23+
const curveHeight = this._getCurveHeight(state);
2224
return <div className={ CLASSES['curve'] }>
2325
<div id="js-background"
24-
className={ CLASSES['curve__background']}
25-
style={ styles.background }>
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">
28-
<g id="Group" transform="translate(-1.000000, 0.000000)" stroke="#FFFFFF" stroke-width="1" fill="none">
29-
<path vector-effect="non-scaling-stroke" d="M333.497821,350.501088 L333.497821,0.501088302" opacity="0.25"></path>
30-
<path vector-effect="non-scaling-stroke" d="M315.997821,350.501088 L315.997821,0.501088302" opacity="0.25"></path>
31-
<path vector-effect="non-scaling-stroke" d="M298.497821,350.501088 L298.497821,0.501088302" opacity="0.25"></path>
32-
<path vector-effect="non-scaling-stroke" d="M280.997821,350.501088 L280.997821,0.501088302" opacity="0.25"></path>
33-
<path vector-effect="non-scaling-stroke" d="M245.997821,350.501088 L245.997821,0.501088302" opacity="0.25"></path>
34-
<path vector-effect="non-scaling-stroke" d="M228.497821,350.501088 L228.497821,0.501088302" opacity="0.25"></path>
35-
<path vector-effect="non-scaling-stroke" d="M210.997821,350.501088 L210.997821,0.501088302" opacity="0.25"></path>
36-
<path vector-effect="non-scaling-stroke" d="M193.497821,350.501088 L193.497821,0.501088302" opacity="0.25"></path>
37-
<path vector-effect="non-scaling-stroke" d="M159.372821,350.501088 L159.372821,0.501088302" opacity="0.25"></path>
38-
<path vector-effect="non-scaling-stroke" d="M141.872821,350.501088 L141.872821,0.501088302" opacity="0.25"></path>
39-
<path vector-effect="non-scaling-stroke" d="M124.372821,350.501088 L124.372821,0.501088302" opacity="0.25"></path>
40-
<path vector-effect="non-scaling-stroke" d="M106.872821,350.501088 L106.872821,0.501088302" opacity="0.25"></path>
41-
<path vector-effect="non-scaling-stroke" d="M71.8728207,350.501088 L71.8728207,0.501088302" opacity="0.25"></path>
42-
<path vector-effect="non-scaling-stroke" d="M54.3728207,350.501088 L54.3728207,0.501088302" opacity="0.25"></path>
43-
<path vector-effect="non-scaling-stroke" d="M36.8728207,350.501088 L36.8728207,0.501088302" opacity="0.25"></path>
44-
<path vector-effect="non-scaling-stroke" d="M19.3728207,350.501088 L19.3728207,0.501088302" opacity="0.25"></path>
45-
<path vector-effect="non-scaling-stroke" d="M351.001088,19.0021793 L1.0010883,19.0021793" opacity="0.25"></path>
46-
<path vector-effect="non-scaling-stroke" d="M351.001088,36.5021793 L1.0010883,36.5021793" opacity="0.25"></path>
47-
<path vector-effect="non-scaling-stroke" d="M351.001088,54.0021793 L1.0010883,54.0021793" opacity="0.25"></path>
48-
<path vector-effect="non-scaling-stroke" d="M351.001088,71.5021793 L1.0010883,71.5021793" opacity="0.25"></path>
49-
<path vector-effect="non-scaling-stroke" d="M351.001088,106.502179 L1.0010883,106.502179" opacity="0.25"></path>
50-
<path vector-effect="non-scaling-stroke" d="M351.001088,124.002179 L1.0010883,124.002179" opacity="0.25"></path>
51-
<path vector-effect="non-scaling-stroke" d="M351.001088,141.502179 L1.0010883,141.502179" opacity="0.25"></path>
52-
<path vector-effect="non-scaling-stroke" d="M351.001088,159.002179 L1.0010883,159.002179" opacity="0.25"></path>
53-
<path vector-effect="non-scaling-stroke" d="M351.001088,193.127179 L1.0010883,193.127179" opacity="0.25"></path>
54-
<path vector-effect="non-scaling-stroke" d="M351.001088,210.627179 L1.0010883,210.627179" opacity="0.25"></path>
55-
<path vector-effect="non-scaling-stroke" d="M351.001088,228.127179 L1.0010883,228.127179" opacity="0.25"></path>
56-
<path vector-effect="non-scaling-stroke" d="M351.001088,245.627179 L1.0010883,245.627179" opacity="0.25"></path>
57-
<path vector-effect="non-scaling-stroke" d="M351.001088,280.627179 L1.0010883,280.627179" opacity="0.25"></path>
58-
<path vector-effect="non-scaling-stroke" d="M351.001088,298.127179 L1.0010883,298.127179" opacity="0.25"></path>
59-
<path vector-effect="non-scaling-stroke" d="M351.001088,315.627179 L1.0010883,315.627179" opacity="0.25"></path>
60-
<path vector-effect="non-scaling-stroke" d="M351.001088,333.127179 L1.0010883,333.127179" opacity="0.25"></path>
61-
<path vector-effect="non-scaling-stroke" d="M88.0641352,1 L88.0641352,351" id="path8215" opacity="0.5"></path>
62-
<path vector-effect="non-scaling-stroke" d="M175.12827,1 L175.12827,351" id="path8215" opacity="0.5"></path>
63-
<path vector-effect="non-scaling-stroke" d="M262.192406,1 L262.192406,351" id="path8215" opacity="0.5"></path>
64-
<path vector-effect="non-scaling-stroke" d="M350.563591,88.0646793 L0.563591022,88.0646793" id="path8215" opacity="0.5"></path>
65-
<path vector-effect="non-scaling-stroke" d="M350.563591,175.564679 L0.563591022,175.564679" id="path8215" opacity="0.5"></path>
66-
<path vector-effect="non-scaling-stroke" d="M350.563591,263.064679 L0.563591022,263.064679" id="path8215" opacity="0.5"></path>
67-
<rect id="rect10078" opacity="0.75" x="0.872817955" y="1" width="350" height="350"></rect>
68-
</g>
69-
</pattern>
70-
71-
<rect width="350" height={styles.height} fill="url(#rect-paper)" />
72-
</svg>
73-
26+
className={ CLASSES['curve__background']}>
27+
28+
<Pattern styles={styles} />
29+
7430
</div>
7531

7632
{ progressLines }
@@ -84,7 +40,7 @@ class Curve extends Component {
8440
{ points }
8541

8642
<svg height={ C.CURVE_SIZE }
87-
viewBox="0 0 100 100"
43+
viewBox={`0 0 100 ${curveHeight}`}
8844
preserveAspectRatio="none"
8945
id="js-svg"
9046
class={ CLASSES['curve__svg'] }>
@@ -104,26 +60,36 @@ class Curve extends Component {
10460
</div>;
10561
}
10662

63+
_getCurveHeight (state) {
64+
const {resize} = state;
65+
if (!state.controls.isMinimize) { return 100; }
66+
67+
return C.CURVE_SIZE*8;
68+
}
69+
10770
_getStyle(state) {
10871
const {resize} = state;
10972
let {temp_top, temp_bottom, temp_right, panTempY} = resize;
11073
let height = C.CURVE_SIZE - (temp_top + resize.top)
11174
+ (temp_bottom + resize.bottom);
11275

11376
panTempY += resize.panY;
114-
11577
temp_top += resize.top - panTempY;
11678
temp_right += resize.right;
11779

80+
const yShift = (state.controls.isMinimize)
81+
? -(temp_top/C.CURVE_SIZE) * (20/(height/C.CURVE_SIZE))
82+
: -temp_top;
83+
11884
const scaleX = (C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE;
11985
const scale = `width: ${C.CURVE_SIZE*scaleX}px`,
12086
bgTransform = `${scale};`,
121-
background = `background-position: 0 ${-temp_top - 1}px; ${bgTransform}`,
122-
transform = `transform: translate(0px, ${-temp_top}px)`;
87+
// background = `background-position: 0 ${-temp_top - 1}px; ${bgTransform}`,
88+
transform = `transform: translate(0px, ${yShift}px)`;
12389

12490
return {
12591
transform: `${mojs.h.prefix.css}${transform}; ${transform};`,
126-
background,
92+
// background,
12793
height,
12894
svgTop: temp_top
12995
};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ const Icons = () => {
3838
<rect width="2.667" height="2.667" x=".333" y="1.333" fill="#FF512F"/>
3939
</g>
4040
<path id="mojs-logo-shape" d="M18.4678907,2.67700048 C19.488586,3.25758625 20.2789227,4.18421651 20.87823,5.1973579 C24.0807788,10.501451 27.2777091,15.8113116 30.480258,21.1154047 C31.1320047,22.1612281 31.7706417,23.2647256 31.9354512,24.5162532 C32.188284,26.0619186 31.6919826,27.7363895 30.5589171,28.80336 C29.4501984,29.8857103 27.8807622,30.3182659 26.3806209,30.3048086 C19.4511293,30.3086535 12.5235106,30.3086535 5.59401901,30.3048086 C3.71556494,30.343258 1.69852104,29.5723478 0.683444165,27.8709623 C-0.406546132,26.1099803 -0.0975282643,23.7914822 0.940022637,22.0843293 C4.34296485,16.4130445 7.76650826,10.7532945 11.1825603,5.08969961 C11.9747698,3.74781595 13.1846215,2.60202418 14.6847628,2.18292584 C15.9451812,1.81573418 17.3348251,2.01182606 18.4678907,2.67700048 Z M15.3334668,9.51526849 C15.6146238,9.03779476 16.0791597,9.02250655 16.3785679,9.4929547 L25.2763555,23.4736913 C25.5723919,23.9388414 25.3568433,24.3159201 24.8074398,24.3159202 L7.62314647,24.3159205 C7.06813505,24.3159206 6.84622798,23.9286889 7.12728913,23.4513779 L15.3334668,9.51526849 Z" fill-rule="evenodd"></path>
41+
<path id="minimize-shape" d="M9,18.1970803 L14.4501217,18.1970803 L14.4501217,23.6472019 L9,18.1970803 Z M16.8832117,9 L22.3333333,14.4501217 L16.8832117,14.4501217 L16.8832117,9 Z"></path>
42+
<path id="maximize-shape" d="M16.1358025,11 L21.6666667,11 L21.6666667,16.5308642 L16.1358025,11 Z M11,16.1358025 L16.5308642,21.6666667 L11,21.6666667 L11,16.1358025 Z"></path>
4143
</svg>` }}></div>
4244
}
4345

0 commit comments

Comments
 (0)