index.vue
<div className="compact-box-tree-page">
<div className="compact-box-tree-canvas" ref="buildCore"></div>
</div>
<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue';
import { mockData } from './config';
import { TreeCanvas } from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';
export default defineComponent({
name: 'Butterfly',
components: {},
setup() {
const buildCore = ref<HTMLDivElement | null>(null);
let canvas: any = null;
onMounted(() => {
if (buildCore.value != null) {
canvas = new TreeCanvas({
root: buildCore.value,
disLinkable: true, // 可删除连线
linkable: true, // 可连线
draggable: true, // 可拖动
zoomable: true, // 可放大
moveable: true, // 可平移
theme: {
edge: {
shapeType: 'Manhattan',
arrow: true,
},
},
layout: {
type: 'compactBox',
options: {
direction: 'TB',
getHeight(d: any) {
return 60;
},
getWidth(d: any) {
return 120;
},
getHGap(d: any) {
return 20;
},
getVGap(d: any) {
return 80;
},
},
},
});
canvas.draw(mockData, {}, () => {
canvas.focusCenterWithAnimate();
});
}
});
const data = ref(mockData);
watch(
() => data,
() => {
canvas.draw(mockData, {}, () => {
canvas.focusCenterWithAnimate();
});
},
);
return {
buildCore,
};
},
});
</script>
<style lang="less">
@butterfly-theme-color-base: #fff;
@butterfly-normal-font-color-base: #222;
@butterfly-overlay-font-color-base: #fff;
@butterfly-primary-color-base: #f66902;
@butterfly-box-border-color-base: #d9d9d9;
@butterfly-box-shadow-base:0 2px 3px 0 rgba(0,112,204,0.06);
@butterfly-box-radius-base: 100px;
@butterfly-line-color-base: #bfbfbf;
// 主题背景色(画布背景色)
@butterfly-theme-background-color: @butterfly-theme-color-base;
// (各图形框)普通情况背景色
@butterfly-theme-color: fade(@butterfly-theme-color-base, 80%);
// 主题色
@butterfly-primary-color: @butterfly-primary-color-base;
// 普通情况下字体颜色
@butterfly-normal-font-color: @butterfly-normal-font-color-base;
// 主题背景色上的字体颜色及icon颜色
@butterfly-overlay-font-color: @butterfly-overlay-font-color-base;