Math Map

In order for this to be a map of CONNECTIONS between math concepts, I need to be able to edit the links' descriptions and names.

I mostly copied the code from the NodeEditor file, but made a few tweaks to fit the links.
I also made more art for the toolbar.
It was pretty easy to make the menu and get it all working! It looks almost the same as the node editor menu except without an image input.

To replace descriptions with wiki links, I commented out the description editor and its related variables. I commented it out instead of deleting it because I need it later for the link editor.

Then I added a link and some other simple code, and boom! It's done. I have an addend field in case a page needs disambiguation, as in the case of https://en.wikipedia.org/wiki/Division_(mathematics).

With that done, my three tiny goals are finished! Now on to bigger ones.

I added code for adding and removing nodes, and then had to make a function for updating the IDs of every node and link such that things kept the same structure regardless of removals or additions.

There are currently a few odd edge cases where deleting a node causes some links to jump to other nodes. I don't know how to fix this at the moment, but I will at some point.

There are a couple things I need to clean up before moving on to bigger things, like editing link descriptions and a viewer for the users of the website.

First, I need to be able to download the new graphs I make as JSON files.

After a google search, I did it very easily with a keydown check and some link-creating.
Wow, a lot of things are called links in this project...

To make undo-ing into an actual functional feature, I need an array to keep track of the state and for going back and forth.

Making the code work was a little frustrating, but I found out (by asking Copilot, sorry) that I was only storing references to data and not clones.
Once I fixed that, and after a BUNCH more trial and error, I got everything working fine.

I have two helper functions for saving the state.

First, I changed the log sending function to take in a main action name and then an extra details string, which is optional. This is so I can do the undo/redo messages easily.

Most of the log sending was pretty simple.
The only one that was more complex was the node saving one, where I had to some array-string shenanigans to get a good, clear message.

First, I need an array of states for keeping track of changes and so that you can undo.
Here's the logic I wrote for undoing and redoing inside of the edit logger. This code only affects the edit logger because the other logic happens in the GraphEditor.
I've also added undo and redo buttons that do exactly what you'd expect. :३
Next, I'll add all of the edit messages and actual data logic.

One of the things I had on my to-do list was to add an undo button. This means I have to keep track of the state at all times.
First, I'm going to make a Godot-style edit log to show what you're doing. The code is pretty simple; it exports a function for other components to use to send messages.

Now, different parts of code can call its function, and send a message to be put in the log! It only needs to be as simple as

~~~~~~~~~
~~~~
logger.log("क्या हो रहा है?")


Next is to fill in messages where they should be sent and, of course, fix any issues that come up lol :D
But first I'm going to sleep. It's like 4 A.M. right now :sob:

Today, I started out trying to implement zooming, but it got frustrating and I decided to switch to making link editing.

You can create a new link by clicking on one node and then clicking on another. You can delete a link by clicking on it.

While making a new link, a little ghost path will follow the mouse to show what the link will look like.

To find out when you're clicking an existing link, I needed to calculate the distance of the mouse's position to the link line. I didn't know how to do this at first, so I copied a Math Stack Exchange answer.
I won't go into detail here, but I implemented the function, plus some handling for the case where the mouse is too far away.

Unfortunately, now, whenever you drag the canvas, it jitters a bit. I don't know how to fix this 😭

An editor requires different ways of doing things. Here, there needs to be a way to:

• Add nodes

• Edit nodes' data

• Drag nodes

• Change linkings between nodes

I decided to make a separate component for the toolbar, and the code really showed me how nice of a combo Svelte and Tailwind are. I only needed 27 lines of code to make a great-looking menu.

This is the result. Dark gray means selected, and blue means hovering over. Currently the buttons don't do anything, but that's coming up next!

I've heard of Tailwind before, but never knew how cool it was! I installed it in this project to try it out, and I love it so much that I changed most of my CSS to Tailwind. I love its syntax and intuitive naming system.

For ease of repetition, I defined the css strings in my TS, and used them in the classes of HTML objects.

I just spent an hour messing around with stupid GitHub deployment stuff, but now it's all fine... I won't need to do any of this stuff for a while, luckily.

I had to remove the images from the nodes in order for it to work.

Svelte's $state functionality is amazing and can be very helpful. One thing it doesn't help with, however, is changing data by reference. I originally was using the focusNode variable to store the node you were editing, but I turned it to a state variable and it suddenly stopped working. It took me a while to fix, but now I'm done and this was my solution.

I had to look up a tutorial to get the demo up — it's now live!!!
I'm using the command shown in the image.

I feel like I'm really getting the hang of Svelte now. I pretty easily added a bunch of stuff.

Now, you can right-click to open the editing menu, and there are buttons for save and exit. It'll warn you if you exit without saving, and it'll also ask confirmation when you click save.
Also, in onmousedown, 1 is middle button and 2 is right click. Weird.

The code for saving nodes was pretty simple! It'll be harder probably when I hook it up to a server or whatever, but for now it was easy.
Thanks for reading, and read more in my Github devlogs!

These last few hours have been really annoying.
First off, I was dealing with some really stupid importing bugs that I spent upwards of an hour fixing.

Once the draw function was done, I had to work out the issues in the dragging of the screen. I fixed it with TWO PLUS SIGNS.

I was very relieved when I finally got done and was able to easily edit the nodes, dragging them around and moving the screen smoothly.

I've added the GraphEditor screen and the NodePanel for editing node content, next, I just have to put them together!

This is my first time using Svelte, so I've just been getting used to it.

I made a component for editing a node, giving it a title, description, and image. I also stole some CSS from one of my other projects to use for this one, and I think it looks acceptable.