You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
12 KiB
325 lines
12 KiB
4 weeks ago
|
import { __extends } from "tslib";
|
||
|
|
import Element from '../Element.js';
|
||
|
|
import BoundingRect from '../core/BoundingRect.js';
|
||
|
|
import { keys, extend, createObject } from '../core/util.js';
|
||
|
|
import { REDRAW_BIT, STYLE_CHANGED_BIT } from './constants.js';
|
||
|
|
var STYLE_MAGIC_KEY = '__zr_style_' + Math.round((Math.random() * 10));
|
||
|
|
export var DEFAULT_COMMON_STYLE = {
|
||
|
|
shadowBlur: 0,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowOffsetY: 0,
|
||
|
|
shadowColor: '#000',
|
||
|
|
opacity: 1,
|
||
|
|
blend: 'source-over'
|
||
|
|
};
|
||
|
|
export var DEFAULT_COMMON_ANIMATION_PROPS = {
|
||
|
|
style: {
|
||
|
|
shadowBlur: true,
|
||
|
|
shadowOffsetX: true,
|
||
|
|
shadowOffsetY: true,
|
||
|
|
shadowColor: true,
|
||
|
|
opacity: true
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DEFAULT_COMMON_STYLE[STYLE_MAGIC_KEY] = true;
|
||
|
|
var PRIMARY_STATES_KEYS = ['z', 'z2', 'invisible'];
|
||
|
|
var PRIMARY_STATES_KEYS_IN_HOVER_LAYER = ['invisible'];
|
||
|
|
var Displayable = (function (_super) {
|
||
|
|
__extends(Displayable, _super);
|
||
|
|
function Displayable(props) {
|
||
|
|
return _super.call(this, props) || this;
|
||
|
|
}
|
||
|
|
Displayable.prototype._init = function (props) {
|
||
|
|
var keysArr = keys(props);
|
||
|
|
for (var i = 0; i < keysArr.length; i++) {
|
||
|
|
var key = keysArr[i];
|
||
|
|
if (key === 'style') {
|
||
|
|
this.useStyle(props[key]);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_super.prototype.attrKV.call(this, key, props[key]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!this.style) {
|
||
|
|
this.useStyle({});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Displayable.prototype.beforeBrush = function () { };
|
||
|
|
Displayable.prototype.afterBrush = function () { };
|
||
|
|
Displayable.prototype.innerBeforeBrush = function () { };
|
||
|
|
Displayable.prototype.innerAfterBrush = function () { };
|
||
|
|
Displayable.prototype.shouldBePainted = function (viewWidth, viewHeight, considerClipPath, considerAncestors) {
|
||
|
|
var m = this.transform;
|
||
|
|
if (this.ignore
|
||
|
|
|| this.invisible
|
||
|
|
|| this.style.opacity === 0
|
||
|
|
|| (this.culling
|
||
|
|
&& isDisplayableCulled(this, viewWidth, viewHeight))
|
||
|
|
|| (m && !m[0] && !m[3])) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (considerClipPath && this.__clipPaths) {
|
||
|
|
for (var i = 0; i < this.__clipPaths.length; ++i) {
|
||
|
|
if (this.__clipPaths[i].isZeroArea()) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (considerAncestors && this.parent) {
|
||
|
|
var parent_1 = this.parent;
|
||
|
|
while (parent_1) {
|
||
|
|
if (parent_1.ignore) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
parent_1 = parent_1.parent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
Displayable.prototype.contain = function (x, y) {
|
||
|
|
return this.rectContain(x, y);
|
||
|
|
};
|
||
|
|
Displayable.prototype.traverse = function (cb, context) {
|
||
|
|
cb.call(context, this);
|
||
|
|
};
|
||
|
|
Displayable.prototype.rectContain = function (x, y) {
|
||
|
|
var coord = this.transformCoordToLocal(x, y);
|
||
|
|
var rect = this.getBoundingRect();
|
||
|
|
return rect.contain(coord[0], coord[1]);
|
||
|
|
};
|
||
|
|
Displayable.prototype.getPaintRect = function () {
|
||
|
|
var rect = this._paintRect;
|
||
|
|
if (!this._paintRect || this.__dirty) {
|
||
|
|
var transform = this.transform;
|
||
|
|
var elRect = this.getBoundingRect();
|
||
|
|
var style = this.style;
|
||
|
|
var shadowSize = style.shadowBlur || 0;
|
||
|
|
var shadowOffsetX = style.shadowOffsetX || 0;
|
||
|
|
var shadowOffsetY = style.shadowOffsetY || 0;
|
||
|
|
rect = this._paintRect || (this._paintRect = new BoundingRect(0, 0, 0, 0));
|
||
|
|
if (transform) {
|
||
|
|
BoundingRect.applyTransform(rect, elRect, transform);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
rect.copy(elRect);
|
||
|
|
}
|
||
|
|
if (shadowSize || shadowOffsetX || shadowOffsetY) {
|
||
|
|
rect.width += shadowSize * 2 + Math.abs(shadowOffsetX);
|
||
|
|
rect.height += shadowSize * 2 + Math.abs(shadowOffsetY);
|
||
|
|
rect.x = Math.min(rect.x, rect.x + shadowOffsetX - shadowSize);
|
||
|
|
rect.y = Math.min(rect.y, rect.y + shadowOffsetY - shadowSize);
|
||
|
|
}
|
||
|
|
var tolerance = this.dirtyRectTolerance;
|
||
|
|
if (!rect.isZero()) {
|
||
|
|
rect.x = Math.floor(rect.x - tolerance);
|
||
|
|
rect.y = Math.floor(rect.y - tolerance);
|
||
|
|
rect.width = Math.ceil(rect.width + 1 + tolerance * 2);
|
||
|
|
rect.height = Math.ceil(rect.height + 1 + tolerance * 2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return rect;
|
||
|
|
};
|
||
|
|
Displayable.prototype.setPrevPaintRect = function (paintRect) {
|
||
|
|
if (paintRect) {
|
||
|
|
this._prevPaintRect = this._prevPaintRect || new BoundingRect(0, 0, 0, 0);
|
||
|
|
this._prevPaintRect.copy(paintRect);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._prevPaintRect = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Displayable.prototype.getPrevPaintRect = function () {
|
||
|
|
return this._prevPaintRect;
|
||
|
|
};
|
||
|
|
Displayable.prototype.animateStyle = function (loop) {
|
||
|
|
return this.animate('style', loop);
|
||
|
|
};
|
||
|
|
Displayable.prototype.updateDuringAnimation = function (targetKey) {
|
||
|
|
if (targetKey === 'style') {
|
||
|
|
this.dirtyStyle();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.markRedraw();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Displayable.prototype.attrKV = function (key, value) {
|
||
|
|
if (key !== 'style') {
|
||
|
|
_super.prototype.attrKV.call(this, key, value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (!this.style) {
|
||
|
|
this.useStyle(value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setStyle(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Displayable.prototype.setStyle = function (keyOrObj, value) {
|
||
|
|
if (typeof keyOrObj === 'string') {
|
||
|
|
this.style[keyOrObj] = value;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
extend(this.style, keyOrObj);
|
||
|
|
}
|
||
|
|
this.dirtyStyle();
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
Displayable.prototype.dirtyStyle = function (notRedraw) {
|
||
|
|
if (!notRedraw) {
|
||
|
|
this.markRedraw();
|
||
|
|
}
|
||
|
|
this.__dirty |= STYLE_CHANGED_BIT;
|
||
|
|
if (this._rect) {
|
||
|
|
this._rect = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Displayable.prototype.dirty = function () {
|
||
|
|
this.dirtyStyle();
|
||
|
|
};
|
||
|
|
Displayable.prototype.styleChanged = function () {
|
||
|
|
return !!(this.__dirty & STYLE_CHANGED_BIT);
|
||
|
|
};
|
||
|
|
Displayable.prototype.styleUpdated = function () {
|
||
|
|
this.__dirty &= ~STYLE_CHANGED_BIT;
|
||
|
|
};
|
||
|
|
Displayable.prototype.createStyle = function (obj) {
|
||
|
|
return createObject(DEFAULT_COMMON_STYLE, obj);
|
||
|
|
};
|
||
|
|
Displayable.prototype.useStyle = function (obj) {
|
||
|
|
if (!obj[STYLE_MAGIC_KEY]) {
|
||
|
|
obj = this.createStyle(obj);
|
||
|
|
}
|
||
|
|
if (this.__inHover) {
|
||
|
|
this.__hoverStyle = obj;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.style = obj;
|
||
|
|
}
|
||
|
|
this.dirtyStyle();
|
||
|
|
};
|
||
|
|
Displayable.prototype.isStyleObject = function (obj) {
|
||
|
|
return obj[STYLE_MAGIC_KEY];
|
||
|
|
};
|
||
|
|
Displayable.prototype._innerSaveToNormal = function (toState) {
|
||
|
|
_super.prototype._innerSaveToNormal.call(this, toState);
|
||
|
|
var normalState = this._normalState;
|
||
|
|
if (toState.style && !normalState.style) {
|
||
|
|
normalState.style = this._mergeStyle(this.createStyle(), this.style);
|
||
|
|
}
|
||
|
|
this._savePrimaryToNormal(toState, normalState, PRIMARY_STATES_KEYS);
|
||
|
|
};
|
||
|
|
Displayable.prototype._applyStateObj = function (stateName, state, normalState, keepCurrentStates, transition, animationCfg) {
|
||
|
|
_super.prototype._applyStateObj.call(this, stateName, state, normalState, keepCurrentStates, transition, animationCfg);
|
||
|
|
var needsRestoreToNormal = !(state && keepCurrentStates);
|
||
|
|
var targetStyle;
|
||
|
|
if (state && state.style) {
|
||
|
|
if (transition) {
|
||
|
|
if (keepCurrentStates) {
|
||
|
|
targetStyle = state.style;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetStyle = this._mergeStyle(this.createStyle(), normalState.style);
|
||
|
|
this._mergeStyle(targetStyle, state.style);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetStyle = this._mergeStyle(this.createStyle(), keepCurrentStates ? this.style : normalState.style);
|
||
|
|
this._mergeStyle(targetStyle, state.style);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (needsRestoreToNormal) {
|
||
|
|
targetStyle = normalState.style;
|
||
|
|
}
|
||
|
|
if (targetStyle) {
|
||
|
|
if (transition) {
|
||
|
|
var sourceStyle = this.style;
|
||
|
|
this.style = this.createStyle(needsRestoreToNormal ? {} : sourceStyle);
|
||
|
|
if (needsRestoreToNormal) {
|
||
|
|
var changedKeys = keys(sourceStyle);
|
||
|
|
for (var i = 0; i < changedKeys.length; i++) {
|
||
|
|
var key = changedKeys[i];
|
||
|
|
if (key in targetStyle) {
|
||
|
|
targetStyle[key] = targetStyle[key];
|
||
|
|
this.style[key] = sourceStyle[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var targetKeys = keys(targetStyle);
|
||
|
|
for (var i = 0; i < targetKeys.length; i++) {
|
||
|
|
var key = targetKeys[i];
|
||
|
|
this.style[key] = this.style[key];
|
||
|
|
}
|
||
|
|
this._transitionState(stateName, {
|
||
|
|
style: targetStyle
|
||
|
|
}, animationCfg, this.getAnimationStyleProps());
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.useStyle(targetStyle);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var statesKeys = this.__inHover ? PRIMARY_STATES_KEYS_IN_HOVER_LAYER : PRIMARY_STATES_KEYS;
|
||
|
|
for (var i = 0; i < statesKeys.length; i++) {
|
||
|
|
var key = statesKeys[i];
|
||
|
|
if (state && state[key] != null) {
|
||
|
|
this[key] = state[key];
|
||
|
|
}
|
||
|
|
else if (needsRestoreToNormal) {
|
||
|
|
if (normalState[key] != null) {
|
||
|
|
this[key] = normalState[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Displayable.prototype._mergeStates = function (states) {
|
||
|
|
var mergedState = _super.prototype._mergeStates.call(this, states);
|
||
|
|
var mergedStyle;
|
||
|
|
for (var i = 0; i < states.length; i++) {
|
||
|
|
var state = states[i];
|
||
|
|
if (state.style) {
|
||
|
|
mergedStyle = mergedStyle || {};
|
||
|
|
this._mergeStyle(mergedStyle, state.style);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (mergedStyle) {
|
||
|
|
mergedState.style = mergedStyle;
|
||
|
|
}
|
||
|
|
return mergedState;
|
||
|
|
};
|
||
|
|
Displayable.prototype._mergeStyle = function (targetStyle, sourceStyle) {
|
||
|
|
extend(targetStyle, sourceStyle);
|
||
|
|
return targetStyle;
|
||
|
|
};
|
||
|
|
Displayable.prototype.getAnimationStyleProps = function () {
|
||
|
|
return DEFAULT_COMMON_ANIMATION_PROPS;
|
||
|
|
};
|
||
|
|
Displayable.initDefaultProps = (function () {
|
||
|
|
var dispProto = Displayable.prototype;
|
||
|
|
dispProto.type = 'displayable';
|
||
|
|
dispProto.invisible = false;
|
||
|
|
dispProto.z = 0;
|
||
|
|
dispProto.z2 = 0;
|
||
|
|
dispProto.zlevel = 0;
|
||
|
|
dispProto.culling = false;
|
||
|
|
dispProto.cursor = 'pointer';
|
||
|
|
dispProto.rectHover = false;
|
||
|
|
dispProto.incremental = false;
|
||
|
|
dispProto._rect = null;
|
||
|
|
dispProto.dirtyRectTolerance = 0;
|
||
|
|
dispProto.__dirty = REDRAW_BIT | STYLE_CHANGED_BIT;
|
||
|
|
})();
|
||
|
|
return Displayable;
|
||
|
|
}(Element));
|
||
|
|
var tmpRect = new BoundingRect(0, 0, 0, 0);
|
||
|
|
var viewRect = new BoundingRect(0, 0, 0, 0);
|
||
|
|
function isDisplayableCulled(el, width, height) {
|
||
|
|
tmpRect.copy(el.getBoundingRect());
|
||
|
|
if (el.transform) {
|
||
|
|
tmpRect.applyTransform(el.transform);
|
||
|
|
}
|
||
|
|
viewRect.width = width;
|
||
|
|
viewRect.height = height;
|
||
|
|
return !tmpRect.intersect(viewRect);
|
||
|
|
}
|
||
|
|
export default Displayable;
|