VisualMapView.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 {Group, Rect} from '../../util/graphic';
import * as formatUtil from '../../util/format';
import * as layout from '../../util/layout';
import VisualMapping from '../../visual/VisualMapping';
import ComponentView from '../../view/Component';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
import VisualMapModel from './VisualMapModel';
import { VisualOptionUnit, ColorString } from '../../util/types';

type VisualState = VisualMapModel['stateList'][number];

class VisualMapView extends ComponentView {
    static type = 'visualMap';
    type = VisualMapView.type;

    autoPositionValues = {left: 1, right: 1, top: 1, bottom: 1} as const;

    ecModel: GlobalModel;

    api: ExtensionAPI;

    visualMapModel: VisualMapModel;

    init(ecModel: GlobalModel, api: ExtensionAPI) {
        this.ecModel = ecModel;
        this.api = api;
    }

    /**
     * @protected
     */
    render(
        visualMapModel: VisualMapModel,
        ecModel: GlobalModel,
        api: ExtensionAPI,
        payload: unknown    // TODO: TYPE
    ) {
        this.visualMapModel = visualMapModel;

        if (visualMapModel.get('show') === false) {
            this.group.removeAll();
            return;
        }

        this.doRender(visualMapModel, ecModel, api, payload);
    }

    /**
     * @protected
     */
    renderBackground(group: Group) {
        const visualMapModel = this.visualMapModel;
        const padding = formatUtil.normalizeCssArray(visualMapModel.get('padding') || 0);
        const rect = group.getBoundingRect();

        group.add(new Rect({
            z2: -1, // Lay background rect on the lowest layer.
            silent: true,
            shape: {
                x: rect.x - padding[3],
                y: rect.y - padding[0],
                width: rect.width + padding[3] + padding[1],
                height: rect.height + padding[0] + padding[2]
            },
            style: {
                fill: visualMapModel.get('backgroundColor'),
                stroke: visualMapModel.get('borderColor'),
                lineWidth: visualMapModel.get('borderWidth')
            }
        }));
    }

    /**
     * @protected
     * @param targetValue can be Infinity or -Infinity
     * @param visualCluster Only can be 'color' 'opacity' 'symbol' 'symbolSize'
     * @param opts
     * @param opts.forceState Specify state, instead of using getValueState method.
     * @param opts.convertOpacityToAlpha For color gradient in controller widget.
     * @return {*} Visual value.
     */
    protected getControllerVisual(
        targetValue: number,
        visualCluster: 'color' | 'opacity' | 'symbol' | 'symbolSize',
        opts?: {
            forceState?: VisualState
            convertOpacityToAlpha?: boolean
        }
    ) {

        opts = opts || {};

        const forceState = opts.forceState;
        const visualMapModel = this.visualMapModel;
        const visualObj: {[key in typeof visualCluster]?: VisualOptionUnit[key]} = {};

        // Default values.
        if (visualCluster === 'color') {
            const defaultColor = visualMapModel.get('contentColor');
            visualObj.color = defaultColor as ColorString;
        }

        function getter(key: typeof visualCluster) {
            return visualObj[key];
        }

        function setter(key: typeof visualCluster, value: any) {
            (visualObj as any)[key] = value;
        }

        const mappings = visualMapModel.controllerVisuals[
            forceState || visualMapModel.getValueState(targetValue)
        ];
        const visualTypes = VisualMapping.prepareVisualTypes(mappings);

        zrUtil.each(visualTypes, function (type) {
            let visualMapping = mappings[type];
            if (opts.convertOpacityToAlpha && type === 'opacity') {
                type = 'colorAlpha';
                visualMapping = mappings.__alphaForOpacity;
            }
            if (VisualMapping.dependsOn(type, visualCluster)) {
                visualMapping && visualMapping.applyVisual(
                    targetValue, getter, setter
                );
            }
        });

        return visualObj[visualCluster];
    }

    protected positionGroup(group: Group) {
        const model = this.visualMapModel;
        const api = this.api;

        layout.positionElement(
            group,
            model.getBoxLayoutParams(),
            {width: api.getWidth(), height: api.getHeight()}
        );
    }

    protected doRender(
        visualMapModel: VisualMapModel,
        ecModel: GlobalModel,
        api: ExtensionAPI,
        payload: unknown
    ) {}
}

export default VisualMapView;