src/component/tooltip/TooltipRichContent.ts

/*
* 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 * as zrUtil from 'zrender/src/core/util';
import ExtensionAPI from '../../core/ExtensionAPI';
import { ZRenderType } from 'zrender/src/zrender';
import { TooltipOption } from './TooltipModel';
import { ZRColor } from '../../util/types';
import Model from '../../model/Model';
import ZRText, { TextStyleProps } from 'zrender/src/graphic/Text';
import { TooltipMarkupStyleCreator, getPaddingFromTooltipModel } from './tooltipMarkup';
import { throwError } from '../../util/log';

class TooltipRichContent {

    private _zr: ZRenderType;

    private _show = false;

    private _styleCoord: [number, number, number, number] = [0, 0, 0, 0];

    private _hideTimeout: number;

    private _enterable = true;

    private _inContent: boolean;

    private _hideDelay: number;

    el: ZRText;

    constructor(api: ExtensionAPI) {
        this._zr = api.getZr();
        makeStyleCoord(this._styleCoord, this._zr, api.getWidth() / 2, api.getHeight() / 2);
    }

    /**
     * Update when tooltip is rendered
     */
    update(tooltipModel: Model<TooltipOption>) {
        const alwaysShowContent = tooltipModel.get('alwaysShowContent');
        alwaysShowContent && this._moveIfResized();
    }

    show() {
        if (this._hideTimeout) {
            clearTimeout(this._hideTimeout);
        }

        this.el.show();
        this._show = true;
    }

    /**
     * Set tooltip content
     */
    setContent(
        content: string | HTMLElement[],
        markupStyleCreator: TooltipMarkupStyleCreator,
        tooltipModel: Model<TooltipOption>,
        borderColor: ZRColor,
        arrowPosition: TooltipOption['position']
    ) {
        if (zrUtil.isObject(content)) {
            throwError(__DEV__ ? 'Passing DOM nodes as content is not supported in richText tooltip!' : '');
        }
        if (this.el) {
            this._zr.remove(this.el);
        }

        const textStyleModel = tooltipModel.getModel('textStyle');

        this.el = new ZRText({
            style: {
                rich: markupStyleCreator.richTextStyles,
                text: content as string,
                lineHeight: 22,
                backgroundColor: tooltipModel.get('backgroundColor'),
                borderRadius: tooltipModel.get('borderRadius'),
                borderWidth: 1,
                borderColor: borderColor as string,
                shadowColor: tooltipModel.get('shadowColor'),
                shadowBlur: tooltipModel.get('shadowBlur'),
                shadowOffsetX: tooltipModel.get('shadowOffsetX'),
                shadowOffsetY: tooltipModel.get('shadowOffsetY'),
                textShadowColor: textStyleModel.get('textShadowColor'),
                textShadowBlur: textStyleModel.get('textShadowBlur') || 0,
                textShadowOffsetX: textStyleModel.get('textShadowOffsetX') || 0,
                textShadowOffsetY: textStyleModel.get('textShadowOffsetY') || 0,
                fill: tooltipModel.get(['textStyle', 'color']),
                padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
                verticalAlign: 'top',
                align: 'left'
            },
            z: tooltipModel.get('z')
        });
        this._zr.add(this.el);

        const self = this;
        this.el.on('mouseover', function () {
            // clear the timeout in hideLater and keep showing tooltip
            if (self._enterable) {
                clearTimeout(self._hideTimeout);
                self._show = true;
            }
            self._inContent = true;
        });
        this.el.on('mouseout', function () {
            if (self._enterable) {
                if (self._show) {
                    self.hideLater(self._hideDelay);
                }
            }
            self._inContent = false;
        });
    }

    setEnterable(enterable?: boolean) {
        this._enterable = enterable;
    }

    getSize() {
        const el = this.el;
        const bounding = this.el.getBoundingRect();
        // bounding rect does not include shadow. For renderMode richText,
        // if overflow, it will be cut. So calculate them accurately.
        const shadowOuterSize = calcShadowOuterSize(el.style);
        return [
            bounding.width + shadowOuterSize.left + shadowOuterSize.right,
            bounding.height + shadowOuterSize.top + shadowOuterSize.bottom
        ];
    }

    moveTo(x: number, y: number) {
        const el = this.el;
        if (el) {
            const styleCoord = this._styleCoord;
            makeStyleCoord(styleCoord, this._zr, x, y);
            x = styleCoord[0];
            y = styleCoord[1];
            const style = el.style;
            const borderWidth = mathMaxWith0(style.borderWidth || 0);
            const shadowOuterSize = calcShadowOuterSize(style);
            // rich text x, y do not include border.
            el.x = x + borderWidth + shadowOuterSize.left;
            el.y = y + borderWidth + shadowOuterSize.top;
            el.markRedraw();
        }
    }


    /**
     * when `alwaysShowContent` is true,
     * move the tooltip after chart resized
     */
    _moveIfResized() {
        // The ratio of left to width
        const ratioX = this._styleCoord[2];
        // The ratio of top to height
        const ratioY = this._styleCoord[3];
        this.moveTo(
            ratioX * this._zr.getWidth(),
            ratioY * this._zr.getHeight()
        );
    }

    hide() {
        if (this.el) {
            this.el.hide();
        }
        this._show = false;
    }

    hideLater(time?: number) {
        if (this._show && !(this._inContent && this._enterable)) {
            if (time) {
                this._hideDelay = time;
                // Set show false to avoid invoke hideLater multiple times
                this._show = false;
                this._hideTimeout = setTimeout(zrUtil.bind(this.hide, this), time) as any;
            }
            else {
                this.hide();
            }
        }
    }

    isShow() {
        return this._show;
    }

    getOuterSize() {
        const size = this.getSize();
        return {
            width: size[0],
            height: size[1]
        };
    }

    dispose() {
        this._zr.remove(this.el);
    }
}

function mathMaxWith0(val: number): number {
    return Math.max(0, val);
}

function calcShadowOuterSize(style: TextStyleProps) {
    const shadowBlur = mathMaxWith0(style.shadowBlur || 0);
    const shadowOffsetX = mathMaxWith0(style.shadowOffsetX || 0);
    const shadowOffsetY = mathMaxWith0(style.shadowOffsetY || 0);
    return {
        left: mathMaxWith0(shadowBlur - shadowOffsetX),
        right: mathMaxWith0(shadowBlur + shadowOffsetX),
        top: mathMaxWith0(shadowBlur - shadowOffsetY),
        bottom: mathMaxWith0(shadowBlur + shadowOffsetY)
    };
}

function makeStyleCoord(out: number[], zr: ZRenderType, zrX: number, zrY: number) {
    out[0] = zrX;
    out[1] = zrY;
    out[2] = out[0] / zr.getWidth();
    out[3] = out[1] / zr.getHeight();
}

export default TooltipRichContent;