Welcome to the Dash Starter Project!
From the project directory, run
npm install(you only need to do this if you are running it for the first time!)npm startgo to http://localhost:3000in Chrome or Firefox
If you have issues (or if you're running it for the first time), run npm install in the project directory and repeat the above steps.
Overview This starter project is an approximation of the hypermedia web application Dash. It supports a two dimensional unbounded canvas where users can create, move, resize, organize, and connect different types of nodes. This application supports text, images, videos, audio, embedded websites, and nested collections. This application was implemented using Visual Studio Code, TypeScript, React, TSX, and NPM. The user can drag nodes, add them to a collection node by dragging them in the middle of the collection, resize them by using the square in the lower right hand corner, and link them by clicking link, then clicking link again on another node to connect to.
Design Choices For the design of this project I chose to center my classes around clear separation between node storage and node UI elements. All node data is encapsulated in store.ts classes using MobX. All of the UI components use React and are responsible for rendering and user interaction. This separated design made it extremely simple to add new node types or extend existing ones without changing any other node classes. The shared behavior is also abstracted into reusable base components such as ResizableNodeView, TopBar, and Utils. This design was chosen to make the project as readable and easy to extend as possible.
When designing the collections I chose to treat them as nodes to extend my already existing design. In addition to free form node movement in the collection, there is also a grid layout which automatically arranges the child nodes and adjusts their size to fit within a grid inside the collection. Linking has also been implemented as a bi-directional relationship between nodes. I used a formula for chained line connections I found online to visually connect the nodes, and a custom list of links next to the node that when clicked pans the canvas to the destination node.
Finally, this project uses a Constants and Utils class to maximize readability and reusability. Constants are used throughout the program to eliminate "magic numbers," make it easier to change variables without affecting the class, and improve styling. Utility functions extend common operations such as coordinate math and node creation to avoid reusing large chunks of code.
Bells and Whistles Extended Audio Node type and visual chains between linked nodes.
References (APA format) Mozilla Developer Network. (n.d.). Pointer events. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
Mozilla Developer Network. (n.d.). Using the iframe element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
Mozilla Developer Network. (n.d.). X-Frame-Options. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Mozilla Developer Network. (n.d.). Math.atan2(). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
Mozilla Developer Network. (n.d.). Math.hypot(). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot
React Team. (n.d.). React documentation. https://react.dev
React Team. (n.d.). Handling events in React. https://react.dev/learn/responding-to-events
MobX Team. (n.d.). MobX documentation. https://mobx.js.org
MobX Team. (n.d.). Observable state and reactions. https://mobx.js.org/observable-state.html
TypeScript Team. (n.d.). TypeScript handbook. https://www.typescriptlang.org/docs
TypeScript Team. (n.d.). Everyday types. https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
Stack Overflow. (n.d.). How to drag elements using pointer events. https://stackoverflow.com
Stack Overflow. (n.d.). React pointer events vs mouse events. https://stackoverflow.com
Stack Overflow. (n.d.). Prevent iframe from capturing pointer events while dragging. https://stackoverflow.com
Stack Overflow. (n.d.). Resizable div in React. https://stackoverflow.com
Wikipedia contributors. (n.d.). Euclidean distance. https://en.wikipedia.org/wiki/Euclidean_distance
W3C. (n.d.). Pointer Events specification. https://www.w3.org/TR/pointerevents/
W3C. (n.d.). HTML Living Standard. https://html.spec.whatwg.org
Brown University Computer Science Department. (n.d.). Dash research group. https://cs.brown.edu/research/dash/
Collaborators: Me and Aarav Laungani.