aboutsummaryrefslogtreecommitdiffstats
path: root/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/util/positioning.ts
diff options
context:
space:
mode:
Diffstat (limited to 'deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/util/positioning.ts')
-rw-r--r--deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/util/positioning.ts425
1 files changed, 0 insertions, 425 deletions
diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/util/positioning.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/util/positioning.ts
deleted file mode 100644
index 79399d6d..00000000
--- a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/util/positioning.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-// previous version:
-// https://github.com/angular-ui/bootstrap/blob/07c31d0731f7cb068a1932b8e01d2312b796b4ec/src/position/position.js
-export class Positioning {
- private getStyle(element: HTMLElement, prop: string): string {
- return window.getComputedStyle(element)[prop];
- }
-
- private isStaticPositioned(element: HTMLElement): boolean {
- return (this.getStyle(element, 'position') || 'static') === 'static';
- }
-
- private offsetParent(element: HTMLElement): HTMLElement {
- let offsetParentEl = <HTMLElement>element.offsetParent || document.documentElement;
-
- while (offsetParentEl && offsetParentEl !== document.documentElement && this.isStaticPositioned(offsetParentEl)) {
- offsetParentEl = <HTMLElement>offsetParentEl.offsetParent;
- }
-
- return offsetParentEl || document.documentElement;
- }
-
- public position(element: HTMLElement, round = true): ClientRect {
- let elPosition: ClientRect;
- let parentOffset: ClientRect = {width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0};
-
- if (this.getStyle(element, 'position') === 'fixed') {
- elPosition = element.getBoundingClientRect();
- } else {
- const offsetParentEl = this.offsetParent(element);
-
- elPosition = this.offset(element, false);
-
- if (offsetParentEl !== document.documentElement) {
- parentOffset = this.offset(offsetParentEl, false);
- }
-
- parentOffset.top += offsetParentEl.clientTop;
- parentOffset.left += offsetParentEl.clientLeft;
- }
-
- elPosition.top -= parentOffset.top;
- elPosition.bottom -= parentOffset.top;
- elPosition.left -= parentOffset.left;
- elPosition.right -= parentOffset.left;
-
- if (round) {
- elPosition.top = Math.round(elPosition.top);
- elPosition.bottom = Math.round(elPosition.bottom);
- elPosition.left = Math.round(elPosition.left);
- elPosition.right = Math.round(elPosition.right);
- }
-
- return elPosition;
- }
-
- public offset(element: HTMLElement, round = true): ClientRect {
- const elBcr = element.getBoundingClientRect();
- const viewportOffset = {
- top: window.pageYOffset - document.documentElement.clientTop,
- left: window.pageXOffset - document.documentElement.clientLeft
- };
-
- let elOffset = {
- height: elBcr.height || element.offsetHeight,
- width: elBcr.width || element.offsetWidth,
- top: elBcr.top + viewportOffset.top,
- bottom: elBcr.bottom + viewportOffset.top,
- left: elBcr.left + viewportOffset.left,
- right: elBcr.right + viewportOffset.left
- };
-
- if (round) {
- elOffset.height = Math.round(elOffset.height);
- elOffset.width = Math.round(elOffset.width);
- elOffset.top = Math.round(elOffset.top);
- elOffset.bottom = Math.round(elOffset.bottom);
- elOffset.left = Math.round(elOffset.left);
- elOffset.right = Math.round(elOffset.right);
- }
-
- return elOffset;
- }
-
-
- public getPlacementPrimary(hostElement: HTMLElement, targetElement: HTMLElement, placement: string): string {
-
- // let placementPrimaryArray = ['right', 'bottom', 'left', 'top'];
- // placementPrimaryArray.splice(placementPrimaryArray.indexOf(placementPrimary), 1);
- // placementPrimaryArray.splice(0, 0, placementPrimary);
-
- let placementPrimaryArray = this.getTotalPlacementArr(placement);
- let placementPrimary;
- let placementSecondary;
- let rect;
-
- let result = placementPrimaryArray.find(place => {
- placementPrimary = place.split('-')[0] || 'top';
- placementSecondary = place.split('-')[1] || 'center';
- rect = this.getBoundingClientRect(placementPrimary, placementSecondary, hostElement, targetElement);
- return this.canDisplay(rect);
- });
-
- if (!result) {
- return placement;
- } else {
- return result;
- }
- }
-
- private getTotalPlacementArr(placement: string): any {
- let placementPrimary = placement.split('-')[0] || 'top';
-
- let placementBasic = ['right', 'bottom', 'left', 'top'];
- placementBasic.splice(placementBasic.indexOf(placementPrimary), 1);
- placementBasic.splice(0, 0, placementPrimary);
- let placeTotal = {
- right: [
- 'right',
- 'right-top',
- 'right-bottom'
- ],
- bottom: [
- 'bottom',
- 'bottom-left',
- 'bottom-right'
- ],
- left: [
- 'left',
- 'left-top',
- 'left-bottom'
- ],
- top: [
- 'top',
- 'top-left',
- 'top-right'
- ]
- }
- let placeArr = [];
- placeArr.push(placement);
- placementBasic.forEach(placePri => {
- placeTotal[placePri].forEach(palce => {
- if (placement !== palce) {
- placeArr.push(palce);
- }
- });
- });
- return placeArr;
- }
-
- private canDisplay(rect): boolean {
- if(this.isSheltered(rect, window)) {
- return false;
- } else {
- var pElement = this.getParentElement(window);
- if(pElement) {
- const shelter = this.getShelter(pElement, window.parent, rect);
- if(shelter) {
- return false;
- } else {
- return true;
- }
- } else {
- return true;
- }
-
- }
- }
-
- /**
- * 判断当前位置在对应的窗口中是否会被遮挡
- * 用于iframe嵌套的场景
- * @param position
- * @param currentWindow
- */
- private isSheltered(position, currentWindow) {
- if(position.left < 0 || position.top < 0
- || position.right > currentWindow.document.documentElement.clientWidth
- || position.bottom > currentWindow.document.documentElement.clientHeight) {
- return true;
- } else {
- return false;
- }
- }
-
- /**
- * 递归判断当前元素是否会被视口遮挡
- * @param element
- * @param currentWindow
- * @param position
- */
- public getShelter(element, currentWindow, position) {
- var rect = element.getBoundingClientRect();
- position.left += rect.left;
- position.right += rect.left;
- position.top += rect.top;
- position.bottom += rect.top;
-
- if(this.isSheltered(position, currentWindow)) {
- return element;
- } else {
- if(currentWindow.parent != currentWindow) { // 判断是否到达最顶级容器
- var pElement = this.getParentElement(currentWindow);
- return this.getShelter(pElement, currentWindow.parent, position);
- } else {
- return null;
- }
- }
- }
-
- /**
- * 查找当前容器在父窗口中的dom元素
- * 如：iframe场景中，则为在子页面中查找父页面中的iframe节点
- * @param currentWindow
- */
- public getParentElement(currentWindow) {
- if(currentWindow.parent !== currentWindow) {
- var parentWindow = currentWindow.parent;
- var frames = parentWindow.document.getElementsByTagName("iframe");
- for(var i=0; i<frames.length; i++) {
- if(frames[i].contentWindow === currentWindow) {
- return frames[i];
- }
- }
- }
- }
-
- private getBoundingClientRect(placementPrimary, placementSecondary, hostElement, targetElement) {
- const hostBcr = hostElement.getBoundingClientRect();
-
- // const shiftWidth = {
- // left: hostBcr.left,
- // center: hostBcr.left + hostElement.offsetWidth/2 - targetElement.offsetWidth/2,
- // right: hostBcr.left + hostElement.offsetWidth,
- // };
- // const shiftHeight = {
- // top: hostBcr.top,
- // center: hostBcr.top + hostElement.offsetHeight/2 - targetElement.offsetHeight/2,
- // bottom: hostBcr.top + hostElement.offsetHeight,
- // };
-
- const shiftWidth: any = {
- left: hostBcr.left,
- center: hostBcr.left + hostBcr.width / 2 - targetElement.offsetWidth / 2,
- right: hostBcr.right - targetElement.offsetWidth
- };
- const shiftHeight: any = {
- top: hostBcr.top,
- center: hostBcr.top + hostBcr.height / 2 - targetElement.offsetHeight / 2,
- bottom: hostBcr.bottom - targetElement.offsetHeight
- };
- switch (placementPrimary) {
- case 'top':
- return {
- top: hostBcr.top - targetElement.offsetHeight,
- bottom: hostBcr.top,
- left: shiftWidth[placementSecondary],
- right: shiftWidth[placementSecondary] + targetElement.offsetWidth
- };
- case 'bottom':
- return {
- top: hostBcr.bottom,
- bottom: hostBcr.bottom + targetElement.offsetHeight,
- left: shiftWidth[placementSecondary],
- right: shiftWidth[placementSecondary] + targetElement.offsetWidth
- };
- case 'left':
- return {
- top: shiftHeight[placementSecondary],
- bottom: shiftHeight[placementSecondary] + targetElement.offsetHeight,
- left: hostBcr.left - targetElement.offsetWidth,
- right: hostBcr.left
- };
- case 'right':
- return {
- top: shiftHeight[placementSecondary],
- bottom: shiftHeight[placementSecondary] + targetElement.offsetHeight,
- left: hostBcr.right,
- right: hostBcr.right + targetElement.offsetWidth,
- };
- }
- }
-
- public positionElements(hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean): ClientRect {
- const hostElPosition = appendToBody ? this.offset(hostElement, false) : this.position(hostElement, false);
- const shiftWidthPri: any = {
- left: hostElPosition.left,
- right: hostElPosition.left + hostElPosition.width
- };
- const shiftHeightPri: any = {
- top: hostElPosition.top,
- bottom: hostElPosition.top + hostElPosition.height
- };
- const targetElBCR = targetElement.getBoundingClientRect();
- placement = this.getPlacementPrimary(hostElement, targetElement, placement);
- let placementPrimary = placement.split('-')[0] || 'top';
- const placementSecondary = placement.split('-')[1] || 'center';
-
- let targetElPosition: ClientRect = {
- height: targetElBCR.height || targetElement.offsetHeight,
- width: targetElBCR.width || targetElement.offsetWidth,
- top: 0,
- bottom: targetElBCR.height || targetElement.offsetHeight,
- left: 0,
- right: targetElBCR.width || targetElement.offsetWidth
- };
- const shiftWidthSec: any = {
- left: hostElPosition.left,
- center: hostElPosition.left + hostElPosition.width / 2 - targetElement.offsetWidth / 2,
- right: hostElPosition.right - targetElement.offsetWidth
- };
- const shiftHeightSec: any = {
- top: hostElPosition.top,
- center: hostElPosition.top + hostElPosition.height / 2 - targetElement.offsetHeight / 2,
- bottom: hostElPosition.bottom - targetElement.offsetHeight
- };
-
- switch (placementPrimary) {
- case 'top':
- targetElPosition.top = hostElPosition.top - targetElement.offsetHeight;
- targetElPosition.bottom += hostElPosition.top - targetElement.offsetHeight;
- targetElPosition.left = shiftWidthSec[placementSecondary];
- targetElPosition.right += shiftWidthSec[placementSecondary];
- break;
- case 'bottom':
- targetElPosition.top = shiftHeightPri[placementPrimary];
- targetElPosition.bottom += shiftHeightPri[placementPrimary];
- targetElPosition.left = shiftWidthSec[placementSecondary];
- targetElPosition.right += shiftWidthSec[placementSecondary];
- break;
- case 'left':
- targetElPosition.top = shiftHeightSec[placementSecondary];
- targetElPosition.bottom += shiftHeightSec[placementSecondary];
- targetElPosition.left = hostElPosition.left - targetElement.offsetWidth;
- targetElPosition.right += hostElPosition.left - targetElement.offsetWidth;
- break;
- case 'right':
- targetElPosition.top = shiftHeightSec[placementSecondary];
- targetElPosition.bottom += shiftHeightSec[placementSecondary];
- targetElPosition.left = shiftWidthPri[placementPrimary];
- targetElPosition.right += shiftWidthPri[placementPrimary];
- break;
- }
-
- targetElPosition.top = Math.round(targetElPosition.top);
- targetElPosition.bottom = Math.round(targetElPosition.bottom);
- targetElPosition.left = Math.round(targetElPosition.left);
- targetElPosition.right = Math.round(targetElPosition.right);
-
- return targetElPosition;
- }
-
- public positionElements_bak(hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean): ClientRect {
- const hostElPosition = appendToBody ? this.offset(hostElement, false) : this.position(hostElement, false);
- const shiftWidth: any = {
- left: hostElPosition.left,
- center: hostElPosition.left + hostElPosition.width / 2 - targetElement.offsetWidth / 2,
- right: hostElPosition.left + hostElPosition.width
- };
- const shiftHeight: any = {
- top: hostElPosition.top,
- center: hostElPosition.top + hostElPosition.height / 2 - targetElement.offsetHeight / 2,
- bottom: hostElPosition.top + hostElPosition.height
- };
- const targetElBCR = targetElement.getBoundingClientRect();
- const placementPrimary = placement.split('-')[0] || 'top';
- const placementSecondary = placement.split('-')[1] || 'center';
-
- let targetElPosition: ClientRect = {
- height: targetElBCR.height || targetElement.offsetHeight,
- width: targetElBCR.width || targetElement.offsetWidth,
- top: 0,
- bottom: targetElBCR.height || targetElement.offsetHeight,
- left: 0,
- right: targetElBCR.width || targetElement.offsetWidth
- };
-
- switch (placementPrimary) {
- case 'top':
- targetElPosition.top = hostElPosition.top - targetElement.offsetHeight;
- targetElPosition.bottom += hostElPosition.top - targetElement.offsetHeight;
- targetElPosition.left = shiftWidth[placementSecondary];
- targetElPosition.right += shiftWidth[placementSecondary];
- break;
- case 'bottom':
- targetElPosition.top = shiftHeight[placementPrimary];
- targetElPosition.bottom += shiftHeight[placementPrimary];
- targetElPosition.left = shiftWidth[placementSecondary];
- targetElPosition.right += shiftWidth[placementSecondary];
- break;
- case 'left':
- targetElPosition.top = shiftHeight[placementSecondary];
- targetElPosition.bottom += shiftHeight[placementSecondary];
- targetElPosition.left = hostElPosition.left - targetElement.offsetWidth;
- targetElPosition.right += hostElPosition.left - targetElement.offsetWidth;
- break;
- case 'right':
- targetElPosition.top = shiftHeight[placementSecondary];
- targetElPosition.bottom += shiftHeight[placementSecondary];
- targetElPosition.left = shiftWidth[placementPrimary];
- targetElPosition.right += shiftWidth[placementPrimary];
- break;
- }
-
- targetElPosition.top = Math.round(targetElPosition.top);
- targetElPosition.bottom = Math.round(targetElPosition.bottom);
- targetElPosition.left = Math.round(targetElPosition.left);
- targetElPosition.right = Math.round(targetElPosition.right);
-
- return targetElPosition;
- }
-}
-
-const positionService = new Positioning();
-export function positionElements(hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean): void {
- const pos = positionService.positionElements(hostElement, targetElement, placement, appendToBody);
-
- targetElement.style.top = `${pos.top}px`;
- targetElement.style.left = `${pos.left}px`;
-}
-
-export function getPlacement(hostElement: HTMLElement, targetElement: HTMLElement, placement: string): any {
- const placementPrimary = positionService.getPlacementPrimary(hostElement, targetElement, placement);
- console.log(placementPrimary);
- return placementPrimary;
-}