You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "GodsDusk (via GitHub)" <gi...@apache.org> on 2023/02/02 03:38:30 UTC
[GitHub] [echarts] GodsDusk opened a new issue, #18224: [Bug] nodes can only drag once while axis is small
GodsDusk opened a new issue, #18224:
URL: https://github.com/apache/echarts/issues/18224
### Version
5.4.1
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
here is the code
```js
const symbolSize = 20;
const data = [
[0, 0]
];
option = {
title: {
text: 'Try Dragging these Points',
left: 'center'
},
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return (
'X: ' +
params.data[0].toFixed(2) +
'<br>Y: ' +
params.data[1].toFixed(2)
);
}
},
grid: {
top: '8%',
bottom: '12%'
},
xAxis: {
min: 0,
max: 7, // 70
type: 'value',
axisLine: { onZero: false }
},
yAxis: {
min: 0,
max: 7, // 70
type: 'value',
axisLine: { onZero: false }
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'slider',
yAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
yAxisIndex: 0,
filterMode: 'none'
}
],
series: [
{
id: 'a',
type: 'line',
smooth: true,
symbolSize: symbolSize,
data: data
}
]
};
setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
return {
type: 'circle',
position: myChart.convertToPixel('grid', item),
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
onmousemove: function () {
showTooltip(dataIndex);
},
onmouseout: function () {
hideTooltip(dataIndex);
},
z: 100
};
})
});
}, 0);
window.addEventListener('resize', updatePosition);
myChart.on('dataZoom', updatePosition);
function updatePosition() {
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
}
function showTooltip(dataIndex) {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {
myChart.dispatchAction({
type: 'hideTip'
});
}
function onPointDragging(dataIndex, pos) {
// convert to integer axis
pos = myChart.convertFromPixel('grid', pos)
data[dataIndex] = [parseInt(pos[0].toFixed(0)),
parseInt(pos[1].toFixed(0))];
// Update data
myChart.setOption({
series: [
{
id: 'a',
data: data
}
]
});
}
```
### Current Behavior
I want to drag nodes to the integer axis, but when I change the max of xAxis and yAxis from 70 to 7, the nodes can't remove once after the first left-click drag.
### Expected Behavior
nodes can be dragged in small zoom
### Environment
```markdown
- OS: Apple M1 Pro macOS Ventura 13.0.1 (22A400)
- Browser: chrome 109.0.5414.119 arm64
- Framework: https://echarts.apache.org/examples/zh/editor.html?c=line-draggable
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] GodsDusk closed issue #18224: [Bug] nodes can only drag once while axis is small
Posted by "GodsDusk (via GitHub)" <gi...@apache.org>.
GodsDusk closed issue #18224: [Bug] nodes can only drag once while axis is small
URL: https://github.com/apache/echarts/issues/18224
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] helgasoft commented on issue #18224: [Bug] nodes can only drag once while axis is small
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #18224:
URL: https://github.com/apache/echarts/issues/18224#issuecomment-1413309222
Clever code, using an undocumented parameter _graphic.elements.position_ 🥇
Dragging is working fine at any axis range. I think the problem is visibility. In smaller axis ranges the invisible graphic could **stay away** from the visible point and the user cannot see to grab it.
By replacing ```invisible: true``` with ```style: { opacity: 0.3 }``` it becomes obvious - [Demo Code](https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=MYewdgzgLgBBCeBbARiANgZQJYC8CmMAvDAEwAMA3AFCiSwAmAhlI0TANpUwcDMANDB4BdPlw4AWAeKFUh1EAAcoWcGwDeY5VDR4AXDA3duUPAA8o-gOQAVAE7wYAEVuMA5q6xhXMKAAs8EAQACiCeUBCWokYwOgBmFjCWwHhgJraWYgC-UT4g6MoK-oZGULZY7ni2APJgVmDgeJFi3LEgtojMafqxAK5gwMqqABQKjC6IEACUBs1GtnhQPbZgMEOz0ZYAGlYwANTrRqPjEAB0TCzsZEInUCAAYlimePRDJNP70RsAPMi2AHwATR2H0-3COjAmZ2YjHYAEZrrcHk8Xm8DpNqNFMlkcq4yvQirNboVEgAOACkTWiqCgt0QVlhJAp2LEpgAgqYsBACdFEJ59GQctwOqZ9AB2E5kWYAeilwrFku42TE8HZnO5Rl5tRgZAlgpgcpg4oVRhlBtFAuZ3HOjAAWnk6RxZsVolB4Ao9IkIGgsPRKpTPmyORAAJJgX0i7V6lpYNBpACyIF9dQaGUxeudJTdHssXp9fqjMBVQdD4f5BdiMfjiez9TAjVmSuiGeMWasnggef90UDnJLZjLBwrscqCaTiVr9bTToOrvdbcgnYLRd7Yf7kcHlZH1eTddTRix3BEYkCZQC-k4TYOPqsjC7mbniW9u4LEEQeT8-lKPTwL6QqEwuAeggKDoNg-AFta-jWg2YgyJk1BUIEUDWFgiB4CAPRQEMvT9IMKxDNMxQyjArL0PQcC-Iw9AgAA7jAwBYLYwA6BAqw0b4WDAL4MCcjA9SwAAbpyWDIDo0y3DAKSMKJB
D0C4rgnGIiDwAAwpRthQCcSFVEoKhgEMGa4owCgccARQ8finqUfQkSSToaGpFyMCzNaJwdAo2F9AMemrFgJiIAI1p9qYhEHPMizLDMoItg-SSMcxjQFmCIAdnh-jKWpYyabQAmVMhIBBI8eBoAZMC4j6wX8jA2Q8f5kxJRRxkes2nzABGFrRUYwDwAOnXcLY-jAf-YEEFKpAHIqDUyp4QkdjJn62N-DXQPAOjmYojAMa6_InDw1UNXJbiuNJa0-ItP4TTA4CHa43ReXhqz0KYgXwKFfVXWAIRhM4R2eK4QxBauz0cH4nInMDoOnPAQjopdjbReAb49IEb65XduE-QRUV9RAvi0dYeSxlgHmA-GsOdfDoKIxhgQYQkOHecMb19RxvoE_kxMA9CwXk9FlOfDg-iwmQxqYhi-6TDBiqwzVZCwzRnjUTRJxUfQACiuWpAAMpyJh1rYQyWPMHb4LZPQKOceAhKlemwxl6maeAhvWnaICIGbFvMFbKV-bb1AMw95uW9bvtO8z9tZVpCw6XhBmzEZJmceZxV4A54S6C50JucZnkY8Mfmp4F3NA8z0ThUsKwtdwxEKD7aX6qpDsnDleUE4VTwlZY5U2QIBeIJLnW1zb4DpY3kctxpbdFSVahlXilXavttWpwPnzwQ2q-KlkMtUAHPm4_jhMFFzLA89jEcaWcnKjFAXGsoz-kZrO2YHzRKEKHeJ5YAEC8dUYpNrgAaYbe1AsR71UKzPA7MiYk2LmTc-Y9L70GvswO-D844ulbIkSB789yZB3uAlY4AvqpB-u4P6J9GDBQEEPZmxEJ6wAkmEPArhKgwEYEGMQQ82AX2yuAXKGk7i2Ddu3YqpVu6_yXrQ8W1p2BAKEGwC8hwxiBFDFhIelwET3CKi8OW9VnLRCOKo1IIwUpwi0UiZ4Qw9FyDEMRAAqp7EwMBoJCkQZpbSuknYZi_meDgVcLI3jvNESCLjoQNhkNLUBQA)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org