|
@@ -18,10 +18,29 @@
|
|
|
<a-icon type="edit" />
|
|
|
<span>重做</span>
|
|
|
</li>-->
|
|
|
- <li>缩放窗口</li>
|
|
|
- <li @click="alignItem">
|
|
|
- <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
|
|
|
- <span>对齐</span>
|
|
|
+ <li class="zoom-window">
|
|
|
+ <div>
|
|
|
+ <img class="lock" :src="require(`./../../assets/images/缩小.png`)" alt />
|
|
|
+ <span class="percentage">100%</span>
|
|
|
+ <img class="lock" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
|
|
|
+ </div>
|
|
|
+ <span>缩放窗口</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a-dropdown :trigger="['click']">
|
|
|
+ <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
|
|
|
+ <div>
|
|
|
+ <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt/>
|
|
|
+ <div>对齐</div>
|
|
|
+ </div>
|
|
|
+ <a-icon type="caret-down" class="down-icon"/>
|
|
|
+ </div>
|
|
|
+ <a-menu slot="overlay">
|
|
|
+ <a-menu-item v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
|
|
|
+ {{item.label}}
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
</li>
|
|
|
<!-- <li>
|
|
|
<a-icon type="edit" />
|
|
@@ -55,11 +74,46 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from "@/bus";
|
|
|
+import {SGraphLayoutType} from "@saga-web/graph/lib";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
isLock: false, //是否锁定
|
|
|
- focusItem: null
|
|
|
+ focusItem: null,
|
|
|
+ alignmentOptions:[ //对齐数据
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Left,
|
|
|
+ label:'左对齐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Right,
|
|
|
+ label:'右对齐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Top,
|
|
|
+ label:'顶对齐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Bottom,
|
|
|
+ label:'底对齐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Center,
|
|
|
+ label:'水平居中对齐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Middle,
|
|
|
+ label:'垂直居中对齐'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Vertical,
|
|
|
+ label:'垂直分布'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value:SGraphLayoutType.Horizontal,
|
|
|
+ label:'水平分布'
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -99,8 +153,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
// 对齐item
|
|
|
- alignItem() {
|
|
|
-
|
|
|
+ changeAlignItem(val) {
|
|
|
+ bus.$emit("changeAlignItem",val);
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -113,8 +167,8 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
ul,
|
|
|
li {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
+ /*margin: 0;*/
|
|
|
+ /*padding: 0;*/
|
|
|
list-style: none;
|
|
|
}
|
|
|
#top_toolbar {
|
|
@@ -139,7 +193,9 @@ li {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
- width: 48px;
|
|
|
+ /*width: 62px;*/
|
|
|
+ padding: 0 7px;
|
|
|
+ margin-left: 7px;
|
|
|
font-size: 12px;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
@@ -148,6 +204,25 @@ li {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
}
|
|
|
+ .percentage{
|
|
|
+ border-bottom: 1px solid #C3C7CB;
|
|
|
+ margin: 0 13px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .dropdown-flex{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .down-icon{
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:hover{
|
|
|
+ background: #F5F6F7;
|
|
|
+ }
|
|
|
+ .zoom-window{
|
|
|
+ border-left:1px solid #8D9399;
|
|
|
+ border-right:1px solid #8D9399;
|
|
|
}
|
|
|
}
|
|
|
}
|