diff --git a/packages/core/core-types/animation-types.ts b/packages/core/core-types/animation-types.ts new file mode 100644 index 000000000..67a86e3db --- /dev/null +++ b/packages/core/core-types/animation-types.ts @@ -0,0 +1,19 @@ +// 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 + */ +export class CubicBezierAnimationCurve { + public x1: number; + public y1: number; + public x2: number; + public y2: number; + + constructor(x1: number, y1: number, x2: number, y2: number) { + this.x1 = x1; + this.y1 = y1; + this.x2 = x2; + this.y2 = y2; + } +} diff --git a/packages/core/core-types/index.ts b/packages/core/core-types/index.ts index 30c31c9cc..ffe7424b6 100644 --- a/packages/core/core-types/index.ts +++ b/packages/core/core-types/index.ts @@ -4,7 +4,7 @@ // imported for definition purposes only import { makeValidator, makeParser } from '../ui/core/properties'; -import { CubicBezierAnimationCurve } from '../ui/animation/animation-interfaces'; +import { CubicBezierAnimationCurve } from './animation-types'; export namespace CoreTypes { export type CSSWideKeywords = 'initial' | 'inherit' | 'unset' | 'revert'; diff --git a/packages/core/debugger/devtools-elements-interfaces.ts b/packages/core/debugger/devtools-elements-interfaces.ts index 7319971bc..4fc891630 100644 --- a/packages/core/debugger/devtools-elements-interfaces.ts +++ b/packages/core/debugger/devtools-elements-interfaces.ts @@ -1,5 +1,5 @@ //Types -import { DOMNode } from './dom-node'; +import { DOMNode } from './dom-types'; export interface InspectorCommands { // DevTools -> Application communication. Methods that devtools calls when needed. diff --git a/packages/core/debugger/devtools-elements.common.ts b/packages/core/debugger/devtools-elements.common.ts index 6859ab4c1..0ac320d6d 100644 --- a/packages/core/debugger/devtools-elements.common.ts +++ b/packages/core/debugger/devtools-elements.common.ts @@ -2,7 +2,7 @@ import { ViewBase } from '../ui/core/view-base'; //Requires -import { getNodeById } from './dom-node'; +import { getNodeById } from './dom-types'; import { mainThreadify } from '../utils'; // Use lazy requires for core modules diff --git a/packages/core/debugger/devtools-elements.ts b/packages/core/debugger/devtools-elements.ts index eff78dcba..7a19ab2f9 100644 --- a/packages/core/debugger/devtools-elements.ts +++ b/packages/core/debugger/devtools-elements.ts @@ -3,7 +3,8 @@ import { InspectorEvents, InspectorCommands } from './devtools-elements-interfac // Requires import { getDocument, getComputedStylesForNode, removeNode, setAttributeAsText } from './devtools-elements.common'; -import { registerInspectorEvents, DOMNode } from './dom-node'; +import { registerInspectorEvents } from './dom-types'; +import { DOMNode } from './dom-types'; export * from './devtools-elements-interfaces'; diff --git a/packages/core/debugger/dom-node.d.ts b/packages/core/debugger/dom-node.d.ts deleted file mode 100644 index dbbe4e070..000000000 --- a/packages/core/debugger/dom-node.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ViewBase } from '../ui/core/view-base'; -import { CSSComputedStyleProperty } from './css-agent'; -export declare function getNodeById(id: number): DOMNode; -declare class WeakRef { - constructor(obj: T); - get(): T; - clear(): void; -} -export declare class DOMNode { - nodeId: any; - nodeType: any; - nodeName: any; - localName: any; - nodeValue: string; - attributes: string[]; - viewRef: WeakRef; - constructor(view: ViewBase); - loadAttributes(): void; - readonly children: DOMNode[]; - onChildAdded(childView: ViewBase): void; - onChildRemoved(view: ViewBase): void; - attributeModified(name: string, value: any): void; - attributeRemoved(name: string): void; - getComputedProperties(): CSSComputedStyleProperty[]; - dispose(): void; - toJSON(): string; -} diff --git a/packages/core/debugger/dom-node.ts b/packages/core/debugger/dom-types.ts similarity index 99% rename from packages/core/debugger/dom-node.ts rename to packages/core/debugger/dom-types.ts index f7f229ffb..fd01aa4a3 100644 --- a/packages/core/debugger/dom-node.ts +++ b/packages/core/debugger/dom-types.ts @@ -1,28 +1,29 @@ -import { CSSComputedStyleProperty } from './css-agent'; import { InspectorEvents } from './devtools-elements-interfaces'; - -// Needed for typings only +import { CSSComputedStyleProperty } from './css-agent'; import { ViewBase } from '../ui/core/view-base'; -const registeredDomNodes = {}; const ELEMENT_NODE_TYPE = 1; const ROOT_NODE_TYPE = 9; const propertyBlacklist = ['effectivePaddingLeft', 'effectivePaddingBottom', 'effectivePaddingRight', 'effectivePaddingTop', 'effectiveBorderTopWidth', 'effectiveBorderRightWidth', 'effectiveBorderBottomWidth', 'effectiveBorderLeftWidth', 'effectiveMinWidth', 'effectiveMinHeight', 'effectiveWidth', 'effectiveHeight', 'effectiveMarginLeft', 'effectiveMarginTop', 'effectiveMarginRight', 'effectiveMarginBottom', 'nodeName', 'nodeType', 'decodeWidth', 'decodeHeight', 'ng-reflect-items', 'domNode', 'touchListenerIsSet', 'bindingContext', 'nativeView']; function lazy(action: () => T): () => T { let _value: T; - return () => _value || (_value = action()); } const percentLengthToStringLazy = lazy<(length) => string>(() => require('../ui/styling/style-properties').PercentLength.convertToString); const getSetPropertiesLazy = lazy<(view: ViewBase) => [string, any][]>(() => require('../ui/core/properties').getSetProperties); const getComputedCssValuesLazy = lazy<(view: ViewBase) => [string, any][]>(() => require('../ui/core/properties').getComputedCssValues); +const registeredDomNodes = {}; +export function getNodeById(id: number): DOMNode { + return registeredDomNodes[id]; +} + +let inspectorFrontendInstance: any; export function registerInspectorEvents(inspector: InspectorEvents) { inspectorFrontendInstance = inspector; } -let inspectorFrontendInstance: any; function notifyInspector(callback: (inspector: InspectorEvents) => void) { if (inspectorFrontendInstance) { callback(inspectorFrontendInstance); @@ -63,10 +64,6 @@ function unregisterNode(domNode: DOMNode) { delete registeredDomNodes[domNode.nodeId]; } -export function getNodeById(id: number): DOMNode { - return registeredDomNodes[id]; -} - export class DOMNode { nodeId; nodeType; diff --git a/packages/core/ui/animation/animation-interfaces.ts b/packages/core/ui/animation/animation-interfaces.ts index ca6536ea0..f2cf7d33f 100644 --- a/packages/core/ui/animation/animation-interfaces.ts +++ b/packages/core/ui/animation/animation-interfaces.ts @@ -77,21 +77,3 @@ export interface IOSView extends View { _resumePresentationLayerUpdates(); _isPresentationLayerUpdateSuspended(); } - -/** - * Defines a custom animation timing curve by using the cubic-bezier function. - * Possible values are numeric values from 0 to 1 - */ -export class CubicBezierAnimationCurve { - public x1: number; - public y1: number; - public x2: number; - public y2: number; - - constructor(x1: number, y1: number, x2: number, y2: number) { - this.x1 = x1; - this.y1 = y1; - this.x2 = x2; - this.y2 = y2; - } -} diff --git a/packages/core/ui/animation/index.android.ts b/packages/core/ui/animation/index.android.ts index 9bfd918d4..a91b342e2 100644 --- a/packages/core/ui/animation/index.android.ts +++ b/packages/core/ui/animation/index.android.ts @@ -1,6 +1,6 @@ import { AnimationDefinitionInternal, AnimationPromise, PropertyAnimation, AnimationBase, Properties } from './animation-common'; import { View } from '../core/view'; -import { CubicBezierAnimationCurve } from './animation-interfaces'; +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'; diff --git a/packages/core/ui/animation/index.ios.ts b/packages/core/ui/animation/index.ios.ts index 860ea7799..832ecbb9a 100644 --- a/packages/core/ui/animation/index.ios.ts +++ b/packages/core/ui/animation/index.ios.ts @@ -1,7 +1,7 @@ // Types import { AnimationDefinitionInternal, AnimationPromise, IOSView, PropertyAnimation, PropertyAnimationInfo, AnimationBase, Properties } from './animation-common'; import { View } from '../core/view'; -import { CubicBezierAnimationCurve } from './animation-interfaces'; +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 { ios as iosBackground } from '../styling/background'; diff --git a/packages/core/ui/core/bindable/bindable-types.ts b/packages/core/ui/core/bindable/bindable-types.ts new file mode 100644 index 000000000..89e5470df --- /dev/null +++ b/packages/core/ui/core/bindable/bindable-types.ts @@ -0,0 +1,40 @@ +// Shared types/interfaces for bindable and view-base + +/** + * The options object used in the Bindable.bind method. + */ +export interface BindingOptions { + /** + * The property name of the source object (typically the ViewModel) to bind to. + */ + sourceProperty: string; + /** + * The property name of the target object (that is the Bindable instance) to bind the source property to. + */ + targetProperty: string; + /** + * True to establish a two-way binding, false otherwise. A two-way binding will synchronize both the source and the target property values regardless of which one initiated the change. + */ + twoWay?: boolean; + /** + * An expression used for calculations (convertions) based on the value of the property. + */ + expression?: string; +} + +/** + * An interface which defines methods need to create binding value converter. + */ +export interface ValueConverter { + /** + * A method that will be executed when a value (of the binding property) should be converted to the observable model. + * For example: user types in a text field, but our business logic requires to store data in a different manner (e.g. in lower case). + * @param params - An array of parameters where first element is the value of the property and next elements are parameters send to converter. + */ + toModel: (...params: any[]) => any; + /** + * A method that will be executed when a value should be converted to the UI view. For example we have a date object which should be displayed to the end user in a specific date format. + * @param params - An array of parameters where first element is the value of the property and next elements are parameters send to converter. + */ + toView: (...params: any[]) => any; +} diff --git a/packages/core/ui/core/bindable/index.ts b/packages/core/ui/core/bindable/index.ts index d893e51a7..7735a4fca 100644 --- a/packages/core/ui/core/bindable/index.ts +++ b/packages/core/ui/core/bindable/index.ts @@ -1,5 +1,6 @@ // Types import { ViewBase } from '../view-base'; +import { BindingOptions, ValueConverter } from './bindable-types'; // Requires import { unsetValue } from '../properties'; @@ -49,45 +50,6 @@ function getProperties(property: string): Array { return result; } -/** - * The options object used in the Bindable.bind method. - */ -export interface BindingOptions { - /** - * The property name of the source object (typically the ViewModel) to bind to. - */ - sourceProperty: string; - /** - * The property name of the target object (that is the Bindable instance) to bind the source property to. - */ - targetProperty: string; - /** - * True to establish a two-way binding, false otherwise. A two-way binding will synchronize both the source and the target property values regardless of which one initiated the change. - */ - twoWay?: boolean; - /** - * An expression used for calculations (convertions) based on the value of the property. - */ - expression?: string; -} - -/** - * An interface which defines methods need to create binding value converter. - */ -export interface ValueConverter { - /** - * A method that will be executed when a value (of the binding property) should be converted to the observable model. - * For example: user types in a text field, but our business logic requires to store data in a different manner (e.g. in lower case). - * @param params - An array of parameters where first element is the value of the property and next elements are parameters send to converter. - */ - toModel: (...params: any[]) => any; - /** - * A method that will be executed when a value should be converted to the UI view. For example we have a date object which should be displayed to the end user in a specific date format. - * @param params - An array of parameters where first element is the value of the property and next elements are parameters send to converter. - */ - toView: (...params: any[]) => any; -} - /** * Normalizes "ontap" to "tap", and "ondoubletap" to "ondoubletap". * diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index 39f0668a4..e7c897416 100644 --- a/packages/core/ui/core/view-base/index.ts +++ b/packages/core/ui/core/view-base/index.ts @@ -4,7 +4,8 @@ import { CoreTypes } from '../../../core-types'; import { Property, CssProperty, CssAnimationProperty, InheritedProperty, clearInheritedProperties, propagateInheritableProperties, propagateInheritableCssProperties, initNativeView } from '../properties'; import { CSSUtils } from '../../../css/system-classes'; import { Source } from '../../../utils/debug'; -import { Binding, BindingOptions } from '../bindable'; +import { Binding } from '../bindable'; +import { BindingOptions } from '../bindable/bindable-types'; import { Trace } from '../../../trace'; import { Observable, PropertyChangeData, WrappedValue } from '../../../data/observable'; import { Style } from '../../styling/style'; @@ -16,25 +17,10 @@ import { getClass } from '../../../utils/types'; import { profile } from '../../../profiling'; -import * as dnm from '../../../debugger/dom-node'; -import * as ssm from '../../styling/style-scope'; +import { DOMNode } from '../../../debugger/dom-types'; +import { applyInlineStyle, CssState, StyleScope } from '../../styling/style-scope'; import { ViewBase as ViewBaseDefinition } from '.'; -let domNodeModule: typeof dnm; - -function ensuredomNodeModule(): void { - if (!domNodeModule) { - domNodeModule = require('../../../debugger/dom-node'); - } -} - -let styleScopeModule: typeof ssm; -function ensureStyleScopeModule() { - if (!styleScopeModule) { - styleScopeModule = require('../../styling/style-scope'); - } -} - const defaultBindingSource = {}; export interface ModalTransitionType { @@ -355,7 +341,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition private __nativeView: any; // private _disableNativeViewRecycling: boolean; - public domNode: dnm.DOMNode; + public domNode: DOMNode; public recycleNativeView: 'always' | 'never' | 'auto'; /** @@ -422,8 +408,8 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition public _domId: number; public _context: any /* android.content.Context */; public _isAddedToNativeVisualTree: boolean; - /* "ui/styling/style-scope" */ public _cssState: ssm.CssState = new ssm.CssState(new WeakRef(this)); - public _styleScope: ssm.StyleScope; + /* "ui/styling/style-scope" */ public _cssState: CssState = new CssState(new WeakRef(this)); + public _styleScope: StyleScope; /** * A property bag holding suspended native updates. * Native setters that had to execute while there was no native view, @@ -675,8 +661,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition */ public ensureDomNode() { if (!this.domNode) { - ensuredomNodeModule(); - this.domNode = new domNodeModule.DOMNode(this); + this.domNode = new DOMNode(this); } } @@ -1406,8 +1391,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition throw new Error('Parameter should be valid CSS string!'); } - ensureStyleScopeModule(); - styleScopeModule.applyInlineStyle(this, style, undefined); + applyInlineStyle(this, style, undefined); } public _parentChanged(oldParent: ViewBase): void { @@ -1459,7 +1443,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition }); } - _inheritStyleScope(styleScope: ssm.StyleScope): void { + _inheritStyleScope(styleScope: StyleScope): void { // If we are styleScope don't inherit parent stylescope. // TODO: Consider adding parent scope and merge selectors. if (this._isStyleScopeHost) { diff --git a/packages/core/ui/index.ts b/packages/core/ui/index.ts index 5b6f611fb..3ebca1785 100644 --- a/packages/core/ui/index.ts +++ b/packages/core/ui/index.ts @@ -9,7 +9,7 @@ export { sanitizeModuleName } from '../utils/common'; export { Button } from './button'; export { ContentView } from './content-view'; export { Binding } from './core/bindable'; -export type { BindingOptions } from './core/bindable'; +export type { BindingOptions } from './core/bindable/bindable-types'; export { ControlStateChangeListener } from './core/control-state-change'; export { ViewBase, eachDescendant, getAncestor, getViewById, booleanConverter, querySelectorAll } from './core/view-base'; export type { ShowModalOptions } from './core/view-base';