rehnarama / malte Goto Github PK

We might write files with commands in the terminal! These should be seen in the tree view (#39), so we need to watch the file system for changes and the resubmit the file tree when changes occurs (#37)

It doesn't seem to work on some docker hosts (windows) and we map the ports anyway, so it's okay to remove it!

This includes:

• Creating the editor frontend #27
• Establish WebSocket connection between server and client #28
• Expose a file as a in-memory buffer from the backend to the frontend via the WebSocket connection #29
• Establish a set of commands (insert/remove) that is sent to/from the server between clients that is applied to the buffer #30
• Periodically save the in-memory buffer back to the file system

In #27 we have hooks that parse user input and applies these to the editor. We should use these hooks to generate commands (insert/remove). We should be able to

• Make it so that changes sent from server aren't re-applied
• Send these to the server
• Apply these to the buffer in the server (See #29)

Note that this ~ kind of ~ work as long as no one writes anything close to where you undo!

Since we use monaco's applyEdits, a function which does not change the undo stack, an undo will be performed on the original positions.

We could use another function instead of applyEdits, but we don't want to undo other peoples text, only our own! A better way would be to utilize the RGA structure to achieve undo-redo (e.g. an undo counter for every RGA node)

This datastructure enables the collaborative editing feature to work. More information on the datastructure is found here: https://pages.lip6.fr/Marc.Shapiro/papers/rgasplit-group2016-11.pdf

This issue covers only implementing the most basic version of RGA, i.e. character wise insertion/deletion. Block-wise functionality can be added in a future issue.

Should be tested

This includes everything except index.tsx/App.tsx

With the data sent from #32, apply this to the xterm.js terminal emulator that already exists in the frontend

Each socket instantiates a new terminal. However, if the client disconnects, the reference to this terminal keeps on living. We need to kill it.

We can listen on the event disconnect and call the already existing kill function, all inside the Terminal class

• Create editor React component using Monaco
• Create basic listener for Model.onDidChangeContent, only adding one character at a time
• Extend listener for single character deletion
• Extend listener for multiple character deletion
• Extend listener for pasting
• Extend listener for Autocompletion
• Extend listener for newlines insertion/deletion (LF)
• Apply listener to Monaco Editor

The definitions have to be used on the server side to apply Insert/Remove on the structure.

Should also include TreeNode in fsTree

This includes

• On the backend, send all files in the project root over the websocket connection #37
• Create a tree frontend component which be can be used to display files #38
• Integrate the file data sent from backend with the frontend tree component #39
• Watch the filesystem for external changes and re-submit files to frontend #40

A button should exist on the frontend which sends a terminate command to the backend. The backend should then terminate the shell process and clean up any managed resources (if any?).

A button should exist to create a new terminal window.

At the moment, a controlled Monaco Editor is used to replace "\r\n" with "\n" and the operations mapper has to do the same thing. This should be changed to use Monaco methods.

User input should somehow be sent over the WebSocket connection and applied to the stdin of the spawned shell (See #32 )

We might as well implement CD when we are doing proper CI

To display terminal we need to push shell output over WebSocket connection (See #29) so that the client can display it

Use this API to listen for cursor changes

• UI for drawing (#139)
• API spec and implementation for sending cursor pos (from client -> server and server -> client) (#140)

See express js/socket io documentation for how

Right now, the editor and terminal together is larger than your browser window leading to overflow

We should

• Auto size terminal and editor to its parent
• Never see overflow

With the WebSocket connection, open a file (any will do!) and send this over the WebSocket connection to the frontend (See #28).

The file should then be displayed in the editor frontend (See #27)

• Create/Load a file
• Convert file content string to RGA
• Send RGA to client
• Convert RGA to new RGA
• Display client RGA in Editor as string
• Test Project and File classes

Specify and write down an API specification for the communication between backend and frontend

This can include

• Sketches
• Text
• How objects send to and from the server/client looks
• Which events we send to and from the server/client

Create a page in the github wiki with this information

• Store users in a database #135
• Login page #150
• Be able to add pre-approved users, i.e. accepted on first successful login #158
• First time login setup #143
• Add authentication scheme for WebSocket connections

With the WebSocket connection in #29 send a tree of all files to the frontend. It's enough to simply log the received object in the frontend for now.

• Dockerfile for frontend
• Dockerfile for backend
• Use Docker compose to combine frontend and backend into one command

We need to communicate asynchronously over a duplex channel between the server and client. A WebSocket connection allows this.

To complete this issue a WebSocket connetion should be established between clients that enters the frontend and the backend. Send a "Hello!" message over the connection.

Without it we will suffer

My suggestion is default prettier config together with eslint (it support typescript now I think yay!)

Used https://shapeshed.com/command-line-utilities-with-nodejs/#piping-data to see how you can pipe in Node

• Spawn shell and pipe data to browser #32
• Apply the data seen in the server to the xterm.js terminal emulator #33
• Send user input to the server terminal emulator, apply it to shell stdin #34

Everytime we receive data from backend (See #37) we should redraw the tree view (See #38)

Should be able to distinct between folders and files. Bonus point if folders are collapsible

Colored areas/text in each area that says (EDITOR/TERMINAL/FILE TREE) is enough. Images are here: https://rehnarama.github.io/MALTE/

Such that /home/ubuntu/workspace, etc. exists

The in memory buffer (See #29 ) should periodically be saved back to the file system in the backend.