/*
|
* 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 * as modelUtil from '../../util/model';
|
import * as graphicUtil from '../../util/graphic';
|
import * as layoutUtil from '../../util/layout';
|
import {parsePercent} from '../../util/number';
|
import {
|
ComponentOption,
|
BoxLayoutOptionMixin,
|
Dictionary,
|
ZRStyleProps,
|
OptionId,
|
OptionPreprocessor,
|
CommonTooltipOption
|
} from '../../util/types';
|
import ComponentModel from '../../model/Component';
|
import Element, { ElementTextConfig } from 'zrender/src/Element';
|
import Displayable from 'zrender/src/graphic/Displayable';
|
import { PathProps } from 'zrender/src/graphic/Path';
|
import { ImageStyleProps } from 'zrender/src/graphic/Image';
|
import GlobalModel from '../../model/Global';
|
import ComponentView from '../../view/Component';
|
import ExtensionAPI from '../../core/ExtensionAPI';
|
import { getECData } from '../../util/innerStore';
|
import { TextStyleProps } from 'zrender/src/graphic/Text';
|
import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from '../../util/styleCompat';
|
import { EChartsExtensionInstallRegisters } from '../../extension';
|
import { graphic } from '../../export/api';
|
|
const TRANSFORM_PROPS = {
|
x: 1,
|
y: 1,
|
scaleX: 1,
|
scaleY: 1,
|
originX: 1,
|
originY: 1,
|
rotation: 1
|
} as const;
|
type TransformProp = keyof typeof TRANSFORM_PROPS;
|
|
interface GraphicComponentBaseElementOption extends
|
Partial<Pick<
|
Element,
|
TransformProp
|
| 'silent'
|
| 'ignore'
|
| 'draggable'
|
| 'textConfig'
|
| 'onclick'
|
| 'ondblclick'
|
| 'onmouseover'
|
| 'onmouseout'
|
| 'onmousemove'
|
| 'onmousewheel'
|
| 'onmousedown'
|
| 'onmouseup'
|
| 'oncontextmenu'
|
| 'ondrag'
|
| 'ondragstart'
|
| 'ondragend'
|
| 'ondragenter'
|
| 'ondragleave'
|
| 'ondragover'
|
| 'ondrop'
|
>>,
|
/**
|
* left/right/top/bottom: (like 12, '22%', 'center', default undefined)
|
* If left/rigth is set, shape.x/shape.cx/position will not be used.
|
* If top/bottom is set, shape.y/shape.cy/position will not be used.
|
* This mechanism is useful when you want to position a group/element
|
* against the right side or the center of this container.
|
*/
|
Partial<Pick<BoxLayoutOptionMixin, 'left' | 'right' | 'top' | 'bottom'>> {
|
|
/**
|
* element type, mandatory.
|
* Only can be omit if call setOption not at the first time and perform merge.
|
*/
|
type?: string;
|
|
id?: OptionId;
|
name?: string;
|
|
// Only internal usage. Use specified value does NOT make sense.
|
parentId?: OptionId;
|
parentOption?: GraphicComponentElementOption;
|
children?: GraphicComponentElementOption[];
|
hv?: [boolean, boolean];
|
|
/**
|
* bounding: (enum: 'all' (default) | 'raw')
|
* Specify how to calculate boundingRect when locating.
|
* 'all': Get uioned and transformed boundingRect
|
* from both itself and its descendants.
|
* This mode simplies confining a group of elements in the bounding
|
* of their ancester container (e.g., using 'right: 0').
|
* 'raw': Only use the boundingRect of itself and before transformed.
|
* This mode is similar to css behavior, which is useful when you
|
* want an element to be able to overflow its container. (Consider
|
* a rotated circle needs to be located in a corner.)
|
*/
|
bounding?: 'raw' | 'all';
|
|
/**
|
* info: custom info. enables user to mount some info on elements and use them
|
* in event handlers. Update them only when user specified, otherwise, remain.
|
*/
|
info?: GraphicExtraElementInfo;
|
|
textContent?: GraphicComponentTextOption;
|
textConfig?: ElementTextConfig;
|
|
$action?: 'merge' | 'replace' | 'remove';
|
|
tooltip?: CommonTooltipOption<unknown>;
|
};
|
interface GraphicComponentDisplayableOption extends
|
GraphicComponentBaseElementOption,
|
Partial<Pick<Displayable, 'zlevel' | 'z' | 'z2' | 'invisible' | 'cursor'>> {
|
|
style?: ZRStyleProps;
|
|
// TODO: states?
|
// emphasis?: GraphicComponentDisplayableOptionOnState;
|
// blur?: GraphicComponentDisplayableOptionOnState;
|
// select?: GraphicComponentDisplayableOptionOnState;
|
}
|
// TODO: states?
|
// interface GraphicComponentDisplayableOptionOnState extends Partial<Pick<
|
// Displayable, TransformProp | 'textConfig' | 'z2'
|
// >> {
|
// style?: ZRStyleProps;
|
// }
|
interface GraphicComponentGroupOption extends GraphicComponentBaseElementOption {
|
type?: 'group';
|
|
/**
|
* width/height: (can only be pixel value, default 0)
|
* Only be used to specify contianer(group) size, if needed. And
|
* can not be percentage value (like '33%'). See the reason in the
|
* layout algorithm below.
|
*/
|
width?: number;
|
height?: number;
|
|
// TODO: Can only set focus, blur on the root element.
|
// children: Omit<GraphicComponentElementOption, 'focus' | 'blurScope'>[];
|
children: GraphicComponentElementOption[];
|
}
|
export interface GraphicComponentZRPathOption extends GraphicComponentDisplayableOption {
|
shape?: PathProps['shape'];
|
}
|
export interface GraphicComponentImageOption extends GraphicComponentDisplayableOption {
|
type?: 'image';
|
style?: ImageStyleProps;
|
// TODO: states?
|
// emphasis?: GraphicComponentImageOptionOnState;
|
// blur?: GraphicComponentImageOptionOnState;
|
// select?: GraphicComponentImageOptionOnState;
|
}
|
// TODO: states?
|
// interface GraphicComponentImageOptionOnState extends GraphicComponentDisplayableOptionOnState {
|
// style?: ImageStyleProps;
|
// }
|
interface GraphicComponentTextOption
|
extends Omit<GraphicComponentDisplayableOption, 'textContent' | 'textConfig'> {
|
type?: 'text';
|
style?: TextStyleProps;
|
}
|
type GraphicComponentElementOption =
|
GraphicComponentGroupOption
|
| GraphicComponentZRPathOption
|
| GraphicComponentImageOption
|
| GraphicComponentTextOption;
|
// type GraphicComponentElementOptionOnState =
|
// GraphicComponentDisplayableOptionOnState
|
// | GraphicComponentImageOptionOnState;
|
|
type GraphicExtraElementInfo = Dictionary<unknown>;
|
|
type ElementMap = zrUtil.HashMap<Element, string>;
|
|
const inner = modelUtil.makeInner<{
|
__ecGraphicWidthOption: number;
|
__ecGraphicHeightOption: number;
|
__ecGraphicWidth: number;
|
__ecGraphicHeight: number;
|
__ecGraphicId: string;
|
}, Element>();
|
|
|
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;
|
|
// ------------------------
|
// Preprocessor
|
// ------------------------
|
|
const preprocessor: OptionPreprocessor = function (option) {
|
const graphicOption = option.graphic as GraphicComponentOption | GraphicComponentOption[];
|
|
// Convert
|
// {graphic: [{left: 10, type: 'circle'}, ...]}
|
// or
|
// {graphic: {left: 10, type: 'circle'}}
|
// to
|
// {graphic: [{elements: [{left: 10, type: 'circle'}, ...]}]}
|
if (zrUtil.isArray(graphicOption)) {
|
if (!graphicOption[0] || !graphicOption[0].elements) {
|
option.graphic = [{elements: graphicOption}];
|
}
|
else {
|
// Only one graphic instance can be instantiated. (We dont
|
// want that too many views are created in echarts._viewMap)
|
option.graphic = [(option.graphic as any)[0]];
|
}
|
}
|
else if (graphicOption && !graphicOption.elements) {
|
option.graphic = [{elements: [graphicOption]}];
|
}
|
};
|
|
// ------------------------
|
// Model
|
// ------------------------
|
|
export type GraphicComponentLooseOption = (GraphicComponentOption | GraphicComponentElementOption) & {
|
mainType?: 'graphic';
|
};
|
|
export interface GraphicComponentOption extends ComponentOption {
|
// Note: elements is always behind its ancestors in this elements array.
|
elements?: GraphicComponentElementOption[];
|
// parentId: string;
|
};
|
|
|
class GraphicComponentModel extends ComponentModel<GraphicComponentOption> {
|
|
static type = 'graphic';
|
type = GraphicComponentModel.type;
|
|
preventAutoZ = true;
|
|
static defaultOption: GraphicComponentOption = {
|
elements: []
|
// parentId: null
|
};
|
|
/**
|
* Save el options for the sake of the performance (only update modified graphics).
|
* The order is the same as those in option. (ancesters -> descendants)
|
*/
|
private _elOptionsToUpdate: GraphicComponentElementOption[];
|
|
mergeOption(option: GraphicComponentOption, ecModel: GlobalModel): void {
|
// Prevent default merge to elements
|
const elements = this.option.elements;
|
this.option.elements = null;
|
|
super.mergeOption(option, ecModel);
|
|
this.option.elements = elements;
|
}
|
|
optionUpdated(newOption: GraphicComponentOption, isInit: boolean): void {
|
const thisOption = this.option;
|
const newList = (isInit ? thisOption : newOption).elements;
|
const existList = thisOption.elements = isInit ? [] : thisOption.elements;
|
|
const flattenedList = [] as GraphicComponentElementOption[];
|
this._flatten(newList, flattenedList, null);
|
|
const mappingResult = modelUtil.mappingToExists(existList, flattenedList, 'normalMerge');
|
|
// Clear elOptionsToUpdate
|
const elOptionsToUpdate = this._elOptionsToUpdate = [] as GraphicComponentElementOption[];
|
|
zrUtil.each(mappingResult, function (resultItem, index) {
|
const newElOption = resultItem.newOption as GraphicComponentElementOption;
|
|
if (__DEV__) {
|
zrUtil.assert(
|
zrUtil.isObject(newElOption) || resultItem.existing,
|
'Empty graphic option definition'
|
);
|
}
|
|
if (!newElOption) {
|
return;
|
}
|
|
elOptionsToUpdate.push(newElOption);
|
|
setKeyInfoToNewElOption(resultItem, newElOption);
|
|
mergeNewElOptionToExist(existList, index, newElOption);
|
|
setLayoutInfoToExist(existList[index], newElOption);
|
|
}, this);
|
|
// Clean
|
for (let i = existList.length - 1; i >= 0; i--) {
|
if (existList[i] == null) {
|
existList.splice(i, 1);
|
}
|
else {
|
// $action should be volatile, otherwise option gotten from
|
// `getOption` will contain unexpected $action.
|
delete existList[i].$action;
|
}
|
}
|
}
|
|
/**
|
* Convert
|
* [{
|
* type: 'group',
|
* id: 'xx',
|
* children: [{type: 'circle'}, {type: 'polygon'}]
|
* }]
|
* to
|
* [
|
* {type: 'group', id: 'xx'},
|
* {type: 'circle', parentId: 'xx'},
|
* {type: 'polygon', parentId: 'xx'}
|
* ]
|
*/
|
private _flatten(
|
optionList: GraphicComponentElementOption[],
|
result: GraphicComponentElementOption[],
|
parentOption: GraphicComponentElementOption
|
): void {
|
zrUtil.each(optionList, function (option) {
|
if (!option) {
|
return;
|
}
|
|
if (parentOption) {
|
option.parentOption = parentOption;
|
}
|
|
result.push(option);
|
|
const children = option.children;
|
if (option.type === 'group' && children) {
|
this._flatten(children, result, option);
|
}
|
// Deleting for JSON output, and for not affecting group creation.
|
delete option.children;
|
}, this);
|
}
|
|
// FIXME
|
// Pass to view using payload? setOption has a payload?
|
useElOptionsToUpdate(): GraphicComponentElementOption[] {
|
const els = this._elOptionsToUpdate;
|
// Clear to avoid render duplicately when zooming.
|
this._elOptionsToUpdate = null;
|
return els;
|
}
|
}
|
|
// ------------------------
|
// View
|
// ------------------------
|
|
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;
|
|
// 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';
|
if ($action === 'merge') {
|
elExisting
|
? elExisting.attr(elOptionCleaned)
|
: createEl(id, targetElParent, elOptionCleaned, elMap);
|
}
|
else if ($action === 'replace') {
|
removeEl(elExisting, elMap);
|
createEl(id, targetElParent, elOptionCleaned, elMap);
|
}
|
else if ($action === 'remove') {
|
removeEl(elExisting, elMap);
|
}
|
|
const el = elMap.get(id);
|
|
if (el && textContentOption) {
|
if ($action === 'merge') {
|
const textContentExisting = el.getTextContent();
|
textContentExisting
|
? textContentExisting.attr(textContentOption)
|
: el.setTextContent(new graphicUtil.Text(textContentOption));
|
}
|
else if ($action === 'replace') {
|
el.setTextContent(new graphicUtil.Text(textContentOption));
|
}
|
}
|
|
if (el) {
|
const elInner = inner(el);
|
elInner.__ecGraphicWidthOption = (elOption as GraphicComponentGroupOption).width;
|
elInner.__ecGraphicHeightOption = (elOption as GraphicComponentGroupOption).height;
|
setEventData(el, graphicModel, elOption);
|
|
graphicUtil.setTooltipConfig({
|
el: el,
|
componentModel: graphicModel,
|
itemName: el.name,
|
itemTooltipOption: elOption.tooltip
|
});
|
}
|
});
|
}
|
|
/**
|
* 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();
|
|
// 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.__ecGraphicWidth = parsePercent(
|
elInner.__ecGraphicWidthOption,
|
isParentRoot ? apiWidth : parentElInner.__ecGraphicWidth
|
) || 0;
|
elInner.__ecGraphicHeight = parsePercent(
|
elInner.__ecGraphicHeightOption,
|
isParentRoot ? apiHeight : parentElInner.__ecGraphicHeight
|
) || 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.__ecGraphicWidth,
|
height: parentElInner.__ecGraphicHeight
|
};
|
|
// 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?
|
layoutUtil.positionElement(
|
el, elOption, containerInfo, null,
|
{hv: elOption.hv, boundingMode: elOption.bounding}
|
);
|
}
|
}
|
|
/**
|
* Clear all elements.
|
*/
|
private _clear(): void {
|
const elMap = this._elMap;
|
elMap.each(function (el) {
|
removeEl(el, elMap);
|
});
|
this._elMap = zrUtil.createHashMap();
|
}
|
|
dispose(): void {
|
this._clear();
|
}
|
}
|
|
function createEl(
|
id: string,
|
targetElParent: graphicUtil.Group,
|
elOption: GraphicComponentElementOption,
|
elMap: ElementMap
|
): void {
|
const graphicType = elOption.type;
|
|
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 can not be found');
|
}
|
|
const el = new Clz(elOption);
|
targetElParent.add(el);
|
elMap.set(id, el);
|
inner(el).__ecGraphicId = id;
|
}
|
|
function removeEl(elExisting: Element, elMap: ElementMap): void {
|
const existElParent = elExisting && elExisting.parent;
|
if (existElParent) {
|
elExisting.type === 'group' && elExisting.traverse(function (el) {
|
removeEl(el, elMap);
|
});
|
elMap.removeKey(inner(elExisting).__ecGraphicId);
|
existElParent.remove(elExisting);
|
}
|
}
|
|
// 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'].concat(layoutUtil.LOCATION_PARAMS),
|
function (name) {
|
delete (elOption as any)[name];
|
}
|
);
|
return elOption;
|
}
|
|
function isSetLoc(
|
obj: GraphicComponentElementOption,
|
props: ('left' | 'right' | 'top' | 'bottom')[]
|
): boolean {
|
let isSet;
|
zrUtil.each(props, function (prop) {
|
obj[prop] != null && obj[prop] !== 'auto' && (isSet = true);
|
});
|
return isSet;
|
}
|
|
function setKeyInfoToNewElOption(
|
resultItem: ReturnType<typeof modelUtil.mappingToExists>[number],
|
newElOption: GraphicComponentElementOption
|
): void {
|
const existElOption = resultItem.existing as GraphicComponentElementOption;
|
|
// Set id and type after id assigned.
|
newElOption.id = resultItem.keyInfo.id;
|
!newElOption.type && existElOption && (newElOption.type = existElOption.type);
|
|
// Set parent id if not specified
|
if (newElOption.parentId == null) {
|
const newElParentOption = newElOption.parentOption;
|
if (newElParentOption) {
|
newElOption.parentId = newElParentOption.id;
|
}
|
else if (existElOption) {
|
newElOption.parentId = existElOption.parentId;
|
}
|
}
|
|
// Clear
|
newElOption.parentOption = null;
|
}
|
|
function mergeNewElOptionToExist(
|
existList: GraphicComponentElementOption[],
|
index: number,
|
newElOption: GraphicComponentElementOption
|
): void {
|
// Update existing options, for `getOption` feature.
|
const newElOptCopy = zrUtil.extend({}, newElOption);
|
const existElOption = existList[index];
|
|
const $action = newElOption.$action || 'merge';
|
if ($action === 'merge') {
|
if (existElOption) {
|
|
if (__DEV__) {
|
const newType = newElOption.type;
|
zrUtil.assert(
|
!newType || existElOption.type === newType,
|
'Please set $action: "replace" to change `type`'
|
);
|
}
|
|
// We can ensure that newElOptCopy and existElOption are not
|
// the same object, so `merge` will not change newElOptCopy.
|
zrUtil.merge(existElOption, newElOptCopy, true);
|
// Rigid body, use ignoreSize.
|
layoutUtil.mergeLayoutParam(existElOption, newElOptCopy, {ignoreSize: true});
|
// Will be used in render.
|
layoutUtil.copyLayoutParams(newElOption, existElOption);
|
}
|
else {
|
existList[index] = newElOptCopy;
|
}
|
}
|
else if ($action === 'replace') {
|
existList[index] = newElOptCopy;
|
}
|
else if ($action === 'remove') {
|
// null will be cleaned later.
|
existElOption && (existList[index] = null);
|
}
|
}
|
|
function setLayoutInfoToExist(
|
existItem: GraphicComponentElementOption,
|
newElOption: GraphicComponentElementOption
|
) {
|
if (!existItem) {
|
return;
|
}
|
existItem.hv = newElOption.hv = [
|
// Rigid body, dont care `width`.
|
isSetLoc(newElOption, ['left', 'right']),
|
// Rigid body, dont care `height`.
|
isSetLoc(newElOption, ['top', 'bottom'])
|
];
|
// Give default group size. Otherwise layout error may occur.
|
if (existItem.type === 'group') {
|
const existingGroupOpt = existItem as GraphicComponentGroupOption;
|
const newGroupOpt = newElOption as GraphicComponentGroupOption;
|
existingGroupOpt.width == null && (existingGroupOpt.width = newGroupOpt.width = 0);
|
existingGroupOpt.height == null && (existingGroupOpt.height = newGroupOpt.height = 0);
|
}
|
}
|
|
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;
|
}
|
}
|
|
export function install(registers: EChartsExtensionInstallRegisters) {
|
registers.registerComponentModel(GraphicComponentModel);
|
registers.registerComponentView(GraphicComponentView);
|
registers.registerPreprocessor(preprocessor);
|
}
|
