• Demo
• API
• Special Instructions
  • defaultScrollInfo
  • layoutStrategy

Options

Demo

layoutStrategy:

<template>
  <div class="container">
    <div class="layout-strategy">
      layoutStrategy:
      <el-select v-model="layoutStrategy" :style="{ width: '250px' }">
        <el-option
          v-for="item in Object.keys(LAYOUT_STRATEGY)"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </div>
    <input
      class="scale-handler"
      type="range"
      :min="0.1"
      :max="2"
      :step="0.01"
      v-model="scaleRatio"
    />
    <vis-tree
      :key="layoutStrategy"
      class="vis-tree"
      ref="visTree"
      :data-source="dataSource"
      :scale-ratio="scaleRatio"
      :options="{ ...options, layoutStrategy }"
    >
      <template v-slot:node="nodeSlotProps">
        <div class="node-container">
          <div class="node-content">
            {{nodeSlotProps.node.id}}
          </div>

          <i
            v-if="nodeSlotProps.node.items && nodeSlotProps.node.items.length > 0"
            class="node-switcher"
            :class="nodeSlotProps.expanded ? 'el-icon-circle-plus-outline' : 'el-icon-remove-outline'"
            :style="{ color: `${nodeSlotProps.expanded ? 'green' : 'red'}` }"
            @click="() => toggleNodeExpanded(nodeSlotProps.node.id)"
          />
        </div>
      </template>
    </vis-tree>
  </div>
</template>

<script>
import VisTree, { LAYOUT_STRATEGY } from '@vis-tree/vue';
import ElSelect from 'element-plus/lib/el-select';
import ElOption from 'element-plus/lib/el-option';
import 'element-plus/lib/theme-chalk/index.css';

const originDataSource = {
  id: "O",
  items: [
    {
      id: "E",
      items: [
        {
          id: "A",
        },
        {
          id: "D",
          items: [
            {
              id: "B",
            },
            {
              id: "C",
            },
          ],
        },
      ],
    },
    {
      id: "F",
    },
    {
      id: "N",
      items: [
        {
          id: "G",
        },
        {
          id: "M",
          items: [
            {
              id: "H",
            },
            {
              id: "I",
            },
            {
              id: "J",
            },
            {
              id: "K",
            },
            {
              id: "L",
            },
          ],
        },
      ],
    },
  ],
};

export default {
  props: {
    msg: String,
  },
  components: {
    VisTree,
    ElSelect,
    ElOption
  },
  data() {
    return {
      LAYOUT_STRATEGY,
      layoutStrategy: LAYOUT_STRATEGY.TOP_CENTER,
      scaleRatio: 1,
      dataSource: originDataSource,
      options: {
        defaultScrollInfo: {
          key: originDataSource.id,
        },
        defaultExpandAll: true,
        customKeyField: "id",
        customChildrenField: "items",
        nodeWidth: 60,
        nodeHeight: 40,
        siblingInterval: 20,
        levelInterval: 20,
      }
    };
  },
  methods: {
    toggleNodeExpanded(key) {
      this.$refs.visTree.toggleNodeExpanded(key);
    },
  }
};
</script>

<style scoped>
.container {
  position: relative;
  background-color: #fff;
  border: 1px solid #ebedf1;
  border-radius: 1px;
}
.layout-strategy {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px;
  z-index: 1;
  background: #f2f5fa;
}
.scale-handler {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}
.vis-tree {
  width: 100%;
  height: 400px;
}
.node-container {
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid black;
}
.node-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.node-switcher {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: #fff;
}
</style>

API

Name	Description	Type	Default
useVirtualRender	Whether to use virtual rendering	boolean	true
useAnimation	Whether to use animation The rendering of animation depends on useVirtualRender, if useVirtualRender = false, then the animation will not take effect	boolean	true
useWheelScroll	Whether to use the mouse wheel to move the tree	boolean	true
defaultScrollInfo	Used to specify the initial movement of a node to a certain position on the canvas	object	---
defaultScrollInfo.key	Node identifier	string or number	---
defaultScrollInfo.top	The distance from the upper boundary of the node to the upper boundary of the canvas	string or number	"50% - nodeHeight * 50%"
defaultScrollInfo.left	The distance from the left edge of the node to the left edge of the canvas	string or number	"50% - nodeWidth * 50%"
defaultExpandAll	Whether to expand all nodes by default	boolean	false
defaultExpandRoot	Whether to expand the root node by default	boolean	true
defaultExpandedKeys	An array of node identifiers expanded by default	Array<string &#124 number>	---
customKeyField	The attribute name corresponding to the node identifier	string	"key"
customChildrenField	The attribute name corresponding to the node's child node list	string	"children"
layoutStrategy	Layout strategy	string	LAYOUT_STRATEGY.TOP_CENTER
nodeWidth	Node width	number	60
nodeHeight	Node height	number	30
siblingInterval	Distance between sibling nodes	number	30
levelInterval	Different levels of spacing	number	60
lineSize	Connection line width	number	1
lineColor	Connection line color	string	"black"
lineType	Connection line type	"straight" &#124 "none"	"straight"

Special Instructions

defaultScrollInfo

The values of defaultScrollInfo.top and defaultScrollInfo.left can be numeric or string:

• 100 is equivalent to 100px
• 30% is equivalent to canvasSize * 30%
• 30% + 100 is equivalent to canvasSize * 30% + 100px

layoutStrategy

There are currently 6 layout strategies. You can check the actual effects of different layout strategies through the above demonstration

import { LAYOUT_STRATEGY } from "@vis-tree/vue";

// default
LAYOUT_STRATEGY.TOP_CENTER;

LAYOUT_STRATEGY.BOTTOM_CENTER;

LAYOUT_STRATEGY.CENTER_LEFT;

LAYOUT_STRATEGY.CENTER_RIGHT;

LAYOUT_STRATEGY.TOP_LEFT_ALIGN_LEFT;

LAYOUT_STRATEGY.TOP_LEFT_ALIGN_TOP;