proximiio-js-library 1.10.0 → 1.10.2
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/lib/components/map/main.js +99 -85
- package/lib/proximiio.js +1 -1
- package/package.json +1 -1
|
@@ -237,90 +237,92 @@ var Map = /** @class */ (function () {
|
|
|
237
237
|
this.step = 0;
|
|
238
238
|
this.animateRoute = function () {
|
|
239
239
|
var _a;
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
};*/
|
|
282
|
-
// requestAnimationFrame(animate);
|
|
283
|
-
_this.animationInterval = setInterval(function () {
|
|
284
|
-
_this.updateData(route, incrementLength_1, counter_1, frames_1);
|
|
285
|
-
if (counter_1 === frames_1 + 1) {
|
|
286
|
-
clearInterval(_this.animationInterval);
|
|
240
|
+
if (_this.routingSource && _this.routingSource.route && _this.routingSource.route["path-part-".concat(_this.currentStep)]) {
|
|
241
|
+
var route_1 = _this.routingSource.route["path-part-".concat(_this.currentStep)] &&
|
|
242
|
+
((_a = _this.routingSource.route["path-part-".concat(_this.currentStep)].properties) === null || _a === void 0 ? void 0 : _a.level) === _this.state.floor.level
|
|
243
|
+
? _this.routingSource.route["path-part-".concat(_this.currentStep)]
|
|
244
|
+
: (0, helpers_1.lineString)(_this.routingSource.levelPoints[_this.state.floor.level].map(function (i) { return i.geometry.coordinates; }));
|
|
245
|
+
if (_this.defaultOptions.routeAnimation.type === 'point') {
|
|
246
|
+
clearInterval(_this.animationInterval);
|
|
247
|
+
clearTimeout(_this.animationTimeout);
|
|
248
|
+
var lineDistance = turf.length(route_1) * 1000;
|
|
249
|
+
var walkingSpeed = 1.4;
|
|
250
|
+
var walkingDuration = lineDistance / walkingSpeed;
|
|
251
|
+
var multiplier = _this.defaultOptions.routeAnimation.durationMultiplier;
|
|
252
|
+
var vizDuration = _this.defaultOptions.routeAnimation.duration
|
|
253
|
+
? _this.defaultOptions.routeAnimation.duration
|
|
254
|
+
: walkingDuration * (1 / multiplier);
|
|
255
|
+
var fps = _this.defaultOptions.routeAnimation.fps;
|
|
256
|
+
var frames_1 = Math.round(fps * vizDuration);
|
|
257
|
+
// console.log(`Route Duration is ${walkingDuration} seconds`);
|
|
258
|
+
// console.log(`Vizualization Duration is ${vizDuration} seconds`);
|
|
259
|
+
// console.log(`Total Frames at ${fps}fps is ${frames}`);
|
|
260
|
+
// divide length and duration by number of frames
|
|
261
|
+
var routeLength = turf.length(route_1);
|
|
262
|
+
var incrementLength_1 = routeLength / frames_1;
|
|
263
|
+
var interval = (vizDuration / frames_1) * 1000;
|
|
264
|
+
// updateData at the calculated interval
|
|
265
|
+
var counter_1 = 0;
|
|
266
|
+
// let start;
|
|
267
|
+
/*const animate = (timestamp) => {
|
|
268
|
+
if (!start) start = timestamp;
|
|
269
|
+
const progress = timestamp - start;
|
|
270
|
+
|
|
271
|
+
if (progress <= vizDuration * 1000) {
|
|
272
|
+
const frameProgress = progress / (vizDuration * 1000);
|
|
273
|
+
counter = Math.round(frameProgress * frames);
|
|
274
|
+
|
|
275
|
+
this.updateData(route, incrementLength, counter, frames);
|
|
276
|
+
|
|
277
|
+
requestAnimationFrame(animate);
|
|
278
|
+
} else {
|
|
279
|
+
// Animation completed
|
|
280
|
+
// Additional logic can be added here if needed
|
|
287
281
|
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
282
|
+
};*/
|
|
283
|
+
// requestAnimationFrame(animate);
|
|
284
|
+
_this.animationInterval = setInterval(function () {
|
|
285
|
+
_this.updateData(route_1, incrementLength_1, counter_1, frames_1);
|
|
286
|
+
if (counter_1 === frames_1 + 1) {
|
|
287
|
+
clearInterval(_this.animationInterval);
|
|
288
|
+
}
|
|
289
|
+
else {
|
|
290
|
+
counter_1 += 1;
|
|
291
|
+
}
|
|
292
|
+
}, interval);
|
|
293
|
+
}
|
|
294
|
+
if (_this.defaultOptions.routeAnimation.type === 'dash') {
|
|
295
|
+
var dashArraySequence_1 = [
|
|
296
|
+
[0, 4, 3],
|
|
297
|
+
[0.5, 4, 2.5],
|
|
298
|
+
[1, 4, 2],
|
|
299
|
+
[1.5, 4, 1.5],
|
|
300
|
+
[2, 4, 1],
|
|
301
|
+
[2.5, 4, 0.5],
|
|
302
|
+
[3, 4, 0],
|
|
303
|
+
[0, 0.5, 3, 3.5],
|
|
304
|
+
[0, 1, 3, 3],
|
|
305
|
+
[0, 1.5, 3, 2.5],
|
|
306
|
+
[0, 2, 3, 2],
|
|
307
|
+
[0, 2.5, 3, 1.5],
|
|
308
|
+
[0, 3, 3, 1],
|
|
309
|
+
[0, 3.5, 3, 0.5],
|
|
310
|
+
];
|
|
311
|
+
// @ts-ignore
|
|
312
|
+
_this.map.getSource('lineAlong').setData(route_1);
|
|
313
|
+
var animateDashArray_1 = function (timestamp) {
|
|
314
|
+
// Update line-dasharray using the next value in dashArraySequence. The
|
|
315
|
+
// divisor in the expression `timestamp / 50` controls the animation speed.
|
|
316
|
+
var newStep = Math.floor((timestamp / 50) % dashArraySequence_1.length);
|
|
317
|
+
if (newStep !== _this.step) {
|
|
318
|
+
_this.map.setPaintProperty('line-dashed', 'line-dasharray', dashArraySequence_1[_this.step]);
|
|
319
|
+
_this.step = newStep;
|
|
320
|
+
}
|
|
321
|
+
// Request the next frame of the animation.
|
|
322
|
+
requestAnimationFrame(animateDashArray_1);
|
|
323
|
+
};
|
|
321
324
|
requestAnimationFrame(animateDashArray_1);
|
|
322
|
-
}
|
|
323
|
-
requestAnimationFrame(animateDashArray_1);
|
|
325
|
+
}
|
|
324
326
|
}
|
|
325
327
|
};
|
|
326
328
|
// Cache the initial and final points along the route
|
|
@@ -1087,15 +1089,27 @@ var Map = /** @class */ (function () {
|
|
|
1087
1089
|
this.state.style.removeLayer('proximiio-shop');
|
|
1088
1090
|
}
|
|
1089
1091
|
}
|
|
1090
|
-
this.map.on('click', 'shop-custom', function (e) {
|
|
1091
|
-
_this.onShopClick(e);
|
|
1092
|
-
});
|
|
1093
1092
|
this.map.on('click', 'proximiio-pois-icons', function (ev) {
|
|
1094
1093
|
_this.onShopClick(ev);
|
|
1095
1094
|
});
|
|
1095
|
+
this.map.on('mousemove', 'proximiio-pois-icons', function (ev) {
|
|
1096
|
+
_this.map.getCanvas().style.cursor = 'pointer';
|
|
1097
|
+
});
|
|
1098
|
+
this.map.on('mouseleave', 'proximiio-pois-icons', function (ev) {
|
|
1099
|
+
_this.map.getCanvas().style.cursor = '';
|
|
1100
|
+
});
|
|
1096
1101
|
this.map.on('click', 'pois-icons', function (ev) {
|
|
1097
1102
|
_this.onShopClick(ev);
|
|
1098
1103
|
});
|
|
1104
|
+
this.map.on('mousemove', 'pois-icons', function (ev) {
|
|
1105
|
+
_this.map.getCanvas().style.cursor = 'pointer';
|
|
1106
|
+
});
|
|
1107
|
+
this.map.on('mouseleave', 'pois-icons', function (ev) {
|
|
1108
|
+
_this.map.getCanvas().style.cursor = '';
|
|
1109
|
+
});
|
|
1110
|
+
this.map.on('click', 'shop-custom', function (e) {
|
|
1111
|
+
_this.onShopClick(e);
|
|
1112
|
+
});
|
|
1099
1113
|
this.map.on('mouseenter', 'shop-custom', function () {
|
|
1100
1114
|
_this.onShopMouseEnter();
|
|
1101
1115
|
});
|