/* * 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;