[O2B-1077] Add margins between popover and screen edges (#1297)

* [O2B-1077] Add margins between popover and screen edges

* Fix linter

Author: martinboulais

lib/public/components/common/popover/PopoverEngine.js

@@ -16,20 +16,26 @@
  *
  * Object able to project a bounding box 2D data to only one of its dimensions
  *
- * @property {(subject: BoundingBox) => number} getPosition return the position of the subject
- * @property {(subject: BoundingBox, position: number) => void} setPosition set the position of the subject to a given value
- * @property {(subject: BoundingBox) => number} getSize return the size of the subject
- * @property {(subject: BoundingBox, size: number) => void} setSize set the size of the subject to a given value
+ * @template T
+ *
+ * @property {(subject: {left: T, top: T} | {x: T, y: T}) => T} getPosition return the position of the subject
+ * @property {(subject: {left: T, top: T} | {x: T, y: T}, position: T) => void} setPosition set the position of the subject to a given value
+ * @property {(subject: {width: T, height: T}) => t} getSize return the size of the subject
+ * @property {(subject: {width: T, height: T}, size: T) => void} setSize set the size of the subject to a given value
  */
 
 /**
  * @type BoundingBoxProjector
  */
 const verticalProjector = Object.freeze({
-    getPosition: (subject) => subject.top,
+    getPosition: (subject) => 'top' in subject ? subject.top : subject.y,
 
     setPosition: (subject, position) => {
-        subject.top = position;
+        if ('top' in subject) {
+            subject.top = position;
+        } else {
+            subject.y = position;
+        }
     },
 
     getSize: (subject) => subject.height,
@@ -43,10 +49,14 @@ const verticalProjector = Object.freeze({
  * @type BoundingBoxProjector
  */
 const horizontalProjector = Object.freeze({
-    getPosition: (subject) => subject.left,
+    getPosition: (subject) => 'left' in subject ? subject.left : subject.x,
 
     setPosition: (subject, position) => {
-        subject.left = position;
+        if ('left' in subject) {
+            subject.left = position;
+        } else {
+            subject.y = position;
+        }
     },
 
     getSize: (subject) => subject.width,
@@ -129,32 +139,31 @@ class PopoverEngine {
      * @param {HTMLElement} trigger the bounding box of the trigger
      * @param {HTMLElement} popover the bounding box of the popover
      * @param {BoundingBox} displayBoundingBox the bounding box of the display zone, representing the limits where the popover may be drawn
-     * @param {MainAxisPopoverPosition} mainAxisPosition the position of the popover along the main axis
-     * @param {BoundingBoxProjector} mainAxisProjector the main axis projector
-     * @param {CrossAxisPopoverPosition} crossAxisPosition the position of the popover along the cross axis
-     * @param {BoundingBoxProjector} crossAxisProjector the cross axis projector
+     * @param {{x: number, y: number}} displayZoneMargins the margins to apply at the edge of the display zone
+     * @param {{main: MainAxisPopoverPosition, cross: CrossAxisPopoverPosition}} position the position of the popover relative to the trigger
+     * @param {{main: BoundingBoxProjector, cross: BoundingBoxProjector}} projectors the axis projectors
      */
     constructor(
         trigger,
         popover,
         displayBoundingBox,
-        mainAxisPosition,
-        mainAxisProjector,
-        crossAxisPosition,
-        crossAxisProjector,
+        displayZoneMargins,
+        position,
+        projectors,
     ) {
         this._popover = popover;
 
         this._triggerBoundingBox = trigger.getBoundingClientRect();
         this._popoverBoundingBox = popover.getBoundingClientRect();
 
-        this._mainAxisProjector = mainAxisProjector;
-        this._crossAxisProjector = crossAxisProjector;
+        this._mainAxisPosition = position.main;
+        this._crossAxisPosition = position.cross;
 
-        this._mainAxisPosition = mainAxisPosition;
-        this._crossAxisPosition = crossAxisPosition;
+        this._mainAxisProjector = projectors.main;
+        this._crossAxisProjector = projectors.cross;
 
         this._displayBoundingBox = displayBoundingBox;
+        this._displayZoneMargins = displayZoneMargins;
     }
 
     /**
@@ -245,7 +254,7 @@ class PopoverEngine {
             mainAxisPosition = this._triggerEndMainAxis;
         }
 
-        // Popover is placed absolutely relatively to the document, and its position should be offseted by the window scroll
+        // Popover is placed absolutely relatively to the document, and its position should be offset by the window scroll
         mainAxisPosition += this._mainAxisProjector.getPosition(this._offsets);
 
         this._mainAxisProjector.setPosition(this._popover.style, `${mainAxisPosition}px`);
@@ -270,7 +279,8 @@ class PopoverEngine {
         targetStartCrossAxis += this._crossAxisProjector.getPosition(this._offsets);
 
         const crossAxisPosition = Math.max(
-            0,
+            this._crossAxisProjector.getPosition(this._displayBoundingBox)
+                + this._crossAxisProjector.getPosition(this._displayZoneMargins),
             Math.min(
                 this._availableSpaceInCrossAxis - this._popoverSizeCrossAxis,
                 targetStartCrossAxis,
@@ -296,7 +306,8 @@ class PopoverEngine {
      * @private
      */
     get _availableSpaceInMainAxis() {
-        return this._mainAxisProjector.getSize(this._displayBoundingBox);
+        return this._mainAxisProjector.getSize(this._displayBoundingBox)
+            - this._mainAxisProjector.getPosition(this._displayZoneMargins);
     }
 
     /**
@@ -306,7 +317,8 @@ class PopoverEngine {
      * @private
      */
     get _availableSpaceInCrossAxis() {
-        return this._crossAxisProjector.getSize(this._displayBoundingBox);
+        return this._crossAxisProjector.getSize(this._displayBoundingBox)
+            - this._crossAxisProjector.getPosition(this._displayZoneMargins) * 2;
     }
 
     /**
@@ -406,10 +418,11 @@ class PopoverEngine {
  * @param {HTMLElement} trigger the bounding box of the trigger
  * @param {HTMLElement} popover the bounding box of the popover
  * @param {BoundingBox} displayBoundingBox the bounding box of the display zone, representing the limits where the popover may be drawn
+ * @param {{x: number, y: number}} displayZoneMargins the margins to apply at the edge of the display zone
  * @param {PopoverAnchor} anchor the anchor to place the popover
  * @return {PopoverEngine} the created popover engine
  */
-export const createPopoverEngine = (trigger, popover, displayBoundingBox, anchor) => {
+export const createPopoverEngine = (trigger, popover, displayBoundingBox, displayZoneMargins, anchor) => {
     // Top and Bottom are the 6 first anchors
     const mainAxisProjector = anchor / 6 < 1 ? verticalProjector : horizontalProjector;
     const crossAxisProjector = anchor / 6 < 1 ? horizontalProjector : verticalProjector;
@@ -424,9 +437,8 @@ export const createPopoverEngine = (trigger, popover, displayBoundingBox, anchor
         trigger,
         popover,
         displayBoundingBox,
-        mainAxisPosition,
-        mainAxisProjector,
-        crossAxisPosition,
-        crossAxisProjector,
+        displayZoneMargins,
+        { main: mainAxisPosition, cross: crossAxisPosition },
+        { main: mainAxisProjector, cross: crossAxisProjector },
     );
 };

lib/public/components/common/popover/popover.js

@@ -16,6 +16,13 @@ import { createPortal } from '../../../utilities/createPortal.js';
 import { getUniqueId } from '../../../utilities/getUniqueId.js';
 import { createPopoverEngine } from './PopoverEngine.js';
 
+/**
+ * Default margin to apply at the edge of the display zone
+ *
+ * @type {{left: number, top: number}}
+ */
+const DEFAULT_DISPLAY_ZONE_MARGIN = { left: 15, top: 15 };
+
 /**
  * @callback onTriggerNodeChange Function called when the trigger node change (this bound to the popover component instance)
  *
@@ -60,6 +67,7 @@ import { createPopoverEngine } from './PopoverEngine.js';
  * @property {popoverVisibilityChangeCallback} [onVisibilityChange] function called when the visibility changes
  * @property {popoverShowConditionCallback} [showCondition] function called before showing the popover
  * @property {string[]|string} [popoverClass] css classes to apply to the popover (in addition to the default ones)
+ * @property {{x: number, y: number}} displayZoneMargins the margins to apply at the edges to display zone
  */
 
 /**
@@ -125,6 +133,7 @@ class PopoverComponent {
                     left: 0,
                     top: 0,
                 },
+                this._displayZoneMargins,
                 this._anchor,
             );
             engine.reset();
@@ -268,13 +277,18 @@ class PopoverComponent {
             },
             showCondition,
             popoverClass = [],
+            displayZoneMargins = {},
         } = configuration;
         this._anchor = anchor;
         this._onTriggerNodeChange = onTriggerNodeChange.bind(this);
         this._onPopoverNodeChange = onPopoverNodeChange.bind(this);
         this._onVisibilityChange = onVisibilityChange.bind(this);
         this._showCondition = showCondition ? showCondition.bind(this) : () => true;
         this._popoverClasses = Array.isArray(popoverClass) ? popoverClass : [popoverClass];
+        this._displayZoneMargins = {
+            ...DEFAULT_DISPLAY_ZONE_MARGIN,
+            ...displayZoneMargins,
+        };
     }
 }