Spider/spider-flow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

线条颜色、样式设置

Browse Source
This commit is contained in:
mxd 2020-03-26 12:50:51 +08:00
parent 0487423365
commit 8b3cf43eb0
2 changed files with 86 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
spider-flow-web/src/main/resources/static/js/editor.js
View File

@ -1,9 +1,9 @@
var $ = layui.$;
var editor;
var flows;
var cms = [];
var codeMirrorInstances = {};
function renderCodeMirror(){
cms = [];
codeMirrorInstances = {};
$('[codemirror]').each(function(){
var $dom = $(this);
if($dom.attr("rendered") == 'true'){
@ -18,13 +18,16 @@ function renderCodeMirror(){
scrollbarStyle : 'null', //隐藏滚动条
});
initHint(cm);
codeMirrorInstances[$(this).attr('codemirror')] = cm;
cm.on('change',function(){
//cm.closeHint();
//cm.showHint();
$dom.attr('data-value',cm.getValue());
if($dom.attr('codemirror') == 'condition'){
var $select = $('select[name="exception-flow"]');
$select.siblings("div.layui-form-select").find('dl dd[lay-value=' + $select.val() + ']').click();
}
serializeForm();
});
cms.push(cm);
codeMirrorInstances[$(this).attr('codemirror')] = cm;
});
}
function getCellData(cellId,keys){
@ -71,6 +74,15 @@ function serializeForm(){
}
}
}
if(name == 'lineWidth'){
editor.graph.setCellStyles('strokeWidth',value,[cell]);
}
if(name == 'line-style'){
editor.graph.setCellStyles('sharp',undefined,[cell]);
editor.graph.setCellStyles('rounded',undefined,[cell]);
editor.graph.setCellStyles('curved',undefined,[cell]);
editor.graph.setCellStyles(value,1,[cell]);
}
cell.data.set(name,value);
}
});
@ -87,6 +99,13 @@ function serializeForm(){
}
});
$(".properties-container form input[type=checkbox]").each(function(){
if(this.value == 'transmit-variable'){
if($(this).is(":checked")){
editor.graph.setCellStyles('dashed',undefined,[cell]);
}else{
editor.graph.setCellStyles('dashed',1,[cell]);
}
}
cell.data.set(this.value,$(this).is(":checked") ? '1': '0');
});
cell.data.set('shape',shape);
@ -442,8 +461,8 @@ $(function(){
}
});
layui.element.on('tab',function(){
for(var i=0;i<cms.length;i++){
cms[i].refresh();
for(var key in codeMirrorInstances){
codeMirrorInstances[key].refresh();
}
})
layui.form.on('select',serializeForm);

62
spider-flow-web/src/main/resources/static/resources/templates/edge.html
View File

@ -18,7 +18,7 @@
<div class="layui-form-item">
<label class="layui-form-label">流转特性</label>
<div class="layui-input-block">
<select name="exception-flow">
<select name="exception-flow" lay-filter="exceptionFlow">
<option value="0">直接流转</option>
<option value="1" {{d.data.object['exception-flow'] == '1' ? 'selected' : ''}}>当出现异常流转</option>
<option value="2" {{d.data.object['exception-flow'] == '2' ? 'selected' : ''}}>未出现异常流转</option>
@ -39,7 +39,65 @@
<label class="layui-form-label">流转条件</label>
<div class="layui-input-block" placeholder="请输入流转条件" codemirror="condition" data-value="{{=d.data.object.condition}}"></div>
</div>
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">线粗细</label>
<div class="layui-input-block">
<input type="number" min="1" max="10" name="lineWidth" value="{{=d.data.object.lineWidth || 2}}" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">线样式</label>
<div class="layui-input-block">
<select name="line-style">
<option value="sharp">Sharp</option>
<option value="rounded" {{d.data.object['line-style'] == 'rounded' ? 'selected' : ''}}>Rounded</option>
<option value="curved" {{d.data.object['line-style'] == 'curved' ? 'selected' : ''}}>Curved</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">线颜色</label>
<div class="layui-input-block">
<div id="line-color"></div>
<input type="hidden" name="lineColor" value="{{=d.data.object.lineColor || 'black'}}"/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
layui.colorpicker.render({
elem : '#line-color',
color : $('input[name=lineColor]').val(),
done : function(color){
$('input[name=lineColor]').val(color);
editor.graph.setCellStyles('strokeColor',color,[editor.getModel().getCell({{d.cell.id}})]);
}
});
layui.form.on('select(exceptionFlow)',function(data){
var color = $('input[name=lineColor]').val();
if(data.value == '1'){
color = 'red';
}else if(data.value == '2'){
color = '#00ff00';
}else if($('[codemirror=condition]').attr('data-value') != ''){
color = 'blue';
}else{
color = 'black';
}
editor.graph.setCellStyles('strokeColor',color,[editor.getModel().getCell({{d.cell.id}})]);
$('input[name=lineColor]').val(color);
});
$("input[name=lineWidth]").on('change',function(){
serializeForm();
})
</script>