Skip to content

Layout round instead of ceiling #3833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hshristov merged 2 commits into from
Mar 20, 2017
Merged

Layout round instead of ceiling #3833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
597b382
Layout round instead of cailing
Mar 20, 2017
39bf2cf
Fix switch measure routine
Mar 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions tns-core-modules/ui/action-bar/action-bar.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,24 +232,22 @@ export class ActionBar extends ActionBarBase {

private _navigationBarHeight: number = 0;
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
let width = layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);

let height = layout.getMeasureSpecSize(heightMeasureSpec);
let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
const height = layout.getMeasureSpecSize(heightMeasureSpec);
const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);

let navBarWidth = 0;
let navBarHeight = 0;
let frame = this.page.frame;

const frame = this.page.frame;
if (frame) {
let navBar: UIView = frame.ios.controller.navigationBar;
if (!navBar.hidden) {
let navBarSize = navBar.sizeThatFits(CGSizeMake(
(widthMode === layout.UNSPECIFIED) ? Number.POSITIVE_INFINITY : width,
(heightMode === layout.UNSPECIFIED) ? Number.POSITIVE_INFINITY : height));
navBarWidth = layout.toDevicePixels(navBarSize.width);
navBarHeight = layout.toDevicePixels(navBarSize.height);
const desiredSize = layout.measureNativeView(navBar, width, widthMode, height, heightMode);
navBarWidth = desiredSize.width;
navBarHeight = desiredSize.height;
}
}

Expand All @@ -276,7 +274,7 @@ export class ActionBar extends ActionBarBase {
View.layoutChild(this, this.titleView, 0, 0, right - left, this._navigationBarHeight);
this.actionItems.getItems().forEach((actionItem) => {
if (actionItem.actionView && actionItem.actionView.ios) {
let measuredWidth = actionItem.actionView.getMeasuredWidth(); 
let measuredWidth = actionItem.actionView.getMeasuredWidth();
let measuredHeight = actionItem.actionView.getMeasuredHeight();
View.layoutChild(this, actionItem.actionView, 0, 0, measuredWidth, measuredHeight);
}
Expand Down
16 changes: 7 additions & 9 deletions tns-core-modules/ui/core/view/view-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -572,20 +572,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
let measureHeight = 0;

if (child && !child.isCollapsed) {
let width = layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);

let height = layout.getMeasureSpecSize(heightMeasureSpec);
let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);

child._updateEffectiveLayoutValues(parent);

let style = child.style;
let horizontalMargins = child.effectiveMarginLeft + child.effectiveMarginRight;
let verticalMargins = child.effectiveMarginTop + child.effectiveMarginBottom;

let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, child.effectiveWidth, style.horizontalAlignment === "stretch");
let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, child.effectiveHeight, style.verticalAlignment === "stretch");
let childWidthMeasureSpec = ViewCommon.getMeasureSpec(widthMeasureSpec, horizontalMargins, child.effectiveWidth, style.horizontalAlignment === "stretch");
let childHeightMeasureSpec = ViewCommon.getMeasureSpec(heightMeasureSpec, verticalMargins, child.effectiveHeight, style.verticalAlignment === "stretch");

if (traceEnabled()) {
traceWrite(child.parent + " :measureChild: " + child + " " + layout.measureSpecToString(childWidthMeasureSpec) + ", " + layout.measureSpecToString(childHeightMeasureSpec), traceCategories.Layout);
Expand All @@ -599,14 +593,18 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
return { measuredWidth: measureWidth, measuredHeight: measureHeight };
}

private static getMeasureSpec(parentLength: number, parentSpecMode: number, margins: number, childLength: number, stretched: boolean): number {
private static getMeasureSpec(parentSpec: number, margins: number, childLength: number, stretched: boolean): number {
const parentLength = layout.getMeasureSpecSize(parentSpec);
const parentSpecMode = layout.getMeasureSpecMode(parentSpec);

let resultSize: number;
let resultMode: number;

// We want a specific size... let be it.
if (childLength >= 0) {
// If mode !== UNSPECIFIED we take the smaller of parentLength and childLength
// Otherwise we will need to clip the view but this is not possible in all Android API levels.
// TODO: remove Math.min(parentLength, childLength)
resultSize = parentSpecMode === layout.UNSPECIFIED ? childLength : Math.min(parentLength, childLength);
resultMode = layout.EXACTLY;
}
Expand Down
17 changes: 9 additions & 8 deletions tns-core-modules/ui/core/view/view.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,9 +370,9 @@ export class View extends ViewCommon {
get [horizontalAlignmentProperty.native](): HorizontalAlignment {
return <HorizontalAlignment>org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeView);
}
set [horizontalAlignmentProperty.native](value: HorizontalAlignment)  {
const  nativeView = this.nativeView;
const  lp: any = nativeView.getLayoutParams() || new org.nativescript.widgets.CommonLayoutParams();
set [horizontalAlignmentProperty.native](value: HorizontalAlignment) {
const nativeView = this.nativeView;
const lp: any = nativeView.getLayoutParams() || new org.nativescript.widgets.CommonLayoutParams();
// Set only if params gravity exists.
if (lp.gravity !== undefined) {
switch (value) {
Expand All @@ -397,8 +397,8 @@ export class View extends ViewCommon {
return <VerticalAlignment>org.nativescript.widgets.ViewHelper.getVerticalAlignment(this.nativeView);
}
set [verticalAlignmentProperty.native](value: VerticalAlignment) {
const  nativeView = this.nativeView;
const  lp: any = nativeView.getLayoutParams() || new org.nativescript.widgets.CommonLayoutParams();
const nativeView = this.nativeView;
const lp: any = nativeView.getLayoutParams() || new org.nativescript.widgets.CommonLayoutParams();
// Set only if params gravity exists.
if (lp.gravity !== undefined) {
switch (value) {
Expand Down Expand Up @@ -562,6 +562,7 @@ interface NativePercentLengthPropertyOptions {
setPixels: NativeSetter;
setPercent?: NativeSetter
}

function createNativePercentLengthProperty(options: NativePercentLengthPropertyOptions) {
const { key, auto = 0 } = options;
let setPixels, getPixels, setPercent;
Expand Down Expand Up @@ -590,11 +591,11 @@ function createNativePercentLengthProperty(options: NativePercentLengthPropertyO
if (length == "auto") { // tslint:disable-line
setPixels(this.nativeView, auto);
} else if (typeof length === "number") {
setPixels(this.nativeView, Math.ceil(length * layout.getDisplayDensity()));
setPixels(this.nativeView, layout.round(layout.toDevicePixels(length)));
} else if (length.unit == "dip") { // tslint:disable-line
setPixels(this.nativeView, Math.ceil(length.value * layout.getDisplayDensity()));
setPixels(this.nativeView, layout.round(layout.toDevicePixels(length.value)));
} else if (length.unit == "px") { // tslint:disable-line
setPixels(this.nativeView, Math.ceil(length.value));
setPixels(this.nativeView, layout.round(length.value));
} else if (length.unit == "%") { // tslint:disable-line
setPercent(this.nativeView, length.value);
} else {
Expand Down
41 changes: 16 additions & 25 deletions tns-core-modules/ui/core/view/view.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Point, View as ViewDefinition } from ".";

import { ios, Background } from "../../styling/background";
import {
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty,
traceEnabled, traceWrite, traceCategories
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty,
traceEnabled, traceWrite, traceCategories
} from "./view-common";

import {
Expand Down Expand Up @@ -100,35 +100,26 @@ export class View extends ViewCommon {
}

public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
let view = this.nativeView;
let nativeWidth = 0;
let nativeHeight = 0;

let width = layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
const view = this.nativeView;
const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);

let height = layout.getMeasureSpecSize(heightMeasureSpec);
let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
const height = layout.getMeasureSpecSize(heightMeasureSpec);
const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);

let nativeWidth = 0;
let nativeHeight = 0;
if (view) {
if (widthMode === layout.UNSPECIFIED) {
width = Number.POSITIVE_INFINITY;
}

if (heightMode === layout.UNSPECIFIED) {
height = Number.POSITIVE_INFINITY;
}

let nativeSize = view.sizeThatFits(CGSizeMake(layout.toDeviceIndependentPixels(width), layout.toDeviceIndependentPixels(height)));
nativeWidth = layout.toDevicePixels(nativeSize.width);
nativeHeight = layout.toDevicePixels(nativeSize.height);
const nativeSize = layout.measureNativeView(view, width, widthMode, height, heightMode);
nativeWidth = nativeSize.width;
nativeHeight = nativeSize.height;
}

let measureWidth = Math.max(nativeWidth, this.effectiveMinWidth);
let measureHeight = Math.max(nativeHeight, this.effectiveMinHeight);
const measureWidth = Math.max(nativeWidth, this.effectiveMinWidth);
const measureHeight = Math.max(nativeHeight, this.effectiveMinHeight);

let widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
let heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
const widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
const heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);

this.setMeasuredDimension(widthAndState, heightAndState);
}
Expand Down
31 changes: 11 additions & 20 deletions tns-core-modules/ui/html-view/html-view.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {
HtmlViewBase, View, layout, htmlProperty
HtmlViewBase, View, layout, htmlProperty
} from "./html-view-common";

export * from "./html-view-common";
Expand Down Expand Up @@ -30,29 +30,20 @@ export class HtmlView extends HtmlViewBase {
var nativeView = this._nativeView;
if (nativeView) {

let width = layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);

let height = layout.getMeasureSpecSize(heightMeasureSpec);
let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
const height = layout.getMeasureSpecSize(heightMeasureSpec);
const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);

if (widthMode === layout.UNSPECIFIED) {
width = Number.POSITIVE_INFINITY;
}
const desiredSize = layout.measureNativeView(nativeView, width, widthMode, height, heightMode);

if (heightMode === layout.UNSPECIFIED) {
height = Number.POSITIVE_INFINITY;
}
const labelWidth = Math.min(desiredSize.width, width);
const measureWidth = Math.max(labelWidth, this.effectiveMinWidth);
const measureHeight = Math.max(desiredSize.height, this.effectiveMinHeight);

let nativeSize = nativeView.sizeThatFits(CGSizeMake(width, height));
let labelWidth = layout.toDevicePixels(nativeSize.width);

labelWidth = Math.min(labelWidth, width);
let measureWidth = Math.max(labelWidth, this.effectiveMinWidth);
let measureHeight = Math.max(layout.toDevicePixels(nativeSize.height), this.effectiveMinHeight);

let widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
let heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
const widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
const heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);

this.setMeasuredDimension(widthAndState, heightAndState);
}
Expand Down
14 changes: 3 additions & 11 deletions tns-core-modules/ui/label/label.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,26 +73,18 @@ export class Label extends TextBase implements LabelDefinition {
let height = layout.getMeasureSpecSize(heightMeasureSpec);
let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);

if (widthMode === layout.UNSPECIFIED) {
width = Number.POSITIVE_INFINITY;
}

if (heightMode === layout.UNSPECIFIED) {
height = Number.POSITIVE_INFINITY;
}

this._fixedSize = (widthMode === layout.EXACTLY ? FixedSize.WIDTH : FixedSize.NONE)
| (heightMode === layout.EXACTLY ? FixedSize.HEIGHT : FixedSize.NONE);

let nativeSize = nativeView.sizeThatFits(CGSizeMake(layout.toDeviceIndependentPixels(width), layout.toDeviceIndependentPixels(height)));
let labelWidth = layout.toDevicePixels(nativeSize.width);
const nativeSize = layout.measureNativeView(nativeView, width, widthMode, height, heightMode);
let labelWidth = nativeSize.width;

if (this.textWrap) {
labelWidth = Math.min(labelWidth, width);
}

let measureWidth = Math.max(labelWidth, this.effectiveMinWidth);
let measureHeight = Math.max(layout.toDevicePixels(nativeSize.height), this.effectiveMinHeight);
let measureHeight = Math.max(nativeSize.height, this.effectiveMinHeight);

let widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
let heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
Expand Down
2 changes: 1 addition & 1 deletion tns-core-modules/ui/page/page.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,7 +514,7 @@ export class Page extends PageBase {

if (!this._modalParent && this.frame && this.frame._getNavBarVisible(this)) {
// Measure ActionBar with the full height.
let actionBarSize = View.measureChild(this, this.actionBar, widthMeasureSpec, heightMeasureSpec);
let actionBarSize = View.measureChild(this, this.actionBar, widthMeasureSpec, layout.makeMeasureSpec(height, layout.AT_MOST));
actionBarWidth = actionBarSize.measuredWidth;
actionBarHeight = actionBarSize.measuredHeight;
}
Expand Down
22 changes: 9 additions & 13 deletions tns-core-modules/ui/styling/background.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,19 +145,15 @@ function _flipImage(originalImage: UIImage): UIImage {
return flippedImage;
}

function cssValueToDevicePixels(source: string, total: number): number {
let result;
function cssValueToDevicePixels(source: string, totalPx: number): number {
source = source.trim();

if (source.indexOf("px") !== -1) {
result = parseFloat(source.replace("px", ""));
}
else if (source.indexOf("%") !== -1 && total > 0) {
result = (parseFloat(source.replace("%", "")) / 100) * layout.toDeviceIndependentPixels(total);
return parseFloat(source.replace("px", ""));
} else if (source.indexOf("%") !== -1 && totalPx > 0) {
return (parseFloat(source.replace("%", "")) / 100) * totalPx;
} else {
result = parseFloat(source);
return layout.toDevicePixels(parseFloat(source));
}
return layout.toDevicePixels(result);
}

function drawNonUniformBorders(nativeView: NativeView, background: Background) {
Expand Down Expand Up @@ -293,10 +289,10 @@ function drawClipPath(nativeView: UIView, background: Background) {
const layerSize = layerBounds.size;

const bounds = {
left: layerOrigin.x,
top: layerOrigin.y,
bottom: layerSize.height,
right: layerSize.width
left: layout.toDevicePixels(layerOrigin.x),
top: layout.toDevicePixels(layerOrigin.y),
bottom: layout.toDevicePixels(layerSize.height),
right: layout.toDevicePixels(layerSize.width)
};

if (bounds.right === 0 || bounds.bottom === 0) {
Expand Down
8 changes: 4 additions & 4 deletions tns-core-modules/ui/styling/style-properties.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,16 @@ function toDevicePixelsCommon(length: PercentLength, auto: number, parentAvailab
return auto;
}
if (typeof length === "number") {
return Math.ceil(layout.getDisplayDensity() * length);
return layout.round(layout.toDevicePixels(length));
}
switch (length.unit) {
case "px":
return Math.ceil(length.value);
return layout.round(length.value);
case "%":
return Math.round(parentAvailableWidth * length.value);
return layout.round(parentAvailableWidth * length.value);
case "dip":
default:
return Math.ceil(layout.getDisplayDensity() * length.value);
return layout.round(layout.toDevicePixels(length.value));
}
}

Expand Down
20 changes: 10 additions & 10 deletions tns-core-modules/ui/styling/style/style.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,14 +134,14 @@ export class Style extends Observable {
public view: ViewBase;

//flexbox layout properties
flexDirection: FlexDirection;
flexWrap: FlexWrap;
justifyContent: JustifyContent;
alignItems: AlignItems;
alignContent: AlignContent;
order: Order;
flexGrow: FlexGrow;
flexShrink: FlexShrink;
flexWrapBefore: FlexWrapBefore;
alignSelf: AlignSelf;
public flexDirection: FlexDirection;
public flexWrap: FlexWrap;
public justifyContent: JustifyContent;
public alignItems: AlignItems;
public alignContent: AlignContent;
public order: Order;
public flexGrow: FlexGrow;
public flexShrink: FlexShrink;
public flexWrapBefore: FlexWrapBefore;
public alignSelf: AlignSelf;
}
Loading