simplify paths

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

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,9 +92,15 @@ 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() {
+      requestAnimationFrame(() => {
         this.path.attr('d', points => {
-        const path = d3.line()(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({
@@ -103,13 +110,15 @@ export default {
                 id: this.id,
                 color: this.color,
                 size: this.size,
-              path,
+                path: simplifiedPath,
               },
             ],
           })
 
           return path
         })
+      })
+
     },
 
     clear() {

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"