topology vue demo

topology-demo

Topology editor based on topology + elemenu-ui + vue-cli (for learning reference only)

At present, the function is very simple. I referenced several demos about topology written by Vue and integrated them together to change it to something I am familiar with. Will continue to maintain and add API implementation on topology

Technology selection

• Vue-Cli
• Topology
• Element-ui

Ideas

The general frame is based on other demos that are relatively well done, and then the components are divided according to the layout to facilitate development by components. Mainly to operate the canvas object, pass the canvas to each component, and the component operates by itself (the principle is to operate objects with the same application address), or emit to call back the method of the parent component. The official Le5le example is written in Nuxt and uses Vuex to notify the parent component which methods to call. Because I don’t want to introduce vuex here, I removed it and replaced it with the current one. I haven't encountered any problems so far. If you have any better methods, please give me some guidance.

Usage

Project operation

 npm i
npm run serve

Project build

 npm run build

Lints and fixes files

 npm run lint

FAQ

Why is padding: 50px under App.vue

This is to test a topology bug. When dragging the left component to the canvas, the page will bounce back to a certain position. Because when we put it into the project as a component, it is not necessarily a separate interface, but may be used as a component wrapped by a dialog or container, so this bug will still have some impact. It can be removed under normal circumstances

Run screenshot