Geometry: split to files, add tree shake demo (#1453)

clientIO · Jun 15, 2021 · 15019da · 15019da
1 parent c326f1c
commit 15019da
Show file tree

Hide file tree

Showing 21 changed files with 5,854 additions and 5,672 deletions.
diff --git a/demo/tree-shake/index.L.ts b/demo/tree-shake/index.L.ts
@@ -0,0 +1,6 @@
+import * as joint from '../../';
+
+console.log('Point', new joint.g.Point());
+console.log('PolyLine', new joint.g.Polyline('10,10 20,20 30,30').bbox());
+console.log('Path', new joint.g.Path('M 0 -5 L -10 0 L 0 5 Z').bbox());
+console.log(new joint.dia.Graph());
diff --git a/demo/tree-shake/index.M.ts b/demo/tree-shake/index.M.ts
@@ -0,0 +1,7 @@
+import * as joint from '../../';
+
+console.log('Point', new joint.g.Point());
+console.log('PolyLine', new joint.g.Polyline('10,10 20,20 30,30').bbox());
+console.log('Path', new joint.g.Path('M 0 -5 L -10 0 L 0 5 Z').bbox());
+
+
diff --git a/demo/tree-shake/index.S.ts b/demo/tree-shake/index.S.ts
@@ -0,0 +1,5 @@
+import * as joint from '../../';
+
+console.log('Point', new joint.g.Point());
+
+
diff --git a/demo/tree-shake/index.html b/demo/tree-shake/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Rappid Visio Cross-Functional FlowChart Import</title>
+    <link rel="stylesheet" type="text/css" href="css/styles.css">
+</head>
+<body>
+
+<div id="paper"></div>
+
+<script src="dist/bundle.js"></script>
+
+</body>
+</html>
diff --git a/demo/tree-shake/package.json b/demo/tree-shake/package.json
@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "start": "npm run analyze-S && npm run analyze-M && npm run analyze-L",
+    "analyze-S": "webpack --entry=./index.S.ts -o ./dist/S --profile --json > stats.S.json && webpack-bundle-analyzer ./stats.S.json ./dist/S --mode static --report stats.S.html --no-open --title=Small Bundle",
+    "analyze-M": "webpack --entry=./index.M.ts -o ./dist/M --profile --json > stats.M.json && webpack-bundle-analyzer ./stats.M.json ./dist/M --mode static --report stats.M.html --no-open --title=Medium Bundle",
+    "analyze-L": "webpack --entry=./index.L.ts -o ./dist/L --profile --json > stats.L.json && webpack-bundle-analyzer ./stats.L.json ./dist/L --mode static --report stats.L.html --no-open --title=Large Bundle"
+  },
+  "devDependencies": {
+    "ts-loader": "^8.0.17",
+    "webpack": "^5.32.0",
+    "webpack-bundle-analyzer": "^4.4.1",
+    "webpack-cli": "^4.6.0"
+  }
+}
diff --git a/demo/tree-shake/tsconfig.json b/demo/tree-shake/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "ES5",
+    "moduleResolution": "node",
+    "lib": [
+      "dom"
+    ],
+    "noImplicitAny": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "strictNullChecks": false,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
+  },
+  "compileOnSave": false
+}
diff --git a/demo/tree-shake/webpack.config.js b/demo/tree-shake/webpack.config.js
@@ -0,0 +1,24 @@
+const path = process.cwd() + '/dist';
+
+module.exports = {
+    entry: './index.S.ts',
+    mode: 'development',
+    output: {
+        path,
+        filename: 'bundle.js'
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+        alias: {
+            'underscore': 'lodash'
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: [{ loader: 'ts-loader', options: { allowTsInNodeModules: true }}]
+            }
+        ]
+    }
+};
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "scripts": {
     "test": "grunt test"
   },
+  "sideEffects": false,
   "version": "3.3.1",
   "main": "dist/joint.min.js",
   "module": "joint.mjs",

diff --git a/src/g/bezier.mjs b/src/g/bezier.mjs
@@ -0,0 +1,175 @@
+import { Path } from './path.mjs';
+import { Curve } from './curve.mjs';
+import { Point } from './point.mjs';
+
+export const bezier = {
+
+    // Cubic Bezier curve path through points.
+    // @deprecated
+    // @param {array} points Array of points through which the smooth line will go.
+    // @return {array} SVG Path commands as an array
+    curveThroughPoints: function(points) {
+
+        console.warn('deprecated');
+
+        return new Path(Curve.throughPoints(points)).serialize();
+    },
+
+    // Get open-ended Bezier Spline Control Points.
+    // @deprecated
+    // @param knots Input Knot Bezier spline points (At least two points!).
+    // @param firstControlPoints Output First Control points. Array of knots.length - 1 length.
+    // @param secondControlPoints Output Second Control points. Array of knots.length - 1 length.
+    getCurveControlPoints: function(knots) {
+
+        console.warn('deprecated');
+
+        var firstControlPoints = [];
+        var secondControlPoints = [];
+        var n = knots.length - 1;
+        var i;
+
+        // Special case: Bezier curve should be a straight line.
+        if (n == 1) {
+            // 3P1 = 2P0 + P3
+            firstControlPoints[0] = new Point(
+                (2 * knots[0].x + knots[1].x) / 3,
+                (2 * knots[0].y + knots[1].y) / 3
+            );
+
+            // P2 = 2P1 – P0
+            secondControlPoints[0] = new Point(
+                2 * firstControlPoints[0].x - knots[0].x,
+                2 * firstControlPoints[0].y - knots[0].y
+            );
+
+            return [firstControlPoints, secondControlPoints];
+        }
+
+        // Calculate first Bezier control points.
+        // Right hand side vector.
+        var rhs = [];
+
+        // Set right hand side X values.
+        for (i = 1; i < n - 1; i++) {
+            rhs[i] = 4 * knots[i].x + 2 * knots[i + 1].x;
+        }
+
+        rhs[0] = knots[0].x + 2 * knots[1].x;
+        rhs[n - 1] = (8 * knots[n - 1].x + knots[n].x) / 2.0;
+
+        // Get first control points X-values.
+        var x = this.getFirstControlPoints(rhs);
+
+        // Set right hand side Y values.
+        for (i = 1; i < n - 1; ++i) {
+            rhs[i] = 4 * knots[i].y + 2 * knots[i + 1].y;
+        }
+
+        rhs[0] = knots[0].y + 2 * knots[1].y;
+        rhs[n - 1] = (8 * knots[n - 1].y + knots[n].y) / 2.0;
+
+        // Get first control points Y-values.
+        var y = this.getFirstControlPoints(rhs);
+
+        // Fill output arrays.
+        for (i = 0; i < n; i++) {
+            // First control point.
+            firstControlPoints.push(new Point(x[i], y[i]));
+
+            // Second control point.
+            if (i < n - 1) {
+                secondControlPoints.push(new Point(
+                    2 * knots [i + 1].x - x[i + 1],
+                    2 * knots[i + 1].y - y[i + 1]
+                ));
+
+            } else {
+                secondControlPoints.push(new Point(
+                    (knots[n].x + x[n - 1]) / 2,
+                    (knots[n].y + y[n - 1]) / 2)
+                );
+            }
+        }
+
+        return [firstControlPoints, secondControlPoints];
+    },
+
+    // Divide a Bezier curve into two at point defined by value 't' <0,1>.
+    // Using deCasteljau algorithm. http://math.stackexchange.com/a/317867
+    // @deprecated
+    // @param control points (start, control start, control end, end)
+    // @return a function that accepts t and returns 2 curves.
+    getCurveDivider: function(p0, p1, p2, p3) {
+
+        console.warn('deprecated');
+
+        var curve = new Curve(p0, p1, p2, p3);
+
+        return function divideCurve(t) {
+
+            var divided = curve.divide(t);
+
+            return [{
+                p0: divided[0].start,
+                p1: divided[0].controlPoint1,
+                p2: divided[0].controlPoint2,
+                p3: divided[0].end
+            }, {
+                p0: divided[1].start,
+                p1: divided[1].controlPoint1,
+                p2: divided[1].controlPoint2,
+                p3: divided[1].end
+            }];
+        };
+    },
+
+    // Solves a tridiagonal system for one of coordinates (x or y) of first Bezier control points.
+    // @deprecated
+    // @param rhs Right hand side vector.
+    // @return Solution vector.
+    getFirstControlPoints: function(rhs) {
+
+        console.warn('deprecated');
+
+        var n = rhs.length;
+        // `x` is a solution vector.
+        var x = [];
+        var tmp = [];
+        var b = 2.0;
+
+        x[0] = rhs[0] / b;
+
+        // Decomposition and forward substitution.
+        for (var i = 1; i < n; i++) {
+            tmp[i] = 1 / b;
+            b = (i < n - 1 ? 4.0 : 3.5) - tmp[i];
+            x[i] = (rhs[i] - x[i - 1]) / b;
+        }
+
+        for (i = 1; i < n; i++) {
+            // Backsubstitution.
+            x[n - i - 1] -= tmp[n - i] * x[n - i];
+        }
+
+        return x;
+    },
+
+    // Solves an inversion problem -- Given the (x, y) coordinates of a point which lies on
+    // a parametric curve x = x(t)/w(t), y = y(t)/w(t), ﬁnd the parameter value t
+    // which corresponds to that point.
+    // @deprecated
+    // @param control points (start, control start, control end, end)
+    // @return a function that accepts a point and returns t.
+    getInversionSolver: function(p0, p1, p2, p3) {
+
+        console.warn('deprecated');
+
+        var curve = new Curve(p0, p1, p2, p3);
+
+        return function solveInversion(p) {
+
+            return curve.closestPointT(p);
+        };
+    }
+};