From 3157e7f763636673a084ad19bd1622f986e27444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 5 Dec 2020 20:56:12 +0100
Subject: [PATCH 1/9] add basic drawing example

---
 docs/package.json                             |   1 +
 docs/src/demos/Examples/Drawing/Component.vue | 150 ++++++++++
 docs/src/demos/Examples/Drawing/Paper.js      |  35 +++
 docs/src/demos/Examples/Drawing/index.vue     |  57 ++++
 docs/src/docPages/examples/drawing.md         |   4 +
 docs/src/links.yaml                           |   2 +
 yarn.lock                                     | 262 +++++++++++++++++-
 7 files changed, 505 insertions(+), 6 deletions(-)
 create mode 100644 docs/src/demos/Examples/Drawing/Component.vue
 create mode 100644 docs/src/demos/Examples/Drawing/Paper.js
 create mode 100644 docs/src/demos/Examples/Drawing/index.vue
 create mode 100644 docs/src/docPages/examples/drawing.md

diff --git a/docs/package.json b/docs/package.json
index 9447fd4d..e4670ed6 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,6 +13,7 @@
     "@gridsome/vue-remark": "^0.2.6",
     "@mvasilkov/outdent": "^1.0.4",
     "collect.js": "^4.28.6",
+    "d3": "^6.3.0",
     "globby": "^11.0.0",
     "gridsome": "0.7.23",
     "gridsome-plugin-simple-analytics": "^1.1.0",
diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
new file mode 100644
index 00000000..255ce599
--- /dev/null
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -0,0 +1,150 @@
+<template>
+  <node-view-wrapper class="draw">
+    <button @click="clear">
+      clear
+    </button>
+    <svg viewBox="0 0 500 250" ref="canvas">
+      <template v-for="line in node.attrs.lines">
+        <path
+          v-if="line.id !== currentId"
+          :key="line.id"
+          :d="line.d"
+          :id="`id-${line.id}`"
+        />
+      </template>
+    </svg>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { v4 as uuid } from 'uuid'
+import * as d3 from 'd3'
+
+export default {
+  props: {
+    updateAttributes: {
+      type: Function,
+      required: true,
+    },
+
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      currentId: uuid(),
+    }
+  },
+
+  methods: {
+    clear() {
+      this.updateAttributes({
+        lines: [],
+      })
+    },
+  },
+
+  mounted() {
+    let ptdata = []
+    let path
+    let drawing = false
+
+    const line = d3.line()
+      .x(d => d.x)
+      .y(d => d.y)
+
+    const svg = d3.select(this.$refs.canvas)
+
+    const listen = event => {
+      drawing = true
+      ptdata = [] // reset point data
+
+      path = svg.append('path') // start a new line
+        .data([ptdata])
+        .attr('id', `id-${this.currentId}`)
+        .attr('d', line)
+
+      if (event.type === 'mousedown') {
+        svg.on('mousemove', onmove)
+      } else {
+        svg.on('touchmove', onmove)
+      }
+    }
+
+    const ignore = event => {
+      svg.on('mousemove', null)
+      svg.on('touchmove', null)
+
+      if (!drawing) {
+        return
+      }
+
+      drawing = false
+
+      d3.select(this.$refs.canvas).select(`#id-${this.currentId}`).remove()
+      this.currentId = uuid()
+    }
+
+    svg
+      .on('mousedown', listen)
+      .on('touchstart', listen)
+      .on('touchend', ignore)
+      .on('touchleave', ignore)
+      .on('mouseup', ignore)
+      .on('mouseleave', ignore)
+
+    // ignore default touch behavior
+    const touchEvents = ['touchstart', 'touchmove', 'touchend']
+    touchEvents.forEach(eventName => {
+      document.body.addEventListener(eventName, e => {
+        e.preventDefault()
+      })
+    })
+
+    function onmove(event) {
+      const point = d3.pointer(event)
+
+      // push a new data point onto the back
+      ptdata.push({ x: point[0], y: point[1] })
+      tick()
+    }
+
+    const tick = () => {
+      path.attr('d', points => {
+        const d = line(points)
+        const lines = this.node.attrs.lines.filter(item => item.id !== this.currentId)
+
+        this.updateAttributes({
+          lines: [
+            ...lines,
+            {
+              id: this.currentId,
+              d,
+            },
+          ],
+        })
+
+        return d
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.draw {
+  svg {
+    background: #EEE;
+    cursor: crosshair;
+  }
+
+  path {
+    fill: none;
+    stroke: #000;
+    stroke-width: 2;
+  }
+}
+</style>
diff --git a/docs/src/demos/Examples/Drawing/Paper.js b/docs/src/demos/Examples/Drawing/Paper.js
new file mode 100644
index 00000000..71eab1c3
--- /dev/null
+++ b/docs/src/demos/Examples/Drawing/Paper.js
@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueRenderer } from '@tiptap/vue'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'paper',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      lines: {
+        default: [],
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="paper"]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'paper' })]
+  },
+
+  addNodeView() {
+    return VueRenderer(Component)
+  },
+})
diff --git a/docs/src/demos/Examples/Drawing/index.vue b/docs/src/demos/Examples/Drawing/index.vue
new file mode 100644
index 00000000..5528538d
--- /dev/null
+++ b/docs/src/demos/Examples/Drawing/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import Collaboration from '@tiptap/extension-collaboration'
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import * as Y from 'yjs'
+import { WebsocketProvider } from 'y-websocket'
+import Paper from './Paper.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    const ydoc = new Y.Doc()
+    const provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-draw-example', ydoc)
+
+    this.editor = new Editor({
+      extensions: [
+        Document.extend({
+          content: 'paper paragraph',
+        }),
+        Paragraph,
+        Text,
+        Collaboration.configure({
+          provider,
+        }),
+        Paper,
+      ],
+      content: `
+        <div data-type="paper"></div>
+      `,
+      onUpdate: () => {
+        // console.log(this.editor.getJSON())
+      },
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/docs/src/docPages/examples/drawing.md b/docs/src/docPages/examples/drawing.md
new file mode 100644
index 00000000..81e41664
--- /dev/null
+++ b/docs/src/docPages/examples/drawing.md
@@ -0,0 +1,4 @@
+# Drawing
+
+<demo name="Examples/Drawing" inline />
+<demo name="Examples/Drawing" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 917049a2..4fc726ea 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -30,6 +30,8 @@
       link: /examples/book
     - title: For minimalists
       link: /examples/minimalist
+    - title: Drawing
+      link: /examples/drawing
 
 - title: Guide
   items:
diff --git a/yarn.lock b/yarn.lock
index e2f95437..3875cbe1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4300,16 +4300,16 @@ comma-separated-tokens@^1.0.0, comma-separated-tokens@^1.0.1:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
+commander@2, commander@^2.15.1, commander@^2.20.0, commander@^2.20.3, commander@^2.8.1:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.15.1, commander@^2.20.0, commander@^2.20.3, commander@^2.8.1:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -4955,6 +4955,246 @@ cypress@^6.0.0:
     url "^0.11.0"
     yauzl "^2.10.0"
 
+d3-array@2, d3-array@>=2.5, d3-array@^2.3.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.9.0.tgz#a3041ab298f57ecc88b7d91610c6bc5297c03fb9"
+  integrity sha512-yOokB8GozB6GAubW9n7phLdRugC8TgEjF6V1cX/q78L80d2tLirUnc0jvDSSF622JJJTmtnJOe9+WKs+yS5GFQ==
+
+d3-axis@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-2.0.0.tgz#40aebb65626ffe6d95e9441fbf9194274b328a8b"
+  integrity sha512-9nzB0uePtb+u9+dWir+HTuEAKJOEUYJoEwbJPsZ1B4K3iZUgzJcSENQ05Nj7S4CIfbZZ8/jQGoUzGKFznBhiiQ==
+
+d3-brush@2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
+  integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-drag "2"
+    d3-interpolate "1 - 2"
+    d3-selection "2"
+    d3-transition "2"
+
+d3-chord@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-2.0.0.tgz#32491b5665391180560f738e5c1ccd1e3c47ebae"
+  integrity sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==
+  dependencies:
+    d3-path "1 - 2"
+
+"d3-color@1 - 2", d3-color@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
+  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+
+d3-contour@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-2.0.0.tgz#80ee834988563e3bea9d99ddde72c0f8c089ea40"
+  integrity sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==
+  dependencies:
+    d3-array "2"
+
+d3-delaunay@5:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
+  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
+  dependencies:
+    delaunator "4"
+
+"d3-dispatch@1 - 2", d3-dispatch@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz#8a18e16f76dd3fcaef42163c97b926aa9b55e7cf"
+  integrity sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==
+
+d3-drag@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-2.0.0.tgz#9eaf046ce9ed1c25c88661911c1d5a4d8eb7ea6d"
+  integrity sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-selection "2"
+
+"d3-dsv@1 - 2", d3-dsv@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-2.0.0.tgz#b37b194b6df42da513a120d913ad1be22b5fe7c5"
+  integrity sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==
+  dependencies:
+    commander "2"
+    iconv-lite "0.4"
+    rw "1"
+
+"d3-ease@1 - 2", d3-ease@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-2.0.0.tgz#fd1762bfca00dae4bacea504b1d628ff290ac563"
+  integrity sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==
+
+d3-fetch@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-2.0.0.tgz#ecd7ef2128d9847a3b41b548fec80918d645c064"
+  integrity sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==
+  dependencies:
+    d3-dsv "1 - 2"
+
+d3-force@2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-2.1.1.tgz#f20ccbf1e6c9e80add1926f09b51f686a8bc0937"
+  integrity sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-quadtree "1 - 2"
+    d3-timer "1 - 2"
+
+"d3-format@1 - 2", d3-format@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
+  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+
+d3-geo@2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-2.0.1.tgz#2437fdfed3fe3aba2812bd8f30609cac83a7ee39"
+  integrity sha512-M6yzGbFRfxzNrVhxDJXzJqSLQ90q1cCyb3EWFZ1LF4eWOBYxFypw7I/NFVBNXKNqxv1bqLathhYvdJ6DC+th3A==
+  dependencies:
+    d3-array ">=2.5"
+
+d3-hierarchy@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz#dab88a58ca3e7a1bc6cab390e89667fcc6d20218"
+  integrity sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==
+
+"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2", d3-interpolate@2:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
+  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+  dependencies:
+    d3-color "1 - 2"
+
+"d3-path@1 - 2", d3-path@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
+  integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
+
+d3-polygon@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-2.0.0.tgz#13608ef042fbec625ba1598327564f03c0396d8e"
+  integrity sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==
+
+"d3-quadtree@1 - 2", d3-quadtree@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-2.0.0.tgz#edbad045cef88701f6fee3aee8e93fb332d30f9d"
+  integrity sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==
+
+d3-random@2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-2.2.2.tgz#5eebd209ef4e45a2b362b019c1fb21c2c98cbb6e"
+  integrity sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==
+
+d3-scale-chromatic@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
+  integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
+  dependencies:
+    d3-color "1 - 2"
+    d3-interpolate "1 - 2"
+
+d3-scale@3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.2.3.tgz#be380f57f1f61d4ff2e6cbb65a40593a51649cfd"
+  integrity sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==
+  dependencies:
+    d3-array "^2.3.0"
+    d3-format "1 - 2"
+    d3-interpolate "1.2.0 - 2"
+    d3-time "1 - 2"
+    d3-time-format "2 - 3"
+
+d3-selection@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-2.0.0.tgz#94a11638ea2141b7565f883780dabc7ef6a61066"
+  integrity sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==
+
+d3-shape@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.0.0.tgz#2331b62fa784a2a1daac47a7233cfd69301381fd"
+  integrity sha512-djpGlA779ua+rImicYyyjnOjeubyhql1Jyn1HK0bTyawuH76UQRWXd+pftr67H6Fa8hSwetkgb/0id3agKWykw==
+  dependencies:
+    d3-path "1 - 2"
+
+"d3-time-format@2 - 3", d3-time-format@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+  dependencies:
+    d3-time "1 - 2"
+
+"d3-time@1 - 2", d3-time@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.0.0.tgz#ad7c127d17c67bd57a4c61f3eaecb81108b1e0ab"
+  integrity sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q==
+
+"d3-timer@1 - 2", d3-timer@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-2.0.0.tgz#055edb1d170cfe31ab2da8968deee940b56623e6"
+  integrity sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==
+
+d3-transition@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-2.0.0.tgz#366ef70c22ef88d1e34105f507516991a291c94c"
+  integrity sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==
+  dependencies:
+    d3-color "1 - 2"
+    d3-dispatch "1 - 2"
+    d3-ease "1 - 2"
+    d3-interpolate "1 - 2"
+    d3-timer "1 - 2"
+
+d3-zoom@2:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-2.0.0.tgz#f04d0afd05518becce879d04709c47ecd93fba54"
+  integrity sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==
+  dependencies:
+    d3-dispatch "1 - 2"
+    d3-drag "2"
+    d3-interpolate "1 - 2"
+    d3-selection "2"
+    d3-transition "2"
+
+d3@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-6.3.0.tgz#516311510b345a70a5d9648626a6a74a2ff0b7f7"
+  integrity sha512-VllKodQILRuCxL/t6HAU6JAeNjcaqFZqWOtKgMbip0lpIiII+Rn7/FY1qfTELWZwt0KM/RfNf65UI68LZ5WYWA==
+  dependencies:
+    d3-array "2"
+    d3-axis "2"
+    d3-brush "2"
+    d3-chord "2"
+    d3-color "2"
+    d3-contour "2"
+    d3-delaunay "5"
+    d3-dispatch "2"
+    d3-drag "2"
+    d3-dsv "2"
+    d3-ease "2"
+    d3-fetch "2"
+    d3-force "2"
+    d3-format "2"
+    d3-geo "2"
+    d3-hierarchy "2"
+    d3-interpolate "2"
+    d3-path "2"
+    d3-polygon "2"
+    d3-quadtree "2"
+    d3-random "2"
+    d3-scale "3"
+    d3-scale-chromatic "2"
+    d3-selection "2"
+    d3-shape "2"
+    d3-time "2"
+    d3-time-format "3"
+    d3-timer "2"
+    d3-transition "2"
+    d3-zoom "2"
+
 dargs@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
@@ -5188,6 +5428,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+delaunator@4:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
+  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -7594,7 +7839,7 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -12382,6 +12627,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
+
 rxjs@^6.3.3, rxjs@^6.4.0:
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"

From 3a28787d8549415139a8edd3ac345b4f92499ac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 5 Dec 2020 22:51:18 +0100
Subject: [PATCH 2/9] refactoring

---
 docs/src/demos/Examples/Drawing/Component.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index 255ce599..5cec9a54 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -90,24 +90,17 @@ export default {
 
     svg
       .on('mousedown', listen)
+      .on('mouseup', ignore)
+      .on('mouseleave', ignore)
       .on('touchstart', listen)
       .on('touchend', ignore)
       .on('touchleave', ignore)
-      .on('mouseup', ignore)
-      .on('mouseleave', ignore)
-
-    // ignore default touch behavior
-    const touchEvents = ['touchstart', 'touchmove', 'touchend']
-    touchEvents.forEach(eventName => {
-      document.body.addEventListener(eventName, e => {
-        e.preventDefault()
-      })
-    })
 
     function onmove(event) {
-      const point = d3.pointer(event)
+      event.preventDefault()
+
+      const point = d3.pointers(event)[0]
 
-      // push a new data point onto the back
       ptdata.push({ x: point[0], y: point[1] })
       tick()
     }

From 9a6049f4c4ca7ee65178346b53c2acaf28366b69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 5 Dec 2020 23:06:06 +0100
Subject: [PATCH 3/9] refactoring

---
 docs/src/demos/Examples/Drawing/Component.vue | 139 +++++++++---------
 1 file changed, 71 insertions(+), 68 deletions(-)

diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index 5cec9a54..08437e25 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -4,12 +4,12 @@
       clear
     </button>
     <svg viewBox="0 0 500 250" ref="canvas">
-      <template v-for="line in node.attrs.lines">
+      <template v-for="item in node.attrs.lines">
         <path
-          v-if="line.id !== currentId"
-          :key="line.id"
-          :d="line.d"
-          :id="`id-${line.id}`"
+          v-if="item.id !== currentId"
+          :key="item.id"
+          :d="item.d"
+          :id="`id-${item.id}`"
         />
       </template>
     </svg>
@@ -36,6 +36,13 @@ export default {
   data() {
     return {
       currentId: uuid(),
+      ptdata: [],
+      path: null,
+      drawing: false,
+      svg: null,
+      line: d3.line()
+        .x(d => d.x)
+        .y(d => d.y),
     }
   },
 
@@ -45,69 +52,10 @@ export default {
         lines: [],
       })
     },
-  },
 
-  mounted() {
-    let ptdata = []
-    let path
-    let drawing = false
-
-    const line = d3.line()
-      .x(d => d.x)
-      .y(d => d.y)
-
-    const svg = d3.select(this.$refs.canvas)
-
-    const listen = event => {
-      drawing = true
-      ptdata = [] // reset point data
-
-      path = svg.append('path') // start a new line
-        .data([ptdata])
-        .attr('id', `id-${this.currentId}`)
-        .attr('d', line)
-
-      if (event.type === 'mousedown') {
-        svg.on('mousemove', onmove)
-      } else {
-        svg.on('touchmove', onmove)
-      }
-    }
-
-    const ignore = event => {
-      svg.on('mousemove', null)
-      svg.on('touchmove', null)
-
-      if (!drawing) {
-        return
-      }
-
-      drawing = false
-
-      d3.select(this.$refs.canvas).select(`#id-${this.currentId}`).remove()
-      this.currentId = uuid()
-    }
-
-    svg
-      .on('mousedown', listen)
-      .on('mouseup', ignore)
-      .on('mouseleave', ignore)
-      .on('touchstart', listen)
-      .on('touchend', ignore)
-      .on('touchleave', ignore)
-
-    function onmove(event) {
-      event.preventDefault()
-
-      const point = d3.pointers(event)[0]
-
-      ptdata.push({ x: point[0], y: point[1] })
-      tick()
-    }
-
-    const tick = () => {
-      path.attr('d', points => {
-        const d = line(points)
+    tick() {
+      this.path.attr('d', points => {
+        const d = this.line(points)
         const lines = this.node.attrs.lines.filter(item => item.id !== this.currentId)
 
         this.updateAttributes({
@@ -122,7 +70,62 @@ export default {
 
         return d
       })
-    }
+    },
+
+    listen(event) {
+      this.drawing = true
+      this.ptdata = []
+
+      this.path = this.svg
+        .append('path')
+        .data([this.ptdata])
+        .attr('id', `id-${this.currentId}`)
+        .attr('d', this.line)
+
+      const moveEvent = event.type === 'mousedown'
+        ? 'mousemove'
+        : 'touchmove'
+
+      this.svg.on(moveEvent, this.onmove)
+    },
+
+    ignore() {
+      this.svg.on('mousemove', null)
+      this.svg.on('touchmove', null)
+
+      if (!this.drawing) {
+        return
+      }
+
+      this.drawing = false
+
+      d3.select(this.$refs.canvas)
+        .select(`#id-${this.currentId}`)
+        .remove()
+
+      this.currentId = uuid()
+    },
+
+    onmove(event) {
+      event.preventDefault()
+
+      const point = d3.pointers(event)[0]
+
+      this.ptdata.push({ x: point[0], y: point[1] })
+      this.tick()
+    },
+  },
+
+  mounted() {
+    this.svg = d3.select(this.$refs.canvas)
+
+    this.svg
+      .on('mousedown', this.listen)
+      .on('mouseup', this.ignore)
+      .on('mouseleave', this.ignore)
+      .on('touchstart', this.listen)
+      .on('touchend', this.ignore)
+      .on('touchleave', this.ignore)
   },
 }
 </script>

From ec62582770d206977c282410a1de3788e793fb83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 5 Dec 2020 23:27:50 +0100
Subject: [PATCH 4/9] add color and size

---
 docs/src/demos/Examples/Drawing/Component.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index 08437e25..c12e192d 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -1,5 +1,12 @@
 <template>
   <node-view-wrapper class="draw">
+    <input type="color" v-model="color">
+    <input
+      type="number"
+      min="1"
+      max="10"
+      v-model="size"
+    >
     <button @click="clear">
       clear
     </button>
@@ -10,6 +17,8 @@
           :key="item.id"
           :d="item.d"
           :id="`id-${item.id}`"
+          :stroke="item.color"
+          :stroke-width="item.size"
         />
       </template>
     </svg>
@@ -35,6 +44,8 @@ export default {
 
   data() {
     return {
+      color: '#000000',
+      size: 2,
       currentId: uuid(),
       ptdata: [],
       path: null,
@@ -63,6 +74,8 @@ export default {
             ...lines,
             {
               id: this.currentId,
+              color: this.color,
+              size: this.size,
               d,
             },
           ],
@@ -81,6 +94,8 @@ export default {
         .data([this.ptdata])
         .attr('id', `id-${this.currentId}`)
         .attr('d', this.line)
+        .attr('stroke', this.color)
+        .attr('stroke-width', this.size)
 
       const moveEvent = event.type === 'mousedown'
         ? 'mousemove'
@@ -139,8 +154,8 @@ export default {
 
   path {
     fill: none;
-    stroke: #000;
-    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
   }
 }
 </style>

From 0f15f028dc8053bad1da590f5515a11027b82cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 5 Dec 2020 23:50:18 +0100
Subject: [PATCH 5/9] refactoring

---
 docs/src/demos/Examples/Drawing/Component.vue | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index c12e192d..a8a6b131 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -15,7 +15,7 @@
         <path
           v-if="item.id !== currentId"
           :key="item.id"
-          :d="item.d"
+          :d="item.path"
           :id="`id-${item.id}`"
           :stroke="item.color"
           :stroke-width="item.size"
@@ -47,13 +47,10 @@ export default {
       color: '#000000',
       size: 2,
       currentId: uuid(),
-      ptdata: [],
+      points: [],
       path: null,
       drawing: false,
       svg: null,
-      line: d3.line()
-        .x(d => d.x)
-        .y(d => d.y),
     }
   },
 
@@ -66,7 +63,7 @@ export default {
 
     tick() {
       this.path.attr('d', points => {
-        const d = this.line(points)
+        const path = d3.line()(points)
         const lines = this.node.attrs.lines.filter(item => item.id !== this.currentId)
 
         this.updateAttributes({
@@ -76,24 +73,22 @@ export default {
               id: this.currentId,
               color: this.color,
               size: this.size,
-              d,
+              path,
             },
           ],
         })
 
-        return d
+        return path
       })
     },
 
     listen(event) {
       this.drawing = true
-      this.ptdata = []
-
+      this.points = []
       this.path = this.svg
         .append('path')
-        .data([this.ptdata])
+        .data([this.points])
         .attr('id', `id-${this.currentId}`)
-        .attr('d', this.line)
         .attr('stroke', this.color)
         .attr('stroke-width', this.size)
 
@@ -113,20 +108,13 @@ export default {
       }
 
       this.drawing = false
-
-      d3.select(this.$refs.canvas)
-        .select(`#id-${this.currentId}`)
-        .remove()
-
+      this.svg.select(`#id-${this.currentId}`).remove()
       this.currentId = uuid()
     },
 
     onmove(event) {
       event.preventDefault()
-
-      const point = d3.pointers(event)[0]
-
-      this.ptdata.push({ x: point[0], y: point[1] })
+      this.points.push(d3.pointers(event)[0])
       this.tick()
     },
   },

From d2cec1062e33324b07db0c4c9a5d5d4767593f99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 6 Dec 2020 20:57:38 +0100
Subject: [PATCH 6/9] refactoring

---
 docs/src/demos/Examples/Drawing/Component.vue | 102 +++++++++---------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index a8a6b131..f372ee15 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -13,7 +13,7 @@
     <svg viewBox="0 0 500 250" ref="canvas">
       <template v-for="item in node.attrs.lines">
         <path
-          v-if="item.id !== currentId"
+          v-if="item.id !== id"
           :key="item.id"
           :d="item.path"
           :id="`id-${item.id}`"
@@ -46,31 +46,61 @@ export default {
     return {
       color: '#000000',
       size: 2,
-      currentId: uuid(),
-      points: [],
-      path: null,
-      drawing: false,
       svg: null,
+      path: null,
+      points: [],
+      drawing: false,
+      id: uuid(),
     }
   },
 
   methods: {
-    clear() {
-      this.updateAttributes({
-        lines: [],
-      })
+    onStartDrawing(event) {
+      this.drawing = true
+      this.points = []
+      this.path = this.svg
+        .append('path')
+        .data([this.points])
+        .attr('id', `id-${this.id}`)
+        .attr('stroke', this.color)
+        .attr('stroke-width', this.size)
+
+      const moveEvent = event.type === 'mousedown'
+        ? 'mousemove'
+        : 'touchmove'
+
+      this.svg.on(moveEvent, this.onMove)
+    },
+
+    onMove(event) {
+      event.preventDefault()
+      this.points.push(d3.pointers(event)[0])
+      this.tick()
+    },
+
+    onEndDrawing() {
+      this.svg.on('mousemove', null)
+      this.svg.on('touchmove', null)
+
+      if (!this.drawing) {
+        return
+      }
+
+      this.drawing = false
+      this.svg.select(`#id-${this.id}`).remove()
+      this.id = uuid()
     },
 
     tick() {
       this.path.attr('d', points => {
         const path = d3.line()(points)
-        const lines = this.node.attrs.lines.filter(item => item.id !== this.currentId)
+        const lines = this.node.attrs.lines.filter(item => item.id !== this.id)
 
         this.updateAttributes({
           lines: [
             ...lines,
             {
-              id: this.currentId,
+              id: this.id,
               color: this.color,
               size: this.size,
               path,
@@ -82,40 +112,10 @@ export default {
       })
     },
 
-    listen(event) {
-      this.drawing = true
-      this.points = []
-      this.path = this.svg
-        .append('path')
-        .data([this.points])
-        .attr('id', `id-${this.currentId}`)
-        .attr('stroke', this.color)
-        .attr('stroke-width', this.size)
-
-      const moveEvent = event.type === 'mousedown'
-        ? 'mousemove'
-        : 'touchmove'
-
-      this.svg.on(moveEvent, this.onmove)
-    },
-
-    ignore() {
-      this.svg.on('mousemove', null)
-      this.svg.on('touchmove', null)
-
-      if (!this.drawing) {
-        return
-      }
-
-      this.drawing = false
-      this.svg.select(`#id-${this.currentId}`).remove()
-      this.currentId = uuid()
-    },
-
-    onmove(event) {
-      event.preventDefault()
-      this.points.push(d3.pointers(event)[0])
-      this.tick()
+    clear() {
+      this.updateAttributes({
+        lines: [],
+      })
     },
   },
 
@@ -123,12 +123,12 @@ export default {
     this.svg = d3.select(this.$refs.canvas)
 
     this.svg
-      .on('mousedown', this.listen)
-      .on('mouseup', this.ignore)
-      .on('mouseleave', this.ignore)
-      .on('touchstart', this.listen)
-      .on('touchend', this.ignore)
-      .on('touchleave', this.ignore)
+      .on('mousedown', this.onStartDrawing)
+      .on('mouseup', this.onEndDrawing)
+      .on('mouseleave', this.onEndDrawing)
+      .on('touchstart', this.onStartDrawing)
+      .on('touchend', this.onEndDrawing)
+      .on('touchleave', this.onEndDrawing)
   },
 }
 </script>

From 09c7b5291f00aae71c31bee57d7f7f8d785a1785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 7 Dec 2020 10:10:53 +0100
Subject: [PATCH 7/9] simplify paths

---
 docs/package.json                             |  1 +
 docs/src/demos/Examples/Drawing/Component.vue | 39 ++++++++++++-------
 yarn.lock                                     |  5 +++
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index e4670ed6..7cb48af6 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -24,6 +24,7 @@
     "remark-container": "^0.1.2",
     "remark-toc": "^7.0.0",
     "remixicon": "^2.5.0",
+    "simplify-js": "^1.2.4",
     "vue-github-button": "^1.1.2",
     "vue-live": "^1.16.0",
     "y-indexeddb": "^9.0.5",
diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index f372ee15..9bdfa050 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -28,6 +28,7 @@
 <script>
 import { v4 as uuid } from 'uuid'
 import * as d3 from 'd3'
+import simplify from 'simplify-js'
 
 export default {
   props: {
@@ -91,25 +92,33 @@ export default {
       this.id = uuid()
     },
 
+    simplifyPoints(points) {
+      return simplify(points.map(point => ({ x: point[0], y: point[1] }))).map(point => [point.x, point.y])
+    },
+
     tick() {
-      this.path.attr('d', points => {
-        const path = d3.line()(points)
-        const lines = this.node.attrs.lines.filter(item => item.id !== this.id)
+      requestAnimationFrame(() => {
+        this.path.attr('d', points => {
+          const path = d3.line().curve(d3.curveBasis)(points)
+          const simplifiedPath = d3.line().curve(d3.curveBasis)(this.simplifyPoints(points))
+          const lines = this.node.attrs.lines.filter(item => item.id !== this.id)
 
-        this.updateAttributes({
-          lines: [
-            ...lines,
-            {
-              id: this.id,
-              color: this.color,
-              size: this.size,
-              path,
-            },
-          ],
+          this.updateAttributes({
+            lines: [
+              ...lines,
+              {
+                id: this.id,
+                color: this.color,
+                size: this.size,
+                path: simplifiedPath,
+              },
+            ],
+          })
+
+          return path
         })
-
-        return path
       })
+
     },
 
     clear() {
diff --git a/yarn.lock b/yarn.lock
index 3875cbe1..87469bc8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13000,6 +13000,11 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+simplify-js@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/simplify-js/-/simplify-js-1.2.4.tgz#7aab22d6df547ffd40ef0761ccd82b75287d45c7"
+  integrity sha512-vITfSlwt7h/oyrU42R83mtzFpwYk3+mkH9bOHqq/Qw6n8rtR7aE3NZQ5fbcyCUVVmuMJR6ynsAhOfK2qoah8Jg==
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"

From 2e21a5bf3883b8354ef998724a13cd04499e1ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 7 Dec 2020 10:44:08 +0100
Subject: [PATCH 8/9] refactoring

---
 docs/src/demos/Examples/Drawing/index.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/docs/src/demos/Examples/Drawing/index.vue b/docs/src/demos/Examples/Drawing/index.vue
index 5528538d..7d375d74 100644
--- a/docs/src/demos/Examples/Drawing/index.vue
+++ b/docs/src/demos/Examples/Drawing/index.vue
@@ -41,12 +41,6 @@ export default {
         }),
         Paper,
       ],
-      content: `
-        <div data-type="paper"></div>
-      `,
-      onUpdate: () => {
-        // console.log(this.editor.getJSON())
-      },
     })
   },
 

From f275946da5ff7e9a9fcbacb0daf483e9845cd655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 7 Dec 2020 11:20:06 +0100
Subject: [PATCH 9/9] dont use simplified path for now

---
 docs/src/demos/Examples/Drawing/Component.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index 9bdfa050..9fed1988 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -100,7 +100,7 @@ export default {
       requestAnimationFrame(() => {
         this.path.attr('d', points => {
           const path = d3.line().curve(d3.curveBasis)(points)
-          const simplifiedPath = d3.line().curve(d3.curveBasis)(this.simplifyPoints(points))
+          // const simplifiedPath = d3.line().curve(d3.curveBasis)(this.simplifyPoints(points))
           const lines = this.node.attrs.lines.filter(item => item.id !== this.id)
 
           this.updateAttributes({
@@ -110,7 +110,8 @@ export default {
                 id: this.id,
                 color: this.color,
                 size: this.size,
-                path: simplifiedPath,
+                path,
+                // path: simplifiedPath,
               },
             ],
           })