Skip to content

Commit 5efda4d

Browse files
author
Ari
committed
WIP
2 parents c93378f + 0747892 commit 5efda4d

File tree

8 files changed

+280
-20
lines changed

8 files changed

+280
-20
lines changed

‎dist/components/Polygon.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
(function (global, factory) {
22
if (typeof define === "function" && define.amd) {
3-
define(['exports', 'react', 'prop-types', '../lib/String'], factory);
3+
define(['exports', 'react', 'prop-types', '../lib/arePathsEqual', '../lib/String'], factory);
44
} else if (typeof exports !== "undefined") {
5-
factory(exports, require('react'), require('prop-types'), require('../lib/String'));
5+
factory(exports, require('react'), require('prop-types'), require('../lib/arePathsEqual'), require('../lib/String'));
66
} else {
77
var mod = {
88
exports: {}
99
};
10-
factory(mod.exports, global.react, global.propTypes, global.String);
10+
factory(mod.exports, global.react, global.propTypes, global.arePathsEqual, global.String);
1111
global.Polygon = mod.exports;
1212
}
13-
})(this, function (exports, _react, _propTypes, _String) {
13+
})(this, function (exports, _react, _propTypes, _arePathsEqual, _String) {
1414
'use strict';
1515

1616
Object.defineProperty(exports, "__esModule", {
@@ -135,7 +135,7 @@
135135
}, {
136136
key: 'componentDidUpdate',
137137
value: function componentDidUpdate(prevProps) {
138-
if (this.props.map !== prevProps.map) {
138+
if (this.props.map !== prevProps.map || !(0, _arePathsEqual.arePathsEqual)(this.props.paths, prevProps.paths)) {
139139
if (this.polygon) {
140140
this.polygon.setMap(null);
141141
}

‎dist/components/Polyline.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
(function (global, factory) {
22
if (typeof define === "function" && define.amd) {
3-
define(['exports', 'react', 'prop-types', '../lib/String'], factory);
3+
define(['exports', 'react', 'prop-types', '../lib/arePathsEqual', '../lib/String'], factory);
44
} else if (typeof exports !== "undefined") {
5-
factory(exports, require('react'), require('prop-types'), require('../lib/String'));
5+
factory(exports, require('react'), require('prop-types'), require('../lib/arePathsEqual'), require('../lib/String'));
66
} else {
77
var mod = {
88
exports: {}
99
};
10-
factory(mod.exports, global.react, global.propTypes, global.String);
10+
factory(mod.exports, global.react, global.propTypes, global.arePathsEqual, global.String);
1111
global.Polyline = mod.exports;
1212
}
13-
})(this, function (exports, _react, _propTypes, _String) {
13+
})(this, function (exports, _react, _propTypes, _arePathsEqual, _String) {
1414
'use strict';
1515

1616
Object.defineProperty(exports, "__esModule", {
@@ -135,7 +135,7 @@
135135
}, {
136136
key: 'componentDidUpdate',
137137
value: function componentDidUpdate(prevProps) {
138-
if (this.props.map !== prevProps.map) {
138+
if (this.props.map !== prevProps.map || !(0, _arePathsEqual.arePathsEqual)(this.props.path, prevProps.path)) {
139139
if (this.polyline) {
140140
this.polyline.setMap(null);
141141
}

‎dist/lib/arePathsEqual.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
(function (global, factory) {
2+
if (typeof define === "function" && define.amd) {
3+
define(['exports'], factory);
4+
} else if (typeof exports !== "undefined") {
5+
factory(exports);
6+
} else {
7+
var mod = {
8+
exports: {}
9+
};
10+
factory(mod.exports);
11+
global.arePathsEqual = mod.exports;
12+
}
13+
})(this, function (exports) {
14+
'use strict';
15+
16+
Object.defineProperty(exports, "__esModule", {
17+
value: true
18+
});
19+
20+
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
21+
return typeof obj;
22+
} : function (obj) {
23+
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
24+
};
25+
26+
/**
27+
* Compares two path arrays of LatLng objects.
28+
*/
29+
30+
var arePathsEqual = exports.arePathsEqual = function arePathsEqual(pathA, pathB) {
31+
if (pathA === pathB) {
32+
return true;
33+
}
34+
if (!Array.isArray(pathA) || !Array.isArray(pathB)) {
35+
return false;
36+
}
37+
if (pathA.length !== pathB.length) {
38+
return false;
39+
}
40+
for (var i = 0; i < pathA.length; ++i) {
41+
if (pathA[i] === pathB[i]) {
42+
continue;
43+
}
44+
if (!isValidLatLng(pathA[i]) || !isValidLatLng(pathB[i])) {
45+
return false;
46+
}
47+
if (pathB[i].lat !== pathA[i].lat || pathB[i].lng !== pathA[i].lng) {
48+
return false;
49+
}
50+
}
51+
return true;
52+
};
53+
54+
/**
55+
* Helper that checks whether an array consists of objects
56+
* with lat and lng properties
57+
* @param {object} elem the element to check
58+
* @returns {boolean} whether or not it's valid
59+
*/
60+
var isValidLatLng = function isValidLatLng(elem) {
61+
return elem !== null && (typeof elem === 'undefined' ? 'undefined' : _typeof(elem)) === 'object' && elem.hasOwnProperty('lat') && elem.hasOwnProperty('lng');
62+
};
63+
});

‎package-lock.json

Lines changed: 7 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/lib/arePathsEqual.spec.js

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from 'react';
2+
import {expect} from 'chai';
3+
import { arePathsEqual } from '../../lib/arePathsEqual';
4+
5+
describe('arePathsEqual', () => {
6+
it('considers null arrays equal', () => {
7+
expect(arePathsEqual(null, null)).to.equal(true);
8+
});
9+
it('considers undefined equal', () => {
10+
expect(arePathsEqual(undefined, undefined)).to.equal(true);
11+
});
12+
it('considers empty arrays equal', () => {
13+
expect(arePathsEqual([], [])).to.equal(true);
14+
});
15+
it('considers paths unequal when one is null', () => {
16+
const mockPath = [
17+
{lat: 37.78, lng: -122.45},
18+
{lat: 37.69, lng: -122.49},
19+
{lat: 37.22, lng: -122.33}
20+
];
21+
expect(arePathsEqual(mockPath, null)).to.equal(false);
22+
});
23+
it('considers paths unequal if one is undefined', () => {
24+
const mockPath = [
25+
{lat: 37.78, lng: -122.45},
26+
{lat: 37.69, lng: -122.49},
27+
{lat: 37.22, lng: -122.33}
28+
];
29+
expect(arePathsEqual(undefined, mockPath)).to.equal(false);
30+
});
31+
it('dislikes invalid paths', () => {
32+
expect(arePathsEqual(
33+
[{lat: 100, long: 10}, {a: 1, b: 2}], [{a: 1, b: 2}, {a: 3, b: 4}]
34+
)).to.equal(false);
35+
});
36+
it('correctly compares a path to self', () => {
37+
const mockPath = [
38+
{lat: 37.78, lng: -122.45},
39+
{lat: 37.69, lng: -122.49},
40+
{lat: 37.22, lng: -122.33}
41+
];
42+
expect(arePathsEqual(mockPath, mockPath)).to.equal(true);
43+
});
44+
it('requires vertices to be in the same order', () => {
45+
const mockPath = [
46+
{lat: 37.78, lng: -122.45},
47+
{lat: 37.69, lng: -122.49},
48+
{lat: 37.22, lng: -122.33}
49+
];
50+
const mockPathSameOrder = [
51+
{lat: 37.78, lng: -122.45},
52+
{lat: 37.69, lng: -122.49},
53+
{lat: 37.22, lng: -122.33}
54+
];
55+
expect(arePathsEqual(mockPath, mockPathSameOrder)).to.equal(true);
56+
});
57+
it('considers paths unequal if vertices not in the same order', () => {
58+
const mockPath = [
59+
{lat: 37.78, lng: -122.45},
60+
{lat: 37.69, lng: -122.49},
61+
{lat: 37.22, lng: -122.33}
62+
];
63+
const mockPathChangedOrder = [
64+
{lat: 37.22, lng: -122.33},
65+
{lat: 37.78, lng: -122.45},
66+
{lat: 37.69, lng: -122.49}
67+
];
68+
expect(arePathsEqual(mockPath, mockPathChangedOrder)).to.equal(false);
69+
});
70+
it('requires paths to have equal lengths', () => {
71+
const mockPathLength3 = [
72+
{lat: 37.78, lng: -122.45},
73+
{lat: 37.69, lng: -122.49},
74+
{lat: 37.22, lng: -122.33}
75+
];
76+
const mockPathLength5 = [
77+
{lat: 37.78, lng: -122.45},
78+
{lat: 37.69, lng: -122.49},
79+
{lat: 37.22, lng: -122.33},
80+
{lat: 37.54, lng: -122.13},
81+
{lat: 37.11, lng: 125.18}
82+
];
83+
expect(arePathsEqual(mockPathLength3, mockPathLength5)).to.equal(false);
84+
});
85+
it('detects differring lng values', () => {
86+
const mockPath = [
87+
{lat: 37.78, lng: -122.45},
88+
{lat: 37.69, lng: -122.49},
89+
{lat: 37.22, lng: -122.33},
90+
{lat: 37.54, lng: -122.13},
91+
{lat: 37.11, lng: 125.18}
92+
];
93+
const mockPathLatDifferent = [
94+
{lat: 37.78, lng: -122.45},
95+
{lat: 37.69, lng: -122.49},
96+
{lat: 37.22, lng: -122.33},
97+
{lat: 37.54, lng: -122.13},
98+
{lat: 37.76, lng: 125.18}
99+
];
100+
expect(arePathsEqual(mockPath, mockPathLatDifferent)).to.equal(false);
101+
});
102+
it('detects differring lng values', () => {
103+
const mockPath = [
104+
{lat: 37.78, lng: -122.45},
105+
{lat: 37.69, lng: -122.49},
106+
{lat: 37.22, lng: -122.33},
107+
{lat: 37.54, lng: -122.13},
108+
{lat: 37.11, lng: 125.18}
109+
];
110+
const mockPathLngDifferent = [
111+
{lat: 37.78, lng: -122.45},
112+
{lat: 37.69, lng: -122.49},
113+
{lat: 37.22, lng: -122.899},
114+
{lat: 37.54, lng: -122.13},
115+
{lat: 37.11, lng: 125.18}
116+
];
117+
expect(arePathsEqual(mockPath, mockPathLngDifferent)).to.equal(false);
118+
});
119+
it('detects differring vertices', () => {
120+
const mockPath = [
121+
{lat: 37.78, lng: -122.45},
122+
{lat: 37.69, lng: -122.49},
123+
{lat: 37.22, lng: -122.899},
124+
{lat: 37.54, lng: -122.13},
125+
{lat: 37.11, lng: 125.18}
126+
];
127+
const anEntirelyDifferentMockPath = [
128+
{lat: 37.70, lng: -122.413},
129+
{lat: 37.70, lng: -122.412},
130+
{lat: 37.81, lng: -122.89},
131+
{lat: 39.56, lng: -122.41},
132+
{lat: 42.76, lng: -126.15}
133+
];
134+
expect(arePathsEqual(mockPath, anEntirelyDifferentMockPath)).to.equal(false);
135+
});
136+
});

‎src/components/Polygon.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react'
2-
import PropTypes from 'prop-types'
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
33

4-
import { camelize } from '../lib/String'
4+
import { arePathsEqual } from '../lib/arePathsEqual';
5+
import { camelize } from '../lib/String';
56
const evtNames = ['click', 'mouseout', 'mouseover'];
67

78
const wrappedPromise = function() {
@@ -24,7 +25,10 @@ export class Polygon extends React.Component {
2425
}
2526

2627
componentDidUpdate(prevProps) {
27-
if (this.props.map !== prevProps.map) {
28+
if (
29+
this.props.map !== prevProps.map ||
30+
!arePathsEqual(this.props.paths, prevProps.paths)
31+
) {
2832
if (this.polygon) {
2933
this.polygon.setMap(null);
3034
}

‎src/components/Polyline.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react'
2-
import PropTypes from 'prop-types'
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
33

4-
import { camelize } from '../lib/String'
4+
import { arePathsEqual } from '../lib/arePathsEqual';
5+
import { camelize } from '../lib/String';
56
const evtNames = ['click', 'mouseout', 'mouseover'];
67

78
const wrappedPromise = function() {
@@ -24,7 +25,10 @@ export class Polyline extends React.Component {
2425
}
2526

2627
componentDidUpdate(prevProps) {
27-
if (this.props.map !== prevProps.map) {
28+
if (
29+
this.props.map !== prevProps.map ||
30+
!arePathsEqual(this.props.path, prevProps.path)
31+
) {
2832
if (this.polyline) {
2933
this.polyline.setMap(null);
3034
}

0 commit comments

Comments
 (0)