react-native-gesture-handler 2.18.1 → 2.20.0

package/src/web/handlers/PanGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, StylusData } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 
@@ -52,6 +52,8 @@ export default class PanGestureHandler extends GestureHandler {
   private lastX = 0;
   private lastY = 0;
 
+  private stylusData: StylusData | undefined;
+
   private activateAfterLongPress = 0;
   private activationTimeout = 0;
 
@@ -196,6 +198,7 @@ export default class PanGestureHandler extends GestureHandler {
       translationY: isNaN(translationY) ? 0 : translationY,
       velocityX: this.velocityX,
       velocityY: this.velocityY,
+      stylusData: this.stylusData,
     };
   }
 
@@ -217,6 +220,8 @@ export default class PanGestureHandler extends GestureHandler {
     }
 
     this.tracker.addToTracker(event);
+    this.stylusData = event.stylusData;
+
     super.onPointerDown(event);
 
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
@@ -259,6 +264,8 @@ export default class PanGestureHandler extends GestureHandler {
   }
 
   protected onPointerUp(event: AdaptedEvent): void {
+    this.stylusData = event.stylusData;
+
     super.onPointerUp(event);
     if (this.currentState === State.ACTIVE) {
       const lastCoords = this.tracker.getAbsoluteCoordsAverage();
@@ -268,6 +275,10 @@ export default class PanGestureHandler extends GestureHandler {
 
     this.tracker.removeFromTracker(event.pointerId);
 
+    if (this.tracker.getTrackedPointersCount() === 0) {
+      this.clearActivationTimeout();
+    }
+
     if (this.currentState === State.ACTIVE) {
       this.end();
     } else {
@@ -302,6 +313,7 @@ export default class PanGestureHandler extends GestureHandler {
 
   protected onPointerMove(event: AdaptedEvent): void {
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
 
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
     this.lastX = lastCoords.x;
@@ -322,6 +334,7 @@ export default class PanGestureHandler extends GestureHandler {
     }
 
     this.tracker.track(event);
+    this.stylusData = event.stylusData;
 
     const lastCoords = this.tracker.getAbsoluteCoordsAverage();
     this.lastX = lastCoords.x;

package/src/web/interfaces.ts

@@ -36,7 +36,7 @@ type ConfigArgs =
   | undefined;
 
 export interface Config extends Record<string, ConfigArgs> {
-  enabled?: boolean;
+  enabled: boolean;
   simultaneousHandlers?: Handler[] | null;
   waitFor?: Handler[] | null;
   blocksHandlers?: Handler[] | null;
@@ -132,6 +132,14 @@ export interface PropsRef {
   onGestureHandlerStateChange: () => void;
 }
 
+export interface StylusData {
+  tiltX: number;
+  tiltY: number;
+  azimuthAngle: number;
+  altitudeAngle: number;
+  pressure: number;
+}
+
 export interface AdaptedEvent {
   x: number;
   y: number;
@@ -142,9 +150,7 @@ export interface AdaptedEvent {
   pointerType: PointerType;
   time: number;
   button?: MouseButton;
-  allTouches?: TouchList;
-  changedTouches?: TouchList;
-  touchEventType?: TouchEventType;
+  stylusData?: StylusData;
 }
 
 export enum EventTypes {

package/src/web/tools/EventManager.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
+import { AdaptedEvent, EventTypes } from '../interfaces';
 
 type PointerEventCallback = (event: AdaptedEvent) => void;
 
@@ -18,9 +18,7 @@ export default abstract class EventManager<T> {
 
   protected abstract mapEvent(
     event: Event,
-    eventType: EventTypes,
-    index?: number,
-    touchEventType?: TouchEventType
+    eventType: EventTypes
   ): AdaptedEvent;
 
   protected onPointerDown(_event: AdaptedEvent): void {}

package/src/web/tools/GestureHandlerDelegate.ts

@@ -20,6 +20,7 @@ export interface GestureHandlerDelegate<TComponent, THandler> {
   onEnd(): void;
   onCancel(): void;
   onFail(): void;
+  onEnabledChange(enabled: boolean): void;
 
   destroy(config: Config): void;
 }

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -5,19 +5,29 @@ import {
   MeasureResult,
 } from './GestureHandlerDelegate';
 import PointerEventManager from './PointerEventManager';
-import TouchEventManager from './TouchEventManager';
 import { State } from '../../State';
 import { isPointerInBounds } from '../utils';
 import EventManager from './EventManager';
 import { Config } from '../interfaces';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import KeyboardEventManager from './KeyboardEventManager';
+
+interface DefaultViewStyles {
+  userSelect: string;
+  touchAction: string;
+}
 
 export class GestureHandlerWebDelegate
   implements GestureHandlerDelegate<HTMLElement, IGestureHandler>
 {
+  private isInitialized = false;
   private view!: HTMLElement;
   private gestureHandler!: IGestureHandler;
   private eventManagers: EventManager<unknown>[] = [];
+  private defaultViewStyles: DefaultViewStyles = {
+    userSelect: '',
+    touchAction: '',
+  };
 
   getView(): HTMLElement {
     return this.view;
@@ -30,22 +40,24 @@ export class GestureHandlerWebDelegate
       );
     }
 
+    this.isInitialized = true;
+
     this.gestureHandler = handler;
     this.view = findNodeHandle(viewRef) as unknown as HTMLElement;
 
-    const config = handler.getConfig();
+    this.defaultViewStyles = {
+      userSelect: this.view.style.userSelect,
+      touchAction: this.view.style.touchAction,
+    };
 
-    this.addContextMenuListeners(config);
+    const config = handler.getConfig();
 
-    this.view.style['userSelect'] = config.userSelect ?? 'none';
-    this.view.style['webkitUserSelect'] = config.userSelect ?? 'none';
-
-    this.view.style['touchAction'] = config.touchAction ?? 'none';
-    // @ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = 'none';
+    this.setUserSelect(config.enabled);
+    this.setTouchAction(config.enabled);
+    this.setContextMenu(config.enabled);
 
     this.eventManagers.push(new PointerEventManager(this.view));
-    this.eventManagers.push(new TouchEventManager(this.view));
+    this.eventManagers.push(new KeyboardEventManager(this.view));
 
     this.eventManagers.forEach((manager) =>
       this.gestureHandler.attachEventManager(manager)
@@ -117,6 +129,51 @@ export class GestureHandlerWebDelegate
     e.stopPropagation();
   }
 
+  private setUserSelect(isHandlerEnabled: boolean) {
+    const { userSelect } = this.gestureHandler.getConfig();
+
+    this.view.style['userSelect'] = isHandlerEnabled
+      ? userSelect ?? 'none'
+      : this.defaultViewStyles.userSelect;
+
+    this.view.style['webkitUserSelect'] = isHandlerEnabled
+      ? userSelect ?? 'none'
+      : this.defaultViewStyles.userSelect;
+  }
+
+  private setTouchAction(isHandlerEnabled: boolean) {
+    const { touchAction } = this.gestureHandler.getConfig();
+
+    this.view.style['touchAction'] = isHandlerEnabled
+      ? touchAction ?? 'none'
+      : this.defaultViewStyles.touchAction;
+
+    // @ts-ignore This one disables default events on Safari
+    this.view.style['WebkitTouchCallout'] = isHandlerEnabled
+      ? touchAction ?? 'none'
+      : this.defaultViewStyles.touchAction;
+  }
+
+  private setContextMenu(isHandlerEnabled: boolean) {
+    const config = this.gestureHandler.getConfig();
+
+    if (isHandlerEnabled) {
+      this.addContextMenuListeners(config);
+    } else {
+      this.removeContextMenuListeners(config);
+    }
+  }
+
+  onEnabledChange(enabled: boolean): void {
+    if (!this.isInitialized) {
+      return;
+    }
+
+    this.setUserSelect(enabled);
+    this.setTouchAction(enabled);
+    this.setContextMenu(enabled);
+  }
+
   onBegin(): void {
     // no-op for now
   }

package/src/web/tools/KeyboardEventManager.ts

@@ -0,0 +1,91 @@
+import { AdaptedEvent, EventTypes } from '../interfaces';
+import EventManager from './EventManager';
+import { PointerType } from '../../PointerType';
+
+export default class KeyboardEventManager extends EventManager<HTMLElement> {
+  private activationKeys = ['Enter', ' '];
+  private cancelationKeys = ['Tab'];
+  private isPressed = false;
+
+  private keyDownCallback = (event: KeyboardEvent): void => {
+    if (this.cancelationKeys.indexOf(event.key) !== -1 && this.isPressed) {
+      this.dispatchEvent(event, EventTypes.CANCEL);
+      return;
+    }
+
+    if (this.activationKeys.indexOf(event.key) === -1) {
+      return;
+    }
+
+    this.dispatchEvent(event, EventTypes.DOWN);
+  };
+
+  private keyUpCallback = (event: KeyboardEvent): void => {
+    if (this.activationKeys.indexOf(event.key) === -1 || !this.isPressed) {
+      return;
+    }
+
+    this.dispatchEvent(event, EventTypes.UP);
+  };
+
+  private dispatchEvent(event: KeyboardEvent, eventType: EventTypes) {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+
+    const adaptedEvent = this.mapEvent(event, eventType);
+
+    switch (eventType) {
+      case EventTypes.UP:
+        this.isPressed = false;
+        this.onPointerUp(adaptedEvent);
+        break;
+      case EventTypes.DOWN:
+        this.isPressed = true;
+        this.onPointerDown(adaptedEvent);
+        break;
+      case EventTypes.CANCEL:
+        this.isPressed = false;
+        this.onPointerCancel(adaptedEvent);
+        break;
+    }
+  }
+
+  public registerListeners(): void {
+    this.view.addEventListener('keydown', this.keyDownCallback);
+    this.view.addEventListener('keyup', this.keyUpCallback);
+  }
+
+  public unregisterListeners(): void {
+    this.view.addEventListener('keydown', this.keyDownCallback);
+    this.view.addEventListener('keyup', this.keyUpCallback);
+  }
+
+  protected mapEvent(
+    event: KeyboardEvent,
+    eventType: EventTypes
+  ): AdaptedEvent {
+    const viewRect = (event.target as HTMLElement).getBoundingClientRect();
+
+    const viewportPosition = {
+      x: viewRect?.x + viewRect?.width / 2,
+      y: viewRect?.y + viewRect?.height / 2,
+    };
+
+    const relativePosition = {
+      x: viewRect?.width / 2,
+      y: viewRect?.height / 2,
+    };
+
+    return {
+      x: viewportPosition.x,
+      y: viewportPosition.y,
+      offsetX: relativePosition.x,
+      offsetY: relativePosition.y,
+      pointerId: 0,
+      eventType: eventType,
+      pointerType: PointerType.KEY,
+      time: event.timeStamp,
+    };
+  }
+}

package/src/web/tools/PointerEventManager.ts

@@ -4,15 +4,12 @@ import { AdaptedEvent, EventTypes, Point } from '../interfaces';
 import {
   PointerTypeMapping,
   calculateViewScale,
+  tryExtractStylusData,
   isPointerInBounds,
 } from '../utils';
 import { PointerType } from '../../PointerType';
 
 const POINTER_CAPTURE_EXCLUDE_LIST = new Set<string>(['SELECT', 'INPUT']);
-const PointerTypes = {
-  Touch: 'touch',
-  Stylus: 'pen',
-};
 
 export default class PointerEventManager extends EventManager<HTMLElement> {
   private trackedPointers = new Set<number>();
@@ -35,9 +32,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   }
 
   private pointerDownCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
     if (!isPointerInBounds(this.view, { x: event.clientX, y: event.clientY })) {
       return;
     }
@@ -61,10 +55,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   private pointerUpCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
     // When we call reset on gesture handlers, it also resets their event managers
     // In some handlers (like RotationGestureHandler) reset is called before all pointers leave view
     // This means, that activePointersCounter will be set to 0, while there are still remaining pointers on view
@@ -92,21 +82,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   private pointerMoveCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
-    // Stylus triggers `pointermove` event when it detects changes in pressure. Since it is very sensitive to those changes,
-    // it constantly sends events, even though there was no change in position. To fix that we check whether
-    // pointer has actually moved and if not, we do not send event.
-    if (
-      event.pointerType === PointerTypes.Stylus &&
-      event.x === this.lastPosition.x &&
-      event.y === this.lastPosition.y
-    ) {
-      return;
-    }
-
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.MOVE);
     const target = event.target as HTMLElement;
 
@@ -161,10 +136,6 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   private pointerCancelCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.CANCEL);
 
     this.onPointerCancel(adaptedEvent);
@@ -174,20 +145,12 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
   };
 
   private pointerEnterCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.ENTER);
 
     this.onPointerMoveOver(adaptedEvent);
   };
 
   private pointerLeaveCallback = (event: PointerEvent) => {
-    if (event.pointerType === PointerTypes.Touch) {
-      return;
-    }
-
     const adaptedEvent: AdaptedEvent = this.mapEvent(event, EventTypes.LEAVE);
 
     this.onPointerMoveOut(adaptedEvent);
@@ -252,6 +215,7 @@ export default class PointerEventManager extends EventManager<HTMLElement> {
         PointerTypeMapping.get(event.pointerType) ?? PointerType.OTHER,
       button: this.mouseButtonsMapper.get(event.button),
       time: event.timeStamp,
+      stylusData: tryExtractStylusData(event),
     };
   }
 

package/src/web/tools/Vector.ts

@@ -1,5 +1,5 @@
 import { DiagonalDirections, Directions } from '../../Directions';
-import { MINIMAL_FLING_VELOCITY } from '../constants';
+import { MINIMAL_RECOGNIZABLE_MAGNITUDE } from '../constants';
 import PointerTracker from './PointerTracker';
 
 export default class Vector {
@@ -14,14 +14,15 @@ export default class Vector {
     this.y = y;
 
     this._magnitude = Math.hypot(this.x, this.y);
-    const isMagnitudeSufficient = this._magnitude > MINIMAL_FLING_VELOCITY;
+    const isMagnitudeSufficient =
+      this._magnitude > MINIMAL_RECOGNIZABLE_MAGNITUDE;
 
     this.unitX = isMagnitudeSufficient ? this.x / this._magnitude : 0;
     this.unitY = isMagnitudeSufficient ? this.y / this._magnitude : 0;
   }
 
   static fromDirection(direction: Directions | DiagonalDirections): Vector {
-    return DirectionToVectorMappings.get(direction)!;
+    return DirectionToVectorMappings.get(direction) ?? new Vector(0, 0);
   }
 
   static fromVelocity(tracker: PointerTracker, pointerId: number) {

package/src/web/utils.ts

@@ -1,5 +1,5 @@
 import { PointerType } from '../PointerType';
-import { Point } from './interfaces';
+import type { Point, StylusData } from './interfaces';
 
 export function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {
   const rect: DOMRect = view.getBoundingClientRect();
@@ -27,28 +27,203 @@ export function calculateViewScale(view: HTMLElement) {
     scaleY: 1,
   };
 
-  const scales = styles.scale.split(' ');
+  // Get scales from scale property
+  if (styles.scale !== undefined && styles.scale !== 'none') {
+    const scales = styles.scale.split(' ');
 
-  if (scales[0] !== 'none') {
-    resultScales.scaleX = parseFloat(scales[0]);
-  }
+    if (scales[0]) {
+      resultScales.scaleX = parseFloat(scales[0]);
+    }
 
-  if (scales[1]) {
-    resultScales.scaleY = parseFloat(scales[1]);
+    resultScales.scaleY = scales[1]
+      ? parseFloat(scales[1])
+      : parseFloat(scales[0]);
   }
 
+  // Get scales from transform property
   const matrixElements = new RegExp(/matrix\((.+)\)/).exec(
     styles.transform
   )?.[1];
 
-  if (!matrixElements) {
-    return resultScales;
+  if (matrixElements) {
+    const matrixElementsArray = matrixElements.split(', ');
+
+    resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
+    resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
   }
 
-  const matrixElementsArray = matrixElements.split(', ');
+  return resultScales;
+}
 
-  resultScales.scaleX *= parseFloat(matrixElementsArray[0]);
-  resultScales.scaleY *= parseFloat(matrixElementsArray[3]);
+export function tryExtractStylusData(
+  event: PointerEvent
+): StylusData | undefined {
+  const pointerType = PointerTypeMapping.get(event.pointerType);
 
-  return resultScales;
+  if (pointerType !== PointerType.STYLUS) {
+    return;
+  }
+
+  // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)
+  const eventAzimuthAngle: number | undefined = event.azimuthAngle;
+  // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)
+  const eventAltitudeAngle: number | undefined = event.altitudeAngle;
+
+  if (event.tiltX === 0 && event.tiltY === 0) {
+    // If we are in this branch, it means that either tilt properties are not supported and we have to calculate them from altitude and azimuth angles,
+    // or stylus is perpendicular to the screen and we can use altitude / azimuth instead of tilt
+
+    // If azimuth and altitude are undefined in this branch, it means that we are either perpendicular to the screen,
+    // or that none of the position sets is supported. In that case, we can treat stylus as perpendicular
+    if (eventAzimuthAngle === undefined || eventAltitudeAngle === undefined) {
+      return {
+        tiltX: 0,
+        tiltY: 0,
+        azimuthAngle: Math.PI / 2,
+        altitudeAngle: Math.PI / 2,
+        pressure: event.pressure,
+      };
+    }
+
+    const { tiltX, tiltY } = spherical2tilt(
+      eventAltitudeAngle,
+      eventAzimuthAngle
+    );
+
+    return {
+      tiltX,
+      tiltY,
+      azimuthAngle: eventAzimuthAngle,
+      altitudeAngle: eventAltitudeAngle,
+      pressure: event.pressure,
+    };
+  }
+
+  const { altitudeAngle, azimuthAngle } = tilt2spherical(
+    event.tiltX,
+    event.tiltY
+  );
+
+  return {
+    tiltX: event.tiltX,
+    tiltY: event.tiltY,
+    azimuthAngle,
+    altitudeAngle,
+    pressure: event.pressure,
+  };
+}
+
+// `altitudeAngle` and `azimuthAngle` are experimental properties, which are not supported on Firefox and Safari.
+// Given that, we use `tilt` properties and algorithm that converts one value to another.
+//
+// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle
+function tilt2spherical(tiltX: number, tiltY: number) {
+  const tiltXrad = (tiltX * Math.PI) / 180;
+  const tiltYrad = (tiltY * Math.PI) / 180;
+
+  // calculate azimuth angle
+  let azimuthAngle = 0;
+
+  if (tiltX === 0) {
+    if (tiltY > 0) {
+      azimuthAngle = Math.PI / 2;
+    } else if (tiltY < 0) {
+      azimuthAngle = (3 * Math.PI) / 2;
+    }
+  } else if (tiltY === 0) {
+    if (tiltX < 0) {
+      azimuthAngle = Math.PI;
+    }
+  } else if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {
+    // not enough information to calculate azimuth
+    azimuthAngle = 0;
+  } else {
+    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90
+    const tanX = Math.tan(tiltXrad);
+    const tanY = Math.tan(tiltYrad);
+
+    azimuthAngle = Math.atan2(tanY, tanX);
+    if (azimuthAngle < 0) {
+      azimuthAngle += 2 * Math.PI;
+    }
+  }
+
+  // calculate altitude angle
+  let altitudeAngle = 0;
+
+  if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {
+    altitudeAngle = 0;
+  } else if (tiltX === 0) {
+    altitudeAngle = Math.PI / 2 - Math.abs(tiltYrad);
+  } else if (tiltY === 0) {
+    altitudeAngle = Math.PI / 2 - Math.abs(tiltXrad);
+  } else {
+    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90
+    altitudeAngle = Math.atan(
+      1.0 /
+        Math.sqrt(
+          Math.pow(Math.tan(tiltXrad), 2) + Math.pow(Math.tan(tiltYrad), 2)
+        )
+    );
+  }
+
+  return { altitudeAngle: altitudeAngle, azimuthAngle: azimuthAngle };
+}
+
+// If we are on a platform that doesn't support `tiltX` and `tiltY`, we have to calculate them from `altitude` and `azimuth` angles.
+//
+// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle
+function spherical2tilt(altitudeAngle: number, azimuthAngle: number) {
+  const radToDeg = 180 / Math.PI;
+
+  let tiltXrad = 0;
+  let tiltYrad = 0;
+
+  if (altitudeAngle === 0) {
+    // the pen is in the X-Y plane
+    if (azimuthAngle === 0 || azimuthAngle === 2 * Math.PI) {
+      // pen is on positive X axis
+      tiltXrad = Math.PI / 2;
+    }
+    if (azimuthAngle === Math.PI / 2) {
+      // pen is on positive Y axis
+      tiltYrad = Math.PI / 2;
+    }
+    if (azimuthAngle === Math.PI) {
+      // pen is on negative X axis
+      tiltXrad = -Math.PI / 2;
+    }
+    if (azimuthAngle === (3 * Math.PI) / 2) {
+      // pen is on negative Y axis
+      tiltYrad = -Math.PI / 2;
+    }
+    if (azimuthAngle > 0 && azimuthAngle < Math.PI / 2) {
+      tiltXrad = Math.PI / 2;
+      tiltYrad = Math.PI / 2;
+    }
+    if (azimuthAngle > Math.PI / 2 && azimuthAngle < Math.PI) {
+      tiltXrad = -Math.PI / 2;
+      tiltYrad = Math.PI / 2;
+    }
+    if (azimuthAngle > Math.PI && azimuthAngle < (3 * Math.PI) / 2) {
+      tiltXrad = -Math.PI / 2;
+      tiltYrad = -Math.PI / 2;
+    }
+    if (azimuthAngle > (3 * Math.PI) / 2 && azimuthAngle < 2 * Math.PI) {
+      tiltXrad = Math.PI / 2;
+      tiltYrad = -Math.PI / 2;
+    }
+  }
+
+  if (altitudeAngle !== 0) {
+    const tanAlt = Math.tan(altitudeAngle);
+
+    tiltXrad = Math.atan(Math.cos(azimuthAngle) / tanAlt);
+    tiltYrad = Math.atan(Math.sin(azimuthAngle) / tanAlt);
+  }
+
+  const tiltX = Math.round(tiltXrad * radToDeg);
+  const tiltY = Math.round(tiltYrad * radToDeg);
+
+  return { tiltX, tiltY };
 }