@netless/fastboard-react 0.2.5 → 0.2.6

package/dist/index.mjs

@@ -377,12 +377,7 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
 // src/components/ZoomControl/hooks.ts
 import { useCallback as useCallback3 } from "react";
 var ScalePoints = [
-  0.10737418240000011,
-  0.13421772800000012,
-  0.16777216000000014,
-  0.20971520000000016,
-  0.26214400000000015,
-  0.3276800000000002,
+  0.3,
   0.4096000000000002,
   0.5120000000000001,
   0.6400000000000001,
@@ -392,12 +387,7 @@ var ScalePoints = [
   1.5876000000000001,
   2.000376,
   2.5204737600000002,
-  3.1757969376000004,
-  4.001504141376,
-  5.041895218133761,
-  6.352787974848539,
-  8.00451284830916,
-  10
+  3
 ];
 function nextScale(scale, delta) {
   const { length } = ScalePoints;
@@ -740,59 +730,10 @@ function PageControl({
 }
 
 // src/components/Toolbar/hooks.ts
-import { useCallback as useCallback5 } from "react";
-function useRoomState() {
-  return useFastboardValue(useFastboardApp().memberState);
-}
-function useToolbar() {
-  const app = useFastboardApp();
-  const writable = useWritable();
-  const memberState = useRoomState();
-  const cleanCurrentScene = useCallback5(() => {
-    app.cleanCurrentScene();
-  }, [app]);
-  const setAppliance = useCallback5((appliance, shape) => {
-    app.setAppliance(appliance, shape);
-  }, [app]);
-  const setStrokeWidth = useCallback5((strokeWidth) => {
-    app.setStrokeWidth(strokeWidth);
-  }, [app]);
-  const setStrokeColor = useCallback5((strokeColor) => {
-    app.setStrokeColor(strokeColor);
-  }, [app]);
-  return {
-    writable,
-    memberState,
-    cleanCurrentScene,
-    setAppliance,
-    setStrokeWidth,
-    setStrokeColor
-  };
-}
-var EmptyToolbarHook = {
-  writable: false,
-  memberState: void 0,
-  cleanCurrentScene: noop,
-  setAppliance: noop,
-  setStrokeWidth: noop,
-  setStrokeColor: noop
-};
+import { useCallback as useCallback5, useState as useState3 } from "react";
 
-// src/components/Toolbar/Toolbar.tsx
-import clsx9 from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
-import React43, { createContext as createContext3, useState as useState4 } from "react";
-
-// src/components/Toolbar/components/assets/expanded.png
-var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
-
-// src/components/Toolbar/Content.tsx
-import clsx8 from "clsx";
-import React42, { useCallback as useCallback10, useContext as useContext13, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
-
-// src/components/Toolbar/components/ApplianceButtons.tsx
-import React33, { useCallback as useCallback6, useContext as useContext4 } from "react";
-import { ApplianceNames } from "white-web-sdk";
+// src/components/Toolbar/const.ts
+import { ApplianceNames, ShapeType } from "white-web-sdk";
 
 // src/components/Toolbar/icons/index.ts
 import { memo } from "react";
@@ -1069,6 +1010,96 @@ var Icons = {
   Down: memo(Down)
 };
 
+// src/components/Toolbar/const.ts
+var ShapesMap = {
+  [ApplianceNames.rectangle]: Icons.Rectangle,
+  [ApplianceNames.ellipse]: Icons.Circle,
+  [ApplianceNames.straight]: Icons.Line,
+  [ApplianceNames.arrow]: Icons.Arrow,
+  [ShapeType.Pentagram]: Icons.Star,
+  [ShapeType.Rhombus]: Icons.Diamond,
+  [ShapeType.Triangle]: Icons.Triangle,
+  [ShapeType.SpeechBalloon]: Icons.SpeechBalloon
+};
+var ApplianceShapes = [
+  ApplianceNames.rectangle,
+  ApplianceNames.ellipse,
+  ApplianceNames.straight,
+  ApplianceNames.arrow
+];
+var Shapes = [
+  ShapeType.Pentagram,
+  ShapeType.Rhombus,
+  ShapeType.Triangle,
+  ShapeType.SpeechBalloon
+];
+var ItemHeight = 32 + 4;
+var ItemsCount = 8;
+var MaxHeight = ItemHeight * ItemsCount - 4;
+var MinHeight = ItemHeight * 2 - 4;
+
+// src/components/Toolbar/hooks.ts
+function useRoomState() {
+  return useFastboardValue(useFastboardApp().memberState);
+}
+function useToolbar() {
+  const app = useFastboardApp();
+  const writable = useWritable();
+  const memberState = useRoomState();
+  const [lastShape, setLastShape] = useState3("rectangle");
+  const cleanCurrentScene = useCallback5(() => {
+    app.cleanCurrentScene();
+  }, [app]);
+  const setAppliance = useCallback5((appliance, shape) => {
+    app.setAppliance(appliance, shape);
+    if (shape) {
+      setLastShape(shape);
+    } else if (appliance in ShapesMap) {
+      setLastShape(appliance);
+    }
+  }, [app]);
+  const setStrokeWidth = useCallback5((strokeWidth) => {
+    app.setStrokeWidth(strokeWidth);
+  }, [app]);
+  const setStrokeColor = useCallback5((strokeColor) => {
+    app.setStrokeColor(strokeColor);
+  }, [app]);
+  return {
+    writable,
+    memberState,
+    lastShape,
+    cleanCurrentScene,
+    setAppliance,
+    setStrokeWidth,
+    setStrokeColor
+  };
+}
+var EmptyToolbarHook = {
+  writable: false,
+  memberState: void 0,
+  lastShape: "rectangle",
+  cleanCurrentScene: noop,
+  setAppliance: noop,
+  setStrokeWidth: noop,
+  setStrokeColor: noop
+};
+
+// src/components/Toolbar/Toolbar.tsx
+import clsx9 from "clsx";
+import { AnimatePresence, motion } from "framer-motion";
+import React43, { createContext as createContext3, useState as useState5 } from "react";
+
+// src/components/Toolbar/components/assets/expanded.png
+var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
+
+// src/components/Toolbar/Content.tsx
+import clsx8 from "clsx";
+import React42, { useCallback as useCallback10, useContext as useContext13, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+
+// src/components/Toolbar/components/ApplianceButtons.tsx
+import React33, { useCallback as useCallback6, useContext as useContext4 } from "react";
+import { ApplianceNames as ApplianceNames2 } from "white-web-sdk";
+
 // src/components/Toolbar/components/Button.tsx
 import clsx4 from "clsx";
 import React32, { forwardRef, useContext as useContext3 } from "react";
@@ -1109,10 +1140,10 @@ function ClickerButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = useContext4(ToolbarContext);
-  const changeAppliance = useCallback6(() => setAppliance(ApplianceNames.clicker), [setAppliance]);
+  const changeAppliance = useCallback6(() => setAppliance(ApplianceNames2.clicker), [setAppliance]);
   const shortcut = (_a = app.hotKeys) == null ? void 0 : _a.changeToClick;
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.clicker;
+  const active = appliance === ApplianceNames2.clicker;
   const disabled = !writable;
   return /* @__PURE__ */ React33.createElement(Button, {
     content: renderToolTip(t("clicker"), shortcut),
@@ -1131,9 +1162,9 @@ function SelectorButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = useContext4(ToolbarContext);
-  const changeAppliance = useCallback6(() => setAppliance(ApplianceNames.selector), [setAppliance]);
+  const changeAppliance = useCallback6(() => setAppliance(ApplianceNames2.selector), [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.selector;
+  const active = appliance === ApplianceNames2.selector;
   const disabled = !writable;
   const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
   return /* @__PURE__ */ React33.createElement(Button, {
@@ -1153,9 +1184,9 @@ function EraserButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = useContext4(ToolbarContext);
-  const changeAppliance = useCallback6(() => setAppliance(ApplianceNames.eraser), [setAppliance]);
+  const changeAppliance = useCallback6(() => setAppliance(ApplianceNames2.eraser), [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.eraser;
+  const active = appliance === ApplianceNames2.eraser;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
   return /* @__PURE__ */ React33.createElement(Button, {
@@ -1272,7 +1303,7 @@ function AppIcon({ title, src, alt, onClick }) {
 // src/components/Toolbar/components/PencilButton.tsx
 import Tippy6 from "@tippyjs/react";
 import React38, { useCallback as useCallback7, useContext as useContext9 } from "react";
-import { ApplianceNames as ApplianceNames2 } from "white-web-sdk";
+import { ApplianceNames as ApplianceNames3 } from "white-web-sdk";
 
 // src/components/Toolbar/components/ColorBox.tsx
 import clsx5 from "clsx";
@@ -1349,10 +1380,10 @@ function PencilButton() {
   const { t } = useTranslation();
   const { theme, icons, writable, setAppliance, memberState } = useContext9(ToolbarContext);
   const changeAppliance = useCallback7(() => {
-    setAppliance(ApplianceNames2.pencil);
+    setAppliance(ApplianceNames3.pencil);
   }, [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames2.pencil;
+  const active = appliance === ApplianceNames3.pencil;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
   return /* @__PURE__ */ React38.createElement("span", {
@@ -1391,46 +1422,15 @@ function renderPencilButtonContent() {
 import Tippy7 from "@tippyjs/react";
 import React39, { useContext as useContext10 } from "react";
 import { ApplianceNames as ApplianceNames4 } from "white-web-sdk";
-
-// src/components/Toolbar/const.ts
-import { ApplianceNames as ApplianceNames3, ShapeType } from "white-web-sdk";
-var ShapesMap = {
-  [ApplianceNames3.rectangle]: Icons.Rectangle,
-  [ApplianceNames3.ellipse]: Icons.Circle,
-  [ApplianceNames3.straight]: Icons.Line,
-  [ApplianceNames3.arrow]: Icons.Arrow,
-  [ShapeType.Pentagram]: Icons.Star,
-  [ShapeType.Rhombus]: Icons.Diamond,
-  [ShapeType.Triangle]: Icons.Triangle,
-  [ShapeType.SpeechBalloon]: Icons.SpeechBalloon
-};
-var ApplianceShapes = [
-  ApplianceNames3.rectangle,
-  ApplianceNames3.ellipse,
-  ApplianceNames3.straight,
-  ApplianceNames3.arrow
-];
-var Shapes = [
-  ShapeType.Pentagram,
-  ShapeType.Rhombus,
-  ShapeType.Triangle,
-  ShapeType.SpeechBalloon
-];
-var ItemHeight = 32 + 4;
-var ItemsCount = 8;
-var MaxHeight = ItemHeight * ItemsCount - 4;
-var MinHeight = ItemHeight * 2 - 4;
-
-// src/components/Toolbar/components/ShapesButton.tsx
 var ShapeTypes = /* @__PURE__ */ new Set([...ApplianceShapes, ...Shapes]);
 function ShapesButton() {
   const { t } = useTranslation();
-  const { theme, memberState } = useContext10(ToolbarContext);
+  const { theme, memberState, lastShape } = useContext10(ToolbarContext);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const shape = memberState == null ? void 0 : memberState.shapeType;
   const key = appliance === ApplianceNames4.shape ? shape : appliance;
   const active = ShapeTypes.has(key);
-  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
+  const CurrentIcon = ShapesMap[lastShape];
   return /* @__PURE__ */ React39.createElement("span", {
     className: "fastboard-toolbar-btn-interactive"
   }, /* @__PURE__ */ React39.createElement(Tippy7, {
@@ -1590,8 +1590,8 @@ var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8C
 function Content({ onCollapse }) {
   const { theme, icons, writable } = useContext13(ToolbarContext);
   const ref = useRef2(null);
-  const [scrollTop, setScrollTop] = useState3(0);
-  const [parentHeight, setParentHeight] = useState3(0);
+  const [scrollTop, setScrollTop] = useState4(0);
+  const [parentHeight, setParentHeight] = useState4(0);
   const disabled = !writable;
   const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
   const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
@@ -1653,8 +1653,8 @@ var name4 = "fastboard-toolbar";
 function Toolbar({ theme, icons }) {
   theme = useTheme(theme);
   const hook = useToolbar();
-  const [expanded, setExpanded] = useState4(true);
-  const [pointerEvents, setPointerEvents] = useState4("auto");
+  const [expanded, setExpanded] = useState5(true);
+  const [pointerEvents, setPointerEvents] = useState5("auto");
   const disabled = !hook.writable;
   return /* @__PURE__ */ React43.createElement(ToolbarContext.Provider, {
     value: __spreadValues({ theme, icons }, hook)
@@ -1686,11 +1686,11 @@ function Toolbar({ theme, icons }) {
 }
 
 // src/components/PlayerControl/hooks.ts
-import { useCallback as useCallback11, useEffect as useEffect4, useState as useState5 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect4, useState as useState6 } from "react";
 import { PlayerPhase } from "white-web-sdk";
 var EMPTY_ARRAY = [];
 function useForceUpdate2() {
-  const [, forceUpdate_] = useState5({});
+  const [, forceUpdate_] = useState6({});
   return useCallback11(() => forceUpdate_({}), EMPTY_ARRAY);
 }
 function usePlayerControl(player) {
@@ -1757,7 +1757,7 @@ function usePlayerControl(player) {
 import Tippy10 from "@tippyjs/react";
 import clsx11 from "clsx";
 import RcSlider2 from "rc-slider";
-import React48, { useEffect as useEffect5, useState as useState6 } from "react";
+import React48, { useEffect as useEffect5, useState as useState7 } from "react";
 import { PlayerPhase as PlayerPhase2 } from "white-web-sdk";
 
 // src/components/PlayerControl/components/Button.tsx
@@ -1836,7 +1836,7 @@ function PlayerControl(_a) {
   var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
   theme = useTheme(theme);
   const { t } = useTranslation();
-  const [currentTime, setCurrentTime] = useState6(0);
+  const [currentTime, setCurrentTime] = useState7(0);
   const player = usePlayerControl(player_);
   useEffect5(() => {
     setCurrentTime(player.currentTime);