From fa88aeeff3639013c36b3c9af7181a3654f26c32 Mon Sep 17 00:00:00 2001 From: astagnol <53512103+astagnol@users.noreply.github.com> Date: Tue, 18 Jul 2023 09:53:10 +0200 Subject: [PATCH] feat(cdk): manage edge cases (#99) --- .../ocdk-surface-basic-position.ts | 12 ++ .../ocdk-surface-basic-example/public-api.ts | 1 + .../ocdk-surface-tooltip-example.tsx | 6 + .../ocdk-surface-tooltip-position.ts | 4 +- .../dev/src/components/surface/public-api.ts | 1 + packages/libraries/cdk/dev/src/index.html | 9 ++ packages/libraries/cdk/dev/src/www.ts | 1 - .../strategies/overlay.strategy.symmetry.mdx | 4 +- .../surface/core/ocdk-surface-corner.ts | 4 + .../core/ocdk-surface-normalized-corner.ts | 4 + .../ocdk-surface-symmetry-strategy.ts | 6 +- .../symmetry/ocdk-surface-symmetry.bc-tc.ts | 122 ++++++++++++++++++ .../symmetry/ocdk-surface-symmetry.bl-br.ts | 17 ++- .../symmetry/ocdk-surface-symmetry.bl-tl.ts | 16 ++- .../symmetry/ocdk-surface-symmetry.br-bl.ts | 17 ++- .../symmetry/ocdk-surface-symmetry.br-tr.ts | 15 +++ .../symmetry/ocdk-surface-symmetry.tc-bc.ts | 122 ++++++++++++++++++ .../symmetry/ocdk-surface-symmetry.tl-bl.ts | 15 +++ .../symmetry/ocdk-surface-symmetry.tl-tr.ts | 15 +++ .../symmetry/ocdk-surface-symmetry.tr-br.ts | 15 +++ .../symmetry/ocdk-surface-symmetry.tr-tl.ts | 15 +++ .../surface/strategies/symmetry/public-api.ts | 2 + .../examples/basic/overlay.basic.stories.tsx | 12 +- 23 files changed, 421 insertions(+), 14 deletions(-) create mode 100644 packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/ocdk-surface-basic-position.ts create mode 100644 packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/public-api.ts create mode 100644 packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bc-tc.ts create mode 100644 packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tc-bc.ts diff --git a/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/ocdk-surface-basic-position.ts b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/ocdk-surface-basic-position.ts new file mode 100644 index 0000000000..1375a65f39 --- /dev/null +++ b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/ocdk-surface-basic-position.ts @@ -0,0 +1,12 @@ +export const OcdkSurfaceBasicPositionList: string[] = [ + 'TOP_LEFT TOP_RIGHT', + 'TOP_RIGHT TOP_LEFT', + 'BOTTOM_LEFT BOTTOM_RIGHT', + 'BOTTOM_RIGHT BOTTOM_LEFT', + 'BOTTOM_LEFT TOP_LEFT', + 'TOP_LEFT BOTTOM_LEFT', + 'BOTTOM_RIGHT TOP_RIGHT', + 'TOP_RIGHT BOTTOM_RIGHT', + 'BOTTOM_CENTER TOP_CENTER', + 'TOP_CENTER BOTTOM_CENTER', +]; diff --git a/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/public-api.ts b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/public-api.ts new file mode 100644 index 0000000000..34564980a3 --- /dev/null +++ b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-basic-example/public-api.ts @@ -0,0 +1 @@ +export * from './ocdk-surface-basic-position'; diff --git a/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-example.tsx b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-example.tsx index c950230ed4..2bb49df68f 100644 --- a/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-example.tsx +++ b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-example.tsx @@ -109,6 +109,12 @@ export class OcdkSurfaceTooltipExample { case OcdkSurfaceTooltipPosition.RIGHT: this.surface.setCornerPoints({ anchor: OcdkSurfaceCorner.TOP_RIGHT, origin: OcdkSurfaceCorner.TOP_LEFT }); break; + case OcdkSurfaceTooltipPosition.BOTTOM_CENTER: + this.surface.setCornerPoints({ anchor: OcdkSurfaceCorner.BOTTOM_CENTER, origin: OcdkSurfaceCorner.TOP_CENTER }); + break; + case OcdkSurfaceTooltipPosition.TOP_CENTER: + this.surface.setCornerPoints({ anchor: OcdkSurfaceCorner.TOP_CENTER, origin: OcdkSurfaceCorner.BOTTOM_CENTER }); + break; } } diff --git a/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-position.ts b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-position.ts index 13825b72aa..a19992097b 100644 --- a/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-position.ts +++ b/packages/libraries/cdk/dev/src/components/surface/ocdk-surface-tooltip-example/ocdk-surface-tooltip-position.ts @@ -2,7 +2,9 @@ export enum OcdkSurfaceTooltipPosition { TOP = 'TOP', BOTTOM = 'BOTTOM', LEFT = 'LEFT', - RIGHT = 'RIGHT' + RIGHT = 'RIGHT', + BOTTOM_CENTER = 'BOTTOM_CENTER', + TOP_CENTER = 'TOP_CENTER', } export type OcdkSurfaceTooltipPositionUnion = `${OcdkSurfaceTooltipPosition}`; diff --git a/packages/libraries/cdk/dev/src/components/surface/public-api.ts b/packages/libraries/cdk/dev/src/components/surface/public-api.ts index f75598d3c3..d4d93832b6 100644 --- a/packages/libraries/cdk/dev/src/components/surface/public-api.ts +++ b/packages/libraries/cdk/dev/src/components/surface/public-api.ts @@ -1,3 +1,4 @@ +export * from './ocdk-surface-basic-example/public-api'; export * from './ocdk-surface-tooltip-example/public-api'; export * from './ocdk-surface-select-example/public-api'; export * from './strategies/public-api'; diff --git a/packages/libraries/cdk/dev/src/index.html b/packages/libraries/cdk/dev/src/index.html index 7b98765c8e..8fe18ee120 100644 --- a/packages/libraries/cdk/dev/src/index.html +++ b/packages/libraries/cdk/dev/src/index.html @@ -254,7 +254,16 @@

tooltip example

+ +

centered surface tooltip example

+
+ + + + + +
diff --git a/packages/libraries/cdk/dev/src/www.ts b/packages/libraries/cdk/dev/src/www.ts index df4262ba41..cb785ba2f1 100644 --- a/packages/libraries/cdk/dev/src/www.ts +++ b/packages/libraries/cdk/dev/src/www.ts @@ -50,7 +50,6 @@ logger.log('init'); } } - (window as any).basic3Toggle = () => { // synchronize the trigger element (anchor) with the surface when both are available if (basicTrigger3 && basicSurface3) { diff --git a/packages/libraries/cdk/doc/overlay/strategies/overlay.strategy.symmetry.mdx b/packages/libraries/cdk/doc/overlay/strategies/overlay.strategy.symmetry.mdx index 83cbc56c47..655f01b26a 100644 --- a/packages/libraries/cdk/doc/overlay/strategies/overlay.strategy.symmetry.mdx +++ b/packages/libraries/cdk/doc/overlay/strategies/overlay.strategy.symmetry.mdx @@ -12,8 +12,8 @@ The main principles are: ## Symmetry position table -Positions that correspond to a `vertical` and `horizontal` positioning are defined (`green tick`). -Some are not available because of the overlapping of the `surface` container on top of the `anchor` (`red cross`). +Positions that correspond to a `vertical` and `horizontal` positioning are defined (`green tick`). The surface can be centered at the top or bottom of the trigger. +Some positions are not available because of the overlapping of the `surface` container on top of the `anchor` (`red cross`). The `orange` arrows shows the position switching when there is not enough space on the vertical `Y` axis. The `blue` arrows are here for horizontal axis. diff --git a/packages/libraries/cdk/src/components/surface/core/ocdk-surface-corner.ts b/packages/libraries/cdk/src/components/surface/core/ocdk-surface-corner.ts index 49df700357..0625f93575 100644 --- a/packages/libraries/cdk/src/components/surface/core/ocdk-surface-corner.ts +++ b/packages/libraries/cdk/src/components/surface/core/ocdk-surface-corner.ts @@ -6,10 +6,14 @@ export enum OcdkSurfaceCorner { TOP_LEFT = 0, /** 4 */ TOP_RIGHT = OcdkSurfaceCornerBit.RIGHT, + /** 2 */ + TOP_CENTER = OcdkSurfaceCornerBit.CENTER, /** 1 */ BOTTOM_LEFT = OcdkSurfaceCornerBit.BOTTOM, /** 5 */ BOTTOM_RIGHT = OcdkSurfaceCornerBit.BOTTOM | OcdkSurfaceCornerBit.RIGHT, // tslint:disable-line:no-bitwise + /** 3 */ + BOTTOM_CENTER = 3, /** 8 */ TOP_START = OcdkSurfaceCornerBit.FLIP_RTL, /** 12 */ diff --git a/packages/libraries/cdk/src/components/surface/core/ocdk-surface-normalized-corner.ts b/packages/libraries/cdk/src/components/surface/core/ocdk-surface-normalized-corner.ts index 72dc8e512e..e9849ca5db 100644 --- a/packages/libraries/cdk/src/components/surface/core/ocdk-surface-normalized-corner.ts +++ b/packages/libraries/cdk/src/components/surface/core/ocdk-surface-normalized-corner.ts @@ -5,8 +5,12 @@ export enum OcdkSurfaceNormalizedCorner { TOP_LEFT = 0, /** 4 */ TOP_RIGHT = OcdkSurfaceCornerBit.RIGHT, + /** 2 */ + TOP_CENTER = OcdkSurfaceCornerBit.CENTER, /** 1 */ BOTTOM_LEFT = OcdkSurfaceCornerBit.BOTTOM, /** 5 */ BOTTOM_RIGHT = OcdkSurfaceCornerBit.BOTTOM | OcdkSurfaceCornerBit.RIGHT, // tslint:disable-line:no-bitwise + /** 3 */ + BOTTOM_CENTER = 3, } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry-strategy.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry-strategy.ts index dba81e1088..c27da1e30a 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry-strategy.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry-strategy.ts @@ -1,6 +1,7 @@ import { OcdkSurfaceStrategyDefiner } from '../../core/system/ocdk-surface-strategy-definer'; import { OcdkSurfaceStrategyDefinerConfig } from '../../core/system/ocdk-surface-strategy-definer-config'; import { OcdkSurfaceOnePositionStrategy } from '../../core/ocdk-surface-one-position-strategy'; +import { ocdkSurfaceSymmetryBcTc } from './ocdk-surface-symmetry.bc-tc'; import { ocdkSurfaceSymmetryBlBr } from './ocdk-surface-symmetry.bl-br'; import { ocdkSurfaceSymmetryBlTl } from './ocdk-surface-symmetry.bl-tl'; import { ocdkSurfaceSymmetryBrBl } from './ocdk-surface-symmetry.br-bl'; @@ -9,6 +10,7 @@ import { ocdkSurfaceSymmetryTlBl } from './ocdk-surface-symmetry.tl-bl'; import { ocdkSurfaceSymmetryTrBr } from './ocdk-surface-symmetry.tr-br'; import { ocdkSurfaceSymmetryTlTr } from './ocdk-surface-symmetry.tl-tr'; import { ocdkSurfaceSymmetryTrTl } from './ocdk-surface-symmetry.tr-tl'; +import { ocdkSurfaceSymmetryTcBc } from './ocdk-surface-symmetry.tc-bc'; /** * global config to implement for the `symmetry` strategy @@ -32,12 +34,14 @@ export class OcdkSurfaceSymmetryStrategy implements OcdkSurfaceStrategyDefiner { + const loggerSymmetry = new OcdkLogger('ocdkSurfaceSymmetryBcTc'); + const helpers = OcdkSurfaceSymmetryStrategyHelpers; + + return { + cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.BOTTOM_CENTER, origin: OcdkSurfaceNormalizedCorner.TOP_CENTER }, + STRATEGIES: { + standard: { + inspectors: { + comfort: { + availableTop: (opt) => opt.measurements.viewportDistance.top - opt.config.anchorMargin.top - opt.config.MARGIN_TO_EDGE_COMFORT + opt.measurements.anchorSize.height, + availableBottom: (opt) => opt.measurements.viewportDistance.bottom - opt.config.anchorMargin.bottom - opt.config.MARGIN_TO_EDGE_COMFORT, + availableLeft: (opt) => opt.measurements.viewportDistance.left - opt.config.anchorMargin.left - opt.config.MARGIN_TO_EDGE_COMFORT, + availableRight: (opt) => opt.measurements.viewportDistance.right - opt.config.anchorMargin.right - opt.config.MARGIN_TO_EDGE_COMFORT + opt.measurements.anchorSize.width + } + }, + appliers: { + maxHeight: (opt) => opt.inspections.comfort.availableBottom, + maxWidth: (opt) => opt.measurements.surfaceSize.width, + verticalOffset: (opt) => opt.measurements.anchorSize.height + opt.config.anchorMargin.bottom, + verticalAlignment: 'top', + // center surface + horizontalOffset: (opt) => (opt.measurements.anchorSize.width - opt.measurements.surfaceSize.width)/2, + horizontalAlignment: 'right' + } + }, + FALLBACK: { + inspectors: { + comfort: { + availableBottom: (opt) => opt.measurements.viewportSize.height - 2 * opt.config.MARGIN_TO_EDGE_COMFORT + }, + limit: { + availableBottom: (opt) => opt.measurements.viewportSize.height - 2 * opt.config.MARGIN_TO_EDGE_LIMIT + }, + }, + appliers: { + maxHeight: (opt) => helpers.symmetryFallbackMaxHeight(opt, opt.inspections.comfort.availableBottom, opt.inspections.limit.availableBottom, true), + maxWidth: (opt) => opt.measurements.surfaceSize.width, + verticalOffset: (opt) => helpers.symmetryFallbackVerticalOffset(opt, opt.inspections.comfort.availableBottom, opt.inspections.limit.availableBottom, true), + verticalAlignment: 'top', + horizontalOffset: (opt) => (opt.measurements.anchorSize.width - opt.measurements.surfaceSize.width)/2, + horizontalAlignment: 'right' + } + }, + COMPUTE: (opt) => { + loggerSymmetry.log('[COMPUTE] position BOTTOM_CENTER TOP_CENTER'); + if (opt.measurements.surfaceSize.height > opt.inspections.comfort.availableBottom) { + // already in a switch process and this new position isn't good enough, go to the fallback of the last strategy position + if (opt.switchFrom && isOcdkSurfaceStrategyComputeResultPosition(opt.switchFrom) && opt.switchFrom.position) { + loggerSymmetry.log('[COMPUTE] already switched off but no enough space: continue with the fallback of bc-tc', opt.switchFrom); + return opt.switchFrom.position.STRATEGIES.FALLBACK; + } + // Check available space on right and left + switch (true) { + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT + } + }; + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT + } + }; + default: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_CENTER, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_CENTER + } + }; + } + } + // Check available space on right and left + switch (true) { + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, + origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT + } + }; + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, + origin: OcdkSurfaceNormalizedCorner.TOP_LEFT + } + }; + } + return; // no position switching: apply the current one + } + + } + }; +} diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-br.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-br.ts index 3274af5e57..e8f14e237c 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-br.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-br.ts @@ -37,7 +37,7 @@ export function ocdkSurfaceSymmetryBlBr(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableBottom, + maxHeight: (opt) => opt.inspections.comfort.availableTop, maxWidth: (opt) => opt.inspections.comfort.availableLeft, verticalOffset: () => 0, verticalAlignment: 'bottom', @@ -72,12 +72,27 @@ export function ocdkSurfaceSymmetryBlBr(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableTop) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, + origin: OcdkSurfaceNormalizedCorner.TOP_LEFT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT } }; + } else if (opt.measurements.surfaceSize.height > opt.inspections.comfort.availableTop) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, + origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-tl.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-tl.ts index 9a0f3151e5..518e3d5d63 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-tl.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.bl-tl.ts @@ -121,19 +121,33 @@ export function ocdkSurfaceSymmetryBlTl(): OcdkSurfaceOnePositionStrategy { loggerSymmetry.log('[COMPUTE] position BOTTOM_LEFT TOP_LEFT'); - // no enough available space on bottom, trigger a position change to top instead if (opt.measurements.surfaceSize.height > opt.inspections.comfort.availableBottom) { // already in a switch process and this new position isn't good enough, go to the fallback of the last strategy position if (opt.switchFrom && isOcdkSurfaceStrategyComputeResultPosition(opt.switchFrom) && opt.switchFrom.position) { loggerSymmetry.log('[COMPUTE] already switched off but no enough space: continue with the fallback of bl-tl', opt.switchFrom); return opt.switchFrom.position.STRATEGIES.FALLBACK; } + if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT } }; + } else if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, + origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-bl.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-bl.ts index 35c19468cd..d4a90a4ce7 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-bl.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-bl.ts @@ -36,7 +36,7 @@ export function ocdkSurfaceSymmetryBrBl(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableBottom, + maxHeight: (opt) => opt.inspections.comfort.availableTop, maxWidth: (opt) => opt.inspections.comfort.availableRight, verticalOffset: () => 0, verticalAlignment: 'bottom', @@ -71,12 +71,27 @@ export function ocdkSurfaceSymmetryBrBl(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableTop) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, + origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT } }; + } else if (opt.measurements.surfaceSize.height > opt.inspections.comfort.availableTop) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, + origin: OcdkSurfaceNormalizedCorner.TOP_LEFT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-tr.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-tr.ts index b53660eb5c..d219cff143 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-tr.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.br-tr.ts @@ -75,12 +75,27 @@ export function ocdkSurfaceSymmetryBrTr(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableLeft) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT } }; + } else if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, + origin: OcdkSurfaceNormalizedCorner.TOP_LEFT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tc-bc.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tc-bc.ts new file mode 100644 index 0000000000..7e6e1042ed --- /dev/null +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tc-bc.ts @@ -0,0 +1,122 @@ +import { OcdkSurfaceSymmetryConfig } from './ocdk-surface-symmetry-strategy'; +import { OcdkSurfaceNormalizedCorner } from '../../core/ocdk-surface-normalized-corner'; +import { OcdkLogger } from '../../../../logger/ocdk-logger'; +import { OcdkSurfaceSymmetryStrategyHelpers } from './ocdk-surface-symmetry-strategy.helpers'; +import { isOcdkSurfaceStrategyComputeResultPosition } from '../../core/system/ocdk-surface-strategy-compute-result-position'; +import { OcdkSurfaceOnePositionStrategy } from '../../core/ocdk-surface-one-position-strategy'; + +/** + * ``` + * +--surface--+ + * | | + * o-----------o + * o-----anchor-----o + * | | + * +----------------+ + * + * o = normalized corner + * x = reference for the position offset (at top/left - for verticalAlignment/horizontalAlignment) + * ``` + */ +export function ocdkSurfaceSymmetryTcBc(): OcdkSurfaceOnePositionStrategy { + const loggerSymmetry = new OcdkLogger('ocdkSurfaceSymmetryTcBc'); + const helpers = OcdkSurfaceSymmetryStrategyHelpers; + + return { + cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.TOP_CENTER, origin: OcdkSurfaceNormalizedCorner.BOTTOM_CENTER }, + STRATEGIES: { + standard: { + inspectors: { + comfort: { + availableTop: (opt) => opt.measurements.viewportDistance.top - opt.config.anchorMargin.top - opt.config.MARGIN_TO_EDGE_COMFORT, + availableBottom: (opt) => opt.measurements.viewportDistance.bottom - opt.config.anchorMargin.bottom - opt.config.MARGIN_TO_EDGE_COMFORT + opt.measurements.anchorSize.height, + availableLeft: (opt) => opt.measurements.viewportDistance.left - opt.config.anchorMargin.left - opt.config.MARGIN_TO_EDGE_COMFORT, + availableRight: (opt) => opt.measurements.viewportDistance.right - opt.config.anchorMargin.right - opt.config.MARGIN_TO_EDGE_COMFORT + opt.measurements.anchorSize.width, + } + }, + appliers: { + maxHeight: (opt) => opt.inspections.comfort.availableTop, + maxWidth: (opt) => opt.measurements.surfaceSize.width, + verticalOffset: (opt) => -opt.config.anchorMargin.top - opt.measurements.surfaceSize.height, + verticalAlignment: 'top', + // center surface + horizontalOffset: (opt) => (opt.measurements.anchorSize.width - opt.measurements.surfaceSize.width) / 2, + horizontalAlignment: 'right' + } + }, + FALLBACK: { + inspectors: { + comfort: { + availableTop: (opt) => opt.measurements.viewportSize.height - 2 * opt.config.MARGIN_TO_EDGE_COMFORT + }, + limit: { + availableTop: (opt) => opt.measurements.viewportSize.height - 2 * opt.config.MARGIN_TO_EDGE_LIMIT + } + }, + appliers: { + maxHeight: (opt) => helpers.symmetryFallbackMaxHeight(opt, opt.inspections.comfort.availableTop, opt.inspections.limit.availableTop, false), + maxWidth: (opt) => opt.measurements.surfaceSize.width, + verticalOffset: (opt) => helpers.symmetryFallbackVerticalOffset(opt, opt.inspections.comfort.availableTop, opt.inspections.limit.availableTop, false), + verticalAlignment: 'top', + horizontalOffset: (opt) => (opt.measurements.anchorSize.width - opt.measurements.surfaceSize.width) / 2, + horizontalAlignment: 'right' + } + }, + COMPUTE: (opt) => { + loggerSymmetry.log('[COMPUTE] position TOP_CENTER BOTTOM_CENTER'); + // no enough available space on top, trigger a position change to bottom instead + if (opt.measurements.surfaceSize.height > opt.inspections.comfort.availableTop) { + // already in a switch process and this new position isn't good enough, go to the fallback of the last strategy position + if (opt.switchFrom && isOcdkSurfaceStrategyComputeResultPosition(opt.switchFrom) && opt.switchFrom.position) { + loggerSymmetry.log('[COMPUTE] already switched off but no enough space: continue with the fallback of tc-bc', opt.switchFrom); + return opt.switchFrom.position.STRATEGIES.FALLBACK; + } + // Check available space on right and left + switch (true) { + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, + origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT + } + }; + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, + origin: OcdkSurfaceNormalizedCorner.TOP_LEFT + } + }; + default: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_CENTER, + origin: OcdkSurfaceNormalizedCorner.TOP_CENTER + } + }; + } + } + + // Check available space on right and left + switch (true) { + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT + } + }; + case opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft: + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT + } + }; + } + return; // no position switching: apply the current one + } + + } + }; +} diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-bl.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-bl.ts index 073b0d8098..64379e4fe0 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-bl.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-bl.ts @@ -70,12 +70,27 @@ export function ocdkSurfaceSymmetryTlBl(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableRight) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, + origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, origin: OcdkSurfaceNormalizedCorner.TOP_LEFT } }; + } else if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableRight) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-tr.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-tr.ts index 7871549136..85ffc666da 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-tr.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tl-tr.ts @@ -70,12 +70,27 @@ export function ocdkSurfaceSymmetryTlTr(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableBottom) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.TOP_RIGHT, origin: OcdkSurfaceNormalizedCorner.TOP_LEFT } }; + } else if (opt.measurements.surfaceSize.height > opt.inspections.comfort.availableBottom) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-br.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-br.ts index e8ce4f900c..9c0c2e227d 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-br.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-br.ts @@ -73,12 +73,27 @@ export function ocdkSurfaceSymmetryTrBr(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableLeft) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, + origin: OcdkSurfaceNormalizedCorner.TOP_LEFT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT } }; + } else if (opt.measurements.surfaceSize.width > opt.inspections.comfort.availableLeft) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-tl.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-tl.ts index 7565738954..d0194183f6 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-tl.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/ocdk-surface-symmetry.tr-tl.ts @@ -70,12 +70,27 @@ export function ocdkSurfaceSymmetryTrTl(): OcdkSurfaceOnePositionStrategy opt.inspections.comfort.availableBottom) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT + } + }; + } return { cornerPoints: { anchor: OcdkSurfaceNormalizedCorner.TOP_LEFT, origin: OcdkSurfaceNormalizedCorner.TOP_RIGHT } }; + } else if (opt.measurements.surfaceSize.height > opt.inspections.comfort.availableBottom) { + return { + cornerPoints: { + anchor: OcdkSurfaceNormalizedCorner.BOTTOM_RIGHT, + origin: OcdkSurfaceNormalizedCorner.BOTTOM_LEFT + } + }; } return; // no position switching: apply the current one } diff --git a/packages/libraries/cdk/src/components/surface/strategies/symmetry/public-api.ts b/packages/libraries/cdk/src/components/surface/strategies/symmetry/public-api.ts index e429dc99e4..2e475d99a7 100644 --- a/packages/libraries/cdk/src/components/surface/strategies/symmetry/public-api.ts +++ b/packages/libraries/cdk/src/components/surface/strategies/symmetry/public-api.ts @@ -1,7 +1,9 @@ +export * from './ocdk-surface-symmetry.bc-tc'; export * from './ocdk-surface-symmetry.bl-br'; export * from './ocdk-surface-symmetry.bl-tl'; export * from './ocdk-surface-symmetry.br-bl'; export * from './ocdk-surface-symmetry.br-tr'; +export * from './ocdk-surface-symmetry.tc-bc'; export * from './ocdk-surface-symmetry.tl-bl'; export * from './ocdk-surface-symmetry.tr-br'; export * from './ocdk-surface-symmetry.tl-tr'; diff --git a/packages/tools/storybook/stories/cdk/overlay/examples/basic/overlay.basic.stories.tsx b/packages/tools/storybook/stories/cdk/overlay/examples/basic/overlay.basic.stories.tsx index f07a9a16ac..0043a6da53 100644 --- a/packages/tools/storybook/stories/cdk/overlay/examples/basic/overlay.basic.stories.tsx +++ b/packages/tools/storybook/stories/cdk/overlay/examples/basic/overlay.basic.stories.tsx @@ -5,8 +5,8 @@ import page from './overlay.basic.stories.page.mdx'; import { play } from './overlay.basic.stories.play'; import { OcdkSurfaceCorner, - OcdkSurfaceCornerPointNameList, } from '@ovhcloud/ods-cdk/src'; +import { OcdkSurfaceBasicPositionList } from '@ovhcloud/ods-cdk-dev/src'; import { olesIpsum, OlesIpsumGeneration } from '@ovhcloud/ods-core/src'; import { styleMap } from 'lit-html/directives/style-map'; @@ -24,10 +24,10 @@ const storyParams = { corners: { category: 'General', description: 'choose the anchor and surface position reference', - defaultValue: 'BOTTOM_START TOP_START', - options: OcdkSurfaceCornerPointNameList, + defaultValue: 'BOTTOM_LEFT TOP_LEFT', + options: OcdkSurfaceBasicPositionList, control: { type: 'select' }, - table: { defaultValue: { summary: 'BOTTOM_START TOP_START' } } + table: { defaultValue: { summary: 'BOTTOM_LEFT TOP_LEFT' } } }, animated: { category: 'General', @@ -96,7 +96,7 @@ export default { /* Default */ const Template = (args: any) => { - let corners = [OcdkSurfaceCorner.BOTTOM_START, OcdkSurfaceCorner.TOP_START]; + let corners = [OcdkSurfaceCorner.BOTTOM_LEFT, OcdkSurfaceCorner.TOP_LEFT]; if(args.corners) { const cornersFromArgs = args.corners.split(' '); if(cornersFromArgs && cornersFromArgs[0] && cornersFromArgs[1]) { @@ -142,7 +142,7 @@ const Template = (args: any) => {

${args.applyContent ? olesIpsum(OlesIpsumGeneration.paragraphs, 2) : ''}

my trigger
- My surface + My surface Content

${args.applyContent ? olesIpsum(OlesIpsumGeneration.paragraphs, 2) : ''}