Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

子流程交互优化 #7177

Merged
merged 2 commits into from
Nov 21, 2023
Merged

子流程交互优化 #7177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6690ee7
optimization: 子流程交互优化
ywywZhou Nov 20, 2023
7e1b713
minor: 设置画布缩放最大最小值
ywywZhou Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions frontend/desktop/src/components/common/TemplateCanvas/ToolPanel/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
<div class="zoom-wrapper">
<i
class="common-icon-zoom-add"
:class="{ 'disabled': zoomRatio === 150 }"
v-bk-tooltips="{
content: $t('放大'),
delay: 300,
Expand All @@ -37,6 +38,7 @@
<p class="zoom-ratio">{{ zoomRatio + '%' }}</p>
<i
class="common-icon-zoom-minus"
:class="{ 'disabled': zoomRatio === 25 }"
v-bk-tooltips="{
content: $t('缩小'),
delay: 300,
Expand Down Expand Up @@ -271,6 +273,10 @@
&:hover {
color: #3a84ff;
}
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
.zoom-ratio {
width: 32px;
Expand Down
20 changes: 14 additions & 6 deletions frontend/desktop/src/components/common/TemplateCanvas/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,22 +421,30 @@
}, 0)
},
onZoomIn (pos) {
let zoom = this.$refs.jsFlow.zoom
zoom = zoom < 1.5 ? zoom + 0.25 : 1.5
if (pos) {
const { x, y } = pos
this.$refs.jsFlow.zoomIn(1.1, x, y)
const offsetX = x - x * zoom
const offsetY = y - y * zoom
this.$refs.jsFlow.setZoom(zoom, offsetX, offsetY)
} else {
this.$refs.jsFlow.zoomIn(1.1, 0, 0)
this.$refs.jsFlow.setZoom(zoom, 0, 0)
}
this.zoomRatio = Math.round(this.$refs.jsFlow.zoom * 100)
this.zoomRatio = Math.round(zoom * 100)
},
onZoomOut (pos) {
let zoom = this.$refs.jsFlow.zoom
zoom = zoom > 0.25 ? zoom - 0.25 : 0.25
if (pos) {
const { x, y } = pos
this.$refs.jsFlow.zoomOut(0.9, x, y)
const offsetX = x - x * zoom
const offsetY = y - y * zoom
this.$refs.jsFlow.setZoom(zoom, offsetX, offsetY)
} else {
this.$refs.jsFlow.zoomOut(0.9, 0, 0)
this.$refs.jsFlow.setZoom(zoom, 0, 0)
}
this.zoomRatio = Math.round(this.$refs.jsFlow.zoom * 100)
this.zoomRatio = Math.round(zoom * 100)
},
onResetPosition () {
this.$refs.jsFlow.resetPosition()
Expand Down
81 changes: 36 additions & 45 deletions frontend/desktop/src/pages/task/TaskExecute/ExecuteInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
</div>
<div :class="['scroll-box', { 'subprocess-scroll': subProcessPipeline }]">
<div
:class="['sub-process']"
class="sub-process"
:style="{ height: `${subProcessHeight}px` }"
v-if="subProcessPipeline"
v-bkloading="{ isLoading: subprocessLoading, opacity: 1, zIndex: 100 }">
<TemplateCanvas
Expand All @@ -46,11 +47,13 @@
<div class="flow-option">
<i
class="bk-icon icon-narrow-line"
:class="{ 'disabled': zoom === 0.25 }"
v-bk-tooltips.top="$t('缩小')"
@click="onZoomOut">
</i>
<i
class="bk-icon icon-enlarge-line"
:class="{ 'disabled': zoom === 1.5 }"
v-bk-tooltips.top="$t('放大')"
@click="onZoomIn">
</i>
Expand Down Expand Up @@ -341,6 +344,8 @@
subprocessTasks: [],
subprocessNodeStatus: {},
subNodesExpanded: [], // 节点树展开的独立子流程节点
subProcessHeight: 160,
zoom: 0.75,
notPerformedSubNode: false // 是否为未执行的独立子流程节点
}
},
Expand Down Expand Up @@ -973,20 +978,14 @@
}
},
onZoomOut () {
let jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance = jsFlowInstance.$refs.jsFlow
jsFlowInstance.zoomOut(0.8)
this.$nextTick(() => {
this.setCanvasZoomPosition(true)
})
const jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance.onZoomOut()
this.zoom = jsFlowInstance.zoomRatio / 100
},
onZoomIn () {
let jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance = jsFlowInstance.$refs.jsFlow
jsFlowInstance.zoomIn(1.2)
this.$nextTick(() => {
this.setCanvasZoomPosition(true)
})
const jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance.onZoomIn()
this.zoom = jsFlowInstance.zoomRatio / 100
},
onTabChange (name) {
this.curActiveTab = name
Expand Down Expand Up @@ -1061,39 +1060,29 @@
return top > canvasTop && top < canvasTop + height && left > canvasLeft && left < canvasLeft + width
},
// 画布初始化时缩放比偏移
setCanvasZoomPosition (zoom) {
setCanvasZoomPosition () {
if (!this.canvasData.locations) return
// 获取画布上下左右最大坐标
const xList = this.canvasData.locations.map(node => node.x)
const yList = this.canvasData.locations.map(node => node.y)
const minX = Math.min(...xList)
const maxX = Math.max(...xList)
const minY = Math.min(...yList)
const maxY = Math.max(...yList)
const maxXNodeId = this.canvasData.locations.find(node => node.x === maxX).id
const maxYNodeId = this.canvasData.locations.find(node => node.y === maxY).id
const { width } = this.$el.querySelector(`#${maxXNodeId}`).getBoundingClientRect()
const { height } = this.$el.querySelector(`#${maxYNodeId}`).getBoundingClientRect()
const netHeight = maxY - minY + height + 60
const netWidth = maxX - minX + width + 80
// 设置默认高度
const subprocessDom = this.$el.querySelector('.sub-process')
const { height: canvasHeight, width: canvasWidth } = subprocessDom.getBoundingClientRect()
// 画布实例
const { top } = subprocessDom.getBoundingClientRect()
this.subProcessHeight = window.innerHeight - top - 320
// 设置缩放比例
let jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance = jsFlowInstance.$refs.jsFlow
let ratio
if (zoom) {
ratio = jsFlowInstance.zoom
} else {
// 最大比例0.75
ratio = Math.min(canvasHeight / netHeight, canvasWidth / netWidth)
ratio = ratio > 0.75 ? 0.75 : ratio
jsFlowInstance && jsFlowInstance.zoomOut(ratio, 0, 0)
}
jsFlowInstance = jsFlowInstance && jsFlowInstance.$refs.jsFlow
jsFlowInstance && jsFlowInstance.setZoom(this.zoom, 0, 0)
// 设置偏移量
const offsetX = canvasWidth / 2 - (minX - 30 + netWidth / 2) * ratio
const offsetY = canvasHeight / 2 - (minY + netHeight / 2) * ratio
jsFlowInstance.setCanvasPosition(offsetX, offsetY, true)
const startNode = this.canvasData.locations.find(item => item.type === 'startpoint')
// 判断dom是否存在当前视图中
const nodeEl = document.querySelector(`#${startNode.id} .canvas-node-item`)
if (!nodeEl) return
const isInViewPort = this.judgeInViewPort(nodeEl)
if (!isInViewPort) {
let jsFlowInstance = this.$refs.subProcessCanvas
jsFlowInstance = jsFlowInstance.$refs.jsFlow
const offsetX = (20 - startNode.x) * this.zoom
const offsetY = (160 - startNode.y) * this.zoom
jsFlowInstance && jsFlowInstance.setCanvasPosition(offsetX, offsetY, true)
}
},

toggleNodeActive (id, isActive) {
Expand Down Expand Up @@ -1473,8 +1462,7 @@
const resizeProxy = this.$refs.resizeProxy
resizeProxy.style.visibility = 'hidden'
resizeMask.style.display = 'none'
const subProcessDom = document.querySelector('.sub-process')
subProcessDom.style.height = resizeProxy.style.top
this.subProcessHeight = resizeProxy.style.top.slice(0, -2)
document.removeEventListener('mousemove', this.handleMouseMove)
document.removeEventListener('mouseup', this.handleMouseUp)
}
Expand Down Expand Up @@ -1618,7 +1606,6 @@
display: none;
}
.task-node {
box-shadow: none !important;
&.actived {
.node-name {
border-color: #b4becd !important;
Expand Down Expand Up @@ -1654,6 +1641,10 @@
&:hover {
color: #3a84ff;
}
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
}
}
Expand Down
16 changes: 13 additions & 3 deletions frontend/desktop/src/pages/task/TaskExecute/TaskOperation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
:width="sidebarWidth"
:quick-close="true"
:before-close="onBeforeClose"
@hidden="onHiddenSideslider">
@hidden="onHiddenSideSlider">
<div slot="header">
<div class="header">
<span>{{sideSliderTitle}}</span>
Expand Down Expand Up @@ -496,6 +496,12 @@
},
adminView () {
return this.hasAdminPerm && this.$route.query.is_admin === 'true'
},
// 父流程是否存在子流程节点
hasSubprocessNode () {
return Object.values(this.pipelineData.activities).some(item => {
return item.type !== 'ServiceActivity' || item.component?.code === 'subprocess_plugin'
})
}
},
mounted () {
Expand Down Expand Up @@ -1939,7 +1945,6 @@
openNodeInfoPanel (type, name, isCondition = false) {
this.sideSliderTitle = name
this.isNodeInfoPanelShow = true
this.sidebarWidth = 960
this.nodeInfoType = type
this.isCondition = isCondition
},
Expand Down Expand Up @@ -2058,6 +2063,10 @@
this.convergeInfo = {}
this.nodeIds = {}
this.nodeData = this.getOrderedTree(this.completePipelineData)
// 如果选中节点为子流程节点则侧栏宽度默认为最大值
if (this.hasSubprocessNode) {
this.sidebarWidth = window.innerWidth - 400
}
this.openNodeInfoPanel('executeInfo', i18n.t('节点详情'))
},
onOpenConditionEdit (data, isCondition = true) {
Expand Down Expand Up @@ -2416,10 +2425,11 @@
}
}
},
onHiddenSideslider () {
onHiddenSideSlider () {
this.subProcessTaskId = null
this.nodeInfoType = ''
this.retryNodeName = ''
this.sidebarWidth = 960
this.updateNodeActived(this.nodeDetailConfig.node_id, false)
},
// 判断RUNNING的节点是否有暂停节点，若有，则将当前任务状态标记为暂停状态
Expand Down
Loading