Skip to content

Commit a977bde

Browse files
legomushroomlegomushroom
committed
little-handles: add lines
1 parent 0cbec25 commit a977bde

File tree

7 files changed

+82
-39
lines changed

7 files changed

+82
-39
lines changed

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

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ return /******/ (function(modules) { // webpackBootstrap
7575
/******/ }
7676
/******/
7777
/******/ var hotApplyOnUpdate = true;
78-
/******/ var hotCurrentHash = "f48d32093e3626691a18"; // eslint-disable-line no-unused-vars
78+
/******/ var hotCurrentHash = "a0b3bb5aa532c2b4f460"; // eslint-disable-line no-unused-vars
7979
/******/ var hotCurrentModuleData = {};
8080
/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars
8181
/******/
@@ -4078,7 +4078,7 @@ return /******/ (function(modules) { // webpackBootstrap
40784078
/* WEBPACK VAR INJECTION */(function(riot) {
40794079

40804080

4081-
riot.tag2('little-handle', '', '', 'class="{this.CLASSES[\'little-handle\']}" riot-style="{this.getStyle()}"', function(opts) {
4081+
riot.tag2('little-handle', '<div class="{this.CLASSES[\'little-handle__point\']}" riot-style="{this.getPointStyle()}"></div> <div class="{this.CLASSES[\'little-handle__line\']}" riot-style="{this.getLineStyle()}"></div>', '', 'class="{this.CLASSES[\'little-handle\']}"', function(opts) {
40824082
'use strict';
40834083

40844084
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -4120,13 +4120,20 @@ return /******/ (function(modules) { // webpackBootstrap
41204120
return { radius: radius, angle: angle };
41214121
};
41224122

4123-
this.getStyle = function () {
4123+
this.getPointStyle = function () {
41244124
var point = angleToPoint(_this.angle, _this.radius);
41254125

41264126
var translate = 'transform: translate(' + point.x + 'px, ' + point.y + 'px) rotate(' + _this.angle + 'deg)';
41274127
return '' + mojs.h.prefix.css + translate + '; ' + translate;
41284128
};
41294129

4130+
this.getLineStyle = function () {
4131+
var point = angleToPoint(_this.angle, _this.radius);
4132+
4133+
var translate = 'transform: rotate(' + _this.angle + 'deg) scaleY(' + _this.radius + ')';
4134+
return '' + mojs.h.prefix.css + translate + '; ' + translate;
4135+
};
4136+
41304137
this.on('mount', function () {
41314138
var hammertime = (0, _propagatingHammerjs2.default)(new _hammerjs2.default(_this.root)).on('pan', function (e) {
41324139
var point = angleToPoint(_this.angle, _this.radius),
@@ -4179,7 +4186,9 @@ return /******/ (function(modules) { // webpackBootstrap
41794186
/***/ function(module, exports) {
41804187

41814188
module.exports = {
4182-
"little-handle": "_little-handle_xdcpx_3"
4189+
"little-handle": "_little-handle_1rkhn_3",
4190+
"little-handle__point": "_little-handle__point_1rkhn_1",
4191+
"little-handle__line": "_little-handle__line_1rkhn_1"
41834192
};
41844193

41854194
/***/ },
@@ -4217,7 +4226,7 @@ return /******/ (function(modules) { // webpackBootstrap
42174226

42184227

42194228
// module
4220-
exports.push([module.id, "._little-handle_xdcpx_3{width:6px;height:6px;background:#ff512f;position:absolute}._little-handle_xdcpx_3:after{content:'';position:absolute;width:200%;height:200%;left:50%;top:50%;margin-left:-100%;margin-top:-100%}", ""]);
4229+
exports.push([module.id, "._little-handle_1rkhn_3{position:absolute;left:50%;top:50%;width:0;height:0}._little-handle__point_1rkhn_1{position:absolute;z-index:1;width:6px;height:6px;left:50%;top:50%;margin-left:-3px;margin-top:-3px;background:#ff512f;box-shadow:1px 1px 0 rgba(0,0,0,.5)}._little-handle__point_1rkhn_1:after{content:'';position:absolute;width:200%;height:200%;left:50%;top:50%;margin-left:-100%;margin-top:-100%}._little-handle__line_1rkhn_1{position:absolute;width:1px;height:1px;margin-left:-1px;margin-top:-1px;left:50%;top:50%;background:#ff512f;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;box-shadow:1px 0 0 rgba(0,0,0,.5)}", ""]);
42214230

42224231
// exports
42234232

@@ -9962,9 +9971,9 @@ return /******/ (function(modules) { // webpackBootstrap
99629971
/***/ function(module, exports) {
99639972

99649973
module.exports = {
9965-
"point": "_point_3a5h7_5",
9966-
"is-selected": "_is-selected_3a5h7_40",
9967-
"is-hide-handles": "_is-hide-handles_3a5h7_51"
9974+
"point": "_point_vx4ul_5",
9975+
"is-selected": "_is-selected_vx4ul_32",
9976+
"is-hide-handles": "_is-hide-handles_vx4ul_43"
99689977
};
99699978

99709979
/***/ },
@@ -10002,7 +10011,7 @@ return /******/ (function(modules) { // webpackBootstrap
1000210011

1000310012

1000410013
// module
10005-
exports.push([module.id, "._point_3a5h7_5{position:absolute;width:10px;height:10px;margin-left:-5px;margin-top:-5px;cursor:move;background:#fff;border-radius:50%;z-index:3;box-shadow:3px 3px 0 rgba(0,0,0,.5);border:2px solid #fff}._point_3a5h7_5 little-handle{position:absolute;left:50%;top:50%;margin-left:-3px;margin-top:-3px;display:none}._point_3a5h7_5:after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px}._point_3a5h7_5._is-selected_3a5h7_40,._point_3a5h7_5:hover{border-color:#ff512f}._point_3a5h7_5._is-selected_3a5h7_40 little-handle{display:block}._point_3a5h7_5._is-hide-handles_3a5h7_51 little-handle{display:none}", ""]);
10014+
exports.push([module.id, "._point_vx4ul_5{position:absolute;width:10px;height:10px;margin-left:-5px;margin-top:-5px;cursor:move;background:#fff;border-radius:50%;z-index:3;box-shadow:3px 3px 0 rgba(0,0,0,.5);border:2px solid #fff}._point_vx4ul_5 little-handle{display:none}._point_vx4ul_5:after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin-left:-10px;margin-top:-10px}._point_vx4ul_5._is-selected_vx4ul_32,._point_vx4ul_5:hover{border-color:#ff512f}._point_vx4ul_5._is-selected_vx4ul_32 little-handle{display:block}._point_vx4ul_5._is-hide-handles_vx4ul_43 little-handle{display:none}", ""]);
1000610015

1000710016
// exports
1000810017

‎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/little-handle.postcss.css

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,47 @@
11
@import '../assets/globals.postcss.css';
22

33
.little-handle {
4-
width: calc( 6*$PX );
5-
height: calc( 6*$PX );
6-
background: $c-orange;
7-
position: absolute;
8-
/*top: -50px;*/
9-
/*left: -20px;*/
10-
&:after {
11-
content: '';
4+
position: absolute;
5+
left: 50%;
6+
top: 50%;
7+
width: 0;
8+
height: 0;
9+
10+
$size: 6;
11+
&__point {
1212
position: absolute;
13-
width: 200%;
14-
height: 200%;
13+
z-index: 1;
14+
width: calc( $size*$PX );
15+
height: calc( $size*$PX );
1516
left: 50%;
1617
top: 50%;
17-
margin-left: -100%;
18-
margin-top: -100%;
18+
margin-left: calc( -$size/2 * $PX);
19+
margin-top: calc( -$size/2 * $PX);
20+
background: $c-orange;
21+
box-shadow: calc( 1*$PX ) calc( 1*$PX ) 0 rgba(0,0,0,.5);
22+
&:after {
23+
content: '';
24+
position: absolute;
25+
width: 200%;
26+
height: 200%;
27+
left: 50%;
28+
top: 50%;
29+
margin-left: -100%;
30+
margin-top: -100%;
31+
}
1932
}
33+
34+
&__line {
35+
position: absolute;
36+
width: calc( 1*$PX );
37+
height: calc( 1*$PX );
38+
margin-left: calc( -1*$PX );
39+
margin-top: calc( -1*$PX );
40+
left: 50%;
41+
top: 50%;
42+
background: $c-orange;
43+
transform-origin: 50% 100%;
44+
box-shadow: calc( 1*$PX ) 0 0 rgba(0,0,0,.5);
45+
}
46+
2047
}

‎app/css/blocks/little-handle.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"little-handle":"_little-handle_xdcpx_3"}
1+
{"little-handle":"_little-handle_1rkhn_3","little-handle__point":"_little-handle__point_1rkhn_1","little-handle__line":"_little-handle__line_1rkhn_1"}

‎app/css/blocks/point.postcss.css

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,7 @@ $size: 10;
2626
margin-top: calc( -$size*$PX );
2727
}
2828

29-
$size: 6;
30-
little-handle {
31-
position: absolute;
32-
left: 50%;
33-
top: 50%;
34-
margin-left: calc( -($size/2)*$PX );
35-
margin-top: calc( -($size/2)*$PX );
36-
display: none;
37-
}
29+
little-handle { display: none; }
3830

3931
&:hover,
4032
&.is-selected {

‎app/css/blocks/point.postcss.css.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"point":"_point_3a5h7_5","is-selected":"_is-selected_3a5h7_40","is-hide-handles":"_is-hide-handles_3a5h7_51"}
1+
{"point":"_point_vx4ul_5","is-selected":"_is-selected_vx4ul_32","is-hide-handles":"_is-hide-handles_vx4ul_43"}

‎app/js/tags/little-handle.tag

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11

22

33

4-
<little-handle class={ this.CLASSES['little-handle'] } style={this.getStyle()}>
4+
<little-handle class={ this.CLASSES['little-handle'] }>
5+
6+
<div
7+
class={ this.CLASSES['little-handle__point'] }
8+
style={this.getPointStyle()}></div>
9+
10+
<div
11+
class={ this.CLASSES['little-handle__line'] }
12+
style={this.getLineStyle()}></div>
513

614
<script type="babel">
715
this.CLASSES = require('../../css/blocks/little-handle.postcss.css.json');
@@ -23,13 +31,20 @@
2331
return { radius, angle };
2432
}
2533

26-
this.getStyle = () => {
34+
this.getPointStyle = () => {
2735
const point = angleToPoint( this.angle, this.radius );
2836

2937
const translate = `transform: translate(${point.x}px, ${point.y}px) rotate(${this.angle}deg)`;
3038
return `${mojs.h.prefix.css}${translate}; ${translate}`;
3139
}
3240

41+
this.getLineStyle = () => {
42+
const point = angleToPoint( this.angle, this.radius );
43+
44+
const translate = `transform: rotate(${this.angle}deg) scaleY(${this.radius})`;
45+
return `${mojs.h.prefix.css}${translate}; ${translate}`;
46+
}
47+
3348
import Hammer from 'hammerjs';
3449
import propagating from 'propagating-hammerjs';
3550
this.on('mount', () => {

0 commit comments

Comments
 (0)