Allow focusing on a given course

This commit is contained in:
Mattéo Delabre 2020-07-24 01:32:39 +02:00
parent d13a9ea3d7
commit 5c4f219f7a
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
1 changed files with 75 additions and 11 deletions

View File

@ -83,17 +83,28 @@ const makeCourseColor = mainColor =>
return hsl.hex();
};
const sizes = {
segmentOuter: 8,
segmentInner: 6,
stopRadius: 6,
stopBorder: 1.5,
courseSize: 15,
courseOuterBorder: 13,
courseBorder: 10,
courseInnerBorder: 7,
};
const segmentBorderStyle = feature => new Style({
stroke: new Stroke({
color: makeBorderColor(feature.get('colors')[0]),
width: 8,
width: sizes.segmentOuter,
}),
});
const segmentInnerStyle = feature => new Style({
stroke: new Stroke({
color: feature.get('colors')[0],
width: 6,
width: sizes.segmentInner,
}),
});
@ -104,9 +115,9 @@ const stopStyle = feature => new Style({
}),
stroke: new Stroke({
color: makeBorderColor(feature.get('colors')[0]),
width: 1.5,
width: sizes.stopBorder,
}),
radius: 6,
radius: sizes.stopRadius,
}),
});
@ -118,11 +129,11 @@ const getCourseStyle = color =>
{
const icon = document.createElement('canvas');
const iconSize = 35;
const shapeSize = 15;
const shapeSize = sizes.courseSize;
const iconSize = sizes.courseSize + sizes.courseOuterBorder;
icon.width = iconSize;
icon.height = iconSize * 0.6;
icon.height = iconSize;
const cx = icon.width / 2;
const cy = icon.height / 2;
@ -130,9 +141,9 @@ const getCourseStyle = color =>
const iconCtx = icon.getContext('2d');
for (let [color, size] of [
[makeBorderColor(color), 13],
[color, 10],
[makeCourseColor(color), 7]
[makeBorderColor(color), sizes.courseOuterBorder],
[color, sizes.courseBorder],
[makeCourseColor(color), sizes.courseInnerBorder]
])
{
iconCtx.fillStyle = color;
@ -223,9 +234,32 @@ const createMap = target =>
view,
});
// Run courses simulation and draw directly on the map
// Run courses simulation
const simulInstance = simulation.start();
// Course on which the view is currently focused
let focusedCourse = null;
const focusZoom = 17;
const startFocus = courseId =>
{
if (courseId in simulInstance.courses)
{
const course = simulInstance.courses[courseId];
view.animate({
center: course.position,
zoom: focusZoom,
duration: 500,
}, () => focusedCourse = courseId);
}
};
const stopFocus = () =>
{
focusedCourse = null;
};
// Draw courses directly on the map
map.on('postcompose', ev =>
{
simulInstance.update();
@ -256,6 +290,12 @@ const createMap = target =>
const point = new Point(course.position);
ctx.drawGeometry(point);
if (course.id === focusedCourse)
{
view.setCenter(course.position);
// view.setZoom(focus);
}
}
}
@ -263,6 +303,30 @@ const createMap = target =>
});
map.render();
map.on('singleclick', ev =>
{
const mousePixel = map.getPixelFromCoordinate(ev.coordinate);
const maxDistance = sizes.courseSize + sizes.courseOuterBorder;
for (let course of Object.values(simulInstance.courses))
{
const coursePixel = map.getPixelFromCoordinate(course.position);
const dx = mousePixel[0] - coursePixel[0];
const dy = mousePixel[1] - coursePixel[1];
const distance = dx * dx + dy * dy;
if (distance <= maxDistance * maxDistance)
{
startFocus(course.id);
return;
}
}
// Clicking anywhere else resets focus
stopFocus();
});
return map;
};