diff --git a/apps/automated/src/ui/frame/frame-tests.android.ts b/apps/automated/src/ui/frame/frame-tests.android.ts index f4df1d916..0a1854725 100644 --- a/apps/automated/src/ui/frame/frame-tests.android.ts +++ b/apps/automated/src/ui/frame/frame-tests.android.ts @@ -1,7 +1,5 @@ -import { Frame } from '@nativescript/core/ui/frame'; import * as TKUnit from '../../tk-unit'; -import { unsetValue } from '@nativescript/core/ui/core/view'; -import { PercentLength } from '@nativescript/core/ui/styling/style-properties'; +import { PercentLength, unsetValue, Frame } from '@nativescript/core'; export * from './frame-tests-common'; export function test_percent_width_and_height_set_to_page_support() { diff --git a/packages/core/core-types/animation-types.ts b/packages/core/core-types/animation-types.ts index 67a86e3db..411124f5b 100644 --- a/packages/core/core-types/animation-types.ts +++ b/packages/core/core-types/animation-types.ts @@ -1,5 +1,3 @@ -// Types shared between core-types and animation-interfaces - /** * Defines a custom animation timing curve by using the cubic-bezier function. * Possible values are numeric values from 0 to 1 diff --git a/packages/core/css-mediaquery/index.ts b/packages/core/css-mediaquery/index.ts index 6313b3f1d..c55ddb65a 100644 --- a/packages/core/css-mediaquery/index.ts +++ b/packages/core/css-mediaquery/index.ts @@ -7,7 +7,7 @@ See the accompanying LICENSE file for terms. // https://github.com/ericf/css-mediaquery import { Trace } from '../trace'; -import { Length } from '../ui/styling/style-properties'; +import { Length } from '../ui/styling/length-shared'; // ----------------------------------------------------------------------------- diff --git a/packages/core/ui/action-bar/action-bar-common.ts b/packages/core/ui/action-bar/action-bar-common.ts index 02ce9526a..3ca0f801e 100644 --- a/packages/core/ui/action-bar/action-bar-common.ts +++ b/packages/core/ui/action-bar/action-bar-common.ts @@ -6,7 +6,8 @@ import { View, CSSType } from '../core/view'; import { ViewBase, booleanConverter } from '../core/view-base'; import { Trace } from '../../trace'; import { ShorthandProperty, CssProperty, Property, unsetValue } from '../core/properties'; -import { Length, horizontalAlignmentProperty, verticalAlignmentProperty } from '../styling/style-properties'; +import { horizontalAlignmentProperty, verticalAlignmentProperty } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { Style } from '../styling/style'; @CSSType('ActionBar') diff --git a/packages/core/ui/animation/animation-common.ts b/packages/core/ui/animation/animation-common.ts index 0bd2c1b9e..12ab1a96d 100644 --- a/packages/core/ui/animation/animation-common.ts +++ b/packages/core/ui/animation/animation-common.ts @@ -1,13 +1,12 @@ // Types. import { Point3D } from './animation-types'; -import { AnimationDefinition, AnimationPromise as AnimationPromiseDefinition, Pair, PropertyAnimation } from './animation-interfaces'; - -// Requires. +import { AnimationDefinition, AnimationPromise as AnimationPromiseDefinition, Pair } from './animation-shared'; +import { PropertyAnimation } from './animation-shared'; import { Color } from '../../color'; import { Trace } from '../../trace'; -import { PercentLength } from '../styling/style-properties'; +import { PercentLength } from '../styling/length-shared'; -export * from './animation-interfaces'; +export * from './animation-shared'; export namespace Properties { export const opacity = 'opacity'; diff --git a/packages/core/ui/animation/animation-interfaces.ts b/packages/core/ui/animation/animation-shared.ts similarity index 62% rename from packages/core/ui/animation/animation-interfaces.ts rename to packages/core/ui/animation/animation-shared.ts index f2cf7d33f..db65d1c50 100644 --- a/packages/core/ui/animation/animation-interfaces.ts +++ b/packages/core/ui/animation/animation-shared.ts @@ -1,7 +1,9 @@ -// Types -import { View } from '../core/view'; -import { CoreTypes } from '../../core-types'; -import { Color } from '../../color'; +// Shared animation types/interfaces for animation and styling modules. +// Only put platform-agnostic types/interfaces here. + +import type { View } from '../core/view'; +import type { CoreTypes } from '../../core-types'; +import type { Color } from '../../color'; export type Transformation = { property: TransformationType; @@ -24,9 +26,36 @@ export type TransformFunctionsInfo = { scale: Pair; }; -export interface AnimationPromise extends Promise, Cancelable { - then(...args): AnimationPromise; - catch(...args): AnimationPromise; +export interface Pair { + x: number; + y: number; +} + +export interface Cancelable { + cancel(): void; +} + +export type AnimationPromise = Promise & Cancelable; + +export interface AnimationDefinition { + target?: View; + opacity?: number; + backgroundColor?: Color | any; + translate?: Pair | { x: number; y: number }; + scale?: Pair | { x: number; y: number }; + height?: CoreTypes.PercentLengthType | string | any; + width?: CoreTypes.PercentLengthType | string | any; + rotate?: number | Point3D | { x: number; y: number; z: number }; + duration?: number; + delay?: number; + iterations?: number; + curve?: any; +} + +export interface Point3D { + x: number; + y: number; + z: number; } export interface Pair { @@ -53,21 +82,6 @@ export interface PropertyAnimationInfo extends PropertyAnimation { _originalValue?: any; } -export interface AnimationDefinition { - target?: View; - opacity?: number; - backgroundColor?: Color; - translate?: Pair; - scale?: Pair; - height?: CoreTypes.PercentLengthType | string; - width?: CoreTypes.PercentLengthType | string; - rotate?: number | Point3D; - duration?: number; - delay?: number; - iterations?: number; - curve?: any; -} - export interface AnimationDefinitionInternal extends AnimationDefinition { valueSource?: 'animation' | 'keyframe'; } diff --git a/packages/core/ui/animation/animation-types.ts b/packages/core/ui/animation/animation-types.ts index e9efb85ba..d593aac09 100644 --- a/packages/core/ui/animation/animation-types.ts +++ b/packages/core/ui/animation/animation-types.ts @@ -1,50 +1,2 @@ // Shared types/interfaces for animation -import { View } from '../core/view'; - -export interface AnimationDefinition { - target?: View; - opacity?: number; - backgroundColor?: any; - translate?: { x: number; y: number }; - scale?: { x: number; y: number }; - height?: any; - width?: any; - rotate?: number | { x: number; y: number; z: number }; - duration?: number; - delay?: number; - iterations?: number; - curve?: any; -} - -// Types from index.d.ts that need to be exported for consumers -export interface Point3D { - x: number; - y: number; - z: number; -} - -export interface Pair { - x: number; - y: number; -} - -export type TransformationType = 'rotate' | 'rotate3d' | 'rotateX' | 'rotateY' | 'translate' | 'translate3d' | 'translateX' | 'translateY' | 'scale' | 'scale3d' | 'scaleX' | 'scaleY'; - -export type TransformationValue = Point3D | Pair | number; - -export type Transformation = { - property: TransformationType; - value: TransformationValue; -}; - -export type TransformFunctionsInfo = { - translate: Pair; - rotate: Point3D; - scale: Pair; -}; - -export interface Cancelable { - cancel(): void; -} - -export type AnimationPromise = Promise & Cancelable; +export * from './animation-shared'; diff --git a/packages/core/ui/animation/index.android.ts b/packages/core/ui/animation/index.android.ts index c1dff8559..f6294898a 100644 --- a/packages/core/ui/animation/index.android.ts +++ b/packages/core/ui/animation/index.android.ts @@ -3,7 +3,8 @@ import { View } from '../core/view'; import { CubicBezierAnimationCurve } from '../../core-types/animation-types'; import { Color } from '../../color'; import { Trace } from '../../trace'; -import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties'; +import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty } from '../styling/style-properties'; +import { PercentLength } from '../styling/length-shared'; import { layout } from '../../utils'; import { SDK_VERSION } from '../../utils/constants'; import { Device, Screen } from '../../platform'; diff --git a/packages/core/ui/animation/index.ios.ts b/packages/core/ui/animation/index.ios.ts index 103dfe8d9..d8c719fc0 100644 --- a/packages/core/ui/animation/index.ios.ts +++ b/packages/core/ui/animation/index.ios.ts @@ -3,7 +3,8 @@ import { AnimationDefinitionInternal, AnimationPromise, IOSView, PropertyAnimati import { View } from '../core/view'; import { CubicBezierAnimationCurve } from '../../core-types/animation-types'; import { Trace } from '../../trace'; -import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties'; +import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty } from '../styling/style-properties'; +import { PercentLength } from '../styling/length-shared'; import { ios as iosBackground } from '../styling/background'; import { ios as iosViewUtils, NativeScriptUIView } from '../utils'; diff --git a/packages/core/ui/button/index.android.ts b/packages/core/ui/button/index.android.ts index 890a0bcf9..16e294b65 100644 --- a/packages/core/ui/button/index.android.ts +++ b/packages/core/ui/button/index.android.ts @@ -1,6 +1,7 @@ import { ButtonBase } from './button-common'; import { PseudoClassHandler } from '../core/view'; -import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties'; +import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { textAlignmentProperty } from '../text-base'; import { CoreTypes } from '../../core-types'; import { profile } from '../../profiling'; diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts index 28d0b7d6c..e1215bce9 100644 --- a/packages/core/ui/core/view/index.android.ts +++ b/packages/core/ui/core/view/index.android.ts @@ -2,7 +2,8 @@ import type { Point, Position } from './view-interfaces'; import type { GestureTypes, GestureEventData } from '../../gestures'; import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, AndroidHelper } from './view-common'; -import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../../styling/style-properties'; +import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; import { layout } from '../../../utils'; import { Trace } from '../../../trace'; import { ShowModalOptions, hiddenProperty } from '../view-base'; diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts index dfa7f3850..4934ca053 100644 --- a/packages/core/ui/core/view/view-common.ts +++ b/packages/core/ui/core/view/view-common.ts @@ -11,7 +11,7 @@ import { EventData } from '../../../data/observable'; import { ViewHelper } from './view-helper'; import { setupAccessibleView } from '../../../application'; -import { PercentLength } from '../../styling/style-properties'; +import { PercentLength } from '../../styling/length-shared'; import { observe as gestureObserve, GesturesObserver, GestureTypes, fromString as gestureFromString, toString as gestureToString, TouchManager, TouchAnimationOptions, VisionHoverOptions } from '../../gestures'; import type { GestureEventData } from '../../gestures/gestures-types'; diff --git a/packages/core/ui/gestures/touch-manager.ts b/packages/core/ui/gestures/touch-manager.ts index 07e903938..e90464341 100644 --- a/packages/core/ui/gestures/touch-manager.ts +++ b/packages/core/ui/gestures/touch-manager.ts @@ -4,7 +4,7 @@ */ import { GestureEventData, GestureEventDataWithState, TouchGestureEventData } from './gestures-types'; import { Animation } from '../animation'; -import { AnimationDefinition } from '../animation/animation-interfaces'; +import { AnimationDefinition } from '../animation/animation-shared'; import type { View } from '../core/view'; import { isObject, isFunction } from '../../utils/types'; import { GestureEvents, GestureStateTypes, GestureTypes } from './gestures-common'; diff --git a/packages/core/ui/image/image-common.ts b/packages/core/ui/image/image-common.ts index 40ac84aa6..6c2bd59e0 100644 --- a/packages/core/ui/image/image-common.ts +++ b/packages/core/ui/image/image-common.ts @@ -7,7 +7,7 @@ import { ImageSource, iosSymbolScaleType } from '../../image-source'; import { isDataURI, isFontIconURI, isFileOrResourcePath, RESOURCE_PREFIX, SYSTEM_PREFIX } from '../../utils'; import { Color } from '../../color'; import { Style } from '../styling/style'; -import { Length } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { Property, InheritedCssProperty } from '../core/properties'; import { Trace } from '../../trace'; import { ImageSymbolEffect, ImageSymbolEffects } from './symbol-effects'; diff --git a/packages/core/ui/image/index.android.ts b/packages/core/ui/image/index.android.ts index 6de990c73..26b2c7317 100644 --- a/packages/core/ui/image/index.android.ts +++ b/packages/core/ui/image/index.android.ts @@ -3,7 +3,7 @@ import { isDataURI, isFontIconURI, isFileOrResourcePath, RESOURCE_PREFIX } from import { Color } from '../../color'; import { ImageSource } from '../../image-source'; import { ImageAsset } from '../../image-asset'; -import { Length } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { knownFolders } from '../../file-system'; import { Screen } from '../../platform'; diff --git a/packages/core/ui/index.ts b/packages/core/ui/index.ts index 91fe2fff1..e9aaa9125 100644 --- a/packages/core/ui/index.ts +++ b/packages/core/ui/index.ts @@ -68,6 +68,7 @@ export { Font, FontStyle, FontWeight, FontVariationSettings } from './styling/fo export { Style } from './styling/style'; export type { CommonLayoutParams } from './styling/style'; export * from './styling/style-properties'; +export * from './styling/length-shared'; export { CssAnimationParser, parseKeyframeDeclarations } from './styling/css-animation-parser'; export { CSSHelper } from './styling/css-selector'; diff --git a/packages/core/ui/label/index.ios.ts b/packages/core/ui/label/index.ios.ts index e3cf12f54..c39ab6cba 100644 --- a/packages/core/ui/label/index.ios.ts +++ b/packages/core/ui/label/index.ios.ts @@ -1,6 +1,6 @@ import { Label as LabelDefinition } from '.'; import { Background } from '../styling/background'; -import { Length, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties'; +import { borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties'; import { booleanConverter } from '../core/view-base'; import { View, CSSType } from '../core/view'; import { CoreTypes } from '../../core-types'; diff --git a/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts b/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts index eabc13c5e..05edc3ec4 100644 --- a/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts +++ b/packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts @@ -3,7 +3,7 @@ import { LayoutBase } from '../layout-base'; import { CoreTypes } from '../../../core-types'; import { View, CSSType } from '../../core/view'; import { Property } from '../../core/properties'; -import { Length } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; export * from '../layout-base'; diff --git a/packages/core/ui/layouts/absolute-layout/index.android.ts b/packages/core/ui/layouts/absolute-layout/index.android.ts index df8d0023b..cd1e3fffb 100644 --- a/packages/core/ui/layouts/absolute-layout/index.android.ts +++ b/packages/core/ui/layouts/absolute-layout/index.android.ts @@ -1,6 +1,6 @@ import { AbsoluteLayoutBase, leftProperty, topProperty } from './absolute-layout-common'; import { View } from '../../core/view'; -import { Length } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; export * from './absolute-layout-common'; diff --git a/packages/core/ui/layouts/absolute-layout/index.d.ts b/packages/core/ui/layouts/absolute-layout/index.d.ts index f298f2619..02369e757 100644 --- a/packages/core/ui/layouts/absolute-layout/index.d.ts +++ b/packages/core/ui/layouts/absolute-layout/index.d.ts @@ -1,7 +1,7 @@ import { LayoutBase } from '../layout-base'; import { Property } from '../../core/properties'; import { View } from '../../core/view'; -import { Length } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; import { CoreTypes } from '../../../core-types'; /** diff --git a/packages/core/ui/layouts/absolute-layout/index.ios.ts b/packages/core/ui/layouts/absolute-layout/index.ios.ts index 82b08ad94..ae9541a60 100644 --- a/packages/core/ui/layouts/absolute-layout/index.ios.ts +++ b/packages/core/ui/layouts/absolute-layout/index.ios.ts @@ -1,7 +1,6 @@ import { AbsoluteLayoutBase } from './absolute-layout-common'; import { CoreTypes } from '../../../core-types'; import { View } from '../../core/view'; -import { Length } from '../../styling/style-properties'; import { layout } from '../../../utils'; export * from './absolute-layout-common'; diff --git a/packages/core/ui/layouts/flexbox-layout/index.android.ts b/packages/core/ui/layouts/flexbox-layout/index.android.ts index 32d73d4f6..2289af068 100644 --- a/packages/core/ui/layouts/flexbox-layout/index.android.ts +++ b/packages/core/ui/layouts/flexbox-layout/index.android.ts @@ -1,7 +1,7 @@ import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, FlexboxLayoutBase, orderProperty, Order, flexGrowProperty, FlexGrow, flexShrinkProperty, FlexShrink, flexWrapBeforeProperty, FlexWrapBefore, alignSelfProperty, AlignSelf, flexDirectionProperty, flexWrapProperty, justifyContentProperty, alignItemsProperty, alignContentProperty } from './flexbox-layout-common'; import { CoreTypes } from '../../../core-types'; import { View } from '../../core/view'; -import { Length } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; export * from './flexbox-layout-common'; diff --git a/packages/core/ui/layouts/layout-base.android.ts b/packages/core/ui/layouts/layout-base.android.ts index 9fa969fe8..d0516d7bb 100644 --- a/packages/core/ui/layouts/layout-base.android.ts +++ b/packages/core/ui/layouts/layout-base.android.ts @@ -1,5 +1,6 @@ import { LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty } from './layout-base-common'; -import { Length, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties'; +import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { CoreTypes } from '../../core-types'; export * from './layout-base-common'; diff --git a/packages/core/ui/layouts/wrap-layout/index.android.ts b/packages/core/ui/layouts/wrap-layout/index.android.ts index 205f86332..ab03d5c78 100644 --- a/packages/core/ui/layouts/wrap-layout/index.android.ts +++ b/packages/core/ui/layouts/wrap-layout/index.android.ts @@ -1,6 +1,6 @@ import { WrapLayoutBase, orientationProperty, itemWidthProperty, itemHeightProperty } from './wrap-layout-common'; import { CoreTypes } from '../../../core-types'; -import { Length } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; export * from './wrap-layout-common'; diff --git a/packages/core/ui/layouts/wrap-layout/index.d.ts b/packages/core/ui/layouts/wrap-layout/index.d.ts index 7d1a8b42e..bab27ba27 100644 --- a/packages/core/ui/layouts/wrap-layout/index.d.ts +++ b/packages/core/ui/layouts/wrap-layout/index.d.ts @@ -1,5 +1,5 @@ import { LayoutBase } from '../layout-base'; -import { Length } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; import { Property } from '../../core/properties'; import { CoreTypes } from '../../../core-types'; diff --git a/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts b/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts index 6aeda1ebc..203ec55ae 100644 --- a/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts +++ b/packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts @@ -2,7 +2,7 @@ import { LayoutBase } from '../layout-base'; import { CSSType } from '../../core/view'; import { Property, makeValidator, makeParser } from '../../core/properties'; -import { Length } from '../../styling/style-properties'; +import { Length } from '../../styling/length-shared'; import { CoreTypes } from '../../../core-types'; export * from '../layout-base'; diff --git a/packages/core/ui/list-view/index.ios.ts b/packages/core/ui/list-view/index.ios.ts index 4dce49454..f5c6c8c93 100644 --- a/packages/core/ui/list-view/index.ios.ts +++ b/packages/core/ui/list-view/index.ios.ts @@ -2,7 +2,7 @@ import { ItemEventData } from '.'; import { ListViewBase, separatorColorProperty, itemTemplatesProperty, iosEstimatedRowHeightProperty } from './list-view-common'; import { CoreTypes } from '../../core-types'; import { View, KeyedTemplate } from '../core/view'; -import { Length } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { Observable, EventData } from '../../data/observable'; import { Color } from '../../color'; import { layout } from '../../utils'; diff --git a/packages/core/ui/list-view/list-view-common.ts b/packages/core/ui/list-view/list-view-common.ts index dac45642e..1cf71a0f3 100644 --- a/packages/core/ui/list-view/list-view-common.ts +++ b/packages/core/ui/list-view/list-view-common.ts @@ -1,7 +1,7 @@ import { ListView as ListViewDefinition, ItemsSource, ItemEventData, TemplatedItemsView } from '.'; import { View, ContainerView, Template, KeyedTemplate, CSSType } from '../core/view'; import { Property, CoercibleProperty, CssProperty } from '../core/properties'; -import { Length } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { Style } from '../styling/style'; import { Color } from '../../color'; import { Builder } from '../builder'; diff --git a/packages/core/ui/styling/css-shadow.spec.ts b/packages/core/ui/styling/css-shadow.spec.ts index 780696f33..49979b654 100644 --- a/packages/core/ui/styling/css-shadow.spec.ts +++ b/packages/core/ui/styling/css-shadow.spec.ts @@ -1,6 +1,6 @@ import { parseCSSShadow } from './css-shadow'; import { CoreTypes } from '../../core-types'; -import { Length } from './style-properties'; +import { Length } from './length-shared'; import { Color } from '../../color'; describe('css-shadow', () => { diff --git a/packages/core/ui/styling/css-shadow.ts b/packages/core/ui/styling/css-shadow.ts index b2850b87f..187fb743f 100644 --- a/packages/core/ui/styling/css-shadow.ts +++ b/packages/core/ui/styling/css-shadow.ts @@ -1,5 +1,6 @@ import { Color } from '../../color'; import { CoreTypes } from '../../core-types'; +import { Length } from './length-shared'; import { parseCSSShorthand } from './css-utils'; export interface ShadowCSSValues { diff --git a/packages/core/ui/styling/css-stroke.spec.ts b/packages/core/ui/styling/css-stroke.spec.ts index e5646decc..a7cbd524b 100644 --- a/packages/core/ui/styling/css-stroke.spec.ts +++ b/packages/core/ui/styling/css-stroke.spec.ts @@ -1,5 +1,5 @@ import { parseCSSStroke } from './css-stroke'; -import { Length } from './style-properties'; +import { Length } from './length-shared'; import { Color } from '../../color'; describe('css-text-stroke', () => { diff --git a/packages/core/ui/styling/css-stroke.ts b/packages/core/ui/styling/css-stroke.ts index be813ffdd..5df593230 100644 --- a/packages/core/ui/styling/css-stroke.ts +++ b/packages/core/ui/styling/css-stroke.ts @@ -1,6 +1,7 @@ import { CoreTypes } from '../../core-types'; import { Color } from '../../color'; import { parseCSSShorthand } from './css-utils'; +import { Length } from './length-shared'; export interface StrokeCSSValues { width: CoreTypes.LengthType; diff --git a/packages/core/ui/styling/css-utils.ts b/packages/core/ui/styling/css-utils.ts index dfd701f92..6b23cf536 100644 --- a/packages/core/ui/styling/css-utils.ts +++ b/packages/core/ui/styling/css-utils.ts @@ -1,6 +1,6 @@ import { Trace } from '../../trace'; import { CoreTypes } from '../../core-types'; -import { Length } from './style-properties'; +import { Length } from './length-shared'; export function cleanupImportantFlags(value: unknown, propertyName: string) { if (typeof value !== 'string') { diff --git a/packages/core/ui/styling/length-shared.ts b/packages/core/ui/styling/length-shared.ts new file mode 100644 index 000000000..ec4520216 --- /dev/null +++ b/packages/core/ui/styling/length-shared.ts @@ -0,0 +1,180 @@ +// Shared Length, FixedLength, and PercentLength helpers for styling modules. +// Only put platform-agnostic logic here. + +import { CoreTypes } from '../../core-types'; +import { layout } from '../../utils'; +import { isCssWideKeyword } from '../core/properties'; + +function equalsCommon(a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean; +function equalsCommon(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean; +function equalsCommon(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean { + if (a == 'auto' || isCssWideKeyword(a)) { + return b == 'auto' || isCssWideKeyword(b); + } + + if (b == 'auto' || isCssWideKeyword(b)) { + return false; + } + + if (typeof a === 'number') { + if (typeof b === 'number') { + return a == b; + } + if (!b) { + return false; + } + return b.unit == 'dip' && a == b.value; + } + + if (typeof b === 'number') { + return a ? a.unit == 'dip' && a.value == b : false; + } + if (!a || !b) { + return false; + } + return a.value == b.value && a.unit == b.unit; +} + +function convertToStringCommon(length: CoreTypes.LengthType | CoreTypes.PercentLengthType): string { + if (length == 'auto' || isCssWideKeyword(length)) { + return 'auto'; + } + + if (typeof length === 'number') { + return length.toString(); + } + + let val = length.value; + if (length.unit === '%') { + val *= 100; + } + + return val + length.unit; +} + +function toDevicePixelsCommon(length: CoreTypes.PercentLengthType, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number { + if (length == 'auto' || isCssWideKeyword(length)) { + return auto; + } + if (typeof length === 'number') { + return layout.round(layout.toDevicePixels(length)); + } + if (!length) { + return auto; + } + switch (length.unit) { + case 'px': + return layout.round(length.value); + case '%': + return layout.round(parentAvailableWidth * length.value); + case 'dip': + default: + return layout.round(layout.toDevicePixels(length.value)); + } +} + +export namespace PercentLength { + export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.PercentLengthType { + if (fromValue == 'auto') { + return 'auto'; + } + + if (typeof fromValue === 'string') { + let stringValue = fromValue.trim(); + const percentIndex = stringValue.indexOf('%'); + if (percentIndex !== -1) { + let value: CoreTypes.percent; + // if only % or % is not last we treat it as invalid value. + if (percentIndex !== stringValue.length - 1 || percentIndex === 0) { + value = Number.NaN; + } else { + // Normalize result to values between -1 and 1 + value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100; + } + + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${fromValue}`); + } + + return { unit: '%', value }; + } else if (stringValue.indexOf('px') !== -1) { + stringValue = stringValue.replace('px', '').trim(); + const value: CoreTypes.px = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${fromValue}`); + } + + return { unit: 'px', value }; + } else { + const value: CoreTypes.dip = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${fromValue}`); + } + + return value; + } + } else { + return fromValue; + } + } + + export const equals: { + (a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean; + } = equalsCommon; + export const toDevicePixels: { + (length: CoreTypes.PercentLengthType, auto: number, parentAvailableWidth: number): number; + } = toDevicePixelsCommon; + export const convertToString: { + (length: CoreTypes.PercentLengthType): string; + } = convertToStringCommon; +} + +export namespace FixedLength { + export function parse(fromValue: string | CoreTypes.FixedLengthType): CoreTypes.FixedLengthType { + if (typeof fromValue === 'string') { + let stringValue = fromValue.trim(); + if (stringValue.indexOf('px') !== -1) { + stringValue = stringValue.replace('px', '').trim(); + const value: CoreTypes.px = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${stringValue}`); + } + + return { unit: 'px', value }; + } else { + const value: CoreTypes.dip = parseFloat(stringValue); + if (isNaN(value) || !isFinite(value)) { + throw new Error(`Invalid value: ${stringValue}`); + } + + return value; + } + } else { + return fromValue; + } + } + export const equals: { (a: CoreTypes.FixedLengthType, b: CoreTypes.FixedLengthType): boolean } = equalsCommon; + export const toDevicePixels: { + (length: CoreTypes.FixedLengthType): number; + } = toDevicePixelsCommon; + export const convertToString: { + (length: CoreTypes.FixedLengthType): string; + } = convertToStringCommon; +} + +export namespace Length { + export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.LengthType { + if (fromValue == 'auto') { + return 'auto'; + } + + return FixedLength.parse(fromValue); + } + export const equals: { (a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean } = equalsCommon; + export const toDevicePixels: { + (length: CoreTypes.LengthType, auto?: number): number; + } = toDevicePixelsCommon; + export const convertToString: { + (length: CoreTypes.LengthType): string; + } = convertToStringCommon; +} diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts index 4326e4110..589722b29 100644 --- a/packages/core/ui/styling/style-properties.ts +++ b/packages/core/ui/styling/style-properties.ts @@ -8,6 +8,7 @@ import { layout } from '../../utils'; import { Trace } from '../../trace'; import { CoreTypes } from '../../core-types'; +import { Length, FixedLength, PercentLength } from './length-shared'; import { parseBackground } from '../../css/parser'; import { LinearGradient } from './linear-gradient'; @@ -90,112 +91,6 @@ function toDevicePixelsCommon(length: CoreTypes.PercentLengthType, auto: number } } -export namespace PercentLength { - export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.PercentLengthType { - if (fromValue == 'auto') { - return 'auto'; - } - - if (typeof fromValue === 'string') { - let stringValue = fromValue.trim(); - const percentIndex = stringValue.indexOf('%'); - if (percentIndex !== -1) { - let value: CoreTypes.percent; - // if only % or % is not last we treat it as invalid value. - if (percentIndex !== stringValue.length - 1 || percentIndex === 0) { - value = Number.NaN; - } else { - // Normalize result to values between -1 and 1 - value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100; - } - - if (isNaN(value) || !isFinite(value)) { - throw new Error(`Invalid value: ${fromValue}`); - } - - return { unit: '%', value }; - } else if (stringValue.indexOf('px') !== -1) { - stringValue = stringValue.replace('px', '').trim(); - const value: CoreTypes.px = parseFloat(stringValue); - if (isNaN(value) || !isFinite(value)) { - throw new Error(`Invalid value: ${fromValue}`); - } - - return { unit: 'px', value }; - } else { - const value: CoreTypes.dip = parseFloat(stringValue); - if (isNaN(value) || !isFinite(value)) { - throw new Error(`Invalid value: ${fromValue}`); - } - - return value; - } - } else { - return fromValue; - } - } - - export const equals: { - (a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean; - } = equalsCommon; - export const toDevicePixels: { - (length: CoreTypes.PercentLengthType, auto: number, parentAvailableWidth: number): number; - } = toDevicePixelsCommon; - export const convertToString: { - (length: CoreTypes.PercentLengthType): string; - } = convertToStringCommon; -} - -export namespace FixedLength { - export function parse(fromValue: string | CoreTypes.FixedLengthType): CoreTypes.FixedLengthType { - if (typeof fromValue === 'string') { - let stringValue = fromValue.trim(); - if (stringValue.indexOf('px') !== -1) { - stringValue = stringValue.replace('px', '').trim(); - const value: CoreTypes.px = parseFloat(stringValue); - if (isNaN(value) || !isFinite(value)) { - throw new Error(`Invalid value: ${stringValue}`); - } - - return { unit: 'px', value }; - } else { - const value: CoreTypes.dip = parseFloat(stringValue); - if (isNaN(value) || !isFinite(value)) { - throw new Error(`Invalid value: ${stringValue}`); - } - - return value; - } - } else { - return fromValue; - } - } - export const equals: { (a: CoreTypes.FixedLengthType, b: CoreTypes.FixedLengthType): boolean } = equalsCommon; - export const toDevicePixels: { - (length: CoreTypes.FixedLengthType): number; - } = toDevicePixelsCommon; - export const convertToString: { - (length: CoreTypes.FixedLengthType): string; - } = convertToStringCommon; -} - -export namespace Length { - export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.LengthType { - if (fromValue == 'auto') { - return 'auto'; - } - - return FixedLength.parse(fromValue); - } - export const equals: { (a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean } = equalsCommon; - export const toDevicePixels: { - (length: CoreTypes.LengthType, auto?: number): number; - } = toDevicePixelsCommon; - export const convertToString: { - (length: CoreTypes.LengthType): string; - } = convertToStringCommon; -} - function isNonNegativeFiniteNumber(value: number): boolean { return isFinite(value) && !isNaN(value) && value >= 0; } diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts index 4f26a632f..e2d1a1e04 100644 --- a/packages/core/ui/text-base/index.android.ts +++ b/packages/core/ui/text-base/index.android.ts @@ -4,10 +4,10 @@ import { ShadowCSSValues } from '../styling/css-shadow'; // Requires import { Font } from '../styling/font'; -import { backgroundColorProperty } from '../styling/style-properties'; import { TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textProperty, textTransformProperty, textShadowProperty, textStrokeProperty, letterSpacingProperty, whiteSpaceProperty, lineHeightProperty, resetSymbol } from './text-base-common'; import { Color } from '../../color'; -import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../styling/style-properties'; +import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { StrokeCSSValues } from '../styling/css-stroke'; import { FormattedString } from './formatted-string'; import { Span } from './span'; diff --git a/packages/core/ui/text-base/index.ios.ts b/packages/core/ui/text-base/index.ios.ts index c47969977..79a11c584 100644 --- a/packages/core/ui/text-base/index.ios.ts +++ b/packages/core/ui/text-base/index.ios.ts @@ -9,7 +9,8 @@ import { TextBaseCommon, textProperty, formattedTextProperty, textAlignmentPrope import { Color } from '../../color'; import { FormattedString } from './formatted-string'; import { Span } from './span'; -import { colorProperty, fontInternalProperty, fontScaleInternalProperty, Length } from '../styling/style-properties'; +import { colorProperty, fontInternalProperty, fontScaleInternalProperty } from '../styling/style-properties'; +import { Length } from '../styling/length-shared'; import { StrokeCSSValues } from '../styling/css-stroke'; import { isString, isNullOrUndefined } from '../../utils/types'; import { layout } from '../../utils'; diff --git a/packages/core/ui/text-view/index.ios.ts b/packages/core/ui/text-view/index.ios.ts index d894cece5..91b6d3b04 100644 --- a/packages/core/ui/text-view/index.ios.ts +++ b/packages/core/ui/text-view/index.ios.ts @@ -5,7 +5,7 @@ import { editableProperty, hintProperty, placeholderColorProperty, _updateCharac import { CoreTypes } from '../../core-types'; import { CSSType } from '../core/view'; import { Color } from '../../color'; -import { colorProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, Length } from '../styling/style-properties'; +import { colorProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties'; import { layout, isRealDevice } from '../../utils'; import { SDK_VERSION } from '../../utils/constants'; diff --git a/packages/core/utils/layout-helper/index.android.ts b/packages/core/utils/layout-helper/index.android.ts index 825858729..f80e692bf 100644 --- a/packages/core/utils/layout-helper/index.android.ts +++ b/packages/core/utils/layout-helper/index.android.ts @@ -46,7 +46,7 @@ export namespace layout { return size + mode; } - return (size & ~layoutCommon.MODE_MASK) | (mode & layoutCommon.MODE_MASK); + return (size & ~MODE_MASK) | (mode & MODE_MASK); } export function getDisplayDensity(): number { diff --git a/packages/core/utils/layout-helper/index.d.ts b/packages/core/utils/layout-helper/index.d.ts index a0cf473cd..1121e7326 100644 --- a/packages/core/utils/layout-helper/index.d.ts +++ b/packages/core/utils/layout-helper/index.d.ts @@ -7,13 +7,15 @@ export namespace layout { /** * Bits that provide the actual measured size. */ - export const MEASURED_HEIGHT_STATE_SHIFT: number; - export const MEASURED_SIZE_MASK: number; - export const MEASURED_STATE_MASK: number; - export const MEASURED_STATE_TOO_SMALL: number; + export const MODE_SHIFT: number; + export const MODE_MASK: number; export const UNSPECIFIED: number; export const EXACTLY: number; export const AT_MOST: number; + export const MEASURED_HEIGHT_STATE_SHIFT: number; + export const MEASURED_STATE_TOO_SMALL: number; + export const MEASURED_STATE_MASK: number; + export const MEASURED_SIZE_MASK: number; /** * Gets layout mode from a given specification as string. diff --git a/packages/core/utils/layout-helper/index.ios.ts b/packages/core/utils/layout-helper/index.ios.ts index 1d0f7105b..ada03c295 100644 --- a/packages/core/utils/layout-helper/index.ios.ts +++ b/packages/core/utils/layout-helper/index.ios.ts @@ -29,7 +29,7 @@ export namespace layout { } export function makeMeasureSpec(size: number, mode: number): number { - return (Math.round(Math.max(0, size)) & ~layoutCommon.MODE_MASK) | (mode & layoutCommon.MODE_MASK); + return (Math.round(Math.max(0, size)) & ~MODE_MASK) | (mode & MODE_MASK); } export function getDisplayDensity(): number { diff --git a/packages/core/utils/layout-helper/layout-helper-common.ts b/packages/core/utils/layout-helper/layout-helper-common.ts index bbebccfd5..ef53a5569 100644 --- a/packages/core/utils/layout-helper/layout-helper-common.ts +++ b/packages/core/utils/layout-helper/layout-helper-common.ts @@ -1,16 +1,6 @@ // cache the MeasureSpec constants here, to prevent extensive marshaling calls to and from Java // TODO: While this boosts the performance it is error-prone in case Google changes these constants -export const MODE_SHIFT = 30; -export const MODE_MASK = 0x3 << MODE_SHIFT; - -export const UNSPECIFIED = 0 << MODE_SHIFT; -export const EXACTLY = 1 << MODE_SHIFT; -export const AT_MOST = 2 << MODE_SHIFT; - -export const MEASURED_HEIGHT_STATE_SHIFT = 0x00000010; /* 16 */ -export const MEASURED_STATE_TOO_SMALL = 0x01000000; -export const MEASURED_STATE_MASK = 0xff000000; -export const MEASURED_SIZE_MASK = 0x00ffffff; +import { MODE_MASK, UNSPECIFIED, EXACTLY, AT_MOST } from './layout-helper-shared'; export function getMode(mode: number): string { switch (mode) { diff --git a/packages/core/utils/layout-helper/layout-helper-shared.ts b/packages/core/utils/layout-helper/layout-helper-shared.ts new file mode 100644 index 000000000..6d941784b --- /dev/null +++ b/packages/core/utils/layout-helper/layout-helper-shared.ts @@ -0,0 +1,13 @@ +// Shared layout constants and helpers for layout-helper, used by both common and platform-specific files. +// Only put platform-agnostic logic here. + +export const MODE_SHIFT = 30; +export const MODE_MASK = 0x3 << MODE_SHIFT; +export const UNSPECIFIED = 0 << MODE_SHIFT; +export const EXACTLY = 1 << MODE_SHIFT; +export const AT_MOST = 2 << MODE_SHIFT; +export const MEASURED_HEIGHT_STATE_SHIFT = 0x00000010; +export const MEASURED_STATE_TOO_SMALL = 0x01000000; +export const MEASURED_STATE_MASK = 0xff000000; +export const MEASURED_SIZE_MASK = 0x00ffffff; +// Add more shared constants/helpers as needed.