Skip to content

Commit 4815e50

Browse files
CatchABusCatchABus
authored
perf(core): reduce padding native setter calls (#11216)
1 parent 89173e7 commit 4815e50

16 files changed

Lines changed: 176 additions & 360 deletions

File tree

‎packages/core/ui/button/index.android.ts‎

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ButtonBase } from './button-common';
22
import { PseudoClassHandler } from '../core/view';
3-
import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties';
3+
import { zIndexProperty, minWidthProperty, minHeightProperty, paddingInternalProperty } from '../styling/style-properties';
44
import { Length } from '../styling/length-shared';
55
import { textAlignmentProperty } from '../text-base';
66
import { CoreTypes } from '../../core-types';
@@ -123,32 +123,12 @@ export class Button extends ButtonBase {
123123
return { value: dips, unit: 'px' };
124124
}
125125

126-
[paddingTopProperty.getDefault](): CoreTypes.LengthType {
127-
return { value: this._defaultPaddingTop, unit: 'px' };
128-
}
129-
[paddingTopProperty.setNative](value: CoreTypes.LengthType) {
130-
org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
131-
}
132-
133-
[paddingRightProperty.getDefault](): CoreTypes.LengthType {
134-
return { value: this._defaultPaddingRight, unit: 'px' };
135-
}
136-
[paddingRightProperty.setNative](value: CoreTypes.LengthType) {
137-
org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
138-
}
139-
140-
[paddingBottomProperty.getDefault](): CoreTypes.LengthType {
141-
return { value: this._defaultPaddingBottom, unit: 'px' };
142-
}
143-
[paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
144-
org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
145-
}
146-
147-
[paddingLeftProperty.getDefault](): CoreTypes.LengthType {
148-
return { value: this._defaultPaddingLeft, unit: 'px' };
149-
}
150-
[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
151-
org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
126+
[paddingInternalProperty.setNative](_value: string) {
127+
const left = this.effectivePaddingLeft + Length.toDevicePixels(this.style.borderLeftWidth, 0);
128+
const top = this.effectivePaddingTop + Length.toDevicePixels(this.style.borderTopWidth, 0);
129+
const right = this.effectivePaddingRight + Length.toDevicePixels(this.style.borderRightWidth, 0);
130+
const bottom = this.effectivePaddingBottom + Length.toDevicePixels(this.style.borderBottomWidth, 0);
131+
this.nativeViewProtected.setPadding(left, top, right, bottom);
152132
}
153133

154134
[zIndexProperty.setNative](value: number) {

‎packages/core/ui/button/index.ios.ts‎

Lines changed: 18 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ControlStateChangeListener } from '../core/control-state-change';
22
import { ButtonBase } from './button-common';
33
import { View, PseudoClassHandler } from '../core/view';
4-
import { borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, directionProperty } from '../styling/style-properties';
4+
import { borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, directionProperty, paddingInternalProperty } from '../styling/style-properties';
55
import { textAlignmentProperty, whiteSpaceProperty, textOverflowProperty } from '../text-base';
66
import { layout } from '../../utils';
77
import { CoreTypes } from '../../core-types';
@@ -28,8 +28,10 @@ export class Button extends ButtonBase {
2828

2929
public initNativeView(): void {
3030
super.initNativeView();
31+
3132
this._tapHandler = TapHandlerImpl.initWithOwner(new WeakRef(this));
3233
this.nativeViewProtected.addTargetActionForControlEvents(this._tapHandler, 'tap', UIControlEvents.TouchUpInside);
34+
this._setDefaultPaddings(this.nativeViewProtected.contentEdgeInsets);
3335
}
3436

3537
public disposeNativeView(): void {
@@ -86,12 +88,12 @@ export class Button extends ButtonBase {
8688
[borderTopWidthProperty.setNative](value: CoreTypes.LengthType) {
8789
const inset = this.nativeViewProtected.contentEdgeInsets;
8890
const top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
89-
this.nativeViewProtected.contentEdgeInsets = {
91+
this.nativeViewProtected.contentEdgeInsets = new UIEdgeInsets({
9092
top: top,
9193
left: inset.left,
9294
bottom: inset.bottom,
9395
right: inset.right,
94-
};
96+
});
9597
}
9698

9799
[borderRightWidthProperty.getDefault](): CoreTypes.LengthType {
@@ -103,12 +105,12 @@ export class Button extends ButtonBase {
103105
[borderRightWidthProperty.setNative](value: CoreTypes.LengthType) {
104106
const inset = this.nativeViewProtected.contentEdgeInsets;
105107
const right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
106-
this.nativeViewProtected.contentEdgeInsets = {
108+
this.nativeViewProtected.contentEdgeInsets = new UIEdgeInsets({
107109
top: inset.top,
108110
left: inset.left,
109111
bottom: inset.bottom,
110112
right: right,
111-
};
113+
});
112114
}
113115

114116
[borderBottomWidthProperty.getDefault](): CoreTypes.LengthType {
@@ -120,12 +122,12 @@ export class Button extends ButtonBase {
120122
[borderBottomWidthProperty.setNative](value: CoreTypes.LengthType) {
121123
const inset = this.nativeViewProtected.contentEdgeInsets;
122124
const bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
123-
this.nativeViewProtected.contentEdgeInsets = {
125+
this.nativeViewProtected.contentEdgeInsets = new UIEdgeInsets({
124126
top: inset.top,
125127
left: inset.left,
126128
bottom: bottom,
127129
right: inset.right,
128-
};
130+
});
129131
}
130132

131133
[borderLeftWidthProperty.getDefault](): CoreTypes.LengthType {
@@ -137,80 +139,21 @@ export class Button extends ButtonBase {
137139
[borderLeftWidthProperty.setNative](value: CoreTypes.LengthType) {
138140
const inset = this.nativeViewProtected.contentEdgeInsets;
139141
const left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
140-
this.nativeViewProtected.contentEdgeInsets = {
142+
this.nativeViewProtected.contentEdgeInsets = new UIEdgeInsets({
141143
top: inset.top,
142144
left: left,
143145
bottom: inset.bottom,
144146
right: inset.right,
145-
};
146-
}
147-
148-
[paddingTopProperty.getDefault](): CoreTypes.LengthType {
149-
return {
150-
value: this.nativeViewProtected.contentEdgeInsets.top,
151-
unit: 'px',
152-
};
153-
}
154-
[paddingTopProperty.setNative](value: CoreTypes.LengthType) {
155-
const inset = this.nativeViewProtected.contentEdgeInsets;
156-
const top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
157-
this.nativeViewProtected.contentEdgeInsets = {
158-
top: top,
159-
left: inset.left,
160-
bottom: inset.bottom,
161-
right: inset.right,
162-
};
147+
});
163148
}
164149

165-
[paddingRightProperty.getDefault](): CoreTypes.LengthType {
166-
return {
167-
value: this.nativeViewProtected.contentEdgeInsets.right,
168-
unit: 'px',
169-
};
170-
}
171-
[paddingRightProperty.setNative](value: CoreTypes.LengthType) {
172-
const inset = this.nativeViewProtected.contentEdgeInsets;
173-
const right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
174-
this.nativeViewProtected.contentEdgeInsets = {
175-
top: inset.top,
176-
left: inset.left,
177-
bottom: inset.bottom,
178-
right: right,
179-
};
180-
}
181-
182-
[paddingBottomProperty.getDefault](): CoreTypes.LengthType {
183-
return {
184-
value: this.nativeViewProtected.contentEdgeInsets.bottom,
185-
unit: 'px',
186-
};
187-
}
188-
[paddingBottomProperty.setNative](value: CoreTypes.LengthType) {
189-
const inset = this.nativeViewProtected.contentEdgeInsets;
190-
const bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
191-
this.nativeViewProtected.contentEdgeInsets = {
192-
top: inset.top,
193-
left: inset.left,
194-
bottom: bottom,
195-
right: inset.right,
196-
};
197-
}
198-
199-
[paddingLeftProperty.getDefault](): CoreTypes.LengthType {
200-
return {
201-
value: this.nativeViewProtected.contentEdgeInsets.left,
202-
unit: 'px',
203-
};
204-
}
205-
[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
206-
const inset = this.nativeViewProtected.contentEdgeInsets;
207-
const left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
208-
this.nativeViewProtected.contentEdgeInsets = {
209-
top: inset.top,
210-
left: left,
211-
bottom: inset.bottom,
212-
right: inset.right,
213-
};
150+
[paddingInternalProperty.setNative](_value: string) {
151+
this.nativeViewProtected.contentEdgeInsets = new UIEdgeInsets({
152+
top: layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth),
153+
left: layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth),
154+
bottom: layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth),
155+
right: layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth),
156+
});
214157
}
215158

216159
[textAlignmentProperty.setNative](value: CoreTypes.TextAlignmentType) {

‎packages/core/ui/core/view-base/index.ts‎

Lines changed: 49 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AlignSelf, Flex, FlexFlow, FlexGrow, FlexShrink, FlexWrapBefore, Order } from '../../layouts/flexbox-layout';
1+
import { AlignSelf, FlexGrow, FlexShrink, FlexWrapBefore, Order } from '../../layouts/flexbox-layout';
22
import { Page } from '../../page';
33
import { CoreTypes, Trace } from '../../styling/styling-shared';
44
import { Property, CssProperty, CssAnimationProperty, InheritedProperty, clearInheritedProperties, propagateInheritableProperties, propagateInheritableCssProperties, initNativeView } from '../properties';
@@ -8,12 +8,10 @@ import { Binding } from '../bindable';
88
import { BindingOptions } from '../bindable/bindable-types';
99
import { Observable, PropertyChangeData, WrappedValue } from '../../../data/observable';
1010
import { Style } from '../../styling/style';
11-
import { paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../../styling/style-properties';
1211
import type { ModalTransition } from '../../transition/modal-transition';
1312

1413
// TODO: Remove this import!
1514
import { getClass } from '../../../utils/types';
16-
import { unsetValue } from '../properties/property-shared';
1715

1816
import { profile } from '../../../profiling';
1917

@@ -339,6 +337,17 @@ export abstract class ViewBase extends Observable {
339337
private _style: Style;
340338
private _isLoaded: boolean;
341339

340+
private _effectivePaddingTop: number = null;
341+
private _effectivePaddingRight: number = null;
342+
private _effectivePaddingBottom: number = null;
343+
private _effectivePaddingLeft: number = null;
344+
345+
protected _defaultPaddingTop: number = 0;
346+
protected _defaultPaddingRight: number = 0;
347+
protected _defaultPaddingBottom: number = 0;
348+
protected _defaultPaddingLeft: number = 0;
349+
protected _isPaddingRelative: boolean;
350+
342351
/**
343352
* @deprecated
344353
*/
@@ -527,21 +536,11 @@ export abstract class ViewBase extends Observable {
527536
public effectiveMarginRight: number;
528537
public effectiveMarginBottom: number;
529538
public effectiveMarginLeft: number;
530-
public effectivePaddingTop: number;
531-
public effectivePaddingRight: number;
532-
public effectivePaddingBottom: number;
533-
public effectivePaddingLeft: number;
534539
public effectiveBorderTopWidth: number;
535540
public effectiveBorderRightWidth: number;
536541
public effectiveBorderBottomWidth: number;
537542
public effectiveBorderLeftWidth: number;
538543

539-
public _defaultPaddingTop: number;
540-
public _defaultPaddingRight: number;
541-
public _defaultPaddingBottom: number;
542-
public _defaultPaddingLeft: number;
543-
public _isPaddingRelative: boolean;
544-
545544
/**
546545
* @private
547546
* Module name when the view is a module root. Otherwise, it is undefined.
@@ -637,6 +636,38 @@ export abstract class ViewBase extends Observable {
637636
this.className = v;
638637
}
639638

639+
get effectivePaddingTop(): number {
640+
return this._effectivePaddingTop != null ? this._effectivePaddingTop : this._defaultPaddingTop;
641+
}
642+
set effectivePaddingTop(v: number) {
643+
this._effectivePaddingTop = v;
644+
}
645+
646+
get effectivePaddingRight(): number {
647+
return this._effectivePaddingRight != null ? this._effectivePaddingRight : this._defaultPaddingRight;
648+
}
649+
set effectivePaddingRight(v: number) {
650+
this._effectivePaddingRight = v;
651+
}
652+
653+
get effectivePaddingBottom(): number {
654+
return this._effectivePaddingBottom != null ? this._effectivePaddingBottom : this._defaultPaddingBottom;
655+
}
656+
set effectivePaddingBottom(v: number) {
657+
this._effectivePaddingBottom = v;
658+
}
659+
660+
get effectivePaddingLeft(): number {
661+
return this._effectivePaddingLeft != null ? this._effectivePaddingLeft : this._defaultPaddingLeft;
662+
}
663+
set effectivePaddingLeft(v: number) {
664+
this._effectivePaddingLeft = v;
665+
}
666+
667+
getEffectivePaddingShorthand(): string {
668+
return `${this.effectivePaddingTop} ${this.effectivePaddingRight} ${this.effectivePaddingBottom} ${this.effectivePaddingLeft}`;
669+
}
670+
640671
/**
641672
* Returns the child view with the specified id.
642673
*/
@@ -724,6 +755,10 @@ export abstract class ViewBase extends Observable {
724755
}
725756
}
726757

758+
public _setDefaultPaddings(insets: any): void {
759+
// Overridden
760+
}
761+
727762
public _suspendNativeUpdates(type: SuspendType): void {
728763
if (type) {
729764
this._suspendNativeUpdatesCount = this._suspendNativeUpdatesCount | type;
@@ -1176,24 +1211,7 @@ export abstract class ViewBase extends Observable {
11761211
nativeView.defaultPaddings = DEFAULT_VIEW_PADDINGS.get(className);
11771212
}
11781213

1179-
this._defaultPaddingTop = result.top;
1180-
this._defaultPaddingRight = result.right;
1181-
this._defaultPaddingBottom = result.bottom;
1182-
this._defaultPaddingLeft = result.left;
1183-
1184-
const style = this.style;
1185-
if (!paddingTopProperty.isSet(style)) {
1186-
this.effectivePaddingTop = this._defaultPaddingTop;
1187-
}
1188-
if (!paddingRightProperty.isSet(style)) {
1189-
this.effectivePaddingRight = this._defaultPaddingRight;
1190-
}
1191-
if (!paddingBottomProperty.isSet(style)) {
1192-
this.effectivePaddingBottom = this._defaultPaddingBottom;
1193-
}
1194-
if (!paddingLeftProperty.isSet(style)) {
1195-
this.effectivePaddingLeft = this._defaultPaddingLeft;
1196-
}
1214+
this._setDefaultPaddings(result);
11971215
}
11981216
}
11991217
} else {
@@ -1536,18 +1554,10 @@ ViewBase.prototype.effectiveMarginTop = 0;
15361554
ViewBase.prototype.effectiveMarginRight = 0;
15371555
ViewBase.prototype.effectiveMarginBottom = 0;
15381556
ViewBase.prototype.effectiveMarginLeft = 0;
1539-
ViewBase.prototype.effectivePaddingTop = 0;
1540-
ViewBase.prototype.effectivePaddingRight = 0;
1541-
ViewBase.prototype.effectivePaddingBottom = 0;
1542-
ViewBase.prototype.effectivePaddingLeft = 0;
15431557
ViewBase.prototype.effectiveBorderTopWidth = 0;
15441558
ViewBase.prototype.effectiveBorderRightWidth = 0;
15451559
ViewBase.prototype.effectiveBorderBottomWidth = 0;
15461560
ViewBase.prototype.effectiveBorderLeftWidth = 0;
1547-
ViewBase.prototype._defaultPaddingTop = 0;
1548-
ViewBase.prototype._defaultPaddingRight = 0;
1549-
ViewBase.prototype._defaultPaddingBottom = 0;
1550-
ViewBase.prototype._defaultPaddingLeft = 0;
15511561
ViewBase.prototype._isViewBase = true;
15521562
ViewBase.prototype.recycleNativeView = 'never';
15531563
ViewBase.prototype.reusable = false;

0 commit comments

Comments
 (0)