@syncfusion/ej2-maps 20.3.56 → 20.4.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +16 -1
- package/CHANGELOG.md +9 -1
- package/README.md +65 -51
- package/dist/ej2-maps.min.js +2 -2
- package/dist/ej2-maps.umd.min.js +2 -2
- package/dist/ej2-maps.umd.min.js.map +1 -1
- package/dist/es6/ej2-maps.es2015.js +915 -722
- package/dist/es6/ej2-maps.es2015.js.map +1 -1
- package/dist/es6/ej2-maps.es5.js +901 -712
- package/dist/es6/ej2-maps.es5.js.map +1 -1
- package/dist/global/ej2-maps.min.js +2 -2
- package/dist/global/ej2-maps.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +33 -20
- package/src/maps/layers/bing-map.d.ts +1 -0
- package/src/maps/layers/bing-map.js +1 -0
- package/src/maps/layers/bubble.d.ts +4 -0
- package/src/maps/layers/bubble.js +7 -3
- package/src/maps/layers/color-mapping.d.ts +5 -0
- package/src/maps/layers/color-mapping.js +5 -3
- package/src/maps/layers/data-label.d.ts +0 -1
- package/src/maps/layers/data-label.js +5 -12
- package/src/maps/layers/layer-panel.d.ts +7 -7
- package/src/maps/layers/layer-panel.js +98 -53
- package/src/maps/layers/legend.js +19 -19
- package/src/maps/layers/marker.d.ts +13 -0
- package/src/maps/layers/marker.js +124 -107
- package/src/maps/layers/navigation-selected-line.d.ts +5 -0
- package/src/maps/layers/navigation-selected-line.js +111 -104
- package/src/maps/maps-model.d.ts +1 -1
- package/src/maps/maps.d.ts +17 -0
- package/src/maps/maps.js +448 -364
- package/src/maps/model/base.js +1 -1
- package/src/maps/model/export-image.d.ts +4 -3
- package/src/maps/model/export-image.js +7 -6
- package/src/maps/model/export-pdf.d.ts +6 -6
- package/src/maps/model/export-pdf.js +8 -7
- package/src/maps/model/interface.d.ts +2 -2
- package/src/maps/model/print.d.ts +4 -2
- package/src/maps/model/print.js +6 -3
- package/src/maps/user-interaction/annotation.js +0 -2
- package/src/maps/user-interaction/highlight.js +4 -3
- package/src/maps/user-interaction/selection.js +4 -2
- package/src/maps/user-interaction/tooltip.js +5 -5
- package/src/maps/user-interaction/zoom.d.ts +5 -0
- package/src/maps/user-interaction/zoom.js +7 -7
- package/src/maps/utils/helper.d.ts +2 -0
- package/src/maps/utils/helper.js +37 -30
package/src/maps/utils/helper.js
CHANGED
|
@@ -11,8 +11,6 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
11
11
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
12
|
};
|
|
13
13
|
})();
|
|
14
|
-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
|
15
|
-
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
16
14
|
/* eslint-disable max-len */
|
|
17
15
|
/**
|
|
18
16
|
* Helper functions for maps control
|
|
@@ -693,15 +691,15 @@ export function convertElement(element, markerId, data, index, mapObj) {
|
|
|
693
691
|
elementLength--;
|
|
694
692
|
}
|
|
695
693
|
var templateHtml = childElement.innerHTML;
|
|
696
|
-
var templateSplitValue;
|
|
697
694
|
var properties = Object.keys(data);
|
|
695
|
+
var regExp = RegExp;
|
|
698
696
|
for (var i = 0; i < properties.length; i++) {
|
|
699
697
|
if (typeof data[properties[i]] === 'object') {
|
|
700
698
|
templateHtml = convertStringToValue(templateHtml, '', data, mapObj);
|
|
701
699
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
702
700
|
}
|
|
703
701
|
else if (properties[i].toLowerCase() !== 'latitude' && properties[i].toLowerCase() !== 'longitude') {
|
|
704
|
-
templateHtml = templateHtml.replace(new
|
|
702
|
+
templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
|
|
705
703
|
}
|
|
706
704
|
}
|
|
707
705
|
childElement.innerHTML = templateHtml;
|
|
@@ -738,6 +736,7 @@ export function formatValue(value, maps) {
|
|
|
738
736
|
export function convertStringToValue(stringTemplate, format, data, maps) {
|
|
739
737
|
var templateHtml = (stringTemplate === '') ? format : stringTemplate;
|
|
740
738
|
var templateValue = (stringTemplate === '') ? templateHtml.split('${') : templateHtml.split('{{:');
|
|
739
|
+
var regExp = RegExp;
|
|
741
740
|
for (var i = 0; i < templateValue.length; i++) {
|
|
742
741
|
if ((templateValue[i].indexOf('}}') > -1 && templateValue[i].indexOf('.') > -1) ||
|
|
743
742
|
(templateValue[i].indexOf('}') > -1 && templateValue[i].search('.') > -1)) {
|
|
@@ -747,7 +746,7 @@ export function convertStringToValue(stringTemplate, format, data, maps) {
|
|
|
747
746
|
var templateSplitValue = (getValueFromObject(data, split[j])).toString();
|
|
748
747
|
templateHtml = (stringTemplate === '') ?
|
|
749
748
|
templateHtml.split('${' + split[j] + '}').join(formatValue(templateSplitValue, maps)) :
|
|
750
|
-
templateHtml.replace(new
|
|
749
|
+
templateHtml.replace(new regExp('{{:' + split[j] + '}}', 'g'), templateSplitValue);
|
|
751
750
|
}
|
|
752
751
|
}
|
|
753
752
|
}
|
|
@@ -769,9 +768,10 @@ export function convertElementFromLabel(element, labelId, data, index, mapObj) {
|
|
|
769
768
|
var templateHtml = labelEle.outerHTML;
|
|
770
769
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
771
770
|
var properties = Object.keys(data);
|
|
771
|
+
var regExp = RegExp;
|
|
772
772
|
for (var i = 0; i < properties.length; i++) {
|
|
773
773
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
774
|
-
templateHtml = templateHtml.replace(new
|
|
774
|
+
templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
|
|
775
775
|
}
|
|
776
776
|
var templateEle = createElement('div', {
|
|
777
777
|
id: labelId,
|
|
@@ -881,7 +881,7 @@ export function markerShapeChoose(eventArgs, data) {
|
|
|
881
881
|
var shape = ((eventArgs.shapeValuePath.indexOf('.') > -1) ?
|
|
882
882
|
(getValueFromObject(data, eventArgs.shapeValuePath).toString()) :
|
|
883
883
|
data[eventArgs.shapeValuePath]);
|
|
884
|
-
eventArgs.shape = (shape.toString() !==
|
|
884
|
+
eventArgs.shape = (shape.toString() !== '') ? shape : eventArgs.shape;
|
|
885
885
|
if (data[eventArgs.shapeValuePath] === 'Image') {
|
|
886
886
|
eventArgs.imageUrl = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
|
|
887
887
|
((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
|
|
@@ -890,7 +890,7 @@ export function markerShapeChoose(eventArgs, data) {
|
|
|
890
890
|
}
|
|
891
891
|
else {
|
|
892
892
|
var shapes = (!isNullOrUndefined(eventArgs.shapeValuePath)) ? ((eventArgs.shapeValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.shapeValuePath).toString() : eventArgs.shape) : eventArgs.shape;
|
|
893
|
-
eventArgs.shape = (shapes.toString() !==
|
|
893
|
+
eventArgs.shape = (shapes.toString() !== '') ? shapes : eventArgs.shape;
|
|
894
894
|
var shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath)) ?
|
|
895
895
|
((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : (!isNullOrUndefined(data[eventArgs.imageUrlValuePath]) ?
|
|
896
896
|
data[eventArgs.imageUrlValuePath] : eventArgs.imageUrl)) : eventArgs.imageUrl;
|
|
@@ -969,8 +969,6 @@ export function clusterTemplate(currentLayer, markerTemplate, maps, layerIndex,
|
|
|
969
969
|
container['top'] : (container['bottom'] - container['top'])));
|
|
970
970
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
971
971
|
var translate = (maps.isTileMap) ? new Object() : getTranslate(maps, currentLayer, false);
|
|
972
|
-
var transPoint = (maps.isTileMap) ? { x: 0, y: 0 } : (maps.translatePoint.x !== 0) ?
|
|
973
|
-
maps.translatePoint : translate['location'];
|
|
974
972
|
var dataIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_dataIndex_')[1].split('_')[0], 10);
|
|
975
973
|
var markerIndex = parseInt(markerTemplate.childNodes[o]['id'].split('_MarkerIndex_')[1].split('_')[0], 10);
|
|
976
974
|
var markerSetting = currentLayer.markerSettings[markerIndex];
|
|
@@ -1619,6 +1617,7 @@ export function drawStar(maps, options, size, location, element) {
|
|
|
1619
1617
|
* @param {PathOption} options - Specifies the path options
|
|
1620
1618
|
* @param {Size} size - Specifies the size
|
|
1621
1619
|
* @param {MapLocation} location - Specifies the map location
|
|
1620
|
+
* @param {string} type - Specifies the type.
|
|
1622
1621
|
* @param {Element} element - Specifies the element
|
|
1623
1622
|
* @returns {Element} - Returns the element
|
|
1624
1623
|
* @private
|
|
@@ -1731,7 +1730,6 @@ export function checkShapeDataFields(dataSource, properties, dataPath, propertyP
|
|
|
1731
1730
|
export function checkPropertyPath(shapeData, shapePropertyPath, shape) {
|
|
1732
1731
|
if (!isNullOrUndefined(shapeData) && !isNullOrUndefined(shape)) {
|
|
1733
1732
|
if (!isNullOrUndefined(shapePropertyPath)) {
|
|
1734
|
-
var length_1;
|
|
1735
1733
|
var properties = (Object.prototype.toString.call(shapePropertyPath) === '[object Array]' ?
|
|
1736
1734
|
shapePropertyPath : [shapePropertyPath]);
|
|
1737
1735
|
for (var i = 0; i < properties.length; i++) {
|
|
@@ -2110,7 +2108,8 @@ export function getTranslate(mapObject, layer, animate) {
|
|
|
2110
2108
|
mapObject.zoomTranslatePoint.y = y;
|
|
2111
2109
|
}
|
|
2112
2110
|
else {
|
|
2113
|
-
if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1
|
|
2111
|
+
if (!isNullOrUndefined(mapObject.previousProjection) && (mapObject.mapScaleValue === 1
|
|
2112
|
+
|| mapObject.mapScaleValue <= 1.05) && !mapObject.zoomModule.isDragZoom) {
|
|
2114
2113
|
scaleFactor = parseFloat(Math.min(size.width / mapWidth, size.height / mapHeight).toFixed(2));
|
|
2115
2114
|
scaleFactor = scaleFactor > 1.05 ? 1 : scaleFactor;
|
|
2116
2115
|
mapWidth *= scaleFactor;
|
|
@@ -2128,8 +2127,10 @@ export function getTranslate(mapObject, layer, animate) {
|
|
|
2128
2127
|
}
|
|
2129
2128
|
}
|
|
2130
2129
|
if (!isNullOrUndefined(mapObject.translatePoint)) {
|
|
2131
|
-
x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
|
|
2132
|
-
|
|
2130
|
+
x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
|
|
2131
|
+
mapObject.translatePoint.x : x;
|
|
2132
|
+
y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
|
|
2133
|
+
mapObject.translatePoint.y : y;
|
|
2133
2134
|
}
|
|
2134
2135
|
}
|
|
2135
2136
|
scaleFactor = (mapObject.enablePersistence) ? ((mapObject.mapScaleValue >= 1) ? mapObject.mapScaleValue : 1) : scaleFactor;
|
|
@@ -2180,9 +2181,11 @@ export function getZoomTranslate(mapObject, layer, animate) {
|
|
|
2180
2181
|
mapObject.mapScaleValue = mapObject.zoomSettings.zoomFactor !== 1 &&
|
|
2181
2182
|
mapObject.zoomSettings.zoomFactor ===
|
|
2182
2183
|
mapObject.mapScaleValue ? mapObject.zoomSettings.zoomFactor :
|
|
2183
|
-
mapObject.zoomSettings.zoomFactor !== mapObject.mapScaleValue && !mapObject.centerPositionChanged ?
|
|
2184
|
+
mapObject.zoomSettings.zoomFactor !== mapObject.mapScaleValue && !mapObject.centerPositionChanged ?
|
|
2185
|
+
mapObject.mapScaleValue : mapObject.zoomSettings.zoomFactor;
|
|
2184
2186
|
if (mapObject.zoomSettings.shouldZoomInitially && !mapObject.isZoomByPosition) {
|
|
2185
|
-
mapObject.mapScaleValue = zoomFactorValue = scaleFactor = ((mapObject.enablePersistence
|
|
2187
|
+
mapObject.mapScaleValue = zoomFactorValue = scaleFactor = ((mapObject.enablePersistence
|
|
2188
|
+
|| mapObject.zoomSettings.shouldZoomInitially) && mapObject.scale === 1)
|
|
2186
2189
|
? mapObject.scale : (isNullOrUndefined(mapObject.markerZoomFactor)) ? mapObject.mapScaleValue : mapObject.markerZoomFactor;
|
|
2187
2190
|
zoomFactorValue = mapObject.mapScaleValue;
|
|
2188
2191
|
if (!isNullOrUndefined(mapObject.markerCenterLatitude) && !isNullOrUndefined(mapObject.markerCenterLongitude)) {
|
|
@@ -2209,7 +2212,8 @@ export function getZoomTranslate(mapObject, layer, animate) {
|
|
|
2209
2212
|
var leftPosition = ((mapWidth + Math.abs(mapObject.mapAreaRect.width - mapWidth)) / 2) / factor;
|
|
2210
2213
|
var point = checkZoomMethod ? calculateCenterFromPixel(mapObject, layer) :
|
|
2211
2214
|
convertGeoToPoint(latitude, longitude, mapObject.mapLayerPanel.calculateFactor(layer), layer, mapObject);
|
|
2212
|
-
if ((!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) &&
|
|
2215
|
+
if ((!isNullOrUndefined(mapObject.zoomTranslatePoint) || !isNullOrUndefined(mapObject.previousProjection)) &&
|
|
2216
|
+
!mapObject.zoomNotApplied) {
|
|
2213
2217
|
if (mapObject.previousProjection !== mapObject.projectionType) {
|
|
2214
2218
|
x = -point.x + leftPosition;
|
|
2215
2219
|
y = -point.y + topPosition;
|
|
@@ -2229,8 +2233,10 @@ export function getZoomTranslate(mapObject, layer, animate) {
|
|
|
2229
2233
|
y = -point.y + topPosition + mapObject.mapAreaRect.y / zoomFactor;
|
|
2230
2234
|
}
|
|
2231
2235
|
if (!isNullOrUndefined(mapObject.translatePoint)) {
|
|
2232
|
-
y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
|
|
2233
|
-
|
|
2236
|
+
y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
|
|
2237
|
+
mapObject.translatePoint.y : y;
|
|
2238
|
+
x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
|
|
2239
|
+
mapObject.translatePoint.x : x;
|
|
2234
2240
|
}
|
|
2235
2241
|
scaleFactor = zoomFactorValue !== 0 ? zoomFactorValue : 1;
|
|
2236
2242
|
}
|
|
@@ -2268,8 +2274,10 @@ export function getZoomTranslate(mapObject, layer, animate) {
|
|
|
2268
2274
|
}
|
|
2269
2275
|
}
|
|
2270
2276
|
if (!isNullOrUndefined(mapObject.translatePoint)) {
|
|
2271
|
-
x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
|
|
2272
|
-
|
|
2277
|
+
x = (mapObject.enablePersistence && mapObject.translatePoint.x !== 0 && !mapObject.zoomNotApplied) ?
|
|
2278
|
+
mapObject.translatePoint.x : leftPosition;
|
|
2279
|
+
y = (mapObject.enablePersistence && mapObject.translatePoint.y !== 0 && !mapObject.zoomNotApplied) ?
|
|
2280
|
+
mapObject.translatePoint.y : topPosition;
|
|
2273
2281
|
}
|
|
2274
2282
|
}
|
|
2275
2283
|
scaleFactor = (mapObject.enablePersistence) ? (mapObject.mapScaleValue === 0 ? 1 : mapObject.mapScaleValue) : scaleFactor;
|
|
@@ -2334,6 +2342,7 @@ export function Internalize(maps, value) {
|
|
|
2334
2342
|
* Function to compile the template function for maps.
|
|
2335
2343
|
*
|
|
2336
2344
|
* @param {string} template - Specifies the template
|
|
2345
|
+
* @param {Maps} maps - Specifies the Maps instance.
|
|
2337
2346
|
* @returns {Function} - Returns the function
|
|
2338
2347
|
* @private
|
|
2339
2348
|
*/
|
|
@@ -2341,11 +2350,10 @@ export function Internalize(maps, value) {
|
|
|
2341
2350
|
export function getTemplateFunction(template, maps) {
|
|
2342
2351
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2343
2352
|
var templateFn = null;
|
|
2344
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2345
|
-
var e;
|
|
2346
2353
|
try {
|
|
2347
2354
|
if (document.querySelectorAll(template).length) {
|
|
2348
2355
|
templateFn = templateComplier(document.querySelector(template).innerHTML.trim());
|
|
2356
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2349
2357
|
}
|
|
2350
2358
|
else if (maps.isVue || maps.isVue3) {
|
|
2351
2359
|
templateFn = templateComplier(template);
|
|
@@ -2471,7 +2479,6 @@ export function querySelector(args, elementSelector) {
|
|
|
2471
2479
|
* @returns {Element} - Returns the element
|
|
2472
2480
|
*/
|
|
2473
2481
|
export function getTargetElement(layerIndex, name, enable, map) {
|
|
2474
|
-
var shapeIndex;
|
|
2475
2482
|
var targetId;
|
|
2476
2483
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2477
2484
|
var shapeData = map.layers[layerIndex].shapeData['features'];
|
|
@@ -2551,7 +2558,8 @@ shapeData, data) {
|
|
|
2551
2558
|
maps: map
|
|
2552
2559
|
};
|
|
2553
2560
|
map.trigger('itemSelection', eventArgs, function (observedArgs) {
|
|
2554
|
-
eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity :
|
|
2561
|
+
eventArgs.border.opacity = isNullOrUndefined(selectionSettings.border.opacity) ? selectionSettings.opacity :
|
|
2562
|
+
selectionSettings.border.opacity;
|
|
2555
2563
|
map.shapeSelectionItem.push(eventArgs.shapeData);
|
|
2556
2564
|
if (!getElement('ShapeselectionMap')) {
|
|
2557
2565
|
document.body.appendChild(createStyle('ShapeselectionMap', 'ShapeselectionMapStyle', eventArgs));
|
|
@@ -2651,7 +2659,7 @@ export function showTooltip(text, size, x, y, areaWidth, areaHeight, id, element
|
|
|
2651
2659
|
var demo = str[0].length;
|
|
2652
2660
|
for (var i = 1; i < str.length; i++) {
|
|
2653
2661
|
if (demo < str[i].length) {
|
|
2654
|
-
demo = str[i].length;
|
|
2662
|
+
demo = (str[i]).length;
|
|
2655
2663
|
}
|
|
2656
2664
|
}
|
|
2657
2665
|
if (!tooltip) {
|
|
@@ -2721,7 +2729,7 @@ export function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element)
|
|
|
2721
2729
|
// if (touches) {
|
|
2722
2730
|
// touchList = [];
|
|
2723
2731
|
// for (let i: number = 0, length: number = touches.length; i < length; i++) {
|
|
2724
|
-
// touchList.push({ pageX: touches[i].clientX, pageY: touches[i].clientY, pointerId: null });
|
|
2732
|
+
// touchList.push({ pageX: touches[i as number].clientX, pageY: touches[i as number].clientY, pointerId: null });
|
|
2725
2733
|
// }
|
|
2726
2734
|
// } else {
|
|
2727
2735
|
// touchList = touchList ? touchList : [];
|
|
@@ -2729,8 +2737,8 @@ export function wordWrap(tooltip, text, x, y, size1, width, areaWidth, element)
|
|
|
2729
2737
|
// touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
|
|
2730
2738
|
// } else {
|
|
2731
2739
|
// for (let i: number = 0, length: number = touchList.length; i < length; i++) {
|
|
2732
|
-
// if (touchList[i].pointerId === e.pointerId) {
|
|
2733
|
-
// touchList[i] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };
|
|
2740
|
+
// if (touchList[i as number].pointerId === e.pointerId) {
|
|
2741
|
+
// touchList[i as number] = { pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId };
|
|
2734
2742
|
// } else {
|
|
2735
2743
|
// touchList.push({ pageX: e.clientX, pageY: e.clientY, pointerId: e.pointerId });
|
|
2736
2744
|
// }
|
|
@@ -2778,7 +2786,6 @@ export function createTooltip(id, text, top, left, fontSize) {
|
|
|
2778
2786
|
* @private
|
|
2779
2787
|
*/
|
|
2780
2788
|
export function drawSymbol(location, shape, size, url, options) {
|
|
2781
|
-
var functionName = 'Path';
|
|
2782
2789
|
var renderer = new SvgRenderer('');
|
|
2783
2790
|
var temp = renderLegendShape(location, size, shape, options, url);
|
|
2784
2791
|
var htmlObject = renderer['draw' + temp.functionName](temp.renderOption);
|