majeedkazemi / code-struct Goto Github PK

• a nextHole() method that finds and returns the next empty hole of a code construct (this should later be called recursively in order to find the next hole in a big expression)
• a focus() method on the syntax-tree-manager that takes a node and selects the left and right cursor positions of that node

• highlighting the selection of code-constructs and tokens is limited to empty statements (holes)
• no selection occurs when using the left/right arrow keys
• what to do with clicks and up/down arrow-keys?
  • moving the cursor to the closest meaningful cursor position?

• allowing different types: ["something", 12345, True, [1, 2, 3]]

• left, right, up, and down should work correctly (either go to the next editable token or next char if it is inside an editable text)
• items can either be selected (as a whole) or partially. Its nice to jump to the first empty statement when adding a new construct, but navigating the cursor should also allow for jumping between selectable items as well (and not just empty things)

• when a variable declaration statement is added => add the var to the toolbox
• when the identifier is renamed => rename it in the toolbox
• when it is deleted => remove if from the toolbox

• when the regex validator fails, make the background color of that token go red with an animated transition.

• allow modules and statements to have the same recursive functionalities: build, rebuild, add, delete, replace, ...
• allow for nested multi-line statements
• allow the creation of lists, dicts, sets, and function definitions
• allow having multiple header statements such as elif and else in if-statements
• allow moving statements into and out of multi-line (indented) statements:
  • using backspace at the beginning of the last line in a multi-line statement => moves it back (out of the multi-line statement)
  • using tab at the beginning of a statement right after a multi-line statement => movies it forward (into the multi-line statement)
• may also want to add another empty statement at the end of multi-line statements (on the same indentation level) so that if the user is done working inside the multi-line statement, they could easily navigate out of it using the right-arrow key or a click on that line. (compare this with having the user press backspace to go back one indentation level (which only works on the last line of a multi-line statement)

Description:
Inserting a new line by pressing Enter at the beginning of an if-block inserts the new line one character to the right of the cursor instead of right before the cursor.

Severity: 3

Steps to Reproduce:

1. Insert an if-statement
2. Move cursor to before the "if" and press Enter
   i. Observe how the if-statement is broken into pieces.
   ii. Affected keywords: if, while, for

• should add something in the empty expression to start editing a string (similar to grasshopper)
• be able to edit it after it is there (free typing, just check/parse (through a regex) its value to ensure that it holds a valid value

• connect editor to the AST
• render inserted code-constructs into the text-editor
• run some code-based tests

to enable later visual layouts and reduce our depedency to monaco's predefined and non-customizable behaviors, the visuals of the cursor and selection should be implemented using the dom nodes and css.

Description:
You can pass almost anything to any method. This does not break the program itself, but it does allow for the creation of code that would not run.

Severity: 2

Steps to Reproduce:

1. Insert an if-statement or something similar that can accept a method call
2. Insert len(---) as condition for the statement
3. Insert another len() call as an argument to the call from step 2
   i. Observe how the user is allowed to do make this edit resulting in: len(len(---))

• to display invalid insertions (for now it's limited to invalid chars when editing strings, numbers, and identifiers)

Description:
User cannot use arrow keys to exit indented blocks of code.

Severity: 2

Steps to Reproduce:

1. Insert any code that requires indents such as an if-statement
2. Try to navigate outside of the block using arrow keys
   i. Notice how you are unable to do so
3. Click on the beginning of an empty line outside of the indented block
   i. Click throws an error
   ii. Any further edits will insert code inside the indented block regardless of cursor position

• based on its position
• alert if is being placed in an invalid place

use these colors: #037D95, #FFA823, #7E0D81, #FD690D, #B2D11E

directions:

• right: move to the next editable token.
  Special cases:
  1. reaches the end of the list: should move up in the hierarchy to find the next editable item
  2. reaches the end of the statement: should go to the beginning of the next line
• left: move to the prev editable token.
  Special cases:
  1. reaches the beginning of the list: should move up in the hierarchy, but to the left, to find the next editable item
  2. reaches the beginning of the statement: should go to the end of the prev line
• up: move to the closest editable token above the currently selected item.
  Special cases:
  1. there is no line above => should go to the first editable item of the current statement
• down: move to the closest editable token below the currently selected item.
  Special cases:
  1. there is no line below => should go to the last editable item of the current statement

• in expressions:
• when the user enters an initial type, the rest of the expression's valid edits should get updated based on the initial type

• currently focus on lists and working with strings
• builtin functions like len(), and range()
• accessing (indexing) and referencing => to use the value
• modifying => to update a value at an index
• append(), insert(), extend(), remove(), pop() methods on the list data-structure
• allow for looping over lists

• based on its position
• alert if is being placed in an invalid place

• add the following binary expressions --- > ---, --- >= ---, --- < ---, --- <= ---, --- == ---

• make it also add an empty line at these positions when the user presses enter

Description:
Uncaught TypeError gets triggered by the ast while making various edits. It is not limited to the steps below, but these steps are the easiest and most consistent way of reproducing it.

Severity: 2

Steps to Reproduce:

1. Create a variable and set it to either True or False
   i. Observe console error
   ii. Window loses focus (I think this is actually due to the logging in the console. Not sure why, but whenever a message is printed there, the edit window loses focus)

UPDATE:
1.ii is fixed. 1.i is still an issue.

• determine the pixels
• drawing shapes on them
• moving/re-rendering the shapes when the whole code is moving

• addable items in the toolbox should be updated based on whether they could be added to the current position or not
• if could not be added => show a tooltip on why it cannot be added
• on editable texts (identifiers, numbers, and strings) => if the user presses an invalid character => explain the reason through an error message box

Description:
Same as title.

Severity: 3

Steps to Reproduce:

1. Insert an Else or Elif as the first statement in the code without first inserting an If

valid top-level node types:

• (empty line, left and right cursor positions) -> statement
• (empty-expr) -> expression
• (typed empty-expr) -> typed-expression

• do we event want to allow for this?

• with empty expressions
• based on its position
• alert if is being placed in an invalid place

Description:
Literal edit windows are broken. They allow you to make text edits almost everywhere.

Severity: 4

Steps to Reproduce:

1. Create either a numeric or string literal anywhere
2. Enter some characters into it and then use arrow keys to step outside and edit outside of valid spaces.
3. Can also delete the literal altogether and make edits outside of it that way (delete quotations for strings).

• for example, for an editable token => if it comes from a mouse-click it should go to the specific character that was clicked, but when the event comes from an arrow-key event, it should select the first char of that editable token

Description:
There does not seem to be differentiation between when a variable is initialized for the first time and when it is simply being assigned a value after the fact. This creates duplicates in the Toolbox.

This has implications for scope as well. What if the user wants to define two variables with the same name, but in different scopes? They are currently not differentiated inside the toolbox.

Severity: 2

Steps to Reproduce:

1. Initialize a new variable
2. Attempt to assign a new value to it

• delete: deletes next editable token
• backspace: deletes prev editable token
• deletion of a token/expression replaces it with a hole
• deletion of a statement replaces it with an empty line statement
• when deleting an empty line statement, should check if its not the only thing in the body of the module

• inputs: context (position at the syntax-tree), typed text
• output: variables, functions, operators, and code constructs that could be used at that position

• create a small reference table with the following props:
  • scope: declaration line + scope_id (generated for each scope)
  • reference to the variable assignment statement => for name, and type
• create a new code-construct for referencing variables
• add declared variables to the toolbox to be used

Description:
Creating a list variable allows for broken syntax to be inserted into the program.

Severity: 2

Steps to Reproduce:

1. Create a variable, but do not assign a value right away.
2. Assign the variable to an empty list ([])
3. Now select the option to add a single list element (the one right below the empty list)
   i. This produces this list: [, [---]] where the space before the comma does not allow for a value to be inserted so this list will always result in a syntax error

Description:
You can still insert an element, but there is just no visual prompt. The user might be used to seeing those and think that they cannot add elements when in reality they can.

I am not sure if we want to change this though. Lists can be empty, I just thought it would be confusing for the user since they'd be used to the prompts being there whenever they are allowed to insert something.

Severity: 1

Steps to Reproduce:

1. Create a variable and assign an empty list to it
   i. Observe how there is no hole prompt in the list

• two different buttons close to each other

doing the following steps:

• create an empty expr/statement
• build() it with the proposed lineNumber
• obtain the next empty token using nextEmptyToken()
• focus to the next empty token (which updates the focused node, index, and position)

Description:
You can call a method from an object regardless of type. So a string could call a list method. The program does not break, but it would result in code that does not run.

Severity: 2

Steps to Reproduce:

1. Create a variable of one type, for example integer and then call a method not meant for integers from it.

Description:
Scrolling moves selection boxes from their original positions. This is probably just a visual issue.

Severity: 1

Steps to Reproduce:

1. Create a couple of lines of code
2. Scroll down and see the selection boxes move from their correct positions

Description:
Not sure if this is intended, but the user is unable to make changes to variable values once a single assignment is made.

Severity: 2

Steps to Reproduce:

1. Create a variable and assign it some value
2. Create a second variable and assign the first variable to the second one
   i. Notice how now you cannot edit the value of the new variable anymore

Description:
When making a for-loop, the cursor is automatically placed at the second hole in the loop. Subsequently pressing the left arrow key will select the entire statement instead of the left hole. This could extend to other constructs as well.

Severity: 2

Steps to Reproduce:

1. Create a for-loop
2. Press the left arrow key to try and select the first hole in the loop.
   i. Observe how the entire for-loop statement gets selected

• implement a serialization / de-serialization mechanism for storing the AST
• storing the state of the AST along with the editor's text on events that successfully change something in the editor
• adding an undo button (with hover-on ctrl+z shortcut)

• on PrevLineTkn and NextLineTkn

• when adding a --- = --- for assigning variables, the cursor jumps to adding an identifier for the variable:
  • enter special identifier editing
  • typing with a keyboard => validating the regex (/^[^\d\W]\w*$/g)
  • give errors if invalid identifier was typed => could convert spaces to underlines
  • finish identifier editing

maybe as a starting point, when the user focuses (focus select) on the identifier, it will always enter edit mode

Description
If you perform several edits in the middle of an empty placeholder, it will break navigation.

Severity: 4

Steps to Reproduce

1. Insert for-loop
2. Place cursor right after the first placeholder box (can be done with both the keyboard and the mouse)
3. Use left arrow key to step inside the placeholder. You can now edit it as you which breaks further selection (arrow keys can no longer be used to select other editable items and the cursor moves one space at a time).
4. If you perform some more edits, you won’t necessarily be able to select them again and delete or change them.

Add ability to subscribe to events on changing, replacing, or deleting a code construct.

code : CodeConstruct
callback : () => {...}

code.onChange.subscribe(callback)
code.onReplace.subscribe(callback)
code.onDelete.subscribe(callback)

• all statements will replace EmptyLine statements
• should fix #18 afterwards