feat: add flushSync prop #668

daybrush · Jun 9, 2022 · 068c174 · 068c174
1 parent 0e2abf1
commit 068c174
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 36 deletions.
diff --git a/packages/react-moveable/README.md b/packages/react-moveable/README.md
@@ -196,39 +196,6 @@ render() {
             onRotateEnd={({ target, isDrag, clientX, clientY }) => {
                 console.log("onRotateEnd", target, isDrag);
             }}
-
-            /* warpable */
-            /* Only one of resizable, scalable, warpable can be used. */
-            /*
-            this.matrix = [
-                1, 0, 0, 0,
-                0, 1, 0, 0,
-                0, 0, 1, 0,
-                0, 0, 0, 1,
-            ]
-            */
-            warpable={true}
-            onWarpStart={({ target, clientX, clientY }) => {
-                console.log("onWarpStart", target);
-            }}
-            onWarp={({
-                target,
-                clientX,
-                clientY,
-                delta,
-                dist,
-                multiply,
-                transform,
-            }) => {
-                console.log("onWarp", target);
-                // target.style.transform = transform;
-                this.matrix = multiply(this.matrix, delta);
-                target.style.transform = `matrix3d(${this.matrix.join(",")})`;
-            }}
-            onWarpEnd={({ target, isDrag, clientX, clientY }) => {
-                console.log("onWarpEnd", target, isDrag);
-            }}
-
             // Enabling pinchable lets you use events that
             // can be used in draggable, resizable, scalable, and rotateable.
             pinchable={true}
@@ -249,6 +216,30 @@ render() {
 }
 ```
 
+### React 18 concurrent mode
+
+If you are using React 18's concurrent mode, use `flushSync` for UI sync.
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { flushSync } from "react-dom";
+
+import Moveable from "react-moveable";
+
+
+function App() {
+    return <Moveable flushSync={flushSync} />
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);
+```
 
 ## ⚙️ Developments
 ### `npm start`

diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
@@ -13,6 +13,7 @@ import {
     groupByMap,
     calculatePadding,
     getAbsoluteRotation,
+    defaultSync,
 } from "./utils";
 import Gesto from "gesto";
 import { ref } from "framework-utils";
@@ -62,6 +63,7 @@ export default class MoveableManager<T = {}>
         cssStyled: null,
         customStyledMap: {},
         props: {},
+        flushSync: defaultSync,
     };
     public state: MoveableManagerState = {
         container: null,

diff --git a/packages/react-moveable/src/react-moveable/ables/Default.ts b/packages/react-moveable/src/react-moveable/ables/Default.ts
@@ -20,6 +20,7 @@ export default {
         translateZ: Number,
         hideDefaultLines: Boolean,
         props: Object,
+        flushSync: Function,
     } as const,
     events: {} as const,
 };
diff --git a/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts b/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
@@ -1,6 +1,6 @@
 import { Able, MoveableManagerInterface, MoveableGroupInterface } from "../types";
 import { hasClass, IObject } from "@daybrush/utils";
-import { convertDragDist } from "../utils";
+import { convertDragDist, defaultSync } from "../utils";
 import Gesto from "gesto";
 import BeforeRenderable from "../ables/BeforeRenderable";
 import Renderable from "../ables/Renderable";
@@ -141,8 +141,13 @@ export function triggerAble(
         return false;
     }
     if ((!isStart && isUpdate && !requestInstant) || isEnd) {
-        moveable.updateRect(isEnd ? eventType : "", true, false);
-        moveable.forceUpdate();
+        const flushSync = moveable.props.flushSync || defaultSync;
+
+        flushSync(() => {
+            moveable.updateRect(isEnd ? eventType : "", true, false);
+            moveable.forceUpdate();
+        });
+
     }
     if (!isStart && !isEnd && !isAfter && isUpdate && !requestInstant) {
         triggerAble(moveable, ableType, eventOperation, eventAffix, eventType + "After", e);

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -131,6 +131,17 @@ export interface DefaultOptions {
      * @default empty object
      */
     props?: Record<string, any>;
+    /**
+     * If you are using React 18's concurrent mode, use `flushSync` for UI sync.
+     * @default empty function
+     * @example
+     * ```jsx
+     * import { flushSync } from "react-dom";
+     *
+     * <Moveable flushSync={flushSync} />
+     * ```
+     */
+    flushSync?: (callback: () => void) => void;
 }
 /**
  * @typedef

diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx
@@ -39,6 +39,10 @@ export function prefix(...classNames: string[]) {
     return prefixNames(PREFIX, ...classNames);
 }
 
+export function defaultSync(fn: () => void) {
+    fn();
+}
+
 export function createIdentityMatrix3() {
     return createIdentityMatrix(3);
 }