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