@netless/fastboard-react 0.1.0

package/src/components/RedoUndo/RedoUndo.tsx

@@ -0,0 +1,76 @@
+import type { CommonProps, GenericIcon } from "../../typings";
+
+import Tippy from "@tippyjs/react";
+import clsx from "clsx";
+import React from "react";
+
+import { useTranslation } from "../../i18n";
+import { Icon } from "../../icons";
+import { Redo } from "../../icons/Redo";
+import { Undo } from "../../icons/Undo";
+import { TopOffset } from "../../theme";
+import { useTheme, useWritable } from "../hooks";
+import { useRedoUndo } from "./hooks";
+
+export const name = "fastboard-redo-undo";
+
+export type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
+
+export function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable }: RedoUndoProps) {
+  theme = useTheme(theme);
+  const { t } = useTranslation();
+
+  const writable = useWritable();
+  const { redoSteps, undoSteps, redo, undo } = useRedoUndo();
+
+  const disabled = !writable;
+
+  return (
+    <div className={clsx(name, theme)}>
+      <Tippy
+        className="fastboard-tip"
+        content={t("undo")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "undo", theme)}
+          disabled={disabled || undoSteps === 0}
+          onClick={undo}
+        >
+          <Icon
+            fallback={<Undo theme={theme} />}
+            src={undoSteps === 0 ? undoIconDisable : undoIcon}
+            alt="[undo]"
+          />
+        </button>
+      </Tippy>
+      <Tippy
+        className="fastboard-tip"
+        content={t("redo")}
+        theme={theme}
+        disabled={disabled}
+        placement="top"
+        delay={[1000, 400]}
+        duration={300}
+        offset={TopOffset}
+      >
+        <button
+          className={clsx(`${name}-btn`, "redo", theme)}
+          disabled={disabled || redoSteps === 0}
+          onClick={redo}
+        >
+          <Icon
+            fallback={<Redo theme={theme} />}
+            src={redoSteps === 0 ? redoIconDisable : redoIcon}
+            alt="[redo]"
+          />
+        </button>
+      </Tippy>
+    </div>
+  );
+}

package/src/components/RedoUndo/hooks.ts

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useFastboardApp, useFastboardValue } from "../hooks";
+
+export function useRedoUndo() {
+  const app = useFastboardApp();
+  const undoSteps = useFastboardValue(app.canUndoSteps);
+  const redoSteps = useFastboardValue(app.canRedoSteps);
+
+  const undo = useCallback(() => {
+    app.undo();
+  }, [app]);
+
+  const redo = useCallback(() => {
+    app.redo();
+  }, [app]);
+
+  return { redoSteps, undoSteps, redo, undo };
+}

package/src/components/RedoUndo/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { RedoUndo, type RedoUndoProps } from "./RedoUndo";

package/src/components/Toolbar/Content.tsx

@@ -0,0 +1,74 @@
+import clsx from "clsx";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+import { clamp } from "../../internal";
+import { CleanButton, ClickerButton, EraserButton, SelectorButton } from "./components/ApplianceButtons";
+import { AppsButton } from "./components/AppsButton";
+import { PencilButton } from "./components/PencilButton";
+import { ShapesButton } from "./components/ShapesButton";
+import { TextButton } from "./components/TextButton";
+import { DownButton, UpButton } from "./components/UpDownButtons";
+import { ItemHeight, ItemsCount, MaxHeight, MinHeight } from "./const";
+import { name } from "./Toolbar";
+
+export const Content = React.memo(() => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [parentHeight, setParentHeight] = useState(0);
+
+  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 />
+        <AppsButton />
+      </div>
+      {needScroll && <DownButton scrollTo={scrollTo} disabled={disableScrollDown} />}
+    </>
+  );
+});

package/src/components/Toolbar/Toolbar.scss

@@ -0,0 +1,281 @@
+$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

@@ -0,0 +1,116 @@
+import type { CommonProps, GenericIcon, Theme } from "../../typings";
+import type { ToolbarHook } from "./hooks";
+
+import clsx from "clsx";
+import { AnimatePresence, motion } from "framer-motion";
+import React, { createContext, useCallback, useEffect, useState } from "react";
+
+import collapsePNG from "./components/assets/collapsed.png";
+import expandPNG from "./components/assets/expanded.png";
+
+import { Icon } from "../../icons";
+import { useTheme } from "../hooks";
+import { Mask } from "./components/Mask";
+import { Content } from "./Content";
+import { EmptyToolbarHook, useToolbar } from "./hooks";
+
+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"];
+};
+
+export const ToolbarContext = createContext<ToolbarContextType>({
+  theme: "light",
+  ...EmptyToolbarHook,
+});
+
+export const name = "fastboard-toolbar";
+
+export const Toolbar = ({ theme, icons }: ToolbarProps) => {
+  theme = useTheme(theme);
+
+  const hook = useToolbar();
+  const [expanded, setExpanded] = useState(true);
+  const [toolbar, toolbarRef] = useState<HTMLDivElement | null>(null);
+  const [onHover, setOnHover] = useState(false);
+  const [delayedOnHover, setDelayedOnHover] = useState(false);
+  const [pointEvents, setPointEvents] = useState(true);
+  const disabled = !hook.writable;
+
+  const toggle = useCallback(() => {
+    setExpanded(e => !e);
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDelayedOnHover(onHover);
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [onHover]);
+
+  return (
+    <ToolbarContext.Provider value={{ theme, icons, ...hook }}>
+      <AnimatePresence>
+        {expanded ? (
+          <motion.div
+            initial={{ x: -100 }}
+            animate={{ x: 0, transition: { duration: 0.5 } }}
+            key="toolbar"
+            ref={toolbarRef}
+            className={clsx(name, theme)}
+            onPointerEnter={() => {
+              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 || delayedOnHover) && (
+              <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

@@ -0,0 +1,108 @@
+import type { HotKey } from "white-web-sdk";
+
+import React, { useCallback, useContext } from "react";
+import { ApplianceNames } from "white-web-sdk";
+
+import { useTranslation } from "../../../i18n";
+import { Icon } from "../../../icons";
+import { defaultHotKeys } from "../../../internal";
+import { useFastboardApp } from "../../hooks";
+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 = useFastboardApp();
+  const { t } = useTranslation();
+  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
+
+  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.clicker), [setAppliance]);
+
+  const shortcut = app.hotKeys?.changeToClick;
+  const appliance = memberState?.currentApplianceName;
+  const active = appliance === ApplianceNames.clicker;
+  const disabled = !writable;
+
+  return (
+    <Button content={renderToolTip(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 = useFastboardApp();
+  const { t } = useTranslation();
+  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
+
+  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.selector), [setAppliance]);
+
+  const appliance = memberState?.currentApplianceName;
+  const active = appliance === ApplianceNames.selector;
+  const disabled = !writable;
+  const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
+
+  return (
+    <Button content={renderToolTip(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 = useFastboardApp();
+  const { t } = useTranslation();
+  const { theme, icons, writable, setAppliance, memberState } = useContext(ToolbarContext);
+
+  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.eraser), [setAppliance]);
+
+  const appliance = memberState?.currentApplianceName;
+  const active = appliance === ApplianceNames.eraser;
+  const disabled = !writable;
+  const shortcut = (app?.hotKeys || defaultHotKeys).changeToEraser;
+
+  return (
+    <Button content={renderToolTip(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 { t } = useTranslation();
+  const { theme, icons, writable, cleanCurrentScene } = useContext(ToolbarContext);
+
+  const disabled = !writable;
+
+  return (
+    <Button content={t("clean")} onClick={cleanCurrentScene}>
+      <Icon
+        fallback={<Icons.Clean theme={theme} />}
+        src={disabled ? icons?.cleanIconDisable : icons?.cleanIcon}
+        alt="[clean]"
+      />
+    </Button>
+  );
+}