impl #530, observe drag event and replay as mousemove

src/record/observer.ts

@@ -142,19 +142,27 @@ function initMoveObserver(
 
   let positions: mousePosition[] = [];
   let timeBaseline: number | null;
-  const wrappedCb = throttle((isTouch: boolean) => {
+  const wrappedCb = throttle(
-    const totalOffset = Date.now() - timeBaseline!;
+    (
-    cb(
+      source:
-      positions.map((p) => {
+        | IncrementalSource.MouseMove
-        p.timeOffset -= totalOffset;
+        | IncrementalSource.TouchMove
-        return p;
+        | IncrementalSource.Drag,
-      }),
+    ) => {
-      isTouch ? IncrementalSource.TouchMove : IncrementalSource.MouseMove,
+      const totalOffset = Date.now() - timeBaseline!;
-    );
+      cb(
-    positions = [];
+        positions.map((p) => {
-    timeBaseline = null;
+          p.timeOffset -= totalOffset;
-  }, callbackThreshold);
+          return p;
-  const updatePosition = throttle<MouseEvent | TouchEvent>(
+        }),
+        source,
+      );
+      positions = [];
+      timeBaseline = null;
+    },
+    callbackThreshold,
+  );
+  const updatePosition = throttle<MouseEvent | TouchEvent | DragEvent>(
     (evt) => {
       const { target } = evt;
       const { clientX, clientY } = isTouchEvent(evt)
@@ -169,7 +177,13 @@ function initMoveObserver(
         id: mirror.getId(target as INode),
         timeOffset: Date.now() - timeBaseline,
       });
-      wrappedCb(isTouchEvent(evt));
+      wrappedCb(
+        evt instanceof MouseEvent
+          ? IncrementalSource.MouseMove
+          : evt instanceof DragEvent
+          ? IncrementalSource.Drag
+          : IncrementalSource.TouchMove,
+      );
     },
     threshold,
     {
@@ -179,6 +193,7 @@ function initMoveObserver(
   const handlers = [
     on('mousemove', updatePosition, doc),
     on('touchmove', updatePosition, doc),
+    on('drag', updatePosition, doc),
   ];
   return () => {
     handlers.forEach((h) => h());

src/types.ts

@@ -82,6 +82,7 @@ export enum IncrementalSource {
   CanvasMutation,
   Font,
   Log,
+  Drag,
 }
 
 export type mutationData = {
@@ -89,7 +90,10 @@ export type mutationData = {
 } & mutationCallbackParam;
 
 export type mousemoveData = {
-  source: IncrementalSource.MouseMove | IncrementalSource.TouchMove;
+  source:
+    | IncrementalSource.MouseMove
+    | IncrementalSource.TouchMove
+    | IncrementalSource.Drag;
   positions: mousePosition[];
 };
 
@@ -307,7 +311,10 @@ export type mutationCallBack = (m: mutationCallbackParam) => void;
 
 export type mousemoveCallBack = (
   p: mousePosition[],
-  source: IncrementalSource.MouseMove | IncrementalSource.TouchMove,
+  source:
+    | IncrementalSource.MouseMove
+    | IncrementalSource.TouchMove
+    | IncrementalSource.Drag,
 ) => void;
 
 export type mousePosition = {