-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
971e5a0
commit f262198
Showing
1 changed file
with
46 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
``` |