bpmn-js 18.26.0 → 18.27.0

package/lib/features/keyboard/BpmnKeyboardBindings.js

@@ -1,5 +1,7 @@
 import inherits from 'inherits-browser';
 
+import { forEach } from 'min-dash';
+
 import KeyboardBindings from 'diagram-js/lib/features/keyboard/KeyboardBindings';
 
 /**
@@ -24,6 +26,24 @@ BpmnKeyboardBindings.$inject = [
 ];
 
 
+/**
+ * The keyboard binding for each editor action: the `key` that triggers it,
+ * optionally requiring the `cmd` modifier (CTRL/CMD).
+ *
+ * @type {Record<string, { key: string, modifier?: 'cmd' }>}
+ */
+export var SHORTCUTS_KEY_BINDINGS = {
+  selectElements: { key: 'A', modifier: 'cmd' },
+  find: { key: 'F', modifier: 'cmd' },
+  spaceTool: { key: 'S' },
+  lassoTool: { key: 'L' },
+  handTool: { key: 'H' },
+  globalConnectTool: { key: 'C' },
+  directEditing: { key: 'E' },
+  replaceElement: { key: 'R' }
+};
+
+
 /**
  * Register available keyboard bindings.
  *
@@ -35,146 +55,35 @@ BpmnKeyboardBindings.prototype.registerBindings = function(keyboard, editorActio
   // inherit default bindings
   KeyboardBindings.prototype.registerBindings.call(this, keyboard, editorActions);
 
-  /**
-   * Add keyboard binding if respective editor action
-   * is registered.
-   *
-   * @param {string} action name
-   * @param {Function} fn that implements the key binding
-   */
-  function addListener(action, fn) {
-
-    if (editorActions.isRegistered(action)) {
-      keyboard.addListener(fn);
-    }
-  }
-
-  // select all elements
-  // CTRL + A
-  addListener('selectElements', function(context) {
-
-    var event = context.keyEvent;
+  forEach(SHORTCUTS_KEY_BINDINGS, function(binding, action) {
 
-    if (keyboard.isKey([ 'a', 'A' ], event) && keyboard.isCmd(event)) {
-      editorActions.trigger('selectElements');
-
-      return true;
-    }
-  });
-
-  // search labels
-  // CTRL + F
-  addListener('find', function(context) {
-
-    var event = context.keyEvent;
-
-    if (keyboard.isKey([ 'f', 'F' ], event) && keyboard.isCmd(event)) {
-      editorActions.trigger('find');
-
-      return true;
-    }
-  });
-
-  // activate space tool
-  // S
-  addListener('spaceTool', function(context) {
-
-    var event = context.keyEvent;
-
-    if (keyboard.hasModifier(event)) {
+    if (!editorActions.isRegistered(action)) {
       return;
     }
 
-    if (keyboard.isKey([ 's', 'S' ], event)) {
-      editorActions.trigger('spaceTool');
+    var keys = [ binding.key.toLowerCase(), binding.key.toUpperCase() ],
+        requiresCmd = binding.modifier === 'cmd';
 
-      return true;
-    }
-  });
+    keyboard.addListener(function(context) {
 
-  // activate lasso tool
-  // L
-  addListener('lassoTool', function(context) {
+      var event = context.keyEvent;
 
-    var event = context.keyEvent;
+      if (!keyboard.isKey(keys, event)) {
+        return;
+      }
 
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
+      if (requiresCmd) {
+        if (!keyboard.isCmd(event)) {
+          return;
+        }
+      } else if (keyboard.hasModifier(event)) {
+        return;
+      }
 
-    if (keyboard.isKey([ 'l', 'L' ], event)) {
-      editorActions.trigger('lassoTool');
+      editorActions.trigger(action, event);
 
       return true;
-    }
-  });
-
-  // activate hand tool
-  // H
-  addListener('handTool', function(context) {
-
-    var event = context.keyEvent;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey([ 'h', 'H' ], event)) {
-      editorActions.trigger('handTool');
-
-      return true;
-    }
-  });
-
-  // activate global connect tool
-  // C
-  addListener('globalConnectTool', function(context) {
-
-    var event = context.keyEvent;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey([ 'c', 'C' ], event)) {
-      editorActions.trigger('globalConnectTool');
-
-      return true;
-    }
-  });
-
-  // activate direct editing
-  // E
-  addListener('directEditing', function(context) {
-
-    var event = context.keyEvent;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey([ 'e', 'E' ], event)) {
-      editorActions.trigger('directEditing');
-
-      return true;
-    }
-  });
-
-  // activate replace element
-  // R
-  addListener('replaceElement', function(context) {
-
-    var event = context.keyEvent;
-
-    if (keyboard.hasModifier(event)) {
-      return;
-    }
-
-    if (keyboard.isKey([ 'r', 'R' ], event)) {
-      editorActions.trigger('replaceElement', event);
-
-      return true;
-    }
+    });
   });
 
 };

package/lib/features/label-link/LabelLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelLink.d.ts","mappings":";;;;;AA8CAA;IA6IAC;;;;;;;IA7IAC;MAAAA;;;;;;;gBA7Ba,OAAO,8BAA8B,EAAE;cACvC,OAAO,4BAA4B,EAAE;uBACrC,OAAO,qCAAqC,EAAE;eAC9C,OAAO,4BAA4B,EAAE;;eAGrC,OAAO,4BAA4B,EAAE","names":["LabelLink class","LabelLink#$inject","LabelLink constructor"],"ignoreList":[],"sources":["LabelLink.js"]}
+{"version":3,"file":"LabelLink.d.ts","mappings":";;;;;AA+CAA;IA2JAC;;;;;;;IA3JAC;MAAAA;;;;;;;gBA7Ba,OAAO,8BAA8B,EAAE;cACvC,OAAO,4BAA4B,EAAE;uBACrC,OAAO,qCAAqC,EAAE;eAC9C,OAAO,4BAA4B,EAAE;;eAGrC,OAAO,4BAA4B,EAAE","names":["LabelLink class","LabelLink#$inject","LabelLink constructor"],"ignoreList":[],"sources":["LabelLink.js"]}

package/lib/features/label-link/LabelLink.js

@@ -9,9 +9,10 @@ import {
 import { createLine, updateLine } from 'diagram-js/lib/util/RenderUtil';
 import { getMid, getElementLineIntersection } from 'diagram-js/lib/layout/LayoutUtil';
 import { getDistancePointPoint } from 'diagram-js/lib/features/bendpoints/GeometricUtil';
-import { isLabel } from 'diagram-js/lib/util/ModelUtil';
+import { isConnection, isLabel } from 'diagram-js/lib/util/ModelUtil';
 
 import { isAny } from '../modeling/util/ModelingUtil';
+import { getReferencePoint, asLines } from '../../util/LineUtil';
 import { getRoundRectPath, getCirclePath } from '../../draw/BpmnRenderUtil';
 
 /**
@@ -96,9 +97,17 @@ export default function LabelLink(eventBus, canvas, graphicsFactory, outline, se
    */
   function createLink(label, target) {
 
-    // Create an auxiliary line between label and target mid points
+    const labelMid = getMid(label);
+
+    // For connections, aim at the closest point on the visible connection
+    // instead of the geometric mid point of the whole connection.
+    const targetReference = isConnection(target)
+      ? getReferencePoint(labelMid, asLines(target.waypoints))
+      : getMid(target);
+
+    // Create an auxiliary line between label and target reference points
     const line = createLine(
-      [ getMid(target), getMid(label) ],
+      [ targetReference, labelMid ],
       LINE_STYLE
     );
     const linePath = line.getAttribute('d');
@@ -113,12 +122,18 @@ export default function LabelLink(eventBus, canvas, graphicsFactory, outline, se
       return;
     }
 
-    // Calculate the intersection point between line and label
-    // If the target is a sequence flow, there is no intersection,
-    // so we link to the middle of it.
-    const targetSelected = selection.isSelected(target);
-    const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
-    const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+    // Calculate the intersection point between line and target.
+    // For connections there is no shape to intersect, so we link to the
+    // closest point on the connection computed above.
+    let targetInter;
+
+    if (isConnection(target)) {
+      targetInter = targetReference;
+    } else {
+      const targetSelected = selection.isSelected(target);
+      const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
+      targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+    }
 
     // Do not draw a link if the points are too close
     const distance = getDistancePointPoint(targetInter, labelInter);

package/lib/features/modeling/behavior/LabelBehavior.d.ts

@@ -10,26 +10,6 @@
  */
 export function getReferencePointDelta(referencePoint: Point, oldBounds: Rect, newBounds: Rect): Point;
 
-/**
- * Generates the nearest point (reference point) for a given point
- * onto given set of lines
- *
- * @param point
- * @param lines
- *
- * @return
- */
-export function getReferencePoint(point: Point, lines: Line[]): Point;
-
-/**
- * Convert the given bounds to a lines array containing all edges
- *
- * @param bounds
- *
- * @return
- */
-export function asEdges(bounds: Rect | Point): Line[];
-
 /**
  * A component that makes sure that external labels are added
  * together with respective elements and properly updated (DI wise)
@@ -53,6 +33,7 @@ type TextRenderer = import("../../../draw/TextRenderer").default;
 type Point = import("diagram-js/lib/util/Types").Point;
 type Rect = import("diagram-js/lib/util/Types").Rect;
 export type Line = Point[];
-
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+
+export { getReferencePoint, asEdges } from "../../../util/LineUtil";
 //# sourceMappingURL=LabelBehavior.d.ts.map

package/lib/features/modeling/behavior/LabelBehavior.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelBehavior.d.ts","mappings":";;;;;;;;;;AAqSA,uDANW,KAAK,aACL,IAAI,aACJ,IAAI,GAEH,KAAK;;;;;;;;;;;AAkBjB,yCALW,KAAK,SACL,IAAI,EAAE,GAEL,KAAK;;;;;;;;;AAoBjB,gCAJW,KAAI,EAAC,KAAK,GAET,IAAI,EAAE;;;;;;;;qBA9PlBA;;;;;;;IAAAC;;;gBArBa,OAAO,8BAA8B,EAAE;gBACvC,OAAO,aAAa,EAAE;mBACtB,OAAO,gBAAgB,EAAE;oBACzB,OAAO,4BAA4B,EAAE;aAErC,OAAO,2BAA2B,EAAE;YACpC,OAAO,2BAA2B,EAAE;mBAEpC,KAAK,EAAE;;+BApCW,2CAA2C","names":["LabelBehavior class","LabelBehavior constructor"],"ignoreList":[],"sources":["LabelBehavior.js"]}
+{"version":3,"file":"LabelBehavior.d.ts","mappings":";;;;;;;;;;AAiSA,uDANW,KAAK,aACL,IAAI,aACJ,IAAI,GAEH,KAAK;;;;;;;;qBA5NjBA;;;;;;;IAAAC;;;gBArBa,OAAO,8BAA8B,EAAE;gBACvC,OAAO,aAAa,EAAE;mBACtB,OAAO,gBAAgB,EAAE;oBACzB,OAAO,4BAA4B,EAAE;aAErC,OAAO,2BAA2B,EAAE;YACpC,OAAO,2BAA2B,EAAE;mBAEpC,KAAK,EAAE;+BAhCW,2CAA2C","names":["LabelBehavior class","LabelBehavior constructor"],"ignoreList":[],"sources":["LabelBehavior.js"]}

package/lib/features/modeling/behavior/LabelBehavior.js

@@ -36,13 +36,9 @@ import {
 } from 'diagram-js/lib/util/PositionUtil';
 
 import {
-  sortBy
-} from 'min-dash';
-
-import {
-  getDistancePointLine,
-  perpendicularFoot
-} from './util/GeometricUtil';
+  getReferencePoint,
+  asEdges
+} from '../../../util/LineUtil';
 
 var NAME_PROPERTY = 'name';
 var TEXT_PROPERTY = 'text';
@@ -299,94 +295,8 @@ export function getReferencePointDelta(referencePoint, oldBounds, newBounds) {
 }
 
 /**
- * Generates the nearest point (reference point) for a given point
- * onto given set of lines
- *
- * @param {Point} point
- * @param {Line[]} lines
- *
- * @return {Point}
- */
-export function getReferencePoint(point, lines) {
-
-  if (!lines.length) {
-    return;
-  }
-
-  var nearestLine = getNearestLine(point, lines);
-
-  return perpendicularFoot(point, nearestLine);
-}
-
-/**
- * Convert the given bounds to a lines array containing all edges
- *
- * @param {Rect|Point} bounds
- *
- * @return {Line[]}
- */
-export function asEdges(bounds) {
-  return [
-    [ // top
-      {
-        x: bounds.x,
-        y: bounds.y
-      },
-      {
-        x: bounds.x + (bounds.width || 0),
-        y: bounds.y
-      }
-    ],
-    [ // right
-      {
-        x: bounds.x + (bounds.width || 0),
-        y: bounds.y
-      },
-      {
-        x: bounds.x + (bounds.width || 0),
-        y: bounds.y + (bounds.height || 0)
-      }
-    ],
-    [ // bottom
-      {
-        x: bounds.x,
-        y: bounds.y + (bounds.height || 0)
-      },
-      {
-        x: bounds.x + (bounds.width || 0),
-        y: bounds.y + (bounds.height || 0)
-      }
-    ],
-    [ // left
-      {
-        x: bounds.x,
-        y: bounds.y
-      },
-      {
-        x: bounds.x,
-        y: bounds.y + (bounds.height || 0)
-      }
-    ]
-  ];
-}
-
-/**
- * Returns the nearest line for a given point by distance
- * @param {Point} point
- * @param {Line[]} lines
+ * Re-exported for backwards compatibility.
  *
- * @return {Line}
+ * @see module:lib/util/LineUtil
  */
-function getNearestLine(point, lines) {
-
-  var distances = lines.map(function(l) {
-    return {
-      line: l,
-      distance: getDistancePointLine(point, l)
-    };
-  });
-
-  var sorted = sortBy(distances, 'distance');
-
-  return sorted[0].line;
-}
+export { getReferencePoint, asEdges } from '../../../util/LineUtil';

package/lib/features/palette/PaletteProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaletteProvider.d.ts","mappings":";;;;qBA6BAA;EAiBAC;;;;;;;;;;;;EAjBAC;;;;;EA+B0B,qBAFd,cAAc;;;eArDb,OAAO,yCAAyC,EAAE;cAClD,OAAO,uCAAuC,EAAE;sBAChD,OAAO,oCAAoC,EAAE;iBAC7C,OAAO,6BAA6B,EAAE;iBACtC,OAAO,8CAA8C,EAAE;gBACvD,OAAO,4CAA4C,EAAE;qBACrD,OAAO,sDAAsD,EAAE;;sBAG/D,OAAO,yCAAyC,EAAE","names":["PaletteProvider class","PaletteProvider#$inject","PaletteProvider constructor"],"ignoreList":[],"sources":["PaletteProvider.js"]}
+{"version":3,"file":"PaletteProvider.d.ts","mappings":";;;;qBA+BAA;EAiBAC;;;;;;;;;;;;EAjBAC;;;;;EA+B0B,qBAFd,cAAc;;;eArDb,OAAO,yCAAyC,EAAE;cAClD,OAAO,uCAAuC,EAAE;sBAChD,OAAO,oCAAoC,EAAE;iBAC7C,OAAO,6BAA6B,EAAE;iBACtC,OAAO,8CAA8C,EAAE;gBACvD,OAAO,4CAA4C,EAAE;qBACrD,OAAO,sDAAsD,EAAE;;sBAG/D,OAAO,yCAAyC,EAAE","names":["PaletteProvider class","PaletteProvider#$inject","PaletteProvider constructor"],"ignoreList":[],"sources":["PaletteProvider.js"]}

package/lib/features/palette/PaletteProvider.js

@@ -2,6 +2,8 @@ import {
   assign
 } from 'min-dash';
 
+import { SHORTCUTS_KEY_BINDINGS } from '../keyboard/BpmnKeyboardBindings';
+
 /**
  * @typedef {import('diagram-js/lib/features/palette/Palette').default} Palette
  * @typedef {import('diagram-js/lib/features/create/Create').default} Create
@@ -118,6 +120,7 @@ PaletteProvider.prototype.getPaletteEntries = function() {
       group: 'tools',
       className: 'bpmn-icon-hand-tool',
       title: translate('Activate hand tool'),
+      shortcut: SHORTCUTS_KEY_BINDINGS.handTool.key,
       action: {
         click: function(event) {
           handTool.activateHand(event);
@@ -128,6 +131,7 @@ PaletteProvider.prototype.getPaletteEntries = function() {
       group: 'tools',
       className: 'bpmn-icon-lasso-tool',
       title: translate('Activate lasso tool'),
+      shortcut: SHORTCUTS_KEY_BINDINGS.lassoTool.key,
       action: {
         click: function(event) {
           lassoTool.activateSelection(event);
@@ -138,6 +142,7 @@ PaletteProvider.prototype.getPaletteEntries = function() {
       group: 'tools',
       className: 'bpmn-icon-space-tool',
       title: translate('Activate create/remove space tool'),
+      shortcut: SHORTCUTS_KEY_BINDINGS.spaceTool.key,
       action: {
         click: function(event) {
           spaceTool.activateSelection(event);
@@ -148,6 +153,7 @@ PaletteProvider.prototype.getPaletteEntries = function() {
       group: 'tools',
       className: 'bpmn-icon-connection-multi',
       title: translate('Activate global connect tool'),
+      shortcut: SHORTCUTS_KEY_BINDINGS.globalConnectTool.key,
       action: {
         click: function(event) {
           globalConnect.start(event);

package/lib/features/palette/index.d.ts

@@ -8,6 +8,7 @@ declare namespace _default {
         createPreview: (string | typeof import("diagram-js/lib/features/create/CreatePreview").default)[];
     } | {
         palette: (string | typeof import("diagram-js/lib/features/palette/Palette").default)[];
+        paletteTooltip: (string | typeof import("diagram-js/lib/features/palette/PaletteTooltip").default)[];
     } | {
         lassoTool: (string | typeof import("diagram-js/lib/features/lasso-tool/LassoTool").default)[];
     } | {

package/lib/features/palette/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","mappings":";;;;;;;;;;;;;;;;;;;;;4BAQ4B,mBAAmB","names":[],"ignoreList":[],"sources":["index.js"]}
+{"version":3,"file":"index.d.ts","mappings":";;;;;;;;;;;;;;;;;;;;;;4BAQ4B,mBAAmB","names":[],"ignoreList":[],"sources":["index.js"]}

package/lib/util/LineUtil.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Generates the nearest point (reference point) for a given point
+ * onto a given set of lines.
+ *
+ * The reference point is clamped to the actual line segments, i.e. it
+ * always lies on one of the given lines (docking to a segment end /
+ * bendpoint if necessary) instead of on the infinite line extending a
+ * segment.
+ *
+ * @param point
+ * @param lines
+ *
+ * @return
+ */
+export function getReferencePoint(point: Point, lines: Line[]): Point | undefined;
+
+/**
+ * Convert the given bounds to a lines array containing all edges.
+ *
+ * @param bounds
+ *
+ * @return
+ */
+export function asEdges(bounds: Rect | Point): Line[];
+
+/**
+ * Convert the given waypoints to a lines array containing all segments.
+ *
+ * @param waypoints
+ *
+ * @return
+ */
+export function asLines(waypoints: Point[]): Line[];
+
+type Point = import("diagram-js/lib/util/Types").Point;
+type Rect = import("diagram-js/lib/util/Types").Rect;
+
+export type Line = Point[];
+//# sourceMappingURL=LineUtil.d.ts.map

package/lib/util/LineUtil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineUtil.d.ts","mappings":";;;;;;;;;;;;;;gBA6BA,yBALW,OAAK,OACL,IAAI,GAAE,EAEL,MAAK,EAAC;;;;;;;;;AAoBlB,gCAJW,KAAI,EAAC,KAAK,GAET,IAAI,EAAE;;;;;;;;;AAsDlB,mCAJW,KAAK,EAAE,GAEN,IAAI,EAAE;;aAxFL,OAAO,2BAA2B,EAAE;YACpC,OAAO,2BAA2B,EAAE;;mBAEpC,KAAK,EAAE","names":[],"ignoreList":[],"sources":["LineUtil.js"]}

package/lib/util/LineUtil.js

@@ -0,0 +1,163 @@
+import {
+  sortBy
+} from 'min-dash';
+
+import {
+  getDistancePointPoint
+} from 'diagram-js/lib/features/bendpoints/GeometricUtil';
+
+/**
+ * @typedef {import('diagram-js/lib/util/Types').Point} Point
+ * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
+ *
+ * @typedef {Point[]} Line
+ */
+
+/**
+ * Generates the nearest point (reference point) for a given point
+ * onto a given set of lines.
+ *
+ * The reference point is clamped to the actual line segments, i.e. it
+ * always lies on one of the given lines (docking to a segment end /
+ * bendpoint if necessary) instead of on the infinite line extending a
+ * segment.
+ *
+ * @param {Point} point
+ * @param {Line[]} lines
+ *
+ * @return {Point|undefined}
+ */
+export function getReferencePoint(point, lines) {
+
+  if (!lines.length) {
+    return;
+  }
+
+  var nearestLine = getNearestLine(point, lines);
+
+  return getClosestPointOnLine(point, nearestLine);
+}
+
+/**
+ * Convert the given bounds to a lines array containing all edges.
+ *
+ * @param {Rect|Point} bounds
+ *
+ * @return {Line[]}
+ */
+export function asEdges(bounds) {
+  return [
+    [ // top
+      {
+        x: bounds.x,
+        y: bounds.y
+      },
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y
+      }
+    ],
+    [ // right
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y
+      },
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y + (bounds.height || 0)
+      }
+    ],
+    [ // bottom
+      {
+        x: bounds.x,
+        y: bounds.y + (bounds.height || 0)
+      },
+      {
+        x: bounds.x + (bounds.width || 0),
+        y: bounds.y + (bounds.height || 0)
+      }
+    ],
+    [ // left
+      {
+        x: bounds.x,
+        y: bounds.y
+      },
+      {
+        x: bounds.x,
+        y: bounds.y + (bounds.height || 0)
+      }
+    ]
+  ];
+}
+
+/**
+ * Convert the given waypoints to a lines array containing all segments.
+ *
+ * @param {Point[]} waypoints
+ *
+ * @return {Line[]}
+ */
+export function asLines(waypoints) {
+  var lines = [];
+
+  for (var i = 0; i < waypoints.length - 1; i++) {
+    lines.push([ waypoints[i], waypoints[i + 1] ]);
+  }
+
+  return lines;
+}
+
+/**
+ * Returns the nearest line for a given point by the distance to the
+ * closest point on each (clamped) line segment.
+ *
+ * @param {Point} point
+ * @param {Line[]} lines
+ *
+ * @return {Line}
+ */
+function getNearestLine(point, lines) {
+
+  var distances = lines.map(function(line) {
+    return {
+      line: line,
+      distance: getDistancePointPoint(point, getClosestPointOnLine(point, line))
+    };
+  });
+
+  var sorted = sortBy(distances, 'distance');
+
+  return sorted[0].line;
+}
+
+/**
+ * Returns the point on a line segment that is closest to the given point,
+ * clamped to the segment's start and end.
+ *
+ * @param {Point} point
+ * @param {Line} line
+ *
+ * @return {Point}
+ */
+function getClosestPointOnLine(point, line) {
+  var start = line[0],
+      end = line[1];
+
+  var dx = end.x - start.x,
+      dy = end.y - start.y;
+
+  var lengthSquared = dx * dx + dy * dy;
+
+  if (lengthSquared === 0) {
+    return { x: start.x, y: start.y };
+  }
+
+  var t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared;
+
+  t = Math.max(0, Math.min(1, t));
+
+  return {
+    x: start.x + t * dx,
+    y: start.y + t * dy
+  };
+}