├── .browserslistrc ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── .gitignore ├── DATA_SPECIFICATION.md ├── LICENSE ├── README.md ├── babel.config.js ├── dist ├── demo.html ├── diagram.common.js ├── diagram.common.js.map ├── diagram.css ├── diagram.umd.js ├── diagram.umd.js.map ├── diagram.umd.min.js └── diagram.umd.min.js.map ├── img ├── bst.svg ├── screenshot.png └── screenshot.svg ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── Diagram.vue ├── DiagramEditor.vue ├── demo │ ├── App.vue │ ├── Calculator.vue │ ├── data.json │ ├── main.js │ └── roadmap_to_v1.json ├── index.js ├── lib │ ├── AskModal.vue │ ├── EditLinkModal.vue │ ├── EditNodeModal.vue │ ├── InputModal.vue │ ├── Link.vue │ ├── Node.vue │ └── SettingsModal.vue ├── minimal-ui │ ├── index.js │ └── lib │ │ ├── VButton.vue │ │ ├── VCkbox.vue │ │ ├── VInput.vue │ │ ├── VMessage.vue │ │ ├── VModal.vue │ │ ├── VSelect.vue │ │ └── index.js └── mouseLocation.js ├── tests ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ └── specs │ │ └── test.js └── unit │ ├── .eslintrc.js │ └── node.spec.js ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 10 | }, 11 | parserOptions: { 12 | parser: "babel-eslint" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | #/dist 4 | 5 | /tests/e2e/reports/ 6 | selenium-debug.log 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | -------------------------------------------------------------------------------- /DATA_SPECIFICATION.md: -------------------------------------------------------------------------------- 1 | # Data Specification 2 | 3 | ## 1. Root 4 | |Attribute|Type|Description| 5 | |---|---|---| 6 | |width|Number|Width of the graph area| 7 | |height|Number|Height of the graph area| 8 | |background|String| Color name/code| 9 | |nodes|Array(Object)| See `1-1. Node`| 10 | |links|Array(Object)| See `1-2. Link`| 11 | 12 | ## 1-1. Node 13 | |Attribute|Type|Description| 14 | |---|---|---| 15 | |id|String|| 16 | |content|Object| See `1-1-1. Content`| 17 | |width|Number|| 18 | |height|Number|| 19 | |shape|String| `rectangle` or `ellipse`| 20 | |point|Object| See `1-1-2. Point`| 21 | 22 | ### 1-1-1. Content 23 | |Attribute|Type|Description| 24 | |---|---|---| 25 | |text|String|| 26 | |url|String|Link url| 27 | |color|Srring|Color name/code| 28 | 29 | ### 1-1-2. Point 30 | |Attribute|Type|Description| 31 | |---|---|---| 32 | |x|Number|| 33 | |y|Number|| 34 | 35 | ## 1-2. Link 36 | |Attribute|Type|Description| 37 | |---|---|---| 38 | |id|String|| 39 | |source|String|ID of the source node| 40 | |destination|String|ID of the destination node| 41 | |point|Object|See `1-2-1. Point`| 42 | |color|String|Color name/code| 43 | |pattern|String|`solid`, `dash`, or `dot`| 44 | |arrow|String|`none`, `src`, `dest`, or `both`| 45 | 46 | ### 1-2-1. Point 47 | Middle control point of bezier curve 48 | 49 | |Attribute|Type|Description| 50 | |---|---|---| 51 | |x|Number|| 52 | |y|Number|| 53 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 pb10001 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # diagram-vue 2 | A SVG-based diagram component for Vue 3 | 4 | [![Codacy Badge](https://api.codacy.com/project/badge/Grade/a66f2b18a900451693f7a41019abf79e)](https://app.codacy.com/app/pb10001/diagram-vue?utm_source=github.com&utm_medium=referral&utm_content=pb10001/diagram-vue&utm_campaign=Badge_Grade_Dashboard) 5 | [![npm version](https://badge.fury.io/js/diagram-vue.svg)](https://badge.fury.io/js/diagram-vue) 6 | ![npm](https://img.shields.io/npm/dt/diagram-vue.svg) 7 | ![npm](https://img.shields.io/npm/dw/diagram-vue.svg) 8 | 9 | [Demo](https://diagramvue.netlify.com/) 10 | ![Screen shot](https://raw.githubusercontent.com/pb10005/diagram-vue/master/img/screenshot.svg) 11 | ## Installation 12 | ```sh 13 | npm i diagram-vue --save 14 | ``` 15 | ## Usage 16 | [![Edit diagram-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/q7wj02ny2w) 17 | ### Ready-to-use editor 18 | #### 1. Import 19 | ```js 20 | import { DiagramEditor } from "diagram-vue"; 21 | import "diagram-vue/dist/diagram.css"; 22 | ``` 23 | #### 2. Template 24 | ```html 25 | 26 | ``` 27 | See [Data specification](https://github.com/pb10005/diagram-vue/blob/master/DATA_SPECIFICATION.md). 28 | 29 | ### Customization 30 | #### 1. Import 31 | ```js 32 | import Diagram from 'diagram-vue'; 33 | import "diagram-vue/dist/diagram.css"; 34 | ``` 35 | #### 2. Template 36 | ```html 37 | 58 | 59 | ``` 60 | #### 3. Props 61 | ```js 62 | props: { 63 | width: Number, 64 | height: Number, 65 | background: String, 66 | nodes: Array, 67 | links: Array, 68 | editable: Boolean, 69 | labels: Object, 70 | fluid: Boolean 71 | } 72 | ``` 73 | See [Data specification](https://github.com/pb10005/diagram-vue/blob/master/DATA_SPECIFICATION.md). 74 | 75 | #### 4. Events 76 | ```js 77 | editNode(node /* selected node */) { 78 | /* event handler */ 79 | }, 80 | editLink(link /* selected link */) { 81 | /* event handler */ 82 | }, 83 | nodeChanged(obj /* array of nodes */) { 84 | /* event handler */ 85 | const nodes = obj.nodes 86 | }, 87 | linkChanged(obj /* array of links */) { 88 | /* event handler */ 89 | const links = obj.links 90 | }, 91 | nodeRemoved(id /*Identifier of node*/){ 92 | /* event handler */ 93 | }, 94 | linkRemoved(id /*Identifier of link*/){ 95 | /* event handler */ 96 | }, 97 | nodeClicked(id /* identifier of node */) { 98 | /* event handler */ 99 | console.log("your clicked in node: ", id) 100 | }, 101 | linkClicked(id /* identifier of link */) { 102 | /* event handler */ 103 | console.log("your clicked in link: ", id) 104 | } 105 | ``` 106 | 107 | #### 5. Get SVG as String 108 | Use plain JavaScript. 109 | ```js 110 | document.getElementById('svg-diagram-show-area').innerHTML; // ... 111 | ``` 112 | 113 | ## Development 114 | ### Development Environment 115 | See [diagram-vue-dev-env](https://github.com/pb10005/diagram-vue-dev-env) 116 | 117 | ## Project setup 118 | ``` 119 | yarn install 120 | ``` 121 | 122 | ### Compiles and hot-reloads for development 123 | ``` 124 | yarn run serve 125 | ``` 126 | 127 | ### Compiles and minifies for production 128 | ``` 129 | yarn run build 130 | ``` 131 | 132 | ### Run your tests 133 | ``` 134 | yarn run test 135 | ``` 136 | 137 | ### Lints and fixes files 138 | ``` 139 | yarn run lint 140 | ``` 141 | 142 | ### Run your end-to-end tests 143 | ``` 144 | yarn run test:e2e 145 | ``` 146 | 147 | ### Run your unit tests 148 | ``` 149 | yarn run test:unit 150 | ``` 151 | 152 | ### Customize configuration 153 | See [Configuration Reference](https://cli.vuejs.org/config/). 154 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"] 3 | }; 4 | -------------------------------------------------------------------------------- /dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 | diagram demo 3 | 4 | 5 | 6 | 9 | -------------------------------------------------------------------------------- /dist/diagram.css: -------------------------------------------------------------------------------- 1 | .shadow[data-v-0b61de52]{filter:drop-shadow(1px 1px 3px rgba(0,0,0,.3));-webkit-filter:drop-shadow(1px 1px 3px rgba(0,0,0,.3));-moz-filter:drop-shadow(1px 1px 3px rgba(0,0,0,.3))}.button,.button[data-v-0b61de52]{cursor:pointer}.grab{cursor:-webkit-grab;cursor:grab}input[data-v-02b3537e]{width:95%;margin-bottom:5px}select[data-v-02b3537e]{margin-bottom:5px}.item-enter-active[data-v-02b3537e]{-webkit-transition:all .8s ease;transition:all .8s ease}.item-leave-active[data-v-02b3537e]{-webkit-transition:all .3s ease;transition:all .3s ease}.item-enter[data-v-02b3537e],.item-leave-to[data-v-02b3537e]{opacity:0}input[data-v-13ee2543]{margin-bottom:5px}.item-enter-active[data-v-13ee2543]{-webkit-transition:all .8s ease;transition:all .8s ease}.item-leave-active[data-v-13ee2543]{-webkit-transition:all .3s ease;transition:all .3s ease}.item-enter[data-v-13ee2543],.item-leave-to[data-v-13ee2543]{opacity:0}select[data-v-13ee2543]{margin-bottom:5px}.input[data-v-361eba4c]{width:100%;height:100px;margin-bottom:5px}.inner-block[data-v-aa2e890c]{margin-bottom:20px}.block[data-v-aa2e890c]{padding:40px}input[data-v-aa2e890c]{margin-bottom:5px}.item-enter-active[data-v-aa2e890c]{-webkit-transition:all .8s ease;transition:all .8s ease}.item-leave-active[data-v-aa2e890c]{-webkit-transition:all .3s ease;transition:all .3s ease}.item-enter[data-v-aa2e890c],.item-leave-to[data-v-aa2e890c]{opacity:0}button[data-v-1f3ac946]{background:#fff;border:1px solid #eee;padding:5px 10px;cursor:pointer}button.danger[data-v-1f3ac946]{border:1px solid red;color:red}button[data-v-1f3ac946]:hover{background:#eee;opacity:.8}button:hover.danger[data-v-1f3ac946]{background:red;color:#fff}.ckbox[data-v-609c0d87]{background:#fff;cursor:pointer;border:1px solid #eee;-webkit-transform:scale(1.5);transform:scale(1.5);padding:5px}.ckbox[data-v-609c0d87]:hover{background:#eee;opacity:.8}label[data-v-609c0d87]{font-size:14px}input[data-v-8a212f36]{background:transparent;border:0;border-bottom:1px solid #e0e0e0;border-radius:0;padding:10px 5px}input[data-v-8a212f36]:focus{border-bottom:1px solid #00b894}input[data-v-8a212f36]::-webkit-input-placeholder{font-weight:lighter;font-size:20}input[data-v-8a212f36]:-moz-placeholder,input[data-v-8a212f36]::-moz-placeholder{font-weight:lighter;font-size:20}input[data-v-8a212f36]:-ms-input-placeholder{font-weight:lighter;font-size:20}#message[data-v-eba7471e]{background:#fff;border:1px solid #eee;margin:0 10px;padding:10px}#message #content[data-v-eba7471e]{margin-right:20px}.dismiss[data-v-eba7471e]{position:absolute;right:30px;cursor:pointer}.modal[data-v-78678095]{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:auto;visibility:hidden;opacity:0;z-index:-9999}.modal.is-open[data-v-78678095]{background:grey;visibility:visible;opacity:.8;z-index:9998}.item[data-v-78678095]{width:70vw;padding:10px;position:fixed;background:#fff;visibility:hidden;opacity:1;z-index:-9999;top:25vh;left:15vw}.item.is-open[data-v-78678095]{z-index:9999;visibility:visible}@media screen and (max-width:900px){.item[data-v-78678095]{width:100vw;padding:10px;position:fixed;background:#fff;visibility:hidden;opacity:1;z-index:-9999;left:0;top:10px}.item.is-open[data-v-78678095]{z-index:9999;visibility:visible}}select[data-v-85331330]{border:1px solid #eee;padding:5px 10px;background:transparent}select option[data-v-85331330]{padding:5px}select .placeholder[data-v-85331330]{display:none} -------------------------------------------------------------------------------- /dist/diagram.umd.min.js: -------------------------------------------------------------------------------- 1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["diagram"]=e(require("vue")):t["diagram"]=e(t["Vue"])})("undefined"!==typeof self?self:this,function(t){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"0077":function(t,e,n){"use strict";var i=n("6416"),o=n.n(i);o.a},"0802":function(t,e,n){"use strict";var i=n("4351"),o=n.n(i);o.a},"0a01":function(t,e,n){"use strict";var i=n("151d"),o=n.n(i);o.a},"0a49":function(t,e,n){var i=n("9b43"),o=n("626a"),r=n("4bf8"),s=n("9def"),a=n("cd1c");t.exports=function(t,e){var n=1==t,c=2==t,l=3==t,u=4==t,d=6==t,h=5==t||d,f=e||a;return function(e,a,p){for(var v,m,g=r(e),k=o(g),b=i(a,p,3),y=s(k.length),w=0,x=n?f(e,y):c?f(e,0):void 0;y>w;w++)if((h||w in k)&&(v=k[w],m=b(v,w,g),t))if(n)x[w]=m;else if(m)switch(t){case 3:return!0;case 5:return v;case 6:return w;case 2:x.push(v)}else if(u)return!1;return d?-1:l||u?u:x}}},"0bfb":function(t,e,n){"use strict";var i=n("cb7c");t.exports=function(){var t=i(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},"0d58":function(t,e,n){var i=n("ce10"),o=n("e11e");t.exports=Object.keys||function(t){return i(t,o)}},1169:function(t,e,n){var i=n("2d95");t.exports=Array.isArray||function(t){return"Array"==i(t)}},"11e9":function(t,e,n){var i=n("52a7"),o=n("4630"),r=n("6821"),s=n("6a99"),a=n("69a8"),c=n("c69a"),l=Object.getOwnPropertyDescriptor;e.f=n("9e1e")?l:function(t,e){if(t=r(t),e=s(e,!0),c)try{return l(t,e)}catch(n){}if(a(t,e))return o(!i.f.call(t,e),t[e])}},1495:function(t,e,n){var i=n("86cc"),o=n("cb7c"),r=n("0d58");t.exports=n("9e1e")?Object.defineProperties:function(t,e){o(t);var n,s=r(e),a=s.length,c=0;while(a>c)i.f(t,n=s[c++],e[n]);return t}},"151d":function(t,e,n){},"1ad2":function(t,e,n){},"20a9":function(t,e,n){},"230e":function(t,e,n){var i=n("d3f4"),o=n("7726").document,r=i(o)&&i(o.createElement);t.exports=function(t){return r?o.createElement(t):{}}},2621:function(t,e){e.f=Object.getOwnPropertySymbols},"2a3c":function(t,e,n){"use strict";var i=n("53ee"),o=n.n(i);o.a},"2aba":function(t,e,n){var i=n("7726"),o=n("32e9"),r=n("69a8"),s=n("ca5a")("src"),a="toString",c=Function[a],l=(""+c).split(a);n("8378").inspectSource=function(t){return c.call(t)},(t.exports=function(t,e,n,a){var c="function"==typeof n;c&&(r(n,"name")||o(n,"name",e)),t[e]!==n&&(c&&(r(n,s)||o(n,s,t[e]?""+t[e]:l.join(String(e)))),t===i?t[e]=n:a?t[e]?t[e]=n:o(t,e,n):(delete t[e],o(t,e,n)))})(Function.prototype,a,function(){return"function"==typeof this&&this[s]||c.call(this)})},"2aeb":function(t,e,n){var i=n("cb7c"),o=n("1495"),r=n("e11e"),s=n("613b")("IE_PROTO"),a=function(){},c="prototype",l=function(){var t,e=n("230e")("iframe"),i=r.length,o="<",s=">";e.style.display="none",n("fab2").appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(o+"script"+s+"document.F=Object"+o+"/script"+s),t.close(),l=t.F;while(i--)delete l[c][r[i]];return l()};t.exports=Object.create||function(t,e){var n;return null!==t?(a[c]=i(t),n=new a,a[c]=null,n[s]=t):n=l(),void 0===e?n:o(n,e)}},"2b4c":function(t,e,n){var i=n("5537")("wks"),o=n("ca5a"),r=n("7726").Symbol,s="function"==typeof r,a=t.exports=function(t){return i[t]||(i[t]=s&&r[t]||(s?r:o)("Symbol."+t))};a.store=i},"2d00":function(t,e){t.exports=!1},"2d95":function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},"32e9":function(t,e,n){var i=n("86cc"),o=n("4630");t.exports=n("9e1e")?function(t,e,n){return i.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},"37cc":function(t,e,n){"use strict";var i=n("8541"),o=n.n(i);o.a},3846:function(t,e,n){n("9e1e")&&"g"!=/./g.flags&&n("86cc").f(RegExp.prototype,"flags",{configurable:!0,get:n("0bfb")})},"386b":function(t,e,n){var i=n("5ca1"),o=n("79e5"),r=n("be13"),s=/"/g,a=function(t,e,n,i){var o=String(r(t)),a="<"+e;return""!==n&&(a+=" "+n+'="'+String(i).replace(s,""")+'"'),a+">"+o+""};t.exports=function(t,e){var n={};n[t]=e(a),i(i.P+i.F*o(function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}),"String",n)}},4351:function(t,e,n){},4588:function(t,e){var n=Math.ceil,i=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?i:n)(t)}},4630:function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"4bf8":function(t,e,n){var i=n("be13");t.exports=function(t){return Object(i(t))}},"52a7":function(t,e){e.f={}.propertyIsEnumerable},"53ee":function(t,e,n){},5537:function(t,e,n){var i=n("8378"),o=n("7726"),r="__core-js_shared__",s=o[r]||(o[r]={});(t.exports=function(t,e){return s[t]||(s[t]=void 0!==e?e:{})})("versions",[]).push({version:i.version,mode:n("2d00")?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},5830:function(t,e,n){},"5a31":function(t,e,n){},"5ca1":function(t,e,n){var i=n("7726"),o=n("8378"),r=n("32e9"),s=n("2aba"),a=n("9b43"),c="prototype",l=function(t,e,n){var u,d,h,f,p=t&l.F,v=t&l.G,m=t&l.S,g=t&l.P,k=t&l.B,b=v?i:m?i[e]||(i[e]={}):(i[e]||{})[c],y=v?o:o[e]||(o[e]={}),w=y[c]||(y[c]={});for(u in v&&(n=e),n)d=!p&&b&&void 0!==b[u],h=(d?b:n)[u],f=k&&d?a(h,i):g&&"function"==typeof h?a(Function.call,h):h,b&&s(b,u,h,t&l.U),y[u]!=h&&r(y,u,f),g&&w[u]!=h&&(w[u]=h)};i.core=o,l.F=1,l.G=2,l.S=4,l.P=8,l.B=16,l.W=32,l.U=64,l.R=128,t.exports=l},"5dbc":function(t,e,n){var i=n("d3f4"),o=n("8b97").set;t.exports=function(t,e,n){var r,s=e.constructor;return s!==n&&"function"==typeof s&&(r=s.prototype)!==n.prototype&&i(r)&&o&&o(t,r),t}},"613b":function(t,e,n){var i=n("5537")("keys"),o=n("ca5a");t.exports=function(t){return i[t]||(i[t]=o(t))}},"626a":function(t,e,n){var i=n("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==i(t)?t.split(""):Object(t)}},6416:function(t,e,n){},6821:function(t,e,n){var i=n("626a"),o=n("be13");t.exports=function(t){return i(o(t))}},"69a8":function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},"6a99":function(t,e,n){var i=n("d3f4");t.exports=function(t,e){if(!i(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!i(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!i(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!i(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},"6b54":function(t,e,n){"use strict";n("3846");var i=n("cb7c"),o=n("0bfb"),r=n("9e1e"),s="toString",a=/./[s],c=function(t){n("2aba")(RegExp.prototype,s,t,!0)};n("79e5")(function(){return"/a/b"!=a.call({source:"a",flags:"b"})})?c(function(){var t=i(this);return"/".concat(t.source,"/","flags"in t?t.flags:!r&&t instanceof RegExp?o.call(t):void 0)}):a.name!=s&&c(function(){return a.call(this)})},7333:function(t,e,n){"use strict";var i=n("0d58"),o=n("2621"),r=n("52a7"),s=n("4bf8"),a=n("626a"),c=Object.assign;t.exports=!c||n("79e5")(function(){var t={},e={},n=Symbol(),i="abcdefghijklmnopqrst";return t[n]=7,i.split("").forEach(function(t){e[t]=t}),7!=c({},t)[n]||Object.keys(c({},e)).join("")!=i})?function(t,e){var n=s(t),c=arguments.length,l=1,u=o.f,d=r.f;while(c>l){var h,f=a(arguments[l++]),p=u?i(f).concat(u(f)):i(f),v=p.length,m=0;while(v>m)d.call(f,h=p[m++])&&(n[h]=f[h])}return n}:c},7514:function(t,e,n){"use strict";var i=n("5ca1"),o=n("0a49")(5),r="find",s=!0;r in[]&&Array(1)[r](function(){s=!1}),i(i.P+i.F*s,"Array",{find:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),n("9c6c")(r)},"75b9":function(t,e,n){},7726:function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},"77f1":function(t,e,n){var i=n("4588"),o=Math.max,r=Math.min;t.exports=function(t,e){return t=i(t),t<0?o(t+e,0):r(t,e)}},"79e5":function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},"7b61":function(t,e,n){"use strict";var i=n("e190"),o=n.n(i);o.a},"7f7f":function(t,e,n){var i=n("86cc").f,o=Function.prototype,r=/^\s*function ([^ (]*)/,s="name";s in o||n("9e1e")&&i(o,s,{configurable:!0,get:function(){try{return(""+this).match(r)[1]}catch(t){return""}}})},8378:function(t,e){var n=t.exports={version:"2.6.1"};"number"==typeof __e&&(__e=n)},8541:function(t,e,n){},"86cc":function(t,e,n){var i=n("cb7c"),o=n("c69a"),r=n("6a99"),s=Object.defineProperty;e.f=n("9e1e")?Object.defineProperty:function(t,e,n){if(i(t),e=r(e,!0),i(n),o)try{return s(t,e,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},"8b97":function(t,e,n){var i=n("d3f4"),o=n("cb7c"),r=function(t,e){if(o(t),!i(e)&&null!==e)throw TypeError(e+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,e,i){try{i=n("9b43")(Function.call,n("11e9").f(Object.prototype,"__proto__").set,2),i(t,[]),e=!(t instanceof Array)}catch(o){e=!0}return function(t,n){return r(t,n),e?t.__proto__=n:i(t,n),t}}({},!1):void 0),check:r}},"8bbf":function(e,n){e.exports=t},9093:function(t,e,n){var i=n("ce10"),o=n("e11e").concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return i(t,o)}},9539:function(t,e,n){},"9b43":function(t,e,n){var i=n("d8e8");t.exports=function(t,e,n){if(i(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,i){return t.call(e,n,i)};case 3:return function(n,i,o){return t.call(e,n,i,o)}}return function(){return t.apply(e,arguments)}}},"9c6c":function(t,e,n){var i=n("2b4c")("unscopables"),o=Array.prototype;void 0==o[i]&&n("32e9")(o,i,{}),t.exports=function(t){o[i][t]=!0}},"9def":function(t,e,n){var i=n("4588"),o=Math.min;t.exports=function(t){return t>0?o(i(t),9007199254740991):0}},"9e1e":function(t,e,n){t.exports=!n("79e5")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},a12f:function(t,e,n){"use strict";var i=n("1ad2"),o=n.n(i);o.a},a40f:function(t,e,n){"use strict";var i=n("5830"),o=n.n(i);o.a},aa77:function(t,e,n){var i=n("5ca1"),o=n("be13"),r=n("79e5"),s=n("fdef"),a="["+s+"]",c="​…",l=RegExp("^"+a+a+"*"),u=RegExp(a+a+"*$"),d=function(t,e,n){var o={},a=r(function(){return!!s[t]()||c[t]()!=c}),l=o[t]=a?e(h):s[t];n&&(o[n]=l),i(i.P+i.F*a,"String",o)},h=d.trim=function(t,e){return t=String(o(t)),1&e&&(t=t.replace(l,"")),2&e&&(t=t.replace(u,"")),t};t.exports=d},b05d:function(t,e,n){},b54a:function(t,e,n){"use strict";n("386b")("link",function(t){return function(e){return t(this,"a","href",e)}})},be13:function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},c366:function(t,e,n){var i=n("6821"),o=n("9def"),r=n("77f1");t.exports=function(t){return function(e,n,s){var a,c=i(e),l=o(c.length),u=r(s,l);if(t&&n!=n){while(l>u)if(a=c[u++],a!=a)return!0}else for(;l>u;u++)if((t||u in c)&&c[u]===n)return t||u||0;return!t&&-1}}},c3c4:function(t,e,n){"use strict";var i=n("20a9"),o=n.n(i);o.a},c5f6:function(t,e,n){"use strict";var i=n("7726"),o=n("69a8"),r=n("2d95"),s=n("5dbc"),a=n("6a99"),c=n("79e5"),l=n("9093").f,u=n("11e9").f,d=n("86cc").f,h=n("aa77").trim,f="Number",p=i[f],v=p,m=p.prototype,g=r(n("2aeb")(m))==f,k="trim"in String.prototype,b=function(t){var e=a(t,!1);if("string"==typeof e&&e.length>2){e=k?e.trim():h(e,3);var n,i,o,r=e.charCodeAt(0);if(43===r||45===r){if(n=e.charCodeAt(2),88===n||120===n)return NaN}else if(48===r){switch(e.charCodeAt(1)){case 66:case 98:i=2,o=49;break;case 79:case 111:i=8,o=55;break;default:return+e}for(var s,c=e.slice(2),l=0,u=c.length;lo)return NaN;return parseInt(c,i)}}return+e};if(!p(" 0o1")||!p("0b1")||p("+0x1")){p=function(t){var e=arguments.length<1?0:t,n=this;return n instanceof p&&(g?c(function(){m.valueOf.call(n)}):r(n)!=f)?s(new v(b(e)),n,p):b(e)};for(var y,w=n("9e1e")?l(v):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),x=0;w.length>x;x++)o(v,y=w[x])&&!o(p,y)&&d(p,y,u(v,y));p.prototype=m,m.constructor=p,n("2aba")(i,f,p)}},c69a:function(t,e,n){t.exports=!n("9e1e")&&!n("79e5")(function(){return 7!=Object.defineProperty(n("230e")("div"),"a",{get:function(){return 7}}).a})},c858:function(t,e,n){"use strict";var i=n("5a31"),o=n.n(i);o.a},ca4d:function(t,e,n){"use strict";var i=n("9539"),o=n.n(i);o.a},ca5a:function(t,e){var n=0,i=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+i).toString(36))}},cb7c:function(t,e,n){var i=n("d3f4");t.exports=function(t){if(!i(t))throw TypeError(t+" is not an object!");return t}},cd1c:function(t,e,n){var i=n("e853");t.exports=function(t,e){return new(i(t))(e)}},ce10:function(t,e,n){var i=n("69a8"),o=n("6821"),r=n("c366")(!1),s=n("613b")("IE_PROTO");t.exports=function(t,e){var n,a=o(t),c=0,l=[];for(n in a)n!=s&&i(a,n)&&l.push(n);while(e.length>c)i(a,n=e[c++])&&(~r(l,n)||l.push(n));return l}},d3f4:function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},d8e8:function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},e11e:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},e190:function(t,e,n){},e33f:function(t,e,n){"use strict";var i=n("b05d"),o=n.n(i);o.a},e853:function(t,e,n){var i=n("d3f4"),o=n("1169"),r=n("2b4c")("species");t.exports=function(t){var e;return o(t)&&(e=t.constructor,"function"!=typeof e||e!==Array&&!o(e.prototype)||(e=void 0),i(e)&&(e=e[r],null===e&&(e=void 0))),void 0===e?Array:e}},f1cf:function(t,e,n){"use strict";var i=n("75b9"),o=n.n(i);o.a},f751:function(t,e,n){var i=n("5ca1");i(i.S+i.F,"Object",{assign:n("7333")})},fab2:function(t,e,n){var i=n("7726").document;t.exports=i&&i.documentElement},fb15:function(t,e,n){"use strict";n.r(e);var i,o={};(n.r(o),n.d(o,"VButton",function(){return kt}),n.d(o,"VCkbox",function(){return St}),n.d(o,"VInput",function(){return Ct}),n.d(o,"VMessage",function(){return Bt}),n.d(o,"VModal",function(){return Rt}),n.d(o,"VSelect",function(){return Kt}),"undefined"!==typeof window)&&((i=window.document.currentScript)&&(i=i.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=i[1]));var r=n("8bbf"),s=n.n(r),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"field",staticClass:"scrollXY",attrs:{id:"svg-diagram-show-area"}},[n("svg",{attrs:{width:t.fluid?"100%":t.width,height:t.fluid?"100%":t.height,viewBox:t.viewBoxDiagram,xmlns:"http://www.w3.org/2000/svg"}},[n("defs",[n("pattern",{attrs:{id:"smallGrid",width:"10",height:"10",patternUnits:"userSpaceOnUse"}},[n("path",{attrs:{d:"M 10 0 L 0 0 0 10",fill:"none",stroke:"gray","stroke-width":"0.5"}})]),n("pattern",{attrs:{id:"grid",width:"100",height:"100",patternUnits:"userSpaceOnUse"}},[n("rect",{attrs:{width:"100",height:"100",fill:"url(#smallGrid)"}}),n("path",{attrs:{d:"M 100 0 L 0 0 0 100",fill:"none",stroke:"gray","stroke-width":"1"}})])]),n("g",{attrs:{transform:t.scaleStr}},[n("rect",{attrs:{x:"0",y:"0",width:t.width,height:t.height,fill:t.showGrid?"url(#grid)":t.background},on:{click:t.reset}}),t._l(t.nodeList,function(e){return n("Node",{key:e.id,attrs:{node:e,selected:e.id===t.selectedNode,createLinkMode:t.createLinkMode,editable:t.editable,labels:t.labels,rWidth:t.rect().rWidth,rHeight:t.rect().rHeight,scale:t.scale},on:{editNode:t.editNode,select:t.selectNode,copy:t.copyNode,updateLocation:t.updateNodeLocation,toggleSelect:t.toggleSrcSelect,commitDest:t.commitDest,remove:t.removeNode}})}),t._l(t.linkList,function(e){return n("Link",{key:e.id,attrs:{link:e,selected:e.id===t.selectedLink,source:t.findNode(e.source),destination:t.findNode(e.destination),editable:t.editable,labels:t.labels,rWidth:t.rect().rWidth,rHeight:t.rect().rHeight,scale:t.scale},on:{editLink:t.editLink,select:t.selectLink,updateLocation:t.updateLinkLocation,remove:t.removeLink}})})],2)])])},c=[],l=(n("7514"),n("7f7f"),n("6b54"),n("c5f6"),function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("g",[t.editable?n("g",[t.selected?n("text",{staticClass:"button",attrs:{x:t.x+5,y:t.y+t.node.height+22,fill:"#00b894"},on:{click:t.editCandidate}},[t._v("\n "+t._s(t.labels.edit||"Edit")+"\n ")]):t._e(),t.selected?n("text",{staticClass:"button",attrs:{x:t.x+5,y:t.y-10,fill:"#00b894",stroke:"none"},on:{click:t.toggleSelect}},[t._v("\n "+t._s(t.createLinkMode?t.labels.cancel||"Cancel":t.labels.link||"Link")+"\n ")]):t._e(),t.selected?n("text",{staticClass:"button",attrs:{x:t.x+100,y:t.y-10,fill:"orange"},on:{click:t.copy}},[t._v("\n "+t._s(t.labels.copy||"Copy")+"\n ")]):t._e(),t.selected?n("text",{staticClass:"button",attrs:{x:t.x+65,y:t.y+t.node.height+22,fill:"#ff7675"},on:{click:t.remove}},[t._v("\n "+t._s(t.labels.remove||"Remove")+"\n ")]):t._e(),t.createLinkMode&&!t.selected?n("text",{staticClass:"button",attrs:{x:t.x+5,y:t.y-10,fill:"#ff7675"},on:{click:t.commitDest}},[t._v("\n "+t._s(t.labels.select||"Select")+"\n ")]):t._e()]):t._e(),"ellipse"===t.node.shape?n("ellipse",{staticClass:"grab",attrs:{cx:t.x+t.node.width/2,cy:t.y+t.node.height/2,width:t.node.width,height:t.node.height,rx:t.node.width/2,ry:t.node.height/2,fill:t.content.color||"#ecf0f1","stroke-width":t.node.strokeWeight,stroke:t.node.stroke},on:{touchstart:t.mousedown,mousedown:t.mousedown,mousemove:t.mousemove,touchmove:t.mousemove,mouseup:t.mouseup,touchend:t.mouseup}}):n("rect",{staticClass:"grab",attrs:{x:t.x,y:t.y,width:t.node.width,height:t.node.height,rx:"5",ry:"3",fill:t.content.color||"#ecf0f1","stroke-width":t.node.strokeWeight,stroke:t.node.stroke},on:{touchstart:t.mousedown,mousedown:t.mousedown,mousemove:t.mousemove,touchmove:t.mousemove,mouseup:t.mouseup,touchend:t.mouseup}}),n("a",{attrs:{target:"_blank",href:t.content.url}},[n("text",{attrs:{x:t.x+t.node.width/2,y:t.y+t.node.height/2,fill:"#34495e","font-family":"Meiryo UI, sans-serif","font-size":"20","text-anchor":"middle"}},[t._v("\n "+t._s(t.content.text)+"\n ")])])])}),u=[];function d(t){if(Array.isArray(t))return t}function h(t,e){var n=[],i=!0,o=!1,r=void 0;try{for(var s,a=t[Symbol.iterator]();!(i=(s=a.next()).done);i=!0)if(n.push(s.value),e&&n.length===e)break}catch(c){o=!0,r=c}finally{try{i||null==a["return"]||a["return"]()}finally{if(o)throw r}}return n}function f(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function p(t,e){return d(t)||h(t,e)||f()}var v={methods:{getLocation:function(t){var e=0,n=0;return t.touches?(e=t.touches[0].pageX,n=t.touches[0].pageY):(e=t.pageX,n=t.pageY),[e,n]}}},m={mixins:[v],props:{node:{width:Number,height:Number,id:String,point:{type:Object,default:{x:0,y:0}},content:{text:String,url:String,color:String},shape:{type:String,default:"rectangle"},stroke:String,strokeWeight:Number},editable:Boolean,createLinkMode:Boolean,selected:Boolean,labels:Object,scale:String,rWidth:Number,rHeight:Number},watch:{node:function(){this.x=this.node.point.x,this.y=this.node.point.y}},data:function(){return{startPosition:null,cursorOffset:{x:0,y:0},id:this.node.id,x:this.node.point.x,y:this.node.point.y,content:this.node.content}},methods:{toggleSelect:function(){this.$emit("toggleSelect")},commitDest:function(){this.$emit("commitDest",this.id)},remove:function(){this.$emit("remove",this.id)},copy:function(){this.$emit("copy",this.node)},mousedown:function(t){if(this.editable){this.$emit("select",this.id);var e=this.getLocation(t),n=p(e,2),i=n[0],o=n[1];this.cursorOffset.x=i,this.cursorOffset.y=o,this.startPosition={x:this.x,y:this.y},document.addEventListener("mousemove",this.mousemove),document.addEventListener("mouseup",this.mouseup)}},mousemove:function(t){if(this.startPosition){t.preventDefault();var e=this.getLocation(t),n=p(e,2),i=n[0],o=n[1];this.x=this.startPosition.x+(i-this.cursorOffset.x)/this.rWidth/parseFloat(this.scale),this.y=this.startPosition.y+(o-this.cursorOffset.y)/this.rHeight/parseFloat(this.scale),this.$emit("updateLocation",{id:this.id,x:this.x,y:this.y})}},mouseup:function(){this.startPosition=null,document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup)},editCandidate:function(){this.$emit("editNode",{id:this.id,shape:this.node.shape,width:this.node.width,height:this.node.height,content:this.content,stroke:this.node.stroke,strokeWeight:this.node.strokeWeight})}}},g=m;n("37cc");function k(t,e,n,i,o,r,s,a){var c,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),r&&(l._scopeId="data-v-"+r),s?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):o&&(c=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(l.functional){l._injectStyles=c;var u=l.render;l.render=function(t,e){return c.call(e),u(t,e)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,c):[c]}return{exports:t,options:l}}var b=k(g,l,u,!1,null,"0b61de52",null);b.options.__file="Node.vue";var y=b.exports,w=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("g",["bezier"===t.link.shape?n("path",{attrs:{d:"M"+t.calcSource().x+" "+t.calcSource().y+"\n Q "+t.point.x+" "+t.point.y+"\n "+t.calcDestination().x+" "+t.calcDestination().y,stroke:t.link.color||"#ffeaa7","stroke-width":"3",fill:"none","stroke-dasharray":t.definePattern(t.link.pattern),"marker-start":"src"===t.link.arrow||"both"===t.link.arrow?"url(#"+t.link.id+")":"","marker-end":"dest"===t.link.arrow||"both"===t.link.arrow?"url(#"+t.link.id+")":""}}):n("line",{attrs:{x1:t.calcSource().x,y1:t.calcSource().y,x2:t.calcDestination().x,y2:t.calcDestination().y,stroke:t.link.color||"#ffeaa7","stroke-width":"3",fill:"none","stroke-dasharray":t.definePattern(t.link.pattern),"marker-start":"src"===t.link.arrow||"both"===t.link.arrow?"url(#"+t.link.id+")":"","marker-end":"dest"===t.link.arrow||"both"===t.link.arrow?"url(#"+t.link.id+")":""}}),n("marker",{attrs:{id:t.link.id,markerUnits:"userSpaceOnUse",orient:"auto-start-reverse",markerWidth:"15",markerHeight:"15",viewBox:"0 0 10 10",refX:"5",refY:"5"}},[n("polygon",{attrs:{points:"0,1.5 0,8.5 10,5 ",fill:t.link.color||"#ffeaa7"}})]),t.editable?n("g",[n("line",{attrs:{x1:t.calcSource().x,y1:t.calcSource().y,x2:t.point.x,y2:t.point.y,stroke:"lightgray"}}),n("line",{attrs:{x1:t.point.x,y1:t.point.y,x2:t.calcDestination().x,y2:t.calcDestination().y,stroke:"lightgray"}}),n("ellipse",{staticClass:"grab",attrs:{id:t.id,cx:t.point.x,cy:t.point.y,rx:"10",ry:"10",fill:"#ff7675","stroke-width":"2"},on:{click:t.select,mousedown:t.mousedown,touchstart:t.mousedown,mousemove:t.mousemove,touchmove:t.mousemove,mouseup:t.mouseup,touchend:t.mouseup}})]):t._e(),n("g",[t.selected?n("text",{staticClass:"button",attrs:{x:t.point.x-15,y:t.point.y-20,fill:"#00b894"},on:{click:t.edit}},[t._v("\n "+t._s(t.labels.edit||"Edit")+"\n ")]):t._e(),t.selected?n("text",{staticClass:"button",attrs:{x:t.point.x-15,y:t.point.y+30,fill:"#ff7675"},on:{click:t.remove}},[t._v("\n "+t._s(t.labels.remove||"Remove")+"\n ")]):t._e()])])},x=[],_=(n("b54a"),{mixins:[v],props:{selected:Boolean,editable:Boolean,source:{id:Number,x:Number,y:Number},destination:{id:Number,x:Number,y:Number},link:{id:String,color:{type:String,default:"#ffeaa7"},shape:{type:String,default:"straight"},pattern:{type:String,default:"solid"},arrow:{type:String,default:"none"},point:{x:Number,y:Number}},labels:Object,scale:String,rWidth:Number,rHeight:Number},computed:{},data:function(){return{startPosition:null,cursorOffset:{x:0,y:0},id:this.link.id,point:this.link.point}},methods:{mousedown:function(t){var e=this.getLocation(t),n=p(e,2),i=n[0],o=n[1];this.cursorOffset.x=i,this.cursorOffset.y=o,this.startPosition={x:this.point.x,y:this.point.y},document.addEventListener("mousemove",this.mousemove),document.addEventListener("mouseup",this.mouseup)},mousemove:function(t){if(this.startPosition){t.preventDefault();var e=this.getLocation(t),n=p(e,2),i=n[0],o=n[1];this.point.x=this.startPosition.x+(i-this.cursorOffset.x)/this.rWidth/parseFloat(this.scale),this.point.y=this.startPosition.y+(o-this.cursorOffset.y)/this.rHeight/parseFloat(this.scale),this.$emit("updateLocation",{id:this.id,x:this.point.x,y:this.point.y})}},definePattern:function(t){return"solid"===t?0:"dash"===t?10:"dot"===t?3:0},mouseup:function(){this.startPosition=null,document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup)},remove:function(){this.$emit("remove",this.id)},select:function(){this.$emit("select",this.id)},edit:function(){this.$emit("editLink",{id:this.link.id,content:{color:this.link.color||"#ffeaa7",shape:this.link.shape||"straight",pattern:this.link.pattern||"solid",arrow:this.link.arrow||"none"}})},calcSource:function(){var t=this.point.x-this.source.point.x-this.source.width/2,e=this.point.y-this.source.point.y-this.source.height/2;return 0===t&&(t=.01),Math.abs(e/t)<=1?t>=0?{x:this.source.point.x+this.source.width,y:this.source.point.y+this.source.height/2}:{x:this.source.point.x,y:this.source.point.y+this.source.height/2}:e>=0?{x:this.source.point.x+this.source.width/2,y:this.source.point.y+this.source.height}:{x:this.source.point.x+this.source.width/2,y:this.source.point.y}},calcDestination:function(){var t=this.point.x-this.destination.point.x-this.destination.width/2,e=this.point.y-this.destination.point.y-this.destination.height/2;return 0===t&&(t=.01),Math.abs(e/t)<=1?t>=0?{x:this.destination.point.x+this.destination.width,y:this.destination.point.y+this.destination.height/2}:{x:this.destination.point.x,y:this.destination.point.y+this.destination.height/2}:e>=0?{x:this.destination.point.x+this.destination.width/2,y:this.destination.point.y+this.destination.height}:{x:this.destination.point.x+this.destination.width/2,y:this.destination.point.y}}}}),S=_,N=(n("ca4d"),k(S,w,x,!1,null,"37869e78",null));N.options.__file="Link.vue";var L=N.exports,M={name:"Diagram",props:{width:Number,height:Number,scale:{type:String,default:"1"},background:String,showGrid:Boolean,nodes:Array,links:Array,editable:Boolean,labels:Object,fluid:{type:Boolean,default:!1}},components:{Node:y,Link:L},computed:{viewBoxDiagram:function(){return this.fluid?"0 0 ".concat(this.width/this.scale," ").concat(this.height/this.scale):"0 0 ".concat(this.width," ").concat(this.height)},scaleStr:function(){return"scale("+(this.fluid?1:this.scale||1)+")translate(0,0)"},nodeList:{get:function(){return this.nodes},set:function(t){this.$emit("nodeChanged",{nodes:t})}},linkList:{get:function(){return this.links},set:function(t){this.$emit("linkChanged",{links:t})}}},data:function(){return{name:"",url:"",color:"",selectedNode:-1,selectedLink:-1,createLinkMode:!1}},methods:{editNode:function(t){this.$emit("editNode",t)},editLink:function(t){this.$emit("editLink",t)},generateID:function(){return(new Date).getTime().toString(16)+Math.floor(1e6*Math.random()).toString(16)},addNode:function(){this.editable&&this.nodeList.push({id:this.generateID(),content:{text:this.name,color:this.color,url:this.url},width:200,height:60,point:{x:10,y:100+100*Math.random()}})},reset:function(){this.createLinkMode||(this.selectedNode=-1,this.selectedLink=-1)},updateLinkLocation:function(t){var e=this.linkList.find(function(e){return e.id===t.id});e.point.x=t.x,e.point.y=t.y},findNode:function(t){return this.nodes.find(function(e){return e.id===t})},removeLink:function(t){this.linkList=this.linkList.filter(function(e){return e.id!==t})},rect:function(){if(this.fluid){var t=this.$refs.field.getBoundingClientRect();return{rWidth:t.width/this.width,rHeight:t.height/this.height}}return{rWidth:1,rHeight:1}},updateNodeLocation:function(t){var e=this.nodeList.find(function(e){return e.id===t.id});e.point.x=t.x,e.point.y=t.y},selectNode:function(t){this.selectedNode=t},selectLink:function(t){this.selectedLink=t},toggleSrcSelect:function(){this.createLinkMode=!this.createLinkMode},commitDest:function(t){var e=this,n=this.nodeList.find(function(t){return t.id===e.selectedNode}),i=this.nodeList.find(function(e){return e.id===t});this.linkList.push({id:this.generateID(),source:this.selectedNode,destination:t,point:{x:.5*(n.point.x+i.point.x),y:.5*(n.point.y+i.point.y)}}),this.createLinkMode=!1,this.selectedNode=-1},removeNode:function(t){var e=this.nodeList.filter(function(e){return e.id!==t});this.nodeList=e;var n=this.linkList.filter(function(e){return e.source!==t&&e.destination!==t});this.linkList=n,this.createLinkMode=!1},copyNode:function(t){this.editable&&this.nodeList.push({id:this.generateID(),content:{text:t.content.text,color:t.content.color,url:t.content.url},width:t.width,height:t.height,point:{x:t.point.x+30,y:t.point.y+30},shape:t.shape,stroke:t.stroke,strokeWeight:t.strokeWeight})}}},A=M,E=(n("0a01"),k(A,a,c,!1,null,null,null));E.options.__file="Diagram.vue";var C=E.exports,O=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"editor"}},[t.editable?n("span",[n("VButton",{on:{click:t.openModal}},[t._v("New Node")]),n("VButton",{on:{click:t.endEdit}},[t._v("End")])],1):n("VButton",{on:{click:function(e){t.editable=!0}}},[t._v("Edit")]),n("VButton",{on:{click:t.openInputModal}},[t._v("Import/Export")]),n("VButton",{on:{click:t.downloadSVG}},[t._v("Download SVG")]),n("VButton",{on:{click:function(e){t.isAskClearDiagram=!0}}},[t._v("Clear Diagram")]),n("VButton",{on:{click:t.openSettingsModal}},[t._v("Settings")]),n("AskModal",{attrs:{isActive:t.isAskClearDiagram},on:{ok:t.clearDiagram,cancel:t.cancel}},[t._v("\n Do you wanna clear the Diagram?\n ")]),n("EditNodeModal",{attrs:{node:{content:{}},isActive:t.isModalActive},on:{ok:t.addNode,cancel:t.cancel}}),n("EditNodeModal",{attrs:{node:t.tmpNode,isActive:t.isEditModalActive},on:{ok:t.editNode,cancel:t.cancel}}),n("EditLinkModal",{attrs:{link:t.tmpLink,isActive:t.isEditLinkModalActive},on:{ok:t.editLink,cancel:t.cancel}}),n("InputModal",{attrs:{text:t.json,isActive:t.isInputModalActive},on:{ok:t.importData,cancel:t.cancel}}),n("SettingsModal",{attrs:{isActive:t.isSettingsModalActive,settings:t.settings},on:{ok:t.updateSettings,cancel:t.cancel}}),n("Diagram",{attrs:{width:t.graphData.width||2e3,height:t.graphData.height||1e3,fluid:t.settings.isFluid,scale:t.settings.scale,background:t.graphData.background||"#fafafa",showGrid:t.graphData.showGrid,nodes:t.graphData.nodes,links:t.graphData.links,editable:t.editable,labels:t.graphData.labels||{edit:"Edit",remove:"Remove",link:"New Link",select:"Select",cancel:"Cancel",copy:"Copy"}},on:{editNode:t.openNodeEdit,editLink:t.openLinkEdit,nodeChanged:t.nodeChanged,linkChanged:t.linkChanged}})],1)},D=[],I=(n("f751"),function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("VModal",{attrs:{isActive:t.isActive},on:{clickModal:t.cancel}},[n("transition",{attrs:{name:"item"}},[t.isActive?n("div",{staticClass:"form"},[n("VInput",{attrs:{placeholder:"name"},model:{value:t.newNode.content.text,callback:function(e){t.$set(t.newNode.content,"text",e)},expression:"newNode.content.text"}}),n("br"),n("VInput",{attrs:{placeholder:"url"},model:{value:t.newNode.content.url,callback:function(e){t.$set(t.newNode.content,"url",e)},expression:"newNode.content.url"}}),n("br"),n("VInput",{attrs:{placeholder:"color"},model:{value:t.newNode.content.color,callback:function(e){t.$set(t.newNode.content,"color",e)},expression:"newNode.content.color"}}),n("br"),n("VInput",{attrs:{type:"number",placeholder:"width"},model:{value:t.newNode.width,callback:function(e){t.$set(t.newNode,"width",e)},expression:"newNode.width"}}),n("br"),n("VInput",{attrs:{type:"number",placeholder:"height"},model:{value:t.newNode.height,callback:function(e){t.$set(t.newNode,"height",e)},expression:"newNode.height"}}),n("br"),n("VInput",{attrs:{type:"text",placeholder:"stroke"},model:{value:t.newNode.stroke,callback:function(e){t.$set(t.newNode,"stroke",e)},expression:"newNode.stroke"}}),n("br"),n("VInput",{attrs:{type:"number",placeholder:"stroke weight"},model:{value:t.newNode.strokeWeight,callback:function(e){t.$set(t.newNode,"strokeWeight",e)},expression:"newNode.strokeWeight"}}),n("br"),n("VSelect",{attrs:{placeholder:"Select shape"},model:{value:t.newNode.shape,callback:function(e){t.$set(t.newNode,"shape",e)},expression:"newNode.shape"}},[n("option",{attrs:{value:"rectangle",selected:""}},[t._v("Rectangle")]),n("option",{attrs:{value:"ellipse"}},[t._v("Ellipse")])]),n("br"),n("VButton",{on:{click:t.ok}},[t._v("OK")]),n("VButton",{staticClass:"danger",on:{click:t.cancel}},[t._v("Cancel")])],1):t._e()])],1)}),V=[],j={props:{isActive:Boolean,node:{type:Object,default:function(){return{id:"",shape:"rectangle",width:150,height:60,stroke:"",strokeWeight:0,content:{text:"none",url:"",color:"#ecf0f1"}}}}},watch:{node:function(){this.newWidth=parseInt(this.node.width),this.newHeight=parseInt(this.node.Height)}},data:function(){return{newNode:this.node}},methods:{ok:function(){this.$emit("ok",this.newNode)},cancel:function(){this.$emit("cancel")}}},B=j,P=(n("c3c4"),k(B,I,V,!1,null,"02b3537e",null));P.options.__file="EditNodeModal.vue";var F=P.exports,W=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("VModal",{attrs:{isActive:t.isActive},on:{clickModal:t.cancel}},[n("transition",{attrs:{name:"item"}},[t.isActive?n("div",{staticClass:"form"},[n("h2",[t._v("Edit link")]),n("label",[t._v("Color:")]),n("VInput",{attrs:{placeholder:"color"},model:{value:t.newLink.color,callback:function(e){t.$set(t.newLink,"color",e)},expression:"newLink.color"}}),n("br"),n("label",[t._v("Shape:")]),n("VSelect",{attrs:{placeholder:"Select line shape"},model:{value:t.newLink.shape,callback:function(e){t.$set(t.newLink,"shape",e)},expression:"newLink.shape"}},[n("option",{attrs:{value:"straight"}},[t._v("Straight line")]),n("option",{attrs:{value:"bezier"}},[t._v("Bezier curve")])]),n("br"),n("label",[t._v("Pattern:")]),n("VSelect",{attrs:{placeholder:"Select line pattern"},model:{value:t.newLink.pattern,callback:function(e){t.$set(t.newLink,"pattern",e)},expression:"newLink.pattern"}},[n("option",{attrs:{value:"solid",selected:""}},[t._v("Solid")]),n("option",{attrs:{value:"dash"}},[t._v("Dash")]),n("option",{attrs:{value:"dot"}},[t._v("Dot")])]),n("br"),n("label",[t._v("Arrow type:")]),n("VSelect",{attrs:{placeholder:"Select arrow type"},model:{value:t.newLink.arrow,callback:function(e){t.$set(t.newLink,"arrow",e)},expression:"newLink.arrow"}},[n("option",{attrs:{value:"none"}},[t._v("none")]),n("option",{attrs:{value:"src"}},[t._v("One side(source)")]),n("option",{attrs:{value:"dest"}},[t._v("One side(destination)")]),n("option",{attrs:{value:"both"}},[t._v("Both side")])]),n("br"),n("VButton",{on:{click:t.ok}},[t._v("OK")]),n("VButton",{staticClass:"danger",on:{click:t.cancel}},[t._v("Cancel")])],1):t._e()])],1)},G=[],T={props:{isActive:Boolean,link:{type:Object,default:function(){return{id:"0",content:{color:"#ffeaa7",shape:"straight",pattern:"solid",arrow:"none"}}}}},computed:{newLink:{get:function(){return this.link.content}}},methods:{ok:function(){this.$emit("ok",{id:this.link.id,content:{color:this.newLink.color,shape:this.newLink.shape,pattern:this.newLink.pattern,arrow:this.newLink.arrow}})},cancel:function(){this.$emit("cancel")}}},R=T,H=(n("c858"),k(R,W,G,!1,null,"13ee2543",null));H.options.__file="EditLinkModal.vue";var U=H.exports,X=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("VModal",{attrs:{isActive:t.isActive},on:{clickModal:t.cancel}},[n("div",[n("textarea",{directives:[{name:"model",rawName:"v-model",value:t.tmp,expression:"tmp"}],staticClass:"input",attrs:{required:"",placeholder:"JSON"},domProps:{value:t.tmp},on:{input:function(e){e.target.composing||(t.tmp=e.target.value)}}}),n("br"),n("VButton",{on:{click:t.ok}},[t._v("OK")]),n("VButton",{staticClass:"danger",on:{click:t.cancel}},[t._v("Cancel")])],1)])},z=[],q={props:{isActive:Boolean,text:String},watch:{text:function(t){this.tmp=t}},data:function(){return{tmp:""}},methods:{ok:function(){this.$emit("ok",{text:this.tmp})},cancel:function(){this.$emit("cancel")}}},K=q,Y=(n("2a3c"),k(K,X,z,!1,null,"361eba4c",null));Y.options.__file="InputModal.vue";var J=Y.exports,Q=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("VModal",{attrs:{isActive:t.isActive},on:{clickModal:t.cancel}},[n("transition",{attrs:{name:"item"}},[n("div",{staticClass:"block"},[n("div",{staticClass:"inner-block"},[t._t("default")],2),n("VButton",{on:{click:t.ok}},[t._v("OK")]),n("VButton",{staticClass:"danger",on:{click:t.cancel}},[t._v("Cancel")])],1)])],1)},Z=[],$={props:{isActive:Boolean},methods:{ok:function(){this.$emit("ok",!0)},cancel:function(){this.$emit("cancel")}}},tt=$,et=(n("a12f"),k(tt,Q,Z,!1,null,"aa2e890c",null));et.options.__file="AskModal.vue";var nt=et.exports,it=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("VModal",{attrs:{isActive:t.isActive},on:{clickModal:t.cancel}},[n("h2",[t._v("Settings")]),n("h3",[t._v("Field Size")]),n("label",[t._v("Width")]),n("VInput",{attrs:{type:"number"},model:{value:t.newSettings.width,callback:function(e){t.$set(t.newSettings,"width",e)},expression:"newSettings.width"}}),n("label",[t._v("Height")]),n("VInput",{attrs:{type:"number"},model:{value:t.newSettings.height,callback:function(e){t.$set(t.newSettings,"height",e)},expression:"newSettings.height"}}),n("br"),n("h3",[t._v("Scale")]),n("VSelect",{model:{value:t.newSettings.scale,callback:function(e){t.$set(t.newSettings,"scale",e)},expression:"newSettings.scale"}},[n("option",{attrs:{value:"0.5"}},[t._v("Small")]),n("option",{attrs:{value:"1",selected:""}},[t._v("Medium")]),n("option",{attrs:{value:"2"}},[t._v("Large")])]),n("h3",[t._v("Fluid")]),n("VCkbox",{model:{value:t.newSettings.isFluid,callback:function(e){t.$set(t.newSettings,"isFluid",e)},expression:"newSettings.isFluid"}},[t._v(" Toggle fluid ")]),n("h3",[t._v("Background")]),n("VCkbox",{model:{value:t.newSettings.showGrid,callback:function(e){t.$set(t.newSettings,"showGrid",e)},expression:"newSettings.showGrid"}},[t._v(" Show grid ")]),n("br"),n("br"),n("VButton",{on:{click:t.ok}},[t._v("OK")]),n("VButton",{staticClass:"danger",on:{click:t.cancel}},[t._v("Cancel")])],1)},ot=[],rt={props:{isActive:{type:Boolean,default:!1},settings:{type:Object,default:function(){return{width:1500,height:1e3,scale:"1",isFluid:!1,showGrid:!1}}}},watch:{isActive:function(t){t&&(this.newSettings=Object.assign({},this.settings))}},data:function(){return{newSettings:{width:0,height:0,showGrid:!1}}},methods:{changeGrid:function(){this.$emit("changeGrid")},ok:function(){this.$emit("ok",this.newSettings)},cancel:function(){this.$emit("cancel")}}},st=rt,at=k(st,it,ot,!1,null,null,null);at.options.__file="SettingsModal.vue";var ct=at.exports,lt={name:"DiagramEditor",components:{Diagram:C,EditNodeModal:F,EditLinkModal:U,InputModal:J,AskModal:nt,SettingsModal:ct},props:{value:{type:Object,default:function(){return{width:2e3,height:1e3,background:"#fafafa",showGrid:!1,labels:{edit:"Edit",remove:"Remove",link:"New Link",select:"Select",copy:"Copy"},nodes:[],links:[]}}}},computed:{graphData:{get:function(){return this.value},set:function(t){this.$emit("input",t)}}},data:function(){return{name:"",url:"",color:"",json:"",isModalActive:!1,isEditModalActive:!1,isEditLinkModalActive:!1,isInputModalActive:!1,isSettingsModalActive:!1,editable:!1,settings:{width:1500,height:1e3,isFluid:!1,scale:"1",showGrid:!1},tmpNode:{id:"",shape:"rectangle",width:0,height:0,content:{text:"",url:"",color:""}},tmpLink:{id:"",content:{color:"",pattern:"solid",arrow:"none"}},isAskClearDiagram:!1}},methods:{clearDiagram:function(){this.graphData.nodes=[],this.graphData.links=[],this.isAskClearDiagram=!1},generateID:function(){return(new Date).getTime().toString(16)+Math.floor(1e6*Math.random()).toString(16)},openModal:function(){this.isModalActive=!0},cancel:function(){this.isModalActive=!1,this.isEditModalActive=!1,this.isEditLinkModalActive=!1,this.isInputModalActive=!1,this.isAskClearDiagram=!1,this.isSettingsModalActive=!1},addNode:function(t){this.graphData.nodes.push({id:this.generateID(),content:{text:t.content.text,url:t.content.url,color:t.content.color},width:parseInt(t.width)||150,height:parseInt(t.height)||60,stroke:t.stroke,strokeWeight:t.strokeWeight,shape:t.shape,point:{x:10,y:100+100*Math.random()}}),this.isModalActive=!1},openNodeEdit:function(t){this.tmpNode.id=t.id,this.tmpNode.content.text=t.content.text,this.tmpNode.content.url=t.content.url,this.tmpNode.content.color=t.content.color,this.tmpNode.shape=t.shape,this.tmpNode.stroke=t.stroke,this.tmpNode.strokeWeight=t.strokeWeight,this.tmpNode.width=t.width,this.tmpNode.height=t.height,this.isModalActive=!1,this.isEditModalActive=!0},editNode:function(t){var e=this.graphData.nodes.find(function(e){return e.id===t.id});e.content.text=t.content.text,e.content.url=t.content.url,e.content.color=t.content.color,e.shape=t.shape,e.stroke=t.stroke,e.strokeWeight=t.strokeWeight,e.width=parseInt(t.width),e.height=parseInt(t.height),this.isEditModalActive=!1},openLinkEdit:function(t){this.tmpLink.id=t.id,this.tmpLink.content=Object.assign({},t.content),this.isEditLinkModalActive=!0},editLink:function(t){var e=this.graphData.links.find(function(e){return e.id===t.id});e.color=t.content.color,e.shape=t.content.shape,e.pattern=t.content.pattern,e.arrow=t.content.arrow,this.isEditLinkModalActive=!1},endEdit:function(){this.editable=!1},nodeChanged:function(t){this.graphData.nodes=t.nodes},linkChanged:function(t){this.graphData.links=t.links},openInputModal:function(){this.isInputModalActive=!0,this.json=JSON.stringify(this.graphData)},importData:function(t){var e=JSON.parse(t.text);e&&(this.graphData=e,this.isInputModalActive=!1)},downloadSVG:function(){var t=new Blob([document.getElementById("svg-diagram-show-area").innerHTML],{type:"image/svg+xml"}),e=window.URL.createObjectURL(t),n=document.createElement("a");n.href=e,n.download="image.svg",n.click()},changeGrid:function(){this.graphData.width=parseInt(this.settings.width),this.graphData.height=parseInt(this.settings.height),this.graphData.showGrid=this.settings.showGrid},openSettingsModal:function(){this.isSettingsModalActive=!0,this.settings.width=this.graphData.width,this.settings.height=this.graphData.height,this.settings.showGrid=this.graphData.showGrid},updateSettings:function(t){this.settings=Object.assign({},t),this.changeGrid(),this.isSettingsModalActive=!1}}},ut=lt,dt=k(ut,O,D,!1,null,null,null);dt.options.__file="DiagramEditor.vue";var ht=dt.exports,ft=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{on:{click:t.onClick}},[t._t("default")],2)},pt=[],vt={name:"VButton",methods:{onClick:function(){this.$emit("click")}}},mt=vt,gt=(n("0802"),k(mt,ft,pt,!1,null,"1f3ac946",null));gt.options.__file="VButton.vue";var kt=gt.exports,bt=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",[n("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"ckbox",attrs:{id:t.idCheckbox,type:"checkbox"},domProps:{checked:Array.isArray(t.val)?t._i(t.val,null)>-1:t.val},on:{change:[function(e){var n=t.val,i=e.target,o=!!i.checked;if(Array.isArray(n)){var r=null,s=t._i(n,r);i.checked?s<0&&(t.val=n.concat([r])):s>-1&&(t.val=n.slice(0,s).concat(n.slice(s+1)))}else t.val=o},t.onChange]}}),n("label",{attrs:{for:t.idCheckbox}},[t._t("default")],2)])},yt=[],wt={name:"VCkbox",props:{value:Boolean},computed:{idCheckbox:function(){return Math.floor(1e6*Math.random()).toString(16)},val:{get:function(){return this.value},set:function(t){this.$emit("input",t),this.$emit("changed",t)}}},methods:{onChange:function(){this.value!==this.val&&(this.$emit("input",this.val),this.$emit("changed",this.val))}}},xt=wt,_t=(n("7b61"),k(xt,bt,yt,!1,null,"609c0d87",null));_t.options.__file="VCkbox.vue";var St=_t.exports,Nt=function(){var t=this,e=t.$createElement,n=t._self._c||e;return"checkbox"===t.type?n("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(t.val)?t._i(t.val,null)>-1:t.val},on:{input:t.onInput,change:function(e){var n=t.val,i=e.target,o=!!i.checked;if(Array.isArray(n)){var r=null,s=t._i(n,r);i.checked?s<0&&(t.val=n.concat([r])):s>-1&&(t.val=n.slice(0,s).concat(n.slice(s+1)))}else t.val=o}}}):"radio"===t.type?n("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],attrs:{type:"radio"},domProps:{checked:t._q(t.val,null)},on:{input:t.onInput,change:function(e){t.val=null}}}):n("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],attrs:{type:t.type},domProps:{value:t.val},on:{input:[function(e){e.target.composing||(t.val=e.target.value)},t.onInput]}})},Lt=[],Mt={name:"VInput",props:{type:String,value:[String,Number]},computed:{val:{get:function(){return this.value},set:function(t){this.$emit("input",t)}}},methods:{onInput:function(){this.value!==this.val&&this.$emit("input",this.val)}}},At=Mt,Et=(n("f1cf"),k(At,Nt,Lt,!1,null,"8a212f36",null));Et.options.__file="VInput.vue";var Ct=Et.exports,Ot=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.dismiss?t._e():n("div",{attrs:{id:"message"}},[n("span",{staticClass:"dismiss",on:{click:function(e){t.dismiss=!0}}},[t._v("X")]),n("div",{attrs:{id:"content"}},[t._v(t._s(t.content))])])},Dt=[],It={name:"VMessage",props:{content:String},data:function(){return{dismiss:!1}}},Vt=It,jt=(n("e33f"),k(Vt,Ot,Dt,!1,null,"eba7471e",null));jt.options.__file="VMessage.vue";var Bt=jt.exports,Pt=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"modal",class:{"is-open":t.isActive},on:{click:t.clickModal}}),n("div",{staticClass:"item",class:{"is-open":t.isActive}},[t._t("default")],2)])},Ft=[],Wt={name:"VModal",props:{isActive:Boolean},methods:{clickModal:function(){this.$emit("clickModal")}}},Gt=Wt,Tt=(n("a40f"),k(Gt,Pt,Ft,!1,null,"78678095",null));Tt.options.__file="VModal.vue";var Rt=Tt.exports,Ht=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("select",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],attrs:{multiple:t.multiple},on:{change:[function(e){var n=Array.prototype.filter.call(e.target.options,function(t){return t.selected}).map(function(t){var e="_value"in t?t._value:t.value;return e});t.val=e.target.multiple?n:n[0]},t.onChange]}},[n("option",{staticClass:"placeholder",attrs:{disabled:""},domProps:{value:null}},[t._v("\n "+t._s(t.placeholder)+"\n ")]),t._t("default")],2)},Ut=[],Xt={name:"VSelect",props:{value:{type:[String,Number,Boolean,Object],default:null},multiple:{type:Boolean,default:!1},placeholder:{type:String,default:""}},mounted:function(){this.val=this.value},computed:{val:{get:function(){return this.value},set:function(t){this.$emit("input",t)}}},methods:{onChange:function(){this.value!==this.val&&this.$emit("input",this.val)}}},zt=Xt,qt=(n("0077"),k(zt,Ht,Ut,!1,null,"85331330",null));qt.options.__file="VSelect.vue";var Kt=qt.exports,Yt={install:function(t){for(var e in o){var n=o[e];t.component(n.name,n)}}},Jt=Yt;s.a.use(Jt);var Qt=C;n.d(e,"Diagram",function(){return C}),n.d(e,"DiagramEditor",function(){return ht});e["default"]=Qt},fdef:function(t,e){t.exports="\t\n\v\f\r   ᠎             　\u2028\u2029\ufeff"}})}); 2 | //# sourceMappingURL=diagram.umd.min.js.map -------------------------------------------------------------------------------- /img/bst.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 3 | 4 | 2 5 | 6 | 6 7 | 8 | 4 9 | 10 | 5 11 | 12 | 8 13 | 14 | 20 15 | 16 | 13 17 | 18 | 18 19 | 20 | 23 21 | -------------------------------------------------------------------------------- /img/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb10005/diagram-vue/28eeb3f925ec761b10a647053b39b217b3cbebe9/img/screenshot.png -------------------------------------------------------------------------------- /img/screenshot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Wake up 4 | 5 | Brush my teeth 6 | 7 | Have breakfast 8 | 9 | Have lunch 10 | 11 | Siesta 12 | 13 | Have dinner 14 | 15 | Go to bed 16 | 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "diagram-vue", 3 | "version": "0.3.2", 4 | "main": "dist/diagram.umd.js", 5 | "author": "pb10005", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/pb10005/diagram-vue.git" 10 | }, 11 | "unpkg": "dist/diagram.umd.min.js", 12 | "browser": { 13 | "./sfc": "src/Diagram.vue" 14 | }, 15 | "private": false, 16 | "scripts": { 17 | "serve": "vue-cli-service serve src/demo/main.js", 18 | "build": "vue-cli-service build src/index.js --target lib --name diagram", 19 | "build_app": "vue-cli-service build src/demo/main.js", 20 | "lint": "vue-cli-service lint", 21 | "test:e2e": "vue-cli-service test:e2e", 22 | "test:unit": "vue-cli-service test:unit" 23 | }, 24 | "dependencies": { 25 | "vue": "^2.5.17" 26 | }, 27 | "devDependencies": { 28 | "@vue/cli-plugin-babel": "^3.2.0", 29 | "@vue/cli-plugin-e2e-nightwatch": "^3.2.0", 30 | "@vue/cli-plugin-eslint": "^3.2.0", 31 | "@vue/cli-plugin-unit-mocha": "^3.2.0", 32 | "@vue/cli-service": "^3.2.0", 33 | "@vue/eslint-config-prettier": "^4.0.0", 34 | "@vue/test-utils": "^1.0.0-beta.20", 35 | "babel-eslint": "^10.0.1", 36 | "chai": "^4.1.2", 37 | "eslint": "^5.8.0", 38 | "eslint-plugin-vue": "^5.0.0-0", 39 | "node-sass": "^7.0.0", 40 | "sass-loader": "^7.0.1", 41 | "vue-template-compiler": "^2.5.17" 42 | }, 43 | "keywords": [ 44 | "vue", 45 | "vue-component", 46 | "diagram" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb10005/diagram-vue/28eeb3f925ec761b10a647053b39b217b3cbebe9/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | diagram-vue 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/Diagram.vue: -------------------------------------------------------------------------------- 1 | 89 | 295 | 303 | -------------------------------------------------------------------------------- /src/DiagramEditor.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | 313 | -------------------------------------------------------------------------------- /src/demo/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 41 | 42 | 57 | -------------------------------------------------------------------------------- /src/demo/Calculator.vue: -------------------------------------------------------------------------------- 1 | 39 | 133 | -------------------------------------------------------------------------------- /src/demo/data.json: -------------------------------------------------------------------------------- 1 | {"width":800,"height":600,"background":"#eee","nodes":[{"id":"17214bb721d65c81","content":{"text":"Wake up","color":"white"},"width":150,"height":60,"stroke":"black","strokeWeight":"2","shape":"rectangle","point":{"x":269,"y":31.056557875214764}},{"id":"17214bbccb87e56a","content":{"text":"Brush my teeth","color":"white"},"width":180,"height":60,"point":{"x":514,"y":143.05655787521476},"shape":"rectangle","stroke":"black","strokeWeight":"2"},{"id":"17214bd99f6dfb81","content":{"text":"Have breakfast","color":"white"},"width":180,"height":60,"point":{"x":524,"y":304.05655787521476},"shape":"rectangle","stroke":"red","strokeWeight":"2"},{"id":"17214beb6802f9d5","content":{"text":"Have lunch","color":"white"},"width":150,"height":60,"stroke":"red","strokeWeight":"2","shape":"rectangle","point":{"x":400,"y":432.24028293572763}},{"id":"17214bf28b22eb4c","content":{"text":"Siesta","color":"white"},"width":150,"height":60,"stroke":"black","strokeWeight":"2","shape":"rectangle","point":{"x":175,"y":432.85606145781674}},{"id":"17214bf4e485a3d7","content":{"text":"Have dinner","color":"white"},"width":150,"height":60,"point":{"x":37,"y":303.24028293572763},"shape":"rectangle","stroke":"red","strokeWeight":"2"},{"id":"17214bfb13e18321","content":{"text":"Go to bed","color":"white"},"width":150,"height":60,"point":{"x":39,"y":152.85606145781674},"shape":"rectangle","stroke":"black","strokeWeight":"2"}],"links":[{"id":"17214bd270854071","source":"17214bb721d65c81","destination":"17214bbccb87e56a","point":{"x":561,"y":53.556557875214764},"color":"orange","shape":"bezier","pattern":"solid","arrow":"dest"},{"id":"17214bdff81e62ac","source":"17214bbccb87e56a","destination":"17214bd99f6dfb81","point":{"x":622.5,"y":252.55655787521476},"color":"orange","shape":"bezier","pattern":"solid","arrow":"dest"},{"id":"17214c1868745e19","source":"17214bd99f6dfb81","destination":"17214beb6802f9d5","point":{"x":614,"y":444.1484204054712},"color":"orange","shape":"bezier","pattern":"solid","arrow":"dest"},{"id":"17214c2086b6d775","source":"17214beb6802f9d5","destination":"17214bf28b22eb4c","point":{"x":362,"y":465.04817219677216},"color":"orange","shape":"straight","pattern":"solid","arrow":"dest"},{"id":"17214c27e05c1d19","source":"17214bf28b22eb4c","destination":"17214bf4e485a3d7","point":{"x":105,"y":433.54817219677216},"color":"orange","shape":"bezier","pattern":"solid","arrow":"dest"},{"id":"17214c3594dc969b","source":"17214bf4e485a3d7","destination":"17214bfb13e18321","point":{"x":95.5,"y":257.04817219677216},"color":"orange","shape":"bezier","pattern":"solid","arrow":"dest"},{"id":"17214c3b7b9bb248","source":"17214bfb13e18321","destination":"17214bb721d65c81","point":{"x":159.5,"y":64.45630966651575},"color":"orange","shape":"bezier","pattern":"solid","arrow":"dest"}],"showGrid":false} 2 | -------------------------------------------------------------------------------- /src/demo/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount("#app"); 9 | -------------------------------------------------------------------------------- /src/demo/roadmap_to_v1.json: -------------------------------------------------------------------------------- 1 | {"width":800,"height":800,"background":"#ddd","nodes":[{"id":"16de3f8f64f581b9","content":{"text":"v1.0.0","color":"red"},"width":150,"height":150,"point":{"x":245,"y":29.26786149188635},"shape":"ellipse"},{"id":"16de3f93259acf1a","content":{"text":"v0.2.2","color":"red"},"width":150,"height":150,"shape":"ellipse","point":{"x":239,"y":571.1782089804165}},{"id":"16de3f9de9fc8673","content":{"text":"Bug Fix","color":"#55efc4"},"width":150,"height":60,"shape":"rectangle","point":{"x":114,"y":330.3038674034096}},{"id":"16de3f9fca5afc01","content":{"text":"New Feature","color":"#55efc4"},"width":150,"height":60,"shape":"rectangle","point":{"x":382,"y":332.8204147340801}}],"links":[{"id":"16de3fb7aacccd4d","source":"16de3f93259acf1a","destination":"16de3f9de9fc8673","point":{"x":206,"y":509.74103819191305},"color":"#636e72","pattern":"solid","arrow":"dest"},{"id":"16de3fb8468365a9","source":"16de3f93259acf1a","destination":"16de3f9fca5afc01","point":{"x":441.5,"y":504.49931185724824},"color":"#636e72","pattern":"solid","arrow":"dest"},{"id":"16de3fba690bd274","source":"16de3f9de9fc8673","destination":"16de3f8f64f581b9","point":{"x":208,"y":232.78586444764795},"color":"#636e72","pattern":"solid","arrow":"dest"},{"id":"16de3fbc3ccc263e","source":"16de3f9fca5afc01","destination":"16de3f8f64f581b9","point":{"x":433.5,"y":225.5441381129832},"color":"#636e72","pattern":"solid","arrow":"dest"}]} 2 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Diagram from "./Diagram"; 3 | import DiagramEditor from "./DiagramEditor"; 4 | 5 | import MinimalUI from "./minimal-ui"; 6 | Vue.use(MinimalUI); 7 | 8 | export default Diagram; 9 | export { Diagram, DiagramEditor }; 10 | -------------------------------------------------------------------------------- /src/lib/AskModal.vue: -------------------------------------------------------------------------------- 1 | 12 | 27 | 48 | -------------------------------------------------------------------------------- /src/lib/EditLinkModal.vue: -------------------------------------------------------------------------------- 1 | 32 | 76 | 94 | -------------------------------------------------------------------------------- /src/lib/EditNodeModal.vue: -------------------------------------------------------------------------------- 1 | 38 | 82 | 101 | -------------------------------------------------------------------------------- /src/lib/InputModal.vue: -------------------------------------------------------------------------------- 1 | 16 | 44 | 51 | -------------------------------------------------------------------------------- /src/lib/Link.vue: -------------------------------------------------------------------------------- 1 | 107 | 293 | 294 | -------------------------------------------------------------------------------- /src/lib/Node.vue: -------------------------------------------------------------------------------- 1 | 110 | 227 | 237 | -------------------------------------------------------------------------------- /src/lib/SettingsModal.vue: -------------------------------------------------------------------------------- 1 | 23 | 72 | -------------------------------------------------------------------------------- /src/minimal-ui/index.js: -------------------------------------------------------------------------------- 1 | import * as components from "./lib"; 2 | 3 | const MinimalUI = { 4 | install(Vue) { 5 | for (let key in components) { 6 | const component = components[key]; 7 | Vue.component(component.name, component); 8 | } 9 | } 10 | }; 11 | 12 | export default MinimalUI; 13 | -------------------------------------------------------------------------------- /src/minimal-ui/lib/VButton.vue: -------------------------------------------------------------------------------- 1 | 4 | 14 | 34 | -------------------------------------------------------------------------------- /src/minimal-ui/lib/VCkbox.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 44 | 45 | 65 | -------------------------------------------------------------------------------- /src/minimal-ui/lib/VInput.vue: -------------------------------------------------------------------------------- 1 | 4 | 28 | 56 | -------------------------------------------------------------------------------- /src/minimal-ui/lib/VMessage.vue: -------------------------------------------------------------------------------- 1 | 7 | 20 | 36 | -------------------------------------------------------------------------------- /src/minimal-ui/lib/VModal.vue: -------------------------------------------------------------------------------- 1 | 11 | 24 | 25 | 76 | -------------------------------------------------------------------------------- /src/minimal-ui/lib/VSelect.vue: -------------------------------------------------------------------------------- 1 | 9 | 46 | 59 | -------------------------------------------------------------------------------- /src/minimal-ui/lib/index.js: -------------------------------------------------------------------------------- 1 | import VButton from "./VButton"; 2 | import VCkbox from "./VCkbox"; 3 | import VInput from "./VInput"; 4 | import VMessage from "./VMessage"; 5 | import VModal from "./VModal"; 6 | import VSelect from "./VSelect"; 7 | 8 | export { VButton, VCkbox, VInput, VMessage, VModal, VSelect }; 9 | -------------------------------------------------------------------------------- /src/mouseLocation.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | getLocation(e) { 4 | /* マウスカーソルの位置またはタッチ位置を返す */ 5 | let x = 0; 6 | let y = 0; 7 | if (e.touches) { 8 | /* タッチの場合 */ 9 | x = e.touches[0].pageX; 10 | y = e.touches[0].pageY; 11 | } else { 12 | /* マウスの場合 */ 13 | x = e.pageX; 14 | y = e.pageY; 15 | } 16 | return [x, y]; 17 | } 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /tests/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // The assertion name is the filename. 3 | // Example usage: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // For more information on custom assertions see: 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | 10 | exports.assertion = function elementCount(selector, count) { 11 | this.message = `Testing if element <${selector}> has count: ${count}`; 12 | this.expected = count; 13 | this.pass = val => val === count; 14 | this.value = res => res.value; 15 | function evaluator(_selector) { 16 | return document.querySelectorAll(_selector).length; 17 | } 18 | this.command = cb => this.api.execute(evaluator, [selector], cb); 19 | }; 20 | -------------------------------------------------------------------------------- /tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | "default e2e tests": browser => { 6 | browser 7 | .url(process.env.VUE_DEV_SERVER_URL) 8 | .waitForElementVisible("#app", 5000) 9 | .assert.elementCount("button", 4) 10 | .end(); 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | mocha: true 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /tests/unit/node.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from "chai"; 2 | import { shallowMount } from "@vue/test-utils"; 3 | import Diagram from "@/components/Diagram.vue"; 4 | 5 | describe("Node.vue", () => { 6 | it("renders props.msg when passed", () => { 7 | const wrapper = shallowMount(Diagram); 8 | expect(wrapper.text()).to.include("a"); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | host: "0.0.0.0", 4 | disableHostCheck: true, 5 | watchOptions: { 6 | poll: true 7 | } 8 | } 9 | }; 10 | --------------------------------------------------------------------------------