Js + Nuxt.js + Element + Vuex + open source JS drawing library, to create your own online drawing software, the final effect: topology.le5le.com. If you feel good, feel free to like the article and open source library, so that we are more motivated to do well!

Source code for this tutorial is Github

1. Create a project framework

1. Create the project using the nuxt.js wizard

Yarn create nuxt-app topology-vue // Notice that in the following prompt, move up or down, press the space to select ElementCopy the code

After you select Element, the plugins folder contains the plugin configuration to add Element

After that, configure the head related information in nuxt.config.js. There are two Ali font files: left toolbar font file: //at.alicdn.com/t/font_1113798_0532l8oa6jqp.css

Property font icon on the right: //at.alicdn.com/t/font_1331132_5lvbai88wkb.css

Head: {title: 'Topology - open source free mapping tool ', meta: [{charset:' utF-8 '}, {name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: }], Link: [{rel:}], link: [{rel:}], Link: [{rel:}], Link: [{rel:}], Link: [{rel:}], Link: [{rel:} 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: '//at.alicdn.com/t/font_1113798_0532l8oa6jqp.css' }, { rel: 'stylesheet', href: '//at.alicdn.com/t/font_1331132_5lvbai88wkb.css' } ] },Copy the code

2. Add SCSS support

2.1 Installing SCSS dependency packages

yarn add node-sass sass-loader  -D 
Copy the code

2.2 Add lang=” SCSS “to the style label

<style lang="scss">
.page {
  width: 100%;
  height: 100%;
}
</style>
Copy the code

3. Add a global public CSS

3.1 Create a base. SCSS common global style file in the ASSTES/CSS folder

Import to the layouts/default.vue script:

import '~/assets/css/base.scss'
Copy the code

Second, web layout

1. Top navigation bar

Change the layouts/default.vue to include a navigation bar and body

Where: is the view part of the corresponding page routing in nuxt.js framework.

2. Change the left, middle, and right columns on the home page

Change the layout of Pages /index.vue to three columns: left, middle and right

Create a canvas

1. Download the topology dependency package

Import {Topology, Options, registerNode} from '@topology/core'; import {Topology, Options, registerNode} from '@topology/core'; import { register as registerFlow } from '@topology/flow-diagram'; import { register as registerActivity } from '@topology/activity-diagram'; import { register as registerClass } from '@topology/class-diagram'; import { register as registerSequence } from '@topology/sequence-diagram'; import { register as registerChart } from '@topology/chart-diagram'; CanvasRegister () {registerFlow(); registerActivity(); registerClass(); registerSequence(); registerChart(); / /... }Copy the code

The @topology/core is the core library engine, and the others are graphics libraries. Specific reference: development documentation

2. Register the graphics library

We write a separate servers/canvas.js service to provide topology-related services

This is mainly about registration and left toolbar data.

3. Load the graphics library

3.1 Preparing Canvas related data

Data () {return {// Left toolbar tools: tools, // canvas: {}, / / graphics library option: https://www.yuque.com/alsmile/topology/canvas#hOupV canvasOptions: {rotateCursor: '/img/rotate. Cur '}, // Props: {node: null, line: null, multi: false}}Copy the code

3.2 Register the graphics library

created() {
    canvasRegister()
}
Copy the code

3.3 After the parent node has rendered, new creates the canvas

mounted() {
    this.canvasOptions.on = this.onMessage
    this.canvas = new Topology('topology-canvas', this.canvasOptions)
}
Copy the code

Where onMessage represents the message callback function that accepts the canvas

3.4 The left toolbar supports mouse drag and drop

<a
            v-for="(btn, i) in item.children"
            :key="i"
            :title="btn.name"
            :draggable="btn.data"
            @dragstart="onDrag($event, btn)"
          >
            <i :class="`iconfont ${btn.icon}`"></i>
          </a>
Copy the code

methods: {
    onDrag(event, node) {
      event.dataTransfer.setData('Text', JSON.stringify(node.data))
    }
  }
Copy the code

Only need to drag and drop data set format string can nodes (canvas with drag-and-drop support to receive processing), node data format documents: www.yuque.com/alsmile/top…

3.5 Property bar on the right

3.5.1 Customizing property Bar components

Create CanvasProps. Vue under Components

<template> <div> <! <div v-if="! props.node && ! props.line && ! Props. Multi "> <div class="title"> Welcome to le5le-topology! </div> <div class="group"> <a class="star" href="https://github.com/le5le-com/topology" target="_blank"> Click here to make a star < / a > < a href = "https://www.yuque.com/alsmile/topology" target = "_blank" > tutorial < / a > < br / > < a Href = "http://topology.le5le.com/assets/img/topology_wechat.jpg?t=1" target = "_blank" > WeChat communication group (a group) < / a > < br / > < a Href = "http://topology.le5le.com/assets/img/topology_wechat2.jpg" target = "_blank" > WeChat communication group of 2 < / a > < br / > < a Href = "https://www.yuque.com/alsmile/topology/faq#EVbCgt" target = "_blank" > contact us < / a > < / div > < div class = "title" > [Todo] Future planning </div> <ul class="group"> <li>Github issues</li> <li>React Demo </li> <li>Vue3 demo</li> <li> </li> <ul > <div </div> <ul class="group"> <li>Ctrl + arrow keys: Control node move 1 pixel </li> <li>Ctrl + mouse Move: Move the entire canvas </li> <li>Ctrl + mouse wheel: Zoom < / li > < li > add or selected node, various attributes on the right side support upload pictures oh < / li > < / ul > < / div > < / div > <! <div class="items"> <div class="flex Grid "> <div class="flex grid"> <div>X (px) </div> <div class="ml5">Y (px) </div> <div> <div class="flex grid"> <div> <el-input-number v-model="props.node.rect.x" controls-position="right" @change="onChange" ></el-input-number> </div> <div class="ml5"> <el-input-number v-model="props.node.rect.y" controls-position="right" @change="onChange" ></el-input-number> </div> </div> <div class="items"> <div class="flex Grid "> <div class="ml5"> High (px) </div> </div> <div class="flex grid"> <div> <el-input-number v-model="props.node.rect.width" controls-position="right" @change="onChange" ></el-input-number> </div> <div class="ml5"> <el-input-number v-model="props.node.rect.height" controls-position="right"  @change="onChange" ></el-input-number> </div> </div> </div> </div> </div> </template> <script > export default { data()  { return {} }, props: { props: { type: Object, require: true } }, methods: { onChange(value) { this.$emit('change', this.props.node) } } } </script>Copy the code

In the command, props. Node, line, and multi indicate whether a node, a line, and multiple objects are selected respectively. We haven’t used Vuex for the time being (covered in a later tutorial) and it’s easier to just use native bidirectional binding. Use $emit to notify the parent component of property change events.

Related attribute values, the parameters of the API documentation: www.yuque.com/alsmile/top…

3.5.2 Referring to the Property Component on the right

<div class="props">
      <CanvasProps :props.sync="props" @change="onUpdateProps"></CanvasProps>
</div>
Copy the code

Again, we use bidirectional binding using the.sync keyword and receive the Chang event, which is fed back to the canvas component:

This.canvas.updateprops () {this.canvas.updateprops () {this.canvas.updateprops () {this.canvas.updateprops () {this.canvas.updateprops (); https://www.yuque.com/alsmile/topology/canvas#v4OFi this.canvas.updateProps(true, [node]) }Copy the code

other

From there, a simple drawing project was completed, with more features to follow.

But, but, but… On the right side of the property bar, I hope you can participate in the improvement according to the development document, the opportunity to show their stage, can join the list of contributors oh! If you are not clear, please contact the administrator (wechat) alsmile123

How to contribute

Pr on GitHub: 0. Read the development documentation to learn about related attributes.

Fork warehouse to own name
Make changes locally and submit them to your own Git repository
Find the “Pull Request” button in your fork repository and submit it

Series 2

[Front-end VUE advanced combat] : from zero to create a flow chart, topology project [NUxt.js + Element + Vuex] (two)

Open source project is not easy, welcome everyone to participate in the [article,Making open source libraryClick on the star to like, or sponsor the server:

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[front-end VUE advanced combat] : from zero to create a flow chart, topology project [NUxt.js + Element + Vuex]

directory

1. Create a project framework

1. Create the project using the nuxt.js wizard

2. Add SCSS support

3. Add a global public CSS

Second, web layout

1. Top navigation bar

2. Change the left, middle, and right columns on the home page

Create a canvas

1. Download the topology dependency package

2. Register the graphics library

3. Load the graphics library

other

How to contribute

Series 2

[front-end VUE advanced combat] : from zero to create a flow chart, topology project [NUxt.js + Element + Vuex]

directory

1. Create a project framework

1. Create the project using the nuxt.js wizard

2. Add SCSS support

3. Add a global public CSS

Second, web layout

1. Top navigation bar

2. Change the left, middle, and right columns on the home page

Create a canvas

1. Download the topology dependency package

2. Register the graphics library

3. Load the graphics library

other

How to contribute

Series 2

Related Posts

TypeScript learning

What other tips should we learn about CSS?

Understand inversion of control and dependency injection in front-end development