|
|
@@ -21,11 +21,6 @@
|
|
|
<div class="sand-elements sand-elements-shape">
|
|
|
<span>基本形状</span>
|
|
|
<div class="elements-row">
|
|
|
- <!-- <img src="~@/assets/img/chart_m/User.png" @mousedown="dragStart('singleArrowBend',$event)"/>
|
|
|
- <img src="~@/assets/img/chart_m/User_act.png" @mousedown="dragStart('doubleArrowBend',$event)"/>
|
|
|
- <img src="~@/assets/img/chart_m/View.png" @mousedown="dragStart('noArrowBoundBend',$event)"/>
|
|
|
- <img src="~@/assets/img/chart_m/View_act.png" @mousedown="dragStart('singleArrowBoundBend',$event)"/>
|
|
|
- <img src="~@/assets/img/chart_m/View_act.png" @mousedown="dragStart('doubleArrowBoundBend',$event)"/> -->
|
|
|
<div class="elements-shape-item" v-for="shape in myNodes" :key="shape.key">
|
|
|
<div
|
|
|
:style="shape.styles"
|
|
|
@@ -33,15 +28,6 @@
|
|
|
{{shape.label}}
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <img
|
|
|
- class="elements-shape-item"
|
|
|
- :src="shape.img"
|
|
|
- v-for="shape in myNodes"
|
|
|
- :key="shape.key"
|
|
|
- :style="shape.styles"
|
|
|
- @mousedown="dragStart(shape,$event)"
|
|
|
- /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sand-elements sand-elements-mind">
|
|
|
@@ -111,109 +97,193 @@
|
|
|
</div>
|
|
|
<div class="sand-main-body">
|
|
|
<div class="sand-mainBody-tool" id="sand-mainBody-tool">
|
|
|
- <!-- <div class="sand-tool-item" :style="{'color':canUndo?'#000000':'#999999'}" @click="toolClickOptions('undo')">撤销</div>
|
|
|
- <div class="sand-tool-item" :style="{'color':canRedo?'#000000':'#999999'}" @click="toolClickOptions('redo')">恢复</div> -->
|
|
|
- <img :src="canUndo?require('@/assets/img/sand_new/tools/undo.png'):require('@/assets/img/sand_new/tools/undo-disabled.png')"
|
|
|
- class="sand-tool-item" @click="toolClickOptions('undo')"/>
|
|
|
- <img :src="canRedo?require('@/assets/img/sand_new/tools/redo.png'):require('@/assets/img/sand_new/tools/redo-disabled.png')"
|
|
|
- class="sand-tool-item" @click="toolClickOptions('redo')"/>
|
|
|
-
|
|
|
- <div class="sand-tool-item" id="sand-tool-fontFamily">
|
|
|
- <el-select v-model="styleOptions.fontF" placeholder="字体" @change="(e)=>toolClickOptions('changeFamily',e)"
|
|
|
- :disabled="toolStatus.nodeDisabled && toolStatus.textDisabled">
|
|
|
- <el-option :label="f.name" :value="f.value" v-for="f in familyOptions" :key="f.name"></el-option>
|
|
|
- </el-select>
|
|
|
+ <el-tooltip content="撤销（Ctrl+Z）" placement="top" :open-delay="250">
|
|
|
+ <img :src="canUndo?require('@/assets/img/sand_new/tools/undo.png'):require('@/assets/img/sand_new/tools/undo-disabled.png')"
|
|
|
+ class="sand-tool-item" @click="toolClickOptions('undo',!canUndo)" :class="nodeTextDisable?'tool-disabled':''"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="恢复（Ctrl+Y）" placement="top" :open-delay="250">
|
|
|
+ <img :src="canRedo?require('@/assets/img/sand_new/tools/redo.png'):require('@/assets/img/sand_new/tools/redo-disabled.png')"
|
|
|
+ class="sand-tool-item" @click="toolClickOptions('redo',!canRedo)" :class="nodeTextDisable?'tool-disabled':''"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <div class="sand-tool-item">
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeFamily',nodeTextDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="字体" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <div class="dropdown-content-text" >{{ styleOptions.fontF }}</div>
|
|
|
+ <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="字体" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item v-for="f in familyOptions" :command="f.value" :key="f.value"
|
|
|
+ :class="styleOptions.fontF==f.value?'style-acitve':''">
|
|
|
+ {{ f.name }}
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
</div>
|
|
|
- <div class="sand-tool-item" id="sand-tool-fontSize">
|
|
|
- <el-select v-model="styleOptions.fontS" placeholder="字号" @change="(e)=>toolClickOptions('changeSize',e)">
|
|
|
- <el-option :label="s.name" :value="s.value" v-for="s in fontSizeOptions" :key="s.name"></el-option>
|
|
|
- </el-select>
|
|
|
+ <div class="sand-tool-item">
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSize',nodeTextDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="字号" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <div class="dropdown-content-text" >{{ styleOptions.fontS }}</div>
|
|
|
+ <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="字号" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item v-for="s in fontSizeOptions" :command="s.name" :key="s.name"
|
|
|
+ :class="styleOptions.fontS==s.name?'style-acitve':''">
|
|
|
+ {{ s.name }}
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
</div>
|
|
|
- <img src="~@/assets/img/sand_new/tools/bold.png"
|
|
|
- class="sand-tool-item" @click="toolClickOptions('changeWeight')"/>
|
|
|
- <img src="~@/assets/img/sand_new/tools/italic.png"
|
|
|
- class="sand-tool-item" @click="toolClickOptions('changeFontStyle')"/>
|
|
|
- <!-- <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeWeight')">B</div>
|
|
|
- <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeFontStyle')">I</div> -->
|
|
|
- <!-- <div class="sand-tool-item" @click="(e)=>toolClickOptions('changeDecoration')">下划线</div> -->
|
|
|
- <img src="~@/assets/img/sand_new/tools/underline.png"
|
|
|
- class="sand-tool-item" @click="toolClickOptions('changeDecoration')"/>
|
|
|
+ <el-tooltip content="加粗（Ctrl+B）" placement="top" :open-delay="250">
|
|
|
+ <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/bold-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/bold.png')"
|
|
|
+ class="sand-tool-item" @click="toolClickOptions('changeWeight',nodeTextDisable)"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="斜体" placement="top" :open-delay="250">
|
|
|
+ <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/italic-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/italic.png')"
|
|
|
+ class="sand-tool-item" @click="toolClickOptions('changeFontStyle',nodeTextDisable)"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="下划线" placement="top" :open-delay="250">
|
|
|
+ <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/underline-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/underline.png')"
|
|
|
+ class="sand-tool-item" @click="toolClickOptions('changeDecoration',nodeTextDisable)"/>
|
|
|
+ </el-tooltip>
|
|
|
<div class="sand-tool-item sand-tool-img">
|
|
|
- <img src="~@/assets/img/sand_new/tools/text-color.png" />
|
|
|
- <el-color-picker
|
|
|
- key="textColor"
|
|
|
- v-model="styleOptions.color"
|
|
|
- size="mini"
|
|
|
- :predefine="colorsOptions"
|
|
|
- @change="(e)=>toolClickOptions('changeColor',e)"
|
|
|
- style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
|
|
|
- >
|
|
|
- </el-color-picker>
|
|
|
+ <img :src="nodeTextDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/text-color-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/text-color.png')" />
|
|
|
+ <el-tooltip content="字体颜色" placement="top" :open-delay="250">
|
|
|
+ <el-color-picker
|
|
|
+ key="textColor"
|
|
|
+ v-model="styleOptions.color"
|
|
|
+ size="mini"
|
|
|
+ :predefine="colorsOptions"
|
|
|
+ @change="(e)=>toolClickOptions('changeColor',e)"
|
|
|
+ style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
|
|
|
+ :disabled="nodeTextDisable"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
<div class="sand-tool-item">
|
|
|
- <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',e)">
|
|
|
- <div class="el-dropdown-link">
|
|
|
- <img src="~@/assets/img/sand_new/tools/line-height.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
|
|
|
- </div>
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineHeight',nodeTextDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="文本行高" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <img :src="nodeTextDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/line-height-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/line-height.png')"
|
|
|
+ style="vertical-align: middle;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="文本行高" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item v-for="lh in lineHeightOptions" :command="lh.value" :key="lh.value"
|
|
|
- :class="styleOptions.lineHeight==lh.value?'style-acitve':''">
|
|
|
- {{ lh.name }}
|
|
|
+ <el-dropdown-item v-for="s in fontSizeOptions" :command="s.name" :key="s.name"
|
|
|
+ :class="styleOptions.fontS==s.name?'style-acitve':''">
|
|
|
+ {{ s.name }}
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div class="sand-tool-item">
|
|
|
- <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',e)">
|
|
|
- <div class="el-dropdown-link">
|
|
|
- <img src="~@/assets/img/sand_new/tools/text-align.png" style="vertical-align: middle;"/>
|
|
|
- <!-- <img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;"> -->
|
|
|
- </div>
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',nodeTextDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="文本对齐" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <img :src="nodeTextDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/text-align-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/text-align.png')"
|
|
|
+ style="vertical-align: middle;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="文本对齐" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item command="middle" :class="styleOptions.textAlign=='middle'?'style-acitve':''">
|
|
|
- <!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
|
|
|
+ <el-dropdown-item command="middle" :class="styleOptions.textAlign=='middle'?'style-acitve':''">
|
|
|
居中
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item command="start">
|
|
|
+ <el-dropdown-item command="start" :class="styleOptions.textAlign=='start'?'style-acitve':''">
|
|
|
居左
|
|
|
- <!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item command="end">
|
|
|
+ <el-dropdown-item command="end" :class="styleOptions.textAlign=='end'?'style-acitve':''">
|
|
|
居右
|
|
|
- <!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div class="sand-tool-item sand-tool-img">
|
|
|
- <img src="~@/assets/img/sand_new/tools/background-color.png" />
|
|
|
- <el-color-picker
|
|
|
- key="backgroundColor"
|
|
|
- v-model="styleOptions.backgroundColor"
|
|
|
- size="mini"
|
|
|
- :predefine="colorsOptions"
|
|
|
- @change="(e)=>toolClickOptions('changeBackgroundColor',e)"
|
|
|
- style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
|
|
|
- >
|
|
|
- </el-color-picker>
|
|
|
+ <img :src="nodeTextDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/background-color-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/background-color.png')" />
|
|
|
+ <el-tooltip content="颜色填充" placement="top" :open-delay="250">
|
|
|
+ <el-color-picker
|
|
|
+ key="backgroundColor"
|
|
|
+ v-model="styleOptions.backgroundColor"
|
|
|
+ size="mini"
|
|
|
+ :predefine="colorsOptions"
|
|
|
+ @change="(e)=>toolClickOptions('changeBackgroundColor',toolStatus.nodeDisabled,e)"
|
|
|
+ style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
|
|
|
+ :disabled="nodeTextDisable"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
<div class="sand-tool-item sand-tool-img">
|
|
|
- <img src="~@/assets/img/sand_new/tools/line-color.png" />
|
|
|
- <el-color-picker
|
|
|
- key="lineColor"
|
|
|
- v-model="styleOptions.lineColor"
|
|
|
- size="mini"
|
|
|
- :predefine="colorsOptions"
|
|
|
- @change="(e)=>toolClickOptions('changeLineColor',e)"
|
|
|
- style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
|
|
|
- >
|
|
|
- </el-color-picker>
|
|
|
+ <img :src="nodeEdgeDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/line-color-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/line-color.png')" />
|
|
|
+ <el-tooltip content="线条颜色" placement="top" :open-delay="250">
|
|
|
+ <el-color-picker
|
|
|
+ key="lineColor"
|
|
|
+ v-model="styleOptions.lineColor"
|
|
|
+ size="mini"
|
|
|
+ :predefine="colorsOptions"
|
|
|
+ @change="(e)=>toolClickOptions('changeLineColor',nodeEdgeDisable,e)"
|
|
|
+ style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
|
|
|
+ :disabled="nodeTextDisable"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
<div class="sand-tool-item">
|
|
|
- <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineWidth',e)">
|
|
|
- <div class="el-dropdown-link">
|
|
|
- <img src="~@/assets/img/sand_new/tools/line-style.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
|
|
|
- </div>
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineWidth',nodeEdgeDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="线条宽度" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <img :src="nodeEdgeDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/line-style-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/line-style.png')"
|
|
|
+ style="vertical-align: middle;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="线条宽度" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item :command="1" :class="styleOptions.lineWidth==1?'style-acitve':''">
|
|
|
1
|
|
|
@@ -228,10 +298,21 @@
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div class="sand-tool-item">
|
|
|
- <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeStrokeDasharray',e)">
|
|
|
- <div class="el-dropdown-link">
|
|
|
- <img src="~@/assets/img/sand_new/tools/line-style.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
|
|
|
- </div>
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeStrokeDasharray',nodeEdgeDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="线条样式" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <img :src="nodeEdgeDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/line-style-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/line-style.png')"
|
|
|
+ style="vertical-align: middle;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="线条样式" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='xu'?'style-acitve':''">
|
|
|
虚线
|
|
|
@@ -243,10 +324,21 @@
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div class="sand-tool-item">
|
|
|
- <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',e)">
|
|
|
- <div class="el-dropdown-link">
|
|
|
- <img src="~@/assets/img/sand_new/tools/line-type.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
|
|
|
- </div>
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',nodeEdgeDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="连线类型" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <img :src="nodeEdgeDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/line-type-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/line-type.png')"
|
|
|
+ style="vertical-align: middle;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="连线类型" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve':''">
|
|
|
直线
|
|
|
@@ -261,30 +353,52 @@
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div class="sand-tool-item">
|
|
|
- <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',e)">
|
|
|
- <div class="el-dropdown-link">
|
|
|
- <img src="~@/assets/img/sand_new/tools/arrow-start.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
|
|
|
- </div>
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',nodeEdgeDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="开始箭头" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <img :src="nodeEdgeDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/arrow-start-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/arrow-start.png')"
|
|
|
+ style="vertical-align: middle;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="开始箭头" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item command="classic" :class="styleOptions.startArrow=='1'?'style-acitve':''">
|
|
|
有
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item :command="null">
|
|
|
+ <el-dropdown-item :command="null" :class="styleOptions.startArrow==null?'style-acitve':''">
|
|
|
无
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div class="sand-tool-item">
|
|
|
- <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',e)">
|
|
|
- <div class="el-dropdown-link">
|
|
|
- <img src="~@/assets/img/sand_new/tools/arrow-end.png" style="vertical-align: middle;width: 16px;height: 16px;"/>
|
|
|
- </div>
|
|
|
+ <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',nodeEdgeDisable,e)"
|
|
|
+ placement="bottom">
|
|
|
+ <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
|
|
|
+ <el-tooltip content="结束箭头" placement="top" :open-delay="250">
|
|
|
+ <div class="dropdown-content" >
|
|
|
+ <img :src="nodeEdgeDisable?
|
|
|
+ require('@/assets/img/sand_new/tools/arrow-end-disabled.png'):
|
|
|
+ require('@/assets/img/sand_new/tools/arrow-end.png')"
|
|
|
+ style="vertical-align: middle;"/>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="结束箭头" placement="top" :open-delay="250">
|
|
|
+ <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item command="classic" :class="styleOptions.endArrow=='1'?'style-acitve':''">
|
|
|
有
|
|
|
</el-dropdown-item>
|
|
|
- <el-dropdown-item :command="null">
|
|
|
+ <el-dropdown-item :command="null" :class="styleOptions.endArrow==null?'style-acitve':''">
|
|
|
无
|
|
|
</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
@@ -679,7 +793,13 @@ const { line} = configOpt;
|
|
|
selectCells: state => state.sand.selectCells,
|
|
|
styleOptions: state => state.sand.styleOptions,
|
|
|
toolStatus:state => state.sand.toolStatus,
|
|
|
- })
|
|
|
+ }),
|
|
|
+ nodeTextDisable(){
|
|
|
+ return this.toolStatus.nodeDisabled && this.toolStatus.textDisabled
|
|
|
+ },
|
|
|
+ nodeEdgeDisable(){
|
|
|
+ return this.toolStatus.nodeDisabled && this.toolStatus.edgeDisabled
|
|
|
+ }
|
|
|
},
|
|
|
created(){
|
|
|
this.getSandboxClassify()
|
|
|
@@ -1210,8 +1330,9 @@ const { line} = configOpt;
|
|
|
})
|
|
|
|
|
|
},500),
|
|
|
- toolClickOptions(type){
|
|
|
- let value = arguments[1]
|
|
|
+ toolClickOptions(type,disabled){
|
|
|
+ if(disabled) return
|
|
|
+ let value = arguments[2]
|
|
|
switch (type) {
|
|
|
case 'undo':
|
|
|
this.graph.undo()
|
|
|
@@ -1792,6 +1913,30 @@ const { line} = configOpt;
|
|
|
.sand-tool-item{
|
|
|
margin-left: 20px;
|
|
|
cursor: pointer;
|
|
|
+ .dropdown-box{
|
|
|
+ position: relative;
|
|
|
+ .dropdown-content{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .dropdown-content-text{
|
|
|
+ width: 28px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .disabled-item{
|
|
|
+ background-color: transparent;
|
|
|
+ cursor: not-allowed;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.sand-tool-img{
|
|
|
height: 16px;
|
|
|
@@ -1802,6 +1947,10 @@ const { line} = configOpt;
|
|
|
width: 16px;
|
|
|
}
|
|
|
}
|
|
|
+ .tool-disabled{
|
|
|
+ color: #C8CDD9;
|
|
|
+ cursor:not-allowed;
|
|
|
+ }
|
|
|
}
|
|
|
.sand-mainBody-chart{
|
|
|
height: calc(100% - 50px);
|
|
|
@@ -2061,11 +2210,6 @@ const { line} = configOpt;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- #sand-tool-fontSize,#sand-tool-fontFamily{
|
|
|
- .el-select{
|
|
|
- width: 58px;
|
|
|
- }
|
|
|
- }
|
|
|
.style-acitve{
|
|
|
color: #0052D9;
|
|
|
}
|
hbchen
