Skip to content

Commit fd9d3d0

Browse files
author
Omar Shehata
committed
Simplify animation widget SVG icon by using a dictionary
1 parent 9ce09c2 commit fd9d3d0

File tree

2 files changed

+44
-62
lines changed

2 files changed

+44
-62
lines changed

‎CHANGES.md

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
- Fixed `scene.pickFromRay` intersection inaccuracies. [#8439](https://github.com/CesiumGS/cesium/issues/8439)
2828
- Fixed a bug where a null or undefined name property passed to the `Entity` constructor would throw an exception.[#8832](https://github.com/CesiumGS/cesium/pull/8832)
2929
- Fixed JSDoc and TypeScript type definitions for `ScreenSpaceEventHandler.getInputAction` which listed incorrect return type. [#9002](https://github.com/CesiumGS/cesium/pull/9002)
30+
- Fixed animation widget SVG icons not appearing in iOS 13.5.1. [#8993](https://github.com/CesiumGS/cesium/pull/8993)
3031

3132
### 1.70.1 - 2020-06-10
3233

‎Source/Widgets/Animation/Animation.js

+43-62
Original file line numberDiff line numberDiff line change
@@ -29,77 +29,59 @@ function getElementColor(element) {
2929
);
3030
}
3131

32-
var svgIcons = [
33-
{
34-
id: "animation_pathReset",
32+
var svgIconsById = {
33+
animation_pathReset: {
3534
tagName: "path",
3635
transform: "translate(16,16) scale(0.85) translate(-16,-16)",
3736
d:
3837
"M24.316,5.318,9.833,13.682,9.833,5.5,5.5,5.5,5.5,25.5,9.833,25.5,9.833,17.318,24.316,25.682z",
3938
},
40-
{
41-
id: "animation_pathPause",
39+
animation_pathPause: {
4240
tagName: "path",
4341
transform: "translate(16,16) scale(0.85) translate(-16,-16)",
4442
d: "M13,5.5,7.5,5.5,7.5,25.5,13,25.5zM24.5,5.5,19,5.5,19,25.5,24.5,25.5z",
4543
},
46-
{
47-
id: "animation_pathPlay",
44+
animation_pathPlay: {
4845
tagName: "path",
4946
transform: "translate(16,16) scale(0.85) translate(-16,-16)",
5047
d: "M6.684,25.682L24.316,15.5L6.684,5.318V25.682z",
5148
},
52-
{
53-
id: "animation_pathPlayReverse",
49+
animation_pathPlayReverse: {
5450
tagName: "path",
5551
transform: "translate(16,16) scale(-0.85,0.85) translate(-16,-16)",
5652
d: "M6.684,25.682L24.316,15.5L6.684,5.318V25.682z",
5753
},
58-
{
59-
id: "animation_pathLoop",
54+
animation_pathLoop: {
6055
tagName: "path",
6156
transform: "translate(16,16) scale(0.85) translate(-16,-16)",
6257
d:
6358
"M24.249,15.499c-0.009,4.832-3.918,8.741-8.75,8.75c-2.515,0-4.768-1.064-6.365-2.763l2.068-1.442l-7.901-3.703l0.744,8.694l2.193-1.529c2.244,2.594,5.562,4.242,9.26,4.242c6.767,0,12.249-5.482,12.249-12.249H24.249zM15.499,6.75c2.516,0,4.769,1.065,6.367,2.764l-2.068,1.443l7.901,3.701l-0.746-8.693l-2.192,1.529c-2.245-2.594-5.562-4.245-9.262-4.245C8.734,3.25,3.25,8.734,3.249,15.499H6.75C6.758,10.668,10.668,6.758,15.499,6.75z",
6459
},
65-
{
66-
id: "animation_pathClock",
60+
animation_pathClock: {
6761
tagName: "path",
6862
transform: "translate(16,16) scale(0.85) translate(-16,-15.5)",
6963
d:
7064
"M15.5,2.374C8.251,2.375,2.376,8.251,2.374,15.5C2.376,22.748,8.251,28.623,15.5,28.627c7.249-0.004,13.124-5.879,13.125-13.127C28.624,8.251,22.749,2.375,15.5,2.374zM15.5,25.623C9.909,25.615,5.385,21.09,5.375,15.5C5.385,9.909,9.909,5.384,15.5,5.374c5.59,0.01,10.115,4.535,10.124,10.125C25.615,21.09,21.091,25.615,15.5,25.623zM8.625,15.5c-0.001-0.552-0.448-0.999-1.001-1c-0.553,0-1,0.448-1,1c0,0.553,0.449,1,1,1C8.176,16.5,8.624,16.053,8.625,15.5zM8.179,18.572c-0.478,0.277-0.642,0.889-0.365,1.367c0.275,0.479,0.889,0.641,1.365,0.365c0.479-0.275,0.643-0.887,0.367-1.367C9.27,18.461,8.658,18.297,8.179,18.572zM9.18,10.696c-0.479-0.276-1.09-0.112-1.366,0.366s-0.111,1.09,0.365,1.366c0.479,0.276,1.09,0.113,1.367-0.366C9.821,11.584,9.657,10.973,9.18,10.696zM22.822,12.428c0.478-0.275,0.643-0.888,0.366-1.366c-0.275-0.478-0.89-0.642-1.366-0.366c-0.479,0.278-0.642,0.89-0.366,1.367C21.732,12.54,22.344,12.705,22.822,12.428zM12.062,21.455c-0.478-0.275-1.089-0.111-1.366,0.367c-0.275,0.479-0.111,1.09,0.366,1.365c0.478,0.277,1.091,0.111,1.365-0.365C12.704,22.344,12.54,21.732,12.062,21.455zM12.062,9.545c0.479-0.276,0.642-0.888,0.366-1.366c-0.276-0.478-0.888-0.642-1.366-0.366s-0.642,0.888-0.366,1.366C10.973,9.658,11.584,9.822,12.062,9.545zM22.823,18.572c-0.48-0.275-1.092-0.111-1.367,0.365c-0.275,0.479-0.112,1.092,0.367,1.367c0.477,0.275,1.089,0.113,1.365-0.365C23.464,19.461,23.3,18.848,22.823,18.572zM19.938,7.813c-0.477-0.276-1.091-0.111-1.365,0.366c-0.275,0.48-0.111,1.091,0.366,1.367s1.089,0.112,1.366-0.366C20.581,8.702,20.418,8.089,19.938,7.813zM23.378,14.5c-0.554,0.002-1.001,0.45-1.001,1c0.001,0.552,0.448,1,1.001,1c0.551,0,1-0.447,1-1C24.378,14.949,23.929,14.5,23.378,14.5zM15.501,6.624c-0.552,0-1,0.448-1,1l-0.466,7.343l-3.004,1.96c-0.478,0.277-0.642,0.889-0.365,1.365c0.275,0.479,0.889,0.643,1.365,0.367l3.305-1.676C15.39,16.99,15.444,17,15.501,17c0.828,0,1.5-0.671,1.5-1.5l-0.5-7.876C16.501,7.072,16.053,6.624,15.501,6.624zM15.501,22.377c-0.552,0-1,0.447-1,1s0.448,1,1,1s1-0.447,1-1S16.053,22.377,15.501,22.377zM18.939,21.455c-0.479,0.277-0.643,0.889-0.366,1.367c0.275,0.477,0.888,0.643,1.366,0.365c0.478-0.275,0.642-0.889,0.366-1.365C20.028,21.344,19.417,21.18,18.939,21.455z",
7165
},
72-
{
73-
id: "animation_pathWingButton",
66+
animation_pathWingButton: {
7467
tagName: "path",
7568
d:
7669
"m 4.5,0.5 c -2.216,0 -4,1.784 -4,4 l 0,24 c 0,2.216 1.784,4 4,4 l 13.71875,0 C 22.478584,27.272785 27.273681,22.511272 32.5,18.25 l 0,-13.75 c 0,-2.216 -1.784,-4 -4,-4 l -24,0 z",
7770
},
78-
{
79-
id: "animation_pathPointer",
71+
animation_pathPointer: {
8072
tagName: "path",
8173
d: "M-15,-65,-15,-55,15,-55,15,-65,0,-95z",
8274
},
83-
{
84-
id: "animation_pathSwooshFX",
75+
animation_pathSwooshFX: {
8576
tagName: "path",
8677
d:
8778
"m 85,0 c 0,16.617 -4.813944,35.356 -13.131081,48.4508 h 6.099803 c 8.317138,-13.0948 13.13322,-28.5955 13.13322,-45.2124 0,-46.94483 -38.402714,-85.00262 -85.7743869,-85.00262 -1.0218522,0 -2.0373001,0.0241 -3.0506131,0.0589 45.958443,1.59437 82.723058,35.77285 82.723058,81.70532 z",
8879
},
89-
];
90-
91-
function getSVGIconInfo(id) {
92-
for (var i = 0; i < svgIcons.length; i++) {
93-
if ("#" + svgIcons[i].id === id) {
94-
return svgIcons[i];
95-
}
96-
}
97-
}
80+
};
9881

9982
//Dynamically builds an SVG element from a JSON object.
10083
function svgFromObject(obj) {
10184
var ele = document.createElementNS(svgNS, obj.tagName);
102-
10385
for (var field in obj) {
10486
if (obj.hasOwnProperty(field) && field !== "tagName") {
10587
if (field === "children") {
@@ -117,7 +99,6 @@ function svgFromObject(obj) {
11799
}
118100
}
119101
}
120-
121102
return ele;
122103
}
123104

@@ -155,7 +136,7 @@ function makeColorString(background, gradient) {
155136
}
156137

157138
function rectButton(x, y, path) {
158-
var svgInfo = getSVGIconInfo(path);
139+
var iconInfo = svgIconsById[path];
159140

160141
var button = {
161142
tagName: "g",
@@ -180,10 +161,10 @@ function rectButton(x, y, path) {
180161
},
181162
{
182163
class: "cesium-animation-buttonPath",
183-
id: svgInfo.id,
184-
tagName: svgInfo.tagName,
185-
transform: svgInfo.transform,
186-
d: svgInfo.d,
164+
id: path,
165+
tagName: iconInfo.tagName,
166+
transform: iconInfo.transform,
167+
d: iconInfo.d,
187168
},
188169
{
189170
tagName: "title",
@@ -195,8 +176,8 @@ function rectButton(x, y, path) {
195176
}
196177

197178
function wingButton(x, y, path) {
198-
var buttonSVGInfo = getSVGIconInfo(path);
199-
var wingInfo = getSVGIconInfo("#animation_pathWingButton");
179+
var buttonIconInfo = svgIconsById[path];
180+
var wingIconInfo = svgIconsById["animation_pathWingButton"];
200181

201182
var button = {
202183
tagName: "g",
@@ -205,22 +186,22 @@ function wingButton(x, y, path) {
205186
children: [
206187
{
207188
class: "cesium-animation-buttonGlow",
208-
id: wingInfo.id,
209-
tagName: wingInfo.tagName,
210-
d: wingInfo.d,
189+
id: "animation_pathWingButton",
190+
tagName: wingIconInfo.tagName,
191+
d: wingIconInfo.d,
211192
},
212193
{
213194
class: "cesium-animation-buttonMain",
214-
id: wingInfo.id,
215-
tagName: wingInfo.tagName,
216-
d: wingInfo.d,
195+
id: "animation_pathWingButton",
196+
tagName: wingIconInfo.tagName,
197+
d: wingIconInfo.d,
217198
},
218199
{
219200
class: "cesium-animation-buttonPath",
220-
id: buttonSVGInfo.id,
221-
tagName: buttonSVGInfo.tagName,
222-
transform: buttonSVGInfo.transform,
223-
d: buttonSVGInfo.d,
201+
id: path,
202+
tagName: buttonIconInfo.tagName,
203+
transform: buttonIconInfo.transform,
204+
d: buttonIconInfo.d,
224205
},
225206
{
226207
tagName: "title",
@@ -516,19 +497,19 @@ function Animation(container, viewModel) {
516497
this._topG = topG;
517498

518499
this._realtimeSVG = new SvgButton(
519-
wingButton(3, 4, "#animation_pathClock"),
500+
wingButton(3, 4, "animation_pathClock"),
520501
viewModel.playRealtimeViewModel
521502
);
522503
this._playReverseSVG = new SvgButton(
523-
rectButton(44, 99, "#animation_pathPlayReverse"),
504+
rectButton(44, 99, "animation_pathPlayReverse"),
524505
viewModel.playReverseViewModel
525506
);
526507
this._playForwardSVG = new SvgButton(
527-
rectButton(124, 99, "#animation_pathPlay"),
508+
rectButton(124, 99, "animation_pathPlay"),
528509
viewModel.playForwardViewModel
529510
);
530511
this._pauseSVG = new SvgButton(
531-
rectButton(84, 99, "#animation_pathPause"),
512+
rectButton(84, 99, "animation_pathPause"),
532513
viewModel.pauseViewModel
533514
);
534515

@@ -547,24 +528,24 @@ function Animation(container, viewModel) {
547528
});
548529
this._shuttleRingBackPanel = shuttleRingBackPanel;
549530

550-
var swooshSVGInfo = getSVGIconInfo("#animation_pathSwooshFX");
551-
var shuttleRingPointer = getSVGIconInfo("#animation_pathPointer");
531+
var swooshIconInfo = svgIconsById["animation_pathSwooshFX"];
532+
var shuttleRingPointerIconInfo = svgIconsById["animation_pathPointer"];
552533

553534
var shuttleRingSwooshG = svgFromObject({
554535
tagName: "g",
555536
class: "cesium-animation-shuttleRingSwoosh",
556537
children: [
557538
{
558-
tagName: swooshSVGInfo.tagName,
539+
tagName: swooshIconInfo.tagName,
559540
transform: "translate(100,97) scale(-1,1)",
560-
id: swooshSVGInfo.id,
561-
d: swooshSVGInfo.d,
541+
id: "animation_pathSwooshFX",
542+
d: swooshIconInfo.d,
562543
},
563544
{
564-
tagName: swooshSVGInfo.tagName,
545+
tagName: swooshIconInfo.tagName,
565546
transform: "translate(100,97)",
566-
id: swooshSVGInfo.id,
567-
d: swooshSVGInfo.d,
547+
id: "animation_pathSwooshFX",
548+
d: swooshIconInfo.d,
568549
},
569550
{
570551
tagName: "line",
@@ -579,9 +560,9 @@ function Animation(container, viewModel) {
579560

580561
this._shuttleRingPointer = svgFromObject({
581562
class: "cesium-animation-shuttleRingPointer",
582-
tagName: shuttleRingPointer.tagName,
583-
id: shuttleRingPointer.id,
584-
d: shuttleRingPointer.d,
563+
id: "animation_pathPointer",
564+
tagName: shuttleRingPointerIconInfo.tagName,
565+
d: shuttleRingPointerIconInfo.d,
585566
});
586567

587568
var knobG = svgFromObject({

0 commit comments

Comments
 (0)