处理点过 update 之后 重新拖动 点击 unzoom 不生效的问题

处理刷选完毕放大后,点击 unzoom 不能选中拖拽的问题
This commit is contained in:
任珮宇 2024-01-18 11:01:51 +08:00
parent 90a0140b91
commit 2ec6c7f3cd

View File

@ -171,8 +171,10 @@ const dragOption = {
position: [], position: [],
draggable: true, draggable: true,
style: { style: {
fill: 'rgba(0,0,0,0)', // fill: 'rgba(0,0,0,0.03)', 便 fill: 'rgba(0,0,0,0)',
stroke: 'rgba(0,0,0,0)', // stroke: 'rgba(0,0,0,0.03)', 便 stroke: 'rgba(0,0,0,0)',
// fill: 'rgba(255,0,0,0.5)', // 便
// stroke: 'rgba(255,0,0,0.5)', // 便
lineWidth: 10, lineWidth: 10,
}, },
cursor: 'move', cursor: 'move',
@ -190,8 +192,10 @@ const dragOption = {
position: [], position: [],
draggable: true, draggable: true,
style: { style: {
fill: 'rgba(0,0,0,0)', // fill: 'rgba(0,0,0,0.03)', 便 fill: 'rgba(0,0,0,0)',
stroke: 'rgba(0,0,0,0)', // stroke: 'rgba(0,0,0,0.03)', 便 stroke: 'rgba(0,0,0,0)',
// fill: 'rgba(255,0,0,0.5)', // 便
// stroke: 'rgba(255,0,0,0.5)', // 便
lineWidth: 10, lineWidth: 10,
}, },
cursor: 'move', cursor: 'move',
@ -575,6 +579,8 @@ export default {
}, },
// unzoom // unzoom
handleUnzoom() { handleUnzoom() {
const [graphic1, graphic2] = this.dragOption.graphic
const { minX, maxX, minY, maxY, color } = this.boundaryData
this.twoDOption.xAxis.min = 0 this.twoDOption.xAxis.min = 0
this.twoDOption.xAxis.max = 1024 this.twoDOption.xAxis.max = 1024
this.twoDOption.yAxis.min = 0 this.twoDOption.yAxis.min = 0
@ -582,8 +588,19 @@ export default {
// this.emitRangeChange([0, 256, 0, 256]) // this.emitRangeChange([0, 256, 0, 256])
this.reDrawRect() this.reDrawRect()
this.buildScatterList() this.buildScatterList()
this.$nextTick(() => {
const myChart = this.$refs.chartTwoDRef.getChartInstance()
graphic1.position = [
myChart.convertToPixel({ xAxisId: '2' }, minX),
myChart.convertToPixel({ yAxisId: '3' }, maxY),
]
graphic2.position = [
myChart.convertToPixel({ xAxisId: '2' }, maxX),
myChart.convertToPixel({ yAxisId: '3' }, maxY),
]
myChart.setOption(this.dragOption)
})
}, },
// //
handleMouseDown() { handleMouseDown() {
@ -607,6 +624,8 @@ export default {
}, },
// //
handleBrushEnd(param) { handleBrushEnd(param) {
const [graphic1, graphic2] = this.dragOption.graphic
const { minX: lineMinX, maxX: lineMaxX, minY: lineMinY, maxY: lineMaxY } = this.boundaryData
const chart = this.$refs.chartTwoDRef.getChartInstance() const chart = this.$refs.chartTwoDRef.getChartInstance()
const areas = param.areas[0] const areas = param.areas[0]
if (areas) { if (areas) {
@ -625,12 +644,46 @@ export default {
this.twoDOption.xAxis.max = rangeNumberFuncX(x2) this.twoDOption.xAxis.max = rangeNumberFuncX(x2)
this.twoDOption.yAxis.min = rangeNumberFuncY(y1) this.twoDOption.yAxis.min = rangeNumberFuncY(y1)
this.twoDOption.yAxis.max = rangeNumberFuncY(y2) this.twoDOption.yAxis.max = rangeNumberFuncY(y2)
this.buildScatterList()
this.$nextTick(() => {
const myChart = this.$refs.chartTwoDRef.getChartInstance()
if (lineMinX > rangeNumberFuncX(x1) && lineMinX < rangeNumberFuncX(x2) && lineMaxX > rangeNumberFuncX(x2)) {
graphic1.position = [
myChart.convertToPixel({ xAxisId: '2' }, lineMinX),
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
]
myChart.setOption(this.dragOption)
} else if (
lineMinX < rangeNumberFuncX(x1) &&
lineMaxX > rangeNumberFuncX(x1) &&
lineMaxX < rangeNumberFuncX(x2)
) {
graphic2.position = [
myChart.convertToPixel({ xAxisId: '2' }, lineMaxX),
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
]
myChart.setOption(this.dragOption)
} else if (
lineMinX > rangeNumberFuncX(x1) &&
lineMinX < rangeNumberFuncX(x2) &&
lineMaxX > rangeNumberFuncX(x1) &&
lineMaxX < rangeNumberFuncX(x2)
) {
graphic1.position = [
myChart.convertToPixel({ xAxisId: '2' }, lineMinX),
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
]
graphic2.position = [
myChart.convertToPixel({ xAxisId: '2' }, lineMaxX),
myChart.convertToPixel({ yAxisId: '3' }, rangeNumberFuncY(y2)),
]
myChart.setOption(this.dragOption)
}
})
// this.emitRangeChange([x1, x2, y1, y2]) // this.emitRangeChange([x1, x2, y1, y2])
// this.reDrawRect() // this.reDrawRect()
this.buildScatterList()
} }
this.clearBrush(chart) this.clearBrush(chart)