diagram-js - npm Package Compare versions

Comparing version 11.7.0 to 11.8.0

lib/features/bendpoints/GeometricUtil.js

@@ -6,3 +6,3 @@
  * @param {Vector}
- * @return {Float}
+ * @return {number}
  */
@@ -18,3 +18,3 @@ export function vectorLength(v) {
  * @param {Array}
- * @return {Float}
+ * @return {number}
  */
@@ -33,3 +33,3 @@ export function getAngle(line) {
  * @param {Vector}
- * @param {Float} Angle in radians
+ * @param {number} Angle in radians
  * @return {Vector}
@@ -52,3 +52,3 @@ */
  * @param {Vector}
- * @return {Float}
+ * @return {number}
  */
@@ -75,3 +75,3 @@ function solveLambaSystem(a, b, c) {
  * @param {Point}
- * @param [ {Point}, {Point} ] line defined through two points
+ * @param {[ Point, Point ]} line defined through two points
  * @return {Point} the perpendicular foot position
@@ -96,5 +96,6 @@ */
  *
- * @param {Point}
- * @param [ {Point}, {Point} ] line defined through two points
- * @return {Float} distance
+ * @param { Point }
+ * @param { [ Point, Point ] } line defined through two points
+ *
+ * @return { number } distance
  */
@@ -120,3 +121,4 @@ export function getDistancePointLine(point, line) {
  * @param {Point}
- * @return {Float} distance
+ *
+ * @return {number} distance
  */
@@ -123,0 +125,0 @@ export function getDistancePointPoint(point1, point2) {

lib/features/connection-preview/ConnectionPreview.js

@@ -19,2 +19,5 @@ import {
 
+import {
+  createLine
+} from '../../util/RenderUtil';
 
@@ -239,5 +242,3 @@ var MARKER_CONNECTION_PREVIEW = 'djs-connection-preview';
 ConnectionPreview.prototype.createNoopConnection = function(start, end) {
-  var connection = svgCreate('polyline');
-
-  svgAttr(connection, {
+  return createLine([ start, end ], {
     'stroke': '#333',
@@ -248,6 +249,2 @@ 'strokeDasharray': [ 1 ],
   });
-
-  svgAttr(connection, { 'points': [ start.x, start.y, end.x, end.y ] });
-
-  return connection;
 };
@@ -254,0 +251,0 @@

lib/features/outline/Outline.js

@@ -44,3 +44,3 @@ import { getBBox } from '../../util/Elements';
       y: 10,
-      rx: 3,
+      rx: 4,
       width: 100,
@@ -47,0 +47,0 @@ height: 100

lib/features/preview-support/PreviewSupport.js

@@ -31,2 +31,3 @@ import {
   'polyline',
+  'path',
   'rect'
@@ -33,0 +34,0 @@ ];

lib/util/Geometry.js

 import {
-  every,
-  isArray
+  every
 } from 'min-dash';
@@ -59,61 +58,38 @@
  *
- * @param {Array<Point>|Point}
- * @param {Point}
+ * @param {Point[]|Point} a
+ * @param {Point} [b]
  *
- * @return {string|boolean}
+ * @return {'h'|'v'|false} axis or false
  */
 export function pointsAligned(a, b) {
-  var points;
+  var points = Array.from(arguments).flat();
 
-  if (isArray(a)) {
-    points = a;
-  } else {
-    points = [ a, b ];
-  }
+  const axisMap = {
+    'x': 'v',
+    'y': 'h'
+  };
 
-  if (pointsAlignedHorizontally(points)) {
-    return 'h';
+  for (const [ axis, orientation ] of Object.entries(axisMap)) {
+    if (pointsAlignedOnAxis(axis, points)) {
+      return orientation;
+    }
   }
 
-  if (pointsAlignedVertically(points)) {
-    return 'v';
-  }
-
   return false;
 }
 
-export function pointsAlignedHorizontally(a, b) {
-  var points;
+/**
+ * @param { 'x' | 'y' } axis
+ * @param { Point[] } points
+ *
+ * @return {boolean}
+ */
+export function pointsAlignedOnAxis(axis, points) {
+  const referencePoint = points[0];
 
-  if (isArray(a)) {
-    points = a;
-  } else {
-    points = [ a, b ];
-  }
-
-  var firstPoint = points.slice().shift();
-
   return every(points, function(point) {
-    return Math.abs(firstPoint.y - point.y) <= ALIGNED_THRESHOLD;
+    return Math.abs(referencePoint[axis] - point[axis]) <= ALIGNED_THRESHOLD;
   });
 }
 
-export function pointsAlignedVertically(a, b) {
-  var points;
-
-  if (isArray(a)) {
-    points = a;
-  } else {
-    points = [ a, b ];
-  }
-
-  var firstPoint = points.slice().shift();
-
-  return every(points, function(point) {
-    return Math.abs(firstPoint.x - point.x) <= ALIGNED_THRESHOLD;
-  });
-}
-
-
-
 /**
@@ -120,0 +96,0 @@ * Returns true if the point p is inside the rectangle rect

lib/util/RenderUtil.js

 import {
+  isNumber
+} from 'min-dash';
+
+import {
   attr as svgAttr,
@@ -7,4 +11,9 @@ create as svgCreate
 
+/**
+ * @param { [ string, ...any[] ][] } elements
+ *
+ * @return { string }
+ */
 export function componentsToPath(elements) {
-  return elements.join(',').replace(/,?([A-z]),?/g, '$1');
+  return elements.flat().join(',').replace(/,?([A-z]),?/g, '$1');
 }
@@ -22,18 +31,117 @@
 
-export function createLine(points, attrs) {
+function move(point) {
+  return [ 'M', point.x, point.y ];
+}
 
-  var line = svgCreate('polyline');
-  svgAttr(line, { points: toSVGPoints(points) });
+function lineTo(point) {
+  return [ 'L', point.x, point.y ];
+}
 
-  if (attrs) {
-    svgAttr(line, attrs);
+function curveTo(p1, p2, p3) {
+  return [ 'C', p1.x, p1.y, p2.x, p2.y, p3.x, p3.y ];
+}
+
+function drawPath(waypoints, cornerRadius) {
+  const pointCount = waypoints.length;
+
+  const path = [ move(waypoints[0]) ];
+
+  for (let i = 1; i < pointCount; i++) {
+
+    const pointBefore = waypoints[i - 1];
+    const point = waypoints[i];
+    const pointAfter = waypoints[i + 1];
+
+    if (!pointAfter || !cornerRadius) {
+      path.push(lineTo(point));
+
+      continue;
+    }
+
+    const effectiveRadius = Math.min(
+      cornerRadius,
+      vectorLength(point.x - pointBefore.x, point.y - pointBefore.y),
+      vectorLength(pointAfter.x - point.x, pointAfter.y - point.y)
+    );
+
+    if (!effectiveRadius) {
+      path.push(lineTo(point));
+
+      continue;
+    }
+
+    const beforePoint = getPointAtLength(point, pointBefore, effectiveRadius);
+    const beforePoint2 = getPointAtLength(point, pointBefore, effectiveRadius * .5);
+
+    const afterPoint = getPointAtLength(point, pointAfter, effectiveRadius);
+    const afterPoint2 = getPointAtLength(point, pointAfter, effectiveRadius * .5);
+
+    path.push(lineTo(beforePoint));
+    path.push(curveTo(beforePoint2, afterPoint2, afterPoint));
   }
 
-  return line;
+  return path;
 }
 
+function getPointAtLength(start, end, length) {
+
+  const deltaX = end.x - start.x;
+  const deltaY = end.y - start.y;
+
+  const totalLength = vectorLength(deltaX, deltaY);
+
+  const percent = length / totalLength;
+
+  return {
+    x: start.x + deltaX * percent,
+    y: start.y + deltaY * percent
+  };
+}
+
+function vectorLength(x, y) {
+  return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+}
+
+/**
+ * @param { { x: number, y: number }[] } points
+ * @param { any } [attrs]
+ * @param { number } [radius]
+ *
+ * @return {SVGElement}
+ */
+export function createLine(points, attrs, radius) {
+
+  if (isNumber(attrs)) {
+    radius = attrs;
+    attrs = null;
+  }
+
+  if (!attrs) {
+    attrs = {};
+  }
+
+  const line = svgCreate('path', attrs);
+
+  if (isNumber(radius)) {
+    line.dataset.cornerRadius = String(radius);
+  }
+
+  return updateLine(line, points);
+}
+
+/**
+ * @param { SVGElement } gfx
+ * @param { { x: number, y: number }[]} points
+ *
+ * @return {SVGElement}
+ */
 export function updateLine(gfx, points) {
-  svgAttr(gfx, { points: toSVGPoints(points) });
 
+  const cornerRadius = parseInt(gfx.dataset.cornerRadius, 10) || 0;
+
+  svgAttr(gfx, {
+    d: componentsToPath(drawPath(points, cornerRadius))
+  });
+
   return gfx;
 }

package.json

 {
   "name": "diagram-js",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "description": "A toolbox for displaying and modifying diagrams on the web",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

675955

increased by0.3%

Lines of code

23073

increased by0.3%

No dependency changes