|
|
@@ -4,19 +4,22 @@
|
|
|
<div class="cell-style">
|
|
|
<!-- 撤销 -->
|
|
|
<ToolItem tooltip="撤销" toolkey="undo">
|
|
|
- <el-button type="text" class="tool-item"
|
|
|
- :disabled="!canUndo"
|
|
|
- @click="handleGraphHistory('undo')">
|
|
|
- <i class="el-icon-arrow-left"></i>
|
|
|
- </el-button>
|
|
|
+ <div class="tool-item">
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/undo.svg`)"
|
|
|
+ :class="{'img-disabled':!canUndo,'actived':canUndo}"
|
|
|
+ @click="handleGraphHistory('undo')">
|
|
|
+ <span class="disabled" v-if="!canUndo"></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
</ToolItem>
|
|
|
<!-- 恢复 -->
|
|
|
<ToolItem tooltip="恢复" toolkey="undo">
|
|
|
- <el-button type="text" class="tool-item"
|
|
|
- :disabled="!canRedo"
|
|
|
- @click="handleGraphHistory('redo')">
|
|
|
- <i class="el-icon-arrow-right"></i>
|
|
|
- </el-button>
|
|
|
+ <div class="tool-item">
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/redo.svg`)"
|
|
|
+ :class="{'img-disabled':!canRedo,'actived':canRedo}"
|
|
|
+ @click="handleGraphHistory('redo')">
|
|
|
+ <span class="disabled" v-if="!canRedo"></span>
|
|
|
+ </div>
|
|
|
</ToolItem>
|
|
|
<!-- 字体 暂定-->
|
|
|
<!-- 字号 -->
|
|
|
@@ -36,7 +39,8 @@
|
|
|
<!-- 加粗 -->
|
|
|
<ToolItem tooltip="加粗" toolkey="fontWeight">
|
|
|
<span class="tool-item">
|
|
|
- <span class="item-text"
|
|
|
+ <span class="item-text" :class="{'text-disabled':!isSelectNode,'text-actived':isSelectNode}"
|
|
|
+ style="{font-size: 16px;font-weight: bold;}"
|
|
|
@click="changeStyleToggle('label/fontWeight')">B</span>
|
|
|
<span class="disabled" v-if="!isSelectNode"></span>
|
|
|
</span>
|
|
|
@@ -45,7 +49,10 @@
|
|
|
<ToolItem tooltip="斜体" toolkey="fontstyle">
|
|
|
<span class="tool-item">
|
|
|
<span style="font-style: italic;" class="item-text"
|
|
|
- @click="changeStyleToggle('label/fontStyle')"> I </span>
|
|
|
+ @click="changeStyleToggle('label/fontStyle')">
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/fontStyle.svg`)"
|
|
|
+ :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
|
|
|
+ </span>
|
|
|
<span class="disabled" v-if="!isSelectNode"></span>
|
|
|
</span>
|
|
|
</ToolItem>
|
|
|
@@ -53,14 +60,20 @@
|
|
|
<ToolItem tooltip="下划线" toolkey="textDecoration">
|
|
|
<span class="tool-item">
|
|
|
<span style="text-decoration: underline;" class="item-text"
|
|
|
- @click="changeStyleToggle('label/textDecoration')">U</span>
|
|
|
+ @click="changeStyleToggle('label/textDecoration')">
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/fontText.svg`)"
|
|
|
+ :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
|
|
|
+ </span>
|
|
|
<span class="disabled" v-if="!isSelectNode"></span>
|
|
|
</span>
|
|
|
</ToolItem>
|
|
|
<!-- 字体颜色 -->
|
|
|
<ToolItem tooltip="字体颜色" toolkey="textDecoration">
|
|
|
<span class="tool-item">
|
|
|
- <label for="label/fill" :style="`color:${color}`">T</label>
|
|
|
+ <label for="label/fill" :style="`color:${color}`">
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/fontColor.svg`)"
|
|
|
+ :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
|
|
|
+ </label>
|
|
|
<input type="color" id="label/fill" style="width: 0;height: 0;visibility: hidden;"
|
|
|
:value="nodeStyle.color"
|
|
|
@input="valueChange"/>
|
|
|
@@ -72,7 +85,10 @@
|
|
|
<!-- 节点颜色填充 -->
|
|
|
<ToolItem tooltip="填充颜色" toolkey="fillColor">
|
|
|
<span class="tool-item">
|
|
|
- <label for="body/fill" :style="`color:${fillColor}`">填充颜色</label>
|
|
|
+ <label for="body/fill" :style="`color:${fillColor}`">
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/fillColor.svg`)"
|
|
|
+ :class="{'img-disabled':!isSelectNode,'actived':isSelectNode}">
|
|
|
+ </label>
|
|
|
<input type="color" id="body/fill" style="width: 0;height: 0;visibility: hidden;"
|
|
|
:value="nodeStyle.fill"
|
|
|
@input="valueChange"/>
|
|
|
@@ -82,7 +98,10 @@
|
|
|
<!-- 节点/线条边框颜色 -->
|
|
|
<ToolItem tooltip="边框颜色" toolkey="borderColor">
|
|
|
<span class="tool-item">
|
|
|
- <label for="storke" :style="`color:${borderColor}`">边框颜色</label>
|
|
|
+ <label for="storke" :style="`color:${borderColor}`">
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/stokeColor.svg`)"
|
|
|
+ :class="{'img-disabled':!isSelectNode&&!isSelectEdge,'actived':isSelectNode||isSelectEdge}">
|
|
|
+ </label>
|
|
|
<input type="color" id="storke" style="width: 0;height: 0;visibility: hidden;"
|
|
|
:value="cellStyle.stroke"
|
|
|
@input="valueChange"/>
|
|
|
@@ -107,7 +126,7 @@
|
|
|
<ToolItem tooltip="边框样式" toolkey="stokeWidth">
|
|
|
<el-dropdown @command="changeCellStyle" trigger="click" class="tool-item">
|
|
|
<span class="el-dropdown-link tool-item">
|
|
|
- 边框样式
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/stokeStyle.svg`)">
|
|
|
<i class="el-icon-caret-bottom"></i>
|
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
@@ -125,7 +144,8 @@
|
|
|
<ToolItem tooltip="开始箭头" toolkey="stokeWidth">
|
|
|
<el-dropdown trigger="click" @command="changeStyle" class="tool-item">
|
|
|
<div class="el-dropdown-link">
|
|
|
- <i class="iconfont icon-arrow-left" style="color:'#000';fontSize:12px"></i>
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/arrow-left.svg`)"
|
|
|
+ :class="{'img-disabled':!isSelectEdge,'actived':isSelectEdge}">
|
|
|
<i class="el-icon-arrow-down" style="font-size:12px;"></i>
|
|
|
</div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
@@ -136,7 +156,7 @@
|
|
|
<i class="iconfont icon--shixian" style="color:'#000';fontSize:32px"></i>
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
- <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
|
|
|
+ <span class="disabled" v-if="!isSelectEdge"></span>
|
|
|
</el-dropdown>
|
|
|
</ToolItem>
|
|
|
|
|
|
@@ -144,7 +164,8 @@
|
|
|
<ToolItem tooltip="结束箭头" toolkey="stokeWidth">
|
|
|
<el-dropdown trigger="click" @command="changeStyle" class="tool-item">
|
|
|
<div class="el-dropdown-link">
|
|
|
- <i class="iconfont icon-arrow-right" style="color:'#000';fontSize:12px"></i>
|
|
|
+ <img :src="require(`@/assets/icons/chartFrame/arrow-right.svg`)"
|
|
|
+ :class="{'img-disabled':!isSelectEdge,'actived':isSelectEdge}">
|
|
|
<i class="el-icon-arrow-down" style="font-size:12px;"></i>
|
|
|
</div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
@@ -324,13 +345,25 @@ export default {
|
|
|
.cell-style{
|
|
|
display: flex;
|
|
|
gap:0 20px;
|
|
|
+ overflow:hidden;
|
|
|
.tool-item{
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
+ .img-disabled{
|
|
|
+ transform:translateY(50px);
|
|
|
+ filter:drop-shadow(#C8CDD9 0px -50px 0px);
|
|
|
+ }
|
|
|
+ .actived{
|
|
|
+ transform:translateY(50px);
|
|
|
+ filter:drop-shadow(#333 0px -50px 0px);
|
|
|
+ }
|
|
|
.item-text{
|
|
|
padding:0 2px;
|
|
|
- &.bold-act{
|
|
|
- font-weight: bold;
|
|
|
+ &.text-disabled{
|
|
|
+ color:#C8CDD9;
|
|
|
+ }
|
|
|
+ &.text-actived{
|
|
|
+ color:#333;
|
|
|
}
|
|
|
}
|
|
|
.disabled {
|
cxmo
