This is the third day of my participation in Gwen Challenge

This installment starts with building a simple graphic editor.

Graphics editing and previewing are an essential part of configuration software, and a good editor can greatly reduce the workload of automation engineers.

Development Environment Configuration

Js 3.x + TypeScript + Vite is used for the front-end part of the project, and X6 of Ant Visualization team is used for the drawing engine part.

Here’s a quick overview of X6:

X6 is a graph editing engine, which is characterized by strong customization ability of nodes, edges and other elements. It is often used to build flow charts, ER charts, DAG charts, brain maps and other applications.

Below is a simple example of an X6, consisting of two basic components: point and line.This is exactly the same as the core composition of configuration software drawing module.

If you want to see le5LE build graphics editor, you can follow AlSmile. The core library is also an excellent drawing engine.

Using the combination of technology stacks mentioned above, the lowest supported browsers to Edge. If you have compatibility requirements for IE11, you are advised to use vue.js 2.x

Drawing engine X6 supports IE11, but requires special configuration. Specific can refer to: how compatible IE

The implementation of this part of the basic environment is relatively simple, you can see the first Vite project and X6 quick start

X6 Canvas configuration

Here is a complete set of configuration information, want to use the students directly copy the past good.

const graph = new Graph({
  panning: true.// Drag the canvas
  grid: true.// Background grid
  keyboard: true.// Keyboard events
  background: false.// Background image, background color
  clipboard: true.// Clipboard capability, enabled to support copy and paste, and support cross-canvas copy and paste
  history: true.// The historical operation record ability, after enabled to support undo and redo
  selecting: true.// Select/box select ability
  snapline: true.// Align lines to assist node layout
  mousewheel: true // Scroll wheel zoom
})
Copy the code

For more detailed configuration information, refer to the basic Tutorial section of the official documentation.

X6 feature implementation code snippet

Keyboard shortcuts

X6 comes with a Keyboard configuration that can be enabled at canvas creation time with the following configuration.

const graph = new Graph({
  keyboard: true,})/ / is equivalent to
const graph = new Graph({
  keyboard: {
    enabled: true,}})Copy the code

You can also enable and disableKeyboard events by calling graph.enablekeyboard () and graph.disablekeyboard () after creating the canvas.

if (graph.isKeyboardEnabled()) {
  graph.disableKeyboard()
} else {
  graph.enableKeyboard()
}
Copy the code
Select all (Ctrl+A)
graph.bindKey('ctrl+a'.() = > {
  const cells = graph.getCells(); // Get all nodes and wires in the canvas
  graph.select(cells); // Select them
})
Copy the code
Copy (Ctrl+C)

Prerequisite: Enable clipboard

graph.bindKey('ctrl+c'.() = > {
  const cells = graph.getSelectedCells();
  graph.copy(cells)
})
Copy the code
Cut (Ctrl+X)

Prerequisite: Enable clipboard

graph.bindKey('ctrl+c'.() = > {
  const cells = graph.getSelectedCells();
  graph.copy(cells)
})
Copy the code
Paste (Ctrl+V)

Prerequisite: Enable clipboard

graph.bindKey('ctrl+v'.() = > {
  graph.paste();
})
Copy the code
Undo (Ctrl+Z)

Prerequisite: Enable history

graph.bindKey('ctrl+z'.() = > {
  if(graph.canUndo()){ graph.undo(); }})Copy the code
Redo (Ctrl+Y)

Prerequisite: Enable history

graph.bindKey('ctrl+y'.() = > {
  if(graph.canRedo()){ graph.redo(); }})Copy the code
Delete
graph.bindKey('delete'.() = > {
  const cells = graph.getSelectedCells(); // Get the selected nodes and wires first
  if (cells.length) {
    graph.removeCells(cells); // Delete the selected ones
    graph.resetSelection(); // Clear the list of selected nodes, which may not be necessary}})Copy the code