@netless/fastboard 0.0.10 → 0.0.11

package/src/components/Toolbar/Toolbar.tsx

@@ -1,16 +1,19 @@
-import type { CommonProps, GenericIcon, Theme } from "../../types";
 import type { i18n } from "i18next";
+import type { CommonProps, GenericIcon, Theme } from "../../types";
+import { AnimatePresence, motion } from "framer-motion";
 
-import clsx from "clsx";
 import React, { createContext, useCallback, useState } from "react";
 
 import { Icon } from "../../icons";
-import { Icons } from "./icons";
-import { Button } from "./components/Button";
-import { CutLine } from "./components/CutLine";
 import { EmptyToolbarHook, useToolbar, type ToolbarHook } from "./hooks";
 import { Content } from "./Content";
 
+import collapsePNG from "./components/assets/collapsed.png";
+import expandPNG from "./components/assets/expanded.png";
+
+import clsx from "clsx";
+import { Mask } from "./components/Mask";
+
 export type ToolbarProps = CommonProps & {
   icons?: GenericIcon<
     | "clicker"
@@ -44,39 +47,86 @@ export const Toolbar = ({
   theme = "light",
   icons,
   room,
+  manager,
   i18n,
 }: ToolbarProps) => {
   const [expanded, setExpanded] = useState(true);
-  const hook = useToolbar(room);
-  const toggle = useCallback(() => setExpanded(e => !e), []);
-
+  const hook = useToolbar(room, manager);
+  const [toolbar, toolbarRef] = useState<HTMLDivElement | null>(null);
+  const [onHover, setOnHover] = useState<boolean>(false);
+  const [pointEvents, setPointEvents] = useState(true);
   const disabled = !hook.writable;
 
+  const toggle = useCallback(() => {
+    setExpanded(e => !e);
+  }, []);
+
   return (
     <ToolbarContext.Provider value={{ theme, icons, ...hook, i18n }}>
-      <div className={clsx(name, theme)}>
+      <AnimatePresence>
         {expanded ? (
-          <Button content={i18n?.t("collapse")} onClick={toggle}>
-            <Icon
-              fallback={<Icons.Collapse theme={theme} />}
-              src={disabled ? icons?.collapseIconDisable : icons?.collapseIcon}
-            />
-          </Button>
-        ) : (
-          <Button content={i18n?.t("expand")} onClick={toggle}>
-            <Icon
-              fallback={<Icons.Expand theme={theme} />}
-              src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
-            />
-          </Button>
-        )}
-        {expanded && (
-          <>
-            <CutLine />
+          <motion.div
+            initial={{ x: -100 }}
+            animate={{
+              x: 0,
+              transition: { duration: 0.5 },
+            }}
+            key="toolbar"
+            ref={toolbarRef}
+            className={clsx(name, theme)}
+            onPointerEnter={() => {
+              if (expanded) {
+                setOnHover(true);
+              }
+            }}
+            onMouseLeave={() => setOnHover(false)}
+            exit={{
+              x: -100,
+              transition: { duration: 0.5 },
+            }}
+            onAnimationStart={() => setPointEvents(false)}
+            onAnimationComplete={() => setPointEvents(true)}
+            style={{ pointerEvents: pointEvents ? "auto" : "none" }}
+          >
             <Content />
-          </>
+            {expanded && onHover && (
+              <Mask toolbar={toolbar}>
+                <div onClick={toggle}>
+                  <img
+                    draggable={false}
+                    className={clsx(`${name}-mask-btn`, theme)}
+                    src={collapsePNG}
+                  />
+                </div>
+              </Mask>
+            )}
+          </motion.div>
+        ) : (
+          <motion.div
+            className={clsx(`${name}-expand-btn`, theme)}
+            key="expand"
+            onClick={toggle}
+            initial={{ x: -100 }}
+            animate={{
+              x: 0,
+              transition: { duration: 0.5 },
+            }}
+          >
+            {!expanded && (
+              <Icon
+                fallback={
+                  <img
+                    draggable={false}
+                    src={expandPNG}
+                    className={clsx(`${name}-mask-btn`, theme)}
+                  />
+                }
+                src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
+              />
+            )}
+          </motion.div>
         )}
-      </div>
+      </AnimatePresence>
     </ToolbarContext.Provider>
   );
 };

package/src/components/Toolbar/components/Mask.tsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+
+type MaskProps = {
+  toolbar: HTMLDivElement | null;
+  children: React.ReactNode;
+};
+
+export const Mask = React.memo(({ toolbar, children }: MaskProps) => {
+  const [rootElement] = useState<HTMLDivElement | null>(() => {
+    const element = document.createElement("div");
+    element.style.position = "absolute";
+    return element;
+  });
+
+  useEffect(() => {
+    if (toolbar && rootElement) {
+      toolbar.appendChild(rootElement);
+    }
+  }, [rootElement, toolbar]);
+
+  useEffect(() => {
+    if (rootElement && toolbar) {
+      toolbar.appendChild(rootElement);
+
+      const toolbarRect = toolbar.getBoundingClientRect();
+      const halfHeight = toolbarRect.height / 2 - 31;
+      rootElement.style.top = halfHeight + "px";
+      rootElement.style.left = "41px";
+      rootElement.style.width = "17px";
+      rootElement.style.height = "62px";
+
+      return () => {
+        toolbar.removeChild(rootElement);
+      };
+    }
+  }, [rootElement, toolbar]);
+
+  if (rootElement) {
+    return ReactDOM.createPortal(children, rootElement);
+  } else {
+    return null;
+  }
+});

package/src/components/Toolbar/hooks.ts

@@ -6,24 +6,11 @@ import type {
   RoomState,
   ShapeType,
 } from "white-web-sdk";
-
+import type { WindowManager } from "@netless/window-manager";
 import { useCallback, useEffect, useState } from "react";
-import { noop } from "../../internal";
-
-export function useWritable(room?: Room | null) {
-  const [value, setValue] = useState(false);
-
-  useEffect(() => {
-    if (room) {
-      const setWritable = () => setValue(room.isWritable);
-      setWritable();
-      room.callbacks.on("onEnableWriteNowChanged", setWritable);
-      return () => room.callbacks.off("onEnableWriteNowChanged", setWritable);
-    }
-  }, [room]);
 
-  return value;
-}
+import { noop } from "../../internal";
+import { useWritable } from "../hooks";
 
 export function useRoomState(room?: Room | null) {
   const [memberState, setMemberState] = useState<MemberState | undefined>(
@@ -53,44 +40,56 @@ export interface ToolbarHook {
   setStrokeColor(color: Color): void;
 }
 
-export function useToolbar(room?: Room | null): ToolbarHook {
+export function useToolbar(
+  room?: Room | null,
+  manager?: WindowManager | null
+): ToolbarHook {
   const writable = useWritable(room);
   const { memberState } = useRoomState(room);
 
   const cleanCurrentScene = useCallback(() => {
-    if (room?.isWritable) {
+    if (manager) {
+      manager.mainView.cleanCurrentScene();
+    } else if (room) {
       room.cleanCurrentScene();
     }
-  }, [room]);
+  }, [manager, room]);
 
   const setAppliance = useCallback(
     (appliance: ApplianceNames, shape?: ShapeType) => {
-      if (room?.isWritable) {
-        room.setMemberState({
-          currentApplianceName: appliance,
-          shapeType: shape,
-        });
+      const memberState = {
+        currentApplianceName: appliance,
+        shapeType: shape,
+      };
+      if (manager) {
+        manager.mainView.setMemberState(memberState);
+      } else if (room) {
+        room.setMemberState(memberState);
       }
     },
-    [room]
+    [manager, room]
   );
 
   const setStrokeWidth = useCallback(
     (strokeWidth: number) => {
-      if (room?.isWritable) {
+      if (manager) {
+        manager.mainView.setMemberState({ strokeWidth });
+      } else if (room) {
         room.setMemberState({ strokeWidth });
       }
     },
-    [room]
+    [manager, room]
   );
 
   const setStrokeColor = useCallback(
     (strokeColor: Color) => {
-      if (room?.isWritable) {
+      if (manager) {
+        manager.mainView.setMemberState({ strokeColor });
+      } else if (room) {
         room.setMemberState({ strokeColor });
       }
     },
-    [room]
+    [manager, room]
   );
 
   return {

package/src/components/Toolbar/index.ts

@@ -1 +1,2 @@
+export * from "./hooks";
 export { name, Toolbar, type ToolbarProps } from "./Toolbar";

package/src/components/ZoomControl/ZoomControl.tsx

@@ -0,0 +1,109 @@
+import type { CommonProps, GenericIcon } from "../../types";
+
+import clsx from "clsx";
+import React from "react";
+import Tippy from "@tippyjs/react";
+
+import { TopOffset } from "../../theme";
+import { Icon } from "../../icons";
+import { Minus } from "../../icons/Minus";
+import { Plus } from "../../icons/Plus";
+import { Reset } from "../../icons/Reset";
+import { useWritable } from "../hooks";
+import { useZoomControl } from "./hooks";
+
+export const name = "fastboard-zoom-control";
+
+export type ZoomControlProps = CommonProps &
+  GenericIcon<"reset" | "minus" | "plus">;
+
+export function ZoomControl({
+  room,
+  manager,
+  theme = "light",
+  resetIcon,
+  resetIconDisable,
+  minusIcon,
+  minusIconDisable,
+  plusIcon,
+  plusIconDisable,
+  i18n,
+}: ZoomControlProps) {
+  const writable = useWritable(room);
+  const { scale, resetCamera, zoomIn, zoomOut } = useZoomControl(room, manager);
+
+  const disabled = !writable;
+
+  return (
+    <div className={clsx(name, theme)}>
+      {/* <span className={clsx(`${name}-cut-line`, theme)} /> */}
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("zoomOut")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "minus", theme)}
+          disabled={disabled}
+          onClick={zoomOut}
+        >
+          <Icon
+            fallback={<Minus theme={theme} />}
+            src={disabled ? minusIconDisable : minusIcon}
+            alt="[minus]"
+          />
+        </button>
+      </Tippy>
+      <span className={clsx(`${name}-scale`, theme)}>
+        {Math.ceil(scale * 100)}
+      </span>
+      <span className={clsx(`${name}-percent`, theme)}>%</span>
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("zoomIn")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "plus", theme)}
+          disabled={disabled}
+          onClick={zoomIn}
+        >
+          <Icon
+            fallback={<Plus theme={theme} />}
+            src={disabled ? plusIconDisable : plusIcon}
+            alt="[plus]"
+          />
+        </button>
+      </Tippy>
+      <Tippy
+        className="fastboard-tip"
+        content={i18n?.t("reset")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "reset", theme)}
+          disabled={disabled}
+          onClick={resetCamera}
+        >
+          <Icon
+            fallback={<Reset theme={theme} />}
+            src={disabled ? resetIconDisable : resetIcon}
+            alt="[reset]"
+          />
+        </button>
+      </Tippy>
+    </div>
+  );
+}

package/src/components/ZoomControl/hooks.ts

@@ -0,0 +1,111 @@
+import type { Room, RoomState } from "white-web-sdk";
+import type { WindowManager } from "@netless/window-manager";
+import { useCallback, useEffect, useState } from "react";
+import { clamp } from "../../internal";
+
+export const ScalePoints: readonly number[] = [
+  0.10737418240000011, 0.13421772800000012, 0.16777216000000014,
+  0.20971520000000016, 0.26214400000000015, 0.3276800000000002,
+  0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26,
+  1.5876000000000001, 2.000376, 2.5204737600000002, 3.1757969376000004,
+  4.001504141376, 5.041895218133761, 6.352787974848539, 8.00451284830916, 10,
+];
+
+function nextScale(scale: number, delta: 1 | -1) {
+  const { length } = ScalePoints;
+  const last = length - 1;
+  if (scale < ScalePoints[0]) return ScalePoints[0];
+  if (scale > ScalePoints[last]) return ScalePoints[last];
+  for (let i = 0; i < length; ++i) {
+    const curr = ScalePoints[i];
+    const prev = i === 0 ? -Infinity : (ScalePoints[i - 1] + curr) / 2;
+    const next = i === last ? Infinity : (ScalePoints[i + 1] + curr) / 2;
+    if (prev <= scale && scale <= next)
+      return ScalePoints[clamp(i + delta, 0, last)];
+  }
+  return 1;
+}
+
+export function useZoomControl(
+  room?: Room | null,
+  manager?: WindowManager | null
+) {
+  const [scale, setScale] = useState(1);
+
+  const resetCamera = useCallback(() => {
+    if (manager) {
+      manager.mainView.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
+    } else if (room) {
+      const { scenes, index } = room.state.sceneState;
+      if (scenes[index].ppt) {
+        room.scalePptToFit();
+      } else {
+        room.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
+      }
+    }
+  }, [room, manager]);
+
+  const zoomIn = useCallback(() => {
+    if (manager) {
+      manager.mainView.moveCamera({
+        scale: nextScale(scale, 1),
+        centerX: 0,
+        centerY: 0,
+      });
+    } else if (room) {
+      room.moveCamera({
+        scale: nextScale(scale, 1),
+        centerX: 0,
+        centerY: 0,
+      });
+    }
+  }, [room, manager, scale]);
+
+  const zoomOut = useCallback(() => {
+    if (manager) {
+      manager.mainView.moveCamera({
+        scale: nextScale(scale, -1),
+        centerX: 0,
+        centerY: 0,
+      });
+    } else if (room) {
+      room.moveCamera({
+        scale: nextScale(scale, -1),
+        centerX: 0,
+        centerY: 0,
+      });
+    }
+  }, [room, manager, scale]);
+
+  useEffect(() => {
+    if (manager) {
+      setScale(manager.mainView.camera.scale);
+
+      const onCameraUpdated = ({ scale }: { scale: number }) => setScale(scale);
+
+      manager.mainView.callbacks.on("onCameraUpdated", onCameraUpdated);
+
+      return () => {
+        manager.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
+      };
+    }
+
+    if (room) {
+      setScale(room.state.cameraState.scale);
+
+      const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
+        if (modifyState.cameraState) {
+          setScale(modifyState.cameraState.scale);
+        }
+      };
+
+      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
+
+      return () => {
+        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
+      };
+    }
+  }, [room, manager]);
+
+  return { scale, resetCamera, zoomIn, zoomOut };
+}

package/src/components/ZoomControl/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { name, ZoomControl, type ZoomControlProps } from "./ZoomControl";

package/src/components/hooks.ts

@@ -0,0 +1,80 @@
+import type { Room, WindowManager } from "@netless/window-manager";
+import { BuiltinApps } from "@netless/window-manager";
+import { useEffect, useState } from "react";
+
+export function useWritable(room?: Room | null) {
+  const [writable, setWritable] = useState(false);
+
+  useEffect(() => {
+    if (room) {
+      setWritable(room.isWritable);
+      room.isWritable && (room.disableSerialization = false);
+
+      const updateWritable = () => setWritable(room.isWritable);
+      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
+
+      return () => {
+        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
+      };
+    }
+  }, [room]);
+
+  return writable;
+}
+
+export type BoxState = "normal" | "minimized" | "maximized";
+
+export function useBoxState(manager?: WindowManager | null) {
+  const [boxState, setBoxState] = useState<BoxState | undefined>();
+
+  useEffect(() => {
+    if (manager) {
+      setBoxState(manager.boxState);
+
+      manager.emitter.on("boxStateChange", setBoxState);
+
+      return () => {
+        manager.emitter.off("boxStateChange", setBoxState);
+      };
+    }
+  }, [manager]);
+
+  return boxState;
+}
+
+export function useFocusedApp(manager?: WindowManager | null) {
+  const [focused, setFocused] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (manager) {
+      setFocused(manager.focused);
+
+      manager.emitter.on("focusedChange", setFocused);
+
+      return () => {
+        manager.emitter.off("focusedChange", setFocused);
+      };
+    }
+  }, [manager]);
+
+  return focused;
+}
+
+export function useMaximized(manager?: WindowManager | null) {
+  return useBoxState(manager) === "maximized";
+}
+
+export function useHideControls(manager?: WindowManager | null) {
+  const maximized = useMaximized(manager);
+  const focusedApp = useFocusedApp(manager);
+
+  if (maximized) {
+    if (Object.values(BuiltinApps).some(kind => focusedApp?.includes(kind))) {
+      return "toolbar-only";
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/index.ts

@@ -6,14 +6,29 @@ import "./behaviors/style";
 import { WhiteboardApp, type WhiteboardAppConfig } from "./WhiteboardApp";
 
 export { version } from "../package.json";
-export { PageControl, type PageControlProps } from "./components/PageControl";
-export { RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
-export { Toolbar, type ToolbarProps } from "./components/Toolbar";
-export { ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
+export {
+  PageControl,
+  usePageControl,
+  type PageControlProps,
+} from "./components/PageControl";
+export {
+  RedoUndo,
+  useRedoUndo,
+  type RedoUndoProps,
+} from "./components/RedoUndo";
+export { Toolbar, useToolbar, type ToolbarProps } from "./components/Toolbar";
+export {
+  ZoomControl,
+  useZoomControl,
+  type ZoomControlProps,
+} from "./components/ZoomControl";
 export {
   PlayerControl,
+  usePlayerControl,
   type PlayerControlProps,
 } from "./components/PlayerControl";
+export {};
+
 export * from "./WhiteboardApp";
 export * from "./react";
 

package/src/style.scss

@@ -3,9 +3,9 @@
 @import "tippy.js/themes/light.css";
 @import "rc-slider/assets/index.css";
 @import "./components/Root.scss";
-@import "./components/RedoUndo.scss";
-@import "./components/PageControl.scss";
-@import "./components/ZoomControl.scss";
+@import "./components/RedoUndo/RedoUndo.scss";
+@import "./components/PageControl/PageControl.scss";
+@import "./components/ZoomControl/ZoomControl.scss";
 @import "./components/Toolbar/Toolbar.scss";
 @import "./components/PlayerControl/PlayerControl.scss";