@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/utils/pageGeometry/alignment/index.ts

@@ -0,0 +1,221 @@
+import { Point, PointCoords } from '../Point';
+import { Rectangle, RectangleCoords } from '../Rectangle';
+
+export type Alignable = RectangleCoords | HTMLElement | DOMRect;
+
+export type AlignPositionEnum =
+  | 'TopLeft'
+  | 'TopCenter'
+  | 'TopRight'
+  | 'CenterRight'
+  | 'BottomRight'
+  | 'BottomCenter'
+  | 'BottomLeft'
+  | 'CenterLeft'
+  | 'Center';
+
+type AlignPositionItem = [AlignPositionEnum, AlignPositionEnum];
+
+export type AlignPositionOptions = {
+  alignPosition: AlignPositionItem[];
+  constrainTo?: Alignable;
+  alignAnchor: Alignable;
+  alignTarget: Alignable;
+};
+
+type AlignPositionResult = {
+  alignPosition: AlignPositionItem;
+  alignedRect: Rectangle;
+  distance: PointCoords;
+  valid: boolean;
+  index: number;
+};
+
+function isHTMLElement(v: Alignable): v is HTMLElement {
+  //@ts-ignore
+  return !!v.tagName;
+}
+
+export function getAlignPosition(
+  options: AlignPositionOptions,
+): AlignPositionResult {
+  const { alignTarget, alignAnchor, constrainTo, alignPosition } = options;
+
+  const alignTargetRectangle = Rectangle.from(
+    isHTMLElement(alignTarget)
+      ? alignTarget.getBoundingClientRect()
+      : alignTarget,
+  );
+
+  const alignAnchorRectangle = Rectangle.from(
+    isHTMLElement(alignAnchor)
+      ? alignAnchor.getBoundingClientRect()
+      : alignAnchor,
+  );
+
+  const constrainRectangle = constrainTo
+    ? Rectangle.from(
+        isHTMLElement(constrainTo)
+          ? constrainTo.getBoundingClientRect()
+          : constrainTo,
+      )
+    : null;
+
+  if (!constrainRectangle) {
+    // no constrain, so the first alignPosition will match
+    const alignResult = align({
+      anchorRect: alignAnchorRectangle,
+      targetRect: alignTargetRectangle,
+      position: alignPosition[0],
+    });
+    return {
+      ...alignResult,
+      index: 0,
+    };
+  }
+
+  let firstAlignResult: AlignPositionResult | null = null;
+
+  for (let i = 0, len = alignPosition.length; i < len; i++) {
+    const alignResult = align({
+      anchorRect: alignAnchorRectangle,
+      targetRect: alignTargetRectangle,
+      position: alignPosition[i],
+      constrainRect: constrainRectangle,
+    });
+
+    if (i === 0) {
+      firstAlignResult = {
+        ...alignResult,
+        index: 0,
+      };
+    }
+
+    if (alignResult.valid) {
+      return {
+        ...alignResult,
+
+        index: i,
+      };
+    }
+  }
+  return firstAlignResult!;
+}
+
+export function align(options: {
+  targetRect: Rectangle;
+  anchorRect: Rectangle;
+  position: AlignPositionItem;
+  constrainRect?: Rectangle | null;
+}) {
+  const targetRect = Rectangle.from(options.targetRect);
+  const anchorRect = Rectangle.from(options.anchorRect);
+  const constrainRect = options.constrainRect
+    ? Rectangle.from(options.constrainRect)
+    : null;
+
+  const { position } = options;
+  const [targetPos, anchorPos] = position;
+
+  const targetPoint = getRectanglePointForPosition(targetRect, targetPos);
+  const anchorPoint = getRectanglePointForPosition(anchorRect, anchorPos);
+
+  const distance = targetPoint.getDistanceToPoint(anchorPoint);
+
+  targetRect.shift(distance);
+
+  const valid = constrainRect ? constrainRect.contains(targetRect) : true;
+
+  return {
+    alignPosition: position,
+    alignedRect: targetRect,
+    valid,
+    distance,
+  };
+}
+
+function getRectanglePointForPosition(
+  rect: Rectangle,
+  position: AlignPositionEnum,
+): Point {
+  if (position === 'TopLeft') {
+    return Point.from({
+      top: rect.top,
+      left: rect.left,
+    });
+  }
+
+  if (position === 'TopCenter') {
+    return Point.from({
+      top: rect.top,
+      left: rect.left + (rect.width > 0 ? Math.round(rect.width / 2) : 0),
+    });
+  }
+  if (position === 'TopRight') {
+    return Point.from({
+      top: rect.top,
+      left: rect.left + rect.width,
+    });
+  }
+  if (position === 'BottomLeft') {
+    return Point.from({
+      left: rect.left,
+      top: rect.top + rect.height,
+    });
+  }
+  if (position === 'BottomCenter') {
+    return Point.from({
+      left: rect.left + (rect.width > 0 ? Math.round(rect.width / 2) : 0),
+      top: rect.top + rect.height,
+    });
+  }
+  if (position === 'BottomRight') {
+    return Point.from({
+      left: rect.left + rect.width,
+      top: rect.top + rect.height,
+    });
+  }
+
+  if (position === 'CenterLeft') {
+    return Point.from({
+      left: rect.left,
+      top: rect.top + (rect.height > 0 ? Math.round(rect.height / 2) : 0),
+    });
+  }
+  if (position === 'CenterRight') {
+    return Point.from({
+      left: rect.left + rect.width,
+      top: rect.top + (rect.height > 0 ? Math.round(rect.height / 2) : 0),
+    });
+  }
+
+  // position === AlignPositionEnum.Center
+  return Point.from({
+    left: rect.left + (rect.width > 0 ? Math.round(rect.width / 2) : 0),
+    top: rect.top + (rect.height > 0 ? Math.round(rect.height / 2) : 0),
+  });
+}
+
+// function align(options: { targetRect: Rectangle; anchorRect: Rectangle }) {
+
+// }
+
+// getAlignPosition({
+//   alignPosition: [
+//     [AlignPositionEnum.TopLeft, AlignPositionEnum.TopCenter],
+//     [AlignPositionEnum.TopLeft, AlignPositionEnum.TopCenter],
+//   ],
+//   alignAnchor: {
+//     top: 0,
+//     left: 0,
+//     width: 100,
+//     height: 100,
+//   },
+
+//   alignTarget: {
+//     top: 0,
+//     left: 0,
+//     width: 100,
+//     height: 100,
+//   },
+// });

package/src/utils/pageGeometry/polyContainsPoint.ts

@@ -0,0 +1,182 @@
+import { PointCoords } from './Point';
+import { ArrayWith3, ArrayWithAtLeast3 } from './types';
+
+/*
+ *
+ * See https://www.baeldung.com/cs/sort-points-clockwise for a reference
+ */
+
+function getAngle(p: PointCoords, center: PointCoords) {
+  let angle = Math.atan2(p.top - center.top, p.left - center.left);
+
+  if (angle <= 0) {
+    angle = 2 * Math.PI + angle;
+  }
+
+  return angle;
+}
+
+function getDistance(p1: PointCoords, p2: PointCoords) {
+  return Math.sqrt((p2.top - p1.top) ** 2 + (p2.left - p1.left) ** 2);
+}
+
+function comparePoints(p1: PointCoords, p2: PointCoords, center: PointCoords) {
+  const angle1 = getAngle(p1, center);
+  const angle2 = getAngle(p2, center);
+
+  if (angle1 === angle2) {
+    return getDistance(center, p2) - getDistance(center, p1);
+  }
+
+  return angle1 - angle2;
+}
+
+function sortPoints(
+  points: ArrayWithAtLeast3<PointCoords>,
+): ArrayWithAtLeast3<PointCoords> {
+  if (points.length < 3) {
+    return points;
+  }
+
+  const [...result] = points;
+
+  const center = { top: 0, left: 0 };
+
+  points.forEach((p) => {
+    center.top += p.top;
+    center.left += p.left;
+  });
+
+  center.top /= points.length;
+  center.left /= points.length;
+
+  result.sort((a, b) => comparePoints(a, b, center));
+
+  return result;
+}
+
+export function polyContainsPoint(
+  points: ArrayWithAtLeast3<PointCoords>,
+  point: PointCoords,
+): boolean {
+  // we need to sort the points so they are in clockwise or counter clockwise order
+  points = sortPoints(points);
+
+  const [rootPoint] = points;
+
+  // starting from the root point
+  // draw a triangle to any other 2 neighboring points, in sort order (as sorted above in previous step)
+  // and check if the point is inside that triangle
+
+  // this is a pretty effective way to check if a point is inside a polygon
+
+  for (
+    let i = 1, len = points.length - 1 /*yes, -1 is correct*/;
+    i < len;
+    i++
+  ) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+
+    if (triangleContainsPoint([rootPoint, p1, p2], point)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// function translateIntoPositive(points: PointCoords[]): PointCoords[] {
+//   if (!points.length) {
+//     return [];
+//   }
+
+//   let minLeft = points[0].left;
+//   let minTop = points[0].top;
+
+//   for (let i = 1, len = points.length; i < len; i++) {
+//     minLeft = Math.min(minLeft, points[i].left);
+//     minTop = Math.min(minTop, points[i].top);
+//   }
+
+//   const translateLeft = minLeft < 0;
+//   const translateTop = minTop < 0;
+
+//   if (!translateLeft && !translateTop) {
+//     // no need to translate points
+//     return points;
+//   }
+
+//   const result = points.map((p) => {
+//     const newPoint = { ...p };
+//     if (translateLeft) {
+//       newPoint.left = p.left - minLeft;
+//     }
+//     if (translateTop) {
+//       newPoint.top = p.top - minTop;
+//     }
+//     return newPoint;
+//   });
+
+//   return result;
+// }
+
+export function triangleContainsPoint(
+  points: ArrayWith3<PointCoords>,
+  point: PointCoords,
+): boolean {
+  // const [a, b, c, p] = translateIntoPositive([...points, point]);
+  const [a, b, c] = points;
+  const p = point;
+
+  // const s1 = c.top - a.top;
+  // const s2 = c.left - a.left;
+  // const s3 = b.top - a.top;
+  // const s4 = p.top - a.top;
+
+  // const w1 =
+  //   (a.left * s1 + s4 * s2 - p.left * s1) / (s3 * s2 - (b.left - a.left) * s1);
+  // const w2 = (s4 - w1 * s3) / s1;
+
+  // return w1 >= 0 && w2 >= 0 && w1 + w2 <= 1;
+
+  // second try
+  let det =
+    (b.left - a.left) * (c.top - a.top) - (b.top - a.top) * (c.left - a.left);
+
+  return (
+    det *
+      ((b.left - a.left) * (p.top - a.top) -
+        (b.top - a.top) * (p.left - a.left)) >=
+      0 &&
+    det *
+      ((c.left - b.left) * (p.top - b.top) -
+        (c.top - b.top) * (p.left - b.left)) >=
+      0 &&
+    det *
+      ((a.left - c.left) * (p.top - c.top) -
+        (a.top - c.top) * (p.left - c.left)) >=
+      0
+  );
+
+  // var cx = p.left,
+  //   cy = p.top,
+  //   v0x = c.left - a.left,
+  //   v0y = c.top - a.top,
+  //   v1x = b.left - a.left,
+  //   v1y = b.top - a.top,
+  //   v2x = cx - a.left,
+  //   v2y = cy - a.top,
+  //   dot00 = v0x * v0x + v0y * v0y,
+  //   dot01 = v0x * v1x + v0y * v1y,
+  //   dot02 = v0x * v2x + v0y * v2y,
+  //   dot11 = v1x * v1x + v1y * v1y,
+  //   dot12 = v1x * v2x + v1y * v2y;
+
+  // // Compute barycentric coordinates
+  // var bary = dot00 * dot11 - dot01 * dot01,
+  //   inv = bary === 0 ? 0 : 1 / bary,
+  //   u = (dot11 * dot02 - dot01 * dot12) * inv,
+  //   v = (dot00 * dot12 - dot01 * dot02) * inv;
+  // return u >= 0 && v >= 0 && u + v < 1;
+}

package/src/utils/pageGeometry/types.ts

@@ -0,0 +1,3 @@
+export type ArrayWithAtLeast3<T> = [T, T, T, ...T[]];
+export type ArrayWith4<T> = [T, T, T, T];
+export type ArrayWith3<T> = [T, T, T];

package/src/utils/proxyFnCall.ts

@@ -0,0 +1,46 @@
+export function proxyFn<
+  T_PARAM_TO_PROXY,
+  T_FN_PARAMETERS,
+  T_RESULT extends any,
+>(
+  fn: (...params: T_FN_PARAMETERS[]) => T_RESULT,
+  config?: {
+    getProxyTargetFromArgs: (...params: T_FN_PARAMETERS[]) => T_PARAM_TO_PROXY;
+    putProxyToArgs: (
+      proxy: T_PARAM_TO_PROXY,
+      ...params: T_FN_PARAMETERS[]
+    ) => T_FN_PARAMETERS[];
+  },
+) {
+  const propertyReads: Set<string> = new Set();
+  function proxiedFn(...params: T_FN_PARAMETERS[]) {
+    const paramToProxy = config
+      ? config.getProxyTargetFromArgs(...params)
+      : params[0];
+
+    propertyReads.clear();
+
+    const handler = {
+      get: function (obj: object, prop: string) {
+        propertyReads.add(prop);
+        return (obj as any as T_PARAM_TO_PROXY)[prop as keyof T_PARAM_TO_PROXY];
+      },
+    };
+    const proxy = new Proxy(
+      paramToProxy as any as object,
+      handler,
+    ) as any as T_PARAM_TO_PROXY;
+
+    const newParams = config
+      ? config.putProxyToArgs(proxy, ...params)
+      : [proxy];
+
+    //@ts-ignore
+    return fn.apply(this as unknown as any, newParams);
+  }
+
+  return {
+    fn: proxiedFn,
+    propertyReads,
+  };
+}

package/src/utils/raf.ts

@@ -0,0 +1,13 @@
+import { getGlobal } from './getGlobal';
+
+export const raf =
+  getGlobal().requestAnimationFrame ||
+  ((fn: Function) => {
+    return setTimeout(fn, 16);
+  });
+
+export const cancelRaf =
+  getGlobal().cancelAnimationFrame ||
+  ((timeoutId: number) => {
+    return clearTimeout(timeoutId);
+  });

package/src/utils/selectParent.ts

@@ -0,0 +1,18 @@
+export function selectParent(el: HTMLElement, selector: string) {
+  let node: HTMLElement | null = el;
+
+  if (!node) {
+    return null;
+  }
+
+  if (node && node.matches(selector)) {
+    return node;
+  }
+  while ((node = node.parentElement)) {
+    if (node.matches(selector)) {
+      return node;
+    }
+  }
+
+  return null;
+}

package/src/utils/shallowEqualObjects.ts

@@ -0,0 +1,49 @@
+export function shallowEqualObjects<T extends object | null>(
+  objA: T,
+  objB: T,
+  ignoreKeys?: Set<string>,
+): boolean {
+  if (objA === objB) {
+    return true;
+  }
+
+  if (!objA || !objB) {
+    return false;
+  }
+
+  var aKeys = Object.keys(objA) as (keyof T)[];
+  var bKeys = Object.keys(objB) as (keyof T)[];
+
+  if (ignoreKeys) {
+    //@ts-ignore
+    aKeys = aKeys.filter((key) => !ignoreKeys.has(key));
+    //@ts-ignore
+    bKeys = bKeys.filter((key) => !ignoreKeys.has(key));
+  }
+
+  var len = aKeys.length;
+
+  if (bKeys.length !== len) {
+    return false;
+  }
+
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i];
+
+    if (ignoreKeys) {
+      //@ts-ignore
+      if (ignoreKeys.has(key)) {
+        continue;
+      }
+    }
+
+    if (
+      (objA as any)[key] !== (objB as any)[key] ||
+      !Object.prototype.hasOwnProperty.call(objB, key)
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/utils/stripVar.ts

@@ -0,0 +1,3 @@
+export function stripVar(cssVariableWithVarString: string) {
+  return cssVariableWithVarString.slice(4, -1);
+}

package/src/utils/toUpperFirst.ts

@@ -0,0 +1,5 @@
+export const toUpperFirst = (s: string): string => {
+  return s ? s.substr(0, 1).toUpperCase() + s.substr(1) : s;
+};
+
+export default toUpperFirst;

package/todo.md

@@ -0,0 +1,2 @@
+* implement reducer - check it works with nested objects
+* implement sort with nested objects or custom value

package/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "rootDir": "./src"
+  }
+}

package/tsconfig.dev.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": false
+  }
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "include": ["src/**/*", "globals.d.ts"],
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "sourceMap": true,
+    "rootDir": "..",
+    "strict": true,
+    "noEmit": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react",
+    "esModuleInterop": true
+  },
+  "exclude": ["dist"]
+}

package/tsconfig.typebundler.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["dist"],
+  "include": ["dist/index.d.ts"],
+  "compilerOptions": {
+    "lib": [],
+    "module":"System",
+    "allowJs": false,
+    "checkJs": false,
+    "resolveJsonModule": false
+  }
+  
+}

package/typedoc.json

@@ -0,0 +1,4 @@
+{
+  "entryPoints": ["src/index.tsx"],
+  "out": "../apidocs"
+}