@netless/fastboard 0.0.7 → 0.0.11

package/src/components/RedoUndo/index.ts

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

package/src/components/Root.tsx

@@ -5,6 +5,7 @@ import { Toolbar } from "./Toolbar";
 import { RedoUndo } from "./RedoUndo";
 import { ZoomControl } from "./ZoomControl";
 import { PageControl } from "./PageControl";
+import { useHideControls } from "./hooks";
 
 export interface RootProps {
   instance: Instance;
@@ -21,12 +22,8 @@ export function Root({ instance: app }: RootProps) {
     [app, mux]
   );
 
-  const {
-    Toolbar: toolbar = true,
-    RedoUndo: redo_undo = true,
-    ZoomControl: zoom_control = true,
-    PageControl: page_control = true,
-  } = app.config.layout || {};
+  const hideControls = useHideControls(app.manager);
+  const showControls = !hideControls;
 
   const props = {
     room: app.room,
@@ -34,6 +31,13 @@ export function Root({ instance: app }: RootProps) {
     i18n: app.i18n,
   };
 
+  const {
+    Toolbar: toolbar = showControls || hideControls === "toolbar-only",
+    RedoUndo: redo_undo = showControls,
+    ZoomControl: zoom_control = showControls,
+    PageControl: page_control = showControls,
+  } = app.config.layout || {};
+
   return (
     <Instance.Context.Provider value={app}>
       <div className="fastboard-root">

package/src/components/Toolbar/Content.tsx

@@ -14,8 +14,9 @@ import { AppsButton } from "./components/AppsButton";
 import { PencilButton } from "./components/PencilButton";
 import { TextButton } from "./components/TextButton";
 import { ShapesButton } from "./components/ShapesButton";
+import clsx from "clsx";
 
-export function Content() {
+export const Content = React.memo(() => {
   const app = useInstance();
   const ref = useRef<HTMLDivElement>(null);
   const [scrollTop, setScrollTop] = useState(0);
@@ -65,7 +66,7 @@ export function Content() {
       )}
       <div
         ref={ref}
-        className={`${name}-section`}
+        className={clsx(`${name}-section`)}
         style={{
           height: `${sectionHeight}px`,
           overflow: needScroll ? "hidden" : "visible",
@@ -90,4 +91,4 @@ export function Content() {
       )}
     </>
   );
-}
+});

package/src/components/Toolbar/Toolbar.scss

@@ -40,10 +40,23 @@ $name: "fastboard-toolbar";
     border: 1px solid rgba(0, 0, 0, 0.15);
   }
 
+  &.expanded {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
   &.dark {
     color: #ddd;
     background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+  }
+
+  &.expanded:hover {
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
+    transform: translate3d(0, 0, 0);
+  }
+
+  &.collapsed {
+    padding: 0;
+    background-color: transparent;
   }
 
   &-tooltip {
@@ -132,6 +145,11 @@ $name: "fastboard-toolbar";
     flex-flow: column nowrap;
     gap: 4px;
     scroll-behavior: smooth;
+
+    &.collapsed {
+      transform: translateX(-100%);
+      transition: 1s transform;
+    }
   }
 
   &-panel {
@@ -244,4 +262,20 @@ $name: "fastboard-toolbar";
       outline-offset: 2px;
     }
   }
+
+  &-mask-btn {
+    width: 17px;
+    height: 62px;
+    cursor: pointer;
+    &.dark {
+      filter: invert(0.8);
+    }
+  }
+
+  &-expand-btn {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+  }
 }

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";