├── .dockerignore ├── .browserslistrc ├── babel.config.js ├── postcss.config.js ├── public ├── favicon.png ├── icon │ ├── input.png │ └── output.png ├── mxgraph │ ├── button.gif │ ├── error.gif │ ├── point.gif │ ├── window.gif │ ├── collapsed.gif │ ├── expanded.gif │ ├── images │ │ ├── bg.gif │ │ ├── up.gif │ │ ├── bell.png │ │ ├── bold.gif │ │ ├── box.png │ │ ├── copy.gif │ │ ├── cut.gif │ │ ├── down.gif │ │ ├── fit.gif │ │ ├── font.gif │ │ ├── gear.gif │ │ ├── gear.png │ │ ├── grid.gif │ │ ├── help.gif │ │ ├── left.gif │ │ ├── link.gif │ │ ├── new.gif │ │ ├── open.gif │ │ ├── pan.gif │ │ ├── redo.gif │ │ ├── save.gif │ │ ├── text.gif │ │ ├── top.gif │ │ ├── tree.gif │ │ ├── undo.gif │ │ ├── zoom.gif │ │ ├── actor.gif │ │ ├── arrow.gif │ │ ├── bottom.gif │ │ ├── camera.gif │ │ ├── center.gif │ │ ├── cloud.gif │ │ ├── cmp-bg.gif │ │ ├── connect.gif │ │ ├── console.gif │ │ ├── delete.gif │ │ ├── diagram.gif │ │ ├── dude3.png │ │ ├── earth.png │ │ ├── ellipse.gif │ │ ├── entity.gif │ │ ├── expand.gif │ │ ├── group.gif │ │ ├── hexagon.gif │ │ ├── hline.gif │ │ ├── house.gif │ │ ├── house.png │ │ ├── image.gif │ │ ├── italic.gif │ │ ├── loading.gif │ │ ├── middle.gif │ │ ├── outline.gif │ │ ├── package.png │ │ ├── paste.gif │ │ ├── plain.gif │ │ ├── press.gif │ │ ├── preview.gif │ │ ├── print.gif │ │ ├── printer.png │ │ ├── refresh.gif │ │ ├── rhombus.gif │ │ ├── right.gif │ │ ├── rounded.gif │ │ ├── saveas.gif │ │ ├── script.gif │ │ ├── select.gif │ │ ├── server.png │ │ ├── tasks.gif │ │ ├── toback.gif │ │ ├── tofront.gif │ │ ├── toolbar.gif │ │ ├── ungroup.gif │ │ ├── wrench.png │ │ ├── zoomin.gif │ │ ├── zoomout.gif │ │ ├── alignleft.gif │ │ ├── aligntop.gif │ │ ├── block_end.gif │ │ ├── collapse.gif │ │ ├── connector.gif │ │ ├── cylinder.gif │ │ ├── fillcolor.gif │ │ ├── fontcolor.gif │ │ ├── linecolor.gif │ │ ├── open_end.gif │ │ ├── oval_end.gif │ │ ├── rectangle.gif │ │ ├── straight.gif │ │ ├── swimlane.gif │ │ ├── triangle.gif │ │ ├── underline.gif │ │ ├── vertical.gif │ │ ├── workplace.png │ │ ├── alignbottom.gif │ │ ├── aligncenter.gif │ │ ├── alignmiddle.gif │ │ ├── alignright.gif │ │ ├── block_start.gif │ │ ├── classic_end.gif │ │ ├── cube_green.png │ │ ├── diamond_end.gif │ │ ├── draw │ │ │ ├── drawbg.jpg │ │ │ ├── mxlogo.jpg │ │ │ ├── drawbgcolor.jpg │ │ │ ├── drawfooter.jpg │ │ │ └── drawheader.jpg │ │ ├── open_start.gif │ │ ├── oval_start.gif │ │ ├── preferences.gif │ │ ├── properties.gif │ │ ├── symbols │ │ │ ├── fork.png │ │ │ ├── link.png │ │ │ ├── rule.png │ │ │ ├── error.png │ │ │ ├── event.png │ │ │ ├── merge.png │ │ │ ├── timer.png │ │ │ ├── event_end.png │ │ │ ├── inclusive.png │ │ │ ├── message.png │ │ │ ├── multiple.png │ │ │ ├── terminate.png │ │ │ ├── cancel_end.png │ │ │ ├── message_end.png │ │ │ ├── small_error.gif │ │ │ ├── small_event.gif │ │ │ ├── small_fork.gif │ │ │ ├── small_link.gif │ │ │ ├── small_merge.gif │ │ │ ├── small_rule.gif │ │ │ ├── small_timer.gif │ │ │ ├── small_message.gif │ │ │ ├── small_multiple.gif │ │ │ ├── small_cancel_end.gif │ │ │ ├── small_event_end.gif │ │ │ ├── small_inclusive.gif │ │ │ ├── small_terminate.gif │ │ │ ├── cancel_intermediate.png │ │ │ ├── event_intermediate.png │ │ │ ├── small_message_end.gif │ │ │ ├── message_intermediate.png │ │ │ ├── small_event_intermediate.gif │ │ │ ├── small_cancel_intermediate.gif │ │ │ └── small_message_intermediate.gif │ │ ├── zoomactual.gif │ │ ├── classic_start.gif │ │ ├── diamond_start.gif │ │ ├── doubleellipse.gif │ │ └── overlays │ │ │ ├── check.png │ │ │ ├── error.png │ │ │ ├── flash.png │ │ │ ├── help.png │ │ │ ├── house.png │ │ │ ├── user3.png │ │ │ ├── pencil.png │ │ │ ├── printer.png │ │ │ ├── users3.png │ │ │ ├── forbidden.png │ │ │ ├── workplace.png │ │ │ ├── information.png │ │ │ └── lightbulb_on.png │ ├── separator.gif │ ├── submenu.gif │ ├── warning.gif │ ├── warning.png │ ├── transparent.gif │ └── window-title.gif ├── index.html └── arrows.xml ├── src ├── assets │ ├── logo.png │ ├── point.gif │ └── icon │ │ ├── group.png │ │ ├── home.png │ │ ├── label.png │ │ ├── line.png │ │ ├── delete.png │ │ ├── editor.png │ │ ├── handler.png │ │ ├── stencil.png │ │ ├── toolbar.png │ │ ├── toolbar2.png │ │ └── connectPoint.png ├── views │ ├── example │ │ ├── htmlLabel │ │ │ ├── icon │ │ │ │ ├── cat.png │ │ │ │ ├── dog.png │ │ │ │ ├── error.png │ │ │ │ └── right.png │ │ │ └── index.vue │ │ ├── graphEditor │ │ │ └── index.vue │ │ ├── welcome │ │ │ └── index.vue │ │ ├── edgeStyle │ │ │ ├── changeStatusDialog.vue │ │ │ └── index.vue │ │ ├── customToolbar │ │ │ ├── toolbar.js │ │ │ └── index.vue │ │ ├── groupEditor │ │ │ ├── toolbarItems.js │ │ │ └── index.vue │ │ ├── customConnectionConstraints │ │ │ └── index.vue │ │ ├── toolbar │ │ │ └── index.vue │ │ ├── manualDrawing │ │ │ └── index.vue │ │ ├── cascadeDelete │ │ │ └── index.vue │ │ └── stencilToolbar │ │ │ └── index.vue │ └── layout │ │ ├── index.vue │ │ ├── sidebar │ │ └── index.vue │ │ └── navbar │ │ └── index.vue ├── store │ ├── index.js │ └── module │ │ └── appStore.js ├── App.vue ├── main.js ├── style │ ├── style.scss │ └── mxgraph.css ├── components │ └── graphEditor │ │ ├── pageFormat.js │ │ ├── index.vue │ │ └── graphUtility.js └── router │ └── index.js ├── docker_delete_container_by_name.sh ├── Dockerfile ├── .gitlab-ci.yml ├── .gitignore ├── .eslintrc.js ├── .github └── workflows │ └── buildAndDeploy.yml ├── vue.config.js ├── package.json ├── README-zh_CN.md ├── README.md └── doc ├── customToolbar_design_zh_cn.md └── customToolbar_design_en_us.md /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/favicon.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/point.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/point.gif -------------------------------------------------------------------------------- /public/icon/input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/icon/input.png -------------------------------------------------------------------------------- /public/icon/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/icon/output.png -------------------------------------------------------------------------------- /public/mxgraph/button.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/button.gif -------------------------------------------------------------------------------- /public/mxgraph/error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/error.gif -------------------------------------------------------------------------------- /public/mxgraph/point.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/point.gif -------------------------------------------------------------------------------- /public/mxgraph/window.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/window.gif -------------------------------------------------------------------------------- /src/assets/icon/group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/group.png -------------------------------------------------------------------------------- /src/assets/icon/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/home.png -------------------------------------------------------------------------------- /src/assets/icon/label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/label.png -------------------------------------------------------------------------------- /src/assets/icon/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/line.png -------------------------------------------------------------------------------- /public/mxgraph/collapsed.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/collapsed.gif -------------------------------------------------------------------------------- /public/mxgraph/expanded.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/expanded.gif -------------------------------------------------------------------------------- /public/mxgraph/images/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/bg.gif -------------------------------------------------------------------------------- /public/mxgraph/images/up.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/up.gif -------------------------------------------------------------------------------- /public/mxgraph/separator.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/separator.gif -------------------------------------------------------------------------------- /public/mxgraph/submenu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/submenu.gif -------------------------------------------------------------------------------- /public/mxgraph/warning.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/warning.gif -------------------------------------------------------------------------------- /public/mxgraph/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/warning.png -------------------------------------------------------------------------------- /src/assets/icon/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/delete.png -------------------------------------------------------------------------------- /src/assets/icon/editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/editor.png -------------------------------------------------------------------------------- /src/assets/icon/handler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/handler.png -------------------------------------------------------------------------------- /src/assets/icon/stencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/stencil.png -------------------------------------------------------------------------------- /src/assets/icon/toolbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/toolbar.png -------------------------------------------------------------------------------- /src/assets/icon/toolbar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/toolbar2.png -------------------------------------------------------------------------------- /public/mxgraph/images/bell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/bell.png -------------------------------------------------------------------------------- /public/mxgraph/images/bold.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/bold.gif -------------------------------------------------------------------------------- /public/mxgraph/images/box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/box.png -------------------------------------------------------------------------------- /public/mxgraph/images/copy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/copy.gif -------------------------------------------------------------------------------- /public/mxgraph/images/cut.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/cut.gif -------------------------------------------------------------------------------- /public/mxgraph/images/down.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/down.gif -------------------------------------------------------------------------------- /public/mxgraph/images/fit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/fit.gif -------------------------------------------------------------------------------- /public/mxgraph/images/font.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/font.gif -------------------------------------------------------------------------------- /public/mxgraph/images/gear.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/gear.gif -------------------------------------------------------------------------------- /public/mxgraph/images/gear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/gear.png -------------------------------------------------------------------------------- /public/mxgraph/images/grid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/grid.gif -------------------------------------------------------------------------------- /public/mxgraph/images/help.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/help.gif -------------------------------------------------------------------------------- /public/mxgraph/images/left.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/left.gif -------------------------------------------------------------------------------- /public/mxgraph/images/link.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/link.gif -------------------------------------------------------------------------------- /public/mxgraph/images/new.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/new.gif -------------------------------------------------------------------------------- /public/mxgraph/images/open.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/open.gif -------------------------------------------------------------------------------- /public/mxgraph/images/pan.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/pan.gif -------------------------------------------------------------------------------- /public/mxgraph/images/redo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/redo.gif -------------------------------------------------------------------------------- /public/mxgraph/images/save.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/save.gif -------------------------------------------------------------------------------- /public/mxgraph/images/text.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/text.gif -------------------------------------------------------------------------------- /public/mxgraph/images/top.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/top.gif -------------------------------------------------------------------------------- /public/mxgraph/images/tree.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/tree.gif -------------------------------------------------------------------------------- /public/mxgraph/images/undo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/undo.gif -------------------------------------------------------------------------------- /public/mxgraph/images/zoom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/zoom.gif -------------------------------------------------------------------------------- /public/mxgraph/transparent.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/transparent.gif -------------------------------------------------------------------------------- /public/mxgraph/images/actor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/actor.gif -------------------------------------------------------------------------------- /public/mxgraph/images/arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/arrow.gif -------------------------------------------------------------------------------- /public/mxgraph/images/bottom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/bottom.gif -------------------------------------------------------------------------------- /public/mxgraph/images/camera.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/camera.gif -------------------------------------------------------------------------------- /public/mxgraph/images/center.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/center.gif -------------------------------------------------------------------------------- /public/mxgraph/images/cloud.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/cloud.gif -------------------------------------------------------------------------------- /public/mxgraph/images/cmp-bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/cmp-bg.gif -------------------------------------------------------------------------------- /public/mxgraph/images/connect.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/connect.gif -------------------------------------------------------------------------------- /public/mxgraph/images/console.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/console.gif -------------------------------------------------------------------------------- /public/mxgraph/images/delete.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/delete.gif -------------------------------------------------------------------------------- /public/mxgraph/images/diagram.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/diagram.gif -------------------------------------------------------------------------------- /public/mxgraph/images/dude3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/dude3.png -------------------------------------------------------------------------------- /public/mxgraph/images/earth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/earth.png -------------------------------------------------------------------------------- /public/mxgraph/images/ellipse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/ellipse.gif -------------------------------------------------------------------------------- /public/mxgraph/images/entity.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/entity.gif -------------------------------------------------------------------------------- /public/mxgraph/images/expand.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/expand.gif -------------------------------------------------------------------------------- /public/mxgraph/images/group.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/group.gif -------------------------------------------------------------------------------- /public/mxgraph/images/hexagon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/hexagon.gif -------------------------------------------------------------------------------- /public/mxgraph/images/hline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/hline.gif -------------------------------------------------------------------------------- /public/mxgraph/images/house.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/house.gif -------------------------------------------------------------------------------- /public/mxgraph/images/house.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/house.png -------------------------------------------------------------------------------- /public/mxgraph/images/image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/image.gif -------------------------------------------------------------------------------- /public/mxgraph/images/italic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/italic.gif -------------------------------------------------------------------------------- /public/mxgraph/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/loading.gif -------------------------------------------------------------------------------- /public/mxgraph/images/middle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/middle.gif -------------------------------------------------------------------------------- /public/mxgraph/images/outline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/outline.gif -------------------------------------------------------------------------------- /public/mxgraph/images/package.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/package.png -------------------------------------------------------------------------------- /public/mxgraph/images/paste.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/paste.gif -------------------------------------------------------------------------------- /public/mxgraph/images/plain.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/plain.gif -------------------------------------------------------------------------------- /public/mxgraph/images/press.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/press.gif -------------------------------------------------------------------------------- /public/mxgraph/images/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/preview.gif -------------------------------------------------------------------------------- /public/mxgraph/images/print.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/print.gif -------------------------------------------------------------------------------- /public/mxgraph/images/printer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/printer.png -------------------------------------------------------------------------------- /public/mxgraph/images/refresh.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/refresh.gif -------------------------------------------------------------------------------- /public/mxgraph/images/rhombus.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/rhombus.gif -------------------------------------------------------------------------------- /public/mxgraph/images/right.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/right.gif -------------------------------------------------------------------------------- /public/mxgraph/images/rounded.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/rounded.gif -------------------------------------------------------------------------------- /public/mxgraph/images/saveas.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/saveas.gif -------------------------------------------------------------------------------- /public/mxgraph/images/script.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/script.gif -------------------------------------------------------------------------------- /public/mxgraph/images/select.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/select.gif -------------------------------------------------------------------------------- /public/mxgraph/images/server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/server.png -------------------------------------------------------------------------------- /public/mxgraph/images/tasks.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/tasks.gif -------------------------------------------------------------------------------- /public/mxgraph/images/toback.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/toback.gif -------------------------------------------------------------------------------- /public/mxgraph/images/tofront.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/tofront.gif -------------------------------------------------------------------------------- /public/mxgraph/images/toolbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/toolbar.gif -------------------------------------------------------------------------------- /public/mxgraph/images/ungroup.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/ungroup.gif -------------------------------------------------------------------------------- /public/mxgraph/images/wrench.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/wrench.png -------------------------------------------------------------------------------- /public/mxgraph/images/zoomin.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/zoomin.gif -------------------------------------------------------------------------------- /public/mxgraph/images/zoomout.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/zoomout.gif -------------------------------------------------------------------------------- /public/mxgraph/window-title.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/window-title.gif -------------------------------------------------------------------------------- /src/assets/icon/connectPoint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/assets/icon/connectPoint.png -------------------------------------------------------------------------------- /public/mxgraph/images/alignleft.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/alignleft.gif -------------------------------------------------------------------------------- /public/mxgraph/images/aligntop.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/aligntop.gif -------------------------------------------------------------------------------- /public/mxgraph/images/block_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/block_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/collapse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/collapse.gif -------------------------------------------------------------------------------- /public/mxgraph/images/connector.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/connector.gif -------------------------------------------------------------------------------- /public/mxgraph/images/cylinder.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/cylinder.gif -------------------------------------------------------------------------------- /public/mxgraph/images/fillcolor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/fillcolor.gif -------------------------------------------------------------------------------- /public/mxgraph/images/fontcolor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/fontcolor.gif -------------------------------------------------------------------------------- /public/mxgraph/images/linecolor.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/linecolor.gif -------------------------------------------------------------------------------- /public/mxgraph/images/open_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/open_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/oval_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/oval_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/rectangle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/rectangle.gif -------------------------------------------------------------------------------- /public/mxgraph/images/straight.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/straight.gif -------------------------------------------------------------------------------- /public/mxgraph/images/swimlane.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/swimlane.gif -------------------------------------------------------------------------------- /public/mxgraph/images/triangle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/triangle.gif -------------------------------------------------------------------------------- /public/mxgraph/images/underline.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/underline.gif -------------------------------------------------------------------------------- /public/mxgraph/images/vertical.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/vertical.gif -------------------------------------------------------------------------------- /public/mxgraph/images/workplace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/workplace.png -------------------------------------------------------------------------------- /public/mxgraph/images/alignbottom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/alignbottom.gif -------------------------------------------------------------------------------- /public/mxgraph/images/aligncenter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/aligncenter.gif -------------------------------------------------------------------------------- /public/mxgraph/images/alignmiddle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/alignmiddle.gif -------------------------------------------------------------------------------- /public/mxgraph/images/alignright.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/alignright.gif -------------------------------------------------------------------------------- /public/mxgraph/images/block_start.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/block_start.gif -------------------------------------------------------------------------------- /public/mxgraph/images/classic_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/classic_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/cube_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/cube_green.png -------------------------------------------------------------------------------- /public/mxgraph/images/diamond_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/diamond_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/draw/drawbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/draw/drawbg.jpg -------------------------------------------------------------------------------- /public/mxgraph/images/draw/mxlogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/draw/mxlogo.jpg -------------------------------------------------------------------------------- /public/mxgraph/images/open_start.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/open_start.gif -------------------------------------------------------------------------------- /public/mxgraph/images/oval_start.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/oval_start.gif -------------------------------------------------------------------------------- /public/mxgraph/images/preferences.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/preferences.gif -------------------------------------------------------------------------------- /public/mxgraph/images/properties.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/properties.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/fork.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/link.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/rule.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/rule.png -------------------------------------------------------------------------------- /public/mxgraph/images/zoomactual.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/zoomactual.gif -------------------------------------------------------------------------------- /public/mxgraph/images/classic_start.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/classic_start.gif -------------------------------------------------------------------------------- /public/mxgraph/images/diamond_start.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/diamond_start.gif -------------------------------------------------------------------------------- /public/mxgraph/images/doubleellipse.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/doubleellipse.gif -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/check.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/error.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/flash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/flash.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/help.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/house.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/house.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/user3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/user3.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/error.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/event.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/event.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/merge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/merge.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/timer.png -------------------------------------------------------------------------------- /src/views/example/htmlLabel/icon/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/views/example/htmlLabel/icon/cat.png -------------------------------------------------------------------------------- /src/views/example/htmlLabel/icon/dog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/views/example/htmlLabel/icon/dog.png -------------------------------------------------------------------------------- /public/mxgraph/images/draw/drawbgcolor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/draw/drawbgcolor.jpg -------------------------------------------------------------------------------- /public/mxgraph/images/draw/drawfooter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/draw/drawfooter.jpg -------------------------------------------------------------------------------- /public/mxgraph/images/draw/drawheader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/draw/drawheader.jpg -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/pencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/pencil.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/printer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/printer.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/users3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/users3.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/event_end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/event_end.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/inclusive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/inclusive.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/message.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/multiple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/multiple.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/terminate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/terminate.png -------------------------------------------------------------------------------- /src/views/example/htmlLabel/icon/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/views/example/htmlLabel/icon/error.png -------------------------------------------------------------------------------- /src/views/example/htmlLabel/icon/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/src/views/example/htmlLabel/icon/right.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/forbidden.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/forbidden.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/workplace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/workplace.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/cancel_end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/cancel_end.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/message_end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/message_end.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_error.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_event.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_event.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_fork.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_fork.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_link.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_link.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_merge.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_merge.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_rule.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_rule.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_timer.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_timer.gif -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/information.png -------------------------------------------------------------------------------- /public/mxgraph/images/overlays/lightbulb_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/overlays/lightbulb_on.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_message.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_message.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_multiple.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_multiple.gif -------------------------------------------------------------------------------- /docker_delete_container_by_name.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | for id in $(docker ps -a | grep $1 | awk '{print $1}') 4 | do 5 | docker rm -f $id 6 | done 7 | 8 | -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_cancel_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_cancel_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_event_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_event_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_inclusive.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_inclusive.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_terminate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_terminate.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/cancel_intermediate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/cancel_intermediate.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/event_intermediate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/event_intermediate.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_message_end.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_message_end.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/message_intermediate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/message_intermediate.png -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_event_intermediate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_event_intermediate.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_cancel_intermediate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_cancel_intermediate.gif -------------------------------------------------------------------------------- /public/mxgraph/images/symbols/small_message_intermediate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lanniu/vue-mxgraph-example/HEAD/public/mxgraph/images/symbols/small_message_intermediate.gif -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import appStore from '@/store/module/appStore' 4 | 5 | Vue.use(Vuex) 6 | 7 | export default new Vuex.Store({ 8 | modules: {appStore} 9 | }) 10 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:10.16.3-alpine as build 2 | WORKDIR /app 3 | COPY package.json /app/package.json 4 | RUN npm install 5 | COPY . /app 6 | RUN npm run build 7 | FROM nginx 8 | COPY --from=build /app/dist /usr/share/nginx/html 9 | EXPOSE 80 10 | CMD ["nginx", "-g", "daemon off;"] 11 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | stages: 2 | - build_image 3 | 4 | before_script: 5 | - docker info 6 | 7 | build_image: 8 | stage: build_image 9 | script: 10 | - npm run docker_build 11 | - npm run docker_delete_exist 12 | - npm run docker_deploy 13 | tags: 14 | - deploy 15 | 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/workflows/buildAndDeploy.yml: -------------------------------------------------------------------------------- 1 | name: buildAndDeploy 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | build-and-deploy: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: checkout 11 | uses: actions/checkout@master 12 | 13 | - name: buildAndDeploy 14 | uses: JamesIves/github-pages-deploy-action@master 15 | env: 16 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 17 | BRANCH: gh-pages 18 | FOLDER: dist 19 | BUILD_SCRIPT: npm install && npm run build 20 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import 'element-ui/lib/theme-chalk/index.css' 2 | import '@/style/mxgraph.css' 3 | import '@/style/style.scss' 4 | 5 | import Vue from 'vue' 6 | import App from '@/App.vue' 7 | import router from '@/router' 8 | import store from '@/store' 9 | 10 | // 引入组件库及其组件库样式 11 | import ElementUI from 'element-ui' 12 | 13 | Vue.use(ElementUI) 14 | 15 | import * as R from 'ramda' 16 | 17 | Vue.prototype.R = R 18 | 19 | Vue.config.productionTip = false 20 | 21 | new Vue({ 22 | router, 23 | store, 24 | render: h => h(App) 25 | }).$mount('#app') 26 | -------------------------------------------------------------------------------- /src/views/example/graphEditor/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /src/style/style.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | padding: 0; 5 | margin: 0; 6 | overflow: hidden; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | } 12 | 13 | .graphContainer { 14 | outline: none; 15 | position: relative; 16 | overflow: auto; 17 | width: 100%; 18 | height: 100%; 19 | } 20 | 21 | 22 | ::-webkit-scrollbar-track-piece { 23 | background-color: #f5f5f5; 24 | } 25 | 26 | ::-webkit-scrollbar { 27 | width: 9px; 28 | height: 9px; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb { 32 | background-color: #cfcfcf; 33 | background-clip: padding-box; 34 | border-radius: 5px; 35 | min-height: 28px; 36 | } 37 | 38 | ::-webkit-scrollbar-thumb:hover { 39 | background-color: #bbb; 40 | } 41 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue-mxgraph-example 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: '/', 3 | outputDir: 'dist', 4 | lintOnSave: true, 5 | chainWebpack: (config) => { 6 | config.module 7 | .rule('') 8 | .test(/mxClient\.js$/) 9 | .use('exports-loader') 10 | .loader('exports-loader?mxClient,mxToolbar,mxEdgeStyle,mxConnectionHandler,mxEllipse,mxConnectionConstraint,mxWindow,' + 11 | 'mxObjectCodec,mxGraphModel,mxActor,mxPopupMenu,mxShape,mxEventObject,mxGraph,mxPopupMenuHandler,mxPrintPreview,' + 12 | 'mxEventSource,mxRectangle,mxVertexHandler,mxMouseEvent,mxGraphView,mxCodecRegistry,mxImage,mxGeometry,mxCellState,' + 13 | 'mxRubberband,mxConstraintHandler,mxKeyHandler,mxDragSource,mxGraphModel,mxEvent,mxUtils,mxEvent,mxCodec,mxCell,' + 14 | 'mxConstants,mxPoint,mxGraphHandler,mxCylinder,mxCellRenderer,mxEvent,mxUndoManager,mxStencilRegistry,mxStencil') 15 | .end() 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/views/example/welcome/index.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 36 | 37 | 43 | -------------------------------------------------------------------------------- /src/views/layout/index.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | 32 | 50 | -------------------------------------------------------------------------------- /src/views/example/edgeStyle/changeStatusDialog.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 40 | 41 | 44 | -------------------------------------------------------------------------------- /src/store/module/appStore.js: -------------------------------------------------------------------------------- 1 | import {findIndex, equals, isNil} from 'ramda' 2 | import vue from 'vue' 3 | 4 | const appStore = { 5 | state: { 6 | sidebarCollapse: true, 7 | tagsContainer: {} 8 | }, 9 | getters: { 10 | sidebarCollapse: (state) => { 11 | return state.sidebarCollapse 12 | }, 13 | tagsContainer: (state) => { 14 | return state.tagsContainer 15 | } 16 | }, 17 | mutations: { 18 | setSidebarCollapse: (state, collapse) => { 19 | state.sidebarCollapse = collapse 20 | }, 21 | DELETE_TAG: (state, tag) => { 22 | const {name} = tag 23 | 24 | vue.delete(state.tagsContainer, name) 25 | }, 26 | ADD_TAG: (state, tag) => { 27 | const {name} = tag 28 | 29 | if (isNil(state.tagsContainer[name])) { 30 | vue.set(state.tagsContainer, name, tag) 31 | } 32 | } 33 | }, 34 | actions: { 35 | addOneTagToContainer: ({commit, state}, tag) => { 36 | const {name} = tag 37 | 38 | commit('ADD_TAG', tag) 39 | return findIndex(equals(name), Object.keys(state.tagsContainer)) 40 | }, 41 | deleteOneTagFromContainer: ({commit}, tag) => { 42 | commit('DELETE_TAG', tag) 43 | } 44 | } 45 | } 46 | 47 | export default appStore 48 | -------------------------------------------------------------------------------- /src/views/example/customToolbar/toolbar.js: -------------------------------------------------------------------------------- 1 | import { 2 | mxConstants as MxConstants 3 | } from 'mxgraph/javascript/mxClient' 4 | 5 | const outputIcon = './icon/output.png' 6 | const inputIcon = './icon/input.png' 7 | 8 | export const toolbarItems = [ 9 | { 10 | icon: outputIcon, 11 | title: '输出', 12 | width: 50, 13 | height: 50, 14 | style: { 15 | fillColor: 'transparent', 16 | strokeColor: '#000000', 17 | strokeWidth: '1', 18 | shape: MxConstants.SHAPE_LABEL, 19 | align: MxConstants.ALIGN_CENTER, 20 | verticalAlign: MxConstants.ALIGN_BOTTOM, 21 | imageAlign: MxConstants.ALIGN_CENTER, 22 | imageVerticalAlign: MxConstants.ALIGN_TOP, 23 | image: outputIcon 24 | } 25 | }, 26 | { 27 | icon: inputIcon, 28 | title: '输入', 29 | width: 50, 30 | height: 50, 31 | style: { 32 | fillColor: 'transparent', // 填充色 33 | strokeColor: '#000000', // 线条颜色 34 | strokeWidth: '1', // 线条粗细 35 | shape: MxConstants.SHAPE_LABEL, // 形状 36 | align: MxConstants.ALIGN_CENTER, // 水平方向对其方式 37 | verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对其方式 38 | imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对其方式 39 | imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形方向对其方式 40 | image: inputIcon // 图形 41 | } 42 | } 43 | ] 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-mxgraph-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://lanniu.github.io/vue-mxgraph-example", 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint", 10 | "docker_build": "docker build -t lanniu/vue-mxgraph-example .", 11 | "docker_delete_exist": "chmod +x ./docker_delete_container_by_name.sh && ./docker_delete_container_by_name.sh vue-mxgraph-example", 12 | "docker_deploy": "docker run -id -p 3221:80 --name vue-mxgraph-example lanniu/vue-mxgraph-example" 13 | }, 14 | "dependencies": { 15 | "@vue/cli": "^3.4.1", 16 | "Base64": "^1.1.0", 17 | "core-js": "^2.6.5", 18 | "element-ui": "^2.8.2", 19 | "mxgraph": "^4.0.6", 20 | "node-sass": "^4.13.0", 21 | "ramda": "^0.26.1", 22 | "rxjs": "^6.5.3", 23 | "vue": "^2.6.6", 24 | "vue-router": "^3.0.1", 25 | "vuex": "^3.0.1" 26 | }, 27 | "devDependencies": { 28 | "@vue/cli-plugin-babel": "^3.4.0", 29 | "@vue/cli-plugin-eslint": "^3.4.0", 30 | "@vue/cli-service": "^3.4.0", 31 | "sass-loader": "^8.0.0", 32 | "script-loader": "^0.7.2", 33 | "exports-loader": "^0.7.0", 34 | "babel-eslint": "^10.0.1", 35 | "eslint": "^5.8.0", 36 | "eslint-plugin-vue": "^5.0.0", 37 | "vue-template-compiler": "^2.5.21" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/graphEditor/pageFormat.js: -------------------------------------------------------------------------------- 1 | import { 2 | mxConstants as MxConstants, 3 | mxRectangle as MxRectangle 4 | } from 'mxgraph/javascript/mxClient' 5 | const PAGE_FORMATS = {} 6 | 7 | PAGE_FORMATS['a0'] = {name: 'a0', text: 'A0 (841 mm x 1189 mm)', format: new MxRectangle(0, 0, 4681, 3300)} 8 | PAGE_FORMATS['a1'] = {name: 'a1', text: 'A1 (594 mm x 841 mm)', format: new MxRectangle(0, 0, 3300, 2339)} 9 | PAGE_FORMATS['a2'] = {name: 'a2', text: 'A2 (420 mm x 594 mm)', format: new MxRectangle(0, 0, 2336, 1654)} 10 | PAGE_FORMATS['a3'] = {name: 'a3', text: 'A3 (297 mm x 420 mm)', format: new MxRectangle(0, 0, 1682, 1192)} 11 | PAGE_FORMATS['a4'] = { 12 | name: 'a4', 13 | text: 'A4 (210 mm x 297 mm)', 14 | format: new MxRectangle(0, 0, 1189, 841), 15 | scaleWidth: 1125.737 16 | } 17 | 18 | PAGE_FORMATS['a5'] = {name: 'a5', text: 'A5 (148 mm x 210 mm)', format: new MxRectangle(0, 0, 827, 583)} 19 | PAGE_FORMATS['a6'] = {name: 'a6', text: 'A6 (105 mm x 148 mm)', format: new MxRectangle(0, 0, 583, 413)} 20 | PAGE_FORMATS['a7'] = {name: 'a7', text: 'A7 (74 mm x 105 mm)', format: new MxRectangle(0, 0, 413, 291)} 21 | PAGE_FORMATS['letter'] = { 22 | name: 'letter', 23 | text: 'US-Letter (8,5" x 11")', 24 | format: new MxRectangle(0, 0, MxConstants.PAGE_FORMAT_LETTER_PORTRAIT.height, MxConstants.PAGE_FORMAT_LETTER_PORTRAIT.width) 25 | } 26 | PAGE_FORMATS['legal'] = {name: 'legal', text: 'US-Legal (8,5" x 14")', format: new MxRectangle(0, 0, 1400, 850)} 27 | PAGE_FORMATS['tabloid'] = { 28 | name: 'tabloid', 29 | text: 'US-Tabloid (279 mm x 432 mm)', 30 | format: new MxRectangle(0, 0, 1700, 1100) 31 | } 32 | 33 | export {PAGE_FORMATS} 34 | -------------------------------------------------------------------------------- /README-zh_CN.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | vue mxGraph example 7 |

8 | 9 | ![image](http://picture.lanniu.top/gitTool.gif) 10 | 11 | [English](./README.md) | 简体中文 12 | 13 | ## 特性 14 | 15 | * 提供vue下mxGraph的示例程序，帮你快速上手。 16 | * 现在只有几个简单的小例子，如果想看mxGraph什么Demo可以给我提issue，或者直接通过下面的方式联系我。 17 | 18 | ## 已完成的 Demo 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
联级删除在线查看
工具箱在线查看
自定义工具箱在线查看设计说明
模板工具箱在线查看
HTML标签在线查看
连线样式在线查看
自定义连接点在线查看
手动绘图在线查看
组编辑在线查看
67 | 68 | ## 联系方式 69 | * 微信： **lanniu770314** 70 | * 邮箱： **271067929@qq.com** 71 | -------------------------------------------------------------------------------- /src/views/layout/sidebar/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 41 | 42 | 80 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | vue mxGraph example 7 |

8 | 9 | ![image](http://picture.lanniu.top/gitTool.gif) 10 | 11 | English | [简体中文](./README-zh_CN.md) 12 | 13 | ## Features 14 | * Provide mxGraph sample programs under vue to help you get started quickly. 15 | * Now only a few simple small example, if want to see what mxGraph Demo can give me issue, or contact me through the following ways. 16 | 17 | ## Demo List 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
CascadeDeleteView Online
ToolbarView Online
CustomToolbarView OnlineDesign Notes
StencilToolbarView Online
HtmlLabelView Online
EdgeStyleView Online
CustomConnectionConstraintsView Online
ManualDrawingView Online
GroupEditorView Online
66 | 67 | ## Contact 68 | * weChat： **lanniu770314** 69 | * email： **271067929@qq.com** 70 | -------------------------------------------------------------------------------- /src/views/example/groupEditor/toolbarItems.js: -------------------------------------------------------------------------------- 1 | const closeIcon = require('@/assets/icon/delete.png') 2 | 3 | export const toolItems = [ 4 | { 5 | title: '子元素', // 显示名称 6 | width: 130, // 默认宽度 7 | height: 50, // 默认高度 8 | dropAble: false, // 是否可以作为drop的对象 9 | constraints: [ // 连接点 10 | {x: 0, y: 0.5}, 11 | {x: 1, y: 0.5}, 12 | {x: 0.5, y: 0}, 13 | {x: 0.5, y: 1} 14 | ], 15 | style: { // 样式 16 | html: '1', 17 | fillColor: '#3c6379', 18 | strokeColor: '#53859F', 19 | fontColor: '#000000', 20 | resizable: '0', 21 | overflow: 'fill' 22 | }, 23 | created(graph, cell, index) { 24 | const deleteIconDom = document.querySelector(`.deleteIcon_${index}`) 25 | 26 | if (deleteIconDom) { 27 | deleteIconDom.addEventListener('click', () => { 28 | graph.removeCells([cell]) 29 | }) 30 | } 31 | }, 32 | html: (index) => ` 33 |
34 | 子元素 35 | 36 |
37 | `.replace(/[\r\n]/g, '') 38 | }, { 39 | title: '容器', 40 | width: 200, 41 | height: 200, 42 | dropAble: true, 43 | style: { 44 | overflow: 'fill', 45 | shape: 'swimlane', 46 | html: '1', 47 | swimlaneFillColor: '#B1EEEE', 48 | fillColor: '#3c6379', 49 | strokeColor: '#629EA0', 50 | fontColor: '#000000' 51 | }, 52 | created(graph, cell, index) { 53 | const deleteIconDom = document.querySelector(`.deleteIcon_${index}`) 54 | 55 | if (deleteIconDom) { 56 | deleteIconDom.addEventListener('click', () => { 57 | graph.removeCells([cell]) 58 | }) 59 | } 60 | }, 61 | html: (index) => ` 62 |
63 | 容器 64 | 65 |
66 | `.replace(/[\r\n]/g, '') 67 | } 68 | ] 69 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export const demoRouter = [ 7 | { 8 | path: 'welcome', 9 | name: 'welcome', 10 | meta: { 11 | title: '欢迎页', 12 | icon: require('@/assets/icon/home.png') 13 | }, 14 | component: () => import('@/views/example/welcome') 15 | }, 16 | { 17 | path: 'cascadeDelete', 18 | name: 'cascadeDelete', 19 | meta: { 20 | title: '联级删除', 21 | icon: require('@/assets/icon/delete.png') 22 | }, 23 | component: () => import('@/views/example/cascadeDelete') 24 | }, 25 | { 26 | path: 'toolbar', 27 | name: 'toolbar', 28 | meta: { 29 | title: '工具箱', 30 | icon: require('@/assets/icon/toolbar.png') 31 | }, 32 | component: () => import('@/views/example/toolbar') 33 | }, 34 | { 35 | path: 'customToolbar', 36 | name: 'customToolbar', 37 | meta: { 38 | title: '自定义工具箱', 39 | icon: require('@/assets/icon/toolbar2.png') 40 | }, 41 | component: () => import('@/views/example/customToolbar') 42 | }, 43 | { 44 | path: 'stencilToolbar', 45 | name: 'stencilToolbar', 46 | meta: { 47 | title: '模板工具箱', 48 | icon: require('@/assets/icon/stencil.png') 49 | }, 50 | component: () => import('@/views/example/stencilToolbar') 51 | }, 52 | { 53 | path: 'htmlLabel', 54 | name: 'htmlLabel', 55 | meta: { 56 | title: 'HTML标签', 57 | icon: require('@/assets/icon/label.png') 58 | }, 59 | component: () => import('@/views/example/htmlLabel') 60 | }, 61 | { 62 | path: 'edgeStyle', 63 | name: 'edgeStyle', 64 | meta: { 65 | title: '连线样式', 66 | icon: require('@/assets/icon/line.png') 67 | }, 68 | component: () => import('@/views/example/edgeStyle') 69 | }, 70 | { 71 | path: 'customConnectionConstraints', 72 | name: 'customConnectionConstraints', 73 | meta: { 74 | title: '自定义连接点', 75 | icon: require('@/assets/icon/connectPoint.png') 76 | }, 77 | component: () => import('@/views/example/customConnectionConstraints') 78 | }, 79 | { 80 | path: 'manualDrawing', 81 | name: 'manualDrawing', 82 | meta: { 83 | title: '手动绘图', 84 | icon: require('@/assets/icon/handler.png') 85 | }, 86 | component: () => import('@/views/example/manualDrawing') 87 | }, 88 | { 89 | path: 'graphEditor', 90 | name: 'graphEditor', 91 | meta: { 92 | title: '简易编辑器', 93 | icon: require('@/assets/icon/editor.png') 94 | }, 95 | component: () => import('@/views/example/graphEditor') 96 | }, 97 | { 98 | path: 'groupEditor', 99 | name: 'groupEditor', 100 | meta: { 101 | title: '组编辑', 102 | icon: require('@/assets/icon/group.png') 103 | }, 104 | component: () => import('@/views/example/groupEditor') 105 | } 106 | ] 107 | 108 | export const globalRouter = [ 109 | { 110 | path: '/', 111 | name: 'home', 112 | redirect: '/welcome', 113 | component: () => import('@/views/layout'), 114 | children: [ 115 | ...demoRouter 116 | ] 117 | }, 118 | ] 119 | 120 | export default new Router({ 121 | routes: [...globalRouter] 122 | }) 123 | -------------------------------------------------------------------------------- /src/views/example/customConnectionConstraints/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 93 | 94 | 106 | -------------------------------------------------------------------------------- /src/views/example/toolbar/index.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 109 | -------------------------------------------------------------------------------- /src/views/example/manualDrawing/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 108 | 109 | 129 | -------------------------------------------------------------------------------- /src/views/example/customToolbar/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 104 | 105 | 146 | -------------------------------------------------------------------------------- /src/components/graphEditor/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 137 | 138 | 148 | -------------------------------------------------------------------------------- /src/views/layout/navbar/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 114 | 115 | 173 | -------------------------------------------------------------------------------- /src/views/example/htmlLabel/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 97 | 98 | 154 | -------------------------------------------------------------------------------- /src/style/mxgraph.css: -------------------------------------------------------------------------------- 1 | div.mxRubberband { 2 | position: absolute; 3 | overflow: hidden; 4 | border-style: solid; 5 | border-width: 1px; 6 | border-color: #0000FF; 7 | background: #0cddff; 8 | } 9 | 10 | .mxCellEditor { 11 | background: url(data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7); 12 | _background: url('../../public/mxgraph/transparent.gif'); 13 | border-color: transparent; 14 | border-style: solid; 15 | display: inline-block; 16 | position: absolute; 17 | overflow: visible; 18 | word-wrap: normal; 19 | border-width: 0; 20 | min-width: 1px; 21 | resize: none; 22 | padding: 0; 23 | margin: 0; 24 | } 25 | 26 | .mxPlainTextEditor * { 27 | padding: 0; 28 | margin: 0; 29 | } 30 | 31 | div.mxWindow { 32 | -webkit-box-shadow: 3px 3px 12px #C0C0C0; 33 | -moz-box-shadow: 3px 3px 12px #C0C0C0; 34 | box-shadow: 3px 3px 12px #C0C0C0; 35 | background: url('../../public/mxgraph/window.gif'); 36 | border: 1px solid #c3c3c3; 37 | position: absolute; 38 | overflow: hidden; 39 | z-index: 1; 40 | } 41 | 42 | table.mxWindow { 43 | border-collapse: collapse; 44 | table-layout: fixed; 45 | font-family: Arial; 46 | font-size: 8pt; 47 | } 48 | 49 | td.mxWindowTitle { 50 | background: url('../../public/mxgraph/window-title.gif') repeat-x; 51 | text-overflow: ellipsis; 52 | white-space: nowrap; 53 | text-align: center; 54 | font-weight: bold; 55 | overflow: hidden; 56 | height: 13px; 57 | padding: 2px; 58 | padding-top: 4px; 59 | padding-bottom: 6px; 60 | color: black; 61 | } 62 | 63 | td.mxWindowPane { 64 | vertical-align: top; 65 | padding: 0; 66 | } 67 | 68 | div.mxWindowPane { 69 | overflow: hidden; 70 | position: relative; 71 | } 72 | 73 | td.mxWindowPane td { 74 | font-family: Arial; 75 | font-size: 8pt; 76 | } 77 | 78 | td.mxWindowPane input, td.mxWindowPane select, td.mxWindowPane textarea, td.mxWindowPane radio { 79 | border-color: #8C8C8C; 80 | border-style: solid; 81 | border-width: 1px; 82 | font-family: Arial; 83 | font-size: 8pt; 84 | padding: 1px; 85 | } 86 | 87 | td.mxWindowPane button { 88 | background: url('../../public/mxgraph/button.gif') repeat-x; 89 | font-family: Arial; 90 | font-size: 8pt; 91 | padding: 2px; 92 | float: left; 93 | } 94 | 95 | img.mxToolbarItem { 96 | margin-right: 6px; 97 | margin-bottom: 6px; 98 | border-width: 1px; 99 | } 100 | 101 | select.mxToolbarCombo { 102 | vertical-align: top; 103 | border-style: inset; 104 | border-width: 2px; 105 | } 106 | 107 | div.mxToolbarComboContainer { 108 | padding: 2px; 109 | } 110 | 111 | img.mxToolbarMode { 112 | margin: 2px; 113 | margin-right: 4px; 114 | margin-bottom: 4px; 115 | border-width: 0; 116 | } 117 | 118 | img.mxToolbarModeSelected { 119 | margin: 0; 120 | margin-right: 2px; 121 | margin-bottom: 2px; 122 | border-width: 2px; 123 | border-style: inset; 124 | } 125 | 126 | div.mxTooltip { 127 | -webkit-box-shadow: 3px 3px 12px #C0C0C0; 128 | -moz-box-shadow: 3px 3px 12px #C0C0C0; 129 | box-shadow: 3px 3px 12px #C0C0C0; 130 | background: #FFFFCC; 131 | border-style: solid; 132 | border-width: 1px; 133 | border-color: black; 134 | font-family: Arial; 135 | font-size: 8pt; 136 | position: absolute; 137 | cursor: default; 138 | padding: 4px; 139 | color: black; 140 | } 141 | 142 | body div.mxPopupMenu { 143 | -webkit-box-shadow: 3px 3px 6px #C0C0C0; 144 | -moz-box-shadow: 3px 3px 6px #C0C0C0; 145 | box-shadow: 3px 3px 6px #C0C0C0; 146 | background: white; 147 | position: absolute; 148 | border: 3px solid #e7e7e7; 149 | padding: 3px; 150 | } 151 | 152 | body table.mxPopupMenu { 153 | border-collapse: collapse; 154 | margin: 0; 155 | } 156 | 157 | body tr.mxPopupMenuItem { 158 | color: black; 159 | cursor: default; 160 | } 161 | 162 | body td.mxPopupMenuItem { 163 | padding: 3px 30px 3px 10px; 164 | font-family: Arial; 165 | font-size: 10pt; 166 | } 167 | 168 | body td.mxPopupMenuIcon { 169 | background-color: white; 170 | padding: 0; 171 | } 172 | 173 | body tr.mxPopupMenuItemHover { 174 | background-color: #eeeeee; 175 | color: black; 176 | } 177 | 178 | table.mxPopupMenu hr { 179 | border-top: solid 1px #cccccc; 180 | } 181 | 182 | table.mxPopupMenu tr { 183 | font-size: 4pt; 184 | } 185 | 186 | .mxDisabled { 187 | opacity: 0.2 !important; 188 | cursor: default !important; 189 | } 190 | 191 | div.mxTooltip { 192 | filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=4, OffY=4, 193 | Color='#A2A2A2', Positive='true'); 194 | } 195 | 196 | div.mxPopupMenu { 197 | filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=4, OffY=4, 198 | Color='#C0C0C0', Positive='true'); 199 | } 200 | 201 | div.mxWindow { 202 | _filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=4, OffY=4, 203 | Color='#C0C0C0', Positive='true'); 204 | } 205 | 206 | td.mxWindowTitle { 207 | _height: 23px; 208 | } 209 | 210 | .mxDisabled { 211 | filter: alpha(opacity=20) !important; 212 | } 213 | -------------------------------------------------------------------------------- /src/views/example/groupEditor/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 149 | 150 | 174 | -------------------------------------------------------------------------------- /src/views/example/cascadeDelete/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 177 | 178 | 190 | -------------------------------------------------------------------------------- /src/views/example/stencilToolbar/index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 209 | 210 | 232 | -------------------------------------------------------------------------------- /doc/customToolbar_design_zh_cn.md: -------------------------------------------------------------------------------- 1 | [English](./customToolbar_design_en_us.md) | 简体中文 2 | 3 | ## 概述 4 | 本篇的内容是围绕如何使用 **vue** 和 **mxGraph** 实现一个自定义的工具箱。 5 | 6 | 主要完成以下功能： 7 | - 自定义工具箱的内容。 8 | - 从工具箱中拖拽一个工具项到绘画区并生成对应的cell。 9 | - 双击生成的cell可以查看cell的数据。 10 | 11 | 本例可以在 [github](https://github.com/lanniu/vue-mxgraph-example) 上看到源码。 12 | 13 | ## 基本布局 14 | ![image](http://picture.lanniu.top/20200107090258.png) 15 | 16 | 我们设想的基本布局如上图所示，整个界面分为左右两部分，左侧为工具箱，右侧为我们的绘图区。 17 | 18 | 由于样式不是我们此次的重点，所以我们将以列表的形式展示工具项，当然你也可以使用一些第三方组件库如 [element-ui](https://element.eleme.cn/)、[ant design vue](https://www.antdv.com/docs/vue)、[vuetify](https://vuetifyjs.com/) 等来实现一些很酷炫的展示效果。 19 | 20 | ## 定义模型 21 | 首先我们需要定义工具箱的数据结构： 22 | ``` 23 | [ 24 | { 25 | icon: String || Object, // 工具项图标的路径或对象 26 | title: String, // 工具项的名称 27 | width: Number, // 工具项的默认宽度 28 | height: Number, // 工具项的默认高度 29 | style: { 30 | ... // 工具项生成的 cell 样式 31 | } 32 | } 33 | ] 34 | ``` 35 | 36 | 可以看出来工具箱是一个数组，其中存放了多个工具项对象，每个工具项中包含了多个属性。 37 | 38 | 需要注意的是 **style** 这个属性，这个属性里包含的信息是用于描述此工具项在拖拽后生成的 cell 的样式，取值范围请参考[官方api](https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxConstants-js.html#mxConstants)。 39 | 40 | 了解了数据结构后，我们开始定义具体的数据： 41 | 42 | ``` 43 | const outputIcon = './icon/output.png' 44 | const inputIcon = './icon/input.png' 45 | 46 | export const toolbarItems = [ 47 | { 48 | icon: outputIcon, 49 | title: '输出', 50 | width: 50, 51 | height: 50, 52 | style: { 53 | fillColor: 'transparent', 54 | strokeColor: '#000000', 55 | strokeWidth: '1', 56 | shape: MxConstants.SHAPE_LABEL, 57 | align: MxConstants.ALIGN_CENTER, 58 | verticalAlign: MxConstants.ALIGN_BOTTOM, 59 | imageAlign: MxConstants.ALIGN_CENTER, 60 | imageVerticalAlign: MxConstants.ALIGN_TOP, 61 | image: outputIcon 62 | } 63 | }, 64 | { 65 | icon: inputIcon, 66 | title: '输入', 67 | width: 50, 68 | height: 50, 69 | style: { 70 | fillColor: 'transparent', // 填充色 71 | strokeColor: '#000000', // 线条颜色 72 | strokeWidth: '1', // 线条粗细 73 | shape: MxConstants.SHAPE_LABEL, // 形状 74 | align: MxConstants.ALIGN_CENTER, // 水平方向对齐方式 75 | verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对齐方式 76 | imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对齐方式 77 | imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形垂直方向对齐方式 78 | image: inputIcon // 图形 79 | } 80 | } 81 | ] 82 | ``` 83 | (本例中所有的图片都放在 public 目录下) 84 | 85 | 为了方便维护我们把以上内容放到 toolbar.js 文件中。然后在 vue 组件中导入，并保存为一个名为 toolbarItems 的计算属性。 86 | 87 | ``` 88 | import {toolbarItems} from './customToolbar/toolbar' 89 | 90 | export default { 91 | computed: { 92 | toolbarItems: () => toolbarItems 93 | } 94 | } 95 | ``` 96 | 97 | ## 编写模板 98 | 99 | 定义好数据后，我们开始编写模板代码。 100 | 101 | 首先我们需要一个大的容器，用于存放工具箱和画布。 102 | ``` 103 |
104 |
105 | ``` 106 | 接着我们加上工具箱代码： 107 | ``` 108 |
109 |
110 | 116 |
117 |
118 | ``` 119 | 然后我们加上工具箱的代码： 120 | ``` 121 |
122 |
123 | 129 |
130 |
131 |
132 | ``` 133 | 最后我们还需要一点 css（我使用了scss）： 134 | ``` 135 | .customToolbarContainer { 136 | width: 100%; 137 | height: 100%; 138 | display: flex; 139 | position: relative; 140 | 141 | .toolbarContainer { 142 | flex: 1; 143 | font-size: 20px; 144 | background: #efefef; 145 | text-align: center; 146 | padding-top: 20px; 147 | 148 | ul { 149 | padding: 0; 150 | margin: 0; 151 | 152 | li { 153 | list-style: none; 154 | margin-bottom: 10px; 155 | cursor: pointer; 156 | 157 | img { 158 | width: 15px; 159 | height: 15px; 160 | } 161 | 162 | span { 163 | margin-left: 15px; 164 | } 165 | } 166 | } 167 | } 168 | 169 | .graphContainer { 170 | position: relative; 171 | flex: 7; 172 | } 173 | } 174 | ``` 175 | 现在我们开打网页，应该可以看到如下的效果了： 176 | ![image](http://picture.lanniu.top/20200107100229.png) 177 | 178 | ## 编写业务代码 179 | 现在万事俱备，我们开始编写具体的代码。 180 | 181 | 首先我们需要在 vue 的 data 中声明一个 graph 对象，用于保存 mxGraph 实例。 182 | ``` 183 | data(){ 184 | return { 185 | graph: null 186 | } 187 | } 188 | ``` 189 | 首先定义一个 **createGraph** 方法用于生成mxGraph对象： 190 | ``` 191 | createGraph() { 192 | this.graph = new MxGraph(this.$refs.container) 193 | } 194 | ``` 195 | 接着我们定义一个 **initGraph** 方法用于初始化一些属性和事件： 196 | ``` 197 | initGraph() { 198 | if (this.R.isNil(this.graph)) { 199 | return 200 | } 201 | this.graph.setConnectable(true) // 允许连线 202 | this.graph.setCellsEditable(false) // 不可修改 203 | this.graph.convertValueToString = (cell) => { // 根据cell生成显示的标签 204 | return this.R.prop('title', cell) 205 | } 206 | this.graph.addListener(MxEvent.DOUBLE_CLICK, (graph, evt) => { // 监听双击事件 207 | const cell = this.R.pathOr([], ['properties', 'cell'], evt) 208 | 209 | console.info(cell) // 在控制台输出双击的cell 210 | }) 211 | } 212 | ``` 213 | 上面的代码中，用到了几个 graph 实例的方法，下面一一介绍一下： 214 | - [setConnectable](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.setConnectable) 设置是否允许新建连线。 215 | - [setCellsEditable](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.setCellsEditable) 设置是否允许直接双击修改 cell 的标签。 216 | - [convertValueToString](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.convertValueToString) 这是一个函数，接收一个 cell，并返回该 cell 用于显示的 label，这里是复写了默认的方法。 217 | - [addListener](https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent.addListener) 为 graph 添加一个双击的监听事件。 218 | 219 | 然后我们定义一个方法 **addCell** 用于向画布中添加 cell： 220 | ``` 221 | addCell(toolItem, x, y) { 222 | const {width, height} = toolItem 223 | const styleObj = toolItem['style'] 224 | const style = Object.keys(styleObj).map((attr) => `${attr}=${styleObj[attr]}`).join(';') 225 | const parent = this.graph.getDefaultParent() 226 | 227 | this.graph.getModel().beginUpdate() 228 | try { 229 | let vertex = this.graph.insertVertex(parent, null, null, x, y, width, height, style) 230 | 231 | vertex.title = toolItem['title'] 232 | } finally { 233 | this.graph.getModel().endUpdate() 234 | } 235 | } 236 | ``` 237 | **addCell** 接收三个参数，分别为：工具项对象，X轴坐标，y轴坐标。 238 | 239 | 方法中分别执行了如下的步骤： 240 | - 获取了cell默认的宽高信息。 241 | - 把style拼接为“xxx=xxx;xxx=xxx;”的形式。 242 | - 调用 model 的 beginUpdate 方法开始一个事务。 243 | - 调用 [insertVertex](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.insertVertex) 方法，添加一个 cell。 244 | - 调用 model 的 endUpdate 方法结束一个事务。 245 | 246 | 接着就是实现工具箱的核心代码，我们新建一个叫 **initToolbar** 的方法： 247 | ``` 248 | initToolbar() { 249 | const domArray = this.$refs.toolItem 250 | 251 | if (!(domArray instanceof Array) || domArray.length <= 0) { 252 | return 253 | } 254 | domArray.forEach((dom, domIndex) => { 255 | const toolItem = this.toolbarItems[domIndex] 256 | const {width, height} = toolItem 257 | 258 | const dropHandler = (graph, evt, cell, x, y) => { 259 | this.addCell(toolItem, x, y) 260 | } 261 | const createDragPreview = () => { 262 | const elt = document.createElement('div') 263 | 264 | elt.style.border = '2px dotted black' 265 | elt.style.width = `${width}px` 266 | elt.style.height = `${height}px` 267 | return elt 268 | } 269 | 270 | MxUtils.makeDraggable(dom, this.graph, dropHandler, createDragPreview(), 0, 0, false, true) 271 | }) 272 | } 273 | ``` 274 | 方法的目的是让工具项可以被拖拽，且在放手时会触发自定义的回调事件。方法中分别执行了如下的步骤： 275 | 1. 获取所有的工具项 dom。 276 | 2. 遍历所有的 dom。 277 | 1. 获取 dom 对应的工具项对象。 278 | 2. 获取工具项的默认宽高。 279 | 3. 定义 drop 的回调函数，在函数中执行 **addCell** 方法。 280 | 4. 定义生成预览的方法，该方法返回一个 div，作为预览的图形。 281 | 5. 调用[makeDraggable](https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxUtils-js.html#mxUtils.makeDraggable)方法。 282 | 283 | 需要注意的是 **makeDraggable** 方法，makeDraggable 接收多个参数，我们现在需要在意的是前四个： 284 | 1. dom 需要允许被拖拽的 dom 元素。 285 | 2. graph 绑定的 graph 对象。 286 | 3. dropHandler drop 时的回调函数。 287 | 4. preview 拖拽时的预览图形。 288 | 289 | 最后让我们在 mounted 生命周期函数中添加如下代码： 290 | ``` 291 | mounted() { 292 | this.createGraph() 293 | this.initGraph() 294 | this.initToolbar() 295 | this.$refs.container.style.background = 'url("./mxgraph/images/grid.gif")' 296 | } 297 | ``` 298 | 299 | 我们打开网页可以看到如下的效果： 300 | ![](http://picture.lanniu.top/20200107111924.png) 301 | 双击cell时，可以在控制台看到输出的信息： 302 | ![](http://picture.lanniu.top/20200107112010.png) 303 | 304 | 我们在实际的项目中可以对这个 Demo 进行一些扩充，比如在 addCell 时可以针对不同的工具项实例化得到不同的对象，并保存在 cell 的 value 属性中，双击 cell 时可以在弹出的对话框中修改 value 的属性值。 305 | 306 | 至此。 307 | -------------------------------------------------------------------------------- /src/views/example/edgeStyle/index.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 259 | 260 | 318 | 319 | -------------------------------------------------------------------------------- /src/components/graphEditor/graphUtility.js: -------------------------------------------------------------------------------- 1 | import * as R from 'ramda' 2 | import base64Coder from 'Base64' 3 | import { 4 | mxConstants as MxConstants, 5 | mxEvent as MxEvent, 6 | mxGraph as MxGraph, 7 | mxGraphView as MxGraphView, 8 | mxMouseEvent as MxMouseEvent, 9 | mxRectangle as MxRectangle, 10 | mxUtils as MxUtils, 11 | mxPoint as MxPoint 12 | } from 'mxgraph/javascript/mxClient' 13 | 14 | export function resetScrollbars(vueItem) { 15 | let pad = getPagePadding(vueItem) 16 | let bounds = vueItem.graph.getGraphBounds() 17 | 18 | vueItem.graph.container.scrollTop = Math.floor(pad.y) - 1 19 | vueItem.graph.container.scrollLeft = Math.floor(Math.min(pad.x, (vueItem.graph.container.scrollWidth - vueItem.graph.container.clientWidth) / 2)) - 1 20 | 21 | if (bounds.width > 0 && bounds.height > 0) { 22 | if (bounds.x > vueItem.graph.container.scrollLeft + vueItem.graph.container.clientWidth * 0.9) { 23 | vueItem.graph.container.scrollLeft = Math.min(bounds.x + bounds.width - vueItem.graph.container.clientWidth, bounds.x - 10) 24 | } 25 | if (bounds.y > vueItem.graph.container.scrollTop + vueItem.graph.container.clientHeight * 0.9) { 26 | vueItem.graph.container.scrollTop = Math.min(bounds.y + bounds.height - vueItem.graph.container.clientHeight, bounds.y - 10) 27 | } 28 | } 29 | } 30 | 31 | export function getPageSize(vueItem) { 32 | return new MxRectangle(0, 0, vueItem.graph.pageFormat.width * vueItem.graph.view.scale, vueItem.graph.pageFormat.height * vueItem.graph.view.scale) 33 | } 34 | 35 | export function getPagePadding(vueItem) { 36 | return new MxPoint(Math.max(0, Math.round((vueItem.graph.container.offsetWidth - 34) / vueItem.graph.view.scale)), 37 | Math.max(0, Math.round((vueItem.graph.container.offsetHeight - 34) / vueItem.graph.view.scale))) 38 | } 39 | 40 | export function getPageLayout(vueItem) { 41 | let size = getPageSize(vueItem) 42 | let bounds = vueItem.graph.getGraphBounds() 43 | 44 | if (R.equals(bounds.width, 0) || R.equals(bounds.height, 0)) { 45 | return new MxRectangle(0, 0, 1, 1) 46 | } 47 | let x = Math.ceil(bounds.x / vueItem.graph.view.scale - vueItem.graph.view.translate.x) 48 | let y = Math.ceil(bounds.y / vueItem.graph.view.scale - vueItem.graph.view.translate.y) 49 | let w = Math.floor(bounds.width / vueItem.graph.view.scale) 50 | let h = Math.floor(bounds.height / vueItem.graph.view.scale) 51 | let x0 = Math.floor(x / size.width) 52 | let y0 = Math.floor(y / size.height) 53 | let w0 = Math.ceil((x + w) / size.width) - x0 54 | let h0 = Math.ceil((y + h) / size.height) - y0 55 | 56 | return new MxRectangle(x0, y0, w0, h0) 57 | } 58 | 59 | export function lazyZoom(vueItem, zoomIn) { 60 | if (vueItem.updateZoomTimeout !== null) { 61 | window.clearTimeout(vueItem.updateZoomTimeout) 62 | } 63 | const zoomFactor = vueItem.graph.zoomFactor 64 | const scale = vueItem.graph.view.scale 65 | 66 | let cumulativeZoomFactor = 1 67 | 68 | if (zoomIn) { 69 | if (scale * cumulativeZoomFactor < 0.15) { 70 | cumulativeZoomFactor = (scale + 0.01) / scale 71 | } else { 72 | cumulativeZoomFactor *= zoomFactor 73 | cumulativeZoomFactor = Math.round(scale * cumulativeZoomFactor * 20) / 20 / scale 74 | } 75 | } else { 76 | if (scale * cumulativeZoomFactor <= 0.15) { 77 | cumulativeZoomFactor = (scale - 0.01) / scale 78 | } else { 79 | cumulativeZoomFactor /= zoomFactor 80 | cumulativeZoomFactor = Math.round(scale * cumulativeZoomFactor * 20) / 20 / scale 81 | } 82 | } 83 | cumulativeZoomFactor = Math.max(0.01, Math.min(scale * cumulativeZoomFactor, 160) / scale) 84 | vueItem.updateZoomTimeout = window.setTimeout(() => { 85 | const offset = MxUtils.getOffset(vueItem.graph.container) 86 | let dx = 0 87 | let dy = 0 88 | 89 | if (vueItem.cursorPosition !== null) { 90 | dx = vueItem.graph.container.offsetWidth / 2 - vueItem.cursorPosition.x + offset.x 91 | dy = vueItem.graph.container.offsetHeight / 2 - vueItem.cursorPosition.y + offset.y 92 | } 93 | const prev = vueItem.graph.view.scale 94 | 95 | vueItem.graph.zoom(cumulativeZoomFactor) 96 | const s = vueItem.graph.view.scale 97 | if (s !== prev) { 98 | if (MxUtils.hasScrollbars(vueItem.graph.container) && (dx !== 0 || dy !== 0)) { 99 | vueItem.graph.container.scrollLeft -= dx * (cumulativeZoomFactor - 1) 100 | vueItem.graph.container.scrollTop -= dy * (cumulativeZoomFactor - 1) 101 | } 102 | } 103 | vueItem.updateZoomTimeout = null 104 | }, 10) 105 | } 106 | 107 | function createSvgGrid(vue, graphConfig) { 108 | vue.graph.view.createSvgGrid = function (color) { 109 | let tmpGridSize = this.graph.gridSize * this.scale 110 | 111 | while (tmpGridSize < graphConfig.minGridSize) { 112 | tmpGridSize *= 2 113 | } 114 | const tmpGridStep = graphConfig.gridSteps * tmpGridSize 115 | const size = tmpGridStep 116 | const d = R.map((index) => { 117 | const size = index * tmpGridSize 118 | 119 | return `M 0 ${size} L ${tmpGridStep} ${size} M ${size} 0 L ${size} ${tmpGridStep}` 120 | }, R.range(1, graphConfig.gridSteps)) 121 | 122 | return ` 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | ` 131 | } 132 | } 133 | 134 | 135 | function validateBackgroundStyles(vueItem, graphConfig) { 136 | vueItem.graph.view.validateBackgroundStyles = function () { 137 | let image = 'none' 138 | let position = '' 139 | if (this.graph.isGridEnabled()) { 140 | image = unescape(encodeURIComponent(this.createSvgGrid(graphConfig.gridColor))) 141 | image = base64Coder.btoa(image, true) 142 | image = `url(data:image/svg+xml;base64,${image})` 143 | let phase = this.graph.gridSize * this.scale * graphConfig.gridSteps 144 | let x0 = 0 145 | let y0 = 0 146 | 147 | if (!R.isNil(this.backgroundPageShape)) { 148 | let bds = this.getBackgroundPageBounds() 149 | 150 | x0 = 1 + bds.x 151 | y0 = 1 + bds.y 152 | } 153 | position = -Math.round(phase - MxUtils.mod(this.translate.x * this.scale - x0, phase)) + 'px ' + 154 | -Math.round(phase - MxUtils.mod(this.translate.y * this.scale - y0, phase)) + 'px' 155 | } 156 | let canvas = this.canvas 157 | 158 | if (!R.isNil(canvas.ownerSVGElement)) { 159 | canvas = canvas.ownerSVGElement 160 | } 161 | let tmpGridBackgroundColor = graphConfig.gridBackgroundEnabled ? graphConfig.gridBackgroundColor : '#FFF' 162 | 163 | if (!R.isNil(this.backgroundPageShape)) { 164 | this.backgroundPageShape.node.style.backgroundRepeat = 'repeat' 165 | this.backgroundPageShape.node.style.backgroundPosition = position 166 | this.backgroundPageShape.node.style.backgroundImage = image 167 | this.backgroundPageShape.node.style.backgroundColor = tmpGridBackgroundColor 168 | this.backgroundPageShape.node.style.border = '1px solid white' 169 | this.backgroundPageShape.node.style.boxShadow = '2px 2px 1px #E6E6E6' 170 | canvas.style.backgroundImage = 'none' 171 | canvas.style.backgroundColor = '' 172 | } else { 173 | canvas.style.backgroundPosition = position 174 | canvas.style.backgroundColor = tmpGridBackgroundColor 175 | canvas.style.backgroundImage = image 176 | } 177 | } 178 | } 179 | 180 | function validateBackgroundPage(vueItem) { 181 | vueItem.graph.view.validateBackgroundPage = function () { 182 | if (!R.isNil(this.graph.container)) { 183 | let bounds = this.getBackgroundPageBounds() 184 | 185 | if (R.isNil(this.backgroundPageShape)) { 186 | let firstChild = this.graph.container.querySelector('svg') 187 | 188 | if (firstChild !== null) { 189 | this.backgroundPageShape = this.createBackgroundPageShape(bounds) 190 | this.backgroundPageShape.scale = 1 191 | this.backgroundPageShape.dialect = MxConstants.DIALECT_STRICTHTML 192 | this.backgroundPageShape.init(this.graph.container) 193 | firstChild.style.position = 'absolute' 194 | this.graph.container.insertBefore(this.backgroundPageShape.node, firstChild) 195 | this.backgroundPageShape.redraw() 196 | this.backgroundPageShape.node.className = 'geBackgroundPage' 197 | 198 | MxEvent.addGestureListeners(this.backgroundPageShape.node, 199 | MxUtils.bind(this, (evt) => { 200 | this.graph.fireMouseEvent(MxEvent.MOUSE_DOWN, new MxMouseEvent(evt)) 201 | }), 202 | MxUtils.bind(this, (evt) => { 203 | this.graph.fireMouseEvent(MxEvent.MOUSE_UP, new MxMouseEvent(evt)) 204 | }) 205 | ) 206 | } 207 | } else { 208 | this.backgroundPageShape.scale = 1 209 | this.backgroundPageShape.bounds = bounds 210 | this.backgroundPageShape.redraw() 211 | } 212 | this.validateBackgroundStyles() 213 | } 214 | } 215 | } 216 | 217 | function getBackgroundPageBounds(vueItem) { 218 | vueItem.graph.view.getBackgroundPageBounds = function () { 219 | let layout = getPageLayout(vueItem) 220 | let page = getPageSize(vueItem) 221 | let scale = this.scale 222 | let translate = this.translate 223 | 224 | return new MxRectangle(scale * (translate.x + layout.x * page.width), 225 | scale * (translate.y + layout.y * page.height), 226 | scale * layout.width * page.width, 227 | scale * layout.height * page.height) 228 | } 229 | } 230 | 231 | function sizeDidChange(vueItem) { 232 | vueItem.graph.sizeDidChange = function () { 233 | if (this.container && MxUtils.hasScrollbars(this.container)) { 234 | let pages = getPageLayout(vueItem) 235 | let pad = getPagePadding(vueItem) 236 | let size = getPageSize(vueItem) 237 | let minW = Math.ceil(2 * pad.x + pages.width * size.width) 238 | let minH = Math.ceil(2 * pad.y + pages.height * size.height) 239 | let min = this.minimumGraphSize 240 | 241 | if (R.isNil(min) || !R.equals(min.width, minW) || !R.equals(min.height, minH)) { 242 | this.minimumGraphSize = new MxRectangle(0, 0, minW, minH) 243 | } 244 | let dx = pad.x - pages.x * size.width 245 | let dy = pad.y - pages.y * size.height 246 | 247 | if (!R.equals(this.view.translate.x, dx) || !R.equals(this.view.translate.y, dy)) { 248 | let tx = this.view.translate.x 249 | let ty = this.view.translate.y 250 | 251 | this.view.x0 = pages.x 252 | this.view.y0 = pages.y 253 | this.view.setTranslate(dx, dy) 254 | this.container.scrollLeft += Math.round((dx - tx) * this.view.scale) 255 | this.container.scrollTop += Math.round((dy - ty) * this.view.scale) 256 | return 257 | } 258 | MxGraph.prototype.sizeDidChange.apply(this, arguments) 259 | } 260 | } 261 | } 262 | 263 | function validate(vueItem) { 264 | vueItem.graph.view.validate = function () { 265 | if (this.graph.container && MxUtils.hasScrollbars(this.graph.container)) { 266 | const pad = getPagePadding(vueItem) 267 | const size = getPageSize(vueItem) 268 | 269 | this.translate.x = pad.x - (this.x0 || 0) * size.width 270 | this.translate.y = pad.y - (this.y0 || 0) * size.height 271 | } 272 | MxGraphView.prototype.validate.apply(this, arguments) 273 | } 274 | } 275 | 276 | const graphUtility = (vueItem) => { 277 | createSvgGrid(vueItem, vueItem.graphConfig) 278 | validateBackgroundStyles(vueItem, vueItem.graphConfig) 279 | validateBackgroundPage(vueItem) 280 | getBackgroundPageBounds(vueItem) 281 | sizeDidChange(vueItem) 282 | validate(vueItem) 283 | } 284 | 285 | export {graphUtility} 286 | -------------------------------------------------------------------------------- /doc/customToolbar_design_en_us.md: -------------------------------------------------------------------------------- 1 | English | [简体中文](./customToolbar_design_zh_cn.md) 2 | 3 | ## Overview 4 | This article is about how to use **vue** and **mxGraph** to implement a custom toolbox. 5 | 6 | Mainly complete the following functions： 7 | - Customize the contents of the toolbox. 8 | - Drag a tool item from the toolbox to the drawing area and generate the corresponding cell. 9 | - Double click the generated cell to view the cell data. 10 | 11 | This example can be seen on [github] (https://github.com/lanniu/vue-mxgraph-example). 12 | 13 | ## Basic layout 14 | ![image](http://picture.lanniu.top/20200107090258.png) 15 | 16 | The basic layout we envision is shown in the figure above. The entire interface is divided into two parts, the left is the toolbox, and the right is our drawing area. 17 | 18 | Since style is not our focus this time, we will show the tool items in a list. Of course you can also use some third-party component libraries such as [element-ui](https://element.eleme.cn/), [ant design vue](https://www.antdv.com/docs/vue), [vuetify](https://vuetifyjs.com/) to achieve some cool display effects. 19 | 20 | ## Defining the model 21 | 22 | First we need to define the data structure of the toolbox: 23 | 24 | ``` 25 | [ 26 | { 27 | icon: String || Object, // Path or object of the tool item icon 28 | title: String, // The name of the tool item 29 | width: Number, // Tool item default width 30 | height: Number, // Tool item default height 31 | style: { 32 | ... // Cell style generated by the tool item 33 | } 34 | } 35 | ] 36 | ``` 37 | 38 | It can be seen that the toolbox is an array, which stores multiple tool item objects, and each tool item contains multiple attributes. 39 | 40 | It should be noted that the **style** attribute. The information contained in this attribute is used to describe the style of the cell generated by this tool item after dragging. For the value range, please refer to [official api] (https: // jgraph .github.io / mxgraph / docs / js-api / files / util / mxConstants-js.html # mxConstants). 41 | 42 | After understanding the data structure, we began to define the specific data: 43 | 44 | ``` 45 | const outputIcon = './icon/output.png' 46 | const inputIcon = './icon/input.png' 47 | 48 | export const toolbarItems = [ 49 | { 50 | icon: outputIcon, 51 | title: '输出', 52 | width: 50, 53 | height: 50, 54 | style: { 55 | fillColor: 'transparent', 56 | strokeColor: '#000000', 57 | strokeWidth: '1', 58 | shape: MxConstants.SHAPE_LABEL, 59 | align: MxConstants.ALIGN_CENTER, 60 | verticalAlign: MxConstants.ALIGN_BOTTOM, 61 | imageAlign: MxConstants.ALIGN_CENTER, 62 | imageVerticalAlign: MxConstants.ALIGN_TOP, 63 | image: outputIcon 64 | } 65 | }, 66 | { 67 | icon: inputIcon, 68 | title: '输入', 69 | width: 50, 70 | height: 50, 71 | style: { 72 | fillColor: 'transparent', // fillColor 73 | strokeColor: '#000000', // strokeColor 74 | strokeWidth: '1', // strokeWidth 75 | shape: MxConstants.SHAPE_LABEL, // shape 76 | align: MxConstants.ALIGN_CENTER, // align 77 | verticalAlign: MxConstants.ALIGN_BOTTOM, // vertical align 78 | imageAlign: MxConstants.ALIGN_CENTER, // image align 79 | imageVerticalAlign: MxConstants.ALIGN_TOP, // image vertical align 80 | image: inputIcon // image 81 | } 82 | } 83 | ] 84 | ``` 85 | (All pictures in this example are placed in the /public directory) 86 | 87 | For the convenience of maintenance, we put the above content into the toolbar.js file. Then import it in the vue component and save it as a calculated property called toolbarItems. 88 | 89 | ``` 90 | import {toolbarItems} from './customToolbar/toolbar' 91 | 92 | export default { 93 | computed: { 94 | toolbarItems: () => toolbarItems 95 | } 96 | } 97 | ``` 98 | 99 | ## Writing templates 100 | 101 | With the data defined, we started writing template code. 102 | 103 | First we need a large container for the toolbox and drawing area. 104 | ``` 105 |
106 |
107 | ``` 108 | Then we add the toolbox code: 109 | ``` 110 |
111 |
112 | 118 |
119 |
120 | ``` 121 | Then we add the drawing area code: 122 | ``` 123 |
124 |
125 | 131 |
132 |
133 |
134 | ``` 135 | Finally we need a bit of css (I used scss): 136 | ``` 137 | .customToolbarContainer { 138 | width: 100%; 139 | height: 100%; 140 | display: flex; 141 | position: relative; 142 | 143 | .toolbarContainer { 144 | flex: 1; 145 | font-size: 20px; 146 | background: #efefef; 147 | text-align: center; 148 | padding-top: 20px; 149 | 150 | ul { 151 | padding: 0; 152 | margin: 0; 153 | 154 | li { 155 | list-style: none; 156 | margin-bottom: 10px; 157 | cursor: pointer; 158 | 159 | img { 160 | width: 15px; 161 | height: 15px; 162 | } 163 | 164 | span { 165 | margin-left: 15px; 166 | } 167 | } 168 | } 169 | } 170 | 171 | .graphContainer { 172 | position: relative; 173 | flex: 7; 174 | } 175 | } 176 | ``` 177 | Now when we launch the webpage, we should see the following effect: 178 | ![image](http://picture.lanniu.top/20200107100229.png) 179 | 180 | ## Writing business code 181 | 182 | Now that everything is ready, we start writing specific code. 183 | 184 | First we need to declare a graph object in vue's data to hold the mxGraph instance. 185 | ``` 186 | data(){ 187 | return { 188 | graph: null 189 | } 190 | } 191 | ``` 192 | First define a method named **createGraph** to instantiate the mxGraph object: 193 | ``` 194 | createGraph() { 195 | this.graph = new MxGraph(this.$refs.container) 196 | } 197 | ``` 198 | Then define a method named **initGraph** to initiate some attribute and event: 199 | ``` 200 | initGraph() { 201 | if (this.R.isNil(this.graph)) { 202 | return 203 | } 204 | this.graph.setConnectable(true) // Allow connection 205 | this.graph.setCellsEditable(false) // Unchangeable 206 | this.graph.convertValueToString = (cell) => { // Generate display labels based on cell 207 | return this.R.prop('title', cell) 208 | } 209 | this.graph.addListener(MxEvent.DOUBLE_CLICK, (graph, evt) => { // Listen for double-click events 210 | const cell = this.R.pathOr([], ['properties', 'cell'], evt) 211 | 212 | console.info(cell) // Output double-clicked cell in the console 213 | }) 214 | } 215 | ``` 216 | In the above code, several graph instance methods are used, and the following are introduced one by one: 217 | - [setConnectable](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.setConnectable) The setting is to allow new connections. 218 | - [setCellsEditable](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.setCellsEditable) Set whether to allow double-clicking to modify the label of the cell directly. 219 | - [convertValueToString](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.convertValueToString) This is a function that receives a cell and returns the label that the cell uses for display. Here is a rewrite of the default method. 220 | - [addListener](https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent.addListener) Add a double-click listener for the graph. 221 | 222 | Then define a method named **addCell** to add cells to the drawing area: 223 | 224 | ``` 225 | addCell(toolItem, x, y) { 226 | const {width, height} = toolItem 227 | const styleObj = toolItem['style'] 228 | const style = Object.keys(styleObj).map((attr) => `${attr}=${styleObj[attr]}`).join(';') 229 | const parent = this.graph.getDefaultParent() 230 | 231 | this.graph.getModel().beginUpdate() 232 | try { 233 | let vertex = this.graph.insertVertex(parent, null, null, x, y, width, height, style) 234 | 235 | vertex.title = toolItem['title'] 236 | } finally { 237 | this.graph.getModel().endUpdate() 238 | } 239 | } 240 | ``` 241 | 242 | **addCell** receives three parameters: tool item object, X coordinate of Cell, and y coordinate of Cell. 243 | 244 | The following steps were performed in the method: 245 | - Get the default width and height information of the cell. 246 | - Splice style into the form "xxx = xxx; xxx = xxx;". 247 | - Call the model's beginUpdate method to start a transaction. 248 | - Invoke the [insertVertex](https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.insertVertex) method to add a cell. 249 | - Call the model's endUpdate method to end a transaction. 250 | 251 | The next step is to implement the core code of the toolbox. Let's create a new method called ** initToolbar **: 252 | 253 | ``` 254 | initToolbar() { 255 | const domArray = this.$refs.toolItem 256 | 257 | if (!(domArray instanceof Array) || domArray.length <= 0) { 258 | return 259 | } 260 | domArray.forEach((dom, domIndex) => { 261 | const toolItem = this.toolbarItems[domIndex] 262 | const {width, height} = toolItem 263 | 264 | const dropHandler = (graph, evt, cell, x, y) => { 265 | this.addCell(toolItem, x, y) 266 | } 267 | const createDragPreview = () => { 268 | const elt = document.createElement('div') 269 | 270 | elt.style.border = '2px dotted black' 271 | elt.style.width = `${width}px` 272 | elt.style.height = `${height}px` 273 | return elt 274 | } 275 | 276 | MxUtils.makeDraggable(dom, this.graph, dropHandler, createDragPreview(), 0, 0, false, true) 277 | }) 278 | } 279 | ``` 280 | The purpose of the method is to allow the tool item to be dragged and trigger a custom callback event when letting go. The following steps were performed in the method: 281 | 282 | 1. Get all tool items dom. 283 | 2. Iterate through all doms. 284 | 1. Gets the tool item object corresponding to the dom. 285 | 2. Gets the default width and height of the tool item. 286 | 3. Define a callback function for drop and execute the **addCell** method in the callback function. 287 | 4. Defines a method for generating a preview. This method returns a div as a preview graphic. 288 | 5. Call the [makeDraggable](https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxUtils-js.html#mxUtils.makeDraggable) method. 289 | 290 | 291 | It should be noted that the **makeDraggable** method, makeDraggable receives multiple parameters, we now need to pay attention to the first four: 292 | 293 | 1. **dom** The dom element that needs to be dragged。 294 | 2. **graph** The bound graph object. 295 | 3. **dropHandler** Callback function when drop. 296 | 4. **preview** Preview graphics while dragging. 297 | 298 | Finally, let's add the following code to the mounted: 299 | ``` 300 | mounted() { 301 | this.createGraph() 302 | this.initGraph() 303 | this.initToolbar() 304 | this.$refs.container.style.background = 'url("./mxgraph/images/grid.gif")' 305 | } 306 | ``` 307 | 308 | When we open the webpage, we can see the following effects: 309 | ![](http://picture.lanniu.top/20200107111924.png) 310 | 311 | When you double-click the cell, you can see the output information in the console: 312 | ![](http://picture.lanniu.top/20200107112010.png) 313 | 314 | We can make some extensions to this Demo in the actual project. For example, in addCell function, you can instantiate different objects for different tool items and save them in the value property of the cell. When you double-click the cell, you can pop up the dialog box and modify the value of the cell's value attribute. 315 | 316 | end. 317 | -------------------------------------------------------------------------------- /public/arrows.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | --------------------------------------------------------------------------------