@netless/fastboard-react 0.2.5 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "description": "A UI kit built on top of @netless/fastboard.",
   "main": "dist/index.js",
   "files": [
@@ -10,8 +10,8 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
-    "framer-motion": "^6.2.3",
-    "i18next": "^21.6.9",
+    "framer-motion": "^6.2.8",
+    "i18next": "^21.6.12",
     "rc-slider": "^9.7.5"
   },
   "peerDependencies": {
@@ -22,19 +22,14 @@
     "white-web-sdk": ">=2.16.0"
   },
   "devDependencies": {
-    "@netless/fastboard-core": "0.2.5",
-    "@netless/window-manager": "^0.4.0",
-    "@types/react": "^17.0.38",
+    "@netless/fastboard-core": "0.2.8",
+    "@netless/window-manager": "^0.4.7",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "sass": "^1.49.0",
+    "sass": "^1.49.8",
     "tippy.js": "^6.3.7",
-    "tsup": "^5.11.11",
-    "white-web-sdk": "^2.16.6"
-  },
-  "publishConfig": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "src/index.ts"
+    "tsup": "^5.11.13",
+    "white-web-sdk": "^2.16.10"
   },
   "scripts": {
     "build": "tsup",

package/src/components/Fastboard.scss

@@ -36,6 +36,6 @@
 
 .fastboard-bottom-right {
   @extend .fastboard-bottom-left;
-  left: initial;
+  left: auto;
   right: 8px;
 }

package/src/components/Fastboard.tsx

@@ -77,7 +77,11 @@ function FastboardInternal({
     <ThemeContext.Provider value={theme}>
       <I18nContext.Provider value={i18n}>
         <div {...restProps} className="fastboard-root" ref={forwardedRef}>
-          <div className="fastboard-view" ref={useWhiteboard} />
+          <div
+            className="fastboard-view"
+            ref={useWhiteboard}
+            onPointerDownCapture={focusThisElementImmediate}
+          />
           {children ? (
             children
           ) : (
@@ -105,3 +109,7 @@ function FastboardInternal({
     </ThemeContext.Provider>
   );
 }
+
+function focusThisElementImmediate(ev: React.PointerEvent<HTMLDivElement>) {
+  ev.currentTarget.focus();
+}

package/src/components/PageControl/PageControl.scss

@@ -6,19 +6,19 @@ $name: "fastboard-page-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -37,8 +37,8 @@ $name: "fastboard-page-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -47,11 +47,11 @@ $name: "fastboard-page-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }
 
@@ -72,9 +72,13 @@ $name: "fastboard-page-control";
   opacity: 0.6;
 }
 
+.#{$name}-text {
+  line-height: 24px;
+}
+
 .#{$name}-page,
 .#{$name}-slash,
 .#{$name}-page-count {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }

package/src/components/PageControl/PageControl.tsx

@@ -6,9 +6,9 @@ import React from "react";
 
 import { useTranslation } from "../../i18n";
 import { Icon } from "../../icons";
-import { ChevronLeft } from "../../icons/ChevronLeft";
-import { ChevronRight } from "../../icons/ChevronRight";
-import { FilePlus } from "../../icons/FilePlus";
+import { Left } from "../../icons/Left";
+import { Right } from "../../icons/Right";
+import { WhiteboardAdd } from "../../icons/WhiteboardAdd";
 import { TopOffset } from "../../theme";
 import { useTheme, useWritable } from "../hooks";
 import { usePageControl } from "./hooks";
@@ -52,16 +52,14 @@ export function PageControl({
           disabled={disabled || pageIndex === 0}
           onClick={actions.prevPage}
         >
-          <Icon
-            fallback={<ChevronLeft theme={theme} />}
-            src={disabled ? prevIconDisable : prevIcon}
-            alt="[prev]"
-          />
+          <Icon fallback={<Left theme={theme} />} src={disabled ? prevIconDisable : prevIcon} alt="[prev]" />
         </button>
       </Tippy>
-      <span className={clsx(`${name}-page`, theme)}>{pageCount === 0 ? "\u2026" : pageIndex + 1}</span>
-      <span className={clsx(`${name}-slash`, theme)}>/</span>
-      <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
+      <span className={clsx(`${name}-text`, theme)}>
+        <span className={clsx(`${name}-page`, theme)}>{pageCount === 0 ? "\u2026" : pageIndex + 1}</span>
+        <span className={clsx(`${name}-slash`, theme)}>/</span>
+        <span className={clsx(`${name}-page-count`, theme)}>{pageCount}</span>
+      </span>
       <Tippy
         className="fastboard-tip"
         content={t("nextPage")}
@@ -77,11 +75,7 @@ export function PageControl({
           disabled={disabled || pageIndex === pageCount - 1}
           onClick={actions.nextPage}
         >
-          <Icon
-            fallback={<ChevronRight theme={theme} />}
-            src={disabled ? nextIconDisable : nextIcon}
-            alt="[next]"
-          />
+          <Icon fallback={<Right theme={theme} />} src={disabled ? nextIconDisable : nextIcon} alt="[next]" />
         </button>
       </Tippy>
       <Tippy
@@ -95,7 +89,11 @@ export function PageControl({
         offset={TopOffset}
       >
         <button className={clsx(`${name}-btn`, "add", theme)} disabled={disabled} onClick={actions.addPage}>
-          <Icon fallback={<FilePlus theme={theme} />} src={disabled ? addIconDisable : addIcon} alt="[add]" />
+          <Icon
+            fallback={<WhiteboardAdd theme={theme} />}
+            src={disabled ? addIconDisable : addIcon}
+            alt="[add]"
+          />
         </button>
       </Tippy>
     </div>

package/src/components/PlayerControl/PlayerControl.scss

@@ -7,8 +7,8 @@ $name: "fastboard-player-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.auto-hide {
     opacity: 0;
@@ -45,14 +45,14 @@ $name: "fastboard-player-control";
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -74,8 +74,8 @@ $name: "fastboard-player-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -84,11 +84,11 @@ $name: "fastboard-player-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 
   &.loading {
@@ -113,7 +113,7 @@ $name: "fastboard-player-control";
     width: initial;
     height: initial;
     user-select: none;
-    font-size: 12px;
+    font-size: 14px;
     padding: 4px;
     justify-content: flex-end;
 
@@ -140,6 +140,6 @@ $name: "fastboard-player-control";
 .#{$name}-slash,
 .#{$name}-total,
 .#{$name}-speed-text {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }

package/src/components/RedoUndo/RedoUndo.scss

@@ -6,19 +6,19 @@ $name: "fastboard-redo-undo";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -37,8 +37,8 @@ $name: "fastboard-redo-undo";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -47,10 +47,10 @@ $name: "fastboard-redo-undo";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }

package/src/components/Toolbar/Toolbar.scss

@@ -9,8 +9,8 @@ $name: "fastboard-toolbar";
   gap: 4px;
   position: absolute;
   z-index: 100;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   .rc-slider {
     padding: 6px 0;
@@ -36,17 +36,18 @@ $name: "fastboard-toolbar";
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  &.expanded {
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
+    background-color: #14181e;
+    border: 1px solid #383b42;
+  }
+
+  &.expanded {
+    border: 1px solid rgba(0, 0, 0, 0.15);
   }
 
   &.expanded:hover {
@@ -108,11 +109,11 @@ $name: "fastboard-toolbar";
     }
 
     &.light:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.1);
+      background-color: #ebf2ff;
     }
 
     &.dark:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.25);
+      background-color: #383b42;
     }
   }
 
@@ -206,6 +207,16 @@ $name: "fastboard-toolbar";
     }
   }
 
+  &-app-is-loading {
+    opacity: 0.8;
+    cursor: wait;
+  }
+
+  &-app-is-failed {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   &-app-icon {
     padding-top: 4px;
     display: inline-flex;
@@ -218,7 +229,7 @@ $name: "fastboard-toolbar";
     }
 
     &-text {
-      font-size: 12px;
+      font-size: 14px;
       color: #5d5d5d;
       overflow: hidden;
       white-space: nowrap;

package/src/components/Toolbar/components/AppsButton.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Tippy from "@tippyjs/react";
 import React, { useContext } from "react";
 
@@ -62,6 +63,7 @@ function renderAppsButtonContent(content?: React.ReactNode) {
 
 function DefaultApps() {
   const app = useFastboardApp();
+  const { appsStatus } = useContext(ToolbarContext);
 
   return (
     <>
@@ -69,13 +71,21 @@ function DefaultApps() {
         title="Code Editor"
         src={vscodePNG}
         alt="[code editor]"
+        appStatus={appsStatus["Monaco"]}
         onClick={app?.insertCodeEditor.bind(app)}
       />
-      <AppIcon title="GeoGebra" src={geogebraPNG} alt="[geogebra]" onClick={app?.insertGeoGebra.bind(app)} />
+      <AppIcon
+        title="GeoGebra"
+        src={geogebraPNG}
+        alt="[geogebra]"
+        appStatus={appsStatus["GeoGebra"]}
+        onClick={app?.insertGeoGebra.bind(app)}
+      />
       <AppIcon
         title="Countdown"
         src={countdownPNG}
         alt="[countdown]"
+        appStatus={appsStatus["Countdown"]}
         onClick={app?.insertCountdown.bind(app)}
       />
     </>
@@ -86,14 +96,28 @@ interface AppIconProps {
   title: string;
   src: string;
   alt: string;
+  appStatus?: {
+    status: "idle" | "loading" | "failed";
+    reason?: string | undefined;
+  };
   onClick?: () => void;
 }
 
-function AppIcon({ title, src, alt, onClick }: AppIconProps) {
+function AppIcon({ title, src, alt, appStatus, onClick }: AppIconProps) {
+  const { status = "idle", reason } = appStatus || {};
+  const loading = status === "loading";
+  const failed = status === "failed";
+  const unifiedTitle = loading ? "loading" : failed ? reason : title;
+
   return (
-    <span className="fastboard-toolbar-app-icon">
-      <Button placement="top" content={title} onClick={onClick}>
-        <img src={src} alt={alt} title={title} />
+    <span
+      className={clsx("fastboard-toolbar-app-icon", {
+        "fastboard-toolbar-app-is-loading": loading,
+        "fastboard-toolbar-app-is-failed": failed,
+      })}
+    >
+      <Button disabled={failed} placement="top" content={unifiedTitle} onClick={onClick}>
+        <img src={src} alt={alt} title={unifiedTitle} />
       </Button>
       <span className="fastboard-toolbar-app-icon-text">{title}</span>
     </span>

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

@@ -2,13 +2,12 @@ import type { ShapeType } from "white-web-sdk";
 import type { IconProps } from "../../../typings";
 
 import Tippy from "@tippyjs/react";
-import React, { useContext } from "react";
+import React, { useCallback, useContext } from "react";
 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 { writable, theme, memberState, lastShape, setAppliance } = useContext(ToolbarContext);
 
   const appliance = memberState?.currentApplianceName;
   const shape = memberState?.shapeType;
@@ -28,7 +27,15 @@ export function ShapesButton() {
 
   const active = ShapeTypes.has(key);
 
-  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
+  const CurrentIcon = ShapesMap[lastShape];
+
+  const onClick = useCallback(() => {
+    if ((ApplianceShapes as readonly ApplianceNames[]).includes(lastShape as ApplianceNames)) {
+      setAppliance(lastShape as ApplianceNames);
+    } else if (Shapes.includes(lastShape as ShapeType)) {
+      setAppliance(ApplianceNames.shape, lastShape as ShapeType);
+    }
+  }, [lastShape, setAppliance]);
 
   return (
     <span className="fastboard-toolbar-btn-interactive">
@@ -42,7 +49,7 @@ export function ShapesButton() {
         arrow={false}
         interactive
       >
-        <Button content={t("shape")} active={active}>
+        <Button content={t("shape")} active={active} disabled={!writable} onClick={onClick}>
           <CurrentIcon theme={theme} active={active} />
           <span className="fastboard-toolbar-triangle" />
         </Button>

package/src/components/Toolbar/hooks.ts

@@ -1,13 +1,19 @@
 import type { ApplianceNames, Color, MemberState, ShapeType } from "white-web-sdk";
+import type { AppsStatus } from "@netless/fastboard-core";
 
-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;
+  readonly appsStatus: AppsStatus;
   cleanCurrentScene(): void;
   setAppliance(appliance: ApplianceNames, shape?: ShapeType): void;
   setStrokeWidth(width: number): void;
@@ -18,10 +24,16 @@ export function useRoomState() {
   return useFastboardValue(useFastboardApp().memberState);
 }
 
+export function useAppsStatus() {
+  return useFastboardValue(useFastboardApp().appsStatus);
+}
+
 export function useToolbar(): ToolbarHook {
   const app = useFastboardApp();
   const writable = useWritable();
   const memberState = useRoomState();
+  const appsStatus = useAppsStatus();
+  const [lastShape, setLastShape] = useState<UnifiedShape>("rectangle" as ApplianceNames.rectangle);
 
   const cleanCurrentScene = useCallback(() => {
     app.cleanCurrentScene();
@@ -30,6 +42,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 +68,8 @@ export function useToolbar(): ToolbarHook {
   return {
     writable,
     memberState,
+    lastShape,
+    appsStatus,
     cleanCurrentScene,
     setAppliance,
     setStrokeWidth,
@@ -61,6 +80,8 @@ export function useToolbar(): ToolbarHook {
 export const EmptyToolbarHook: ToolbarHook = {
   writable: false,
   memberState: undefined,
+  lastShape: "rectangle" as ApplianceNames.rectangle,
+  appsStatus: {},
   cleanCurrentScene: noop,
   setAppliance: noop,
   setStrokeWidth: noop,

package/src/components/Toolbar/icons/Laser.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from "../../../typings";
+
+import React from "react";
+import { getStroke } from "../../../theme";
+
+export const Laser = (props: IconProps) => {
+  const stroke = getStroke(props);
+  return (
+    <svg viewBox="0 0 24 24">
+      <g fill="none" fill-rule="evenodd">
+        <circle cx="12" cy="12" r="2" fill={stroke} />
+        <path
+          stroke={stroke}
+          stroke-linecap="square"
+          stroke-linejoin="round"
+          d="M12 4v2m0 12v2m8-8h-2M6 12H4m13.657 5.657-1.414-1.414M7.757 7.757 6.343 6.343m0 11.314 1.414-1.414m8.486-8.486 1.414-1.414"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/ZoomControl/ZoomControl.scss

@@ -7,19 +7,19 @@ $name: "fastboard-zoom-control";
   gap: 4px;
   padding: 4px;
   border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
 
   &.light {
     color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #e5e8f0;
   }
 
   &.dark {
     color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    background-color: #14181e;
+    border: 1px solid #383b42;
   }
 }
 
@@ -38,8 +38,8 @@ $name: "fastboard-zoom-control";
 
   svg,
   img {
-    width: 1em;
-    height: 1em;
+    width: 100%;
+    height: 100%;
   }
 
   &:disabled {
@@ -48,11 +48,11 @@ $name: "fastboard-zoom-control";
   }
 
   &.light:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.1);
+    background-color: #ebf2ff;
   }
 
   &.dark:not(:disabled):hover {
-    background-color: rgba(51, 129, 255, 0.25);
+    background-color: #383b42;
   }
 }
 
@@ -69,12 +69,16 @@ $name: "fastboard-zoom-control";
   }
 }
 
+.#{$name}-text {
+  line-height: 24px;
+}
+
 .#{$name}-percent {
   opacity: 0.6;
 }
 
 .#{$name}-scale,
 .#{$name}-percent {
-  font-size: 12px;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }