diff options
author | YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:24:38 +0800 |
---|---|---|
committer | YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:24:38 +0800 |
commit | 573f32b362f4639928485d66feb1c0721109716b (patch) | |
tree | 39ab8771c9ef87ee2b61abe1e126e31629bdf9eb /sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-directives.ts | |
parent | 99fcc841c86367722097f54497dbc7c856c19251 (diff) |
Include paletx core
Include paletx core to WF Designer UI.
Issue-ID: SDC-1130,SDC-1131
Change-Id: I9a2591e022b5ff118cccbbc839796be19d70df84
Signed-off-by: YuanHu <yuan.hu1@zte.com.cn>
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-directives.ts')
-rw-r--r-- | sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-directives.ts | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-directives.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-directives.ts new file mode 100644 index 00000000..5b8c1623 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-directives.ts @@ -0,0 +1,329 @@ +/** + * @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 + */ +/* tslint:disable:array-type member-access variable-name typedef + only-arrow-functions directive-class-suffix component-class-suffix + component-selector no-unnecessary-type-assertion arrow-parens*/ +import {TemplatePortal} from '@angular/cdk'; +import {Direction, Directionality} from '@angular/cdk'; +import {ESCAPE} from '@angular/cdk'; +import {Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Optional, Output, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef} from '@angular/core'; +import {Subscription} from 'rxjs/Subscription'; + +import {Overlay} from './overlay'; +import {OverlayRef} from './overlay-ref'; +import {OverlayState} from './overlay-state'; +import {ConnectedOverlayPositionChange, ConnectionPositionPair} from './position/connected-position'; +import {ConnectedPositionStrategy} from './position/connected-position-strategy'; +import {ScrollStrategy} from './scroll/scroll-strategy'; + +/** Coerces a data-bound value (typically a string) to a boolean. */ +export function coerceBooleanProperty(value: any): boolean { + return value !== null && `${value}` !== 'false'; +} + + +/** Default set of positions for the overlay. Follows the behavior of a + * dropdown. */ +const defaultPositionList = [ + new ConnectionPositionPair( + {originX: 'start', originY: 'bottom'}, + {overlayX: 'start', overlayY: 'top'}), + new ConnectionPositionPair( + {originX: 'start', originY: 'top'}, + {overlayX: 'start', overlayY: 'bottom'}), +]; + + +/** + * Directive applied to an element to make it usable as an origin for an Overlay + * using a ConnectedPositionStrategy. + */ +@Directive({ + selector: '[nz-overlay-origin]', + exportAs: 'nzOverlayOrigin', +}) +export class OverlayOrigin { + constructor(public elementRef: ElementRef) {} +} + + +/** + * Directive to facilitate declarative creation of an Overlay using a + * ConnectedPositionStrategy. + */ +@Directive({selector: '[nz-connected-overlay]', exportAs: 'nzConnectedOverlay'}) +export class ConnectedOverlayDirective implements OnDestroy, OnChanges { + private _overlayRef: OverlayRef; + private _templatePortal: TemplatePortal; + private _hasBackdrop = false; + private _backdropSubscription: Subscription|null; + private _positionSubscription: Subscription; + private _offsetX = 0; + private _offsetY = 0; + private _position: ConnectedPositionStrategy; + private _escapeListener: Function; + + /** Origin for the connected overlay. */ + @Input() origin: OverlayOrigin; + + /** Registered connected position pairs. */ + @Input() positions: ConnectionPositionPair[]; + + /** The offset in pixels for the overlay connection point on the x-axis */ + @Input() + get offsetX(): number { + return this._offsetX; + } + + set offsetX(offsetX: number) { + this._offsetX = offsetX; + if (this._position) { + this._position.withOffsetX(offsetX); + } + } + + /** The offset in pixels for the overlay connection point on the y-axis */ + @Input() + get offsetY() { + return this._offsetY; + } + + set offsetY(offsetY: number) { + this._offsetY = offsetY; + if (this._position) { + this._position.withOffsetY(offsetY); + } + } + + /** The width of the overlay panel. */ + @Input() width: number|string; + + /** The height of the overlay panel. */ + @Input() height: number|string; + + /** The min width of the overlay panel. */ + @Input() minWidth: number|string; + + /** The min height of the overlay panel. */ + @Input() minHeight: number|string; + + /** The custom class to be set on the backdrop element. */ + @Input() backdropClass: string; + + /** The custom class to be set on the pane element. */ + @Input() paneClass: string; + + /** Strategy to be used when handling scroll events while the overlay is open. + */ + @Input() + scrollStrategy: ScrollStrategy = this._overlay.scrollStrategies.reposition(); + + /** Whether the overlay is open. */ + @Input() open = false; + + /** Whether or not the overlay should attach a backdrop. */ + @Input() + get hasBackdrop() { + return this._hasBackdrop; + } + + set hasBackdrop(value: any) { + this._hasBackdrop = coerceBooleanProperty(value); + } + + /** Event emitted when the backdrop is clicked. */ + @Output() backdropClick = new EventEmitter<void>(); + + /** Event emitted when the position has changed. */ + @Output() positionChange = new EventEmitter<ConnectedOverlayPositionChange>(); + + /** Event emitted when the overlay has been attached. */ + @Output() attach = new EventEmitter<void>(); + + /** Event emitted when the overlay has been detached. */ + @Output() detach = new EventEmitter<void>(); + + // TODO(jelbourn): inputs for size, scroll behavior, animation, etc. + + constructor( + private _overlay: Overlay, private _renderer: Renderer2, + templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef, + @Optional() private _dir: Directionality) { + this._templatePortal = new TemplatePortal(templateRef, viewContainerRef); + } + + /** The associated overlay reference. */ + get overlayRef(): OverlayRef { + return this._overlayRef; + } + + /** The element's layout direction. */ + get dir(): Direction { + return this._dir ? this._dir.value : 'ltr'; + } + + ngOnDestroy() { + this._destroyOverlay(); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes['open']) { + this.open ? this._attachOverlay() : this._detachOverlay(); + } + } + + /** Creates an overlay */ + private _createOverlay() { + if (!this.positions || !this.positions.length) { + this.positions = defaultPositionList; + } + + this._overlayRef = + this._overlay.create(this._buildConfig(), this.paneClass); + } + + /** Builds the overlay config based on the directive's inputs */ + private _buildConfig(): OverlayState { + const overlayConfig = new OverlayState(); + + if (this.width || this.width === 0) { + overlayConfig.width = this.width; + } + + if (this.height || this.height === 0) { + overlayConfig.height = this.height; + } + + if (this.minWidth || this.minWidth === 0) { + overlayConfig.minWidth = this.minWidth; + } + + if (this.minHeight || this.minHeight === 0) { + overlayConfig.minHeight = this.minHeight; + } + + overlayConfig.hasBackdrop = this.hasBackdrop; + + if (this.backdropClass) { + overlayConfig.backdropClass = this.backdropClass; + } + + this._position = + this._createPositionStrategy() as ConnectedPositionStrategy; + overlayConfig.positionStrategy = this._position; + overlayConfig.scrollStrategy = this.scrollStrategy; + + return overlayConfig; + } + + /** Returns the position strategy of the overlay to be set on the overlay + * config */ + private _createPositionStrategy(): ConnectedPositionStrategy { + const pos = this.positions[0]; + const originPoint = {originX: pos.originX, originY: pos.originY}; + const overlayPoint = {overlayX: pos.overlayX, overlayY: pos.overlayY}; + + const strategy = + this._overlay.position() + .connectedTo(this.origin.elementRef, originPoint, overlayPoint) + .withOffsetX(this.offsetX) + .withOffsetY(this.offsetY); + + this._handlePositionChanges(strategy); + + return strategy; + } + + private _handlePositionChanges(strategy: ConnectedPositionStrategy): void { + for (let i = 1; i < this.positions.length; i++) { + strategy.withFallbackPosition( + { + originX: this.positions[i].originX, + originY: this.positions[i].originY + }, + { + overlayX: this.positions[i].overlayX, + overlayY: this.positions[i].overlayY + }); + } + + this._positionSubscription = strategy.onPositionChange.subscribe( + pos => this.positionChange.emit(pos)); + } + + /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists + */ + private _attachOverlay() { + if (!this._overlayRef) { + this._createOverlay(); + } + + this._position.withDirection(this.dir); + this._overlayRef.getState().direction = this.dir; + this._initEscapeListener(); + + if (!this._overlayRef.hasAttached()) { + this._overlayRef.attach(this._templatePortal); + this.attach.emit(); + } + + if (this.hasBackdrop) { + this._backdropSubscription = + this._overlayRef.backdropClick().subscribe(() => { + this.backdropClick.emit(); + }); + } + } + + /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop + * exists */ + private _detachOverlay() { + if (this._overlayRef) { + this._overlayRef.detach(); + this.detach.emit(); + } + + if (this._backdropSubscription) { + this._backdropSubscription.unsubscribe(); + this._backdropSubscription = null; + } + + if (this._escapeListener) { + this._escapeListener(); + } + } + + /** Destroys the overlay created by this directive. */ + private _destroyOverlay() { + if (this._overlayRef) { + this._overlayRef.dispose(); + } + + if (this._backdropSubscription) { + this._backdropSubscription.unsubscribe(); + } + + if (this._positionSubscription) { + this._positionSubscription.unsubscribe(); + } + + if (this._escapeListener) { + this._escapeListener(); + } + } + + /** Sets the event listener that closes the overlay when pressing Escape. */ + private _initEscapeListener() { + this._escapeListener = + this._renderer.listen('document', 'keydown', (event: KeyboardEvent) => { + if (event.keyCode === ESCAPE) { + this._detachOverlay(); + } + }); + } +} |