lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 04:14:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

performance updates

Browse Source
This commit is contained in:
Anton Lavrenov
2020-07-30 10:44:15 -05:00
parent 2dbde0fd6f
commit dd84716715
7 changed files with 277 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/Node.ts
View File

@@ -208,30 +208,17 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
children = emptyChildren;
nodeType!: string;
className!: string;
_dragEventId: number | null = null;
_shouldFireChangeEvents = false;
constructor(config?: Config) {
// on initial set attrs wi don't need to fire change events
// because nobody is listening to them yet
this.setAttrs(config);
this._shouldFireChangeEvents = true;
// event bindings for cache handling
this.on(TRANSFORM_CHANGE_STR, () => {
if (this._batchingTransformChange) {
this._needClearTransformCache = true;
return;
}
this._clearCache(TRANSFORM);
this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
});
this.on('visibleChange.konva', () => {
this._clearSelfAndDescendantCache(VISIBLE);
});
this.on('listeningChange.konva', () => {
this._clearSelfAndDescendantCache(LISTENING);
});
this.on('opacityChange.konva', () => {
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
});
// all change event listeners are attached to the prototype
}
hasChildren() {
@@ -2218,7 +2205,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
return this;
}
_setAttr(key, val) {
_setAttr(key, val, skipFire = false) {
var oldVal = this.attrs[key];
if (oldVal === val && !Util.isObject(val)) {
return;
@@ -2228,7 +2215,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
} else {
this.attrs[key] = val;
}
this._fireChangeEvent(key, oldVal, val);
if (this._shouldFireChangeEvents) {
this._fireChangeEvent(key, oldVal, val);
}
}
_setComponentAttr(key, component, val) {
var oldVal;
@@ -2280,11 +2269,32 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
}
}
_getListeners(eventType) {
let totalEvents = [];
let obj;
while (true) {
obj = obj ? Object.getPrototypeOf(obj) : this;
if (!obj) {
break;
}
if (!obj.eventListeners) {
continue;
}
const events = obj.eventListeners[eventType];
if (!events) {
continue;
}
totalEvents = events.concat(totalEvents);
obj = Object.getPrototypeOf(obj);
}
return totalEvents;
}
_fire(eventType, evt) {
var events = this.eventListeners[eventType],
var events = this._getListeners(eventType),
i;
if (events) {
if (events.length) {
evt = evt || {};
evt.currentTarget = this;
evt.type = eventType;
@@ -2604,6 +2614,28 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
Node.prototype.nodeType = 'Node';
Node.prototype._attrsAffectingSize = [];
// attache events listeners once into prototype
// that way we don't spend too much time on making an new instance
Node.prototype.eventListeners = {};
Node.prototype.on.call(Node.prototype, TRANSFORM_CHANGE_STR, function () {
if (this._batchingTransformChange) {
this._needClearTransformCache = true;
return;
}
this._clearCache(TRANSFORM);
this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
});
Node.prototype.on.call(Node.prototype, 'visibleChange.konva', function () {
this._clearSelfAndDescendantCache(VISIBLE);
});
Node.prototype.on.call(Node.prototype, 'listeningChange.konva', function () {
this._clearSelfAndDescendantCache(LISTENING);
});
Node.prototype.on.call(Node.prototype, 'opacityChange.konva', function () {
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
});
const addGetterSetter = Factory.addGetterSetter;
/**

56
src/Shape.ts
View File

@@ -182,31 +182,6 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
this.colorKey = key;
shapes[key] = this;
this.on(
'shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',
_clearHasShadowCache
);
this.on(
'shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',
_clearGetShadowRGBACache
);
this.on(
'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva',
_clearFillPatternCache
);
this.on(
'fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva',
_clearLinearGradientCache
);
this.on(
'fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva',
_clearRadialGradientCache
);
}
/**
@@ -842,6 +817,37 @@ Shape.prototype._centroid = false;
Shape.prototype.nodeType = 'Shape';
_registerNode(Shape);
Shape.prototype.eventListeners = {};
Shape.prototype.on.call(
Shape.prototype,
'shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',
_clearHasShadowCache
);
Shape.prototype.on.call(
Shape.prototype,
'shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',
_clearGetShadowRGBACache
);
Shape.prototype.on.call(
Shape.prototype,
'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva',
_clearFillPatternCache
);
Shape.prototype.on.call(
Shape.prototype,
'fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva',
_clearLinearGradientCache
);
Shape.prototype.on.call(
Shape.prototype,
'fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva',
_clearRadialGradientCache
);
// add getters and setters
Factory.addGetterSetter(Shape, 'stroke', undefined, getStringValidator());