From eedbe77e22b5d8ba12113eaa3f898708429acf8f Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Tue, 5 May 2020 13:24:49 +0200 Subject: [PATCH] Made SVG drawing MS Edge compatible (issue #7) --- src/relations/Bounds.js | 20 +++++++++---------- src/relations/Connection.js | 29 ++++++++++++++-------------- src/relations/drawing/DrawingTool.js | 20 +++++++++---------- 3 files changed, 34 insertions(+), 35 deletions(-) diff --git a/src/relations/Bounds.js b/src/relations/Bounds.js index af591af..9f7f235 100644 --- a/src/relations/Bounds.js +++ b/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 { return merged; }, []); -} \ No newline at end of file +} diff --git a/src/relations/Connection.js b/src/relations/Connection.js index 6df5d9a..b880852 100644 --- a/src/relations/Connection.js +++ b/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 { } } - diff --git a/src/relations/drawing/DrawingTool.js b/src/relations/drawing/DrawingTool.js index bc03f54..820c4eb 100644 --- a/src/relations/drawing/DrawingTool.js +++ b/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 { } } -} \ No newline at end of file +}