gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 思维导图支持无极缩放

Browse Source
This commit is contained in:
kuaifan 2022-01-06 08:08:40 +08:00
parent 7c64b27ef4
commit 919dc3cdea
2 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
resources/assets/js/components/minder/minder.vue
View File

@ -1,22 +1,16 @@
<template> <template>
<div class="minder-editor-container"> <div class="minder-editor-container">
<div class="quickbar"> <div class="quickbar">
<Tooltip placement="top" theme="light"> <ETooltip placement="top" effect="light">
<i class="ft icon" :title="$L('缩放')">&#xE7B3;</i> <div><i class="ft icon" :title="$L('缩放')">&#xE7B3;</i></div>
<div slot="content"> <div slot="content" class="minder-editor-slider">
<ul class="quickul"> <Slider v-model="zoom" :min="10" :max="300"></Slider>
<li @click="execCommand('Zoom', 200)">200%</li>
<li @click="execCommand('Zoom', 150)">150%</li>
<li @click="execCommand('Zoom', 100)">100%</li>
<li @click="execCommand('Zoom', 50)">50%</li>
<li @click="execCommand('Zoom', 25)">25%</li>
</ul>
</div> </div>
</Tooltip> </ETooltip>
<Tooltip v-if="readOnly!==true" placement="top" theme="light"> <ETooltip v-if="readOnly!==true" placement="top" effect="light">
<i class="ft icon" :title="$L('图形')">&#xE621;</i> <div><i class="ft icon" :title="$L('图形')">&#xE621;</i></div>
<div slot="content"> <div slot="content">
<ul class="quickul mold"> <ul class="minder-editor-quickul mold">
<li @click="execCommand('template', 'default')"><span class="default"></span></li> <li @click="execCommand('template', 'default')"><span class="default"></span></li>
<li @click="execCommand('template', 'structure')"><span class="structure"></span></li> <li @click="execCommand('template', 'structure')"><span class="structure"></span></li>
<li @click="execCommand('template', 'filetree')"><span class="filetree"></span></li> <li @click="execCommand('template', 'filetree')"><span class="filetree"></span></li>
@ -25,11 +19,11 @@
<li @click="execCommand('template', 'tianpan')"><span class="tianpan"></span></li> <li @click="execCommand('template', 'tianpan')"><span class="tianpan"></span></li>
</ul> </ul>
</div> </div>
</Tooltip> </ETooltip>
<Tooltip v-if="readOnly!==true" placement="top" theme="light"> <ETooltip v-if="readOnly!==true" placement="top" effect="light">
<i class="ft icon" :title="$L('样式')">&#xE678;</i> <div><i class="ft icon" :title="$L('样式')">&#xE678;</i></div>
<div slot="content"> <div slot="content">
<ul class="quickul"> <ul class="minder-editor-quickul">
<li @click="execCommand('theme', 'fresh-blue')">{{$L('天空蓝')}}</li> <li @click="execCommand('theme', 'fresh-blue')">{{$L('天空蓝')}}</li>
<li @click="execCommand('theme', 'wire')">{{$L('线框')}}</li> <li @click="execCommand('theme', 'wire')">{{$L('线框')}}</li>
<li @click="execCommand('theme', 'fish')">{{$L('鱼骨图')}}</li> <li @click="execCommand('theme', 'fish')">{{$L('鱼骨图')}}</li>
@ -41,11 +35,11 @@
<li @click="execCommand('theme', 'tianpan-compact')">{{$L('紧凑天盘')}}</li> <li @click="execCommand('theme', 'tianpan-compact')">{{$L('紧凑天盘')}}</li>
</ul> </ul>
</div> </div>
</Tooltip> </ETooltip>
<Tooltip placement="top" theme="light"> <ETooltip placement="top" effect="light">
<i class="ft icon" :title="$L('折叠')">&#xE779;</i> <div><i class="ft icon" :title="$L('折叠')">&#xE779;</i></div>
<div slot="content"> <div slot="content">
<ul class="quickul"> <ul class="minder-editor-quickul">
<li @click="execCommand('ExpandToLevel', 1)">{{$L('展开到一级节点')}}</li> <li @click="execCommand('ExpandToLevel', 1)">{{$L('展开到一级节点')}}</li>
<li @click="execCommand('ExpandToLevel', 2)">{{$L('展开到二级节点')}}</li> <li @click="execCommand('ExpandToLevel', 2)">{{$L('展开到二级节点')}}</li>
<li @click="execCommand('ExpandToLevel', 3)">{{$L('展开到三级节点')}}</li> <li @click="execCommand('ExpandToLevel', 3)">{{$L('展开到三级节点')}}</li>
@ -54,7 +48,7 @@
<li @click="execCommand('ExpandToLevel', 99)">{{$L('展开全部节点')}}</li> <li @click="execCommand('ExpandToLevel', 99)">{{$L('展开全部节点')}}</li>
</ul> </ul>
</div> </div>
</Tooltip> </ETooltip>
<ETooltip placement="top" :content="$L('居中')"> <ETooltip placement="top" :content="$L('居中')">
<div @click="minder.execCommand('camera', minder.getRoot(), 600)"><i class="ft icon">&#xE61F;</i></div> <div @click="minder.execCommand('camera', minder.getRoot(), 600)"><i class="ft icon">&#xE61F;</i></div>
</ETooltip> </ETooltip>
@ -129,7 +123,10 @@
color: #0285d7; color: #0285d7;
} }
} }
.quickul { }
</style>
<style lang="less">
.minder-editor-quickul {
li { li {
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
@ -165,6 +162,9 @@
} }
} }
} }
.minder-editor-slider {
width: 200px;
margin: 0 6px;
} }
</style> </style>
<script> <script>
@ -219,6 +219,8 @@
minder: null, minder: null,
isHand: false, isHand: false,
bakValue: '', bakValue: '',
zoom: 100,
}; };
}, },
methods: { methods: {
@ -321,6 +323,9 @@
}, },
deep: true, deep: true,
immediate: true immediate: true
},
zoom(val) {
this.execCommand('Zoom', val)
} }
} }
}; };

26
resources/assets/sass/element.scss vendored
View File

@ -39,10 +39,34 @@ $--dropdown-menuItem-hover-color: #606266;
height: 5px; height: 5px;
} }
.el-tooltip__popper.is-light[x-placement^="bottom"] { .el-tooltip__popper {
&.is-light {
border-width: 0; border-width: 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
&[x-placement^="top"] {
.popper__arrow {
border-top-color: hsla(0, 0%, 85%, .5);
}
}
&[x-placement^="bottom"] {
.popper__arrow { .popper__arrow {
border-bottom-color: hsla(0, 0%, 85%, .5); border-bottom-color: hsla(0, 0%, 85%, .5);
} }
} }
&[x-placement^="left"] {
.popper__arrow {
border-left-color: hsla(0, 0%, 85%, .5);
}
}
&[x-placement^="right"] {
.popper__arrow {
border-right-color: hsla(0, 0%, 85%, .5);
}
}
}
}
.el-popover {
border-width: 0;
box-shadow: 0 1px 6px rgba(0,0,0,.2);
}