Merge pull request #493 from hshoff/chris--typescript-vx-event

typescript(vx-event): Re-write package in TypeScript

packages/vx-event/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -30,6 +31,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@types/react": "*",
     "@vx/point": "0.0.192"
   }
 }

packages/vx-event/src/getXAndYFromEvent.ts

@@ -0,0 +1,22 @@
+import { EventType } from './types';
+import { isTouchEvent } from './typeGuards';
+
+const DEFAULT_POINT = { x: 0, y: 0 };
+
+export default function getXAndYFromEvent(event?: EventType) {
+  if (!event) return { ...DEFAULT_POINT };
+
+  if (isTouchEvent(event)) {
+    return event.changedTouches.length > 0
+      ? {
+          x: event.changedTouches[0].clientX,
+          y: event.changedTouches[0].clientX,
+        }
+      : { ...DEFAULT_POINT };
+  }
+
+  return {
+    x: event.clientX,
+    y: event.clientY,
+  };
+}

packages/vx-event/src/localPoint.ts

@@ -0,0 +1,14 @@
+import localPointGeneric from './localPointGeneric';
+import { EventType } from './types';
+import { isElement, isEvent } from './typeGuards';
+
+export default function localPoint(nodeOrEvent: Element | EventType, maybeEvent?: EventType) {
+  if (isElement(nodeOrEvent) && maybeEvent) {
+    return localPointGeneric(nodeOrEvent, maybeEvent);
+  }
+  if (isEvent(nodeOrEvent)) {
+    const node = nodeOrEvent.target as Element;
+    if (node) return localPointGeneric(node, nodeOrEvent);
+  }
+  return null;
+}

packages/vx-event/src/localPointGeneric.ts

@@ -0,0 +1,34 @@
+import { Point } from '@vx/point';
+import { EventType } from './types';
+import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement } from './typeGuards';
+import getXAndYFromEvent from './getXAndYFromEvent';
+
+export default function localPoint(node: Element, event: EventType) {
+  if (!node || !event) return null;
+
+  const coords = getXAndYFromEvent(event);
+
+  // find top-most SVG
+  const svg = isSVGElement(node) ? node.ownerSVGElement : node;
+  const screenCTM = isSVGGraphicsElement(node) ? node.getScreenCTM() : null;
+
+  if (isSVGSVGElement(svg) && screenCTM) {
+    let point = svg.createSVGPoint();
+    point.x = coords.x;
+    point.y = coords.y;
+    point = point.matrixTransform(screenCTM.inverse());
+
+    return new Point({
+      x: point.x,
+      y: point.y,
+    });
+  }
+
+  // fall back to bounding box
+  const rect = node.getBoundingClientRect();
+
+  return new Point({
+    x: coords.x - rect.left - node.clientLeft,
+    y: coords.y - rect.top - node.clientTop,
+  });
+}

packages/vx-event/src/touchPoint.ts

@@ -0,0 +1 @@
+export { default } from './localPointGeneric';

packages/vx-event/src/typeGuards.ts

@@ -0,0 +1,32 @@
+import { EventType } from './types';
+
+export function isElement(elem?: Element | EventType): elem is Element {
+  return !!elem && elem instanceof Element;
+}
+
+// functional definition of isSVGElement. Note that SVGSVGElements are HTMLElements
+export function isSVGElement(elem?: Element): elem is SVGElement {
+  return !!elem && (elem instanceof SVGElement || 'ownerSVGElement' in elem);
+}
+
+// functional definition of SVGGElement
+export function isSVGSVGElement(elem?: Element | null): elem is SVGSVGElement {
+  return !!elem && 'createSVGPoint' in elem;
+}
+
+export function isSVGGraphicsElement(elem?: Element | null): elem is SVGGraphicsElement {
+  return !!elem && 'getScreenCTM' in elem;
+}
+
+// functional definition of TouchEvent
+export function isTouchEvent(event?: EventType): event is TouchEvent | React.TouchEvent {
+  return !!event && 'changedTouches' in event;
+}
+
+// functional definition of event
+export function isEvent(event?: EventType | Element): event is EventType {
+  return (
+    !!event &&
+    (event instanceof Event || ('nativeEvent' in event && event.nativeEvent instanceof Event))
+  );
+}

packages/vx-event/src/types.ts

@@ -0,0 +1 @@
+export type EventType = MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent;