echarts GraphicView 源码
echarts GraphicView 代码
文件路径：/src/component/graphic/GraphicView.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 { TextStyleProps } from 'zrender/src/graphic/Text';
import Displayable from 'zrender/src/graphic/Displayable';
import Element from 'zrender/src/Element';
import * as modelUtil from '../../util/model';
import * as graphicUtil from '../../util/graphic';
import * as layoutUtil from '../../util/layout';
import { parsePercent } from '../../util/number';
import GlobalModel from '../../model/Global';
import ComponentView from '../../view/Component';
import ExtensionAPI from '../../core/ExtensionAPI';
import { getECData } from '../../util/innerStore';
import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from '../../util/styleCompat';
import {
ElementMap,
GraphicComponentModel,
GraphicComponentDisplayableOption,
GraphicComponentZRPathOption,
GraphicComponentGroupOption,
GraphicComponentElementOption
} from './GraphicModel';
import {
applyLeaveTransition,
applyUpdateTransition,
isTransitionAll,
updateLeaveTo
} from '../../animation/customGraphicTransition';
import { updateProps } from '../../animation/basicTransition';
import {
applyKeyframeAnimation,
stopPreviousKeyframeAnimationAndRestore
} from '../../animation/customGraphicKeyframeAnimation';
const nonShapeGraphicElements = {
// Reserved but not supported in graphic component.
path: null as unknown,
compoundPath: null as unknown,
// Supported in graphic component.
group: graphicUtil.Group,
image: graphicUtil.Image,
text: graphicUtil.Text
} as const;
type NonShapeGraphicElementType = keyof typeof nonShapeGraphicElements;
export const inner = modelUtil.makeInner<{
width: number;
height: number;
isNew: boolean;
id: string;
type: string;
option: GraphicComponentElementOption
}, Element>();
// ------------------------
// View
// ------------------------
export class GraphicComponentView extends ComponentView {
static type = 'graphic';
type = GraphicComponentView.type;
private _elMap: ElementMap;
private _lastGraphicModel: GraphicComponentModel;
init() {
this._elMap = zrUtil.createHashMap();
}
render(graphicModel: GraphicComponentModel, ecModel: GlobalModel, api: ExtensionAPI): void {
// Having leveraged between use cases and algorithm complexity, a very
// simple layout mechanism is used:
// The size(width/height) can be determined by itself or its parent (not
// implemented yet), but can not by its children. (Top-down travel)
// The location(x/y) can be determined by the bounding rect of itself
// (can including its descendants or not) and the size of its parent.
// (Bottom-up travel)
// When `chart.clear()` or `chart.setOption({...}, true)` with the same id,
// view will be reused.
if (graphicModel !== this._lastGraphicModel) {
this._clear();
}
this._lastGraphicModel = graphicModel;
this._updateElements(graphicModel);
this._relocate(graphicModel, api);
}
/**
* Update graphic elements.
*/
private _updateElements(graphicModel: GraphicComponentModel): void {
const elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
if (!elOptionsToUpdate) {
return;
}
const elMap = this._elMap;
const rootGroup = this.group;
const globalZ = graphicModel.get('z');
const globalZLevel = graphicModel.get('zlevel');
// Top-down tranverse to assign graphic settings to each elements.
zrUtil.each(elOptionsToUpdate, function (elOption) {
const id = modelUtil.convertOptionIdName(elOption.id, null);
const elExisting = id != null ? elMap.get(id) : null;
const parentId = modelUtil.convertOptionIdName(elOption.parentId, null);
const targetElParent = (parentId != null ? elMap.get(parentId) : rootGroup) as graphicUtil.Group;
const elType = elOption.type;
const elOptionStyle = (elOption as GraphicComponentDisplayableOption).style;
if (elType === 'text' && elOptionStyle) {
// In top/bottom mode, textVerticalAlign should not be used, which cause
// inaccurately locating.
if (elOption.hv && elOption.hv[1]) {
(elOptionStyle as any).textVerticalAlign =
(elOptionStyle as any).textBaseline =
(elOptionStyle as TextStyleProps).verticalAlign =
(elOptionStyle as TextStyleProps).align = null;
}
}
let textContentOption = (elOption as GraphicComponentZRPathOption).textContent;
let textConfig = (elOption as GraphicComponentZRPathOption).textConfig;
if (elOptionStyle
&& isEC4CompatibleStyle(elOptionStyle, elType, !!textConfig, !!textContentOption)) {
const convertResult =
convertFromEC4CompatibleStyle(elOptionStyle, elType, true) as GraphicComponentZRPathOption;
if (!textConfig && convertResult.textConfig) {
textConfig = (elOption as GraphicComponentZRPathOption).textConfig = convertResult.textConfig;
}
if (!textContentOption && convertResult.textContent) {
textContentOption = convertResult.textContent;
}
}
// Remove unnecessary props to avoid potential problems.
const elOptionCleaned = getCleanedElOption(elOption);
// For simple, do not support parent change, otherwise reorder is needed.
if (__DEV__) {
elExisting && zrUtil.assert(
targetElParent === elExisting.parent,
'Changing parent is not supported.'
);
}
const $action = elOption.$action || 'merge';
const isMerge = $action === 'merge';
const isReplace = $action === 'replace';
if (isMerge) {
const isInit = !elExisting;
let el = elExisting;
if (isInit) {
el = createEl(id, targetElParent, elOption.type, elMap);
}
else {
el && (inner(el).isNew = false);
// Stop and restore before update any other attributes.
stopPreviousKeyframeAnimationAndRestore(el);
}
if (el) {
applyUpdateTransition(
el,
elOptionCleaned,
graphicModel,
{ isInit }
);
updateCommonAttrs(el, elOption, globalZ, globalZLevel);
}
}
else if (isReplace) {
removeEl(elExisting, elOption, elMap, graphicModel);
const el = createEl(id, targetElParent, elOption.type, elMap);
if (el) {
applyUpdateTransition(
el,
elOptionCleaned,
graphicModel,
{ isInit: true}
);
updateCommonAttrs(el, elOption, globalZ, globalZLevel);
}
}
else if ($action === 'remove') {
updateLeaveTo(elExisting, elOption);
removeEl(elExisting, elOption, elMap, graphicModel);
}
const el = elMap.get(id);
if (el && textContentOption) {
if (isMerge) {
const textContentExisting = el.getTextContent();
textContentExisting
? textContentExisting.attr(textContentOption)
: el.setTextContent(new graphicUtil.Text(textContentOption));
}
else if (isReplace) {
el.setTextContent(new graphicUtil.Text(textContentOption));
}
}
if (el) {
const clipPathOption = elOption.clipPath;
if (clipPathOption) {
const clipPathType = clipPathOption.type;
let clipPath: graphicUtil.Path;
let isInit = false;
if (isMerge) {
const oldClipPath = el.getClipPath();
isInit = !oldClipPath
|| inner(oldClipPath).type !== clipPathType;
clipPath = isInit ? newEl(clipPathType) as graphicUtil.Path : oldClipPath;
}
else if (isReplace) {
isInit = true;
clipPath = newEl(clipPathType) as graphicUtil.Path;
}
el.setClipPath(clipPath);
applyUpdateTransition(
clipPath,
clipPathOption,
graphicModel,
{ isInit}
);
applyKeyframeAnimation(
clipPath,
clipPathOption.keyframeAnimation,
graphicModel
);
}
const elInner = inner(el);
el.setTextConfig(textConfig);
elInner.option = elOption;
setEventData(el, graphicModel, elOption);
graphicUtil.setTooltipConfig({
el: el,
componentModel: graphicModel,
itemName: el.name,
itemTooltipOption: elOption.tooltip
});
applyKeyframeAnimation(el, elOption.keyframeAnimation, graphicModel);
}
});
}
/**
* Locate graphic elements.
*/
private _relocate(graphicModel: GraphicComponentModel, api: ExtensionAPI): void {
const elOptions = graphicModel.option.elements;
const rootGroup = this.group;
const elMap = this._elMap;
const apiWidth = api.getWidth();
const apiHeight = api.getHeight();
const xy = ['x', 'y'] as const;
// Top-down to calculate percentage width/height of group
for (let i = 0; i < elOptions.length; i++) {
const elOption = elOptions[i];
const id = modelUtil.convertOptionIdName(elOption.id, null);
const el = id != null ? elMap.get(id) : null;
if (!el || !el.isGroup) {
continue;
}
const parentEl = el.parent;
const isParentRoot = parentEl === rootGroup;
// Like 'position:absolut' in css, default 0.
const elInner = inner(el);
const parentElInner = inner(parentEl);
elInner.width = parsePercent(
(elInner.option as GraphicComponentGroupOption).width,
isParentRoot ? apiWidth : parentElInner.width
) || 0;
elInner.height = parsePercent(
(elInner.option as GraphicComponentGroupOption).height,
isParentRoot ? apiHeight : parentElInner.height
) || 0;
}
// Bottom-up tranvese all elements (consider ec resize) to locate elements.
for (let i = elOptions.length - 1; i >= 0; i--) {
const elOption = elOptions[i];
const id = modelUtil.convertOptionIdName(elOption.id, null);
const el = id != null ? elMap.get(id) : null;
if (!el) {
continue;
}
const parentEl = el.parent;
const parentElInner = inner(parentEl);
const containerInfo = parentEl === rootGroup
? {
width: apiWidth,
height: apiHeight
}
: {
width: parentElInner.width,
height: parentElInner.height
};
// PENDING
// Currently, when `bounding: 'all'`, the union bounding rect of the group
// does not include the rect of [0, 0, group.width, group.height], which
// is probably weird for users. Should we make a break change for it?
const layoutPos = {} as Record<'x' | 'y', number>;
const layouted = layoutUtil.positionElement(
el, elOption, containerInfo, null,
{ hv: elOption.hv, boundingMode: elOption.bounding },
layoutPos
);
if (!inner(el).isNew && layouted) {
const transition = elOption.transition;
const animatePos = {} as Record<'x' | 'y', number>;
for (let k = 0; k < xy.length; k++) {
const key = xy[k];
const val = layoutPos[key];
if (transition && (isTransitionAll(transition) || zrUtil.indexOf(transition, key) >= 0)) {
animatePos[key] = val;
}
else {
el[key] = val;
}
}
updateProps(el, animatePos, graphicModel, 0);
}
else {
el.attr(layoutPos);
}
}
}
/**
* Clear all elements.
*/
private _clear(): void {
const elMap = this._elMap;
elMap.each((el) => {
removeEl(el, inner(el).option, elMap, this._lastGraphicModel);
});
this._elMap = zrUtil.createHashMap();
}
dispose(): void {
this._clear();
}
}
function newEl(graphicType: string) {
if (__DEV__) {
zrUtil.assert(graphicType, 'graphic type MUST be set');
}
const Clz = (
zrUtil.hasOwn(nonShapeGraphicElements, graphicType)
// Those graphic elements are not shapes. They should not be
// overwritten by users, so do them first.
? nonShapeGraphicElements[graphicType as NonShapeGraphicElementType]
: graphicUtil.getShapeClass(graphicType)
) as { new(opt: GraphicComponentElementOption): Element; };
if (__DEV__) {
zrUtil.assert(Clz, `graphic type ${graphicType} can not be found`);
}
const el = new Clz({});
inner(el).type = graphicType;
return el;
}
function createEl(
id: string,
targetElParent: graphicUtil.Group,
graphicType: string,
elMap: ElementMap
): Element {
const el = newEl(graphicType);
targetElParent.add(el);
elMap.set(id, el);
inner(el).id = id;
inner(el).isNew = true;
return el;
}
function removeEl(
elExisting: Element,
elOption: GraphicComponentElementOption,
elMap: ElementMap,
graphicModel: GraphicComponentModel
): void {
const existElParent = elExisting && elExisting.parent;
if (existElParent) {
elExisting.type === 'group' && elExisting.traverse(function (el) {
removeEl(el, elOption, elMap, graphicModel);
});
applyLeaveTransition(elExisting, elOption, graphicModel);
elMap.removeKey(inner(elExisting).id);
}
}
function updateCommonAttrs(
el: Element,
elOption: GraphicComponentElementOption,
defaultZ: number,
defaultZlevel: number
) {
if (!el.isGroup) {
zrUtil.each([
['cursor', Displayable.prototype.cursor],
// We should not support configure z and zlevel in the element level.
// But seems we didn't limit it previously. So here still use it to avoid breaking.
['zlevel', defaultZlevel || 0],
['z', defaultZ || 0],
// z2 must not be null/undefined, otherwise sort error may occur.
['z2', 0]
], item => {
const prop = item[0] as any;
if (zrUtil.hasOwn(elOption, prop)) {
(el as any)[prop] = zrUtil.retrieve2(
(elOption as any)[prop],
item[1]
);
}
else if ((el as any)[prop] == null) {
(el as any)[prop] = item[1];
}
});
}
zrUtil.each(zrUtil.keys(elOption), key => {
// Assign event handlers.
// PENDING: should enumerate all event names or use pattern matching?
if (key.indexOf('on') === 0) {
const val = (elOption as any)[key];
(el as any)[key] = zrUtil.isFunction(val) ? val : null;
}
});
if (zrUtil.hasOwn(elOption, 'draggable')) {
el.draggable = elOption.draggable;
}
// Other attributes
elOption.name != null && (el.name = elOption.name);
elOption.id != null && ((el as any).id = elOption.id);
}
// Remove unnecessary props to avoid potential problems.
function getCleanedElOption(
elOption: GraphicComponentElementOption
): Omit<GraphicComponentElementOption, 'textContent'> {
elOption = zrUtil.extend({}, elOption);
zrUtil.each(
['id', 'parentId', '$action', 'hv', 'bounding', 'textContent', 'clipPath'].concat(layoutUtil.LOCATION_PARAMS),
function (name) {
delete (elOption as any)[name];
}
);
return elOption;
}
function setEventData(
el: Element,
graphicModel: GraphicComponentModel,
elOption: GraphicComponentElementOption
): void {
let eventData = getECData(el).eventData;
// Simple optimize for large amount of elements that no need event.
if (!el.silent && !el.ignore && !eventData) {
eventData = getECData(el).eventData = {
componentType: 'graphic',
componentIndex: graphicModel.componentIndex,
name: el.name
};
}
// `elOption.info` enables user to mount some info on
// elements and use them in event handlers.
if (eventData) {
eventData.info = elOption.info;
}
}
相关信息
相关文章
0
赞
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
6、 golang
-
8、 openharmony