|
/*
|
* 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.
|
*/
|
|
|
/**
|
* AUTO-GENERATED FILE. DO NOT MODIFY.
|
*/
|
|
/*
|
* 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 { __extends } from "tslib";
|
import * as zrUtil from 'zrender/lib/core/util.js';
|
import Displayable from 'zrender/lib/graphic/Displayable.js';
|
import * as modelUtil from '../../util/model.js';
|
import * as graphicUtil from '../../util/graphic.js';
|
import * as layoutUtil from '../../util/layout.js';
|
import { parsePercent } from '../../util/number.js';
|
import ComponentView from '../../view/Component.js';
|
import { getECData } from '../../util/innerStore.js';
|
import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from '../../util/styleCompat.js';
|
import { applyLeaveTransition, applyUpdateTransition, isTransitionAll, updateLeaveTo } from '../../animation/customGraphicTransition.js';
|
import { updateProps } from '../../animation/basicTransition.js';
|
import { applyKeyframeAnimation, stopPreviousKeyframeAnimationAndRestore } from '../../animation/customGraphicKeyframeAnimation.js';
|
var nonShapeGraphicElements = {
|
// Reserved but not supported in graphic component.
|
path: null,
|
compoundPath: null,
|
// Supported in graphic component.
|
group: graphicUtil.Group,
|
image: graphicUtil.Image,
|
text: graphicUtil.Text
|
};
|
export var inner = modelUtil.makeInner();
|
// ------------------------
|
// View
|
// ------------------------
|
var GraphicComponentView = /** @class */function (_super) {
|
__extends(GraphicComponentView, _super);
|
function GraphicComponentView() {
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
_this.type = GraphicComponentView.type;
|
return _this;
|
}
|
GraphicComponentView.prototype.init = function () {
|
this._elMap = zrUtil.createHashMap();
|
};
|
GraphicComponentView.prototype.render = function (graphicModel, ecModel, api) {
|
// 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.
|
*/
|
GraphicComponentView.prototype._updateElements = function (graphicModel) {
|
var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
|
if (!elOptionsToUpdate) {
|
return;
|
}
|
var elMap = this._elMap;
|
var rootGroup = this.group;
|
var globalZ = graphicModel.get('z');
|
var globalZLevel = graphicModel.get('zlevel');
|
// Top-down tranverse to assign graphic settings to each elements.
|
zrUtil.each(elOptionsToUpdate, function (elOption) {
|
var id = modelUtil.convertOptionIdName(elOption.id, null);
|
var elExisting = id != null ? elMap.get(id) : null;
|
var parentId = modelUtil.convertOptionIdName(elOption.parentId, null);
|
var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
|
var elType = elOption.type;
|
var elOptionStyle = elOption.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.textVerticalAlign = elOptionStyle.textBaseline = elOptionStyle.verticalAlign = elOptionStyle.align = null;
|
}
|
}
|
var textContentOption = elOption.textContent;
|
var textConfig = elOption.textConfig;
|
if (elOptionStyle && isEC4CompatibleStyle(elOptionStyle, elType, !!textConfig, !!textContentOption)) {
|
var convertResult = convertFromEC4CompatibleStyle(elOptionStyle, elType, true);
|
if (!textConfig && convertResult.textConfig) {
|
textConfig = elOption.textConfig = convertResult.textConfig;
|
}
|
if (!textContentOption && convertResult.textContent) {
|
textContentOption = convertResult.textContent;
|
}
|
}
|
// Remove unnecessary props to avoid potential problems.
|
var elOptionCleaned = getCleanedElOption(elOption);
|
// For simple, do not support parent change, otherwise reorder is needed.
|
if (process.env.NODE_ENV !== 'production') {
|
elExisting && zrUtil.assert(targetElParent === elExisting.parent, 'Changing parent is not supported.');
|
}
|
var $action = elOption.$action || 'merge';
|
var isMerge = $action === 'merge';
|
var isReplace = $action === 'replace';
|
if (isMerge) {
|
var isInit = !elExisting;
|
var el_1 = elExisting;
|
if (isInit) {
|
el_1 = createEl(id, targetElParent, elOption.type, elMap);
|
} else {
|
el_1 && (inner(el_1).isNew = false);
|
// Stop and restore before update any other attributes.
|
stopPreviousKeyframeAnimationAndRestore(el_1);
|
}
|
if (el_1) {
|
applyUpdateTransition(el_1, elOptionCleaned, graphicModel, {
|
isInit: isInit
|
});
|
updateCommonAttrs(el_1, elOption, globalZ, globalZLevel);
|
}
|
} else if (isReplace) {
|
removeEl(elExisting, elOption, elMap, graphicModel);
|
var el_2 = createEl(id, targetElParent, elOption.type, elMap);
|
if (el_2) {
|
applyUpdateTransition(el_2, elOptionCleaned, graphicModel, {
|
isInit: true
|
});
|
updateCommonAttrs(el_2, elOption, globalZ, globalZLevel);
|
}
|
} else if ($action === 'remove') {
|
updateLeaveTo(elExisting, elOption);
|
removeEl(elExisting, elOption, elMap, graphicModel);
|
}
|
var el = elMap.get(id);
|
if (el && textContentOption) {
|
if (isMerge) {
|
var textContentExisting = el.getTextContent();
|
textContentExisting ? textContentExisting.attr(textContentOption) : el.setTextContent(new graphicUtil.Text(textContentOption));
|
} else if (isReplace) {
|
el.setTextContent(new graphicUtil.Text(textContentOption));
|
}
|
}
|
if (el) {
|
var clipPathOption = elOption.clipPath;
|
if (clipPathOption) {
|
var clipPathType = clipPathOption.type;
|
var clipPath = void 0;
|
var isInit = false;
|
if (isMerge) {
|
var oldClipPath = el.getClipPath();
|
isInit = !oldClipPath || inner(oldClipPath).type !== clipPathType;
|
clipPath = isInit ? newEl(clipPathType) : oldClipPath;
|
} else if (isReplace) {
|
isInit = true;
|
clipPath = newEl(clipPathType);
|
}
|
el.setClipPath(clipPath);
|
applyUpdateTransition(clipPath, clipPathOption, graphicModel, {
|
isInit: isInit
|
});
|
applyKeyframeAnimation(clipPath, clipPathOption.keyframeAnimation, graphicModel);
|
}
|
var 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.
|
*/
|
GraphicComponentView.prototype._relocate = function (graphicModel, api) {
|
var elOptions = graphicModel.option.elements;
|
var rootGroup = this.group;
|
var elMap = this._elMap;
|
var apiWidth = api.getWidth();
|
var apiHeight = api.getHeight();
|
var xy = ['x', 'y'];
|
// Top-down to calculate percentage width/height of group
|
for (var i = 0; i < elOptions.length; i++) {
|
var elOption = elOptions[i];
|
var id = modelUtil.convertOptionIdName(elOption.id, null);
|
var el = id != null ? elMap.get(id) : null;
|
if (!el || !el.isGroup) {
|
continue;
|
}
|
var parentEl = el.parent;
|
var isParentRoot = parentEl === rootGroup;
|
// Like 'position:absolut' in css, default 0.
|
var elInner = inner(el);
|
var parentElInner = inner(parentEl);
|
elInner.width = parsePercent(elInner.option.width, isParentRoot ? apiWidth : parentElInner.width) || 0;
|
elInner.height = parsePercent(elInner.option.height, isParentRoot ? apiHeight : parentElInner.height) || 0;
|
}
|
// Bottom-up tranvese all elements (consider ec resize) to locate elements.
|
for (var i = elOptions.length - 1; i >= 0; i--) {
|
var elOption = elOptions[i];
|
var id = modelUtil.convertOptionIdName(elOption.id, null);
|
var el = id != null ? elMap.get(id) : null;
|
if (!el) {
|
continue;
|
}
|
var parentEl = el.parent;
|
var parentElInner = inner(parentEl);
|
var 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?
|
var layoutPos = {};
|
var layouted = layoutUtil.positionElement(el, elOption, containerInfo, null, {
|
hv: elOption.hv,
|
boundingMode: elOption.bounding
|
}, layoutPos);
|
if (!inner(el).isNew && layouted) {
|
var transition = elOption.transition;
|
var animatePos = {};
|
for (var k = 0; k < xy.length; k++) {
|
var key = xy[k];
|
var 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.
|
*/
|
GraphicComponentView.prototype._clear = function () {
|
var _this = this;
|
var elMap = this._elMap;
|
elMap.each(function (el) {
|
removeEl(el, inner(el).option, elMap, _this._lastGraphicModel);
|
});
|
this._elMap = zrUtil.createHashMap();
|
};
|
GraphicComponentView.prototype.dispose = function () {
|
this._clear();
|
};
|
GraphicComponentView.type = 'graphic';
|
return GraphicComponentView;
|
}(ComponentView);
|
export { GraphicComponentView };
|
function newEl(graphicType) {
|
if (process.env.NODE_ENV !== 'production') {
|
zrUtil.assert(graphicType, 'graphic type MUST be set');
|
}
|
var Clz = zrUtil.hasOwn(nonShapeGraphicElements, graphicType)
|
// Those graphic elements are not shapes. They should not be
|
// overwritten by users, so do them first.
|
? nonShapeGraphicElements[graphicType] : graphicUtil.getShapeClass(graphicType);
|
if (process.env.NODE_ENV !== 'production') {
|
zrUtil.assert(Clz, "graphic type " + graphicType + " can not be found");
|
}
|
var el = new Clz({});
|
inner(el).type = graphicType;
|
return el;
|
}
|
function createEl(id, targetElParent, graphicType, elMap) {
|
var el = newEl(graphicType);
|
targetElParent.add(el);
|
elMap.set(id, el);
|
inner(el).id = id;
|
inner(el).isNew = true;
|
return el;
|
}
|
function removeEl(elExisting, elOption, elMap, graphicModel) {
|
var 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, elOption, defaultZ, defaultZlevel) {
|
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]], function (item) {
|
var prop = item[0];
|
if (zrUtil.hasOwn(elOption, prop)) {
|
el[prop] = zrUtil.retrieve2(elOption[prop], item[1]);
|
} else if (el[prop] == null) {
|
el[prop] = item[1];
|
}
|
});
|
}
|
zrUtil.each(zrUtil.keys(elOption), function (key) {
|
// Assign event handlers.
|
// PENDING: should enumerate all event names or use pattern matching?
|
if (key.indexOf('on') === 0) {
|
var val = elOption[key];
|
el[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.id = elOption.id);
|
}
|
// Remove unnecessary props to avoid potential problems.
|
function getCleanedElOption(elOption) {
|
elOption = zrUtil.extend({}, elOption);
|
zrUtil.each(['id', 'parentId', '$action', 'hv', 'bounding', 'textContent', 'clipPath'].concat(layoutUtil.LOCATION_PARAMS), function (name) {
|
delete elOption[name];
|
});
|
return elOption;
|
}
|
function setEventData(el, graphicModel, elOption) {
|
var 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;
|
}
|
}
|
