@netless/fastboard-react 0.2.5 → 0.2.6

package/src/components/Toolbar/components/ShapesButton.tsx

@@ -8,7 +8,6 @@ import { ApplianceNames } from "white-web-sdk";
 import { useTranslation } from "../../../i18n";
 import { RightOffset } from "../../../theme";
 import { ApplianceShapes, Shapes, ShapesMap } from "../const";
-import { Icons } from "../icons";
 import { ToolbarContext } from "../Toolbar";
 import { Button } from "./Button";
 import { ColorBox } from "./ColorBox";
@@ -19,7 +18,7 @@ const ShapeTypes = new Set([...ApplianceShapes, ...Shapes]);
 
 export function ShapesButton() {
   const { t } = useTranslation();
-  const { theme, memberState } = useContext(ToolbarContext);
+  const { theme, memberState, lastShape } = useContext(ToolbarContext);
 
   const appliance = memberState?.currentApplianceName;
   const shape = memberState?.shapeType;
@@ -28,7 +27,7 @@ export function ShapesButton() {
 
   const active = ShapeTypes.has(key);
 
-  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
+  const CurrentIcon = ShapesMap[lastShape];
 
   return (
     <span className="fastboard-toolbar-btn-interactive">

package/src/components/Toolbar/hooks.ts

@@ -1,13 +1,17 @@
 import type { ApplianceNames, Color, MemberState, ShapeType } from "white-web-sdk";
 
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 import { noop } from "../../internal";
 import { useFastboardApp, useFastboardValue, useWritable } from "../hooks";
+import { ShapesMap } from "./const";
+
+export type UnifiedShape = keyof typeof ShapesMap;
 
 export interface ToolbarHook {
   readonly writable: boolean;
   readonly memberState: MemberState | undefined;
+  readonly lastShape: UnifiedShape;
   cleanCurrentScene(): void;
   setAppliance(appliance: ApplianceNames, shape?: ShapeType): void;
   setStrokeWidth(width: number): void;
@@ -22,6 +26,7 @@ export function useToolbar(): ToolbarHook {
   const app = useFastboardApp();
   const writable = useWritable();
   const memberState = useRoomState();
+  const [lastShape, setLastShape] = useState<UnifiedShape>("rectangle" as ApplianceNames.rectangle);
 
   const cleanCurrentScene = useCallback(() => {
     app.cleanCurrentScene();
@@ -30,6 +35,11 @@ export function useToolbar(): ToolbarHook {
   const setAppliance = useCallback(
     (appliance: ApplianceNames, shape?: ShapeType) => {
       app.setAppliance(appliance, shape);
+      if (shape) {
+        setLastShape(shape);
+      } else if (appliance in ShapesMap) {
+        setLastShape(appliance as UnifiedShape);
+      }
     },
     [app]
   );
@@ -51,6 +61,7 @@ export function useToolbar(): ToolbarHook {
   return {
     writable,
     memberState,
+    lastShape,
     cleanCurrentScene,
     setAppliance,
     setStrokeWidth,
@@ -61,6 +72,7 @@ export function useToolbar(): ToolbarHook {
 export const EmptyToolbarHook: ToolbarHook = {
   writable: false,
   memberState: undefined,
+  lastShape: "rectangle" as ApplianceNames.rectangle,
   cleanCurrentScene: noop,
   setAppliance: noop,
   setStrokeWidth: noop,

package/src/components/ZoomControl/hooks.ts

@@ -4,10 +4,8 @@ import { clamp } from "../../internal";
 import { useFastboardApp, useFastboardValue } from "../hooks";
 
 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,
+  0.3, 0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26, 1.5876000000000001, 2.000376,
+  2.5204737600000002, 3,
 ];
 
 function nextScale(scale: number, delta: 1 | -1) {