We can now save and load our Graphs. That almost finishes up our dialogue system. However, there still are two things left to do: The Minimap and the Custom Inspector. We'll be doing our Minimap first, as that
will finish the Editor Window features. The Minimap is simply a square that shows you
every element that the Graph has at the moment. It allows for navigation to those elements by clicking in the rectangles present in the Minimap box. There are, I believe, limits on the amount of information that can be shown in the minimap at a time, but it can still be somewhat useful for
someone, so we'll be adding it to our Graph. Another useful feature for the Graph is the "F" key. If you press on it, it will simply zoom out
enough that you can see the whole Graph. Thankfully for us, it will be quite
simple to add our Minimap to the Graph, as Unity provides us with a Minimap class
that does everything automatically for us. So go to our "DSGraphView" script,
and in here, in our constructor, we'll be calling in a new method
to which I'll name "AddMiniMap". I'll place it under our "AddSearchWindow"
method, in our "Elements Addition" region. In here, create the Minimap by typing
in "MiniMap" and I'll name it "miniMap". I'm adding an uppercase "M"
because the class does so as well. Then, call its constructor together with the Object Initializer. We'll be setting its "anchored" variable to "true". If this variable is true, we will not
be able to move our MiniMap around. If this variable is false, we will
be able to move it around our Graph. If you want to be able to move it, simply don't
pass in anything, as it defaults to false. With that done, we'll need to set its
position in the graph and give it a size. Because I've already made this system, I
already know what position and size I'll want, so type in "miniMap.SetPosition()"
and this method accepts a "Rect", so we'll need to type in "new Rect()", to which
the "x" and "y" coordinates will be "15, 50", and the "width" and "height" will be "200, 180". Once that's done, we can add it to the
Graph View by typing in "Add(miniMap)". We use the "Add" method here instead of "AddElement" because "miniMap" is a
"VisualElement" and not a "GraphElement". If we save, we should now be able
to see our Minimap in the Graph. However, it's not looking too
consistent with the rest of our styles. Unfortunately, I wasn't able to update
its styles through Style Sheets, but we are able to update them
through the "style" variable instead. So back in our "DSGraphView"
script, go to our constructor and right after our "AddStyles" method, call in a
new method we'll create named "AddMiniMapStyles". I'll place it under our "AddStyles"
method in the "Elements Addition" region. We'll be updating the background color
and the border color of our Minimap. Unfortunately, I wasn't able to
find a way to update the text color, as the "color" variable didn't seem to do the trick. Thankfully though, the text color is already
yellowish, so it kinda fits our styles. We'll be creating StyleColor variables and
assign them to the respective style variables. So type in "StyleColor" and
I'll name it "backgroundColor". Then, call its constructor and pass in
"new Color32(29, 29, 30, 255)". I already have the codes I want transformed
to RGB but feel free to use your own. Duplicate this line by pressing
"Ctrl + C" and then "Ctrl + V" and swap the name to be "borderColor" instead. I'll make the RGB code be "51, 51, 51". Some Editors might have different
shortcuts to duplicate the line. Now that we have our colors in their
own variables, we need to assign them. However, we can't really do that as we
don't have a reference to our Minimap, so we can't really update its "style" variable. To fix that, we'll be making our Minimap be a
global variable, so up above in our variables, create a new "private" variable of
type "Minimap" and name it "miniMap". Then, in our "AddMiniMap" method, simply remove
the "MiniMap" type from the "miniMap" variable. Back to our "AddMiniMapStyles"
method, we can now type in "miniMap.style.backgroundColor = backgroundColor". With that done, all we need now
is to update our border color. Unfortunately, the "style" variable does not
provide us with a "borderColor" variable. Instead, we'll need to update
all the border sides colors, so type in "miniMap.style.borderTopColor"
and assign the "borderColor" variable to it. We'll need to do the same for the other 3
sides, so copy and paste the same line 3 times and swap the "top" with "right", "bottom" and "left". If we save and go back to Unity, our
Minimap should now have its styles updated. We have our Minimap working pretty well but we'll also be making it so we can show it or hide
it anytime we want through a Button. To do that, let's head to our "DSEditorWindow" script and in our "AddToolbar" method we'll be
creating a new last "Button" to which I'll name "miniMapButton". Then, create it by assigning to it
"DSElementUtility.CreateButton("Minimap")". When that's done, pass in an empty callback and call in a new method we'll be
creating named "ToggleMiniMap". I'll make it be part of our "Toolbar Actions" region. We'll be using this method to show or hide the Minimap. Of course, because our Minimap variable
is placed in our "DSGraphView" script, we'll need to either pass the variable to
the Editor Window constructor or simply create a public method in our
Graph View script that we can use here. I'll go with the second option, so
back to our "DSGraphView" script, in our "Utility Methods" region, create a new "public" method to
which I'll name "ToggleMiniMap". Inside, we'll be setting the minimap
"visible" variable to its opposite value, so if it was invisible it will become visible,
and if it was visible it will become invisible. To do that, type in "miniMap.visible = !miniMap.visible". This works because "visible" is of "bool" type. When that's done, go back to the "DSEditorWindow" script, and in our "ToggleMiniMap" method,
type in "graphView.ToggleMiniMap()". When that's done, don't forget to add the button
to the toolbar in our "AddToolbar" method. If we save and go back to Unity, we should
now be able to show or hide our Minimap. There is one last thing we'll be doing
though and that's updating the button styles to have an yellow text color
whenever the Minimap is visible. Of course, we'll be doing that with style sheets. So in our "Editor Default Resources" folder, in the "DialogueSystem" folder,
open up the "DSToolbarStyles" uss file. Under every other class selector, we'll
be adding one for the selected buttons so type in ".ds-toolbar__button__selected". We'll simply set its "color: var(--ds-colors-window-yellow)". With our class selector created, let's
head back to our "DSEditorWindow" script and in our "ToggleMiniMap" method, we'll need to somehow add or remove this class from the button according to its visibility. Thankfully, there's an handy visual
element method called "ToggleInClassList", which simply adds or removes a class we pass in depending if the element already had the class or not. Of course, we need to use this in our
minimap button so above in our variables create a new "private Button"
and I'll name it "miniMapButton". Then, remove the "Button" type
from the "AddToolbar" method. Back to our toggle method, type in
"miniMapButton.ToggleInClassList()" and pass in "ds-toolbar__button__selected". Do note though, that unless we call this method once, the button won't have the style whenever
we open the Window for the first time. We have two options here: either add the class when we create the button, or start the button as invisible. I'll go with the second one. So in our "DSGraphView" script,
in our "AddMiniMap" method, type in at the end "miniMap.visible = false". If we now save everything and go back to Unity, our button should update the styles
according to the Minimap visibility.
