Code Snippets Brainstorming

Requirements:

• The user can perform a certain operation and the code snippet widget will be updated with the corresponding C code.

  • Eg. When the user is on the BST visualiser, when they select ‘insert’, then the C source code for BST insertion will be shown. When they select ‘preorder’, then the C source code for preorder traversal will be shown.

• The user can manipulate the timeline (going back and forwards) and a particular line will be highlighted according to what we are animating.

Ideas:

• Have each line in a code snippet correspond to an animation function in the corresponding visualiser

• For each animation function in a visualiser assign it to an integer which corresponds to the line number in the code snippet

• What happens if an animation function is used on 2 different lines? then the above probably won’t work

• The CodeSnippet component will contain a div which allows svg.js to insert SVG.Text into. this then allows us to animate the lines of text in sync with the timeline (for example if we move the slider backwards the code snippet will highlight appropriately)

• Each AnimationProducer class will store an array of svg targets (each item is an SVG.Text element). This makes more sense than storing in a data structure class as we get easy access to the targets through the base class and each svg target only needs to exist for the lifetime of each AnimationProducer class

• Goals with syntax highlighting:

  • it looks like svg.js allows us to combine text together and to independently fill text with different colours, so we could just do basic highlighting of c keywords

Approach #1 – Using an <svg> element for the code snippet component

The main thing about this approach is that the code snippet component is tightly coupled with the animation producers.

• Render an <svg> element as a container for <text> elements, each of which correspond to 1 line of code.

  • Each <text> element’s reference is stored in a list by the appropriate class. When we want to highlight certain lines, we index into the list to access the references, then apply styling to them with svg.js.

  • The animation producer methods probably have to take in an extra linesToHighlight: number[] parameter.

• When ‘insert’ is clicked, the <svg> element should change its <text> elements to show the insertion source code.

Remaining tasks to do before Structs MVP:

• Make the code snippet window detachable and floating. This makes it easier for the user to not have to keep looking back and forth with the visualiser and code snippet, and can have them next to each other

• Add the code snippets for the remaining bst operations

• Move code snippets stuff from BSTAnimationProducer to AnimationProducer so linked lists can have code snippets as well

Some problems and possible solutions:

• For each animation function there’s a possibility that in some animation sequences we might want it to correspond to a line of code in a code snippet, while in another we might not want it to. This means that we can’t just call a highlightCode animation function in an animation function. To solve this we can have an animate function which is given an animation function as an argument and calls it, while also completing the animation sequence and another called animateAndHighlight which is given an animation function as an argument and calls it while also highlighting a line in the code snippet. Other solutions could be to pass a boolean argument to every animation function on whether to highlight or not, but this makes things not as clean and harder to understand when we call an animation function what the true/false value means. It’s also alot of repeated code as we’re just calling if (highlight) animateHighlight() in every animation function. Another solution could be to create another function for each animation function which also does the highlighting, but this is even more repetitive.

• Another issue is that if we call the highlight animation functions in individual animation functions, we are forced to highlight a certain line, or are forced to pass a line argument to every animation function, but in some cases we dont want to highlight a line in animation function so this argument becomes useless. another option could be making the argument optional but passing a number as an argument isnt the clearest. so we should probably perform the highlight animation function outside an animation function. If we specify which line to highlight independent of calling an animation function, it will be more flexible. Now because the highlight code function is called outside an animation function, we can’t push an array of animations to the timeline like in:

  public resetBST(root: Node): void { const animation: Runner[] = []; this.resetLinesRecursive(root, animation); this.resetNodesRecursive(root, animation); this.addAnimation(animation); }