@noya-app/noya-multiplayer-react 0.1.13 → 0.1.15

package/src/inspector/StateInspector.tsx

@@ -252,6 +252,7 @@ export const StateInspector = memo(function StateInspector<
   colorScheme = "light",
   multiplayerStateManager,
   anchor = "right",
+  forceInit,
   ...props
 }: {
   state: S;
@@ -263,6 +264,7 @@ export const StateInspector = memo(function StateInspector<
   colorScheme?: "light" | "dark";
   multiplayerStateManager: MultiplayerStateManager<S, M>;
   anchor?: Anchor;
+  forceInit: () => void;
 } & ComponentPropsWithoutRef<"div">) {
   const [didMount, setDidMount] = React.useState(false);
 
@@ -448,20 +450,38 @@ export const StateInspector = memo(function StateInspector<
         colorScheme={colorScheme}
         setOpen={setShowData}
         open={showData}
+        right={
+          <span
+            style={{
+              display: "flex",
+              gap: "4px",
+            }}
+          >
+            <SmallButton
+              // disabled={!historySnapshot.canUndo}
+              theme={theme}
+              onClick={() => {
+                forceInit();
+              }}
+            >
+              Reset
+            </SmallButton>
+          </span>
+        }
       >
         <div style={styles.sectionInner}>
           <InspectorRow colorScheme={colorScheme}>
             <ObjectInspector
-              name={multiplayerStateManager.sm.schema ? "state" : undefined}
+              name={multiplayerStateManager.schema ? "state" : undefined}
               data={state}
               theme={theme}
             />
           </InspectorRow>
-          {multiplayerStateManager.sm.schema && (
+          {multiplayerStateManager.schema && (
             <InspectorRow colorScheme={colorScheme}>
               <ObjectInspector
                 name="schema"
-                data={multiplayerStateManager.sm.schema}
+                data={multiplayerStateManager.schema}
                 theme={theme}
               />
             </InspectorRow>
@@ -473,6 +493,57 @@ export const StateInspector = memo(function StateInspector<
         setOpen={setShowHistory}
         title="History"
         colorScheme={colorScheme}
+        right={
+          <span
+            style={{
+              display: "flex",
+              gap: "4px",
+            }}
+          >
+            <SmallButton
+              disabled={!historySnapshot.canUndo}
+              theme={theme}
+              onClick={() => {
+                multiplayerStateManager.undo();
+              }}
+            >
+              <span style={{ width: "12px", height: "12px" }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
+                  />
+                </svg>
+              </span>
+            </SmallButton>
+            <SmallButton
+              disabled={!historySnapshot.canRedo}
+              theme={theme}
+              onClick={() => {
+                multiplayerStateManager.redo();
+              }}
+            >
+              <span style={{ width: "12px", height: "12px" }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
+                  />
+                </svg>
+              </span>
+            </SmallButton>
+          </span>
+        }
       >
         <div ref={historyContainerRef} style={styles.sectionInner}>
           <div
@@ -551,6 +622,17 @@ export const StateInspector = memo(function StateInspector<
                       </span>
                     </>
                   )}
+                  {patch.op === "move" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.from!)}
+                      </span>
+                      {" -> "}
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                    </>
+                  )}
                 </pre>
               ))}
             </div>
@@ -763,3 +845,46 @@ function ellipsis(
       return `${str.slice(0, maxLength)}…`;
   }
 }
+
+function SmallButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  style?: CSSProperties;
+  theme: typeof chromeLight;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      style={{
+        flex: "0",
+        appearance: "none",
+        background: "none",
+        color: theme.BASE_COLOR,
+        opacity: disabled ? 0.25 : 1,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0",
+        cursor: "pointer",
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}

package/src/inspector/useStateInspector.tsx

@@ -28,6 +28,7 @@ export function useStateInspector<S extends object, M>({
   colorScheme,
   anchor,
   multiplayerStateManager,
+  forceInit,
 }: {
   state: S;
   connectionEvents?: ConnectionEvent<S>[];
@@ -36,6 +37,7 @@ export function useStateInspector<S extends object, M>({
   userId?: string;
   disabled: boolean;
   multiplayerStateManager: MultiplayerStateManager<S, M>;
+  forceInit: () => void;
 } & Pick<ComponentProps<typeof StateInspector>, "colorScheme" | "anchor">) {
   const [root, setRoot] = React.useState<Root | null>(null);
 
@@ -67,6 +69,7 @@ export function useStateInspector<S extends object, M>({
         userId={userId}
         colorScheme={colorScheme}
         anchor={anchor}
+        forceInit={forceInit}
         multiplayerStateManager={
           multiplayerStateManager as MultiplayerStateManager<any, any>
         }
@@ -82,5 +85,6 @@ export function useStateInspector<S extends object, M>({
     multiplayerStateManager,
     userId,
     tasks,
+    forceInit,
   ]);
 }