diff options
Diffstat (limited to 'sdc-workflow-designer-ui')
39 files changed, 3659 insertions, 9 deletions
diff --git a/sdc-workflow-designer-ui/package-lock.json b/sdc-workflow-designer-ui/package-lock.json index bd501c05..a7015452 100644 --- a/sdc-workflow-designer-ui/package-lock.json +++ b/sdc-workflow-designer-ui/package-lock.json @@ -23,6 +23,14 @@ "tslib": "1.7.1" } }, + "@angular/cdk": { + "version": "2.0.0-beta.8", + "resolved": "http://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-2.0.0-beta.8.tgz", + "integrity": "sha1-cZYchR376xngheiYv15EYUCPi1c=", + "requires": { + "tslib": "1.7.1" + } + }, "@angular/cli": { "version": "1.3.1", "resolved": "http://registry.npm.taobao.org/@angular/cli/download/@angular/cli-1.3.1.tgz", @@ -87,7 +95,6 @@ "typescript": "2.3.4", "url-loader": "0.5.9", "walk-sync": "0.3.2", - "webpack": "3.4.1", "webpack-dev-middleware": "1.12.0", "webpack-dev-server": "2.5.1", "webpack-merge": "4.1.0", @@ -159,6 +166,14 @@ "integrity": "sha1-ttiC6kDRjVE/w6A1p5h1Ap/jjwE=", "dev": true }, + "@angular/material": { + "version": "5.2.4", + "resolved": "http://registry.npm.taobao.org/@angular/material/download/@angular/material-5.2.4.tgz", + "integrity": "sha1-noI3mDJCg9I+qDkVb6xby3NEPVU=", + "requires": { + "tslib": "1.7.1" + } + }, "@angular/platform-browser": { "version": "4.3.5", "resolved": "http://registry.npm.taobao.org/@angular/platform-browser/download/@angular/platform-browser-4.3.5.tgz", @@ -209,6 +224,16 @@ "source-map": "0.5.6" } }, + "@ngx-translate/core": { + "version": "7.2.2", + "resolved": "http://registry.npm.taobao.org/@ngx-translate/core/download/@ngx-translate/core-7.2.2.tgz", + "integrity": "sha1-5wBp1e+Og36jNuaJB3N4b177XeU=" + }, + "@ngx-translate/http-loader": { + "version": "1.1.0", + "resolved": "http://registry.npm.taobao.org/@ngx-translate/http-loader/download/@ngx-translate/http-loader-1.1.0.tgz", + "integrity": "sha1-opMmDOpvYXhKb/nFWklz6pd43OI=" + }, "@types/jasmine": { "version": "2.5.53", "resolved": "http://registry.npm.taobao.org/@types/jasmine/download/@types/jasmine-2.5.53.tgz", @@ -1870,6 +1895,11 @@ } } }, + "date-fns": { + "version": "1.29.0", + "resolved": "http://registry.npm.taobao.org/date-fns/download/date-fns-1.29.0.tgz", + "integrity": "sha1-EuYJzcuTUScxHQTTMzTilgoqVOY=" + }, "date-now": { "version": "0.1.4", "resolved": "http://registry.npm.taobao.org/date-now/download/date-now-0.1.4.tgz", @@ -4179,6 +4209,11 @@ "resolved": "http://10.75.8.148/repository/npm-pub/jquery/-/jquery-3.2.1.tgz", "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=" }, + "jquery-ui": { + "version": "1.12.1", + "resolved": "http://registry.npm.taobao.org/jquery-ui/download/jquery-ui-1.12.1.tgz", + "integrity": "sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE=" + }, "js-base64": { "version": "2.1.9", "resolved": "http://registry.npm.taobao.org/js-base64/download/js-base64-2.1.9.tgz", @@ -8456,9 +8491,9 @@ } }, "webpack": { - "version": "3.4.1", - "resolved": "http://registry.npm.taobao.org/webpack/download/webpack-3.4.1.tgz", - "integrity": "sha1-TD9PP7MYFVpNsMtqNv8FxWl0GPQ=", + "version": "3.5.6", + "resolved": "http://registry.npm.taobao.org/webpack/download/webpack-3.5.6.tgz", + "integrity": "sha1-pJL7bB7X9XOBb5DgDI+7WiDMXDY=", "dev": true, "requires": { "acorn": "5.1.1", @@ -8477,7 +8512,7 @@ "mkdirp": "0.5.1", "node-libs-browser": "2.0.0", "source-map": "0.5.6", - "supports-color": "4.2.1", + "supports-color": "4.5.0", "tapable": "0.2.8", "uglifyjs-webpack-plugin": "0.4.6", "watchpack": "1.4.0", @@ -8566,9 +8601,9 @@ "dev": true }, "supports-color": { - "version": "4.2.1", - "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-4.2.1.tgz", - "integrity": "sha1-ZaS7JjHpDgJCDbpVVMN1pHVLuDY=", + "version": "4.5.0", + "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-4.5.0.tgz", + "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", "dev": true, "requires": { "has-flag": "2.0.0" diff --git a/sdc-workflow-designer-ui/package.json b/sdc-workflow-designer-ui/package.json index 561639ea..3cd612ec 100644 --- a/sdc-workflow-designer-ui/package.json +++ b/sdc-workflow-designer-ui/package.json @@ -13,11 +13,13 @@ "private": true, "dependencies": { "@angular/animations": "^4.2.4", + "@angular/cdk": "2.0.0-beta.8", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", + "@angular/material": "^5.2.0", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", @@ -26,6 +28,7 @@ "angular-in-memory-web-api": "^0.3.2", "bootstrap": "4.0.0-alpha.6", "core-js": "^2.4.1", + "date-fns": "^1.29.0", "font-awesome": "^4.7.0", "jquery": "^3.2.1", "jquery-ui": "^1.12.1", @@ -55,6 +58,7 @@ "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.3.2", - "typescript": "~2.3.3" + "typescript": "~2.3.3", + "webpack": "3.5.6" } } diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/boolean-field-value.ts b/sdc-workflow-designer-ui/src/app/paletx/core/boolean-field-value.ts new file mode 100644 index 00000000..dc1f86e2 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/boolean-field-value.ts @@ -0,0 +1,19 @@ +/* tslint:disable:array-type member-access variable-name */ +function booleanFieldValueFactory() { + return function booleanFieldValueMetadata(target: any, key: string): void { + const defaultValue = target[key]; + const localKey = `__ky_private_symbol_${key}`; + target[localKey] = defaultValue; + + Object.defineProperty(target, key, { + get() { + return (this)[localKey]; + }, + set(value: boolean) { + (this)[localKey] = value !== null && `${value}` !== 'false'; + } + }); + }; +} + +export {booleanFieldValueFactory as BooleanFieldValue}; diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/domhandler.ts b/sdc-workflow-designer-ui/src/app/paletx/core/domhandler.ts new file mode 100644 index 00000000..fd700a9b --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/domhandler.ts @@ -0,0 +1,432 @@ +import {Injectable} from '@angular/core'; + +@Injectable() +export class DomHandler { + static zindex: number = 1000; + + public addClass(element: any, className: string): void { + if (element.classList) { + element.classList.add(className); + } else { + element.className += ' ' + className; + } + } + + public addMultipleClasses(element: any, className: string): void { + if (element.classList) { + let styles: string[] = className.split(' '); + // for (let i = 0; i < styles.length; i++) { + // element.classList.add(styles[i]); + // } + for (let style of styles) { + element.classList.add(style); + } + + } else { + let styles: string[] = className.split(' '); + // for (let i = 0; i < styles.length; i++) { + // element.className += ' ' + styles[i]; + // } + for (let style of styles) { + element.className += ' ' + style; + } + } + } + + public removeClass(element: any, className: string): void { + if (element.classList) { + element.classList.remove(className); + } else { + element.className = element.className.replace( + new RegExp( + '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), + ' '); + } + } + + public hasClass(element: any, className: string): boolean { + if (element.classList) { + return element.classList.contains(className); + } else { + return new RegExp('(^| )' + className + '( |$)', 'gi') + .test(element.className); + } + } + + public siblings(element: any): any { + return Array.prototype.filter.call( + element.parentNode.children, (child: any) => { + return child !== element; + }); + } + + public find(element: any, selector: string): any[] { + return element.querySelectorAll(selector); + } + + public findSingle(element: any, selector: string): any { + return element.querySelector(selector); + } + + public index(element: any): number { + let children = element.parentNode.childNodes; + let num = 0; + // for (let i = 0; i < children.length; i++) { + // if (children[i] == element) { + // return num; + // } + // if (children[i].nodeType == 1) { + // num++; + // } + // } + for (let child of children) { + if (child === element) { + return num; + } + if (child.nodeType === 1) { + num++; + } + } + return -1; + } + + public relativePosition(element: any, target: any): void { + let elementDimensions = element.offsetParent ? + {width: element.outerWidth, height: element.outerHeight} : + this.getHiddenElementDimensions(element); + let targetHeight = target.offsetHeight; + let targetWidth = target.offsetWidth; + let targetOffset = target.getBoundingClientRect(); + let viewport = this.getViewport(); + let top; + let left; + + if ((targetOffset.top + targetHeight + elementDimensions.height) > + viewport.height) { + top = -1 * (elementDimensions.height); + } else { + top = targetHeight; + } + + if ((targetOffset.left + elementDimensions.width) > viewport.width) { + left = targetWidth - elementDimensions.width; + } else { + left = 0; + } + + element.style.top = top + 'px'; + element.style.left = left + 'px'; + } + + public absolutePosition(element: any, target: any): void { + let elementDimensions = element.offsetParent ? + {width: element.offsetWidth, height: element.offsetHeight} : + this.getHiddenElementDimensions(element); + let elementOuterHeight = elementDimensions.height; + let elementOuterWidth = elementDimensions.width; + let targetOuterHeight = target.offsetHeight; + let targetOuterWidth = target.offsetWidth; + let targetOffset = target.getBoundingClientRect(); + let windowScrollTop = this.getWindowScrollTop(); + let windowScrollLeft = this.getWindowScrollLeft(); + let viewport = this.getViewport(); + let top; + let left; + + if (targetOffset.top + targetOuterHeight + elementOuterHeight > + viewport.height) { + top = targetOffset.top + windowScrollTop - elementOuterHeight; + if (top < 0) { + top = 0 + windowScrollTop; + } + } else { + top = targetOuterHeight + targetOffset.top + windowScrollTop; + } + + if (targetOffset.left + targetOuterWidth + elementOuterWidth > + viewport.width) { + left = targetOffset.left + windowScrollLeft + targetOuterWidth - + elementOuterWidth; + } else { + left = targetOffset.left + windowScrollLeft; + } + + element.style.top = top + 'px'; + element.style.left = left + 'px'; + } + + public getHiddenElementOuterHeight(element: any): number { + element.style.visibility = 'hidden'; + element.style.display = 'block'; + let elementHeight = element.offsetHeight; + element.style.display = 'none'; + element.style.visibility = 'visible'; + + return elementHeight; + } + + public getHiddenElementOuterWidth(element: any): number { + element.style.visibility = 'hidden'; + element.style.display = 'block'; + let elementWidth = element.offsetWidth; + element.style.display = 'none'; + element.style.visibility = 'visible'; + + return elementWidth; + } + + public getHiddenElementDimensions(element: any): any { + let dimensions: any = {}; + element.style.visibility = 'hidden'; + element.style.display = 'block'; + dimensions.width = element.offsetWidth; + dimensions.height = element.offsetHeight; + element.style.display = 'none'; + element.style.visibility = 'visible'; + + return dimensions; + } + + public scrollInView(container: any, item: any) { + let borderTopValue: string = + getComputedStyle(container).getPropertyValue('borderTopWidth'); + let borderTop: number = borderTopValue ? parseFloat(borderTopValue) : 0; + let paddingTopValue: string = + getComputedStyle(container).getPropertyValue('paddingTop'); + let paddingTop: number = paddingTopValue ? parseFloat(paddingTopValue) : 0; + let containerRect = container.getBoundingClientRect(); + let itemRect = item.getBoundingClientRect(); + let offset = (itemRect.top + document.body.scrollTop) - + (containerRect.top + document.body.scrollTop) - borderTop - paddingTop; + let scroll = container.scrollTop; + let elementHeight = container.clientHeight; + let itemHeight = this.getOuterHeight(item); + + if (offset < 0) { + container.scrollTop = scroll + offset; + } else if ((offset + itemHeight) > elementHeight) { + container.scrollTop = scroll + offset - elementHeight + itemHeight; + } + } + + public fadeIn(element: any, duration: number): void { + element.style.opacity = 0; + + let last = +new Date(); + let opacity = 0; + let tick = () => { + opacity = + +element.style.opacity + (new Date().getTime() - last) / duration; + element.style.opacity = opacity; + last = +new Date(); + + if (+opacity < 1) { + if (!window.requestAnimationFrame || !requestAnimationFrame(tick)) { + setTimeout(tick, 16); + } + + /*(window.requestAnimationFrame && requestAnimationFrame(tick)) || + setTimeout(tick, 16);*/ + } + }; + + tick(); + } + + public fadeOut(element: any, ms: any) { + let opacity = 1; + let interval = 50; + let duration = ms; + let gap = interval / duration; + + let fading = setInterval(() => { + opacity = opacity - gap; + + if (opacity <= 0) { + opacity = 0; + clearInterval(fading); + } + + element.style.opacity = opacity; + }, interval); + } + + public getWindowScrollTop(): number { + let doc = document.documentElement; + return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + } + + public getWindowScrollLeft(): number { + let doc = document.documentElement; + return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); + } + + public matches(element: any, selector: string): boolean { + let p: any = Element.prototype; + let f: any = p['matches'] || p.webkitMatchesSelector || + p['mozMatchesSelector'] || p.msMatchesSelector || function(s: any) { + return [].indexOf.call(document.querySelectorAll(s), this) !== -1; + }; + return f.call(element, selector); + } + + public getOuterWidth(el: any, margin?: any) { + let width = el.offsetWidth; + + if (margin) { + let style = getComputedStyle(el); + width += parseFloat(style.marginLeft) + parseFloat(style.marginRight); + } + + return width; + } + + public getHorizontalPadding(el: any) { + let style = getComputedStyle(el); + return parseFloat(style.paddingLeft) + parseFloat(style.paddingRight); + } + + public getHorizontalMargin(el: any) { + let style = getComputedStyle(el); + return parseFloat(style.marginLeft) + parseFloat(style.marginRight); + } + + public innerWidth(el: any) { + let width = el.offsetWidth; + let style = getComputedStyle(el); + + width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight); + return width; + } + + public width(el: any) { + let width = el.offsetWidth; + let style = getComputedStyle(el); + + width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight); + return width; + } + + public getOuterHeight(el: any, margin?: any) { + let height = el.offsetHeight; + + if (margin) { + let style = getComputedStyle(el); + height += parseFloat(style.marginTop) + parseFloat(style.marginBottom); + } + + return height; + } + + public getHeight(el: any): number { + let height = el.offsetHeight; + let style = getComputedStyle(el); + + height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); + + return height; + } + + public getWidth(el: any): number { + let width = el.offsetWidth; + let style = getComputedStyle(el); + + width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth); + + return width; + } + + public getViewport(): any { + let win = window; + let d = document; + let e = d.documentElement; + let g = d.getElementsByTagName('body')[0]; + let w = win.innerWidth || e.clientWidth || g.clientWidth; + let h = win.innerHeight || e.clientHeight || g.clientHeight; + + return {width: w, height: h}; + } + + public getOffset(el: any) { + let x = el.offsetLeft; + let y = el.offsetTop; + + while (el = el.offsetParent) { + x += el.offsetLeft; + y += el.offsetTop; + } + + return {left: x, top: y}; + } + + public getUserAgent(): string { + return navigator.userAgent; + } + + public isIE() { + let ua = window.navigator.userAgent; + + let msie = ua.indexOf('MSIE '); + if (msie > 0) { + // IE 10 or older => return version number + return true; + } + + let trident = ua.indexOf('Trident/'); + if (trident > 0) { + // IE 11 => return version number + /* let rv = ua.indexOf('rv:');*/ + return true; + } + + let edge = ua.indexOf('Edge/'); + if (edge > 0) { + // Edge (IE 12+) => return version number + return true; + } + + // other browser + return false; + } + + public appendChild(element: any, target: any) { + if (this.isElement(target)) { + target.appendChild(element); + } else if (target.el && target.el.nativeElement) { + target.el.nativeElement.appendChild(element); + } else { + throw 'Cannot append ' + target + ' to ' + element; + } + } + + public removeChild(element: any, target: any) { + if (this.isElement(target)) { + target.removeChild(element); + } else if (target.el && target.el.nativeElement) { + target.el.nativeElement.removeChild(element); + } else { + throw 'Cannot remove ' + element + ' from ' + target; + } + } + + public isElement(obj: any) { + return ( + typeof HTMLElement === 'object' ? + obj instanceof HTMLElement : + obj && typeof obj === 'object' && obj !== null && + obj.nodeType === 1 && typeof obj.nodeName === 'string'); + } + + public calculateScrollbarWidth(): number { + let scrollDiv = document.createElement('div'); + scrollDiv.className = 'ui-scrollbar-measure'; + document.body.appendChild(scrollDiv); + + let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + document.body.removeChild(scrollDiv); + + return scrollbarWidth; + } +}
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/number-wrapper-parse.ts b/sdc-workflow-designer-ui/src/app/paletx/core/number-wrapper-parse.ts new file mode 100644 index 00000000..ceccd92e --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/number-wrapper-parse.ts @@ -0,0 +1,10 @@ +/* tslint:disable:array-type member-access variable-name */ +export function NumberWrapperParseFloat(text: any) { + if (/^(\-|\+)?[0-9]+$/.test(text)) { + return parseInt(text); + } else if (/^(\-|\+)?[0-9]+\.[0-9]+$/.test(text)) { + return parseFloat(text); + } else { + return 0; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/fullscreen-overlay-container.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/fullscreen-overlay-container.ts new file mode 100644 index 00000000..0eca202d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/fullscreen-overlay-container.ts @@ -0,0 +1,62 @@ +/** + * @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*/ +import {Injectable} from '@angular/core'; +import {OverlayContainer} from './overlay-container'; + +/** + * The FullscreenOverlayContainer is the alternative to OverlayContainer + * that supports correct displaying of overlay elements in Fullscreen mode + * https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen + * It should be provided in the root component that way: + * providers: [ + * {provide: OverlayContainer, useClass: FullscreenOverlayContainer} + * ], + */ +@Injectable() +export class FullscreenOverlayContainer extends OverlayContainer { + protected _createContainer(): void { + super._createContainer(); + this._adjustParentForFullscreenChange(); + this._addFullscreenChangeListener( + () => this._adjustParentForFullscreenChange()); + } + + private _adjustParentForFullscreenChange(): void { + if (!this._containerElement) { + return; + } + const fullscreenElement = this.getFullscreenElement(); + const parent = fullscreenElement || document.body; + parent.appendChild(this._containerElement); + } + + private _addFullscreenChangeListener(fn: () => void) { + if (document.fullscreenEnabled) { + document.addEventListener('fullscreenchange', fn); + } else if (document.webkitFullscreenEnabled) { + document.addEventListener('webkitfullscreenchange', fn); + } else if ((document as any).mozFullScreenEnabled) { + document.addEventListener('mozfullscreenchange', fn); + } else if ((document as any).msFullscreenEnabled) { + document.addEventListener('MSFullscreenChange', fn); + } + } + + /** + * When the page is put into fullscreen mode, a specific element is specified. + * Only that element and its children are visible when in fullscreen mode. + */ + getFullscreenElement(): Element { + return document.fullscreenElement || document.webkitFullscreenElement || + (document as any).mozFullScreenElement || + (document as any).msFullscreenElement || null; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/generic-component-type.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/generic-component-type.ts new file mode 100644 index 00000000..523bd428 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/generic-component-type.ts @@ -0,0 +1,9 @@ +/** + * @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 + */ + +export interface ComponentType<T> { new(...args: any[]): T; } diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/index.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/index.ts new file mode 100644 index 00000000..e02bc3cc --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/index.ts @@ -0,0 +1,49 @@ +/** + * @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 {NgModule, Provider} from '@angular/core'; + +import {Overlay} from './overlay'; +import {OVERLAY_CONTAINER_PROVIDER} from './overlay-container'; +import {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives'; +import {OverlayPositionBuilder} from './position/overlay-position-builder'; +import {VIEWPORT_RULER_PROVIDER} from './position/viewport-ruler'; +import {ScrollDispatchModule} from './scroll/index'; + + +export const OVERLAY_PROVIDERS: Provider[] = [ + Overlay, + OverlayPositionBuilder, + VIEWPORT_RULER_PROVIDER, + OVERLAY_CONTAINER_PROVIDER, +]; + +@NgModule({ + imports: [ScrollDispatchModule], + exports: [ConnectedOverlayDirective, OverlayOrigin, ScrollDispatchModule], + declarations: [ConnectedOverlayDirective, OverlayOrigin], + providers: [OVERLAY_PROVIDERS], +}) +export class OverlayModule { +} + + +export {Overlay} from './overlay'; +export {OverlayContainer} from './overlay-container'; +export {FullscreenOverlayContainer} from './fullscreen-overlay-container'; +export {OverlayRef} from './overlay-ref'; +export {OverlayState} from './overlay-state'; +export {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives'; +export {ViewportRuler} from './position/viewport-ruler'; + +export * from './position/connected-position'; +export * from './scroll/index'; + +// Export pre-defined position strategies and interface to build custom ones. +export {PositionStrategy} from './position/position-strategy'; +export {GlobalPositionStrategy} from './position/global-position-strategy'; +export {ConnectedPositionStrategy} from './position/connected-position-strategy'; diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-container.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-container.ts new file mode 100644 index 00000000..fbb37c7e --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-container.ts @@ -0,0 +1,83 @@ +/** + * @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*/ +import {Injectable, Optional, SkipSelf} from '@angular/core'; + + +/** + * The OverlayContainer is the container in which all overlays will load. + * It should be provided in the root component to ensure it is properly shared. + */ +@Injectable() +export class OverlayContainer { + protected _containerElement: HTMLElement; + + private _themeClass: string; + + /** + * Base theme to be applied to all overlay-based components. + */ + get themeClass(): string { + return this._themeClass; + } + set themeClass(value: string) { + if (this._containerElement) { + this._containerElement.classList.remove(this._themeClass); + + if (value) { + this._containerElement.classList.add(value); + } + } + + this._themeClass = value; + } + + /** + * This method returns the overlay container element. It will lazily + * create the element the first time it is called to facilitate using + * the container in non-browser environments. + * @returns the container element + */ + getContainerElement(): HTMLElement { + if (!this._containerElement) { + this._createContainer(); + } + return this._containerElement; + } + + /** + * Create the overlay container element, which is simply a div + * with the 'cdk-overlay-container' class on the document body. + */ + protected _createContainer(): void { + const container = document.createElement('div'); + container.classList.add('nz-overlay-container'); + + if (this._themeClass) { + container.classList.add(this._themeClass); + } + + document.body.appendChild(container); + this._containerElement = container; + } +} + +export function OVERLAY_CONTAINER_PROVIDER_FACTORY( + parentContainer: OverlayContainer) { + return parentContainer || new OverlayContainer(); +} + +export const OVERLAY_CONTAINER_PROVIDER = { + // If there is already an OverlayContainer available, use that. Otherwise, + // provide a new one. + provide: OverlayContainer, + deps: [[new Optional(), new SkipSelf(), OverlayContainer]], + useFactory: OVERLAY_CONTAINER_PROVIDER_FACTORY +}; 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(); + } + }); + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-position-map.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-position-map.ts new file mode 100644 index 00000000..8ce53850 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-position-map.ts @@ -0,0 +1,124 @@ +/* tslint:disable:array-type member-access variable-name typedef + only-arrow-functions directive-class-suffix component-class-suffix + component-selector one-variable-per-declaration + no-attribute-parameter-decorator*/ +import {ConnectionPositionPair} from './index'; + +export const POSITION_MAP: any = { + 'top': { + originX: 'center', + originY: 'top', + overlayX: 'center', + overlayY: 'bottom' + }, + 'topCenter': { + originX: 'center', + originY: 'top', + overlayX: 'center', + overlayY: 'bottom' + }, + 'topLeft': + {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}, + 'topRight': + {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom'}, + 'right': { + originX: 'end', + originY: 'center', + overlayX: 'start', + overlayY: 'center', + }, + 'rightTop': { + originX: 'end', + originY: 'top', + overlayX: 'start', + overlayY: 'top', + }, + 'rightBottom': { + originX: 'end', + originY: 'bottom', + overlayX: 'start', + overlayY: 'bottom', + }, + 'bottom': { + originX: 'center', + originY: 'bottom', + overlayX: 'center', + overlayY: 'top', + }, + 'bottomCenter': { + originX: 'center', + originY: 'bottom', + overlayX: 'center', + overlayY: 'top', + }, + 'bottomLeft': { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'top', + }, + 'bottomRight': { + originX: 'end', + originY: 'bottom', + overlayX: 'end', + overlayY: 'top', + }, + 'left': { + originX: 'start', + originY: 'center', + overlayX: 'end', + overlayY: 'center', + }, + 'leftTop': { + originX: 'start', + originY: 'top', + overlayX: 'end', + overlayY: 'top', + }, + 'leftBottom': { + originX: 'start', + originY: 'bottom', + overlayX: 'end', + overlayY: 'bottom', + }, +}; +export const DEFAULT_4_POSITIONS = _objectValues([ + POSITION_MAP['top'], POSITION_MAP['right'], POSITION_MAP['bottom'], + POSITION_MAP['left'] +]); +export const DEFAULT_DROPDOWN_POSITIONS = + _objectValues([POSITION_MAP['bottomLeft'], POSITION_MAP['topLeft']]); +export const DEFAULT_DATEPICKER_POSITIONS = [ + { + originX: 'start', + originY: 'top', + overlayX: 'start', + overlayY: 'top', + }, + { + originX: 'start', + originY: 'bottom', + overlayX: 'start', + overlayY: 'bottom', + } +] as ConnectionPositionPair[]; + +function arrayMap(array: any, iteratee: any) { + let index = -1; + const length = array === null ? 0 : array.length, result = Array(length); + + while (++index < length) { + result[index] = iteratee(array[index], index, array); + } + return result; +} + +function baseValues(object: any, props: any) { + return arrayMap(props, function(key: any) { + return object[key]; + }); +} + +function _objectValues(object: any) { + return object === null ? [] : baseValues(object, Object.keys(object)); +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-ref.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-ref.ts new file mode 100644 index 00000000..03c8c2b5 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-ref.ts @@ -0,0 +1,271 @@ +/** + * @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 + promise-function-async*/ +import {Portal, PortalHost} from '@angular/cdk'; +import {NgZone} from '@angular/core'; +import {Observable} from 'rxjs/Observable'; +import {Subject} from 'rxjs/Subject'; + +import {OverlayState} from './overlay-state'; +import {ScrollStrategy} from './scroll/scroll-strategy'; + + +/** + * Reference to an overlay that has been created with the Overlay service. + * Used to manipulate or dispose of said overlay. + */ +export class OverlayRef implements PortalHost { + private _backdropElement: HTMLElement|null = null; + private _backdropClick: Subject<any> = new Subject(); + private _attachments = new Subject<void>(); + private _detachments = new Subject<void>(); + + constructor( + private _portalHost: PortalHost, private _pane: HTMLElement, + private _state: OverlayState, private _scrollStrategy: ScrollStrategy, + private _ngZone: NgZone) { + _scrollStrategy.attach(this); + } + + /** The overlay's HTML element */ + get overlayElement(): HTMLElement { + return this._pane; + } + + /** + * Attaches the overlay to a portal instance and adds the backdrop. + * @param portal Portal instance to which to attach the overlay. + * @returns The portal attachment result. + */ + attach(portal: Portal<any>): any { + const attachResult = this._portalHost.attach(portal); + + // Update the pane element with the given state configuration. + this._updateStackingOrder(); + this.updateSize(); + this.updateDirection(); + this.updatePosition(); + this._scrollStrategy.enable(); + + // Enable pointer events for the overlay pane element. + this._togglePointerEvents(true); + + if (this._state.hasBackdrop) { + this._attachBackdrop(); + } + + if (this._state.panelClass) { + this._pane.classList.add(this._state.panelClass); + } + + // Only emit the `attachments` event once all other setup is done. + this._attachments.next(); + + return attachResult; + } + + /** + * Detaches an overlay from a portal. + * @returns Resolves when the overlay has been detached. + */ + detach(): Promise<any> { + this.detachBackdrop(); + + // When the overlay is detached, the pane element should disable pointer + // events. This is necessary because otherwise the pane element will cover + // the page and disable pointer events therefore. Depends on the position + // strategy and the applied pane boundaries. + this._togglePointerEvents(false); + this._scrollStrategy.disable(); + + const detachmentResult = this._portalHost.detach(); + + // Only emit after everything is detached. + this._detachments.next(); + + return detachmentResult; + } + + /** + * Cleans up the overlay from the DOM. + */ + dispose(): void { + if (this._state.positionStrategy) { + this._state.positionStrategy.dispose(); + } + + if (this._scrollStrategy) { + this._scrollStrategy.disable(); + } + + this.detachBackdrop(); + this._portalHost.dispose(); + this._attachments.complete(); + this._backdropClick.complete(); + this._detachments.next(); + this._detachments.complete(); + } + + /** + * Checks whether the overlay has been attached. + */ + hasAttached(): boolean { + return this._portalHost.hasAttached(); + } + + /** + * Returns an observable that emits when the backdrop has been clicked. + */ + backdropClick(): Observable<void> { + return this._backdropClick.asObservable(); + } + + /** Returns an observable that emits when the overlay has been attached. */ + attachments(): Observable<void> { + return this._attachments.asObservable(); + } + + /** Returns an observable that emits when the overlay has been detached. */ + detachments(): Observable<void> { + return this._detachments.asObservable(); + } + + /** + * Gets the current state config of the overlay. + */ + getState(): OverlayState { + return this._state; + } + + /** Updates the position of the overlay based on the position strategy. */ + updatePosition() { + if (this._state.positionStrategy) { + this._state.positionStrategy.apply(this._pane); + } + } + + /** Updates the text direction of the overlay panel. */ + private updateDirection() { + this._pane.setAttribute('dir', this._state.direction); + } + + + /** Updates the size of the overlay based on the overlay config. */ + updateSize() { + if (this._state.width || this._state.width === 0) { + this._pane.style.width = formatCssUnit(this._state.width); + } + + if (this._state.height || this._state.height === 0) { + this._pane.style.height = formatCssUnit(this._state.height); + } + + if (this._state.minWidth || this._state.minWidth === 0) { + this._pane.style.minWidth = formatCssUnit(this._state.minWidth); + } + + if (this._state.minHeight || this._state.minHeight === 0) { + this._pane.style.minHeight = formatCssUnit(this._state.minHeight); + } + } + + /** Toggles the pointer events for the overlay pane element. */ + private _togglePointerEvents(enablePointer: boolean) { + this._pane.style.pointerEvents = enablePointer ? 'auto' : 'none'; + } + + /** Attaches a backdrop for this overlay. */ + private _attachBackdrop() { + this._backdropElement = document.createElement('div'); + this._backdropElement.classList.add('nz-overlay-backdrop'); + + if (this._state.backdropClass) { + this._backdropElement.classList.add(this._state.backdropClass); + } + + // Insert the backdrop before the pane in the DOM order, + // in order to handle stacked overlays properly. + this._pane.parentElement.insertBefore(this._backdropElement, this._pane); + + // Forward backdrop clicks such that the consumer of the overlay can perform + // whatever action desired when such a click occurs (usually closing the + // overlay). + this._backdropElement.addEventListener( + 'click', () => this._backdropClick.next(null)); + + // Add class to fade-in the backdrop after one frame. + requestAnimationFrame(() => { + if (this._backdropElement) { + this._backdropElement.classList.add('nz-overlay-backdrop-showing'); + } + }); + } + + /** + * Updates the stacking order of the element, moving it to the top if + * necessary. This is required in cases where one overlay was detached, while + * another one, that should be behind it, was destroyed. The next time both of + * them are opened, the stacking will be wrong, because the detached element's + * pane will still be in its original DOM position. + */ + private _updateStackingOrder() { + if (this._pane.nextSibling) { + this._pane.parentNode.appendChild(this._pane); + } + } + + /** Detaches the backdrop (if any) associated with the overlay. */ + detachBackdrop(): void { + const backdropToDetach = this._backdropElement; + + if (backdropToDetach) { + const finishDetach = () => { + // It may not be attached to anything in certain cases (e.g. unit + // tests). + if (backdropToDetach && backdropToDetach.parentNode) { + backdropToDetach.parentNode.removeChild(backdropToDetach); + } + + // It is possible that a new portal has been attached to this overlay + // since we started removing the backdrop. If that is the case, only + // clear the backdrop reference if it is still the same instance that we + // started to remove. + if (this._backdropElement === backdropToDetach) { + this._backdropElement = null; + } + }; + + backdropToDetach.classList.remove('nz-overlay-backdrop-showing'); + + if (this._state.backdropClass) { + backdropToDetach.classList.remove(this._state.backdropClass); + } + + backdropToDetach.addEventListener('transitionend', finishDetach); + + // If the backdrop doesn't have a transition, the `transitionend` event + // won't fire. In this case we make it unclickable and we try to remove it + // after a delay. + backdropToDetach.style.pointerEvents = 'none'; + + // Run this outside the Angular zone because there's nothing that Angular + // cares about. If it were to run inside the Angular zone, every test that + // used Overlay would have to be either async or fakeAsync. + this._ngZone.runOutsideAngular(() => { + setTimeout(finishDetach, 500); + }); + } + } +} + +function formatCssUnit(value: number|string) { + return typeof value === 'string' ? value as string : `${value}px`; +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-state.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-state.ts new file mode 100644 index 00000000..73d6b54d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay-state.ts @@ -0,0 +1,61 @@ +/** + * @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*/ +import {Direction} from '@angular/cdk'; + +import {PositionStrategy} from './position/position-strategy'; +import {ScrollStrategy} from './scroll/scroll-strategy'; + + +/** + * OverlayState is a bag of values for either the initial configuration or + * current state of an overlay. + */ +export class OverlayState { + /** Strategy with which to position the overlay. */ + positionStrategy: PositionStrategy; + + /** Strategy to be used when handling scroll events while the overlay is open. + */ + scrollStrategy: ScrollStrategy; + + /** Custom class to add to the overlay pane. */ + panelClass = ''; + + /** Whether the overlay has a backdrop. */ + hasBackdrop = false; + + /** Custom class to add to the backdrop */ + backdropClass = 'cdk-overlay-dark-backdrop'; + + /** The width of the overlay panel. If a number is provided, pixel units are + * assumed. */ + width?: number|string; + + /** The height of the overlay panel. If a number is provided, pixel units are + * assumed. */ + height?: number|string; + + /** The min-width of the overlay panel. If a number is provided, pixel units + * are assumed. */ + minWidth?: number|string; + + /** The min-height of the overlay panel. If a number is provided, pixel units + * are assumed. */ + minHeight?: number|string; + + /** The direction of the text in the overlay panel. */ + direction?: Direction = 'ltr'; + + // TODO(jelbourn): configuration still to add + // - focus trap + // - disable pointer events + // - z-index +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay.ts new file mode 100644 index 00000000..5995201b --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/overlay.ts @@ -0,0 +1,109 @@ +/** + * @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 {DomPortalHost} from '@angular/cdk'; +import {ApplicationRef, ComponentFactoryResolver, Injectable, Injector, NgZone} from '@angular/core'; + +import {OverlayContainer} from './overlay-container'; +import {OverlayRef} from './overlay-ref'; +import {OverlayState} from './overlay-state'; +import {OverlayPositionBuilder} from './position/overlay-position-builder'; +import {ScrollStrategyOptions} from './scroll/index'; + + +/** Next overlay unique ID. */ +let nextUniqueId = 0; + +/** The default state for newly created overlays. */ +const defaultState = new OverlayState(); + + +/** + * Service to create Overlays. Overlays are dynamically added pieces of floating + * UI, meant to be used as a low-level building building block for other + * components. Dialogs, tooltips, menus, selects, etc. can all be built using + * overlays. The service should primarily be used by authors of re-usable + * components rather than developers building end-user applications. + * + * An overlay *is* a PortalHost, so any kind of Portal can be loaded into one. + */ +@Injectable() +export class Overlay { + constructor( + public scrollStrategies: ScrollStrategyOptions, + private _overlayContainer: OverlayContainer, + private _componentFactoryResolver: ComponentFactoryResolver, + private _positionBuilder: OverlayPositionBuilder, + private _appRef: ApplicationRef, private _injector: Injector, + private _ngZone: NgZone) {} + + /** + * Creates an overlay. + * @param state State to apply to the overlay. + * @returns Reference to the created overlay. + */ + create(state: OverlayState = defaultState, paneClassName?: string): + OverlayRef { + return this._createOverlayRef( + this._createPaneElement(paneClassName), state); + } + + /** + * Returns a position builder that can be used, via fluent API, + * to construct and configure a position strategy. + */ + position(): OverlayPositionBuilder { + return this._positionBuilder; + } + + /** + * Creates the DOM element for an overlay and appends it to the overlay + * container. + * @returns Newly-created pane element + */ + private _createPaneElement(className?: string): HTMLElement { + const pane = document.createElement('div'); + + pane.id = `nz-overlay-${nextUniqueId++}`; + pane.classList.add('nz-overlay-pane'); + if (className) { + const classList = className.split(' '); + classList.forEach(c => { + pane.classList.add(c); + }); + } + this._overlayContainer.getContainerElement().appendChild(pane); + + return pane; + } + + /** + * Create a DomPortalHost into which the overlay content can be loaded. + * @param pane The DOM element to turn into a portal host. + * @returns A portal host for the given DOM element. + */ + private _createPortalHost(pane: HTMLElement): DomPortalHost { + return new DomPortalHost( + pane, this._componentFactoryResolver, this._appRef, this._injector); + } + + /** + * Creates an OverlayRef for an overlay in the given DOM element. + * @param pane DOM element for the overlay + * @param state + */ + private _createOverlayRef(pane: HTMLElement, state: OverlayState): + OverlayRef { + const scrollStrategy = state.scrollStrategy || this.scrollStrategies.noop(); + const portalHost = this._createPortalHost(pane); + return new OverlayRef( + portalHost, pane, state, scrollStrategy, this._ngZone); + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/connected-position-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/connected-position-strategy.ts new file mode 100644 index 00000000..d144c81f --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/connected-position-strategy.ts @@ -0,0 +1,478 @@ +/** + * @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 + no-unused-variable*/ +import {ElementRef} from '@angular/core'; +import {Observable} from 'rxjs/Observable'; +import {Subject} from 'rxjs/Subject'; + +import {Scrollable} from '../scroll/scrollable'; + +import {ConnectedOverlayPositionChange, ConnectionPositionPair, OriginConnectionPosition, OverlayConnectionPosition, ScrollableViewProperties} from './connected-position'; +import {PositionStrategy} from './position-strategy'; +import {ViewportRuler} from './viewport-ruler'; + +/** + * Container to hold the bounding positions of a particular element with respect + * to the viewport, where top and bottom are the y-axis coordinates of the + * bounding rectangle and left and right are the x-axis coordinates. + */ +interface ElementBoundingPositions { + top: number; + right: number; + bottom: number; + left: number; +} + +/** + * A strategy for positioning overlays. Using this strategy, an overlay is given + * an implicit position relative some origin element. The relative position is + * defined in terms of a point on the origin element that is connected to a + * point on the overlay element. For example, a basic dropdown is connecting the + * bottom-left corner of the origin to the top-left corner of the overlay. + */ +export class ConnectedPositionStrategy implements PositionStrategy { + private _dir = 'ltr'; + + /** The offset in pixels for the overlay connection point on the x-axis */ + private _offsetX = 0; + + /** The offset in pixels for the overlay connection point on the y-axis */ + private _offsetY = 0; + + /** The Scrollable containers used to check scrollable view properties on + * position change. */ + private scrollables: Scrollable[] = []; + + /** Whether the we're dealing with an RTL context */ + get _isRtl() { + return this._dir === 'rtl'; + } + + /** Ordered list of preferred positions, from most to least desirable. */ + _preferredPositions: ConnectionPositionPair[] = []; + + /** The origin element against which the overlay will be positioned. */ + private _origin: HTMLElement; + + /** The overlay pane element. */ + private _pane: HTMLElement; + + /** The last position to have been calculated as the best fit position. */ + private _lastConnectedPosition: ConnectionPositionPair; + + _onPositionChange: Subject<ConnectedOverlayPositionChange> = + new Subject<ConnectedOverlayPositionChange>(); + + /** Emits an event when the connection point changes. */ + get onPositionChange(): Observable<ConnectedOverlayPositionChange> { + return this._onPositionChange.asObservable(); + } + + constructor( + private _connectedTo: ElementRef, + private _originPos: OriginConnectionPosition, + private _overlayPos: OverlayConnectionPosition, + private _viewportRuler: ViewportRuler) { + this._origin = this._connectedTo.nativeElement; + this.withFallbackPosition(this._originPos, this._overlayPos); + } + + /** Ordered list of preferred positions, from most to least desirable. */ + get positions() { + return this._preferredPositions; + } + + /** + * To be used to for any cleanup after the element gets destroyed. + */ + dispose() { + // + } + + /** + * Updates the position of the overlay element, using whichever preferred + * position relative to the origin fits on-screen. + * @docs-private + * + * @param element Element to which to apply the CSS styles. + * @returns Resolves when the styles have been applied. + */ + apply(element: HTMLElement): void { + // Cache the overlay pane element in case re-calculating position is + // necessary + this._pane = element; + + // We need the bounding rects for the origin and the overlay to determine + // how to position the overlay relative to the origin. + const originRect = this._origin.getBoundingClientRect(); + const overlayRect = element.getBoundingClientRect(); + + // We use the viewport rect to determine whether a position would go + // off-screen. + const viewportRect = this._viewportRuler.getViewportRect(); + + // Fallback point if none of the fallbacks fit into the viewport. + let fallbackPoint: OverlayPoint|undefined; + let fallbackPosition: ConnectionPositionPair|undefined; + + // We want to place the overlay in the first of the preferred positions such + // that the overlay fits on-screen. + for (const pos of this._preferredPositions) { + // Get the (x, y) point of connection on the origin, and then use that to + // get the (top, left) coordinate for the overlay at `pos`. + const originPoint = this._getOriginConnectionPoint(originRect, pos); + const overlayPoint = + this._getOverlayPoint(originPoint, overlayRect, viewportRect, pos); + + // If the overlay in the calculated position fits on-screen, put it there + // and we're done. + if (overlayPoint.fitsInViewport) { + this._setElementPosition(element, overlayRect, overlayPoint, pos); + + // Save the last connected position in case the position needs to be + // re-calculated. + this._lastConnectedPosition = pos; + + // Notify that the position has been changed along with its change + // properties. + const scrollableViewProperties = + this.getScrollableViewProperties(element); + const positionChange = + new ConnectedOverlayPositionChange(pos, scrollableViewProperties); + this._onPositionChange.next(positionChange); + + return; + } else if ( + !fallbackPoint || + fallbackPoint.visibleArea < overlayPoint.visibleArea) { + fallbackPoint = overlayPoint; + fallbackPosition = pos; + } + } + + // If none of the preferred positions were in the viewport, take the one + // with the largest visible area. + this._setElementPosition( + element, overlayRect, fallbackPoint, fallbackPosition); + } + + /** + * This re-aligns the overlay element with the trigger in its last calculated + * position, even if a position higher in the "preferred positions" list would + * now fit. This allows one to re-align the panel without changing the + * orientation of the panel. + */ + recalculateLastPosition(): void { + const originRect = this._origin.getBoundingClientRect(); + const overlayRect = this._pane.getBoundingClientRect(); + const viewportRect = this._viewportRuler.getViewportRect(); + const lastPosition = + this._lastConnectedPosition || this._preferredPositions[0]; + + const originPoint = + this._getOriginConnectionPoint(originRect, lastPosition); + const overlayPoint = this._getOverlayPoint( + originPoint, overlayRect, viewportRect, lastPosition); + this._setElementPosition( + this._pane, overlayRect, overlayPoint, lastPosition); + } + + /** + * Sets the list of Scrollable containers that host the origin element so that + * on reposition we can evaluate if it or the overlay has been clipped or + * outside view. Every Scrollable must be an ancestor element of the + * strategy's origin element. + */ + withScrollableContainers(scrollables: Scrollable[]) { + this.scrollables = scrollables; + } + + /** + * Adds a new preferred fallback position. + * @param originPos + * @param overlayPos + */ + withFallbackPosition( + originPos: OriginConnectionPosition, + overlayPos: OverlayConnectionPosition): this { + this._preferredPositions.push( + new ConnectionPositionPair(originPos, overlayPos)); + return this; + } + + /** + * Sets the layout direction so the overlay's position can be adjusted to + * match. + * @param dir New layout direction. + */ + withDirection(dir: 'ltr'|'rtl'): this { + this._dir = dir; + return this; + } + + /** + * Sets an offset for the overlay's connection point on the x-axis + * @param offset New offset in the X axis. + */ + withOffsetX(offset: number): this { + this._offsetX = offset; + return this; + } + + /** + * Sets an offset for the overlay's connection point on the y-axis + * @param offset New offset in the Y axis. + */ + withOffsetY(offset: number): this { + this._offsetY = offset; + return this; + } + + /** + * Gets the horizontal (x) "start" dimension based on whether the overlay is + * in an RTL context. + * @param rect + */ + private _getStartX(rect: ClientRect): number { + return this._isRtl ? rect.right : rect.left; + } + + /** + * Gets the horizontal (x) "end" dimension based on whether the overlay is in + * an RTL context. + * @param rect + */ + private _getEndX(rect: ClientRect): number { + return this._isRtl ? rect.left : rect.right; + } + + + /** + * Gets the (x, y) coordinate of a connection point on the origin based on a + * relative position. + * @param originRect + * @param pos + */ + private _getOriginConnectionPoint( + originRect: ClientRect, pos: ConnectionPositionPair): Point { + const originStartX = this._getStartX(originRect); + const originEndX = this._getEndX(originRect); + + let x: number; + if (pos.originX === 'center') { + x = originStartX + (originRect.width / 2); + } else { + x = pos.originX === 'start' ? originStartX : originEndX; + } + + let y: number; + if (pos.originY === 'center') { + y = originRect.top + (originRect.height / 2); + } else { + y = pos.originY === 'top' ? originRect.top : originRect.bottom; + } + + return {x, y}; + } + + + /** + * Gets the (x, y) coordinate of the top-left corner of the overlay given a + * given position and origin point to which the overlay should be connected, + * as well as how much of the element would be inside the viewport at that + * position. + */ + private _getOverlayPoint( + originPoint: Point, overlayRect: ClientRect, viewportRect: ClientRect, + pos: ConnectionPositionPair): OverlayPoint { + // Calculate the (overlayStartX, overlayStartY), the start of the potential + // overlay position relative to the origin point. + let overlayStartX: number; + if (pos.overlayX === 'center') { + overlayStartX = -overlayRect.width / 2; + } else if (pos.overlayX === 'start') { + overlayStartX = this._isRtl ? -overlayRect.width : 0; + } else { + overlayStartX = this._isRtl ? 0 : -overlayRect.width; + } + + let overlayStartY: number; + if (pos.overlayY === 'center') { + overlayStartY = -overlayRect.height / 2; + } else { + overlayStartY = pos.overlayY === 'top' ? 0 : -overlayRect.height; + } + + // The (x, y) coordinates of the overlay. + const x = originPoint.x + overlayStartX + this._offsetX; + const y = originPoint.y + overlayStartY + this._offsetY; + + // How much the overlay would overflow at this position, on each side. + const leftOverflow = 0 - x; + const rightOverflow = (x + overlayRect.width) - viewportRect.width; + const topOverflow = 0 - y; + const bottomOverflow = (y + overlayRect.height) - viewportRect.height; + + // Visible parts of the element on each axis. + const visibleWidth = + this._subtractOverflows(overlayRect.width, leftOverflow, rightOverflow); + const visibleHeight = this._subtractOverflows( + overlayRect.height, topOverflow, bottomOverflow); + + // The area of the element that's within the viewport. + const visibleArea = visibleWidth * visibleHeight; + const fitsInViewport = + (overlayRect.width * overlayRect.height) === visibleArea; + + return {x, y, fitsInViewport, visibleArea}; + } + + /** + * Gets the view properties of the trigger and overlay, including whether they + * are clipped or completely outside the view of any of the strategy's + * scrollables. + */ + private getScrollableViewProperties(overlay: HTMLElement): + ScrollableViewProperties { + const originBounds = this._getElementBounds(this._origin); + const overlayBounds = this._getElementBounds(overlay); + const scrollContainerBounds = + this.scrollables.map((scrollable: Scrollable) => { + return this._getElementBounds( + scrollable.getElementRef().nativeElement); + }); + + return { + isOriginClipped: + this.isElementClipped(originBounds, scrollContainerBounds), + isOriginOutsideView: + this.isElementOutsideView(originBounds, scrollContainerBounds), + isOverlayClipped: + this.isElementClipped(overlayBounds, scrollContainerBounds), + isOverlayOutsideView: + this.isElementOutsideView(overlayBounds, scrollContainerBounds), + }; + } + + /** Whether the element is completely out of the view of any of the + * containers. */ + private isElementOutsideView( + elementBounds: ElementBoundingPositions, + containersBounds: ElementBoundingPositions[]): boolean { + return containersBounds.some( + (containerBounds: ElementBoundingPositions) => { + const outsideAbove = elementBounds.bottom < containerBounds.top; + const outsideBelow = elementBounds.top > containerBounds.bottom; + const outsideLeft = elementBounds.right < containerBounds.left; + const outsideRight = elementBounds.left > containerBounds.right; + + return outsideAbove || outsideBelow || outsideLeft || outsideRight; + }); + } + + /** Whether the element is clipped by any of the containers. */ + private isElementClipped( + elementBounds: ElementBoundingPositions, + containersBounds: ElementBoundingPositions[]): boolean { + return containersBounds.some( + (containerBounds: ElementBoundingPositions) => { + const clippedAbove = elementBounds.top < containerBounds.top; + const clippedBelow = elementBounds.bottom > containerBounds.bottom; + const clippedLeft = elementBounds.left < containerBounds.left; + const clippedRight = elementBounds.right > containerBounds.right; + + return clippedAbove || clippedBelow || clippedLeft || clippedRight; + }); + } + + /** Physically positions the overlay element to the given coordinate. */ + private _setElementPosition( + element: HTMLElement, overlayRect: ClientRect, overlayPoint: Point, + pos: ConnectionPositionPair) { + // We want to set either `top` or `bottom` based on whether the overlay + // wants to appear above or below the origin and the direction in which the + // element will expand. + const verticalStyleProperty = pos.overlayY === 'bottom' ? 'bottom' : 'top'; + + // When using `bottom`, we adjust the y position such that it is the + // distance from the bottom of the viewport rather than the top. + const y = verticalStyleProperty === 'top' ? + overlayPoint.y : + document.documentElement.clientHeight - + (overlayPoint.y + overlayRect.height); + + // We want to set either `left` or `right` based on whether the overlay + // wants to appear "before" or "after" the origin, which determines the + // direction in which the element will expand. For the horizontal axis, the + // meaning of "before" and "after" change based on whether the page is in + // RTL or LTR. + let horizontalStyleProperty: any; + if (this._dir === 'rtl') { + horizontalStyleProperty = pos.overlayX === 'end' ? 'left' : 'right'; + } else { + horizontalStyleProperty = pos.overlayX === 'end' ? 'right' : 'left'; + } + + // When we're setting `right`, we adjust the x position such that it is the + // distance from the right edge of the viewport rather than the left edge. + const x = horizontalStyleProperty === 'left' ? + overlayPoint.x : + document.documentElement.clientWidth - + (overlayPoint.x + overlayRect.width); + + + // Reset any existing styles. This is necessary in case the preferred + // position has changed since the last `apply`. + ['top', 'bottom', 'left', 'right'].forEach( + (p: any) => element.style[p] = null); + + element.style[verticalStyleProperty] = `${y}px`; + element.style[horizontalStyleProperty] = `${x}px`; + } + + /** Returns the bounding positions of the provided element with respect to the + * viewport. */ + private _getElementBounds(element: HTMLElement): ElementBoundingPositions { + const boundingClientRect = element.getBoundingClientRect(); + return { + top: boundingClientRect.top, + right: boundingClientRect.left + boundingClientRect.width, + bottom: boundingClientRect.top + boundingClientRect.height, + left: boundingClientRect.left + }; + } + + /** + * Subtracts the amount that an element is overflowing on an axis from it's + * length. + */ + private _subtractOverflows(length: number, ...overflows: number[]): number { + return overflows.reduce((currentValue: number, currentOverflow: number) => { + return currentValue - Math.max(currentOverflow, 0); + }, length); + } +} + +/** A simple (x, y) coordinate. */ +interface Point { + x: number; + y: number; +} + +/** + * Expands the simple (x, y) coordinate by adding info about whether the + * element would fit inside the viewport at that position, as well as + * how much of the element would be visible. + */ +interface OverlayPoint extends Point { + visibleArea: number; + fitsInViewport: boolean; +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/connected-position.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/connected-position.ts new file mode 100644 index 00000000..dad3f04e --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/connected-position.ts @@ -0,0 +1,87 @@ +/** + * @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*/ +/** Horizontal dimension of a connection point on the perimeter of the origin or + * overlay element. */ +import {Optional} from '@angular/core'; +export type HorizontalConnectionPos = 'start' | 'center' | 'end'; + +/** Vertical dimension of a connection point on the perimeter of the origin or + * overlay element. */ +export type VerticalConnectionPos = 'top' | 'center' | 'bottom'; + + +/** A connection point on the origin element. */ +export interface OriginConnectionPosition { + originX: HorizontalConnectionPos; + originY: VerticalConnectionPos; +} + +/** A connection point on the overlay element. */ +export interface OverlayConnectionPosition { + overlayX: HorizontalConnectionPos; + overlayY: VerticalConnectionPos; +} + +/** The points of the origin element and the overlay element to connect. */ +export class ConnectionPositionPair { + originX: HorizontalConnectionPos; + originY: VerticalConnectionPos; + overlayX: HorizontalConnectionPos; + overlayY: VerticalConnectionPos; + + constructor( + origin: OriginConnectionPosition, overlay: OverlayConnectionPosition) { + this.originX = origin.originX; + this.originY = origin.originY; + this.overlayX = overlay.overlayX; + this.overlayY = overlay.overlayY; + } +} + +/** + * Set of properties regarding the position of the origin and overlay relative + * to the viewport with respect to the containing Scrollable elements. + * + * The overlay and origin are clipped if any part of their bounding client + * rectangle exceeds the bounds of any one of the strategy's Scrollable's + * bounding client rectangle. + * + * The overlay and origin are outside view if there is no overlap between their + * bounding client rectangle and any one of the strategy's Scrollable's bounding + * client rectangle. + * + * ----------- ----------- + * | outside | | clipped | + * | view | -------------------------- + * | | | | | | + * ---------- | ----------- | + * -------------------------- | | + * | | | Scrollable | + * | | | | + * | | -------------------------- + * | Scrollable | + * | | + * -------------------------- + */ +export class ScrollableViewProperties { + isOriginClipped: boolean; + isOriginOutsideView: boolean; + isOverlayClipped: boolean; + isOverlayOutsideView: boolean; +} + +/** The change event emitted by the strategy when a fallback position is used. + */ +export class ConnectedOverlayPositionChange { + constructor( + public connectionPair: ConnectionPositionPair, + @Optional() public scrollableViewProperties: ScrollableViewProperties) {} +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/fake-viewport-ruler.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/fake-viewport-ruler.ts new file mode 100644 index 00000000..698aed1d --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/fake-viewport-ruler.ts @@ -0,0 +1,25 @@ +/** + * @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 + */ + +/** @docs-private */ +export class FakeViewportRuler { + getViewportRect() { + return { + left: 0, + top: 0, + width: 1014, + height: 686, + bottom: 686, + right: 1014 + }; + } + + getViewportScrollPosition() { + return {top: 0, left: 0}; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/free-position-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/free-position-strategy.ts new file mode 100644 index 00000000..bd33e404 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/free-position-strategy.ts @@ -0,0 +1,83 @@ +/* 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 {PositionStrategy} from './position-strategy'; + +/** + * Free position strategy for overlay without origin + * @author lingyi.zcs + */ +export class FreePositionStrategy implements PositionStrategy { + private _wrapper: HTMLElement; + // private _cssPosition: string = ''; + // private _top: string = ''; + // private _left: string = ''; + // private _width: string = ''; + // private _height: string = ''; + + // cssPosition(value: string) { + // this._cssPosition = value; + // return this; + // } + + // top(value: number | string): this { + // this._top = this._toCssValue(value); + // return this; + // } + + // left(value: number | string): this { + // this._left = this._toCssValue(value); + // return this; + // } + + // width(value: number | string): this { + // this._width = this._toCssValue(value); + // return this; + // } + + // height(value: number | string): this { + // this._height = this._toCssValue(value); + // return this; + // } + + /** + * Apply the position to the element. (NOTE: normally will triggered by + * scrolling) + * @docs-private + * + * @param element Element to which to apply the CSS. + * @returns Resolved when the styles have been applied. + */ + apply(element: HTMLElement): void { + if (!this._wrapper) { + this._wrapper = document.createElement('div'); + this._wrapper.classList.add('cdk-free-overlay-wrapper'); + element.parentNode.insertBefore(this._wrapper, element); + this._wrapper.appendChild(element); + + // // Initialized style once + // const style = element.style; + // style.position = this._cssPosition; + // style.top = this._top; + // style.left = this._left; + // style.width = this._width; + // style.height = this._height; + } + + // TODO: do somethings while triggered (eg. by scrolling) + } + + /** + * Removes the wrapper element from the DOM. + */ + dispose(): void { + if (this._wrapper && this._wrapper.parentNode) { + this._wrapper.parentNode.removeChild(this._wrapper); + this._wrapper = null; + } + } + + // private _toCssValue(value: number | string) { + // return typeof value === 'number' ? value + 'px' : value; + // } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/global-position-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/global-position-strategy.ts new file mode 100644 index 00000000..8e3204a9 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/global-position-strategy.ts @@ -0,0 +1,178 @@ +/** + * @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 {PositionStrategy} from './position-strategy'; + + +/** + * A strategy for positioning overlays. Using this strategy, an overlay is given + * an explicit position relative to the browser's viewport. We use flexbox, + * instead of transforms, in order to avoid issues with subpixel rendering which + * can cause the element to become blurry. + */ +export class GlobalPositionStrategy implements PositionStrategy { + private _cssPosition = 'static'; + private _topOffset = ''; + private _bottomOffset = ''; + private _leftOffset = ''; + private _rightOffset = ''; + private _alignItems = ''; + private _justifyContent = ''; + private _width = ''; + private _height = ''; + + /* A lazily-created wrapper for the overlay element that is used as a flex + * container. */ + private _wrapper: HTMLElement|null = null; + + /** + * Sets the top position of the overlay. Clears any previously set vertical + * position. + * @param value New top offset. + */ + top(value = ''): this { + this._bottomOffset = ''; + this._topOffset = value; + this._alignItems = 'flex-start'; + return this; + } + + /** + * Sets the left position of the overlay. Clears any previously set horizontal + * position. + * @param value New left offset. + */ + left(value = ''): this { + this._rightOffset = ''; + this._leftOffset = value; + this._justifyContent = 'flex-start'; + return this; + } + + /** + * Sets the bottom position of the overlay. Clears any previously set vertical + * position. + * @param value New bottom offset. + */ + bottom(value = ''): this { + this._topOffset = ''; + this._bottomOffset = value; + this._alignItems = 'flex-end'; + return this; + } + + /** + * Sets the right position of the overlay. Clears any previously set + * horizontal position. + * @param value New right offset. + */ + right(value = ''): this { + this._leftOffset = ''; + this._rightOffset = value; + this._justifyContent = 'flex-end'; + return this; + } + + /** + * Sets the overlay width and clears any previously set width. + * @param value New width for the overlay + */ + width(value = ''): this { + this._width = value; + + // When the width is 100%, we should reset the `left` and the offset, + // in order to ensure that the element is flush against the viewport edge. + if (value === '100%') { + this.left('0px'); + } + + return this; + } + + /** + * Sets the overlay height and clears any previously set height. + * @param value New height for the overlay + */ + height(value = ''): this { + this._height = value; + + // When the height is 100%, we should reset the `top` and the offset, + // in order to ensure that the element is flush against the viewport edge. + if (value === '100%') { + this.top('0px'); + } + + return this; + } + + /** + * Centers the overlay horizontally with an optional offset. + * Clears any previously set horizontal position. + * + * @param offset Overlay offset from the horizontal center. + */ + centerHorizontally(offset = ''): this { + this.left(offset); + this._justifyContent = 'center'; + return this; + } + + /** + * Centers the overlay vertically with an optional offset. + * Clears any previously set vertical position. + * + * @param offset Overlay offset from the vertical center. + */ + centerVertically(offset = ''): this { + this.top(offset); + this._alignItems = 'center'; + return this; + } + + /** + * Apply the position to the element. + * @docs-private + * + * @param element Element to which to apply the CSS. + * @returns Resolved when the styles have been applied. + */ + apply(element: HTMLElement): void { + if (!this._wrapper && element.parentNode) { + this._wrapper = document.createElement('div'); + this._wrapper.classList.add('cdk-global-overlay-wrapper'); + element.parentNode.insertBefore(this._wrapper, element); + this._wrapper.appendChild(element); + } + + const styles = element.style; + const parentStyles = (element.parentNode as HTMLElement).style; + + styles.position = this._cssPosition; + styles.marginTop = this._topOffset; + styles.marginLeft = this._leftOffset; + styles.marginBottom = this._bottomOffset; + styles.marginRight = this._rightOffset; + styles.width = this._width; + styles.height = this._height; + + parentStyles.justifyContent = this._justifyContent; + parentStyles.alignItems = this._alignItems; + } + + /** + * Removes the wrapper element from the DOM. + */ + dispose(): void { + if (this._wrapper && this._wrapper.parentNode) { + this._wrapper.parentNode.removeChild(this._wrapper); + this._wrapper = null; + } + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/overlay-position-builder.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/overlay-position-builder.ts new file mode 100644 index 00000000..0f6735eb --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/overlay-position-builder.ts @@ -0,0 +1,51 @@ +/** + * @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 {ElementRef, Injectable} from '@angular/core'; + +import {OriginConnectionPosition, OverlayConnectionPosition} from './connected-position'; +import {ConnectedPositionStrategy} from './connected-position-strategy'; +import {FreePositionStrategy} from './free-position-strategy'; +import {GlobalPositionStrategy} from './global-position-strategy'; +import {ViewportRuler} from './viewport-ruler'; + + +/** Builder for overlay position strategy. */ +@Injectable() +export class OverlayPositionBuilder { + constructor(private _viewportRuler: ViewportRuler) {} + + /** + * Creates a free position strategy + */ + free(): FreePositionStrategy { + return new FreePositionStrategy(); + } + + /** + * Creates a global position strategy. + */ + global(): GlobalPositionStrategy { + return new GlobalPositionStrategy(); + } + + /** + * Creates a relative position strategy. + * @param elementRef + * @param originPos + * @param overlayPos + */ + connectedTo( + elementRef: ElementRef, originPos: OriginConnectionPosition, + overlayPos: OverlayConnectionPosition): ConnectedPositionStrategy { + return new ConnectedPositionStrategy( + elementRef, originPos, overlayPos, this._viewportRuler); + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/position-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/position-strategy.ts new file mode 100644 index 00000000..21bd0fa0 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/position-strategy.ts @@ -0,0 +1,17 @@ +/** + * @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 + */ + +/** Strategy for setting the position on an overlay. */ +export interface PositionStrategy { + /** Updates the position of the overlay element. */ + apply(element: Element): void; + + /** Cleans up any DOM modifications made by the position strategy, if + * necessary. */ + dispose(): void; +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/viewport-ruler.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/viewport-ruler.ts new file mode 100644 index 00000000..298cd642 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/position/viewport-ruler.ts @@ -0,0 +1,110 @@ +/** + * @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 {Injectable, Optional, SkipSelf} from '@angular/core'; +import {ScrollDispatcher} from '../scroll/scroll-dispatcher'; + + +/** + * Simple utility for getting the bounds of the browser viewport. + * @docs-private + */ +@Injectable() +export class ViewportRuler { + /** Cached document client rectangle. */ + private _documentRect?: ClientRect; + + constructor(scrollDispatcher: ScrollDispatcher) { + // Subscribe to scroll and resize events and update the document rectangle + // on changes. + scrollDispatcher.scrolled(0, () => this._cacheViewportGeometry()); + } + + /** Gets a ClientRect for the viewport's bounds. */ + getViewportRect(documentRect = this._documentRect): ClientRect { + // Cache the document bounding rect so that we don't recompute it for + // multiple calls. + if (!documentRect) { + this._cacheViewportGeometry(); + documentRect = this._documentRect; + } + + // Use the document element's bounding rect rather than the window scroll + // properties (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE + // where window scroll properties and client coordinates + // (boundingClientRect, clientX/Y, etc.) are in different conceptual + // viewports. Under most circumstances these viewports are equivalent, but + // they can disagree when the page is pinch-zoomed (on devices that support + // touch). See + // https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4 We use + // the documentElement instead of the body because, by default (without a + // css reset) browsers typically give the document body an 8px margin, which + // is not included in getBoundingClientRect(). + const scrollPosition = this.getViewportScrollPosition(documentRect); + const height = window.innerHeight; + const width = window.innerWidth; + + return { + top: scrollPosition.top, + left: scrollPosition.left, + bottom: scrollPosition.top + height, + right: scrollPosition.left + width, + height, + width, + }; + } + + + /** + * Gets the (top, left) scroll position of the viewport. + * @param documentRect + */ + getViewportScrollPosition(documentRect = this._documentRect) { + // Cache the document bounding rect so that we don't recompute it for + // multiple calls. + if (!documentRect) { + this._cacheViewportGeometry(); + documentRect = this._documentRect; + } + + // The top-left-corner of the viewport is determined by the scroll position + // of the document body, normally just (scrollLeft, scrollTop). However, + // Chrome and Firefox disagree about whether `document.body` or + // `document.documentElement` is the scrolled element, so reading + // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding + // rect of `document.documentElement` works consistently, where the `top` + // and `left` values will equal negative the scroll position. + const top = -documentRect.top || document.body.scrollTop || + window.scrollY || document.documentElement.scrollTop || 0; + + const left = -documentRect.left || document.body.scrollLeft || + window.scrollX || document.documentElement.scrollLeft || 0; + + return {top, left}; + } + + /** Caches the latest client rectangle of the document element. */ + _cacheViewportGeometry() { + this._documentRect = document.documentElement.getBoundingClientRect(); + } +} + +export function VIEWPORT_RULER_PROVIDER_FACTORY( + parentRuler: ViewportRuler, scrollDispatcher: ScrollDispatcher) { + return parentRuler || new ViewportRuler(scrollDispatcher); +} + +export const VIEWPORT_RULER_PROVIDER = { + // If there is already a ViewportRuler available, use that. Otherwise, provide + // a new one. + provide: ViewportRuler, + deps: [[new Optional(), new SkipSelf(), ViewportRuler], ScrollDispatcher], + useFactory: VIEWPORT_RULER_PROVIDER_FACTORY +}; diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/block-scroll-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/block-scroll-strategy.ts new file mode 100644 index 00000000..d1c1d401 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/block-scroll-strategy.ts @@ -0,0 +1,77 @@ +/** + * @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*/ +import {ViewportRuler} from '../position/viewport-ruler'; + +import {ScrollStrategy} from './scroll-strategy'; + +/** + * Strategy that will prevent the user from scrolling while the overlay is + * visible. + */ +export class BlockScrollStrategy implements ScrollStrategy { + private _previousHTMLStyles = {top: '', left: ''}; + private _previousScrollPosition: {top: number, left: number}; + private _isEnabled = false; + + constructor(private _viewportRuler: ViewportRuler) {} + + attach() { + // + } + + enable() { + if (this._canBeEnabled()) { + const root = document.documentElement; + + this._previousScrollPosition = + this._viewportRuler.getViewportScrollPosition(); + + // Cache the previous inline styles in case the user had set them. + this._previousHTMLStyles.left = root.style.left || ''; + this._previousHTMLStyles.top = root.style.top || ''; + + // Note: we're using the `html` node, instead of the `body`, because the + // `body` may have the user agent margin, whereas the `html` is guaranteed + // not to have one. + root.style.left = `${- this._previousScrollPosition.left}px`; + root.style.top = `${- this._previousScrollPosition.top}px`; + root.classList.add('cdk-global-scrollblock'); + this._isEnabled = true; + } + } + + disable() { + if (this._isEnabled) { + this._isEnabled = false; + document.documentElement.style.left = this._previousHTMLStyles.left; + document.documentElement.style.top = this._previousHTMLStyles.top; + document.documentElement.classList.remove('cdk-global-scrollblock'); + window.scroll( + this._previousScrollPosition.left, this._previousScrollPosition.top); + } + } + + private _canBeEnabled(): boolean { + // Since the scroll strategies can't be singletons, we have to use a global + // CSS class + // (`cdk-global-scrollblock`) to make sure that we don't try to disable + // global scrolling multiple times. + if (document.documentElement.classList.contains('cdk-global-scrollblock') || + this._isEnabled) { + return false; + } + + const body = document.body; + const viewport = this._viewportRuler.getViewportRect(); + return body.scrollHeight > viewport.height || + body.scrollWidth > viewport.width; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/close-scroll-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/close-scroll-strategy.ts new file mode 100644 index 00000000..51189dc1 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/close-scroll-strategy.ts @@ -0,0 +1,54 @@ +/** + * @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*/ +import {Subscription} from 'rxjs/Subscription'; + +import {OverlayRef} from '../overlay-ref'; + +import {ScrollDispatcher} from './scroll-dispatcher'; +import {getMdScrollStrategyAlreadyAttachedError, ScrollStrategy} from './scroll-strategy'; + + +/** + * Strategy that will close the overlay as soon as the user starts scrolling. + */ +export class CloseScrollStrategy implements ScrollStrategy { + private _scrollSubscription: Subscription|null = null; + private _overlayRef: OverlayRef; + + constructor(private _scrollDispatcher: ScrollDispatcher) {} + + attach(overlayRef: OverlayRef) { + if (this._overlayRef) { + throw getMdScrollStrategyAlreadyAttachedError(); + } + + this._overlayRef = overlayRef; + } + + enable() { + if (!this._scrollSubscription) { + this._scrollSubscription = this._scrollDispatcher.scrolled(0, () => { + if (this._overlayRef.hasAttached()) { + this._overlayRef.detach(); + } + + this.disable(); + }); + } + } + + disable() { + if (this._scrollSubscription) { + this._scrollSubscription.unsubscribe(); + this._scrollSubscription = null; + } + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/index.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/index.ts new file mode 100644 index 00000000..e386770b --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/index.ts @@ -0,0 +1,35 @@ +/** + * @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*/ +import {PlatformModule} from '@angular/cdk'; +import {NgModule} from '@angular/core'; + +import {SCROLL_DISPATCHER_PROVIDER} from './scroll-dispatcher'; +import {ScrollStrategyOptions} from './scroll-strategy-options'; +import {Scrollable} from './scrollable'; + +export {BlockScrollStrategy} from './block-scroll-strategy'; +export {CloseScrollStrategy} from './close-scroll-strategy'; +export {NoopScrollStrategy} from './noop-scroll-strategy'; +export {RepositionScrollStrategy} from './reposition-scroll-strategy'; +export {ScrollDispatcher} from './scroll-dispatcher'; +// Export pre-defined scroll strategies and interface to build custom ones. +export {ScrollStrategy} from './scroll-strategy'; +export {ScrollStrategyOptions} from './scroll-strategy-options'; +export {Scrollable} from './scrollable'; + +@NgModule({ + imports: [PlatformModule], + exports: [Scrollable], + declarations: [Scrollable], + providers: [SCROLL_DISPATCHER_PROVIDER, ScrollStrategyOptions], +}) +export class ScrollDispatchModule { +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/noop-scroll-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/noop-scroll-strategy.ts new file mode 100644 index 00000000..9b92ab49 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/noop-scroll-strategy.ts @@ -0,0 +1,24 @@ +/** + * @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 {ScrollStrategy} from './scroll-strategy'; + +/** + * Scroll strategy that doesn't do anything. + */ +export class NoopScrollStrategy implements ScrollStrategy { + enable() { + // + } + disable() { + // + } + attach() { + // + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/reposition-scroll-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/reposition-scroll-strategy.ts new file mode 100644 index 00000000..b15d5dea --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/reposition-scroll-strategy.ts @@ -0,0 +1,59 @@ +/** + * @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*/ +import {Subscription} from 'rxjs/Subscription'; + +import {OverlayRef} from '../overlay-ref'; + +import {ScrollDispatcher} from './scroll-dispatcher'; +import {getMdScrollStrategyAlreadyAttachedError, ScrollStrategy} from './scroll-strategy'; + +/** + * Config options for the RepositionScrollStrategy. + */ +export interface RepositionScrollStrategyConfig { scrollThrottle?: number; } + +/** + * Strategy that will update the element position as the user is scrolling. + */ +export class RepositionScrollStrategy implements ScrollStrategy { + private _scrollSubscription: Subscription|null = null; + private _overlayRef: OverlayRef; + + constructor( + private _scrollDispatcher: ScrollDispatcher, + private _config?: RepositionScrollStrategyConfig) {} + + attach(overlayRef: OverlayRef) { + if (this._overlayRef) { + throw getMdScrollStrategyAlreadyAttachedError(); + } + + this._overlayRef = overlayRef; + } + + enable() { + if (!this._scrollSubscription) { + const throttle = this._config ? this._config.scrollThrottle : 0; + + this._scrollSubscription = + this._scrollDispatcher.scrolled(throttle, () => { + this._overlayRef.updatePosition(); + }); + } + } + + disable() { + if (this._scrollSubscription) { + this._scrollSubscription.unsubscribe(); + this._scrollSubscription = null; + } + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-dispatcher.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-dispatcher.ts new file mode 100644 index 00000000..2c145af5 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-dispatcher.ts @@ -0,0 +1,174 @@ +/** + * @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*/ +import {Platform} from '@angular/cdk'; +import {auditTime} from 'rxjs/operator/auditTime'; +import {ElementRef, Injectable, NgZone, Optional, SkipSelf} from '@angular/core'; +import {fromEvent} from 'rxjs/observable/fromEvent'; +import {merge} from 'rxjs/observable/merge'; +import {Subject} from 'rxjs/Subject'; +import {Subscription} from 'rxjs/Subscription'; + +import {Scrollable} from './scrollable'; + + +/** Time in ms to throttle the scrolling events by default. */ +export const DEFAULT_SCROLL_TIME = 20; + +/** + * Service contained all registered Scrollable references and emits an event + * when any one of the Scrollable references emit a scrolled event. + */ +@Injectable() +export class ScrollDispatcher { + /** Subject for notifying that a registered scrollable reference element has + * been scrolled. */ + _scrolled: Subject<void> = new Subject<void>(); + + /** Keeps track of the global `scroll` and `resize` subscriptions. */ + _globalSubscription: Subscription|null = null; + + /** Keeps track of the amount of subscriptions to `scrolled`. Used for + * cleaning up afterwards. */ + private _scrolledCount = 0; + + /** + * Map of all the scrollable references that are registered with the service + * and their scroll event subscriptions. + */ + scrollableReferences: Map<Scrollable, Subscription> = new Map(); + + constructor(private _ngZone: NgZone, private _platform: Platform) {} + + /** + * Registers a Scrollable with the service and listens for its scrolled + * events. When the scrollable is scrolled, the service emits the event in its + * scrolled observable. + * @param scrollable Scrollable instance to be registered. + */ + register(scrollable: Scrollable): void { + const scrollSubscription = + scrollable.elementScrolled().subscribe(() => this._notify()); + + this.scrollableReferences.set(scrollable, scrollSubscription); + } + + /** + * Deregisters a Scrollable reference and unsubscribes from its scroll event + * observable. + * @param scrollable Scrollable instance to be deregistered. + */ + deregister(scrollable: Scrollable): void { + const scrollableReference = this.scrollableReferences.get(scrollable); + + if (scrollableReference) { + scrollableReference.unsubscribe(); + this.scrollableReferences.delete(scrollable); + } + } + + /** + * Subscribes to an observable that emits an event whenever any of the + * registered Scrollable references (or window, document, or body) fire a + * scrolled event. Can provide a time in ms to override the default "throttle" + * time. + */ + scrolled(auditTimeInMs: number = DEFAULT_SCROLL_TIME, callback: () => any): + Subscription { + // Scroll events can only happen on the browser, so do nothing if we're not + // on the browser. + if (!this._platform.isBrowser) { + return Subscription.EMPTY; + } + + // In the case of a 0ms delay, use an observable without auditTime + // since it does add a perceptible delay in processing overhead. + const observable = auditTimeInMs > 0 ? + auditTime.call(this._scrolled.asObservable(), auditTimeInMs) : + this._scrolled.asObservable(); + + this._scrolledCount++; + + if (!this._globalSubscription) { + this._globalSubscription = this._ngZone.runOutsideAngular(() => { + return merge( + fromEvent(window.document, 'scroll'), + fromEvent(window, 'resize')) + .subscribe(() => this._notify()); + }); + } + + // Note that we need to do the subscribing from here, in order to be able to + // remove the global event listeners once there are no more subscriptions. + const subscription = observable.subscribe(callback); + + subscription.add(() => { + this._scrolledCount--; + + if (this._globalSubscription && !this.scrollableReferences.size && + !this._scrolledCount) { + this._globalSubscription.unsubscribe(); + this._globalSubscription = null; + } + }); + + return subscription; + } + + /** Returns all registered Scrollables that contain the provided element. */ + getScrollContainers(elementRef: ElementRef): Scrollable[] { + const scrollingContainers: Scrollable[] = []; + + this.scrollableReferences.forEach( + (_subscription: Subscription, scrollable: Scrollable) => { + if (this.scrollableContainsElement(scrollable, elementRef)) { + scrollingContainers.push(scrollable); + } + }); + + return scrollingContainers; + } + + /** Returns true if the element is contained within the provided Scrollable. + */ + scrollableContainsElement(scrollable: Scrollable, elementRef: ElementRef): + boolean { + let element = elementRef.nativeElement; + const scrollableElement = scrollable.getElementRef().nativeElement; + + // Traverse through the element parents until we reach null, checking if any + // of the elements are the scrollable's element. + do { + if (element === scrollableElement) { + return true; + } + } while (element = element.parentElement); + + return false; + } + + /** Sends a notification that a scroll event has been fired. */ + _notify() { + this._scrolled.next(); + } +} + +export function SCROLL_DISPATCHER_PROVIDER_FACTORY( + parentDispatcher: ScrollDispatcher, ngZone: NgZone, platform: Platform) { + return parentDispatcher || new ScrollDispatcher(ngZone, platform); +} + +export const SCROLL_DISPATCHER_PROVIDER = { + // If there is already a ScrollDispatcher available, use that. Otherwise, + // provide a new one. + provide: ScrollDispatcher, + deps: [[new Optional(), new SkipSelf(), ScrollDispatcher], NgZone, Platform], + useFactory: SCROLL_DISPATCHER_PROVIDER_FACTORY +}; diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-strategy-options.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-strategy-options.ts new file mode 100644 index 00000000..f6270388 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-strategy-options.ts @@ -0,0 +1,52 @@ +/** + * @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-unused-expression*/ +import {Injectable} from '@angular/core'; + +import {ViewportRuler} from '../position/viewport-ruler'; + +import {BlockScrollStrategy} from './block-scroll-strategy'; +import {CloseScrollStrategy} from './close-scroll-strategy'; +import {NoopScrollStrategy} from './noop-scroll-strategy'; +import {RepositionScrollStrategy, RepositionScrollStrategyConfig} from './reposition-scroll-strategy'; +import {ScrollDispatcher} from './scroll-dispatcher'; +// import {ScrollStrategy} from './scroll-strategy'; + + +/** + * Options for how an overlay will handle scrolling. + * + * Users can provide a custom value for `ScrollStrategyOptions` to replace the + * default behaviors. This class primarily acts as a factory for ScrollStrategy + * instances. + */ +@Injectable() +export class ScrollStrategyOptions { + constructor( + private _scrollDispatcher: ScrollDispatcher, + private _viewportRuler: ViewportRuler) {} + + /** Do nothing on scroll. */ + noop = () => new NoopScrollStrategy(); + + /** Close the overlay as soon as the user scrolls. */ + close = () => new CloseScrollStrategy(this._scrollDispatcher); + + /** Block scrolling. */ + block = () => new BlockScrollStrategy(this._viewportRuler); + + /** + * Update the overlay's position on scroll. + * @param config Configuration to be used inside the scroll strategy. + * Allows debouncing the reposition calls. + */ + reposition = (config?: RepositionScrollStrategyConfig) => + new RepositionScrollStrategy(this._scrollDispatcher, config) +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-strategy.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-strategy.ts new file mode 100644 index 00000000..d59651a7 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scroll-strategy.ts @@ -0,0 +1,29 @@ +/** + * @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*/ +import {OverlayRef} from '../overlay-ref'; + +/** + * Describes a strategy that will be used by an overlay + * to handle scroll events while it is open. + */ +export abstract class ScrollStrategy { + enable: () => void; + disable: () => void; + attach: (overlayRef: OverlayRef) => void; +} + +/** + * Returns an error to be thrown when attempting to attach an already-attached + * scroll strategy. + */ +export function getMdScrollStrategyAlreadyAttachedError(): Error { + return Error(`Scroll strategy has already been attached.`); +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scrollable.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scrollable.ts new file mode 100644 index 00000000..fe7b041c --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlay/scroll/scrollable.ts @@ -0,0 +1,63 @@ +/** + * @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*/ +import {Directive, ElementRef, NgZone, OnDestroy, OnInit, Renderer2} from '@angular/core'; +import {Observable} from 'rxjs/Observable'; +import {Subject} from 'rxjs/Subject'; + +import {ScrollDispatcher} from './scroll-dispatcher'; + + +/** + * Sends an event when the directive's element is scrolled. Registers itself + * with the ScrollDispatcher service to include itself as part of its collection + * of scrolling events that it can be listened to through the service. + */ +@Directive({selector: '[cdk-scrollable], [cdkScrollable]'}) +export class Scrollable implements OnInit, OnDestroy { + private _elementScrolled: Subject<Event> = new Subject(); + private _scrollListener: Function|null; + + constructor( + private _elementRef: ElementRef, private _scroll: ScrollDispatcher, + private _ngZone: NgZone, private _renderer: Renderer2) {} + + ngOnInit() { + this._scrollListener = this._ngZone.runOutsideAngular(() => { + return this._renderer.listen( + this.getElementRef().nativeElement, 'scroll', (event: Event) => { + this._elementScrolled.next(event); + }); + }); + + this._scroll.register(this); + } + + ngOnDestroy() { + this._scroll.deregister(this); + + if (this._scrollListener) { + this._scrollListener(); + this._scrollListener = null; + } + } + + /** + * Returns observable that emits when a scroll event is fired on the host + * element. + */ + elementScrolled(): Observable<any> { + return this._elementScrolled.asObservable(); + } + + getElementRef(): ElementRef { + return this._elementRef; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/index.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/index.ts new file mode 100644 index 00000000..4ad2b4a3 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/index.ts @@ -0,0 +1 @@ +export * from './overlaypanel';
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/overlaypanel.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/overlaypanel.ts new file mode 100644 index 00000000..ee529c5f --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/overlaypanel.ts @@ -0,0 +1,163 @@ +import {CommonModule} from '@angular/common'; +import {AfterViewInit, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, Renderer} from '@angular/core'; + +import {DomHandler} from '../domhandler'; + +@Component({ + selector: 'plx-overlay-panel', + template: ` + <div [ngClass]="'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'" [ngStyle]="style" [class]="styleClass" + [style.display]="visible ? 'block' : 'none'" (click)="onPanelClick()"> + <div class="ui-overlaypanel-content"> + <ng-content></ng-content> + </div> + <a href="#" *ngIf="showCloseIcon" class="ui-overlaypanel-close ui-state-default" (click)="onCloseClick($event)"> + <span class="fa fa-fw fa-close"></span> + </a> + </div> + `, + providers: [DomHandler] +}) +export class PlxOverlayPanelComponent implements OnInit, AfterViewInit, + OnDestroy { + @Input() dismissable: boolean = true; + + @Input() showCloseIcon: boolean; + + @Input() style: any; + + @Input() styleClass: string; + + @Input() appendTo: any; + + @Output() onBeforeShow: EventEmitter<any> = new EventEmitter(); + + @Output() onAfterShow: EventEmitter<any> = new EventEmitter(); + + @Output() onBeforeHide: EventEmitter<any> = new EventEmitter(); + + @Output() onAfterHide: EventEmitter<any> = new EventEmitter(); + + container: any; + + visible: boolean = false; + + documentClickListener: any; + + selfClick: boolean; + + targetEvent: boolean; + + target: any; + + constructor( + public el: ElementRef, public domHandler: DomHandler, + public renderer: Renderer) {} + + ngOnInit() { + if (this.dismissable) { + this.documentClickListener = + this.renderer.listenGlobal('body', 'click', () => { + if (!this.selfClick && !this.targetEvent) { + this.hide(); + } + this.selfClick = false; + this.targetEvent = false; + }); + } + } + + ngAfterViewInit() { + this.container = this.el.nativeElement.children[0]; + if (this.appendTo) { + if (this.appendTo === 'body') { + document.body.appendChild(this.container); + } else { + this.domHandler.appendChild(this.container, this.appendTo); + } + } + } + + toggle(event: any, target?: any) { + let currentTarget = (target || event.currentTarget || event.target); + + if (!this.target || this.target === currentTarget) { + if (this.visible) { + this.hide(); + } else { + this.show(event, target); + } + } else { + this.show(event, target); + } + + if (this.dismissable) { + this.targetEvent = true; + } + + this.target = currentTarget; + } + + show(event: any, target?: any) { + if (this.dismissable) { + this.targetEvent = true; + } + + this.onBeforeShow.emit(null); + let elementTarget = target || event.currentTarget || event.target; + this.container.style.zIndex = ++DomHandler.zindex; + + if (this.visible) { + this.domHandler.absolutePosition(this.container, elementTarget); + } else { + this.visible = true; + this.domHandler.absolutePosition(this.container, elementTarget); + this.domHandler.fadeIn(this.container, 250); + } + this.onAfterShow.emit(null); + } + + hide() { + if (this.visible) { + this.onBeforeHide.emit(null); + this.visible = false; + this.onAfterHide.emit(null); + } + } + + onPanelClick() { + if (this.dismissable) { + this.selfClick = true; + } + } + + onCloseClick(event: any) { + this.hide(); + + if (this.dismissable) { + this.selfClick = true; + } + + event.preventDefault(); + } + + ngOnDestroy() { + if (this.documentClickListener) { + this.documentClickListener(); + } + + if (this.appendTo) { + this.el.nativeElement.appendChild(this.container); + } + + this.target = null; + } +} + +@NgModule({ + imports: [CommonModule], + exports: [PlxOverlayPanelComponent], + declarations: [PlxOverlayPanelComponent] +}) +export class PlxOverlayPanelModule { +}
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button-state.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button-state.ts new file mode 100644 index 00000000..2f1f73b2 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button-state.ts @@ -0,0 +1,6 @@ +export enum PlxButtonState { + IDLE, + DOING, + SUCCESS, + FAILURE +}
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts new file mode 100644 index 00000000..842b9fb4 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts @@ -0,0 +1,178 @@ +import {AfterViewInit, Directive, ElementRef, Input, OnDestroy} from '@angular/core'; + +import {DomHandler} from '../domhandler'; + +import {PlxButtonState} from './button-state'; + +@Directive({selector: '[pxButton]', providers: [DomHandler]}) +export class PlxButtonDirective implements AfterViewInit, OnDestroy { + @Input() iconPos: string = 'left'; + + @Input() cornerStyleClass: string = 'ui-corner-all'; + + _label: string; + + _loadinglabel: string; + + _icon: string; + + _state: number; + + initialized: boolean; + + constructor( + public el: ElementRef, public domHandler: DomHandler) {} + + ngAfterViewInit() { + this.domHandler.addMultipleClasses( + this.el.nativeElement, this.getStyleClass()); + if (this.icon) { + let iconElement = document.createElement('span'); + let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' : + 'ui-button-icon-left'; + iconElement.className = + iconPosClass + ' ui-c iconfont plx-icon-' + this.icon; + this.el.nativeElement.appendChild(iconElement); + } + + let iconAnimationElement = document.createElement('span'); + iconAnimationElement.className = + 'ui-button-icon-left ui-c iconfont plx-icon-circle-o-notch plx-spin'; + iconAnimationElement.style.display = 'none'; + this.el.nativeElement.appendChild(iconAnimationElement); + + let labelElement = document.createElement('span'); + labelElement.className = 'ui-button-text ui-c'; + labelElement.appendChild(document.createTextNode(this.label || '')); + this.el.nativeElement.appendChild(labelElement); + + if (this.state) { + let spanElement = + this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text'); + if (this.state === PlxButtonState.DOING) { + if (spanElement) { + spanElement.innerText = this.loadinglabel || 'loading'; + } + this.el.nativeElement.disabled = true; + this.setIconELement(true); + } else { + spanElement.innerText = this.label || ''; + this.el.nativeElement.disabled = false; + this.setIconELement(false); + } + } + + this.initialized = true; + } + + getStyleClass(): string { + let styleClass = + 'ui-button ui-widget ui-state-default ' + this.cornerStyleClass; + if (this.icon) { + if (this.label !== null && this.label !== undefined) { + if (this.iconPos === 'left') { + styleClass = styleClass + ' ui-button-text-icon-left'; + } else { + styleClass = styleClass + ' ui-button-text-icon-right'; + } + } else { + styleClass = styleClass + ' ui-button-icon-only'; + } + } else { + styleClass = styleClass + ' ui-button-text-only'; + } + + return styleClass; + } + + setIconELement(isShowAnimation: boolean) { + let iconLeftElement = this.domHandler.findSingle( + this.el.nativeElement, '.ui-button-icon-left.iconfont'); + if (iconLeftElement) { + iconLeftElement.style.display = isShowAnimation ? 'none' : 'inline-block'; + } + let iconRightElement = this.domHandler.findSingle( + this.el.nativeElement, '.ui-button-icon-left.iconfont'); + if (iconRightElement) { + iconRightElement.style.display = + isShowAnimation ? 'none' : 'inline-block'; + } + let iconAnimationElement = this.domHandler.findSingle( + this.el.nativeElement, '.iconfont.plx-icon-circle-o-notch.plx-spin'); + if (iconAnimationElement) { + iconAnimationElement.style.display = + isShowAnimation ? 'inline-block' : 'none'; + } + } + + @Input() + get label(): string { + return this._label; + } + + set label(val: string) { + this._label = val; + + if (this.initialized) { + this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text') + .textContent = this._label; + } + } + + @Input() + get loadinglabel(): string { + return this._loadinglabel; + } + + set loadinglabel(val: string) { + this._loadinglabel = val; + } + + @Input() + get icon(): string { + return this._icon; + } + + set icon(val: string) { + this._icon = val; + + if (this.initialized) { + let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' : + 'ui-button-icon-left'; + this.domHandler.findSingle(this.el.nativeElement, '.iconfont').className = + iconPosClass + ' ui-c iconfont plx-icon-' + this.icon; + } + } + + @Input() + get state(): number { + return this._state; + } + + set state(val: number) { + this._state = val; + if (this.initialized) { + let spanElement = + this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text'); + if (this.state === PlxButtonState.DOING) { + if (spanElement) { + spanElement.innerText = this.loadinglabel || 'loading'; + } + this.el.nativeElement.disabled = true; + this.setIconELement(true); + } else { + spanElement.innerText = this.label || ''; + this.el.nativeElement.disabled = false; + this.setIconELement(false); + } + } + } + + ngOnDestroy() { + while (this.el.nativeElement.hasChildNodes()) { + this.el.nativeElement.removeChild(this.el.nativeElement.lastChild); + } + + this.initialized = false; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.module.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.module.ts new file mode 100644 index 00000000..01973295 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.module.ts @@ -0,0 +1,14 @@ +/** + * Created by 10190264 on 2016/12/15. + */ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {PlxButtonDirective} from './button.directive'; + +@NgModule({ + imports: [CommonModule], + exports: [PlxButtonDirective], + declarations: [PlxButtonDirective] +}) +export class PlxButtonModule { +}
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/index.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/index.ts new file mode 100644 index 00000000..f435b247 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/index.ts @@ -0,0 +1,2 @@ +export * from './button.module'; +export * from './button-state';
\ No newline at end of file diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/select.service.ts b/sdc-workflow-designer-ui/src/app/paletx/core/select.service.ts new file mode 100644 index 00000000..ba6f579e --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/select.service.ts @@ -0,0 +1,57 @@ +/* tslint:disable:array-type member-access variable-name */ +import {Injectable} from '@angular/core'; + +@Injectable() +export class SelectService { + selection: string[] = []; + + selected(indexName: string): boolean { + if (this.selection === undefined || this.selection === []) { + return null; + } + + for (let item of this.selection) { + if (item === indexName) { + return true; + } + } + return false; + } + + handleSingleSelect(optionIndex: string) { + this.selection = []; + this.selection.push(optionIndex); + return this.selection; + } + + handleMutipleSelect(optionIndex: string) { + if (this.selected(optionIndex)) { + this.selection = this.handleSecondSelect(optionIndex); + } else { + this.selection.push(optionIndex); + } + return this.selection; + } + + handleSecondSelect(optionIndex: string) { + let selectedOption = []; + for (let option of this.selection) { + if (option !== optionIndex) { + selectedOption.push(option); + } + } + return selectedOption; + } + + select(optionIndex: string, isMutiple: boolean): string[] { + if (!isMutiple) { + return this.handleSingleSelect(optionIndex); + } else { + return this.handleMutipleSelect(optionIndex); + } + } + + deselect() { + this.selection = []; + } +} diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/uuid.ts b/sdc-workflow-designer-ui/src/app/paletx/core/uuid.ts new file mode 100644 index 00000000..58756b63 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/core/uuid.ts @@ -0,0 +1,36 @@ +/* tslint:disable:array-type member-access variable-name */ +export class UUID { + constructor() { + // + } + + static UUID(): string { + if (typeof(window.crypto) !== 'undefined' && + typeof(window.crypto.getRandomValues) !== 'undefined') { + // If we have a cryptographically secure PRNG, use that + let buf: Uint16Array = new Uint16Array(8); + window.crypto.getRandomValues(buf); + return ( + this.pad4(buf[0]) + this.pad4(buf[1]) + '-' + this.pad4(buf[2]) + + '-' + this.pad4(buf[3]) + '-' + this.pad4(buf[4]) + '-' + + this.pad4(buf[5]) + this.pad4(buf[6]) + this.pad4(buf[7])); + } else { + // Otherwise, just use Math.random + return this.random4() + this.random4() + '-' + this.random4() + '-' + + this.random4() + '-' + this.random4() + '-' + this.random4() + + this.random4() + this.random4(); + } + } + + private static pad4(num: number): string { + let ret: string = num.toString(16); + while (ret.length < 4) { + ret = '0' + ret; + } + return ret; + } + + private static random4(): string { + return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); + } +} |