Skip to content
This repository was archived by the owner on Jun 23, 2025. It is now read-only.

Commit 0442aa0

Browse files
doom777doom777
authored
fix(AgmCircle): circle strokeWeight error
fixes circle error when strokeWeight is enabled by using the correct values for strokePosition fixes: #770
1 parent 2bb6102 commit 0442aa0

3 files changed

Lines changed: 286 additions & 1 deletion

File tree

‎packages/core/services/google-maps-api-wrapper.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,9 @@ export class GoogleMapsAPIWrapper {
5959
*/
6060
createCircle(options: mapTypes.CircleOptions): Promise<mapTypes.Circle> {
6161
return this._map.then((map: mapTypes.GoogleMap) => {
62+
if (typeof options.strokePosition === 'string') {
63+
options.strokePosition = google.maps.StrokePosition[options.strokePosition];
64+
}
6265
options.map = map;
6366
return new google.maps.Circle(options);
6467
});

‎packages/core/services/managers/circle-manager.spec.ts‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
import { NgZone } from '@angular/core';
2+
import { TestBed, async, inject, fakeAsync, tick } from '@angular/core/testing';
3+
4+
import { GoogleMapsAPIWrapper } from './../google-maps-api-wrapper';
5+
import { CircleManager } from './circle-manager';
6+
import { AgmCircle } from '../../directives/circle';
7+
import { Circle, CircleOptions } from '../google-maps-types';
8+
9+
describe('CircleManager', () => {
10+
beforeEach(() => {
11+
(<any>window).google = {
12+
maps: {
13+
StrokePosition: {CENTER: 1, INSIDE: 0, OUTSIDE: 2},
14+
}
15+
};
16+
17+
TestBed.configureTestingModule({
18+
providers: [
19+
{
20+
provide: NgZone,
21+
useFactory: () => new NgZone({ enableLongStackTrace: true })
22+
},
23+
CircleManager,
24+
{
25+
provide: GoogleMapsAPIWrapper,
26+
useValue: { createCircle: jest.fn() }
27+
},
28+
]
29+
});
30+
});
31+
32+
describe('Create a new circle', () => {
33+
it('should call the mapsApiWrapper when creating a new circle', inject(
34+
[CircleManager, GoogleMapsAPIWrapper],
35+
(
36+
circleManager: CircleManager,
37+
apiWrapper: GoogleMapsAPIWrapper
38+
) => {
39+
const newCircle = new AgmCircle(circleManager);
40+
newCircle.radius = 500;
41+
newCircle.latitude = 32.1;
42+
newCircle.longitude = 11.612;
43+
circleManager.addCircle(newCircle);
44+
45+
expect(apiWrapper.createCircle).toHaveBeenCalledWith({
46+
center: {
47+
lat: 32.1,
48+
lng: 11.612,
49+
},
50+
radius: 500,
51+
clickable: true,
52+
draggable: false,
53+
editable: false,
54+
fillColor: undefined,
55+
fillOpacity: undefined,
56+
strokeColor: undefined,
57+
strokeOpacity: undefined,
58+
strokePosition: 'CENTER',
59+
strokeWeight: 0,
60+
visible: true,
61+
zIndex: undefined
62+
});
63+
}
64+
));
65+
});
66+
describe('Delete a circle', () => {
67+
it('should set the map to null when deleting a existing circle', inject(
68+
[CircleManager, GoogleMapsAPIWrapper],
69+
(
70+
circleManager: CircleManager,
71+
apiWrapper: GoogleMapsAPIWrapper
72+
) => {
73+
const newCircle = new AgmCircle(circleManager);
74+
newCircle.radius = 500;
75+
newCircle.latitude = 32.1;
76+
newCircle.longitude = 11.612;
77+
circleManager.addCircle(newCircle);
78+
79+
const circleInstance: any = {
80+
setMap: jest.fn()
81+
};
82+
(<jest.Mock>apiWrapper.createCircle).mockReturnValue(
83+
Promise.resolve(circleInstance)
84+
);
85+
86+
circleManager.addCircle(newCircle);
87+
circleManager.removeCircle(newCircle).then(() => {
88+
expect(circleInstance.setMap).toHaveBeenCalledWith(null);
89+
});
90+
}
91+
));
92+
});
93+
94+
describe('Set radius option', () => {
95+
it('should update that circle via setRadius method when the radius changes', fakeAsync(
96+
inject(
97+
[CircleManager, GoogleMapsAPIWrapper],
98+
(
99+
circleManager: CircleManager,
100+
apiWrapper: GoogleMapsAPIWrapper
101+
) => {
102+
const newCircle = new AgmCircle(circleManager);
103+
newCircle.radius = 500;
104+
newCircle.latitude = 32.1;
105+
newCircle.longitude = 11.612;
106+
107+
const circleInstance: Circle = <any>{
108+
setMap: jest.fn(),
109+
setRadius: jest.fn()
110+
};
111+
(<jest.Mock>apiWrapper.createCircle).mockReturnValue(
112+
Promise.resolve(circleInstance)
113+
);
114+
circleManager.addCircle(newCircle);
115+
newCircle.radius = 600;
116+
117+
circleManager.setRadius(newCircle);
118+
tick();
119+
expect(circleInstance.setRadius).toHaveBeenCalledWith(600);
120+
}
121+
)
122+
));
123+
});
124+
125+
describe('Set options', () => {
126+
it('should update that circle via setOptions method when the opacity options change', fakeAsync(
127+
inject(
128+
[CircleManager, GoogleMapsAPIWrapper],
129+
(
130+
circleManager: CircleManager,
131+
apiWrapper: GoogleMapsAPIWrapper
132+
) => {
133+
const newCircle = new AgmCircle(circleManager);
134+
newCircle.radius = 500;
135+
newCircle.latitude = 32.1;
136+
newCircle.longitude = 11.612;
137+
newCircle.fillOpacity = 0.4;
138+
newCircle.strokeOpacity = 0.4;
139+
140+
const circleInstance: any = {
141+
setMap: jest.fn(),
142+
setOptions: jest.fn()
143+
};
144+
145+
(<jest.Mock>apiWrapper.createCircle).mockReturnValue(
146+
Promise.resolve(circleInstance)
147+
);
148+
149+
circleManager.addCircle(newCircle);
150+
151+
newCircle.fillOpacity = 0.6;
152+
newCircle.strokeOpacity = 0.6;
153+
154+
const options = {
155+
fillOpacity: 0.6,
156+
strokeOpacity: 0.6
157+
};
158+
159+
circleManager.setOptions(newCircle, options);
160+
tick();
161+
expect(circleInstance.setOptions).toHaveBeenCalledWith(options);
162+
}
163+
)
164+
));
165+
166+
it('should update that circle via setOptions method when the color options change', fakeAsync(
167+
inject(
168+
[CircleManager, GoogleMapsAPIWrapper],
169+
(
170+
circleManager: CircleManager,
171+
apiWrapper: GoogleMapsAPIWrapper
172+
) => {
173+
const newCircle = new AgmCircle(circleManager);
174+
newCircle.radius = 500;
175+
newCircle.latitude = 32.1;
176+
newCircle.longitude = 11.612;
177+
newCircle.fillColor = '#FF7F50';
178+
newCircle.strokeColor = '#FF7F50';
179+
180+
const circleInstance: any = {
181+
setMap: jest.fn(),
182+
setOptions: jest.fn()
183+
};
184+
185+
(<jest.Mock>apiWrapper.createCircle).mockReturnValue(
186+
Promise.resolve(circleInstance));
187+
188+
circleManager.addCircle(newCircle);
189+
newCircle.fillColor = '#00008B';
190+
newCircle.strokeColor = '#00008B';
191+
192+
const options = {
193+
fillColor: '#00008B',
194+
strokeColor: '#00008B'
195+
};
196+
197+
circleManager.setOptions(newCircle, options);
198+
tick();
199+
expect(circleInstance.setOptions).toHaveBeenCalledWith(options);
200+
}
201+
)
202+
));
203+
204+
it('should update that circle via setOptions method when the strokeWeight/position change', fakeAsync(
205+
inject(
206+
[CircleManager, GoogleMapsAPIWrapper],
207+
(
208+
circleManager: CircleManager,
209+
apiWrapper: GoogleMapsAPIWrapper
210+
) => {
211+
const newCircle = new AgmCircle(circleManager);
212+
newCircle.radius = 500;
213+
newCircle.latitude = 32.1;
214+
newCircle.longitude = 11.612;
215+
newCircle.strokeWeight = 3;
216+
newCircle.strokePosition = 'INSIDE';
217+
218+
const circleInstance: any = {
219+
setMap: jest.fn(),
220+
setOptions: jest.fn()
221+
};
222+
223+
(<jest.Mock>apiWrapper.createCircle).mockReturnValue(
224+
Promise.resolve(circleInstance));
225+
226+
circleManager.addCircle(newCircle);
227+
228+
const options = {
229+
strokeWeight: 2,
230+
strokePosition: 'OUTSIDE',
231+
} as CircleOptions;
232+
233+
circleManager.setOptions(newCircle, options);
234+
tick();
235+
expect(circleInstance.setOptions).toHaveBeenCalledWith({
236+
strokeWeight: 2,
237+
strokePosition: 2,
238+
});
239+
}
240+
)
241+
));
242+
243+
it('should update that circle via setVisible method when the visible changes', fakeAsync(
244+
inject(
245+
[CircleManager, GoogleMapsAPIWrapper],
246+
(
247+
circleManager: CircleManager,
248+
apiWrapper: GoogleMapsAPIWrapper
249+
) => {
250+
const newCircle = new AgmCircle(circleManager);
251+
newCircle.radius = 500;
252+
newCircle.latitude = 32.1;
253+
newCircle.longitude = 11.612;
254+
newCircle.visible = false;
255+
256+
const circleInstance: any = {
257+
setMap: jest.fn(),
258+
setVisible: jest.fn()
259+
};
260+
(<jest.Mock>apiWrapper.createCircle).mockReturnValue(
261+
Promise.resolve(circleInstance)
262+
);
263+
circleManager.addCircle(newCircle);
264+
265+
newCircle.visible = true;
266+
circleManager.setVisible(newCircle);
267+
268+
tick();
269+
expect(circleInstance.setVisible).toHaveBeenCalledWith(true);
270+
}
271+
)
272+
));
273+
});
274+
275+
});

‎packages/core/services/managers/circle-manager.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {AgmCircle} from '../../directives/circle';
66
import {GoogleMapsAPIWrapper} from '../google-maps-api-wrapper';
77
import * as mapTypes from '../google-maps-types';
88

9+
declare var google: any;
10+
911
@Injectable()
1012
export class CircleManager {
1113
private _circles: Map<AgmCircle, Promise<mapTypes.Circle>> =
@@ -42,7 +44,12 @@ export class CircleManager {
4244
}
4345

4446
setOptions(circle: AgmCircle, options: mapTypes.CircleOptions): Promise<void> {
45-
return this._circles.get(circle).then((c) => c.setOptions(options));
47+
return this._circles.get(circle).then((c) => {
48+
if (typeof options.strokePosition === 'string') {
49+
options.strokePosition = google.maps.StrokePosition[options.strokePosition];
50+
}
51+
c.setOptions(options);
52+
});
4653
}
4754

4855
getBounds(circle: AgmCircle): Promise<mapTypes.LatLngBounds> {

0 commit comments

Comments
 (0)
⚡