cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
312 lines (311 loc) • 10.4 kB
JavaScript
import { __extends } from "../../../tslib/tslib.es6.mjs";
import Element from "../Element.mjs";
import BoundingRect from "../core/BoundingRect.mjs";
import { keys, extend, createObject } from "../core/util.mjs";
import { STYLE_CHANGED_BIT, REDRAW_BIT } from "./constants.mjs";
var STYLE_MAGIC_KEY = "__zr_style_" + Math.round(Math.random() * 10);
var DEFAULT_COMMON_STYLE = {
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: "#000",
opacity: 1,
blend: "source-over"
};
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(Displayable2, _super);
function Displayable2(props) {
return _super.call(this, props) || this;
}
Displayable2.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({});
}
};
Displayable2.prototype.beforeBrush = function() {
};
Displayable2.prototype.afterBrush = function() {
};
Displayable2.prototype.innerBeforeBrush = function() {
};
Displayable2.prototype.innerAfterBrush = function() {
};
Displayable2.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;
};
Displayable2.prototype.contain = function(x, y) {
return this.rectContain(x, y);
};
Displayable2.prototype.traverse = function(cb, context) {
cb.call(context, this);
};
Displayable2.prototype.rectContain = function(x, y) {
var coord = this.transformCoordToLocal(x, y);
var rect = this.getBoundingRect();
return rect.contain(coord[0], coord[1]);
};
Displayable2.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;
};
Displayable2.prototype.setPrevPaintRect = function(paintRect) {
if (paintRect) {
this._prevPaintRect = this._prevPaintRect || new BoundingRect(0, 0, 0, 0);
this._prevPaintRect.copy(paintRect);
} else {
this._prevPaintRect = null;
}
};
Displayable2.prototype.getPrevPaintRect = function() {
return this._prevPaintRect;
};
Displayable2.prototype.animateStyle = function(loop) {
return this.animate("style", loop);
};
Displayable2.prototype.updateDuringAnimation = function(targetKey) {
if (targetKey === "style") {
this.dirtyStyle();
} else {
this.markRedraw();
}
};
Displayable2.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);
}
}
};
Displayable2.prototype.setStyle = function(keyOrObj, value) {
if (typeof keyOrObj === "string") {
this.style[keyOrObj] = value;
} else {
extend(this.style, keyOrObj);
}
this.dirtyStyle();
return this;
};
Displayable2.prototype.dirtyStyle = function(notRedraw) {
if (!notRedraw) {
this.markRedraw();
}
this.__dirty |= STYLE_CHANGED_BIT;
if (this._rect) {
this._rect = null;
}
};
Displayable2.prototype.dirty = function() {
this.dirtyStyle();
};
Displayable2.prototype.styleChanged = function() {
return !!(this.__dirty & STYLE_CHANGED_BIT);
};
Displayable2.prototype.styleUpdated = function() {
this.__dirty &= ~STYLE_CHANGED_BIT;
};
Displayable2.prototype.createStyle = function(obj) {
return createObject(DEFAULT_COMMON_STYLE, obj);
};
Displayable2.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();
};
Displayable2.prototype.isStyleObject = function(obj) {
return obj[STYLE_MAGIC_KEY];
};
Displayable2.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);
};
Displayable2.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];
}
}
}
};
Displayable2.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;
};
Displayable2.prototype._mergeStyle = function(targetStyle, sourceStyle) {
extend(targetStyle, sourceStyle);
return targetStyle;
};
Displayable2.prototype.getAnimationStyleProps = function() {
return DEFAULT_COMMON_ANIMATION_PROPS;
};
Displayable2.initDefaultProps = function() {
var dispProto = Displayable2.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 Displayable2;
}(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);
}
var Displayable$1 = Displayable;
export { DEFAULT_COMMON_ANIMATION_PROPS, DEFAULT_COMMON_STYLE, Displayable$1 as default };