Examples: fix parcel build, add

* replace d3-voronoi with delaunator * tsc commpiler might complain cause of @types/delaunator @types/delaunator version 3.0 is coming soon and will fix it * examples/src folder cannot have subfolder as relative paths are buggy in parcel-bundler (parcel-bundler/parcel#2786) * add examples/README.md
tobiaskraus · May 11, 2019 · 14cc986 · 14cc986
1 parent f5d3d04
commit 14cc986
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 28 deletions.
diff --git a/LICENCE → LICENSE b/LICENCE → LICENSE
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,31 @@
+# svg-gen Examples
+
+Some code examples, to see how this library works.
+
+## TypeScript & parcel-bundler
+
+All examples are written in TypeScript.
+In order to use the svg-gen library directly (realive path: ..) instead of npm installing and to avoid much configuration, we use parcel.
+Parcel is bundler like Webpack, but with less configuration.
+
+## Current issue: Folder structure
+
+I tried to have all examples in subfolders (html + css files).
+And to have one index.html in examples root.
+But parcel resolves the relative paths wrong, when html files are in subfolders [Parcel issue 2786](https://github.com/parcel-bundler/parcel/issues/2786)
+
+## Build and Test examples
+
+```sh
+npm run build
+```
+
+the built files will be in in examples/dist/
+
+## Develop
+
+```sh
+npm start
+```
+
+The browser will open autommatically the local webserver and refreshes when changes are made.
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
@@ -4,18 +4,18 @@
     "description": "",
     "main": "index.html",
     "scripts": {
-        "start": "rm ./dist/ -rf && parcel serve ./src/**/*",
-        "build": "rm ./dist/ -rf && parcel build ./src/**/* --public-url ../ && parcel build ./src/index.html --public-url ."
+        "start": "rm ./dist/ -rf && parcel serve ./src/**/* --public-url ./",
+        "build": "rm ./dist/ -rf && parcel build ./src/index.html --public-url ./ --no-minify"
     },
     "author": "Tobias Kraus <contact@tobias-kraus.com> (www.tobias-kraus.com)",
     "license": "ISC",
     "devDependencies": {
         "@types/d3": "^5.7.2",
-        "@types/d3-voronoi": "^1.1.9",
+        "@types/delaunator": "^2.0.0",
         "parcel-bundler": "^1.12.3"
     },
     "dependencies": {
         "d3": "^5.9.2",
-        "d3-voronoi": "^1.1.4"
+        "delaunator": "^3.0.2"
     }
 }
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -21,8 +21,8 @@ <h1>svg-gen Examples</h1>
 
     <div class="content">
         <ul>
-            <li><a href="./points-grid/index.html">PointsGrid</a></li>
-            <li><a href="./triangles-web-with-d3/index.html">Triangles Web with d3</a></li>
+            <li><a href="./points-grid.html">PointsGrid</a></li>
+            <li><a href="./triangles-web-with-d3.html">Triangles Web with d3</a></li>
         </ul>    
     </div>
 </body>

diff --git a/examples/src/points-grid/index.html → examples/src/points-grid.html b/examples/src/points-grid/index.html → examples/src/points-grid.html
@@ -13,12 +13,12 @@
         }
     </style>
 
-    <link rel="stylesheet" href="../example.css">
+    <link rel="stylesheet" href="./example.css">
 </head>
 <body>
     <div class="header">
         <h1>
-            <a href="../index.html">svg-gen Examples</a>&thinsp;
+            <a href="./index.html">svg-gen Examples</a>&thinsp;
             / PointsGrid
         </h1>
         <p class="code-link">See source code on&thinsp;

diff --git a/examples/src/points-grid/points-grid.ts → examples/src/points-grid.ts b/examples/src/points-grid/points-grid.ts → examples/src/points-grid.ts
@@ -1,4 +1,4 @@
-import { PointsGrid, SvgRenderer } from '../../../src/index';
+import { PointsGrid, SvgRenderer } from '../../src/index';
 
 function example1() {
     let pointsGrid = new PointsGrid({

diff --git a/...ples/src/triangles-web-with-d3/index.html → examples/src/triangles-web-with-d3.html b/...ples/src/triangles-web-with-d3/index.html → examples/src/triangles-web-with-d3.html
@@ -1,37 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    
+
     <title>svg-gen example: triangles-web-with-d3</title>
 
-    <link rel="stylesheet" href="../example.css">
-    
+    <link rel="stylesheet" href="./example.css">
+
     <style>
         polygon {
             fill: purple;
             stroke: white;
         }
     </style>
 </head>
+
 <body>
     <div class="header">
         <h1>
-            <a href="../index.html">svg-gen Examples</a> / Triangles Web with d3
+            <a href="./index.html">svg-gen Examples</a> / Triangles Web with d3
         </h1>
         <p class="code-link">See source code on&ensp;
             <a href="https://github.com/tobiaskraus/svg-gen/tree/master/examples/src/triangles-web-with-d3/">
                 github.com/tobiaskraus/svg-gen/.../examples/...
             </a>
         </p>
     </div>
-  
+
     <div class="content">
         <svg id="svg"></svg>
     </div>
 
     <script src="./triangles-web-with-d3.ts"></script>
 </body>
+
 </html>
diff --git a/...gles-web-with-d3/triangles-web-with-d3.ts → examples/src/triangles-web-with-d3.ts b/...gles-web-with-d3/triangles-web-with-d3.ts → examples/src/triangles-web-with-d3.ts
@@ -1,9 +1,8 @@
 import * as d3 from 'd3';
-import * as voronoi from 'd3-voronoi';
-
-import { PointsGrid } from '../../../src';
-import { Point } from '../../../src/model/types';
+import Delaunator from 'delaunator';
 
+import { PointsGrid } from '../../src';
+import { Point } from '../../src/model/types';
 
 interface TrianglesWebOptions {
     svgSelector: string;
@@ -12,13 +11,13 @@ interface TrianglesWebOptions {
 
 class TrianglesWeb {
 
-    constructor (
+    constructor(
         private options: TrianglesWebOptions,
     ) {
         let svg = document.querySelector(this.options.svgSelector),
             width = svg!.getBoundingClientRect().width,
             height = svg!.getBoundingClientRect().height,
-            {rows, cols} = this.getWebDimension(this.options.rowsAndCols, width, height);
+            { rows, cols } = this.getWebDimension(this.options.rowsAndCols, width, height);
 
         let pointsGrid = new PointsGrid({
             maxX: Math.round(width),
@@ -30,8 +29,8 @@ class TrianglesWeb {
             pointsOnLeftEdge: true,
             pointsOnRightEdge: true,
             pointsOnTopEdge: true,
-            randomDistortionX: (width / (cols -1)) * 0.5,
-            randomDistortionY: (height / (rows -1)) * 0.5,
+            randomDistortionX: (width / (cols - 1)) * 0.3,
+            randomDistortionY: (height / (rows - 1)) * 0.3,
         });
 
         // flatten array
@@ -52,20 +51,34 @@ class TrianglesWeb {
             .attr('cx', d => d[0])
             .attr('cy', d => d[1]);
 
-        let graph = voronoi.voronoi();
-        let triangles = graph.triangles(points);
+        // let graph = voronoi.voronoi();
+        // let triangles = graph.triangles(points);
+        // console.log('triangles', triangles);
+
+        let graph = Delaunator.from(points);
+        console.log('graph', graph);
+
+        // console.log(graph);
+
+        // retrieve triangles from graph.triangles (Uint32Array to [number, number, number][])
+        let triangles = this.getTriangles(graph, points);
         console.log('triangles', triangles);
 
+        // let triangles = Array.prototype.slice.call(graph.triangles);
+
+
         // draw triangles
         d3.select(this.options.svgSelector)
             .selectAll('polygon')
+            // .data(triangles)
             .data(triangles)
             .enter()
             .append('polygon')
-            .attr('points', d => `${d[0][0]},${d[0][1]} ${d[1][0]},${d[1][1]} ${d[2][0]},${d[2][1]}`);
+            // .attr('points', d => `${d[0][0]},${d[0][1]} ${d[1][0]},${d[1][1]} ${d[2][0]},${d[2][1]}`);
+            .attr('points', (d, i) => `${d[0][0]},${d[0][1]} ${d[1][0]},${d[1][1]} ${d[2][0]},${d[2][1]}`);
     }
 
-    private getWebDimension (rowsAndCols: number, svgWidth: number, svgHeight: number) {
+    private getWebDimension(rowsAndCols: number, svgWidth: number, svgHeight: number) {
         // rows + cols = rowsAndCols
         // svgWidth / svgHeight = cols / rows
         let ratioWidth = svgWidth / (svgWidth + svgHeight),
@@ -76,6 +89,18 @@ class TrianglesWeb {
             rows: Math.floor(rows),
         }
     }
+
+    private getTriangles(graph: Delaunator<ArrayLike<number>>, points: Point[]): Point[][] {
+        let triangles: Point[][] = [];
+        for (let i = 0; i < graph.triangles.length; i += 3) {
+            triangles.push([
+                points[graph.triangles[i]],
+                points[graph.triangles[i + 1]],
+                points[graph.triangles[i + 2]],
+            ]);
+        }
+        return triangles;
+    }
 }
 
 new TrianglesWeb({

diff --git a/examples/tsconfig.json b/examples/tsconfig.json
@@ -1,7 +1,8 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es2015",
         "module": "commonjs",
-        "baseUrl": "./"
+        "baseUrl": "./",
+        "esModuleInterop": true
     }
 }