save label positions instead of calculating center points for widgets

vvalchev · Nov 20, 2017 · a07e01f · a07e01f
1 parent 3fb91fa
commit a07e01f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 19 deletions.
diff --git a/specs/browser/update-connector-spec.js b/specs/browser/update-connector-spec.js
@@ -221,12 +221,10 @@ describe('updateConnector', function () {
 			expect(underTest.data('theme')).toEqual(customTheme);
 
 		});
-		it('appends the labelCenterPoint', function () {
+		it('appends the connection position as data', function () {
 			themePath.theme = customTheme;
 			underTest.updateConnector({connectorBuilder: builder});
-			expect(underTest.data('theme')).toEqual(customTheme);
-			expect(underTest.data('labelCenterPoint').x).toEqual(20);
-			expect(underTest.data('labelCenterPoint').y).toEqual(20);
+			expect(underTest.data('position')).toEqual({ left: 101, top: 102, width: 50, height: 60 });
 
 		});
 		it('paints the text label according to the default theme if no theme supplied', function () {

diff --git a/specs/browser/update-link-spec.js b/specs/browser/update-link-spec.js
@@ -217,10 +217,9 @@ describe('updateLink', function () {
 			underTest.updateLink({linkBuilder: builder});
 			expect(underTest.data('theme')).toEqual(linkPath.theme);
 		});
-		it('appends the labelCenterPoint', function () {
+		it('appends the connector position so it can be used by widgets', function () {
 			underTest.updateLink({linkBuilder: builder});
-			expect(underTest.data('labelCenterPoint').x).toEqual(20);
-			expect(underTest.data('labelCenterPoint').y).toEqual(20);
+			expect(underTest.data('position')).toEqual({left: 101, top: 102, width: 50, height: 60 });
 		});
 		it('paints the rect element 2 pixels above the text element', function () {
 			linkPath.theme.label.backgroundColor = 'rgb(1, 2, 3)';

diff --git a/src/browser/update-connector.js b/src/browser/update-connector.js
@@ -37,13 +37,13 @@ jQuery.fn.updateConnector = function (optional) {
 				}
 			},
 			applyLabel = function () {
-				const labelTheme = (connection.theme && connection.theme.label) || defaultTheme.connector.default.label,
-					labelCenterPoint = calcLabelCenterPont(connection, toBox, pathElement[0], labelTheme);
-				element.data('labelCenterPoint', labelCenterPoint);
+				const labelText = (connectorAttr && connectorAttr.label) || '',
+					labelTheme = (connection.theme && connection.theme.label) || defaultTheme.connector.default.label,
+					labelCenterPoint = labelText && calcLabelCenterPont(connection.position, toBox, pathElement[0], labelTheme);
 				updateConnectorText(
 					element,
 					labelCenterPoint,
-					(connectorAttr && connectorAttr.label) || '',
+					labelText,
 					labelTheme
 				);
 			};
@@ -77,6 +77,7 @@ jQuery.fn.updateConnector = function (optional) {
 
 		connection = _.extend(connectorBuilder(fromBox, toBox, theme), connectorAttr);
 		element.data('theme', connection.theme);
+		element.data('position', Object.assign({}, connection.position));
 		pathElement = element.find('path.mapjs-connector');
 		hitElement = element.find('path.mapjs-link-hit');
 		element.css(_.extend(convertPositionToTransform(connection.position), {stroke: connection.color}));

diff --git a/src/browser/update-link.js b/src/browser/update-link.js
@@ -44,13 +44,13 @@ jQuery.fn.updateLink = function (optional) {
 			shapeTo = element.data('nodeTo'),
 			attrs = element.data('attr') || {},
 			applyLabel = function (connection, toBox, pathElement) {
-				const labelTheme = connection.theme.label,
-					labelCenterPoint = calcLabelCenterPont(connection, toBox, pathElement[0], labelTheme);
-				element.data('labelCenterPoint', labelCenterPoint);
+				const labelText = attrs.label || '',
+					labelTheme = connection.theme.label,
+					labelCenterPoint = labelText && calcLabelCenterPont(connection.position, toBox, pathElement[0], labelTheme);
 				updateConnectorText(
 					element,
 					labelCenterPoint,
-					attrs.label || '',
+					labelText,
 					labelTheme
 				);
 			};
@@ -74,6 +74,7 @@ jQuery.fn.updateLink = function (optional) {
 
 		connection = linkBuilder(fromBox, toBox, attrs, theme);
 		element.data('theme', connection.theme);
+		element.data('position', Object.assign({}, connection.position));
 		element.css(_.extend(convertPositionToTransform(connection.position), {stroke: connection.lineProps.color}));
 
 		if (pathElement.length === 0) {

diff --git a/src/core/util/calc-label-center-point.js b/src/core/util/calc-label-center-point.js
@@ -1,12 +1,15 @@
-/*global module */
-module.exports = function calcLabelCenterPoint(connection, toBox, pathDOM, labelTheme) {
+/*global module, require */
+const defaultTheme = require('../theme/default-theme');
+module.exports = function calcLabelCenterPoint(connectionPosition, toBox, pathDOM, labelTheme) {
 	'use strict';
+	labelTheme = labelTheme || defaultTheme.connector.default.label;
+
 	if (labelTheme.position.ratio) {
 		return pathDOM.getPointAtLength(pathDOM.getTotalLength() * labelTheme.position.ratio);
 	}
 	return {
-		x: toBox.left + (toBox.width / 2) - connection.position.left,
-		y: toBox.top - connection.position.top - labelTheme.position.aboveEnd
+		x: toBox.left + (toBox.width / 2) - connectionPosition.left,
+		y: toBox.top - connectionPosition.top - labelTheme.position.aboveEnd
 	};
 };