@vuu-ui/vuu-layout 0.5.4 → 0.5.5

package/src/menu/aim/aim.js

@@ -1,92 +0,0 @@
-import findCorners, { boundaries } from './corners';
-import pointInPolygon from './point-in-polygon';
-
-export function distance(source, target) {
-  const a = source.x - target.x;
-  const b = source.y - target.y;
-  return Math.sqrt(a * a + b * b);
-}
-
-export function side(corners) {
-  if (corners[0] === 'top-right' && corners[1] === 'bottom-right') return 'right';
-  else if (corners[0] === 'top-left' && corners[1] === 'bottom-right') return 'top-right';
-  else if (corners[0] === 'top-left' && corners[1] === 'top-right') return 'top';
-  else if (corners[0] === 'bottom-left' && corners[1] === 'top-right') return 'top-left';
-  else if (corners[0] === 'bottom-left' && corners[1] === 'top-left') return 'left';
-  else if (corners[0] === 'bottom-right' && corners[1] === 'top-left') return 'bottom-left';
-  else if (corners[0] === 'bottom-right' && corners[1] === 'bottom-left') return 'bottom';
-  else if (corners[0] === 'top-right' && corners[1] === 'bottom-left') return 'bottom-right';
-}
-
-export function bullseye(corners, boundaries, mousePosition) {
-  switch (side(corners)) {
-    case 'right':
-      return {
-        x: boundaries[0].x,
-        y: mousePosition.y
-      };
-    case 'top-right':
-      return {
-        x: boundaries[1].x,
-        y: boundaries[0].y
-      };
-    case 'top':
-      return {
-        x: mousePosition.x,
-        y: boundaries[0].y
-      };
-    case 'top-left':
-      return {
-        x: boundaries[0].x,
-        y: boundaries[1].y
-      };
-    case 'left':
-      return {
-        x: boundaries[0].x,
-        y: mousePosition.y
-      };
-    case 'bottom-left':
-      return {
-        x: boundaries[1].x,
-        y: boundaries[0].y
-      };
-    case 'bottom':
-      return {
-        x: mousePosition.x,
-        y: boundaries[0].y
-      };
-    case 'bottom-right':
-      return {
-        x: boundaries[0].x,
-        y: boundaries[1].y
-      };
-  }
-}
-
-function formatPoints(points) {
-  const finalPoints = [];
-  for (let i = 0, len = points.length; i < len; ++i) {
-    finalPoints.push([points[i].x, points[i].y]);
-  }
-  return finalPoints;
-}
-
-export function aiming(e, mousePosition, prevMousePosition, target, alreadyAiming) {
-  if (!prevMousePosition) return false;
-  else if (
-    !alreadyAiming &&
-    mousePosition.x === prevMousePosition.x &&
-    mousePosition.y === prevMousePosition.y
-  ) {
-    return false;
-  }
-
-  const corners = findCorners(e, target);
-  const bound = boundaries(corners, prevMousePosition, target);
-
-  if (pointInPolygon([mousePosition.x, mousePosition.y], formatPoints(bound))) {
-    const dist = Math.round(distance(mousePosition, bullseye(corners, bound, mousePosition)));
-    return Math.max(dist, 1);
-  }
-  return false;
-}

package/src/menu/aim/corners.js

@@ -1,114 +0,0 @@
-import { distance, bullseye } from './aim';
-
-function inside(source, targetMin, targetMax) {
-  if (source >= targetMin && source <= targetMax) return 0;
-  else if (source > targetMin) return -1;
-  else return 1;
-}
-
-export function corners(source, target) {
-  source = { left: source.pageX, top: source.pageY };
-  target = target.getBoundingClientRect();
-
-  let ver, hor;
-
-  hor = inside(source.left, target.left, target.left + target.width);
-  ver = inside(source.top, target.top, source.top + target.height);
-
-  if (hor === -1 && ver === -1) return ['top-right', 'bottom-left'];
-  if (hor === -1 && ver === 0) return ['top-right', 'bottom-right'];
-  if (hor === -1 && ver === 1) return ['top-left', 'bottom-right'];
-
-  if (hor === 0 && ver === -1) return ['bottom-right', 'bottom-left'];
-  if (hor === 0 && ver === 0) return [];
-  if (hor === 0 && ver === 1) return ['top-left', 'top-right'];
-
-  if (hor === 1 && ver === -1) return ['bottom-right', 'top-left'];
-  if (hor === 1 && ver === 0) return ['bottom-left', 'top-left'];
-  if (hor === 1 && ver === 1) return ['bottom-left', 'top-right'];
-}
-
-export function boundaries(corners, source, target, adjustment = false) {
-  if (target instanceof HTMLElement || target instanceof SVGElement) {
-    target = target.getBoundingClientRect();
-  }
-
-  if (!source) return [];
-  else if (source instanceof Event) {
-    source = {
-      left: source.pageX,
-      top: source.pageY
-    };
-  } else if (source.x) {
-    source = {
-      left: source.x,
-      top: source.y
-    };
-  }
-
-  let tolerance = adjustment !== false ? Math.round(adjustment / 10) * 1.5 : 0;
-  const position = {
-    left: target.left - tolerance,
-    top: target.top - tolerance,
-    width: target.width + tolerance * 2,
-    height: target.height + tolerance * 2
-  };
-
-  var doc = document.documentElement;
-  var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
-  var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
-
-  let first = true;
-  let positions = [];
-  corners.forEach((corner) => {
-    switch (corner) {
-      case 'top-right':
-        if (first) positions.push({ x: target.left + target.width + left, y: target.top + top });
-        positions.push({ x: position.left + position.width + left, y: position.top + top });
-        if (!first) positions.push({ x: target.left + target.width + left, y: target.top + top });
-        break;
-      case 'top-left':
-        if (first) positions.push({ x: target.left + left, y: target.top + top });
-        positions.push({ x: position.left + left, y: position.top + top });
-        if (!first) positions.push({ x: target.left + left, y: target.top + top });
-        break;
-      case 'bottom-right':
-        if (first)
-          positions.push({
-            x: target.left + target.width + left,
-            y: target.top + target.height + top
-          });
-        positions.push({
-          x: position.left + position.width + left,
-          y: position.top + position.height + top
-        });
-        if (!first)
-          positions.push({
-            x: target.left + target.width + left,
-            y: target.top + target.height + top
-          });
-        break;
-      case 'bottom-left':
-        if (first) positions.push({ x: target.left + left, y: target.top + target.height + top });
-        positions.push({ x: position.left + left, y: position.top + position.height + top });
-        if (!first) positions.push({ x: target.left + left, y: target.top + target.height + top });
-        break;
-    }
-    if (first) {
-      positions.push({ x: source.left, y: source.top });
-    }
-    first = false;
-  });
-
-  if (adjustment === false) {
-    const be = bullseye(corners, positions, { x: source.left, y: source.top });
-    if (be) {
-      const dist = Math.round(distance({ x: source.left, y: source.top }, be));
-      return boundaries(corners, source, target, dist);
-    }
-  }
-
-  return positions;
-}
-
-export default corners;

package/src/menu/aim/point-in-polygon.js

@@ -1,25 +0,0 @@
-/**
- * @license MIT
- * @url https://github.com/substack/point-in-polygon
- */
-
-export default function (point, vs) {
-  // ray-casting algorithm based on
-  // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
-
-  var x = point[0],
-    y = point[1];
-
-  var inside = false;
-  for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
-    var xi = vs[i][0],
-      yi = vs[i][1];
-    var xj = vs[j][0],
-      yj = vs[j][1];
-
-    var intersect = yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
-    if (intersect) inside = !inside;
-  }
-
-  return inside;
-}

package/src/menu/aim/utils.js

@@ -1,19 +0,0 @@
-function scrollPosition() {
-  const scrollTop = document.documentElement.scrollTop
-    ? document.documentElement.scrollTop
-    : document.body.scrollTop;
-  const scrollLeft = document.documentElement.scrollLeft
-    ? document.documentElement.scrollLeft
-    : document.body.scrollLeft;
-
-  return { scrollTop, scrollLeft };
-}
-
-export function mousePosition(event) {
-  const sPos = scrollPosition();
-
-  const x = document.all ? event.clientX + sPos.scrollLeft : event.pageX;
-  const y = document.all ? event.clientY + sPos.scrollTop : event.pageY;
-
-  return { x, y };
-}

package/src/menu/context-menu-provider.jsx

@@ -1,135 +0,0 @@
-import React, { useCallback, useContext, useMemo } from 'react';
-import { PopupService } from '../popup';
-import ContextMenu from './ContextMenu';
-import { MenuItem, MenuItemGroup } from './MenuList';
-
-const showContextMenu = (e, menuDescriptors, handleContextMenuAction) => {
-  const { clientX: left, clientY: top } = e;
-  const menuItems = (menuDescriptors) => {
-    const fromDescriptor = ({ children, label, icon, action, options }, i) =>
-      children ? (
-        <MenuItemGroup key={i} label={label}>
-          {children.map(fromDescriptor)}
-        </MenuItemGroup>
-      ) : (
-        <MenuItem key={i} action={action} data-icon={icon} options={options}>
-          {label}
-        </MenuItem>
-      );
-
-    return menuDescriptors.map(fromDescriptor);
-  };
-
-  const handleClose = (menuId, options) => {
-    if (menuId) {
-      handleContextMenuAction(menuId, options);
-      PopupService.hidePopup();
-    }
-  };
-
-  const component = (
-    <ContextMenu onClose={handleClose} position={{ x: left, y: top }}>
-      {menuItems(menuDescriptors)}
-    </ContextMenu>
-  );
-  PopupService.showPopup({ left: 0, top: 0, component });
-};
-
-export const ContextMenuContext = React.createContext(null);
-
-const NO_INHERITED_CONTEXT = {
-  menuItemDescriptors: []
-};
-
-// The menuBuilder will always be supplied by the code that will display the local
-// context menu. It will be passed all configured menu descriptors. It is free to
-// augment, replace or ignore the existing menu descriptors.
-export const useContextMenu = () => {
-  const { menuActionHandler, menuBuilders } = useContext(ContextMenuContext);
-
-  const buildMenuOptions = useCallback((menuBuilders, location, options) => {
-    let results = [];
-    for (const menuBuilder of menuBuilders) {
-      // Maybe we should leave the concatenation to the menuBuilder, then it can control menuItem order
-      results = results.concat(menuBuilder(location, options));
-    }
-    return results;
-  }, []);
-
-  const handleShowContextMenu = (e, location, options) => {
-    e.stopPropagation();
-    e.preventDefault();
-    const menuItemDescriptors = buildMenuOptions(menuBuilders, location, options);
-    if (menuItemDescriptors.length) {
-      showContextMenu(e, menuItemDescriptors, menuActionHandler);
-    }
-  };
-
-  return handleShowContextMenu;
-};
-
-const Provider = ({
-  children,
-  context: { menuBuilders: inheritedMenuBuilders, menuActionHandler: inheritedMenuActionHandler },
-  menuActionHandler,
-  menuBuilder
-}) => {
-  const menuBuilders = useMemo(() => {
-    if (inheritedMenuBuilders && menuBuilder) {
-      return inheritedMenuBuilders.concat(menuBuilder);
-    } else if (menuBuilder) {
-      return [menuBuilder];
-    } else {
-      return inheritedMenuBuilders || [];
-    }
-  }, [inheritedMenuBuilders, menuBuilder]);
-
-  const handleMenuAction = useCallback(
-    (type, options) => {
-      if (menuActionHandler && menuActionHandler(type, options)) {
-        return true;
-      }
-
-      if (inheritedMenuActionHandler && inheritedMenuActionHandler(type, options)) {
-        return true;
-      }
-    },
-    [inheritedMenuActionHandler, menuActionHandler]
-  );
-
-  return (
-    <ContextMenuContext.Provider
-      value={{
-        menuActionHandler: handleMenuAction,
-        menuBuilders
-      }}
-    >
-      {children}
-    </ContextMenuContext.Provider>
-  );
-};
-
-// Need an option for local menu to override higher-level menu, rather than extend
-export const ContextMenuProvider = ({
-  children,
-  menuActionHandler,
-  menuBuilder,
-  menuItemDescriptors,
-  label
-}) => {
-  return (
-    <ContextMenuContext.Consumer>
-      {(parentContext) => (
-        <Provider
-          context={parentContext || NO_INHERITED_CONTEXT}
-          label={label}
-          menuActionHandler={menuActionHandler}
-          menuBuilder={menuBuilder}
-          menuItemDescriptors={menuItemDescriptors}
-        >
-          {children}
-        </Provider>
-      )}
-    </ContextMenuContext.Consumer>
-  );
-};

package/src/menu/index.js

@@ -1,4 +0,0 @@
-export { default as ContextMenu } from './ContextMenu';
-export { default as MenuList } from './MenuList';
-export * from './MenuList';
-export * from './context-menu-provider';

package/src/menu/key-code.js

@@ -1,61 +0,0 @@
-function union(set1, ...sets) {
-  const result = new Set(set1);
-  for (let set of sets) {
-    for (let element of set) {
-      result.add(element);
-    }
-  }
-  return result;
-}
-
-export const ArrowUp = 'ArrowUp';
-export const ArrowDown = 'ArrowDown';
-export const ArrowLeft = 'ArrowLeft';
-export const Backspace = 'Backspace';
-export const ArrowRight = 'ArrowRight';
-export const Enter = 'Enter';
-export const Escape = 'Escape';
-export const Delete = 'Delete';
-
-const actionKeys = new Set([Enter, Delete]);
-const focusKeys = new Set(['Tab']);
-// const navigationKeys = new Set(["Home", "End", "ArrowRight", "ArrowLeft","ArrowDown", "ArrowUp"]);
-const arrowLeftRightKeys = new Set(['ArrowRight', 'ArrowLeft']);
-const verticalNavigationKeys = new Set(['Home', 'End', 'ArrowDown', 'ArrowUp']);
-const horizontalNavigationKeys = new Set(['Home', 'End', 'ArrowRight', 'ArrowLeft']);
-const functionKeys = new Set([
-  'F1',
-  'F2',
-  'F3',
-  'F4',
-  'F5',
-  'F6',
-  'F7',
-  'F8',
-  'F9',
-  'F10',
-  'F11',
-  'F12'
-]);
-const specialKeys = union(
-  actionKeys,
-  horizontalNavigationKeys,
-  verticalNavigationKeys,
-  arrowLeftRightKeys,
-  functionKeys,
-  focusKeys
-);
-export const isCharacterKey = (evt) => {
-  if (specialKeys.has(evt.key)) {
-    return false;
-  }
-  if (typeof evt.which === 'number' && evt.which > 0) {
-    return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which !== 8;
-  }
-};
-
-export const isNavigationKey = ({ key }, orientation = 'vertical') => {
-  const navigationKeys =
-    orientation === 'vertical' ? verticalNavigationKeys : horizontalNavigationKeys;
-  return navigationKeys.has(key);
-};

package/src/menu/list-dom-utils.js

@@ -1,22 +0,0 @@
-export const listItemElement = (listEl, listItemIdx) =>
-  listEl.querySelector(`:scope > [data-idx="${listItemIdx}"]`);
-
-export function listItemIndex(listItemEl) {
-  if (listItemEl) {
-    let idx = listItemEl.dataset.idx;
-    if (idx) {
-      return parseInt(idx, 10);
-      // eslint-disable-next-line no-cond-assign
-    } else if ((idx = listItemEl.ariaPosInSet)) {
-      return parseInt(idx, 10) - 1;
-    }
-  }
-}
-
-export const listItemId = (el) => el?.id;
-
-export const closestListItem = (el) => el.closest('[data-idx],[aria-posinset]');
-
-export const closestListItemId = (el) => listItemId(closestListItem(el));
-
-export const closestListItemIndex = (el) => listItemIndex(closestListItem(el));