🎄Hi~ Hello everyone, I am Xiaoxin, a programming enthusiast who has been engaged in front-end development for a long time. I will use more practical cases to output more programming knowledge. At the same time, I believe that sharing is the only shortcut to growth. Here I also hope that every article of mine can become a reference for your technical implementation~

🚀Technology & code sharing

• I am here IT200 Summarize technical learning;
• I am here 1024Code Write code online;
• I am here nuggets share technical articles;
• I am here Github Participate in open source learning;

😇 Recommend several useful tools

• var-conv Code variable name quick conversion tool for VSCode IDE
• generator-vite-plugin Quickly generate Vite plugin template projects
• generator-babel-plugin Quickly generate Babel plugin template projects

Into the title

LogicFlow is a flowchart editing framework that provides a series of functions necessary for flowchart interaction and editing, as well as flexible node customization, plug-ins and other expansion mechanisms. LogicFlow supports front-end R&D and custom development of various logic orchestration scenarios, such as flowcharts, ER diagrams, BPMN processes, etc. It has good applications in job approval configuration, robot logic arrangement, and codeless platform process configuration.

This section will explain more configuration options of the Quick Start LogicFlow flowchart editing framework. The overall project is based on Vue3+Vite3+Ts4 Development, in order to help and provide convenience for friends who are proficient in using Vue3 and Typescript syntax, if you are already proficient in the development habits in Vue3, it is recommended to visit directly LogicFlow Get the full getting started guide.

1. Set the theme Theme:

LF provides two implementations when setting the theme, one is to configure through the style option when instantiating the LF object, and the other is to use the built-in lf.setTheme({}) function to configure after instantiating the LF object

Sets a list of commonly used properties for the theme (for a complete list of options see ThemeApi):

• Configure when instantiating LF:

const styleConfig = {} // Theme configuration items

lf.value = new LogicFlow({
  container: container.value,
  grid: true,
  // Configure the theme when instantiating LF
  style: styleConfig,
})

• Configuration after instantiating LF:

const styleConfig = {} // Theme configuration items

lf.value.setTheme(styleConfig);

PS: The width, height, r and other similar attributes of nodes are collectively classified as shape attributes, because they will affect the anchor point position and connection calculation, Gu cannot be set through the theme, and can only be adjusted during customization.

2. Set up the grid Grid:

The main role of the grid in LF is to position the center point of the node and when it moves. The default grid option is off, and the minimum unit of the center point and movement is 1px. When the grid option is turned on, the rendered center point and The minimum unit when moving will be adjusted to 20px. In order to better align with the grid when customizing the width and height of the node, it is recommended to set it to an integer multiple of the smallest unit of the grid.

const gridConfig = {
  size: 20,
  visible: true,
  type: 'mesh',
  config: {
    color: '#ababab',
    thickness: 1,
  },
}

lf.value = new LogicFlow({
  container: container.value,
  grid: gridConfig,
})

3. Set the snapline Snapline:

The grid solves the positioning and alignment problem of the center point of a node and when moving, so the adjustment of the position of multiple nodes needs to be assisted by the snapline. The snapline option is enabled by default, and the style of the snapline can be set by setting the theme. option to customize;

const styleConfig = {
  snapline: {
    stroke: '#1E90FF', // alignment line color
    strokeWidth: 1, // Alignment width
  },
}

lf.value.setTheme(styleConfig);

4. Set the background Background:

In the previous example, Grid has been enabled to act as the background. When the LF object is instantiated, the background can also be controlled through options. The default is off, and the modified option is background;

lf.value = new LogicFlow({
  container: container.value,
  // grid: true, // turn off the grid
  background: {
    backgroundImage: "url(../grid.svg)",
    backgroundRepeat: "repeat"
  }
})

5. Set the keyboard shortcut Keyboard:

The shortcut key is also an indispensable function in the flowchart product, which can greatly facilitate the user experience. The use of the shortcut key is disabled by default in LF, and it can be supported by enabling the enabled option when instantiating LF; LF except the built-in In addition to the shortcut keys, it also supports customization to expand the use of shortcut keys;

• Built-in shortcut keys

• Enable shortcuts

lf.value = new LogicFlow({
  container: container.value,
  keyboard: {
    enabled: true
  },
})

• Custom shortcut keys: The definition rules of shortcut keys are the same as those of mousetrap; the following uses the example on the official website to demonstrate the addition of a second confirmation reminder when the shortcut key for custom deletion of nodes is triggered;

lf.value = new LogicFlow({
  container: container.value,
  keyboard: {
    enabled: true,
    shortcuts: [
      {
        keys: ["backspace"],
        callback: () => {
          const r = window.confirm("You sure you want to delete it?");
          if (r) {
            const elements = lf.value!.getSelectElements(true);
            lf.value?.clearSelectElements();
            elements.edges.forEach((edge: EdgeConfig) => lf.value!.deleteEdge(edge.id || ''));
            elements.nodes.forEach((node: NodeConfig) => lf.value!.deleteNode(node.id || ''));
          }
        }
      }
    ]
  },
})

6. Set the diagram editing method:

LF provides more options for convenient control of graph editing. It can also be initialized through options when instantiating LF, and it also supports adjustment through the lf.updateEditConfig function after instantiating LF;

List of options supported by graph editing mode (for a complete list of options, see editConfigModelApi):

• Enable read-only silent mode, disable zooming, disable mouse scrolling to move the canvas, and disable dragging the canvas as follows:

lf.value = new LogicFlow({
  container: container.value,
  isSilentMode: true, // silent mode
  stopZoomGraph: true, // Disable scaling
  stopScrollGraph: true, // Disallow mouse scrolling to move the canvas
  stopMoveGraph: true, // Disable canvas dragging
})

• More flexible adjustments via lf.updateEditConfig:

lf.value.updateEditConfig({
    isSilentMode: false
});

Summarize

This concludes the content of this section. Do you understand themes, grids, alignment lines, backgrounds, shortcut keys, and diagram editing methods? These options are not necessary, but you need to know how to configure them when you need them. In the next section, you will start to prepare for the learning of the plug-in part. Come on~

If you feel that you have gained something after reading it, please like, comment, share and support. Your support and affirmation are the driving force for me to keep writing~

This article is transferred from https://juejin.cn/post/7187535095392600121 , if there is any infringement, please contact to delete.