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] 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"