Commit 943de297 authored by Libor Svoboda's avatar Libor Svoboda

removed vue-mindmap from external

parent 5373ba08
The MIT License (MIT)
Copyright (c) 2018 Antério vieira
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
# VueMindmap
[![npm](https://img.shields.io/npm/v/vue-mindmap.svg)](https://www.npmjs.com/package/vue-mindmap) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
> VueMindmap is a vue component for mindnode maps inspered by [react-mindmap](https://github.com/learn-anything/react-mindmap).
[Live demo](https://codesandbox.io/s/r5j46qw3xn) built on top of the awesome [codesandbox](https://codesandbox.io).
<p align="center">
<img alt="vue-mindmap" src="https://raw.githubusercontent.com/anteriovieira/vue-mindmap/master/media/mindmap.png" />
</p>
## Installation
```bash
npm install --save vue-mindmap
```
## Usage
### Bundler (Webpack, Rollup)
```js
import Vue from 'vue'
import VueMindmap from 'vue-mindmap'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mindmap/dist/vue-mindmap.css'
Vue.use(VueMindmap)
```
```html
<template>
<mindmap
:nodes="nodes"
:connections="connections"
:editable="true"
/>
</template>
<script>
export default {
name: 'MyMindmap',
data() {
return {
nodes: [...],
connections: [...]
}
}
}
</script>
```
### Browser
```html
<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-mindmap/dist/vue-mindmap.css"></link>
<script src="vue-mindmap/dist/vue-mindmap.js"></script>
<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css"></link>
<script src="https://unpkg.com/vue-mindmap"></script>
```
## Props
| Prop | Type | Default | Description |
|-----------------|:-------:|---------|--------------------------------------------------------|
| **nodes** | Array | [ ] | Array of objects used to render nodes. |
| **connections** | Array | [ ] | Array of objects used to render connections. |
| **subnodes** | Array | [ ] | Array of objects used to render subnodes. |
| **editable** | Boolean | false | Enable editor mode, which allows to move around nodes. |
### nodes
Array of objects used to render nodes. Below an example of the node structure.
```json
{
"text": "python",
"url": "http://www.wikiwand.com/en/Python_(programming_language)",
"fx": -13.916222252976013,
"fy": -659.1641376795345,
"category": "wiki",
"note": ""
}
```
The possible attributes are:
- **text**: title of the node
- **url**: url contained in the node
- **fx** and **fy**: coordinates (if not present they'll be generated)
- **category**: category used to generate an emoji
- **note**: note that will be visible on hover
### connections
Array of objects used to render connections. Below an example of the connection
structure.
```json
{
"source": "python",
"target": "basics",
"curve": {
"x": -43.5535,
"y": 299.545
}
}
```
The possible attributes are:
- **source**: title of the node where the connection starts
- **target**: title of the node where the connection ends
- **curve.x** and **curve.y**: coordinates of the control point of a quadratic bezier curve
(if not specified the connection will be straight)
### subnodes
Array of objects used to render subnodes. The structure is the same as for nodes
with two additional attributes:
- **parent**: title of the parent node
- **color**: used for the margin color, needs to be a valid CSS color
## Styling
Here's a list of all CSS classes for styling:
- **.mindmap-svg**: main `svg` element containing the map;
- **.mindmap-node**: `foreignObject` element representing a node;
- **.mindmap-node--editable**: `foreignObject` element representing a node in editor mode;
- **.mindmap-subnode-group-text**: `foreignObject` element containing all subnodes of a given node;
- **.mindmap-subnode-text**: `div` element containing a subnode;
- **.mindmap-connection**: `path` element for each connection;
- **.mindmap-emoji**: `img` tag for emoji
## Development
### Launch visual tests
```bash
npm run dev
```
### Launch Karma with coverage
```bash
npm run dev:coverage
```
### Build
Bundle the js and css of to the `dist` folder:
```bash
npm run build
```
## License
[MIT](http://opensource.org/licenses/MIT)
This diff is collapsed.
.mindmap-svg {
min-height: 50vw;
max-height: 50vw;
width: 100%;
-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-ms-transition: all 2.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}
.mindmap-svg:focus {
outline: none; }
.g-nodes{
-webkit-transition: all 12.5s ease-in-out;
-moz-transition: all 12.5s ease-in-out;
-ms-transition: all 12.5s ease-in-out;
-o-transition: all 12.5s ease-in-out;
transition: all 12.5s ease-in-out;
}
.g-nodes.zoom {
background-size: 1200px 720px !important;
}
.fixedBorderNode{
width: calc(100%);
height: calc(100%);
position: absolute;
margin: 0px;
border-radius: 4px;
z-index: 1;
border-color: #29ABE2 !important;
border-style: solid;
}
.fixedBorderModel{
width: calc(100%);
height: calc(100%);
position: absolute;
margin: 0px;
border-radius: 40px;
z-index: 1;
border-color: #29ABE2 !important;
border-style: dotted;
}
.mindmap-node > node {
z-index: 1000;
background: #ffffff;
color: #0066cc ;
display: inline-block;
font-family: "Open Sans";
font-size: 22px;
font-style: normal;
font-variant: normal;
font-weight: 700;
margin: 0 auto;
padding: 15px;
text-align: center;
text-decoration: none;
transition: background-color .2s, color .2s ease-out;
}
.studentHideNode {
display: none ;
width: calc(100% + 8px) !important;
height: calc(100% + 8px) !important;
bottom: -4px !important;
left: -4px !important;
position: absolute !important;
background-color :#707070 ;
border-radius: 4px !important;
border-color: #707070;
border-style: solid;
z-index: 1000;
}
.studentHideModel {
display: none ;
width: calc(100% + 8px) !important;
height: calc(100% + 8px) !important;
bottom: -4px !important;
left: -4px !important;
position: absolute !important;
background-color :#707070 ;
border-radius: 40px !important;
border-color: #707070;
border-style: solid;
z-index: 1000;
}
.mindmap-gray {
border-color:#707070 !important;
stroke: #707070 !important;
}
.mindmap-green {
border-color:#39B54A !important;
stroke: #39B54A !important;
}
.mindmap-green > span >input {
color: #00AA44 ;
font-family: "Open Sans";
font-weight: 500;
}
.mindmap-green > node >div {
color: #39B54A ;
}
.mindmap-green >span {
color: #39B54A ;
font-family: 'Raleway';
font-size: 22px;
text-align: center;
}
.mindmap-green > span >textarea {
color: #00AA44 ;
font-family: "Open Sans";
font-weight: 500;
cursor: pointer;
}
.mindmap-blue {
border-color: #29ABE2 !important;
stroke: #29ABE2 !important;
}
.mindmap-blue > span > input {
color: #0066CC ;
font-family: "Open Sans";
font-weight: 500;
}
.mindmap-blue > node > div {
color: #29ABE2 ;
}
.mindmap-blue > span {
color: #29ABE2 ;
font-family: 'Raleway';
font-size: 22px;
text-align: center;
}
.mindmap-blue > span > textarea {
color: #0066CC ;
font-family: "Open Sans";
font-weight: 500;
cursor: pointer;
}
.mindmap-red {
border-color: #FF0000 !important;
stroke: #FF0000 !important;
}
.mindmap-red > span > input {
color: #C00000 ;
font-family: "Open Sans";
font-weight: 500;
}
.mindmap-red > node > div {
color: #FF0000 ;
font-family: 'Raleway';
font-size: 22px;
text-align: center;
}
.mindmap-red > span {
color: #FF0000 ;
font-family: 'Raleway';
font-size: 22px;
text-align: center;
}
.mindmap-red > span > textarea {
color: #C00000 ;
font-family: "Open Sans";
font-weight: 500;
cursor: pointer;
}
.mindmap-yellow {
border-color: #FFFF00 !important;
stroke: #FFFF00 !important;
}
.mindmap-yellow > span > input {
color: #EEBB00 ;
font-family: "Open Sans";
font-weight: 500;
}
.mindmap-yellow > node > div {
color: #FFFF00 ;
}
.mindmap-yellow > span {
color: #FFFF00 ;
font-family: 'Raleway';
font-size: 22px;
text-align: center;
}
.mindmap-yellow > span > textarea {
color: #EEBB00 ;
font-family: "Open Sans";
font-weight: 500;
cursor: pointer;
}
.mindmap-node > node[href]:hover {
background-color: #f57c00;
color: #fff;
cursor: pointer; }
.mindmap-node--editable {
cursor: all-scroll;
/* border-color: #29ABE2;
border-style: solid;
border-radius: 4px;*/
}
.mindmap-node--editable > node {
pointer-events: none; }
.mindmap-model--editable {
cursor: all-scroll;
/* border-color: #29ABE2;
border-style: solid;
border-radius: 40px;*/
}
.mindmap-model--editable > node {
pointer-events: none; }
.mindmap-subnode-group {
align-items: center;
border-left: 4px solid #9e9e9e;
display: flex;
margin-left: 15px;
padding: 5px; }
.mindmap-subnode-group node {
color: #212121;
font-family: 'Raleway';
font-size: 16px;
padding: 2px 5px; }
.mindmap-connection {
fill: transparent;
stroke: #29ABE2;
stroke-dasharray: 0px 0px;
stroke-width: 3px; }
.mindmap-emoji {
height: 24px;
vertical-align: bottom;
width: 24px; }
.reddit-emoji {
border-radius: 50%; }
#modelToolbar {
padding: 3px 3px 2px 8px;
background-color:#000000;
border-radius: 4px;
z-index: 1000;
}
#modelToolbar arrow {
position: absolute;
color: black;
background-color: black;
top: 45px;
left: 10px; /* 50%; */
width: 10px;
height: 10px;
transform: translate(-50%,-50%) rotate(45deg);
z-index: 1000;
}
#modelToolbar li {
position: relative;
width: 39px;
height: 40px;
background-color: #000000;
color: #ffffff;
-o-box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.137255), 0px 1px 8px 0px rgba(0, 0, 0, 0.117647);
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.137255), 0px 1px 8px 0px rgba(0, 0, 0, 0.117647);
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 1000;
}
#modelToolbar li:before {
font-size: 30px;
position: absolute;
top: 5px;
}
#modelToolbar li.active {
opacity: 1;
filter: alpha(opacity=100);
}
#modelToolbar vl {
border-left: 2px solid #ffffff;
height: 30px;
margin-left: 5px;
padding: 5px;
opacity: 0.6;
}
#discoveryToolbar {
padding: 3px 3px 2px 10px;
background-color:#000000;
border-radius: 4px;
z-index: 1000;
}
#discoveryToolbar arrow {
position: absolute;
color: black;
background-color: black;
top: 45px;
left: 10px; /* 50%; */
width: 10px;
height: 10px;
transform: translate(-50%,-50%) rotate(45deg);
}
#discoveryToolbar li {
position: relative;
width: 35px;
height: 40px;
background-color: #000000;
color: #ffffff;
-o-box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.137255), 0px 1px 8px 0px rgba(0, 0, 0, 0.117647);
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.137255), 0px 1px 8px 0px rgba(0, 0, 0, 0.117647);
opacity: 0.6;
filter: alpha(opacity=60);
}
#discoveryToolbar li:before {
font-size: 30px;
position: absolute;
top: 5px;
}
#discoveryToolbar li.active {
opacity: 1;
filter: alpha(opacity=100);
}
#discoveryToolbar vl {
border-left: 2px solid #ffffff;
height: 30px;
margin-left: 5px;
padding: 5px;
opacity: 0.6;
z-index: 1000;
}
#modelToolbarV {
top: -165px;
position: absolute;
padding: 5px 3px 10px 10px;
background-color: #000000;
border-radius: 4px;
width: 50px;
z-index: 1000;
}
#modelToolbarV li {
position: relative;
width: 35px;
height: 40px;
background-color: #000000;
color: #ffffff;
-o-box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.137255), 0px 1px 8px 0px rgba(0, 0, 0, 0.117647);
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.137255), 0px 1px 8px 0px rgba(0, 0, 0, 0.117647);
opacity: 0.6;
filter: alpha(opacity=60);
}
#modelToolbarV li:before {
font-size: 30px;
position: absolute;
top: 5px;
}
#modelToolbarV li.active {
opacity: 1;
filter: alpha(opacity=100);
}
.discoveryToolbarLink {
top: -37px;
position: absolute;
padding: 5px 3px 10px 10px;
background-color: #000000;