path: add touch, hover state

legomushroom · legomushroom · commit 61a717be4837 · 2016-08-05T00:10:58.000+02:00
diff --git a/app/build/mojs-curve-editor.js b/app/build/mojs-curve-editor.js
diff --git a/app/build/mojs-curve-editor.min.js b/app/build/mojs-curve-editor.min.js
diff --git a/app/css/blocks/curve-editor.postcss.css b/app/css/blocks/curve-editor.postcss.css
@@ -20,6 +20,10 @@
     top:          0;
     bottom:       0;
     padding:      calc( $gap * $PX );
+    
+    & icon-divider {
+      margin: calc( 10*$PX ) auto;
+    }
   }
 
   &__right {
@@ -65,10 +69,6 @@
     }
   }
 
-  & icon-divider {
-    margin: calc( 10*$PX ) calc( 4*$PX );
-  }
-
   &__mojs-logo {
     position:     absolute;
     bottom:       calc( 1.7 * $gap * $PX );
diff --git a/app/css/blocks/curve-editor.postcss.css.json b/app/css/blocks/curve-editor.postcss.css.json
@@ -1 +1 @@
-{"curve-editor":"_curve-editor_seic3_4","curve-editor__left":"_curve-editor__left_seic3_1","curve-editor__right":"_curve-editor__right_seic3_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_seic3_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_seic3_1"}
+{"curve-editor":"_curve-editor_hshpo_4","curve-editor__left":"_curve-editor__left_hshpo_1","curve-editor__right":"_curve-editor__right_hshpo_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_hshpo_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_hshpo_1"}
diff --git a/app/css/blocks/curve.postcss.css b/app/css/blocks/curve.postcss.css
diff --git a/app/css/blocks/curve.postcss.css.json b/app/css/blocks/curve.postcss.css.json
@@ -1 +1 @@
-{"curve":"_curve_n7tci_5","curve__svg-wrapper":"_curve__svg-wrapper_n7tci_1","curve__svg":"_curve__svg_n7tci_1"}
+{"curve":"_curve_adube_5","curve__svg-wrapper":"_curve__svg-wrapper_adube_1","curve__svg":"_curve__svg_adube_1","curve__svg-path":"_curve__svg-path_adube_1"}
diff --git a/app/css/blocks/point.postcss.css b/app/css/blocks/point.postcss.css
@@ -12,7 +12,7 @@ $size: 10;
   background:     #FFF;
   border-radius:  50%;
   z-index:        3;
-  box-shadow:     calc(2*$PX) calc(2*$PX) 0 rgba(0,0,0,.5);
+  box-shadow:     calc(3*$PX) calc(3*$PX) 0 rgba(0,0,0,.5);
   
   &:after {
     content:      '';
diff --git a/app/css/blocks/point.postcss.css.json b/app/css/blocks/point.postcss.css.json
@@ -1 +1 @@
-{"point":"_point_waxms_5"}
+{"point":"_point_ubp0t_5"}
diff --git a/app/js/reducers/points-reducer.babel.js b/app/js/reducers/points-reducer.babel.js
@@ -31,8 +31,11 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
 
       return newState;
     }
-    // just to save the store before any update
-    // case 'POINT_TRANSLATE_START': { return [ ...state ]; }
+    case 'POINT_DELETE': {
+      const newState = [ state[0], state[2] ];
+
+      return newState;
+    }
   }
   return state;
 }
diff --git a/app/js/tags/curve-editor.tag b/app/js/tags/curve-editor.tag
@@ -66,6 +66,7 @@ require('./curve');
       switch (e.which) {
         case 90: { return store.dispatch(ActionCreators.undo()); }
         case 88: { return store.dispatch(ActionCreators.redo()); }
+        case 68: { return store.dispatch({ type: 'POINT_DELETE' }); }
       }
     }
 
diff --git a/app/js/tags/curve.tag b/app/js/tags/curve.tag
@@ -10,12 +10,29 @@ require('./point');
           viewBox="0 0 100 100"
           preserveAspectRatio="none"
           class={ this.CLASSES['curve__svg'] }>
+
       <path d={this.path}
+            stroke="#000000"
+            stroke-opacity="0.35"
+            stroke-width="4"
+            vector-effect="non-scaling-stroke"
+            transform="translate(.75,.75)"
+            fill="none" />
+
+      <path id="js-main-path"
+            class={ this.CLASSES['curve__svg-path'] }
+            d={this.path}
             stroke="#ffffff"
-            stroke-width="2"
+            stroke-width="3"
             vector-effect="non-scaling-stroke"
-            fill="none">
-      </path>
+            fill="none" />
+
+      <path d={this.path + ' L100,100 z'}
+            stroke="none"
+            vector-effect="non-scaling-stroke"
+            transform="translate(.5,.5)"
+            fill="none" />
+
     </svg>
   </div>
 
@@ -38,6 +55,13 @@ require('./point');
       this.path = str;
     }
 
+    this.on('mount', () => {
+      this.root.querySelector('#js-main-path')
+        .addEventListener('click', (e) => {
+          console.log(e);
+        });
+    });
+
     this.getStyle = () => {
       const {resize} = this.state;
       let {temp_top} = resize;

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,10 @@`
`20`	`20`	`top: 0;`
`21`	`21`	`bottom: 0;`
`22`	`22`	`padding: calc( $gap * $PX );`
	`23`	`+`
	`24`	`+ & icon-divider {`
	`25`	`+ margin: calc( 10*$PX ) auto;`
	`26`	`+ }`
`23`	`27`	`}`
`24`	`28`
`25`	`29`	`&__right {`
`@@ -65,10 +69,6 @@`
`65`	`69`	`}`
`66`	`70`	`}`
`67`	`71`
`68`		`- & icon-divider {`
`69`		`- margin: calc( 10$PX ) calc( 4$PX );`
`70`		`- }`
`71`		`-`
`72`	`72`	`&__mojs-logo {`
`73`	`73`	`position: absolute;`
`74`	`74`	`bottom: calc( 1.7 * $gap * $PX );`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"curve-editor":"_curve-editor_seic3_4","curve-editor__left":"_curve-editor__left_seic3_1","curve-editor__right":"_curve-editor__right_seic3_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_seic3_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_seic3_1"}`
	`1`	`+{"curve-editor":"_curve-editor_hshpo_4","curve-editor__left":"_curve-editor__left_hshpo_1","curve-editor__right":"_curve-editor__right_hshpo_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_hshpo_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_hshpo_1"}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"curve":"_curve_n7tci_5","curve__svg-wrapper":"_curve__svg-wrapper_n7tci_1","curve__svg":"_curve__svg_n7tci_1"}`
	`1`	`+{"curve":"_curve_adube_5","curve__svg-wrapper":"_curve__svg-wrapper_adube_1","curve__svg":"_curve__svg_adube_1","curve__svg-path":"_curve__svg-path_adube_1"}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"point":"_point_waxms_5"}`
	`1`	`+{"point":"_point_ubp0t_5"}`
Original file line number	Diff line number	Diff line change
`@@ -31,8 +31,11 @@ const pointsReducer = (state = INITIAL_STATE, action) => {`
`31`	`31`
`32`	`32`	`return newState;`
`33`	`33`	`}`
`34`		`- // just to save the store before any update`
`35`		`- // case 'POINT_TRANSLATE_START': { return [ ...state ]; }`
	`34`	`+ case 'POINT_DELETE': {`
	`35`	`+ const newState = [ state[0], state[2] ];`
	`36`	`+`
	`37`	`+ return newState;`
	`38`	`+ }`
`36`	`39`	`}`
`37`	`40`	`return state;`
`38`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,7 @@ require('./curve');`
`66`	`66`	`switch (e.which) {`
`67`	`67`	`case 90: { return store.dispatch(ActionCreators.undo()); }`
`68`	`68`	`case 88: { return store.dispatch(ActionCreators.redo()); }`
	`69`	`+ case 68: { return store.dispatch({ type: 'POINT_DELETE' }); }`
`69`	`70`	`}`
`70`	`71`	`}`
`71`	`72`