Notable Pseudocode Mashups

    vue-dots

    1.0.16 • Public • Published

    vue-dots

    Simple graph building and visualization vue component based in SVG

    Alt Text

    Usage

    Add it to your project:

    yarn add vue-dots
    

    then import the plugin in your main Vue instance:

    import VueDots from 'vue-dots'
    import 'vue-dots/dist/vue-dots.css'
    ...
    Vue.use(VueDots)
    

    This registrate a global vue-dots component and a store object this.$vueDots which you can access in your own components and fully control the content of the graph editor.

    Keyboard shortcuts

    The keyboard events are listened from the window:

    • "b" build mode: new nodes are added while clicking in the svg area.

    • "m" move mode: drag and drop of the whole document as well as of nodes.

    • "d" delete mode: nodes and links are removed on click.

    • arrow keys: move the svg in the correspondent direction.

    • "+" zoom in.

    • "-" zoom out.

    Build Setup

    # install dependencies
    npm install
     
    # serve with hot reload at localhost:8080
    npm run dev
     
    # build for production with minification
    # This produces a Vue plugin.
    npm run build
     
    # build for production and view the bundle analyzer report
    npm run build --report
     
    # run unit tests
    npm run unit
     
    # run all tests
    npm test

    For a detailed explanation on how things work, check out the guide and docs for vue-loader.

    Keywords

    none

    Install

    npm i vue-dots

    DownloadsWeekly Downloads

    2

    Version

    1.0.16

    License

    MIT

    Last publish

    Collaborators

    • faraday1987
    • rcarcasses