@netless/fastboard 0.0.11 → 0.2.1

package/src/components/Toolbar/Content.tsx

@@ -1,94 +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";
-import clsx from "clsx";
-
-export const Content = React.memo(() => {
-  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={clsx(`${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,281 +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);
-  }
-
-  &.expanded {
-    border: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  &.dark {
-    color: #ddd;
-    background-color: rgba($color: #333, $alpha: 0.85);
-  }
-
-  &.expanded:hover {
-    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-    transform: translate3d(0, 0, 0);
-  }
-
-  &.collapsed {
-    padding: 0;
-    background-color: transparent;
-  }
-
-  &-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;
-
-    &.collapsed {
-      transform: translateX(-100%);
-      transition: 1s transform;
-    }
-  }
-
-  &-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;
-    }
-  }
-
-  &-mask-btn {
-    width: 17px;
-    height: 62px;
-    cursor: pointer;
-    &.dark {
-      filter: invert(0.8);
-    }
-  }
-
-  &-expand-btn {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    left: 0;
-  }
-}

package/src/components/Toolbar/Toolbar.tsx

@@ -1,132 +0,0 @@
-import type { i18n } from "i18next";
-import type { CommonProps, GenericIcon, Theme } from "../../types";
-import { AnimatePresence, motion } from "framer-motion";
-
-import React, { createContext, useCallback, useState } from "react";
-
-import { Icon } from "../../icons";
-import { EmptyToolbarHook, useToolbar, type ToolbarHook } from "./hooks";
-import { Content } from "./Content";
-
-import collapsePNG from "./components/assets/collapsed.png";
-import expandPNG from "./components/assets/expanded.png";
-
-import clsx from "clsx";
-import { Mask } from "./components/Mask";
-
-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,
-  manager,
-  i18n,
-}: ToolbarProps) => {
-  const [expanded, setExpanded] = useState(true);
-  const hook = useToolbar(room, manager);
-  const [toolbar, toolbarRef] = useState<HTMLDivElement | null>(null);
-  const [onHover, setOnHover] = useState<boolean>(false);
-  const [pointEvents, setPointEvents] = useState(true);
-  const disabled = !hook.writable;
-
-  const toggle = useCallback(() => {
-    setExpanded(e => !e);
-  }, []);
-
-  return (
-    <ToolbarContext.Provider value={{ theme, icons, ...hook, i18n }}>
-      <AnimatePresence>
-        {expanded ? (
-          <motion.div
-            initial={{ x: -100 }}
-            animate={{
-              x: 0,
-              transition: { duration: 0.5 },
-            }}
-            key="toolbar"
-            ref={toolbarRef}
-            className={clsx(name, theme)}
-            onPointerEnter={() => {
-              if (expanded) {
-                setOnHover(true);
-              }
-            }}
-            onMouseLeave={() => setOnHover(false)}
-            exit={{
-              x: -100,
-              transition: { duration: 0.5 },
-            }}
-            onAnimationStart={() => setPointEvents(false)}
-            onAnimationComplete={() => setPointEvents(true)}
-            style={{ pointerEvents: pointEvents ? "auto" : "none" }}
-          >
-            <Content />
-            {expanded && onHover && (
-              <Mask toolbar={toolbar}>
-                <div onClick={toggle}>
-                  <img
-                    draggable={false}
-                    className={clsx(`${name}-mask-btn`, theme)}
-                    src={collapsePNG}
-                  />
-                </div>
-              </Mask>
-            )}
-          </motion.div>
-        ) : (
-          <motion.div
-            className={clsx(`${name}-expand-btn`, theme)}
-            key="expand"
-            onClick={toggle}
-            initial={{ x: -100 }}
-            animate={{
-              x: 0,
-              transition: { duration: 0.5 },
-            }}
-          >
-            {!expanded && (
-              <Icon
-                fallback={
-                  <img
-                    draggable={false}
-                    src={expandPNG}
-                    className={clsx(`${name}-mask-btn`, theme)}
-                  />
-                }
-                src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
-              />
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </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>
-  );
-}