Editing the tutorial
This document will serve as a basic outline for how the current onboarding tutorial is set up so that you can more quickly edit the tutorial in the event of future changes.
public/javascripts/SVLabel/src/SVLabel/onboarding/OnboardingStates.js
This file contains the basic array format that each "state" of the tutorial is stored in. Notice how each tutorial state is an entry in the array (e.g. "select-label-type-1"). Most states contain the following information:
- A
propertiesentry, which keeps track of any relevant information for the execution of this state. Pay special attention to the"action"and"minHeading"/"maxHeading"entries. - A
messageentry. This is what appears in the text box when the state is active - A
panoIdentry. This is the ID of the GSV pano used for the tutorial. Will be the same for all states - An
annotationsentry. This is for more miscellaneous information. You can probably just copy and modify the information here from another entry. -
Importantly, a
transitionentry. This is the function that will be called byOnboarding.jswhen the state is activated (what 'activated' means depends on howOnboarding.jshandles the type of state that is active). The return type of this function should be a String to the next relevant state. This function also updates the progress bar for the tutorial.
OnboardingStates.js also keeps track of the progress bar for the tutorial. Make sure to increment the completedRate calls in each state, as well as the numStates variable whenever you modify the number of states.
public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js
This file contains the logic for state execution. For a basic understanding of the control flow here, take a glance at the large else block in the _visit() function, as well as the methods that are called in that block.
Most of the functions called by that block have a similar structure. They attach listeners to certain events, which then call the transition function of the state that they refer to. To add a state of a new type (as opposed to a type that already exists, like rating the severity of a tag), you will have to add one of these methods yourself.
Hopefully, this document provided you a decent overview of how to change the tutorial flow. For some examples of changes made to the tutorial flow, you can view PRs #1493 or #1485.
