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.

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

fix(svg): clear text when mouse leaves #535

Merged
merged 2 commits into from Nov 25, 2019
Merged

fix(svg): clear text when mouse leaves #535

merged 2 commits into from Nov 25, 2019

Conversation

Ovilia
Copy link
Contributor

@Ovilia Ovilia commented Nov 21, 2019

Fix apache/echarts#11543 .

This commit can remove the text. But when the mouse hovers on the circle again, the text doesn't show up.

@pissang
Copy link
Contributor

pissang commented Nov 21, 2019

The textSvgEl is inserted to the document in https://github.com/ecomfe/zrender/blob/master/src/svg/Painter.js#L231 . And it will only be executed when element is drawn in the first time.

So if you remove it from the document when text property is updated to null in https://github.com/ecomfe/zrender/pull/535/files#diff-5bb01bd8925bd801f17e33bdb859d019R515. It won't be insert to the document again when text is set to another value.

A better way to not display this text element is removing the tspan elements.

@Ovilia
Copy link
Contributor Author

Ovilia commented Nov 22, 2019

@pissang But it has the same behavior with tspan:

function removeOldTextNode(el) {
    if (el && el.__textSvgEl) {
        var children = el.__textSvgEl.children;
        for (var i = 0; i < children.length; ++i) {
            if (children[i]) {
                el.__textSvgEl.removeChild(children[i]);
            }
        }
    }
}

@pissang
Copy link
Contributor

pissang commented Nov 22, 2019

It seems you need to reset more cached properties.

function removeOldTextNode(el) {
    if (el && el.__textSvgEl) {
        el.__textSvgEl.parentNode.removeChild(el.__textSvgEl);
        el.__textSvgEl = null;
        el.__tspanList = [];
        el.__text = null;
    }
}

Also the new created svg text dom needs to be add to document when updating the element in
https://github.com/ecomfe/zrender/blob/master/src/svg/Painter.js#L244

else if (!item.removed) {
                for (var k = 0; k < item.count; k++) {
                    var displayable = newVisibleList[item.indices[k]];

                    var svgElement = getSvgElement(displayable);
                    var textSvgElement = getTextSvgElement(displayable);

                    this.gradientManager.markUsed(displayable);
                    this.gradientManager
                        .addWithoutUpdate(svgElement || textSvgElement, displayable);

                    this.shadowManager.markUsed(displayable);
                    this.shadowManager
                        .addWithoutUpdate(svgElement || textSvgElement, displayable);

                    this.clipPathManager.markUsed(displayable);

                    if (textSvgElement) {   // Insert text.
                        insertAfter(svgRoot, textSvgElement, svgElement);
                    }
                    prevSvgElement = svgElement
                        || textSvgElement || prevSvgElement;

                }

@Ovilia Ovilia marked this pull request as ready for review Nov 25, 2019
@pissang pissang merged commit 652086f into master Nov 25, 2019
@Ovilia Ovilia deleted the fix-11543 branch Dec 16, 2019
@Ovilia Ovilia changed the title WIP(svg): clear text when mouse leaves fix(svg): clear text when mouse leaves Dec 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Label won't disappear when mouse out of the element with SVG rendering
2 participants