@netless/fastboard-react 0.2.2 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.2.2",
+  "version": "0.2.6",
   "description": "A UI kit built on top of @netless/fastboard.",
   "main": "dist/index.js",
   "files": [
@@ -22,14 +22,14 @@
     "white-web-sdk": ">=2.16.0"
   },
   "devDependencies": {
-    "@netless/fastboard-core": "0.2.2",
-    "@netless/window-manager": "^0.4.0-canary.31",
+    "@netless/fastboard-core": "0.2.6",
+    "@netless/window-manager": "^0.4.0",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "sass": "^1.49.0",
     "tippy.js": "^6.3.7",
     "tsup": "^5.11.11",
-    "white-web-sdk": "^2.16.5"
+    "white-web-sdk": "^2.16.6"
   },
   "publishConfig": {
     "main": "dist/index.js",

package/src/components/Toolbar/Toolbar.scss

@@ -152,6 +152,17 @@ $name: "fastboard-toolbar";
     }
   }
 
+  &-section + &-mask {
+    opacity: 0;
+    transition: 0.5s opacity 0.4s;
+  }
+
+  &-section:hover + &-mask,
+  &-mask:hover {
+    opacity: 1;
+    transition: 0.2s opacity;
+  }
+
   &-panel {
     width: 136px - 8px * 2;
     padding: 0;
@@ -268,6 +279,7 @@ $name: "fastboard-toolbar";
     left: calc(100% + 1px);
     top: 50%;
     transform: translateY(-50%);
+    opacity: 0.85;
     &.dark {
       left: calc(100%);
     }
@@ -277,6 +289,7 @@ $name: "fastboard-toolbar";
     width: 17px;
     height: 62px;
     cursor: pointer;
+    opacity: 0.85;
     &.dark {
       filter: invert(0.8);
     }

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) {

package/src/components/hooks.ts

@@ -43,12 +43,19 @@ export function useMaximized() {
   return useBoxState() === "maximized";
 }
 
+const AppsShouldShowToolbar = /* @__PURE__ */ (() => [BuiltinApps.DocsViewer, "Slide"])();
+
 export function useHideControls() {
+  const writable = useWritable();
   const maximized = useMaximized();
   const focusedApp = useFocusedApp();
 
+  if (!writable) {
+    return true;
+  }
+
   if (maximized) {
-    if (Object.values(BuiltinApps).some(kind => focusedApp?.includes(kind))) {
+    if (AppsShouldShowToolbar.some(kind => focusedApp?.includes(kind))) {
       return "toolbar-only";
     } else {
       return true;