|
@@ -19,9 +19,21 @@
|
|
<span>重做</span>
|
|
<span>重做</span>
|
|
</li>-->
|
|
</li>-->
|
|
<li>缩放窗口</li>
|
|
<li>缩放窗口</li>
|
|
- <li @click="alignItem">
|
|
|
|
- <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
|
|
|
|
- <span>对齐</span>
|
|
|
|
|
|
+ <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>
|
|
<!-- <li>
|
|
<!-- <li>
|
|
<a-icon type="edit" />
|
|
<a-icon type="edit" />
|
|
@@ -55,11 +67,46 @@
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import bus from "@/bus";
|
|
import bus from "@/bus";
|
|
|
|
+import {SGraphLayoutType} from "@saga-web/graph/lib";
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
isLock: false, //是否锁定
|
|
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: {
|
|
methods: {
|
|
@@ -99,8 +146,8 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 对齐item
|
|
// 对齐item
|
|
- alignItem() {
|
|
|
|
-
|
|
|
|
|
|
+ changeAlignItem(val) {
|
|
|
|
+ bus.$emit("changeAlignItem",val);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -113,8 +160,8 @@ export default {
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
ul,
|
|
ul,
|
|
li {
|
|
li {
|
|
- margin: 0;
|
|
|
|
- padding: 0;
|
|
|
|
|
|
+ /*margin: 0;*/
|
|
|
|
+ /*padding: 0;*/
|
|
list-style: none;
|
|
list-style: none;
|
|
}
|
|
}
|
|
#top_toolbar {
|
|
#top_toolbar {
|
|
@@ -148,6 +195,13 @@ li {
|
|
width: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
+ .dropdown-flex{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .down-icon{
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|