iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ivy): reorganize styling and player files (#26149) 

PR Close #26149
This commit is contained in:
Matias Niemelä 2018-09-28 12:38:16 -07:00 committed by Alex Rickabaugh
parent 391c708d7e
commit 32e479ffec
19 changed files with 362 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/core_render3_private_export.ts
View File

@ -162,12 +162,12 @@ export {
Player as ɵPlayer,
PlayState as ɵPlayState,
PlayerHandler as ɵPlayerHandler,
} from './render3/animations/interfaces';
} from './render3/interfaces/player';
export {
addPlayer as ɵaddPlayer,
getPlayers as ɵgetPlayers,
} from './render3/animations/players';
} from './render3/player';
// we reexport these symbols just so that they are retained during the dead code elimination
// performed by rollup while it's creating fesm files.

72
packages/core/src/render3/animations/players.ts
View File

@ -1,72 +0,0 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import '../ng_dev_mode';
import {LContext, getContext} from '../context_discovery';
import {scheduleTick} from '../instructions';
import {LElementNode} from '../interfaces/node';
import {RootContextFlags} from '../interfaces/view';
import {StylingContext, StylingIndex, createEmptyStylingContext} from '../styling';
import {getRootContext} from '../util';
import {CorePlayerHandler} from './core_player_handler';
import {AnimationContext, ComponentInstance, DirectiveInstance, PlayState, Player} from './interfaces';
export function addPlayer(
ref: ComponentInstance | DirectiveInstance | HTMLElement, player: Player): void {
const elementContext = getContext(ref) !;
const animationContext = getOrCreateAnimationContext(elementContext.native, elementContext) !;
animationContext.push(player);
player.addEventListener(PlayState.Destroyed, () => {
const index = animationContext.indexOf(player);
if (index >= 0) {
animationContext.splice(index, 1);
}
player.destroy();
});
const rootContext = getRootContext(elementContext.lViewData);
const playerHandler =
rootContext.playerHandler || (rootContext.playerHandler = new CorePlayerHandler());
playerHandler.queuePlayer(player, ref);
const nothingScheduled = rootContext.flags === RootContextFlags.Empty;
// change detection may or may not happen therefore
// the core code needs to be kicked off to flush the animations
rootContext.flags |= RootContextFlags.FlushPlayers;
if (nothingScheduled) {
scheduleTick(rootContext);
}
}
export function getPlayers(ref: ComponentInstance | DirectiveInstance | HTMLElement): Player[] {
return getOrCreateAnimationContext(ref);
}
export function getOrCreateAnimationContext(
target: {}, context?: LContext | null): AnimationContext {
context = context || getContext(target) !;
if (ngDevMode && !context) {
throw new Error(
'Only elements that exist in an Angular application can be used for animations');
}
const {lViewData, lNodeIndex} = context;
const value = lViewData[lNodeIndex];
let stylingContext = value as StylingContext;
if (!Array.isArray(value)) {
stylingContext = lViewData[lNodeIndex] = createEmptyStylingContext(value as LElementNode);
}
return stylingContext[StylingIndex.AnimationContext] || allocAnimationContext(stylingContext);
}
function allocAnimationContext(data: StylingContext): AnimationContext {
return data[StylingIndex.AnimationContext] = [];
}

3
packages/core/src/render3/component.ts
View File

@ -12,11 +12,12 @@ import {Type} from '../core';
import {Injector} from '../di/injector';
import {Sanitizer} from '../sanitization/security';
import {PlayerHandler} from './animations/interfaces';
import {assertComponentType, assertDefined} from './assert';
import {getLElementFromComponent, readPatchedLViewData} from './context_discovery';
import {getComponentDef} from './definition';
import {queueInitHooks, queueLifecycleHooks} from './hooks';
import {PlayerHandler} from './interfaces/player';
import {CLEAN_PROMISE, baseDirectiveCreate, createLViewData, createTView, detectChangesInternal, enterView, executeInitAndContentHooks, hostElement, leaveView, locateHostElement, setHostBindings, queueHostBindingForCheck,} from './instructions';
import {ComponentDef, ComponentDefInternal, ComponentType} from './interfaces/definition';
import {LElementNode} from './interfaces/node';

5
packages/core/src/render3/instructions.ts
View File

@ -11,6 +11,7 @@ import './ng_dev_mode';
import {QueryList} from '../linker';
import {Sanitizer} from '../sanitization/security';
import {StyleSanitizeFn} from '../sanitization/style_sanitizer';
import {assertDefined, assertEqual, assertLessThan, assertNotEqual} from './assert';
import {attachPatchData, getLElementFromComponent, readElementValue, readPatchedLViewData} from './context_discovery';
import {getRootView} from './discovery_utils';
@ -23,13 +24,15 @@ import {AttributeMarker, InitialInputData, InitialInputs, LContainerNode, LEleme
import {CssSelectorList, NG_PROJECT_AS_ATTR_NAME} from './interfaces/projection';
import {LQueries} from './interfaces/query';
import {ProceduralRenderer3, RComment, RElement, RNode, RText, Renderer3, RendererFactory3, isProceduralRenderer} from './interfaces/renderer';
import {StylingContext} from './interfaces/styling';
import {BINDING_INDEX, CLEANUP, CONTAINER_INDEX, CONTENT_QUERIES, CONTEXT, CurrentMatchesList, DECLARATION_VIEW, DIRECTIVES, FLAGS, HEADER_OFFSET, HOST_NODE, INJECTOR, LViewData, LViewFlags, NEXT, OpaqueViewState, PARENT, QUERIES, RENDERER, RootContext, RootContextFlags, SANITIZER, TAIL, TVIEW, TView} from './interfaces/view';
import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
import {appendChild, appendProjectedNode, createTextNode, findComponentView, getHostElementNode, getLViewChild, getRenderParent, insertView, removeView} from './node_manipulation';
import {isNodeMatchingSelectorList, matchingSelectorIndex} from './node_selector_matcher';
import {StylingContext, allocStylingContext, createStylingContextTemplate, renderStyling as renderElementStyles, updateClassProp as updateElementClassProp, updateStyleProp as updateElementStyleProp, updateStylingMap} from './styling';
import {allocStylingContext, createStylingContextTemplate, renderStyling as renderElementStyles, updateClassProp as updateElementClassProp, updateStyleProp as updateElementStyleProp, updateStylingMap} from './styling/class_and_style_bindings';
import {assertDataInRangeInternal, getLNode, isContentQueryHost, isDifferent, loadElementInternal, loadInternal, stringify} from './util';
/**
* A permanent marker promise which signifies that the current CD tree is
* clean.

3
packages/core/src/render3/interfaces/node.ts
View File

@ -6,12 +6,11 @@
* found in the LICENSE file at https://angular.io/license
*/
import {StylingContext} from '../styling';
import {LContainer} from './container';
import {LInjector} from './injector';
import {LQueries} from './query';
import {RComment, RElement, RText} from './renderer';
import {StylingContext} from './styling';
import {LViewData, TView} from './view';

2
packages/core/src/render3/animations/interfaces.ts → packages/core/src/render3/interfaces/player.ts
View File

@ -31,7 +31,7 @@ export const enum PlayState {Pending = 0, Running = 1, Paused = 2, Finished = 10
/**
* The context that stores all active animation players present on an element.
*/
export declare type AnimationContext = Player[];
export declare type PlayerContext = Player[];
export declare type ComponentInstance = {};
export declare type DirectiveInstance = {};

231
packages/core/src/render3/interfaces/styling.ts Normal file
View File

@ -0,0 +1,231 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {StyleSanitizeFn} from '../../sanitization/style_sanitizer';
import {LElementNode} from './node';
import {PlayerContext} from './player';
/**
* The styling context acts as a styling manifest (shaped as an array) for determining which
* styling properties have been assigned via the provided `updateStylingMap`, `updateStyleProp`
* and `updateClassProp` functions. There are also two initialization functions
* `allocStylingContext` and `createStylingContextTemplate` which are used to initialize
* and/or clone the context.
*
* The context is an array where the first two cells are used for static data (initial styling)
* and dirty flags / index offsets). The remaining set of cells is used for multi (map) and single
* (prop) style values.
*
* each value from here onwards is mapped as so:
* [i] = mutation/type flag for the style/class value
* [i + 1] = prop string (or null incase it has been removed)
* [i + 2] = value string (or null incase it has been removed)
*
* There are three types of styling types stored in this context:
* initial: any styles that are passed in once the context is created
* (these are stored in the first cell of the array and the first
* value of this array is always `null` even if no initial styling exists.
* the `null` value is there so that any new styles have a parent to point
* to. This way we can always assume that there is a parent.)
*
* single: any styles that are updated using `updateStyleProp` or `updateClassProp` (fixed set)
*
* multi: any styles that are updated using `updateStylingMap` (dynamic set)
*
* Note that context is only used to collect style information. Only when `renderStyling`
* is called is when the styling payload will be rendered (or built as a key/value map).
*
* When the context is created, depending on what initial styling values are passed in, the
* context itself will be pre-filled with slots based on the initial style properties. Say
* for example we have a series of initial styles that look like so:
*
* style="width:100px; height:200px;"
* class="foo"
*
* Then the initial state of the context (once initialized) will look like so:
*
* ```
* context = [
* element,
* playerContext | null,
* styleSanitizer | null,
* [null, '100px', '200px', true], // property names are not needed since they have already been
* written to DOM.
*
* configMasterVal,
* 1, // this instructs how many `style` values there are so that class index values can be
* offsetted
* { classOne: true, classTwo: false } | 'classOne classTwo' | null // last class value provided
* into updateStylingMap
* { styleOne: '100px', styleTwo: 0 } | null // last style value provided into updateStylingMap
*
* // 8
* 'width',
* pointers(1, 15); // Point to static `width`: `100px` and multi `width`.
* null,
*
* // 11
* 'height',
* pointers(2, 18); // Point to static `height`: `200px` and multi `height`.
* null,
*
* // 14
* 'foo',
* pointers(1, 21); // Point to static `foo`: `true` and multi `foo`.
* null,
*
* // 17
* 'width',
* pointers(1, 6); // Point to static `width`: `100px` and single `width`.
* null,
*
* // 21
* 'height',
* pointers(2, 9); // Point to static `height`: `200px` and single `height`.
* null,
*
* // 24
* 'foo',
* pointers(3, 12); // Point to static `foo`: `true` and single `foo`.
* null,
* ]
*
* function pointers(staticIndex: number, dynamicIndex: number) {
* // combine the two indices into a single word.
* return (staticIndex << StylingFlags.BitCountSize) |
* (dynamicIndex << (StylingIndex.BitCountSize + StylingFlags.BitCountSize));
* }
* ```
*
* The values are duplicated so that space is set aside for both multi ([style] and [class])
* and single ([style.prop] or [class.named]) values. The respective config values
* (configValA, configValB, etc...) are a combination of the StylingFlags with two index
* values: the `initialIndex` (which points to the index location of the style value in
* the initial styles array in slot 0) and the `dynamicIndex` (which points to the
* matching single/multi index position in the context array for the same prop).
*
* This means that every time `updateStyleProp` or `updateClassProp` are called then they
* must be called using an index value (not a property string) which references the index
* value of the initial style prop/class when the context was created. This also means that
* `updateStyleProp` or `updateClassProp` cannot be called with a new property (only
* `updateStylingMap` can include new CSS properties that will be added to the context).
*/
export interface StylingContext extends
Array<InitialStyles|{[key: string]: any}|number|string|boolean|LElementNode|StyleSanitizeFn|
PlayerContext|null> {
/**
* Location of element that is used as a target for this context.
*/
[StylingIndex.ElementPosition]: LElementNode|null;
/**
* Location of animation context (which contains the active players) for this element styling
* context.
*/
[StylingIndex.PlayerContext]: PlayerContext|null;
/**
* The style sanitizer that is used within this context
*/
[StylingIndex.StyleSanitizerPosition]: StyleSanitizeFn|null;
/**
* Location of initial data shared by all instances of this style.
*/
[StylingIndex.InitialStylesPosition]: InitialStyles;
/**
* A numeric value representing the configuration status (whether the context is dirty or not)
* mixed together (using bit shifting) with a index value which tells the starting index value
* of where the multi style entries begin.
*/
[StylingIndex.MasterFlagPosition]: number;
/**
* A numeric value representing the class index offset value. Whenever a single class is
* applied (using `elementClassProp`) it should have an styling index value that doesn't
* need to take into account any style values that exist in the context.
*/
[StylingIndex.ClassOffsetPosition]: number;
/**
* The last class value that was interpreted by elementStylingMap. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.PreviousMultiClassValue]: {[key: string]: any}|string|null;
/**
* The last style value that was interpreted by elementStylingMap. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.PreviousMultiStyleValue]: {[key: string]: any}|null;
}
/**
* The initial styles is populated whether or not there are any initial styles passed into
* the context during allocation. The 0th value must be null so that index values of `0` within
* the context flags can always point to a null value safely when nothing is set.
*
* All other entries in this array are of `string` value and correspond to the values that
* were extracted from the `style=""` attribute in the HTML code for the provided template.
*/
export interface InitialStyles extends Array<string|null|boolean> { [0]: null; }
/**
* Used to set the context to be dirty or not both on the master flag (position 1)
* or for each single/multi property that exists in the context.
*/
export const enum StylingFlags {
// Implies no configurations
None = 0b000,
// Whether or not the entry or context itself is dirty
Dirty = 0b001,
// Whether or not this is a class-based assignment
Class = 0b010,
// Whether or not a sanitizer was applied to this property
Sanitize = 0b100,
// The max amount of bits used to represent these configuration values
BitCountSize = 3,
// There are only three bits here
BitMask = 0b111
}
/** Used as numeric pointer values to determine what cells to update in the `StylingContext` */
export const enum StylingIndex {
// Position of where the initial styles are stored in the styling context
ElementPosition = 0,
// Position of where the initial styles are stored in the styling context
PlayerContext = 1,
// Position of where the style sanitizer is stored within the styling context
StyleSanitizerPosition = 2,
// Position of where the initial styles are stored in the styling context
InitialStylesPosition = 3,
// Index of location where the start of single properties are stored. (`updateStyleProp`)
MasterFlagPosition = 4,
// Index of location where the class index offset value is located
ClassOffsetPosition = 5,
// Position of where the last string-based CSS class value was stored
PreviousMultiClassValue = 6,
// Position of where the last string-based CSS class value was stored
PreviousMultiStyleValue = 7,
// Location of single (prop) value entries are stored within the context
SingleStylesStartPosition = 8,
// Multi and single entries are stored in `StylingContext` as: Flag; PropertyName; PropertyValue
FlagsOffset = 0,
PropertyOffset = 1,
ValueOffset = 2,
// Size of each multi or single entry (flag + prop + value)
Size = 3,
// Each flag has a binary digit length of this value
BitCountSize = 14, // (32 - 3) / 2 = ~14
// The binary digit value as a mask
BitMask = 0b11111111111111 // 14 bits
}

2
packages/core/src/render3/interfaces/view.ts
View File

@ -9,7 +9,7 @@
import {Injector} from '../../di/injector';
import {QueryList} from '../../linker';
import {Sanitizer} from '../../sanitization/security';
import {PlayerHandler} from '../animations/interfaces';
import {PlayerHandler} from '../interfaces/player';
import {LContainer} from './container';
import {ComponentQuery, ComponentTemplate, DirectiveDefInternal, DirectiveDefList, PipeDefInternal, PipeDefList} from './definition';

47
packages/core/src/render3/player.ts Normal file
View File

@ -0,0 +1,47 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {getContext} from './context_discovery';
import {scheduleTick} from './instructions';
import {ComponentInstance, DirectiveInstance, PlayState, Player} from './interfaces/player';
import {RootContextFlags} from './interfaces/view';
import {CorePlayerHandler} from './styling/core_player_handler';
import {getOrCreatePlayerContext} from './styling/util';
import {getRootContext} from './util';
export function addPlayer(
ref: ComponentInstance | DirectiveInstance | HTMLElement, player: Player): void {
const elementContext = getContext(ref) !;
const animationContext = getOrCreatePlayerContext(elementContext.native, elementContext) !;
animationContext.push(player);
player.addEventListener(PlayState.Destroyed, () => {
const index = animationContext.indexOf(player);
if (index >= 0) {
animationContext.splice(index, 1);
}
player.destroy();
});
const rootContext = getRootContext(elementContext.lViewData);
const playerHandler =
rootContext.playerHandler || (rootContext.playerHandler = new CorePlayerHandler());
playerHandler.queuePlayer(player, ref);
const nothingScheduled = rootContext.flags === RootContextFlags.Empty;
// change detection may or may not happen therefore
// the core code needs to be kicked off to flush the animations
rootContext.flags |= RootContextFlags.FlushPlayers;
if (nothingScheduled) {
scheduleTick(rootContext);
}
}
export function getPlayers(ref: ComponentInstance | DirectiveInstance | HTMLElement): Player[] {
return getOrCreatePlayerContext(ref);
}

236
packages/core/src/render3/styling.ts → packages/core/src/render3/styling/class_and_style_bindings.ts
View File

@ -6,227 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/
import {StyleSanitizeFn} from '../sanitization/style_sanitizer';
import {AnimationContext} from './animations/interfaces';
import {InitialStylingFlags} from './interfaces/definition';
import {LElementNode} from './interfaces/node';
import {Renderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
import {StyleSanitizeFn} from '../../sanitization/style_sanitizer';
/**
* The styling context acts as a styling manifest (shaped as an array) for determining which
* styling properties have been assigned via the provided `updateStylingMap`, `updateStyleProp`
* and `updateClassProp` functions. There are also two initialization functions
* `allocStylingContext` and `createStylingContextTemplate` which are used to initialize
* and/or clone the context.
*
* The context is an array where the first two cells are used for static data (initial styling)
* and dirty flags / index offsets). The remaining set of cells is used for multi (map) and single
* (prop) style values.
*
* each value from here onwards is mapped as so:
* [i] = mutation/type flag for the style/class value
* [i + 1] = prop string (or null incase it has been removed)
* [i + 2] = value string (or null incase it has been removed)
*
* There are three types of styling types stored in this context:
* initial: any styles that are passed in once the context is created
* (these are stored in the first cell of the array and the first
* value of this array is always `null` even if no initial styling exists.
* the `null` value is there so that any new styles have a parent to point
* to. This way we can always assume that there is a parent.)
*
* single: any styles that are updated using `updateStyleProp` or `updateClassProp` (fixed set)
*
* multi: any styles that are updated using `updateStylingMap` (dynamic set)
*
* Note that context is only used to collect style information. Only when `renderStyling`
* is called is when the styling payload will be rendered (or built as a key/value map).
*
* When the context is created, depending on what initial styling values are passed in, the
* context itself will be pre-filled with slots based on the initial style properties. Say
* for example we have a series of initial styles that look like so:
*
* style="width:100px; height:200px;"
* class="foo"
*
* Then the initial state of the context (once initialized) will look like so:
*
* ```
* context = [
* element,
* playerContext | null,
* styleSanitizer | null,
* [null, '100px', '200px', true], // property names are not needed since they have already been
* written to DOM.
*
* configMasterVal,
* 1, // this instructs how many `style` values there are so that class index values can be
* offsetted
* { classOne: true, classTwo: false } | 'classOne classTwo' | null // last class value provided into updateStylingMap
* { styleOne: '100px', styleTwo: 0 } | null // last style value provided into updateStylingMap
*
* // 8
* 'width',
* pointers(1, 15); // Point to static `width`: `100px` and multi `width`.
* null,
*
* // 11
* 'height',
* pointers(2, 18); // Point to static `height`: `200px` and multi `height`.
* null,
*
* // 14
* 'foo',
* pointers(1, 21); // Point to static `foo`: `true` and multi `foo`.
* null,
*
* // 17
* 'width',
* pointers(1, 6); // Point to static `width`: `100px` and single `width`.
* null,
*
* // 21
* 'height',
* pointers(2, 9); // Point to static `height`: `200px` and single `height`.
* null,
*
* // 24
* 'foo',
* pointers(3, 12); // Point to static `foo`: `true` and single `foo`.
* null,
* ]
*
* function pointers(staticIndex: number, dynamicIndex: number) {
* // combine the two indices into a single word.
* return (staticIndex << StylingFlags.BitCountSize) |
* (dynamicIndex << (StylingIndex.BitCountSize + StylingFlags.BitCountSize));
* }
* ```
*
* The values are duplicated so that space is set aside for both multi ([style] and [class])
* and single ([style.prop] or [class.named]) values. The respective config values
* (configValA, configValB, etc...) are a combination of the StylingFlags with two index
* values: the `initialIndex` (which points to the index location of the style value in
* the initial styles array in slot 0) and the `dynamicIndex` (which points to the
* matching single/multi index position in the context array for the same prop).
*
* This means that every time `updateStyleProp` or `updateClassProp` are called then they
* must be called using an index value (not a property string) which references the index
* value of the initial style prop/class when the context was created. This also means that
* `updateStyleProp` or `updateClassProp` cannot be called with a new property (only
* `updateStylingMap` can include new CSS properties that will be added to the context).
*/
export interface StylingContext extends
Array<InitialStyles|{[key: string]: any}|number|string|boolean|LElementNode|StyleSanitizeFn|
AnimationContext|null> {
/**
* Location of element that is used as a target for this context.
*/
[StylingIndex.ElementPosition]: LElementNode|null;
/**
* Location of animation context (which contains the active players) for this element styling
* context.
*/
[StylingIndex.AnimationContext]: AnimationContext|null;
/**
* The style sanitizer that is used within this context
*/
[StylingIndex.StyleSanitizerPosition]: StyleSanitizeFn|null;
/**
* Location of initial data shared by all instances of this style.
*/
[StylingIndex.InitialStylesPosition]: InitialStyles;
/**
* A numeric value representing the configuration status (whether the context is dirty or not)
* mixed together (using bit shifting) with a index value which tells the starting index value
* of where the multi style entries begin.
*/
[StylingIndex.MasterFlagPosition]: number;
/**
* A numeric value representing the class index offset value. Whenever a single class is
* applied (using `elementClassProp`) it should have an styling index value that doesn't
* need to take into account any style values that exist in the context.
*/
[StylingIndex.ClassOffsetPosition]: number;
/**
* The last class value that was interpreted by elementStylingMap. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.PreviousMultiClassValue]: {[key: string]: any}|string|null;
/**
* The last style value that was interpreted by elementStylingMap. This is cached
* So that the algorithm can exit early incase the value has not changed.
*/
[StylingIndex.PreviousMultiStyleValue]: {[key: string]: any}|null;
}
/**
* The initial styles is populated whether or not there are any initial styles passed into
* the context during allocation. The 0th value must be null so that index values of `0` within
* the context flags can always point to a null value safely when nothing is set.
*
* All other entries in this array are of `string` value and correspond to the values that
* were extracted from the `style=""` attribute in the HTML code for the provided template.
*/
export interface InitialStyles extends Array<string|null|boolean> { [0]: null; }
/**
* Used to set the context to be dirty or not both on the master flag (position 1)
* or for each single/multi property that exists in the context.
*/
export const enum StylingFlags {
// Implies no configurations
None = 0b000,
// Whether or not the entry or context itself is dirty
Dirty = 0b001,
// Whether or not this is a class-based assignment
Class = 0b010,
// Whether or not a sanitizer was applied to this property
Sanitize = 0b100,
// The max amount of bits used to represent these configuration values
BitCountSize = 3,
// There are only three bits here
BitMask = 0b111
}
/** Used as numeric pointer values to determine what cells to update in the `StylingContext` */
export const enum StylingIndex {
// Position of where the initial styles are stored in the styling context
ElementPosition = 0,
// Position of where the initial styles are stored in the styling context
AnimationContext = 1,
// Position of where the style sanitizer is stored within the styling context
StyleSanitizerPosition = 2,
// Position of where the initial styles are stored in the styling context
InitialStylesPosition = 3,
// Index of location where the start of single properties are stored. (`updateStyleProp`)
MasterFlagPosition = 4,
// Index of location where the class index offset value is located
ClassOffsetPosition = 5,
// Position of where the last string-based CSS class value was stored
PreviousMultiClassValue = 6,
// Position of where the last string-based CSS class value was stored
PreviousMultiStyleValue = 7,
// Location of single (prop) value entries are stored within the context
SingleStylesStartPosition = 8,
// Multi and single entries are stored in `StylingContext` as: Flag; PropertyName; PropertyValue
FlagsOffset = 0,
PropertyOffset = 1,
ValueOffset = 2,
// Size of each multi or single entry (flag + prop + value)
Size = 3,
// Each flag has a binary digit length of this value
BitCountSize = 14, // (32 - 3) / 2 = ~14
// The binary digit value as a mask
BitMask = 0b11111111111111 // 14 bits
}
import {InitialStylingFlags} from '../interfaces/definition';
import {LElementNode} from '../interfaces/node';
import {Renderer3, RendererStyleFlags3, isProceduralRenderer} from '../interfaces/renderer';
import {InitialStyles, StylingContext, StylingFlags, StylingIndex} from '../interfaces/styling';
import {createEmptyStylingContext, EMPTY_ARR, EMPTY_OBJ} from './util';
/**
* Used clone a copy of a pre-computed template of a styling context.
@ -242,14 +28,6 @@ export function allocStylingContext(
return context;
}
export function createEmptyStylingContext(
element?: LElementNode | null, sanitizer?: StyleSanitizeFn | null,
initialStylingValues?: InitialStyles): StylingContext {
return [
element || null, null, sanitizer || null, initialStylingValues || [null], 0, 0, null, null
];
}
/**
* Creates a styling context template where styling information is stored.
* Any styles that are later referenced using `updateStyleProp` must be
@ -377,8 +155,6 @@ export function createStylingContextTemplate(
return context;
}
const EMPTY_ARR: any[] = [];
const EMPTY_OBJ: {[key: string]: any} = {};
/**
* Sets and resolves all `multi` styling on an `StylingContext` so that they can be
* applied to the element once `renderStyling` is called.

2
packages/core/src/render3/animations/core_player_handler.ts → packages/core/src/render3/styling/core_player_handler.ts
View File

@ -5,7 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Player, PlayerHandler} from './interfaces';
import {Player, PlayerHandler} from '../interfaces/player';
export class CorePlayerHandler implements PlayerHandler {
private _players: Player[] = [];

43
packages/core/src/render3/styling/util.ts Normal file
View File

@ -0,0 +1,43 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {StyleSanitizeFn} from '../../sanitization/style_sanitizer';
import {LContext, getContext} from '../context_discovery';
import {LElementNode} from '../interfaces/node';
import {PlayerContext} from '../interfaces/player';
import {InitialStyles, StylingContext, StylingIndex} from '../interfaces/styling';
export const EMPTY_ARR: any[] = [];
export const EMPTY_OBJ: {[key: string]: any} = {};
export function createEmptyStylingContext(
element?: LElementNode | null, sanitizer?: StyleSanitizeFn | null,
initialStylingValues?: InitialStyles): StylingContext {
return [
element || null, null, sanitizer || null, initialStylingValues || [null], 0, 0, null, null
];
}
export function getOrCreatePlayerContext(target: {}, context?: LContext | null): PlayerContext {
context = context || getContext(target) !;
if (ngDevMode && !context) {
throw new Error(
'Only elements that exist in an Angular application can be used for player access');
}
const {lViewData, lNodeIndex} = context;
const value = lViewData[lNodeIndex];
let stylingContext = value as StylingContext;
if (!Array.isArray(value)) {
stylingContext = lViewData[lNodeIndex] = createEmptyStylingContext(value as LElementNode);
}
return stylingContext[StylingIndex.PlayerContext] || allocPlayerContext(stylingContext);
}
function allocPlayerContext(data: StylingContext): PlayerContext {
return data[StylingIndex.PlayerContext] = [];
}

8
packages/core/test/bundling/animation_world/bundle.golden_symbols.json
View File

@ -276,7 +276,7 @@
"name": "addToViewTree"
},
{
"name": "allocAnimationContext"
"name": "allocPlayerContext"
},
{
"name": "allocStylingContext"
@ -602,9 +602,6 @@
{
"name": "getMultiStartIndex"
},
{
"name": "getOrCreateAnimationContext"
},
{
"name": "getOrCreateInjectable"
},
@ -614,6 +611,9 @@
{
"name": "getOrCreateNodeInjectorForNode"
},
{
"name": "getOrCreatePlayerContext"
},
{
"name": "getOrCreateRenderer2"
},

2
packages/core/test/render3/integration_spec.ts
View File

@ -21,7 +21,7 @@ import {Sanitizer, SecurityContext} from '../../src/sanitization/security';
import {NgIf} from './common_with_def';
import {ComponentFixture, TemplateFixture, createComponent, renderToHtml} from './render_util';
import {MONKEY_PATCH_KEY_NAME, getContext} from '../../src/render3/context_discovery';
import {StylingIndex} from '../../src/render3/styling';
import {StylingIndex} from '../../src/render3/interfaces/styling';
import {directiveInject} from '../../src/render3/di';
describe('render3 integration test', () => {

2
packages/core/test/render3/render_util.ts
View File

@ -14,7 +14,6 @@ import {stringifyElement} from '@angular/platform-browser/testing/src/browser_ut
import {Injector} from '../../src/di/injector';
import {R3_CHANGE_DETECTOR_REF_FACTORY, R3_ELEMENT_REF_FACTORY, R3_TEMPLATE_REF_FACTORY, R3_VIEW_CONTAINER_REF_FACTORY} from '../../src/ivy_switch/runtime/ivy_switch_on';
import {PlayerHandler} from '../../src/render3/animations/interfaces';
import {CreateComponentOptions} from '../../src/render3/component';
import {getContext, isComponentInstance} from '../../src/render3/context_discovery';
import {extractDirectiveDef, extractPipeDef} from '../../src/render3/definition';
@ -23,6 +22,7 @@ import {ComponentTemplate, ComponentType, DirectiveDefInternal, DirectiveType, P
import {renderTemplate} from '../../src/render3/instructions';
import {DirectiveDefList, DirectiveTypesOrFactory, PipeDefInternal, PipeDefList, PipeTypesOrFactory} from '../../src/render3/interfaces/definition';
import {LElementNode} from '../../src/render3/interfaces/node';
import {PlayerHandler} from '../../src/render3/interfaces/player';
import {RElement, RText, Renderer3, RendererFactory3, domRendererFactory3} from '../../src/render3/interfaces/renderer';
import {Sanitizer} from '../../src/sanitization/security';
import {Type} from '../../src/type';

4
packages/core/test/render3/animations/core_player_handler_spec.ts → packages/core/test/render3/styling/core_player_handler_spec.ts
View File

@ -5,8 +5,8 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {CorePlayerHandler} from '../../../src/render3/animations/core_player_handler';
import {PlayState} from '../../../src/render3/animations/interfaces';
import {CorePlayerHandler} from '../../../src/render3/styling/core_player_handler';
import {PlayState} from '../../../src/render3/interfaces/player';
import {MockPlayer} from './mock_player';
describe('CorePlayerHandler', () => {

2
packages/core/test/render3/animations/mock_player.ts → packages/core/test/render3/styling/mock_player.ts
View File

@ -5,7 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {PlayState, Player} from '../../../src/render3/animations/interfaces';
import {PlayState, Player} from '../../../src/render3/interfaces/player';
export class MockPlayer implements Player {
parent: Player|null = null;

10
packages/core/test/render3/animations/players_spec.ts → packages/core/test/render3/styling/players_spec.ts
View File

@ -5,13 +5,13 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {ElementRef, TemplateRef} from '@angular/core';
import {RenderFlags} from '@angular/core/src/render3';
import {AnimationContext, PlayState, Player, PlayerHandler} from '../../../src/render3/animations/interfaces';
import {addPlayer, getOrCreateAnimationContext, getPlayers} from '../../../src/render3/animations/players';
import {addPlayer, getPlayers} from '../../../src/render3/player';
import {getOrCreatePlayerContext} from '../../../src/render3/styling/util';
import {QUERY_READ_FROM_NODE, defineComponent, getHostElement} from '../../../src/render3/index';
import {element, elementEnd, elementStart, elementStyling, elementStylingApply, load, markDirty} from '../../../src/render3/instructions';
import {PlayerContext, PlayState, Player, PlayerHandler} from '../../../src/render3/interfaces/player';
import {RElement} from '../../../src/render3/interfaces/renderer';
import {QueryList, query, queryRefresh} from '../../../src/render3/query';
import {ComponentFixture} from '../render_util';
@ -55,7 +55,7 @@ describe('animation player access', () => {
it('should add a player to the element animation context and remove it once it completes', () => {
const element = buildElement();
const context = getOrCreateAnimationContext(element);
const context = getOrCreatePlayerContext(element);
expect(context).toEqual([]);
const player = new MockPlayer();
@ -226,7 +226,7 @@ function buildElementWithStyling() {
return fixture.hostElement.querySelector('div') as RElement;
}
function readPlayers(context: AnimationContext): Player[] {
function readPlayers(context: PlayerContext): Player[] {
return context;
}

17
packages/core/test/render3/styling_spec.ts → packages/core/test/render3/styling/styling_spec.ts
View File

@ -5,15 +5,16 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {elementEnd, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap} from '../../src/render3/instructions';
import {InitialStylingFlags, RenderFlags} from '../../src/render3/interfaces/definition';
import {LElementNode} from '../../src/render3/interfaces/node';
import {Renderer3} from '../../src/render3/interfaces/renderer';
import {StylingContext, StylingFlags, StylingIndex, allocStylingContext, createStylingContextTemplate, isContextDirty, renderStyling as _renderStyling, setContextDirty, updateClassProp, updateStyleProp, updateStylingMap} from '../../src/render3/styling';
import {defaultStyleSanitizer} from '../../src/sanitization/sanitization';
import {StyleSanitizeFn} from '../../src/sanitization/style_sanitizer';
import {elementEnd, elementStart, elementStyleProp, elementStyling, elementStylingApply, elementStylingMap} from '../../../src/render3/instructions';
import {InitialStylingFlags, RenderFlags} from '../../../src/render3/interfaces/definition';
import {LElementNode} from '../../../src/render3/interfaces/node';
import {Renderer3} from '../../../src/render3/interfaces/renderer';
import {StylingContext, StylingFlags, StylingIndex} from '../../../src/render3/interfaces/styling';
import {allocStylingContext, createStylingContextTemplate, isContextDirty, renderStyling as _renderStyling, setContextDirty, updateClassProp, updateStyleProp, updateStylingMap} from '../../../src/render3/styling/class_and_style_bindings';
import {defaultStyleSanitizer} from '../../../src/sanitization/sanitization';
import {StyleSanitizeFn} from '../../../src/sanitization/style_sanitizer';
import {renderToHtml} from './render_util';
import {renderToHtml} from '../render_util';
describe('styling', () => {
let element: LElementNode|null = null;