Skip to content

Commit

Permalink
Fixed interactivity disable
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdl60660
sdl60660 committed Jun 21, 2022
1 parent 540fc61 commit 0cc43af
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 45 deletions.
79 changes: 53 additions & 26 deletions src/components/Map.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
sendUnnamedFeatureData,
basicSiteTypeData,
getTickElevation,
getFlowrateData
getFlowrateData,
} from "./utils/mapUtils";
export let bounds;
Expand Down Expand Up @@ -165,7 +165,7 @@
// If starting coordinates were passed in as a parameter (from a shared link), load starting path
if (startingSearch) {
initRunner({ map, e: {...startingSearch, from_share_link: true} });
initRunner({ map, e: { ...startingSearch, from_share_link: true } });
startingSearch = null;
}
});
Expand Down Expand Up @@ -226,14 +226,15 @@
// Turn off map interactivity
map.interactive = false;
map.scrollZoom.disable();
map.dragPan.disable();
d3.selectAll(".mapboxgl-ctrl-geocoder").style("display", "none");
d3.select(".mapboxgl-ctrl-top-left").style("display", "none");
// Correct out of bounds longitudes from map wrapping
if (e.lngLat.lng < -180) {
e.lngLat.lng += 360
}
else if (e.lngLat.lng > 180) {
e.lngLat.lng += 360;
} else if (e.lngLat.lng > 180) {
e.lngLat.lng -= 360;
}
Expand Down Expand Up @@ -271,7 +272,7 @@
errorStatus = flowlinesData;
vizState = "error";
sendQueryData(e.lngLat.lat, e.lngLat.lat, false, true);
sendQueryData(e.lngLat.lat, e.lngLat.lat, false, true);
resetMapState({ map, error: true });
return;
}
Expand All @@ -284,10 +285,10 @@
// currentFlowrateIndex = 0;
}
totalLength =
flowlinesData.features[0].properties.pathlength >= 0
? flowlinesData.features[0].properties.pathlength + flowlinesData.features[0].properties.lengthkm
? flowlinesData.features[0].properties.pathlength +
flowlinesData.features[0].properties.lengthkm
: undefined;
// Find the parent features of flowlines along the path
Expand Down Expand Up @@ -335,9 +336,10 @@
let terrainElevationMultiplier = 1.2;
let cameraBaseAltitude = 4300;
const elevationArrayStep = Math.max(2, Math.round(
Math.min(coordinatePath.length / 4 - 1, 100)
));
const elevationArrayStep = Math.max(
2,
Math.round(Math.min(coordinatePath.length / 4 - 1, 100))
);
// Sometimes while 3D tiles are still loading, the queryTerrainElevation method doesn't hit,
// so we'll give it a few attempts with a delay in between before falling back on a method that doesn't
Expand Down Expand Up @@ -444,7 +446,8 @@
// We'll do this with a countdown timer on desktop, and just right into it on mobile
if (window.innerWidth > 700) {
vizState = "overview";
map.scrollZoom.enable();
// map.scrollZoom.enable();
// map.dragPan.enable();
postRun = false;
runTimeout = setTimeout(() => {
Expand All @@ -471,7 +474,9 @@
riverFeatures,
flowrates,
}) => {
map.interactive = false;
map.scrollZoom.disable();
map.dragPan.disable();
altitudeMultiplier = defaultAltitudeMultiplier;
paused = false;
Expand Down Expand Up @@ -500,7 +505,7 @@
const animationDuration = Math.round(speedCoefficient * routeDistance);
map.once("moveend", () => {
map.interactive = true;
// map.interactive = true;
// When "raindrop" animation (flyto) is finished, begin the river run
runRiver({
Expand Down Expand Up @@ -542,7 +547,7 @@
return { error: true, status: "API error" };
}
const results = (await flowlinesResponse.json());
const results = await flowlinesResponse.json();
if (results.code === "fail") {
return { error: true, status: "Routing error" };
}
Expand Down Expand Up @@ -607,12 +612,13 @@
const stopFeatureNameOverrides = {
"Saint Lawrence River": "Gulf of Saint Lawrence",
"Yangtze": "East China Sea",
"Canal do Sul": "North Atlantic Ocean"
Yangtze: "East China Sea",
"Canal do Sul": "North Atlantic Ocean",
};
const stopFeatureName = closestFeature.properties.stop_feature_name === "" ?
`Inland Water Feature ${closestFeature.properties.id}`:
closestFeature.properties.stop_feature_name;
const stopFeatureName =
closestFeature.properties.stop_feature_name === ""
? `Inland Water Feature ${closestFeature.properties.id}`
: closestFeature.properties.stop_feature_name;
// If the closest feature in the stop feature set is more than 10 km away, this is landing on an unidentified inland water feature
if (
Expand Down Expand Up @@ -643,7 +649,7 @@
const allNames = featurePoints.map(
(feature) => feature.properties.feature_name
)
);
sendUnnamedFeatureData(startCoordinates, allNames);
// This fixes a rare, but frustrating bug, where because I don't sample each flowline for VAA data, and because...
Expand Down Expand Up @@ -701,7 +707,8 @@
distance_from_destination:
featureData.properties.pathlength === -9999
? 0
: featureData.properties.pathlength + featureData.properties.lengthkm,
: featureData.properties.pathlength +
featureData.properties.lengthkm,
index,
stream_level: featureData.properties.streamlev,
active: false,
Expand Down Expand Up @@ -811,7 +818,8 @@
const alongCamera = projectDistance({
distanceGap: altitudeMultiplier * distanceGap,
originPoint: smoothedPath[0],
targetPoint: alongTarget === smoothedPath[0] ? smoothedPath[1] : alongTarget,
targetPoint:
alongTarget === smoothedPath[0] ? smoothedPath[1] : alongTarget,
});
const bearing = bearingBetween(alongCamera, alongTarget);
Expand Down Expand Up @@ -943,7 +951,13 @@
}
// Calculate camera elevation using the base elevation and the elevation at the specific coordinate point
const tickElevation = getTickElevation(phase, elevations, altitudeMultiplier, cameraBaseAltitude, terrainElevationMultiplier);
const tickElevation = getTickElevation(
phase,
elevations,
altitudeMultiplier,
cameraBaseAltitude,
terrainElevationMultiplier
);
let alongTarget = along(
lineString(route),
Expand Down Expand Up @@ -1039,15 +1053,17 @@
map.once("moveend", () => {
vizState = "overview";
postRun = true;
// map.interactive = true;
map.interactive = true;
map.scrollZoom.enable();
map.dragPan.enable();
// resetMapState({ map });
});
};
const resetMapState = ({ map, error = false }) => {
map.interactive = true;
map.scrollZoom.enable();
map.dragPan.enable();
aborted = false;
clearRiverLines({ map });
Expand Down Expand Up @@ -1125,6 +1141,12 @@
}
};
const enableInteractivity = () => {
map.interactive = true;
map.scrollZoom.enable();
map.dragPan.enable();
};
const setPlaybackSpeed = (newVal) => {
paused = false;
playbackSpeed = newVal;
Expand Down Expand Up @@ -1156,10 +1178,14 @@
};
const handleKeydown = (e) => {
if (e.key === "Escape" && vizState === 'running' && activeFeatureIndex >= 0) {
if (
e.key === "Escape" &&
vizState === "running" &&
activeFeatureIndex >= 0
) {
aborted = true;
}
}
};
$: coordinates.update(() => {
if (mapBounds._sw) {
Expand Down Expand Up @@ -1230,6 +1256,7 @@
on:abort-run={exitFunction}
on:progress-set={(e) => handleJump(e)}
on:show-suggestion-modal={showSuggestionModal}
on:autoplay-disrupted={enableInteractivity}
{vizState}
{activeFeatureIndex}
{featureGroups}
Expand Down
45 changes: 26 additions & 19 deletions src/components/NavigationInfo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,22 +79,21 @@
const disruptAutoplay = () => {
clearTimeout(runTimeout);
dispatch("autoplay-disrupted");
autoplayDisrupted = true;
};
const handleKeydown = (event) => {
if (event.key === "Escape") {
if (vizState !== "overview") {
return;
}
else if (postRun === true || autoplayDisrupted === true) {
} else if (postRun === true || autoplayDisrupted === true) {
exitNavigationPath();
}
else {
} else {
disruptAutoplay();
}
}
}
};
onMount(() => {
const unsubscribeStoppingFeature = stoppingFeature.subscribe(
Expand Down Expand Up @@ -144,7 +143,11 @@
<!-- Desktop/Tablet -->
{#if screenWidth > 700}
<div class="feature-list-wrapper">
<div class="feature-listing bounding-location" tabindex="0" aria-label="starting location">
<div
class="feature-listing bounding-location"
tabindex="0"
aria-label="starting location"
>
{currentStartLocation}
</div>
{#each featureGroups as { name, length_km, index, first_coordinate }, i}
Expand Down Expand Up @@ -174,30 +177,34 @@
{i + 1}. {name} ({length_km} km)
</div>
{/each}
<div class="feature-listing bounding-location" tabindex="0" aria-label="stopping feature">
<div
class="feature-listing bounding-location"
tabindex="0"
aria-label="stopping feature"
>
{currentStoppingFeature}
</div>

<div class="progress-points">
{#each [currentStartLocation, ...featureGroups, currentStoppingFeature] as progressPoint, i}
<div
style="
<div class="progress-points">
{#each [currentStartLocation, ...featureGroups, currentStoppingFeature] as progressPoint, i}
<div
style="
background-color: {activeFeatureIndex + 1 === i
? 'rgb(76, 79, 230)'
: activeFeatureIndex + 1 > i
? 'rgb(117, 117, 117)'
: 'rgb(243, 243, 243)'};
top: calc(1rem + 8px + ({i /
(featureGroups.length + 2)}*(100% - 2rem - 6px)));
(featureGroups.length + 2)}*(100% - 2rem - 6px)));
"
class="progress-point"
key={i}
/>
{/each}
</div>
class="progress-point"
key={i}
/>
{/each}
</div>

<div class="progress-bar" />
</div>
<div class="progress-bar" />
</div>

<!-- Mobile (simpler, only displays name of current feature) -->
{:else if activeFeatureIndex >= 0 && featureGroups}
Expand Down

1 comment on commit 0cc43af

@vercel
Copy link

@vercel vercel bot commented on 0cc43af Jun 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

river-runner-global – ./

river-runner-global-samlearner.vercel.app
river-runner-global.samlearner.com
river-runner-global-git-main-samlearner.vercel.app
river-runner-global.vercel.app

Please sign in to comment.