@netless/fastboard 0.0.10 → 0.2.0

package/src/components/Toolbar/Content.tsx

@@ -1,93 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-import { useInstance, clamp } from "../../internal";
-import { name } from "./Toolbar";
-import { ItemHeight, ItemsCount, MaxHeight, MinHeight } from "./const";
-import { DownButton, UpButton } from "./components/UpDownButtons";
-import {
-  CleanButton,
-  ClickerButton,
-  EraserButton,
-  SelectorButton,
-} from "./components/ApplianceButtons";
-import { AppsButton } from "./components/AppsButton";
-import { PencilButton } from "./components/PencilButton";
-import { TextButton } from "./components/TextButton";
-import { ShapesButton } from "./components/ShapesButton";
-
-export function Content() {
-  const app = useInstance();
-  const ref = useRef<HTMLDivElement>(null);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [parentHeight, setParentHeight] = useState(0);
-
-  const hasAppButton = app?.config.toolbar?.apps?.enable ?? true;
-  const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
-  const sectionHeight = clamp(
-    parentHeight - 48 * (needScroll ? 3 : 1),
-    MinHeight,
-    MaxHeight
-  );
-  const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
-  const disableScrollUp = scrollTop === 0;
-  const disableScrollDown = scrollTop === scrollBuffer;
-
-  const scrollTo = useCallback(
-    (height: number) => {
-      setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
-    },
-    [scrollBuffer, scrollTop]
-  );
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = scrollTop;
-    }
-  }, [scrollTop]);
-
-  useEffect(() => {
-    const container = ref.current?.parentElement?.parentElement;
-    if (container) {
-      const { paddingTop, paddingBottom } = getComputedStyle(container);
-      const padding = parseInt(paddingTop) + parseInt(paddingBottom) || 0;
-      const resizeObserver = new ResizeObserver(() => {
-        setParentHeight(container.getBoundingClientRect().height - padding);
-      });
-      resizeObserver.observe(container);
-      return () => resizeObserver.disconnect();
-    }
-  }, []);
-
-  return (
-    <>
-      {needScroll && (
-        <UpButton scrollTo={scrollTo} disabled={disableScrollUp} />
-      )}
-      <div
-        ref={ref}
-        className={`${name}-section`}
-        style={{
-          height: `${sectionHeight}px`,
-          overflow: needScroll ? "hidden" : "visible",
-        }}
-      >
-        <ClickerButton />
-        <SelectorButton />
-        <PencilButton />
-        <TextButton />
-        <ShapesButton />
-        <EraserButton />
-        <CleanButton />
-        {hasAppButton && (
-          <AppsButton
-            content={app?.config.toolbar?.apps?.content}
-            onClick={app?.config.toolbar?.apps?.onClick}
-          />
-        )}
-      </div>
-      {needScroll && (
-        <DownButton scrollTo={scrollTo} disabled={disableScrollDown} />
-      )}
-    </>
-  );
-}

package/src/components/Toolbar/Toolbar.scss

@@ -1,247 +0,0 @@
-$name: "fastboard-toolbar";
-
-.#{$name} {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  border-radius: 4px;
-  flex-direction: column;
-  gap: 4px;
-  position: absolute;
-  z-index: 100;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-
-  .rc-slider {
-    padding: 6px 0;
-  }
-  .rc-slider-rail,
-  .rc-slider-track {
-    height: 2px;
-  }
-
-  .tippy-content {
-    padding: 8px;
-  }
-  .tippy-box {
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    background-color: rgba($color: #333, $alpha: 0.95);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(2px);
-  }
-  .tippy-box[data-theme~="light"] {
-    background-color: rgba($color: #fff, $alpha: 0.95);
-    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
-  }
-
-  &.light {
-    color: #333;
-    background-color: rgba($color: #fff, $alpha: 0.85);
-    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);
-  }
-
-  &-tooltip {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  &-hotkey {
-    margin-right: -4px;
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    background-color: rgba($color: #fff, $alpha: 0.1);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-btn {
-    appearance: none;
-    cursor: pointer;
-    margin: 0;
-    border: 0;
-    padding: 4px;
-    width: 32px;
-    height: 32px;
-    background-color: transparent;
-    border-radius: 4px;
-    font-size: 24px;
-    line-height: 1;
-    position: relative;
-
-    &-interactive {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-    }
-
-    svg,
-    img {
-      width: 1em;
-      height: 1em;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &.light:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.1);
-    }
-
-    &.dark:not(:disabled):hover {
-      background-color: rgba(51, 129, 255, 0.25);
-    }
-  }
-
-  &-triangle {
-    width: 0px;
-    height: 0px;
-    border-bottom: 4px solid;
-    border-left: 4px solid transparent;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-
-  &-cut-line {
-    display: inline-block;
-    height: 0.5px;
-    width: 100%;
-
-    &.light {
-      background-color: #e7e7e7;
-    }
-
-    &.dark {
-      background-color: rgba(255, 255, 255, 0.15);
-    }
-  }
-
-  &-section {
-    display: inline-flex;
-    flex-flow: column nowrap;
-    gap: 4px;
-    scroll-behavior: smooth;
-  }
-
-  &-panel {
-    width: 136px - 8px * 2;
-    padding: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    gap: 8px;
-
-    &.apps {
-      width: 240px - 8px * 2;
-    }
-  }
-
-  &-color-box,
-  &-shapes {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-    align-items: center;
-    justify-items: center;
-
-    .#{$name}-btn {
-      padding: 0;
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &-apps {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-    align-items: center;
-    justify-items: center;
-
-    .#{$name}-btn {
-      width: 40px;
-      height: 40px;
-      font-size: 40px;
-    }
-  }
-
-  &-app-icon {
-    padding-top: 4px;
-    display: inline-flex;
-    flex-flow: column nowrap;
-    align-items: center;
-    gap: 4px;
-
-    .fastboard-toolbar-btn {
-      padding: 0;
-    }
-
-    &-text {
-      font-size: 12px;
-      color: #5d5d5d;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &-color-item {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    cursor: pointer;
-
-    *.light:hover {
-      background-color: #f5f5f5;
-    }
-
-    *.dark:hover {
-      background-color: #333;
-    }
-  }
-
-  &-color-border {
-    width: 24px;
-    height: 24px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &.active.light {
-      border: 1px solid rgba(51, 129, 255, 0.8);
-    }
-
-    &.active.dark {
-      border: 1px solid rgba(51, 129, 255, 0.8);
-    }
-  }
-
-  &-color-btn {
-    margin: 0;
-    border: 1px solid rgba(0, 0, 0, 0.24);
-    padding: 0;
-    appearance: none;
-    width: 16px;
-    height: 16px;
-    border-radius: 4px;
-    cursor: pointer;
-
-    &:focus-visible {
-      outline-offset: 2px;
-    }
-  }
-}

package/src/components/Toolbar/Toolbar.tsx

@@ -1,82 +0,0 @@
-import type { CommonProps, GenericIcon, Theme } from "../../types";
-import type { i18n } from "i18next";
-
-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";
-
-export type ToolbarProps = CommonProps & {
-  icons?: GenericIcon<
-    | "clicker"
-    | "selector"
-    | "pencil"
-    | "eraser"
-    | "clean"
-    | "expand"
-    | "collapse"
-    | "up"
-    | "down"
-    | "text"
-    | "apps"
-  >;
-};
-
-type ToolbarContextType = ToolbarHook & {
-  theme: Theme;
-  icons?: ToolbarProps["icons"];
-  i18n?: i18n | null;
-};
-
-export const ToolbarContext = createContext<ToolbarContextType>({
-  theme: "light",
-  ...EmptyToolbarHook,
-});
-
-export const name = "fastboard-toolbar";
-
-export const Toolbar = ({
-  theme = "light",
-  icons,
-  room,
-  i18n,
-}: ToolbarProps) => {
-  const [expanded, setExpanded] = useState(true);
-  const hook = useToolbar(room);
-  const toggle = useCallback(() => setExpanded(e => !e), []);
-
-  const disabled = !hook.writable;
-
-  return (
-    <ToolbarContext.Provider value={{ theme, icons, ...hook, i18n }}>
-      <div className={clsx(name, theme)}>
-        {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 />
-            <Content />
-          </>
-        )}
-      </div>
-    </ToolbarContext.Provider>
-  );
-};

package/src/components/Toolbar/components/ApplianceButtons.tsx

@@ -1,132 +0,0 @@
-import type { HotKey } from "white-web-sdk";
-
-import React, { useCallback, useContext } from "react";
-import { ApplianceNames } from "white-web-sdk";
-
-import { defaultHotKeys, useInstance } from "../../../internal";
-import { Icon } from "../../../icons";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-
-export function renderToolTip(text: string | undefined, hotkey?: HotKey) {
-  if (!(typeof hotkey === "string")) return text;
-  return (
-    <span className="fastboard-toolbar-tooltip">
-      <span>{text}</span>
-      <span className="fastboard-toolbar-hotkey">{hotkey.toUpperCase()}</span>
-    </span>
-  );
-}
-
-export function ClickerButton() {
-  const app = useInstance();
-
-  const { theme, icons, writable, setAppliance, memberState, i18n } =
-    useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(
-    () => setAppliance(ApplianceNames.clicker),
-    [setAppliance]
-  );
-
-  const shortcut = app?.config.joinRoom.hotKeys?.changeToClick;
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.clicker;
-  const disabled = !writable;
-
-  return (
-    <Button
-      content={renderToolTip(i18n?.t("clicker"), shortcut)}
-      onClick={changeAppliance}
-      active={active}
-    >
-      <Icon
-        fallback={<Icons.Clicker theme={theme} active={active} />}
-        src={disabled ? icons?.clickerIconDisable : icons?.clickerIcon}
-        alt="[clicker]"
-      />
-    </Button>
-  );
-}
-
-export function SelectorButton() {
-  const app = useInstance();
-
-  const { theme, icons, writable, setAppliance, memberState, i18n } =
-    useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(
-    () => setAppliance(ApplianceNames.selector),
-    [setAppliance]
-  );
-
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.selector;
-  const disabled = !writable;
-  const shortcut = (app?.config.joinRoom.hotKeys || defaultHotKeys)
-    .changeToSelector;
-
-  return (
-    <Button
-      content={renderToolTip(i18n?.t("selector"), shortcut)}
-      onClick={changeAppliance}
-      active={active}
-    >
-      <Icon
-        fallback={<Icons.Selector theme={theme} active={active} />}
-        src={disabled ? icons?.selectorIconDisable : icons?.selectorIcon}
-        alt="[selector]"
-      />
-    </Button>
-  );
-}
-
-export function EraserButton() {
-  const app = useInstance();
-
-  const { theme, icons, writable, setAppliance, memberState, i18n } =
-    useContext(ToolbarContext);
-
-  const changeAppliance = useCallback(
-    () => setAppliance(ApplianceNames.eraser),
-    [setAppliance]
-  );
-
-  const appliance = memberState?.currentApplianceName;
-  const active = appliance === ApplianceNames.eraser;
-  const disabled = !writable;
-  const shortcut = (app?.config.joinRoom.hotKeys || defaultHotKeys)
-    .changeToEraser;
-
-  return (
-    <Button
-      content={renderToolTip(i18n?.t("eraser"), shortcut)}
-      onClick={changeAppliance}
-      active={active}
-    >
-      <Icon
-        fallback={<Icons.Eraser theme={theme} active={active} />}
-        src={disabled ? icons?.eraserIconDisable : icons?.eraserIcon}
-        alt="[eraser]"
-      />
-    </Button>
-  );
-}
-
-export function CleanButton() {
-  const { theme, icons, writable, cleanCurrentScene, i18n } =
-    useContext(ToolbarContext);
-
-  const disabled = !writable;
-
-  return (
-    <Button content={i18n?.t("clean")} onClick={cleanCurrentScene}>
-      <Icon
-        fallback={<Icons.Clean theme={theme} />}
-        src={disabled ? icons?.cleanIconDisable : icons?.cleanIcon}
-        alt="[clean]"
-      />
-    </Button>
-  );
-}

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

@@ -1,106 +0,0 @@
-import Tippy from "@tippyjs/react";
-import React, { useContext } from "react";
-
-import vscodePNG from "./assets/vscode.png";
-import geogebraPNG from "./assets/geogebra.png";
-import countdownPNG from "./assets/countdown.png";
-
-import { useInstance } from "../../../internal";
-import { Icon } from "../../../icons";
-import { RightOffset } from "../../../theme";
-import { Icons } from "../icons";
-import { ToolbarContext } from "../Toolbar";
-import { Button } from "./Button";
-
-export interface AppsButtonProps {
-  content?: React.ReactNode;
-  onClick?: () => void;
-}
-
-export function AppsButton({ content, onClick }: AppsButtonProps) {
-  const { theme, icons, writable } = useContext(ToolbarContext);
-
-  const disabled = !writable;
-
-  const button = (
-    <Button content="Apps" onClick={onClick}>
-      <Icon
-        fallback={<Icons.Apps theme={theme} />}
-        src={disabled ? icons?.appsIconDisable : icons?.appsIcon}
-        alt="[apps]"
-      />
-    </Button>
-  );
-
-  return content === false ? (
-    button
-  ) : (
-    <span className="fastboard-toolbar-btn-interactive">
-      <Tippy
-        className="fastboard-tip"
-        content={renderAppsButtonContent(content)}
-        theme={theme}
-        placement="right-end"
-        trigger="click"
-        offset={RightOffset}
-        arrow={false}
-        interactive
-      >
-        {button}
-      </Tippy>
-    </span>
-  );
-}
-
-function renderAppsButtonContent(content?: React.ReactNode) {
-  return (
-    <div className="fastboard-toolbar-panel apps">
-      <div className="fastboard-toolbar-apps">{content || <DefaultApps />}</div>
-    </div>
-  );
-}
-
-function DefaultApps() {
-  const app = useInstance();
-
-  return (
-    <>
-      <AppIcon
-        title="Code Editor"
-        src={vscodePNG}
-        alt="[code editor]"
-        onClick={app?.insertCodeEditor.bind(app)}
-      />
-      <AppIcon
-        title="GeoGebra"
-        src={geogebraPNG}
-        alt="[geogebra]"
-        onClick={app?.insertGeoGebra.bind(app)}
-      />
-      <AppIcon
-        title="Countdown"
-        src={countdownPNG}
-        alt="[countdown]"
-        onClick={app?.insertCountdown.bind(app)}
-      />
-    </>
-  );
-}
-
-interface AppIconProps {
-  title: string;
-  src: string;
-  alt: string;
-  onClick?: () => void;
-}
-
-function AppIcon({ title, src, alt, onClick }: AppIconProps) {
-  return (
-    <span className="fastboard-toolbar-app-icon">
-      <Button placement="top" content={title} onClick={onClick}>
-        <img src={src} alt={alt} title={title} />
-      </Button>
-      <span className="fastboard-toolbar-app-icon-text">{title}</span>
-    </span>
-  );
-}

package/src/components/Toolbar/components/Button.tsx

@@ -1,54 +0,0 @@
-import type { Placement } from "tippy.js";
-
-import clsx from "clsx";
-import React, { forwardRef, useContext, type PropsWithChildren } from "react";
-import Tippy from "@tippyjs/react";
-
-import { RightOffset } from "../../../theme";
-import { ToolbarContext } from "../Toolbar";
-
-type ButtonProps = PropsWithChildren<{
-  content: React.ReactNode;
-  disabled?: boolean;
-  active?: boolean;
-  onClick?: () => void;
-  interactive?: boolean;
-  placement?: Placement;
-}>;
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
-      content,
-      disabled,
-      active,
-      onClick,
-      interactive,
-      placement = "right",
-      children,
-    } = props;
-    const { writable, theme } = useContext(ToolbarContext);
-
-    return (
-      <Tippy
-        className="fastboard-tip"
-        content={content}
-        interactive={interactive}
-        theme={theme}
-        disabled={disabled || !writable}
-        placement={placement}
-        offset={placement.includes("right") ? RightOffset : undefined}
-        duration={300}
-      >
-        <button
-          ref={ref}
-          className={clsx("fastboard-toolbar-btn", theme, { active })}
-          onClick={onClick}
-          disabled={disabled || !writable}
-        >
-          {children}
-        </button>
-      </Tippy>
-    );
-  }
-);