62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<template>
|
|
<el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
|
|
<el-button link @click="zoomOut">
|
|
<el-icon :size="16" title="缩小"><ZoomOut /></el-icon>
|
|
</el-button>
|
|
<el-button link @click="zoomIn">
|
|
<el-icon :size="16" title="放大"><ZoomIn /></el-icon>
|
|
</el-button>
|
|
<el-button link @click="fitView">
|
|
<AppIcon iconName="app-fitview" title="适应"></AppIcon>
|
|
</el-button>
|
|
<el-divider direction="vertical" />
|
|
<el-button link @click="retract">
|
|
<el-tooltip class="box-item" effect="dark" content="收起全部节点" placement="top">
|
|
<AppIcon style="font-size: 16px" iconName="app-retract" title="收起全部节点"></AppIcon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
<el-button link @click="extend">
|
|
<el-tooltip class="box-item" effect="dark" content="展开全部节点" placement="top">
|
|
<AppIcon style="font-size: 16px" iconName="app-extend" title="展开全部节点"></AppIcon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
<el-button link @click="layout">
|
|
<el-tooltip class="box-item" effect="dark" content="一键美化" placement="top">
|
|
<AppIcon style="font-size: 16px" iconName="app-beautify" title="一键美化"></AppIcon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
lf: Object || String || null
|
|
})
|
|
|
|
function zoomIn() {
|
|
props.lf?.zoom(true, [0, 0])
|
|
}
|
|
function zoomOut() {
|
|
props.lf?.zoom(false, [0, 0])
|
|
}
|
|
function fitView() {
|
|
props.lf?.resetZoom()
|
|
props.lf?.resetTranslate()
|
|
props.lf?.fitView()
|
|
}
|
|
const layout = () => {
|
|
props.lf?.extension.dagre.layout()
|
|
}
|
|
const retract = () => {
|
|
props.lf?.graphModel.nodes.forEach((element: any) => {
|
|
element.properties.showNode = false
|
|
})
|
|
}
|
|
const extend = () => {
|
|
props.lf?.graphModel.nodes.forEach((element: any) => {
|
|
element.properties.showNode = true
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped></style>
|