@basic-ui/core 0.0.32 → 0.0.35

package/build/cjs/index.js

@@ -372,16 +372,30 @@ const initialGestureHandlersState = {
   yInitial: 0,
   yPrev: 0,
   yVelocity: 0,
-  down: false
+  startTime: 0,
+  down: false,
+  scrollLocked: false
 };
+const FRAMERATE_CONST = 1000 / 60; // 60 fps
+
+const VELOCITY_DEPR_FACTOR = FRAMERATE_CONST * 2;
 function gestureHandlers(set, containerRef, options = {}) {
   const {
-    ensureTargetIsContainer = false
+    ensureTargetIsContainer = false,
+    minTouchDelta = 0
   } = options; // Common handlers
 
   const handleUp = () => {
     set(state => {
+      const deltaTime = Date.now() - state.startTime;
+      const xDelta = state.x - state.xInitial;
+      const yDelta = state.y - state.yInitial;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
+
       const newState = _extends__default['default']({}, state, {
+        xVelocity,
+        yVelocity,
         target: null,
         down: false
       });
@@ -411,42 +425,68 @@ function gestureHandlers(set, containerRef, options = {}) {
         yVelocity: 0,
         yInitial: pageY,
         yPrev: pageY,
-        down: true
+        startTime: Date.now(),
+        down: true,
+        scrollLocked: false
       });
 
       return newState;
     });
   };
 
+  function calcVelocity(deltaSpace, deltaTime, prevVelocity) {
+    if (deltaTime < 1) {
+      deltaTime = 1;
+    }
+
+    const speed = deltaSpace / deltaTime;
+    const depr = 0.5 + Math.min(deltaTime / VELOCITY_DEPR_FACTOR, 0.5);
+    return speed * depr + prevVelocity * (1 - depr);
+  }
+
   function handleMove(e) {
     const {
       pageX,
-      movementX,
-      pageY,
-      movementY
+      pageY
     } = e;
-    e.preventDefault && e.preventDefault(); // prevent drag & drop behaviour from browser
+
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault && e.preventDefault();
+    }
 
     set(state => {
+      function getDeltaSum(currentPos, initialPos, prevPos) {
+        if (state.scrollLocked || Math.abs(currentPos - initialPos) >= minTouchDelta) {
+          state.scrollLocked = true;
+          return currentPos - prevPos;
+        }
+
+        return 0;
+      }
+
       const target = containerRef && containerRef.current || e.target;
+      const deltaTime = Date.now() - state.startTime;
       const width = target ? target.offsetWidth : NaN;
-      const xDelta = pageX - state.xInitial;
+      const xDelta = state.xDelta + getDeltaSum(pageX, state.xInitial, state.x);
       const xDeltaPercent = xDelta * 100 / width;
+      const xVelocity = calcVelocity(xDelta, deltaTime, state.xVelocity);
       const height = target ? target.offsetHeight : NaN;
-      const yDelta = pageY - state.yInitial;
+      const yDelta = state.yDelta + getDeltaSum(pageY, state.yInitial, state.y);
       const yDeltaPercent = yDelta * 100 / height;
+      const yVelocity = calcVelocity(yDelta, deltaTime, state.yVelocity);
 
       const newState = _extends__default['default']({}, state, {
         xDelta,
         xDeltaPercent,
         x: pageX,
         xPrev: state.x,
-        xVelocity: movementX,
+        xVelocity,
         yDelta,
         yDeltaPercent,
         y: pageY,
         yPrev: state.y,
-        yVelocity: movementY
+        yVelocity
       });
 
       return newState;
@@ -457,7 +497,11 @@ function gestureHandlers(set, containerRef, options = {}) {
 
 
   function handleTouchMove(e) {
-    e.preventDefault();
+    if (e.cancelable) {
+      // prevent drag & drop behaviour from browser
+      e.preventDefault();
+    }
+
     handleMove(e.touches.item(0));
   }
 
@@ -2755,7 +2799,7 @@ let restTimeout;
 function startRestTimer() {
   window.clearTimeout(restTimeout);
   restTimeout = window.setTimeout(() => {
-    send(TooltipEventTypes.Rest, undefined);
+    send(Rest, undefined);
   }, 200);
 }
 
@@ -2768,7 +2812,7 @@ let leavingVisibleTimer;
 
 function startLeavingVisibleTimer() {
   window.clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = window.setTimeout(() => send(TooltipEventTypes.TimeComplete, undefined), 100);
+  leavingVisibleTimer = window.setTimeout(() => send(TimeComplete, undefined), 100);
 }
 
 function clearLeavingVisibleTimer() {
@@ -2777,35 +2821,31 @@ function clearLeavingVisibleTimer() {
 // State machine
 
 
-let TooltipStates;
+// Nothing goin' on
+const Idle = 'IDLE'; // We're considering showing the tooltip, but we're gonna wait a sec
 
-(function (TooltipStates) {
-  TooltipStates["Idle"] = "IDLE";
-  TooltipStates["Focused"] = "FOCUSED";
-  TooltipStates["Visible"] = "VISIBLE";
-  TooltipStates["LeavingVisible"] = "LEAVING_VISIBLE";
-  TooltipStates["Dismissed"] = "DISMISSED";
-})(TooltipStates || (TooltipStates = {}));
+const Focused = 'FOCUSED'; // It's on!
 
-let TooltipEventTypes;
+const Visible = 'VISIBLE'; // Focus has left, but we want to keep it visible for a sec
 
-(function (TooltipEventTypes) {
-  TooltipEventTypes["Blur"] = "BLUR";
-  TooltipEventTypes["Focus"] = "FOCUS";
-  TooltipEventTypes["GlobalMouseMove"] = "GLOBAL_MOUSE_MOVE";
-  TooltipEventTypes["MouseDown"] = "MOUSE_DOWN";
-  TooltipEventTypes["MouseEnter"] = "MOUSE_ENTER";
-  TooltipEventTypes["MouseLeave"] = "MOUSE_LEAVE";
-  TooltipEventTypes["MouseMove"] = "MOUSE_MOVE";
-  TooltipEventTypes["Rest"] = "REST";
-  TooltipEventTypes["SelectWithKeyboard"] = "SELECT_WITH_KEYBOARD";
-  TooltipEventTypes["TimeComplete"] = "TIME_COMPLETE";
-})(TooltipEventTypes || (TooltipEventTypes = {}));
+const LeavingVisible = 'LEAVING_VISIBLE'; // The user clicked the tool, so we want to hide the thing, we can't just use
+// IDLE because we need to ignore mousemove, etc.
 
+const Dismissed = 'DISMISSED';
+const Blur = 'BLUR';
+const Focus = 'FOCUS';
+const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE';
+const MouseDown = 'MOUSE_DOWN';
+const MouseEnter = 'MOUSE_ENTER';
+const MouseLeave = 'MOUSE_LEAVE';
+const MouseMove = 'MOUSE_MOVE';
+const Rest = 'REST';
+const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD';
+const TimeComplete = 'TIME_COMPLETE';
 const subscription = createSubscription();
 const state = {
   current: {
-    state: TooltipStates.Idle,
+    state: Idle,
     id: ''
   }
 };
@@ -2815,40 +2855,40 @@ function clearContextId() {
 }
 
 const chart = {
-  initial: TooltipStates.Idle,
+  initial: Idle,
   states: {
-    [TooltipStates.Idle]: {
+    [Idle]: {
       enter: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible
+        [MouseEnter]: Focused,
+        [Focus]: Visible
       }
     },
-    [TooltipStates.Focused]: {
+    [Focused]: {
       enter: startRestTimer,
       leave: clearRestTimer,
       on: {
-        [TooltipEventTypes.MouseMove]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle,
-        [TooltipEventTypes.Rest]: TooltipStates.Visible
+        [MouseMove]: Focused,
+        [MouseLeave]: Idle,
+        [MouseDown]: Dismissed,
+        [Blur]: Idle,
+        [Rest]: Visible
       }
     },
-    [TooltipStates.Visible]: {
+    [Visible]: {
       on: {
-        [TooltipEventTypes.Focus]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.Blur]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.SelectWithKeyboard]: TooltipStates.Dismissed,
-        [TooltipEventTypes.GlobalMouseMove]: TooltipStates.LeavingVisible
+        [Focus]: Focused,
+        [MouseEnter]: Focused,
+        [MouseLeave]: LeavingVisible,
+        [Blur]: LeavingVisible,
+        [MouseDown]: Dismissed,
+        [SelectWithKeyboard]: Dismissed,
+        [GlobalMouseMove]: LeavingVisible
       }
     },
-    [TooltipStates.LeavingVisible]: {
+    [LeavingVisible]: {
       enter: () => {
         startLeavingVisibleTimer();
       },
@@ -2857,18 +2897,18 @@ const chart = {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Visible,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible,
-        [TooltipEventTypes.TimeComplete]: TooltipStates.Idle
+        [MouseEnter]: Visible,
+        [Focus]: Visible,
+        [TimeComplete]: Idle
       }
     },
-    [TooltipStates.Dismissed]: {
+    [Dismissed]: {
       leave: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle
+        [MouseLeave]: Idle,
+        [Blur]: Idle
       }
     }
   }
@@ -2931,35 +2971,35 @@ function useTooltip(childProps, childRef, tooltipProps) {
   const id = useId('');
   react.useEffect(() => {
     subscription.subscribe(() => {
-      setVisible((state.current.state === TooltipStates.Visible || state.current.state === TooltipStates.LeavingVisible) && state.current.id === id);
+      setVisible((state.current.state === Visible || state.current.state === LeavingVisible) && state.current.id === id);
     });
   }, [id]);
 
   function handleMouseEnter() {
-    send(TooltipEventTypes.MouseEnter, {
+    send(MouseEnter, {
       id
     });
   }
 
   function handleMouseMove() {
-    send(TooltipEventTypes.MouseMove, {
+    send(MouseMove, {
       id
     });
   }
 
   function handleMouseLeave() {
-    send(TooltipEventTypes.MouseLeave);
+    send(MouseLeave);
   }
 
   function handleMouseDown() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.MouseDown);
+      send(MouseDown);
     }
   }
 
   function handleFocus() {
-    send(TooltipEventTypes.Focus, {
+    send(Focus, {
       id
     });
   }
@@ -2967,13 +3007,13 @@ function useTooltip(childProps, childRef, tooltipProps) {
   function handleBlur() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.Blur, undefined);
+      send(Blur, undefined);
     }
   }
 
   function handleKeyDown(event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      send(TooltipEventTypes.SelectWithKeyboard);
+      send(SelectWithKeyboard);
     }
   }