cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(render): use RenderElementRef in all renderer methods

Browse Source 
BREAKING CHANGES:
- Almost all methods in `Renderer` now take a `RenderElementRef` instead
  of a `ViewRef` + `boundElementIndex`.
- These methods can be called with the `ElementRef` from the app side
  directly.

Closes #2706
Related to #2476
This commit is contained in:
Tobias Bosch
2015-06-23 11:21:56 -07:00
parent 2c3c235969
commit ba9fecd068
13 changed files with 139 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
modules/angular2/src/render/api.ts
View File

@ -306,6 +306,11 @@ export class RenderCompiler {
compile(template: ViewDefinition): Promise<ProtoViewDto> { return null; }
}
export interface RenderElementRef {
renderView: RenderViewRef;
boundElementIndex: number;
}
export class Renderer {
/**
* Creates a root host view that includes the given element.
@ -333,29 +338,25 @@ export class Renderer {
/**
* Attaches a componentView into the given hostView at the given element
*/
attachComponentView(hostViewRef: RenderViewRef, elementIndex: number,
componentViewRef: RenderViewRef) {}
attachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {}
/**
* Detaches a componentView into the given hostView at the given element
*/
detachComponentView(hostViewRef: RenderViewRef, boundElementIndex: number,
componentViewRef: RenderViewRef) {}
detachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {}
/**
* Attaches a view into a ViewContainer (in the given parentView at the given element) at the
* given index.
*/
attachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
viewRef: RenderViewRef) {}
attachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {}
/**
* Detaches a view into a ViewContainer (in the given parentView at the given element) at the
* given index.
*/
// TODO(tbosch): this should return a promise as it can be animated!
detachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
viewRef: RenderViewRef) {}
detachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {}
/**
* Hydrates a view after it has been attached. Hydration/dehydration is used for reusing views
@ -372,32 +373,27 @@ export class Renderer {
/**
* Sets a property on an element.
*/
setElementProperty(viewRef: RenderViewRef, elementIndex: number, propertyName: string,
propertyValue: any) {}
setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any) {}
/**
* Sets an attribute on an element.
*/
setElementAttribute(viewRef: RenderViewRef, elementIndex: number, attributeName: string,
attributeValue: string) {}
setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string) {}
/**
* Sets a class on an element.
*/
setElementClass(viewRef: RenderViewRef, elementIndex: number, className: string, isAdd: boolean) {
}
setElementClass(location: RenderElementRef, className: string, isAdd: boolean) {}
/**
* Sets a style on an element.
*/
setElementStyle(viewRef: RenderViewRef, elementIndex: number, styleName: string,
styleValue: string) {}
setElementStyle(location: RenderElementRef, styleName: string, styleValue: string) {}
/**
* Calls a method on an element.
*/
invokeElementMethod(viewRef: RenderViewRef, elementIndex: number, methodName: string,
args: List<any>) {}
invokeElementMethod(location: RenderElementRef, methodName: string, args: List<any>) {}
/**
* Sets the value of a text node.

72
modules/angular2/src/render/dom/dom_renderer.ts
View File

@ -20,7 +20,7 @@ import {DomElement} from './view/element';
import {DomViewContainer} from './view/view_container';
import {NG_BINDING_CLASS_SELECTOR, NG_BINDING_CLASS} from './util';
import {Renderer, RenderProtoViewRef, RenderViewRef} from '../api';
import {Renderer, RenderProtoViewRef, RenderViewRef, RenderElementRef} from '../api';
export const DOCUMENT_TOKEN = CONST_EXPR(new OpaqueToken('DocumentToken'));
@ -53,12 +53,11 @@ export class DomRenderer extends Renderer {
// noop for now
}
attachComponentView(hostViewRef: RenderViewRef, elementIndex: number,
componentViewRef: RenderViewRef) {
var hostView = resolveInternalDomView(hostViewRef);
attachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {
var hostView = resolveInternalDomView(location.renderView);
var componentView = resolveInternalDomView(componentViewRef);
var element = hostView.boundElements[elementIndex].element;
var lightDom = hostView.boundElements[elementIndex].lightDom;
var element = hostView.boundElements[location.boundElementIndex].element;
var lightDom = hostView.boundElements[location.boundElementIndex].lightDom;
if (isPresent(lightDom)) {
lightDom.attachShadowDomView(componentView);
}
@ -79,12 +78,11 @@ export class DomRenderer extends Renderer {
return resolveInternalDomView(viewRef).rootNodes;
}
detachComponentView(hostViewRef: RenderViewRef, boundElementIndex: number,
componentViewRef: RenderViewRef) {
var hostView = resolveInternalDomView(hostViewRef);
detachComponentView(location: RenderElementRef, componentViewRef: RenderViewRef) {
var hostView = resolveInternalDomView(location.renderView);
var componentView = resolveInternalDomView(componentViewRef);
this._removeViewNodes(componentView);
var lightDom = hostView.boundElements[boundElementIndex].lightDom;
var lightDom = hostView.boundElements[location.boundElementIndex].lightDom;
if (isPresent(lightDom)) {
lightDom.detachShadowDomView();
}
@ -92,19 +90,18 @@ export class DomRenderer extends Renderer {
componentView.shadowRoot = null;
}
attachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
viewRef: RenderViewRef) {
var parentView = resolveInternalDomView(parentViewRef);
attachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {
var parentView = resolveInternalDomView(location.renderView);
var view = resolveInternalDomView(viewRef);
var viewContainer = this._getOrCreateViewContainer(parentView, boundElementIndex);
var viewContainer = this._getOrCreateViewContainer(parentView, location.boundElementIndex);
ListWrapper.insert(viewContainer.views, atIndex, view);
view.hostLightDom = parentView.hostLightDom;
var directParentLightDom = this._directParentLightDom(parentView, boundElementIndex);
var directParentLightDom = this._directParentLightDom(parentView, location.boundElementIndex);
if (isBlank(directParentLightDom)) {
var siblingToInsertAfter;
if (atIndex == 0) {
siblingToInsertAfter = parentView.boundElements[boundElementIndex].element;
siblingToInsertAfter = parentView.boundElements[location.boundElementIndex].element;
} else {
siblingToInsertAfter = ListWrapper.last(viewContainer.views[atIndex - 1].rootNodes);
}
@ -118,14 +115,13 @@ export class DomRenderer extends Renderer {
}
}
detachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
viewRef: RenderViewRef) {
var parentView = resolveInternalDomView(parentViewRef);
detachViewInContainer(location: RenderElementRef, atIndex: number, viewRef: RenderViewRef) {
var parentView = resolveInternalDomView(location.renderView);
var view = resolveInternalDomView(viewRef);
var viewContainer = parentView.boundElements[boundElementIndex].viewContainer;
var viewContainer = parentView.boundElements[location.boundElementIndex].viewContainer;
var detachedView = viewContainer.views[atIndex];
ListWrapper.removeAt(viewContainer.views, atIndex);
var directParentLightDom = this._directParentLightDom(parentView, boundElementIndex);
var directParentLightDom = this._directParentLightDom(parentView, location.boundElementIndex);
if (isBlank(directParentLightDom)) {
this._removeViewNodes(detachedView);
} else {
@ -181,34 +177,30 @@ export class DomRenderer extends Renderer {
view.hydrated = false;
}
setElementProperty(viewRef: RenderViewRef, elementIndex: number, propertyName: string,
propertyValue: any): void {
var view = resolveInternalDomView(viewRef);
view.setElementProperty(elementIndex, propertyName, propertyValue);
setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void {
var view = resolveInternalDomView(location.renderView);
view.setElementProperty(location.boundElementIndex, propertyName, propertyValue);
}
setElementAttribute(viewRef: RenderViewRef, elementIndex: number, attributeName: string,
setElementAttribute(location: RenderElementRef, attributeName: string,
attributeValue: string): void {
var view = resolveInternalDomView(viewRef);
view.setElementAttribute(elementIndex, attributeName, attributeValue);
var view = resolveInternalDomView(location.renderView);
view.setElementAttribute(location.boundElementIndex, attributeName, attributeValue);
}
setElementClass(viewRef: RenderViewRef, elementIndex: number, className: string,
isAdd: boolean): void {
var view = resolveInternalDomView(viewRef);
view.setElementClass(elementIndex, className, isAdd);
setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void {
var view = resolveInternalDomView(location.renderView);
view.setElementClass(location.boundElementIndex, className, isAdd);
}
setElementStyle(viewRef: RenderViewRef, elementIndex: number, styleName: string,
styleValue: string): void {
var view = resolveInternalDomView(viewRef);
view.setElementStyle(elementIndex, styleName, styleValue);
setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void {
var view = resolveInternalDomView(location.renderView);
view.setElementStyle(location.boundElementIndex, styleName, styleValue);
}
invokeElementMethod(viewRef: RenderViewRef, elementIndex: number, methodName: string,
args: List<any>): void {
var view = resolveInternalDomView(viewRef);
view.invokeElementMethod(elementIndex, methodName, args);
invokeElementMethod(location: RenderElementRef, methodName: string, args: List<any>): void {
var view = resolveInternalDomView(location.renderView);
view.invokeElementMethod(location.boundElementIndex, methodName, args);
}
setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void {