Update README.md

README.md

@@ -1,85 +1,62 @@
-# vuegg-client
+# DMF-Web-CAD
 
-> vuegg UI
+This is a website-based design tool for EWOD chips. Users can free to draw electrodes with various shapes and get the routing result via the cloud-based algorithm.
 
-## Build Setup
+## Actions
 
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-
-# build for production and view the bundle analyzer report
-npm run build --report
-
-# run unit tests
-npm run unit
-
-# run e2e tests
-npm run e2e
-
-# run all tests
-npm test
-```
-
-For detailed explanation on how things work, checkout the [guide](http:https://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http:https://vuejs.github.io/vue-loader).
-
----
-
----
-
-
-## Development notes
-
-**Basic Elements**
-* Props: **egglement**, [**wrappegg**, **containegg**]
-
-* *Renders directly on the page.*
+### Select
+* **Mouse down + Drag + Mouse up**: Draw a selection area
+* **Ctrl [or Meta] + Click**: Select outer-most item, or parent container
+* **Ctrl [or Meta] + Shift + Click**: Add [outer-most] item to selection
+* **Esc**: Clear selection
 
-> Any HTML5 elements (div, button, input...)
+### Move
+* **Mouse drag & drop**: The standard way
+* **ArrowKeys**: Moves the selected elements 1px
+* **Shift + ArrowKeys**: Moves the selected elements 10px
 
-**Vuegg components**
-* Wrapper props: **egglement**, **componegg**, **containegg**
+### Copy / Cut / paste
+* **Ctrl [or Meta] + C**: Copy selection
+* **Ctrl [or Meta] + X**: Cut selection
+* **Ctrl [or Meta] + V**: paste selection
 
-* Children props: **egglement**, [**wrappegg**, **componegg**, **containegg**]
+### Delete
+* **Delete [or Backspace]**: Deletes selection
 
-* *For render information see in-line and global components*
+### Undo / Redo
+* **Ctrl [or Meta] + Z / click icon**: Undo last action
+* **Ctrl [or Meta] + Shift + Z / click icon**: Redo last action
 
-> Any component build with the set of *Basic Elements*. Usually a 'div' element containing other basic elements or components (vuegg-powered or external).
+### Paint
+* **click icon**: Start/Stop electrode painting mode (add base electrode in mouse point) 
 
-**External components**
-* Wrapper props: **external**, **componegg**
+### Combine
+* **click icon**: Combine the selected electrodes
 
-* Children props: (none)
+### Download
+* **click icon**: Download .ewds, .dxf(routing result), .ecc
 
-* *For render information see in-line and global components*
+</br>
 
-> Components from external libraries/packages (ie. vue-mdc-adapter)
+### Step-by-step setup
 
+##### 1. Installation
+``` bash
+# install client dependencies
+npm install
+```
 
-### Components render types
-
-**In-line components**
-> Full definition generated *in-line* in the page.
-
-> Can edit position and dimensions from main editor.
-(Styles, classes, children edition from component editor) *TODO.
-
-> DOES NOT SAVE A COMPONENT DEFINITION IN PROJECT LEVEL.
-
-
-**Global components**
-> Full definition generated in its own component file; instance generated in the page.
-
-> Can edit only position in main editor. (Styles, classes, children edition in component editor) *TODO.
-
-> SAVES A COMPONENT DEFINITION GLOBALLY (project level). This also applies for external components (due to dependencies)
-
+##### 2. Development
+``` bash
+# serve the client with hot reload
+npm run dev
+```
+Navigate to `localhost:8080` to serve *client* with hot-reload (development server).
 
+> The above commands should be run in separate terminal instances.
 
-*TODO, a vuegg-componegg edition view to modify the global component reference, and apply changes to all instances of that component.
+##### 3. Production
+``` bash
+# build a client for production with minification
+npm run build
+```