Adjust history and add point

components/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
 
   updateAst (ast) {
     let { history } = this.state
-    if (history.length && pathast.stringify(history[0]) !== pathast.stringify(ast)) {
+    if (history.length && history[0] !== pathast.stringify(ast)) {
       history.unshift(cloneDeep(ast))
     } else if (!history.length) {
       history.unshift(cloneDeep(ast))
@@ -72,10 +72,10 @@ class App extends React.Component {
   }
 
   undo () {
-    let { history, ast } = this.state
+    const { history, ast } = this.state
     if (history.length) {
-      ast = history.shift()
-      this.setState({ ast: ast })
+      const newAst = history.shift()
+      this.setState({ ast: newAst })
     }
   }
 

components/Handles.jsx

@@ -1,5 +1,7 @@
 
 import React from 'react'
+import { findLastIndex } from 'lodash'
+import { stringify } from 'path-ast'
 import previousKey from '../util/get-previous-key'
 import { colors } from '../data'
 import Anchor from './Anchor.jsx'
@@ -80,27 +82,27 @@ class Handles extends React.Component {
     }
   }
 
-  handleAddPoint (e) {
-    let props = this.props
-    let { ast, zoom, padding, current, snap } = props
-    let res = props.resolution2
-    let ev = e.nativeEvent
+  handleAddPoint (i, e) {
+    const { props } = this
+    const { ast, zoom, padding, current, snap } = props
+    const res = props.resolution2
+    const ev = e.nativeEvent
+    let newAst = ast
     let x = ev.offsetX / zoom - padding
     let y = ev.offsetY / zoom - padding
     if (snap) {
       x = Math.floor(x / res) * res || 0
       y = Math.floor(y / res) * res || 0
     }
-    let index = current > -1 ? current + 1 : 1
-    ast.commands.splice(index, 0, {
+    newAst.commands.splice(i, 0, {
       type: 'L',
       params: {
         x: x,
         y: y,
       }
     })
-    props.updateAst(ast)
-    props.selectPoint(index)
+    props.updateAst(newAst)
+    props.selectPoint(i)
     this.setState({ isMoving: true, params: ['x', 'y'] })
   }
 
@@ -140,12 +142,11 @@ class Handles extends React.Component {
 
   render () {
     let self = this
-    let props = this.props
-    let state = this.state
-    let { ast, current, zoom, preview } = props
-    let q3 = 32 / zoom
+    const { props, state } = this
+    const { ast, current, zoom, preview } = props
+    const q3 = 32 / zoom
 
-    let anchors = ast.commands
+    const anchors = ast.commands
       .filter(function(command) {
         return Object.keys(command.params).length
       })
@@ -157,14 +158,45 @@ class Handles extends React.Component {
         }
       })
 
-    let params = ast.commands[current] ? ast.commands[current].params : {}
+    const segments = ast.commands
+      .filter((command) => {
+        return Object.keys(command.params).length || command.type.match(/z|Z/)
+      })
+      .map((command, i) => {
+        if (command.type.match(/z|Z/)) {
+          const lastMIndex = findLastIndex(ast.commands, (command, j) => {
+            if (j > i) { return false }
+            return command.type.match(/m|M/)
+          })
+          command.type = 'L'
+          command.params = {
+            x: ast.commands[lastMIndex].params.x || 0,
+            y: ast.commands[lastMIndex].params.y || 0,
+          }
+        }
+        let segment = {
+          commands: [
+            {
+              type: 'M',
+              params: {
+                x: previousKey(ast.commands, i, 'x'),
+                y: previousKey(ast.commands, i, 'y'),
+              }
+            },
+            command
+          ]
+        }
+        return segment
+      })
 
-    let currentAnchor = {
+    const params = ast.commands[current] ? ast.commands[current].params : {}
+
+    const currentAnchor = {
       x: typeof params.x !== 'undefined' ? params.x : previousKey(ast.commands, current, 'x'),
       y: typeof params.y !== 'undefined' ? params.y :  previousKey(ast.commands, current, 'y')
     }
 
-    let styles = {
+    const styles = {
       g: {
         fill: 'none',
         stroke: 'currentcolor',
@@ -178,6 +210,11 @@ class Handles extends React.Component {
         fill: colors.blue,
         stroke: 'none',
         cursor: 'pointer'
+      },
+      segment: {
+        fill: 'none',
+        stroke: 'transparent',
+        strokeWidth: 4
       }
     }
 
@@ -201,10 +238,26 @@ class Handles extends React.Component {
           width={props.width}
           height={props.height}
           style={styles.mouseRect}
-          onMouseDown={this.handleAddPoint}
           onMouseMove={this.handleMouseMove}
           onMouseUp={this.handleMouseUp} />
 
+        {/*
+          onMouseDown={this.handleAddPoint}
+        */}
+
+        {segments.map((segment, i) => {
+          const d = stringify(segment)
+          return (
+            <path
+              key={i}
+              ref={`segment-${i}`}
+              d={d}
+              style={styles.segment}
+              onMouseDown={this.handleAddPoint.bind(this, i)}
+              />
+          )
+        })}
+
         {anchors.map(function(anchor, i) {
           return (
             <Anchor

components/UrlHistory.jsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import qs from 'qs'
-import pathast from 'path-ast'
+import { stringify, parse } from 'path-ast'
 import { debounce } from 'lodash'
 import roundAst from '../util/round-ast'
 
@@ -14,27 +14,27 @@ class UrlHistory extends React.Component {
   }
 
   updateUrl (manual) {
-    let props = this.props
-    let history = window.history
-    let ast = roundAst(props.ast)
-    let q = qs.stringify({
-      d: pathast.stringify(ast)
+    const { props } = this
+    const history = window.history
+    const ast = roundAst(props.ast)
+    const d = stringify(ast)
+    const q = qs.stringify({
+      d: d
     })
-    history.pushState(ast, '', '?' + q)
+    history.pushState(d, '', '?' + q)
   }
 
   updateState (e) {
-    let props = this.props
-    let q = window.location.search.replace(/^\?/, '')
-    let params = qs.parse(q)
+    const { props } = this
+    const q = window.location.search.replace(/^\?/, '')
+    const params = qs.parse(q)
     if (params.d) {
-      let ast = pathast.parse(params.d)
+      const ast = parse(params.d)
       props.updateAst(ast)
     }
   }
 
   componentDidMount () {
-    let props = this.props
     this.updateState()
     //window.addEventListener('popstate', this.updateState)
   }

util/round-ast.js

@@ -1,7 +1,9 @@
 
-import { round } from 'lodash'
+import { stringify } from 'path-ast'
+import { cloneDeep, round } from 'lodash'
 
-export default function(ast, precision) {
+export default function(originalAst, precision) {
+  let ast = cloneDeep(originalAst)
   ast.commands = ast.commands.map(function(com) {
     let params = {}
     Object.keys(com.params).forEach(function(key) {