@modusoperandi/licit 0.1.4 → 0.1.8

package/src/ui/PopUpManager.js

@@ -1,213 +1,213 @@
-// @flow
-
-import clamp from './clamp';
-import { fromHTMlElement, fromXY, isIntersected } from './rects';
-
-import type { PositionHandler } from './PopUpPosition';
-import type { Rect } from './rects';
-
-export type PopUpDetails = {
-  anchor: ?HTMLElement,
-  anchorRect?: ?Rect,
-  autoDismiss: boolean,
-  body: ?HTMLElement,
-  bodyRect?: ?Rect,
-  close: (val: any) => void,
-  modal: boolean,
-  position: PositionHandler,
-};
-
-export type PopUpBridge = {
-  getDetails: () => PopUpDetails,
-};
-
-const CLICK_INTERVAL = 350;
-const DUMMY_RECT = { x: -10000, y: -10000, w: 0, h: 0 };
-
-class PopUpManager {
-  _bridges = new Map<any, any>();
-  _positions = new Map<any, any>();
-
-  _mx = 0;
-  _my = 0;
-  _rafID = 0;
-
-  register(bridge: PopUpBridge): void {
-    this._bridges.set(bridge, Date.now());
-    this._positions.set(bridge, null);
-    if (this._bridges.size === 1) {
-      this._observe();
-    }
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  }
-
-  unregister(bridge: PopUpBridge): void {
-    this._bridges.delete(bridge);
-    this._positions.delete(bridge);
-    if (this._bridges.size === 0) {
-      this._unobserve();
-    }
-    this._rafID && cancelAnimationFrame(this._rafID);
-  }
-
-  _observe(): void {
-    document.addEventListener('mousemove', this._onMouseChange, false);
-    document.addEventListener('mouseup', this._onMouseChange, false);
-    document.addEventListener('click', this._onClick, false);
-    window.addEventListener('scroll', this._onScroll, true);
-    window.addEventListener('resize', this._onResize, true);
-  }
-
-  _unobserve(): void {
-    document.removeEventListener('mousemove', this._onMouseChange, false);
-    document.removeEventListener('mouseup', this._onMouseChange, false);
-    document.removeEventListener('click', this._onClick, false);
-    window.removeEventListener('scroll', this._onScroll, true);
-    window.removeEventListener('resize', this._onResize, true);
-    this._rafID && cancelAnimationFrame(this._rafID);
-  }
-
-  _onScroll = (e: Event): void => {
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onResize = (e: Event): void => {
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onMouseChange = (e: MouseEvent): void => {
-    this._mx = Math.round(e.clientX);
-    this._my = Math.round(e.clientY);
-    this._rafID && cancelAnimationFrame(this._rafID);
-    this._rafID = requestAnimationFrame(this._syncPosition);
-  };
-
-  _onClick = (e: MouseEvent): void => {
-    const now = Date.now();
-    let detailsWithModalToDismiss;
-    for (const [bridge, registeredAt] of this._bridges) {
-      if (now - registeredAt > CLICK_INTERVAL) {
-        const details = bridge.getDetails();
-        if (details.modal && details.autoDismiss) {
-          detailsWithModalToDismiss = details;
-        }
-      }
-    }
-    if (!detailsWithModalToDismiss) {
-      return;
-    }
-    const { body, close } = detailsWithModalToDismiss;
-    const pointer = fromXY(e.clientX, e.clientY, 1);
-    const bodyRect = body ? fromHTMlElement(body) : null;
-    if (!bodyRect || !isIntersected(pointer, bodyRect)) {
-      close();
-    }
-  };
-
-  _syncPosition = (): void => {
-    this._rafID = 0;
-
-    const bridgeToDetails = new Map<any, any>();
-    for (const [
-      bridge,
-      // eslint-disable-next-line no-unused-vars
-      registeredAt,
-    ] of this._bridges) {
-      const details = bridge.getDetails();
-      bridgeToDetails.set(bridge, details);
-      const { anchor, body } = details;
-      if (body instanceof HTMLElement) {
-        details.bodyRect = fromHTMlElement(body);
-      }
-      if (anchor instanceof HTMLElement) {
-        details.anchorRect = fromHTMlElement(anchor);
-      }
-    }
-
-    const pointer = fromXY(this._mx, this._my, 2);
-    const hoveredAnchors = new Set();
-    for (const [bridge, details] of bridgeToDetails) {
-      const { anchor, bodyRect, anchorRect, position, body } = details;
-      if (!bodyRect && !anchorRect) {
-        continue;
-      }
-
-      const { x, y } = position(anchorRect, bodyRect);
-      const positionKey = `${x}-${y}`;
-
-      if (body && bodyRect && this._positions.get(bridge) !== positionKey) {
-        const ax = anchorRect
-          ? clamp(
-              0,
-              anchorRect.x - x + anchorRect.w / 2,
-              bodyRect.w - anchorRect.w / 2
-            )
-          : 0;
-        this._positions.set(bridge, positionKey);
-        const bodyStyle = body.style;
-        bodyStyle.position = 'absolute';
-        bodyStyle.left = `${x}px`;
-        bodyStyle.top = `${y}px`;
-        bodyStyle.setProperty('--czi-pop-up-anchor-offset-left', `${ax}px`);
-        bodyRect.x = x;
-        bodyRect.y = y;
-      }
-
-      if (
-        isIntersected(pointer, bodyRect || DUMMY_RECT, 0) ||
-        isIntersected(pointer, anchorRect || DUMMY_RECT, 0)
-      ) {
-        if (anchor) {
-          hoveredAnchors.add(anchor);
-        }
-      }
-    }
-
-    while (true) {
-      const size = hoveredAnchors.size;
-      for (const [
-        // eslint-disable-next-line no-unused-vars
-        bridge,
-        details,
-      ] of bridgeToDetails) {
-        const { anchor, body } = details;
-        for (const ha of hoveredAnchors) {
-          if (
-            anchor &&
-            body &&
-            !hoveredAnchors.has(anchor) &&
-            body.contains(ha)
-          ) {
-            hoveredAnchors.add(anchor);
-          }
-        }
-      }
-      if (hoveredAnchors.size === size) {
-        break;
-      }
-    }
-
-    const now = Date.now();
-    for (const [bridge, registeredAt] of this._bridges) {
-      const details = bridgeToDetails.get(bridge);
-      if (details) {
-        const { autoDismiss, anchor, close, modal } = details;
-        if (
-          autoDismiss &&
-          // Modal is handled separately at `onClick`
-          !modal &&
-          now - registeredAt > CLICK_INTERVAL &&
-          !hoveredAnchors.has(anchor)
-        ) {
-          close();
-        }
-      }
-    }
-  };
-}
-
-const instance = new PopUpManager();
-
-export default instance;
+// @flow
+
+import clamp from './clamp';
+import { fromHTMlElement, fromXY, isIntersected } from './rects';
+
+import type { PositionHandler } from './PopUpPosition';
+import type { Rect } from './rects';
+
+export type PopUpDetails = {
+  anchor: ?HTMLElement,
+  anchorRect?: ?Rect,
+  autoDismiss: boolean,
+  body: ?HTMLElement,
+  bodyRect?: ?Rect,
+  close: (val: any) => void,
+  modal: boolean,
+  position: PositionHandler,
+};
+
+export type PopUpBridge = {
+  getDetails: () => PopUpDetails,
+};
+
+const CLICK_INTERVAL = 350;
+const DUMMY_RECT = { x: -10000, y: -10000, w: 0, h: 0 };
+
+class PopUpManager {
+  _bridges = new Map<any, any>();
+  _positions = new Map<any, any>();
+
+  _mx = 0;
+  _my = 0;
+  _rafID = 0;
+
+  register(bridge: PopUpBridge): void {
+    this._bridges.set(bridge, Date.now());
+    this._positions.set(bridge, null);
+    if (this._bridges.size === 1) {
+      this._observe();
+    }
+    this._rafID = requestAnimationFrame(this._syncPosition);
+  }
+
+  unregister(bridge: PopUpBridge): void {
+    this._bridges.delete(bridge);
+    this._positions.delete(bridge);
+    if (this._bridges.size === 0) {
+      this._unobserve();
+    }
+    this._rafID && cancelAnimationFrame(this._rafID);
+  }
+
+  _observe(): void {
+    document.addEventListener('mousemove', this._onMouseChange, false);
+    document.addEventListener('mouseup', this._onMouseChange, false);
+    document.addEventListener('click', this._onClick, false);
+    window.addEventListener('scroll', this._onScroll, true);
+    window.addEventListener('resize', this._onResize, true);
+  }
+
+  _unobserve(): void {
+    document.removeEventListener('mousemove', this._onMouseChange, false);
+    document.removeEventListener('mouseup', this._onMouseChange, false);
+    document.removeEventListener('click', this._onClick, false);
+    window.removeEventListener('scroll', this._onScroll, true);
+    window.removeEventListener('resize', this._onResize, true);
+    this._rafID && cancelAnimationFrame(this._rafID);
+  }
+
+  _onScroll = (e: Event): void => {
+    this._rafID && cancelAnimationFrame(this._rafID);
+    this._rafID = requestAnimationFrame(this._syncPosition);
+  };
+
+  _onResize = (e: Event): void => {
+    this._rafID && cancelAnimationFrame(this._rafID);
+    this._rafID = requestAnimationFrame(this._syncPosition);
+  };
+
+  _onMouseChange = (e: MouseEvent): void => {
+    this._mx = Math.round(e.clientX);
+    this._my = Math.round(e.clientY);
+    this._rafID && cancelAnimationFrame(this._rafID);
+    this._rafID = requestAnimationFrame(this._syncPosition);
+  };
+
+  _onClick = (e: MouseEvent): void => {
+    const now = Date.now();
+    let detailsWithModalToDismiss;
+    for (const [bridge, registeredAt] of this._bridges) {
+      if (now - registeredAt > CLICK_INTERVAL) {
+        const details = bridge.getDetails();
+        if (details.modal && details.autoDismiss) {
+          detailsWithModalToDismiss = details;
+        }
+      }
+    }
+    if (!detailsWithModalToDismiss) {
+      return;
+    }
+    const { body, close } = detailsWithModalToDismiss;
+    const pointer = fromXY(e.clientX, e.clientY, 1);
+    const bodyRect = body ? fromHTMlElement(body) : null;
+    if (!bodyRect || !isIntersected(pointer, bodyRect)) {
+      close();
+    }
+  };
+
+  _syncPosition = (): void => {
+    this._rafID = 0;
+
+    const bridgeToDetails = new Map<any, any>();
+    for (const [
+      bridge,
+      // eslint-disable-next-line no-unused-vars
+      registeredAt,
+    ] of this._bridges) {
+      const details = bridge.getDetails();
+      bridgeToDetails.set(bridge, details);
+      const { anchor, body } = details;
+      if (body instanceof HTMLElement) {
+        details.bodyRect = fromHTMlElement(body);
+      }
+      if (anchor instanceof HTMLElement) {
+        details.anchorRect = fromHTMlElement(anchor);
+      }
+    }
+
+    const pointer = fromXY(this._mx, this._my, 2);
+    const hoveredAnchors = new Set();
+    for (const [bridge, details] of bridgeToDetails) {
+      const { anchor, bodyRect, anchorRect, position, body } = details;
+      if (!bodyRect && !anchorRect) {
+        continue;
+      }
+
+      const { x, y } = position(anchorRect, bodyRect);
+      const positionKey = `${x}-${y}`;
+
+      if (body && bodyRect && this._positions.get(bridge) !== positionKey) {
+        const ax = anchorRect
+          ? clamp(
+              0,
+              anchorRect.x - x + anchorRect.w / 2,
+              bodyRect.w - anchorRect.w / 2
+            )
+          : 0;
+        this._positions.set(bridge, positionKey);
+        const bodyStyle = body.style;
+        bodyStyle.position = 'absolute';
+        bodyStyle.left = `${x}px`;
+        bodyStyle.top = `${y}px`;
+        bodyStyle.setProperty('--czi-pop-up-anchor-offset-left', `${ax}px`);
+        bodyRect.x = x;
+        bodyRect.y = y;
+      }
+
+      if (
+        isIntersected(pointer, bodyRect || DUMMY_RECT, 0) ||
+        isIntersected(pointer, anchorRect || DUMMY_RECT, 0)
+      ) {
+        if (anchor) {
+          hoveredAnchors.add(anchor);
+        }
+      }
+    }
+
+    while (true) {
+      const size = hoveredAnchors.size;
+      for (const [
+        // eslint-disable-next-line no-unused-vars
+        bridge,
+        details,
+      ] of bridgeToDetails) {
+        const { anchor, body } = details;
+        for (const ha of hoveredAnchors) {
+          if (
+            anchor &&
+            body &&
+            !hoveredAnchors.has(anchor) &&
+            body.contains(ha)
+          ) {
+            hoveredAnchors.add(anchor);
+          }
+        }
+      }
+      if (hoveredAnchors.size === size) {
+        break;
+      }
+    }
+
+    const now = Date.now();
+    for (const [bridge, registeredAt] of this._bridges) {
+      const details = bridgeToDetails.get(bridge);
+      if (details) {
+        const { autoDismiss, anchor, close, modal } = details;
+        if (
+          autoDismiss &&
+          // Modal is handled separately at `onClick`
+          !modal &&
+          now - registeredAt > CLICK_INTERVAL &&
+          !hoveredAnchors.has(anchor)
+        ) {
+          close();
+        }
+      }
+    }
+  };
+}
+
+const instance = new PopUpManager();
+
+export default instance;

package/src/ui/PopUpPosition.js

@@ -1,104 +1,104 @@
-// @flow
-
-import { isCollapsed } from './rects';
-
-import type { Rect } from './rects';
-
-export type PositionHandler = (anchorRect: ?Rect, bodyRect: ?Rect) => Rect;
-
-export function atAnchorBottomLeft(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x;
-    rect.y = anchorRect.y + anchorRect.h;
-
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = anchorRect.x - bodyRect.w + anchorRect.w;
-    }
-    if (rect.y + bodyRect.h > viewportHeight) {
-      rect.y = Math.max(anchorRect.y - bodyRect.h, 2);
-    }
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorBottomCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = Math.max(anchorRect.x - (bodyRect.w - anchorRect.w) / 2, 10);
-    rect.y = anchorRect.y + anchorRect.h;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1;
-    rect.y = anchorRect.y;
-    const viewportWidth = window.innerWidth;
-    if (rect.x + bodyRect.w > viewportWidth) {
-      rect.x = Math.max(2, anchorRect.x - bodyRect.w);
-    }
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atViewportCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (bodyRect) {
-    rect.x = (window.innerWidth - bodyRect.w) / 2;
-    rect.y = (window.innerHeight - bodyRect.h) / 2;
-  }
-
-  if (!bodyRect || isCollapsed(bodyRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorTopRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + anchorRect.w + 1 - bodyRect.w;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
-
-export function atAnchorTopCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
-  const rect = { x: 0, y: 0, w: 0, h: 0 };
-  if (anchorRect && bodyRect) {
-    rect.x = anchorRect.x + (anchorRect.w - bodyRect.w) / 2;
-    rect.y = anchorRect.y;
-  }
-
-  if (!anchorRect || isCollapsed(anchorRect)) {
-    rect.x = -10000;
-  }
-
-  return rect;
-}
+// @flow
+
+import { isCollapsed } from './rects';
+
+import type { Rect } from './rects';
+
+export type PositionHandler = (anchorRect: ?Rect, bodyRect: ?Rect) => Rect;
+
+export function atAnchorBottomLeft(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
+  const rect = { x: 0, y: 0, w: 0, h: 0 };
+  if (anchorRect && bodyRect) {
+    rect.x = anchorRect.x;
+    rect.y = anchorRect.y + anchorRect.h;
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (rect.x + bodyRect.w > viewportWidth) {
+      rect.x = anchorRect.x - bodyRect.w + anchorRect.w;
+    }
+    if (rect.y + bodyRect.h > viewportHeight) {
+      rect.y = Math.max(anchorRect.y - bodyRect.h, 2);
+    }
+  }
+
+  if (!anchorRect || isCollapsed(anchorRect)) {
+    rect.x = -10000;
+  }
+
+  return rect;
+}
+
+export function atAnchorBottomCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
+  const rect = { x: 0, y: 0, w: 0, h: 0 };
+  if (anchorRect && bodyRect) {
+    rect.x = Math.max(anchorRect.x - (bodyRect.w - anchorRect.w) / 2, 10);
+    rect.y = anchorRect.y + anchorRect.h;
+  }
+
+  if (!anchorRect || isCollapsed(anchorRect)) {
+    rect.x = -10000;
+  }
+
+  return rect;
+}
+
+export function atAnchorRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
+  const rect = { x: 0, y: 0, w: 0, h: 0 };
+  if (anchorRect && bodyRect) {
+    rect.x = anchorRect.x + anchorRect.w + 1;
+    rect.y = anchorRect.y;
+    const viewportWidth = window.innerWidth;
+    if (rect.x + bodyRect.w > viewportWidth) {
+      rect.x = Math.max(2, anchorRect.x - bodyRect.w);
+    }
+  }
+
+  if (!anchorRect || isCollapsed(anchorRect)) {
+    rect.x = -10000;
+  }
+
+  return rect;
+}
+
+export function atViewportCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
+  const rect = { x: 0, y: 0, w: 0, h: 0 };
+  if (bodyRect) {
+    rect.x = (window.innerWidth - bodyRect.w) / 2;
+    rect.y = (window.innerHeight - bodyRect.h) / 2;
+  }
+
+  if (!bodyRect || isCollapsed(bodyRect)) {
+    rect.x = -10000;
+  }
+
+  return rect;
+}
+
+export function atAnchorTopRight(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
+  const rect = { x: 0, y: 0, w: 0, h: 0 };
+  if (anchorRect && bodyRect) {
+    rect.x = anchorRect.x + anchorRect.w + 1 - bodyRect.w;
+    rect.y = anchorRect.y;
+  }
+
+  if (!anchorRect || isCollapsed(anchorRect)) {
+    rect.x = -10000;
+  }
+
+  return rect;
+}
+
+export function atAnchorTopCenter(anchorRect: ?Rect, bodyRect: ?Rect): Rect {
+  const rect = { x: 0, y: 0, w: 0, h: 0 };
+  if (anchorRect && bodyRect) {
+    rect.x = anchorRect.x + (anchorRect.w - bodyRect.w) / 2;
+    rect.y = anchorRect.y;
+  }
+
+  if (!anchorRect || isCollapsed(anchorRect)) {
+    rect.x = -10000;
+  }
+
+  return rect;
+}