A bit of a plus-one item for a flowchart recently (‘◡’● one item is usually quite dull, so a quick copy of the code will probably do the trick.) A lot of code, the kind of dead so first post the left part of the code and content, a little bit of explanation.

Let’s post a picture first

So let’s start on the left

html

<div id="stencil"></div>
Copy the code
// It would be nice to define global variables if possible, after all, the method might use these things.
let stencil = new Addon.Stencil({
    // The reason for this comment is shown below
    // title: 'flow chart ',
    // collapsable: true,
    target: graph,
    stencilGraphWidth: 200.stencilGraphHeight: 180.groups: [{title: 'Basic Flow chart'.name: 'group1'],},layoutOptions: {
      columns: 2.columnWidth: 80.rowHeight: 55,}})let appendChildTemp = document.getElementById('stencil')
if (appendChildTemp) { 
    appendChildTemp.appendChild(stencil.container)
}
Copy the code

I just need this basic flow chart, nothing else.

Next comes custom graphics.

This initializes the points to which the connection line can connect

  const ports = {
    groups: {
      top: {
        position: 'top'.attrs: {
          circle: {
            r: 4.magnet: true.stroke: '#5F95FF'.strokeWidth: 1.fill: '#fff'.style: { // Set hide, mouse movement display through the event
              visibility: 'hidden',},},},},right: {
        position: 'right'.attrs: {
          circle: {
            r: 4.magnet: true.stroke: '#5F95FF'.strokeWidth: 1.fill: '#fff'.style: {
              visibility: 'hidden',},},},},bottom: {
        position: 'bottom'.attrs: {
          circle: {
            r: 4.magnet: true.stroke: '#5F95FF'.strokeWidth: 1.fill: '#fff'.style: {
              visibility: 'hidden',},},},},left: {
        position: 'left'.attrs: {
          circle: {
            r: 4.magnet: true.stroke: '#5F95FF'.strokeWidth: 1.fill: '#fff'.style: {
              visibility: 'hidden',},},},},},items: [{group: 'top'}, {group: 'right'}, {group: 'bottom'}, {group: 'left',},],}Copy the code

Initialize custom graphics

  Graph.registerNode(
    'custom-polygon',
    {
      inherit: 'polygon'.width: 66.height: 36.markup: [{tagName: 'polygon'.selector: 'body'}, {tagName: 'text'.selector: 'label'],},attrs: {
        body: {
          strokeWidth: 1.stroke: '#5F95FF'.fill: '#EFF4FF',},text: {
          fontSize: 12.fill: '# 262626',}},ports: {
        ...ports,
        // items: [// this is where you limit the number of join points
        / / {
        // group: 'top',
        / /},
        / / {
        // group: 'bottom',
        / /},
        / /,}},true,
  )


  Graph.registerNode(
    'custom-circle',
    {
      inherit: 'circle'.width: 45.height: 45.markup: [{tagName: 'circle'.selector: 'body'}, {tagName: 'text'.selector: 'label'],},attrs: {
        body: {
          strokeWidth: 1.stroke: '#5F95FF'.fill: '#EFF4FF',},text: {
          fontSize: 12.fill: '# 262626',}},ports: { ...ports },
    },
    true,
  )
      
  Graph.registerNode(
    'custom-rect',
    {
      inherit: 'rect'.width: 66.height: 36.markup: [{tagName: 'rect'.selector: 'body'}, {tagName: 'text'.selector: 'label'],},attrs: {
        body: {
          strokeWidth: 1.stroke: '#5F95FF'.fill: '#EFF4FF',},text: {
          fontSize: 12.fill: '# 262626',}},ports: { ...ports },
    },
    true.)Copy the code

Create node graph

  const r1 = graph.createNode({
    shape: 'custom-rect'.label: '开始'.attrs: {
      body: {
        rx: 20.ry: 26,}}})const r2 = graph.createNode({
    shape: 'custom-rect'.label: 'process',})const r3 = graph.createNode({
    shape: 'custom-rect'.attrs: {
      body: {
        rx: 6.ry: 6,}},label: 'Optional Procedure',})const r4 = graph.createNode({
    shape: 'custom-polygon'.attrs: {
      body: {
        refPoints: '0, 10, 0 to 20, 10, 10, 20',}},label: 'decision making',})const r5 = graph.createNode({
    shape: 'custom-polygon'.attrs: {
      body: {
        refPoints: '10, 0 30, 20, 40, 0 0, 20',}},label: 'data',})const r6 = graph.createNode({
    shape: 'custom-circle'.label: 'connection',
  })
  stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
Copy the code

Control connecting pile show/hide

  const showPorts = (ports, show) = > {
    for (let i = 0, len = ports.length; i < len; i = i + 1) {
      ports[i].style.visibility = show ? 'visible' : 'hidden'}}// Move the node
  graph.on('node:mouseenter'.() = > {
    const container = document.getElementById('orgAndPersonnelContainer') // Get id is the id of your artboard
    if (container) {
      const ports = container.querySelectorAll(
        '.x6-port-body',
      )
      showPorts(ports, true)}})// Remove the node
  graph.on('node:mouseleave'.() = > {
    const container = document.getElementById('orgAndPersonnelContainer') // Get id is the id of your artboard
    if (container) {
      const ports = container.querySelectorAll(
        '.x6-port-body',
      )
      showPorts(ports, false)}})Copy the code

Well, that’s the end of the left side, and what’s left is the implementation of the canvas, but the canvas official has an example, so I’ll save it for the next part.