Browse Source
* [Feature] Add grid layout and optimize DAG style * [Improvement] Add process definition status label and code optimization * [Feature] add DAG node search bar * [Feature] Add DAG scale bar * [Improvement] Open pre-tasks settings for all tasks * [Fix] Fix ut * [Fix] Replace /deep/ with ::v-deep * [Fix] Fix code smell3.0.0/version-upgrade
wangyizhi
3 years ago
committed by
GitHub
15 changed files with 654 additions and 298 deletions
@ -0,0 +1,113 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
<template> |
||||
<el-dialog |
||||
:title="$t('Format DAG')" |
||||
:visible.sync="visible" |
||||
width="500px" |
||||
class="dag-layout-modal" |
||||
:append-to-body="true" |
||||
> |
||||
<el-form |
||||
ref="form" |
||||
:model="form" |
||||
label-width="100px" |
||||
class="dag-layout-form" |
||||
> |
||||
<el-form-item :label="$t('layoutType')"> |
||||
<el-radio-group v-model="form.type"> |
||||
<el-radio label="grid">{{ $t("gridLayout") }}</el-radio> |
||||
<el-radio label="dagre">{{ $t("dagreLayout") }}</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item :label="$t('rows')" v-if="form.type === LAYOUT_TYPE.GRID"> |
||||
<el-input-number |
||||
v-model="form.rows" |
||||
:min="0" |
||||
size="small" |
||||
></el-input-number> |
||||
</el-form-item> |
||||
<el-form-item :label="$t('cols')" v-if="form.type === LAYOUT_TYPE.GRID"> |
||||
<el-input-number |
||||
v-model="form.cols" |
||||
:min="0" |
||||
size="small" |
||||
></el-input-number> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="close">{{ $t("Cancel") }}</el-button> |
||||
<el-button size="small" type="primary" @click="submit">{{ |
||||
$t("Confirm") |
||||
}}</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</template> |
||||
<script> |
||||
export const LAYOUT_TYPE = { |
||||
GRID: 'grid', |
||||
DAGRE: 'dagre' |
||||
} |
||||
|
||||
export default { |
||||
data () { |
||||
return { |
||||
visible: false, |
||||
form: { |
||||
type: LAYOUT_TYPE.DAGRE, |
||||
rows: 0, |
||||
cols: 0, |
||||
padding: 50, |
||||
ranksep: 50, |
||||
nodesep: 50 |
||||
}, |
||||
LAYOUT_TYPE |
||||
} |
||||
}, |
||||
methods: { |
||||
show () { |
||||
this.visible = true |
||||
}, |
||||
close () { |
||||
this.visible = false |
||||
}, |
||||
submit () { |
||||
this.$emit('submit', this.form) |
||||
this.close() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.dag-layout-modal { |
||||
::v-deep .el-dialog__header { |
||||
border-bottom: solid 1px #d4d4d4; |
||||
} |
||||
|
||||
::v-deep .dag-layout-form { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
::v-deep .el-radio { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.el-form-item { |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,145 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { |
||||
NODE, |
||||
EDGE, |
||||
PORT, |
||||
NODE_HOVER, |
||||
PORT_HOVER, |
||||
EDGE_HOVER, |
||||
PORT_SELECTED, |
||||
NODE_SELECTED, |
||||
EDGE_SELECTED, |
||||
X6_PORT_OUT_NAME |
||||
} from './x6-helper' |
||||
import _ from 'lodash' |
||||
|
||||
export default { |
||||
data () { |
||||
return { |
||||
hoverCell: null |
||||
} |
||||
}, |
||||
methods: { |
||||
bindStyleEvent (graph) { |
||||
// nodes and edges hover
|
||||
graph.on('cell:mouseenter', (data) => { |
||||
const { cell, e } = data |
||||
const isStatusIcon = (tagName) => |
||||
tagName && |
||||
(tagName.toLocaleLowerCase() === 'em' || |
||||
tagName.toLocaleLowerCase() === 'body') |
||||
if (!isStatusIcon(e.target.tagName)) { |
||||
this.hoverCell = cell |
||||
this.updateCellStyle(cell, graph) |
||||
} |
||||
}) |
||||
graph.on('cell:mouseleave', ({ cell }) => { |
||||
this.hoverCell = null |
||||
this.updateCellStyle(cell, graph) |
||||
}) |
||||
// select
|
||||
graph.on('cell:selected', ({ cell }) => { |
||||
this.updateCellStyle(cell, graph) |
||||
}) |
||||
graph.on('cell:unselected', ({ cell }) => { |
||||
this.updateCellStyle(cell, graph) |
||||
}) |
||||
}, |
||||
updateCellStyle (cell, graph) { |
||||
if (cell.isEdge()) { |
||||
this.setEdgeStyle(cell, graph) |
||||
} else if (cell.isNode()) { |
||||
this.setNodeStyle(cell, graph) |
||||
} |
||||
}, |
||||
/** |
||||
* Set node style |
||||
* @param {Node} node |
||||
* @param {Graph} graph |
||||
*/ |
||||
setNodeStyle (node, graph) { |
||||
const isHover = node === this.hoverCell |
||||
const isSelected = graph.isSelected(node) |
||||
const portHover = _.cloneDeep(PORT_HOVER.groups[X6_PORT_OUT_NAME].attrs) |
||||
const portSelected = _.cloneDeep(PORT_SELECTED.groups[X6_PORT_OUT_NAME].attrs) |
||||
const portDefault = _.cloneDeep(PORT.groups[X6_PORT_OUT_NAME].attrs) |
||||
const nodeHover = _.merge(_.cloneDeep(NODE.attrs), NODE_HOVER.attrs) |
||||
const nodeSelected = _.merge(_.cloneDeep(NODE.attrs), NODE_SELECTED.attrs) |
||||
|
||||
let img = null |
||||
let nodeAttrs = null |
||||
let portAttrs = null |
||||
|
||||
if (isHover || isSelected) { |
||||
img = require(`../images/task-icos/${node.data.taskType.toLocaleLowerCase()}_hover.png`) |
||||
if (isHover) { |
||||
nodeAttrs = nodeHover |
||||
portAttrs = _.merge(portDefault, portHover) |
||||
} else { |
||||
nodeAttrs = nodeSelected |
||||
portAttrs = _.merge(portDefault, portSelected) |
||||
} |
||||
} else { |
||||
img = require(`../images/task-icos/${node.data.taskType.toLocaleLowerCase()}.png`) |
||||
nodeAttrs = NODE.attrs |
||||
portAttrs = portDefault |
||||
} |
||||
node.setAttrByPath('image/xlink:href', img) |
||||
node.setAttrs(nodeAttrs) |
||||
node.setPortProp( |
||||
X6_PORT_OUT_NAME, |
||||
'attrs', |
||||
portAttrs |
||||
) |
||||
}, |
||||
/** |
||||
* Set edge style |
||||
* @param {Edge} edge |
||||
* @param {Graph} graph |
||||
*/ |
||||
setEdgeStyle (edge, graph) { |
||||
const isHover = edge === this.hoverCell |
||||
const isSelected = graph.isSelected(edge) |
||||
const labelName = this.getEdgeLabelName ? this.getEdgeLabelName(edge) : '' |
||||
let edgeProps = null |
||||
|
||||
if (isHover) { |
||||
edgeProps = _.merge(_.cloneDeep(EDGE), EDGE_HOVER) |
||||
} else if (isSelected) { |
||||
edgeProps = _.merge(_.cloneDeep(EDGE), EDGE_SELECTED) |
||||
} else { |
||||
edgeProps = _.cloneDeep(EDGE) |
||||
} |
||||
|
||||
edge.setAttrs(edgeProps.attrs) |
||||
edge.setLabels([ |
||||
{ |
||||
..._.merge( |
||||
{ |
||||
attrs: _.cloneDeep(edgeProps.defaultLabel.attrs) |
||||
}, |
||||
{ |
||||
attrs: { label: { text: labelName } } |
||||
} |
||||
) |
||||
} |
||||
]) |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue