Merge pull request #586 from SVG-Edit/issues/73

#73 Panning won't stop when mouseup occurs outside drawing area

src/svgcanvas/event.js

@@ -528,6 +528,19 @@ export const mouseMoveEvent = function (evt) {
   });
 }; // mouseMove()
 
+/**
+*
+* @returns {void}
+*/
+export const mouseOutEvent = function () {
+  const svgCanvas = eventContext_.getCanvas();
+  const { $id } = svgCanvas;
+  if(eventContext_.getCurrentMode() !== 'select' && eventContext_.getStarted()) {
+    const event = new Event("mouseup");
+    $id('svgcanvas').dispatchEvent(event);
+  }
+};
+
 // - in create mode, the element's opacity is set properly, we create an InsertElementCommand
 // and store it on the Undo stack
 // - in move/resize mode, the element's attributes which were affected by the move/resize are

src/svgcanvas/svgcanvas.js

@@ -39,7 +39,7 @@ import {
   init as textActionsInit, textActionsMethod
 } from './text-actions.js';
 import {
-  init as eventInit, mouseMoveEvent, mouseUpEvent,
+  init as eventInit, mouseMoveEvent, mouseUpEvent, mouseOutEvent,
   dblClickEvent, mouseDownEvent, DOMMouseScrollEvent
 } from './event.js';
 import { init as jsonInit, getJsonFromSvgElements, addSVGElementsFromJson } from './json.js';
@@ -1313,6 +1313,7 @@ class SvgCanvas {
  * @returns {void}
  */
       const mouseUp = mouseUpEvent;
+      const mouseOut = mouseOutEvent;
 
       const dblClick = dblClickEvent;
 
@@ -1329,6 +1330,7 @@ class SvgCanvas {
       container.addEventListener('click', handleLinkInCanvas);
       container.addEventListener('dblclick', dblClick);
       container.addEventListener('mouseup', mouseUp);
+      container.addEventListener('mouseleave', mouseOut);
 
       // TODO(rafaelcastrocouto): User preference for shift key and zoom factor
       container.addEventListener('mousewheel', DOMMouseScrollEvent);