Handle deselect

components/AnchorDetails.jsx

@@ -24,7 +24,7 @@ class AnchorDetails extends React.Component {
   render () {
     let props = this.props
     let { ast, current, width, zoom, padding, preview } = props
-    let { type, params } = ast.commands[current]
+    let { type, params } = ast.commands[current] ? ast.commands[current] : { type: false, params: {} }
 
     //let x = typeof params.x !== 'undefined' ? params.x : previousKey(ast.commands, current, 'x')
     let y = typeof params.y !== 'undefined' ? params.y : previousKey(ast.commands, current, 'y')
@@ -37,7 +37,8 @@ class AnchorDetails extends React.Component {
         color: colors.blue,
         transitionProperty: 'top',
         transitionDuration: '.2s',
-        transitionTimingFunction: 'ease-out'
+        transitionTimingFunction: 'ease-out',
+        display: current < 0 ? 'none' : null
       },
       values: {
         fontSize: 12,

components/App.jsx

@@ -51,7 +51,6 @@ class App extends React.Component {
 
   toggle (key) {
     let val = !this.state[key]
-    console.log
     this.setState({ [key]: val })
   }
 

components/Canvas.jsx

@@ -7,6 +7,16 @@ import Toolbar from './Toolbar.jsx'
 
 class Canvas extends React.Component {
 
+  constructor () {
+    super ()
+    this.deselect = this.deselect.bind(this)
+  }
+
+  deselect (e) {
+    e.stopPropagation()
+    this.props.selectPoint(-1)
+  }
+
   render () {
     let props = this.props
     let styles = {
@@ -20,7 +30,7 @@ class Canvas extends React.Component {
         right: 0,
         bottom: 48,
         left: 0,
-        //paddingBottom: 64,
+        zIndex: 2,
         overflow: 'auto',
         WebkitOverflowScrolling: 'touch',
       },
@@ -30,8 +40,10 @@ class Canvas extends React.Component {
         height: '100%',
       },
       cell: {
+        position: 'relative',
         display: 'table-cell',
         verticalAlign: 'middle',
+        textAlign: 'center'
       },
       header: {
         position: 'absolute',
@@ -57,7 +69,8 @@ class Canvas extends React.Component {
     }
 
     return (
-      <div style={styles.container}>
+      <div style={styles.container}
+        onClick={this.deselect}>
         <div style={styles.viewport}>
           <div style={styles.table}>
             <div style={styles.cell}>

components/CurrentAnchor.jsx

@@ -6,7 +6,7 @@ class CurrentAnchor extends React.Component {
 
   render () {
     let props = this.props
-    let { x, y, zoom, isMoving } = props
+    let { x, y, zoom, isMoving, current } = props
     let r = 12 / zoom
     let styles = {
       current: {
@@ -25,6 +25,10 @@ class CurrentAnchor extends React.Component {
       }
     }
 
+    if (current < 0) {
+      return false
+    }
+
     return (
       <g>
         <circle

components/CurveHandles.jsx

@@ -8,7 +8,7 @@ class CurveHandles extends React.Component {
   render () {
     let props = this.props
     let { ast, current, zoom } = props
-    let params = ast.commands[current].params
+    let params = ast.commands[current] ? ast.commands[current].params : {}
     let handles = []
     let w = 10 / zoom
 

components/Guides.jsx

@@ -33,9 +33,9 @@ class Guides extends React.Component {
       }
     }
 
-    let currentC
+    let currentC = false
     // Attempt to handle smoothto curves
-    if (ast.commands[current].type.match(/(S|T)/) && current > 1) {
+    if (ast.commands[current] && ast.commands[current].type.match(/(S|T)/) && current > 1) {
       currentC = {
         commands: [
           {
@@ -49,7 +49,7 @@ class Guides extends React.Component {
           ast.commands[current]
         ]
       }
-    } else {
+    } else if (ast.commands[current]) {
       currentC = {
         commands: [
           {
@@ -64,7 +64,7 @@ class Guides extends React.Component {
       }
     }
 
-    let currentD = pathast.stringify(currentC)
+    let currentD = currentC ? pathast.stringify(currentC) : ''
 
     if (preview) {
       return false

components/Handles.jsx

@@ -35,7 +35,6 @@ class Handles extends React.Component {
   }
 
   handleMouseUp (e) {
-    console.log('mouse up')
     this.setState({ isMoving: false, params: false })
   }
 
@@ -109,11 +108,13 @@ class Handles extends React.Component {
     let params = ast.commands[current].params
     switch (e.keyCode) {
       case 38: // Up
+        e.preventDefault()
         if (params.y > 0) {
           params.y = snap ? params.y - res : params.y - 1
         }
         break
       case 40: // Down
+        e.preventDefault()
         if (params.y < height) {
           params.y = snap ? params.y + res : params.y + 1
         }
@@ -151,7 +152,7 @@ class Handles extends React.Component {
         }
       })
 
-    let params = ast.commands[current].params
+    let params = ast.commands[current] ? ast.commands[current].params : {}
 
     let currentAnchor = {
       x: typeof params.x !== 'undefined' ? params.x : previousKey(ast.commands, current, 'x'),

components/Svg.jsx

@@ -13,6 +13,9 @@ class Svg extends React.Component {
     let { width, height, zoom, padding } = props
     let padX = width + padding * 2
     let padY = height + padding * 2
+    function stopClick (e) {
+      e.stopPropagation()
+    }
     let styles = {
       outer: {
         position: 'relative',
@@ -24,14 +27,16 @@ class Svg extends React.Component {
         margin: 'auto'
       }
     }
+
     return (
       <div style={styles.outer}>
         <svg
           viewBox={[0, 0, padX, padY].join(' ')}
           width={padX * zoom}
           height={padY * zoom}
           style={styles.svg}
-          fill='currentcolor'>
+          fill='currentcolor'
+          onClick={stopClick}>
           <g transform={'translate(' + padding + ' ' + padding + ')'}>
             <Grid {...props} />
             <Path {...props} />