Made SVG drawing MS Edge compatible (issue #7)

src/relations/Bounds.js

@@ -15,7 +15,7 @@ export default class Bounds {
   get rects() {
     return this.offsetBounds;
   }
-  
+
   get top() {
     return this.offsetBounds[0].top;
   }
@@ -47,15 +47,15 @@ export default class Bounds {
 
 /** Translates DOMRect client bounds to offset bounds within the given container **/
 const toOffsetBounds = (clientBounds, offsetContainer) => {
-  const { x, y } = offsetContainer.getBoundingClientRect();
-  const left = Math.round(clientBounds.left - x);
-  const top = Math.round(clientBounds.top - y);
+  const { top, left } = offsetContainer.getBoundingClientRect();
+  const l = Math.round(clientBounds.left - left);
+  const t = Math.round(clientBounds.top - top);
 
   return {
-    left  : left,
-    top   : top,
-    right : Math.round(left + clientBounds.width),
-    bottom: Math.round(top + clientBounds.height),
+    left  : l,
+    top   : t,
+    right : Math.round(l + clientBounds.width),
+    bottom: Math.round(t + clientBounds.height),
     width : Math.round(clientBounds.width),
     height: Math.round(clientBounds.height)
   };
@@ -65,7 +65,7 @@ const toOffsetBounds = (clientBounds, offsetContainer) => {
 const toUnionBoundingRects = elements => {
   const allRects = elements.reduce(function(arr, el) {
     const rectList = el.getClientRects();
-    const len = rectList.length; 
+    const len = rectList.length;
 
     for (let i = 0; i<len; i++) {
       arr.push(rectList[i]);
@@ -110,4 +110,4 @@ const mergeBounds = clientBounds => {
 
     return merged;
   }, []);
-}
+}

src/relations/Connection.js

@@ -23,15 +23,15 @@ export default class Connection extends EventEmitter {
     svgEl.appendChild(this.startDot);
     svgEl.appendChild(this.endDot);
 
-    // Connections are initialized either from a relation annotation 
-    // (when loading), or as a 'floating' relation, attached to a start 
-    // node (when drawing a new one). 
+    // Connections are initialized either from a relation annotation
+    // (when loading), or as a 'floating' relation, attached to a start
+    // node (when drawing a new one).
     const props = nodeOrAnnotation.type === 'Annotation' ?
-     this.initFromAnnotation(contentEl, svgEl, nodeOrAnnotation) : 
+     this.initFromAnnotation(contentEl, svgEl, nodeOrAnnotation) :
      this.initFromStartNode(svgEl, nodeOrAnnotation);
 
     this.annotation = props.annotation;
-    
+
     // 'Descriptive' instance properties
     this.fromNode = props.fromNode;
     this.fromBounds = props.fromBounds;
@@ -66,10 +66,10 @@ export default class Connection extends EventEmitter {
 
     // RelationsLayer uses click as a selection event
     handle.on('click', () => this.emit('click', {
-      annotation, 
+      annotation,
       from: fromNode.annotation,
       to: toNode.annotation,
-      midX: this.currentMidXY[0], 
+      midX: this.currentMidXY[0],
       midY: this.currentMidXY[1]
     }));
 
@@ -82,7 +82,7 @@ export default class Connection extends EventEmitter {
     return { fromNode, fromBounds, floating: true };
   }
 
-  /** 
+  /**
    * Fixes the end of the connection to the current end node,
    * turning a floating connection into a non-floating one.
    */
@@ -107,7 +107,7 @@ export default class Connection extends EventEmitter {
     this.svgEl.removeChild(this.startDot);
     this.svgEl.removeChild(this.endDot);
 
-    if (this.handle) 
+    if (this.handle)
       this.handle.destroy();
   }
 
@@ -182,9 +182,9 @@ export default class Connection extends EventEmitter {
       this.endDot.setAttribute('r', 2);
       this.endDot.setAttribute('class', 'end');
 
-      if (startsAtTop) 
+      if (startsAtTop)
         this.path.setAttribute('d', compileTopPath());
-      else 
+      else
         this.path.setAttribute('d', compileBottomPath());
 
       this.path.setAttribute('class', 'connection');
@@ -210,13 +210,13 @@ export default class Connection extends EventEmitter {
     this.redraw();
   }
 
-  /** 
+  /**
    * Returns true if the given relation matches this connection,
    * meaning that this connection has the same start and end point
    * as recorded in the relation.
    */
   matchesRelation = relation =>
-    relation.from.isEqual(this.fromNode.annotation) && 
+    relation.from.isEqual(this.fromNode.annotation) &&
     relation.to.isEqual(this.toNode.annotation);
 
   /** Getter/setter shorthands **/
@@ -235,7 +235,7 @@ export default class Connection extends EventEmitter {
 
   get endXY() {
     return (this.currentEnd instanceof Array) ?
-      this.currentEnd : 
+      this.currentEnd :
         (this.fromBounds.top > this.toBounds.top) ?
           this.toBounds.bottomHandleXY : this.toBounds.topHandleXY;
   }
@@ -245,4 +245,3 @@ export default class Connection extends EventEmitter {
   }
 
 }
-

src/relations/drawing/DrawingTool.js

@@ -4,8 +4,8 @@ import HoverEmphasis from './HoverEmphasis';
 import { getNodeForEvent } from '../RelationUtils';
 import WebAnnotation from '../../WebAnnotation';
 
-/** 
- * Wraps an event handler for event delegation. This way, we 
+/**
+ * Wraps an event handler for event delegation. This way, we
  * can listen to events emitted by children matching the given
  * selector, rather than attaching (loads of!) handlers to each
  * child individually.
@@ -61,7 +61,7 @@ export default class DrawingTool extends EventEmitter {
     if (node) {
       if (this.currentConnection) {
         this.completeConnection(node);
-      } else { 
+      } else {
         this.startNewConnection(node);
       }
     }
@@ -72,8 +72,8 @@ export default class DrawingTool extends EventEmitter {
       if (this.currentHover)  {
         this.currentConnection.dragTo(this.currentHover.node);
       } else {
-        const { x, y } = this.contentEl.getBoundingClientRect();
-        this.currentConnection.dragTo([ evt.pageX - x, evt.pageY - y]);
+        const { top, left } = this.contentEl.getBoundingClientRect();
+        this.currentConnection.dragTo([ evt.pageX - left, evt.pageY - top ]);
       }
     }
   }
@@ -100,7 +100,7 @@ export default class DrawingTool extends EventEmitter {
 
   /** Emphasise hovered annotation **/
   onEnterAnnotation = delegatingHandler('.r6o-annotation', evt => {
-    if (this.currentHover) 
+    if (this.currentHover)
       this.hover();
 
     this.hover(getNodeForEvent(evt).elements);
@@ -116,7 +116,7 @@ export default class DrawingTool extends EventEmitter {
     if (elements) {
       this.currentHover = new HoverEmphasis(this.svgEl, elements);
     } else { // Clear hover
-      if (this.currentHover) 
+      if (this.currentHover)
         this.currentHover.destroy();
 
       this.currentHover = null;
@@ -135,12 +135,12 @@ export default class DrawingTool extends EventEmitter {
     this.currentConnection.unfloat();
 
     this.contentEl.classList.remove('r6o-drawing');
-    
+
     const from = this.currentConnection.startAnnotation;
     const to = this.currentConnection.endAnnotation;
     const [ midX, midY ] = this.currentConnection.midXY;
 
-    const annotation = WebAnnotation.create({ 
+    const annotation = WebAnnotation.create({
       target: [
         { id: from.id },
         { id: to.id }
@@ -179,4 +179,4 @@ export default class DrawingTool extends EventEmitter {
     }
   }
 
-}
+}