@netless/fastboard 0.0.8 → 0.1.0

package/src/components/PlayerControl/icons/Loading.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Loading = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" fill={stroke}></path>
-    </svg>
-  );
-};

package/src/components/PlayerControl/icons/Pause.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Pause = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path d="M14 19h4V5h-4M6 19h4V5H6v14z" fill={stroke}></path>
-    </svg>
-  );
-};

package/src/components/PlayerControl/icons/Play.tsx

@@ -1,13 +0,0 @@
-import type { IconProps } from "../../../types";
-
-import React from "react";
-import { getStroke } from "../../../theme";
-
-export const Play = (props: IconProps) => {
-  const stroke = getStroke(props);
-  return (
-    <svg viewBox="0 0 24 24">
-      <path d="M8 5.14v14l11-7l-11-7z" fill={stroke}></path>
-    </svg>
-  );
-};

package/src/components/PlayerControl/icons/index.ts

@@ -1,10 +0,0 @@
-import { memo } from "react";
-import { Loading } from "./Loading";
-import { Pause } from "./Pause";
-import { Play } from "./Play";
-
-export const Icons = {
-  Play: memo(Play),
-  Pause: memo(Pause),
-  Loading: memo(Loading),
-};

package/src/components/PlayerControl/index.ts

@@ -1 +0,0 @@
-export { PlayerControl, name, type PlayerControlProps } from "./PlayerControl";

package/src/components/RedoUndo.scss

@@ -1,56 +0,0 @@
-$name: "fastboard-redo-undo";
-
-.#{$name} {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 4px;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-
-  &.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);
-  }
-}
-
-.#{$name}-btn {
-  appearance: none;
-  cursor: pointer;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  background-color: transparent;
-  border-radius: 4px;
-  font-size: 24px;
-  line-height: 1;
-
-  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);
-  }
-}

package/src/components/RedoUndo.tsx

@@ -1,95 +0,0 @@
-import type { CommonProps, GenericIcon } from "../types";
-
-import clsx from "clsx";
-import React, { useCallback, useEffect, useState } from "react";
-import Tippy from "@tippyjs/react";
-
-import { Icon } from "../icons";
-import { Undo } from "../icons/Undo";
-import { Redo } from "../icons/Redo";
-import { TopOffset } from "../theme";
-
-export const name = "fastboard-redo-undo";
-
-export type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
-
-export function RedoUndo({
-  room,
-  theme = "light",
-  undoIcon,
-  undoIconDisable,
-  redoIcon,
-  redoIconDisable,
-  i18n,
-}: RedoUndoProps) {
-  const [writable, setWritable] = useState(false);
-  const [undoSteps, setUndoSteps] = useState(0);
-  const [redoSteps, setRedoSteps] = useState(0);
-
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      room.isWritable && (room.disableSerialization = false);
-
-      const updateWritable = () => setWritable(room?.isWritable || false);
-
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
-      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
-      return () => {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
-        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
-      };
-    }
-  }, [room]);
-
-  const disabled = !writable;
-
-  return (
-    <div className={clsx(name, theme)}>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("undo")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "undo", theme)}
-          disabled={disabled || undoSteps === 0}
-          onClick={useCallback(() => room && room.undo(), [room])}
-        >
-          <Icon
-            fallback={<Undo theme={theme} />}
-            src={undoSteps === 0 ? undoIconDisable : undoIcon}
-            alt="[undo]"
-          />
-        </button>
-      </Tippy>
-      <Tippy
-        className="fastboard-tip"
-        content={i18n?.t("redo")}
-        theme={theme}
-        disabled={disabled}
-        placement="top"
-        duration={300}
-        offset={TopOffset}
-      >
-        <button
-          className={clsx(`${name}-btn`, "redo", theme)}
-          disabled={disabled || redoSteps === 0}
-          onClick={useCallback(() => room && room.redo(), [room])}
-        >
-          <Icon
-            fallback={<Redo theme={theme} />}
-            src={redoSteps === 0 ? redoIconDisable : redoIcon}
-            alt="[redo]"
-          />
-        </button>
-      </Tippy>
-    </div>
-  );
-}

package/src/components/Root.scss

@@ -1,55 +0,0 @@
-.fastboard-root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.fastboard-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.6;
-}
-
-.fastboard-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-$unit: 8px;
-
-.fastboard-left {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: calc(100% - 48px);
-  padding: $unit * 2;
-  z-index: 201;
-  display: flex;
-  align-items: center;
-}
-
-.fastboard-bottom-left {
-  display: flex;
-  gap: 10px;
-  position: absolute;
-  bottom: $unit;
-  left: $unit;
-  padding: $unit;
-  z-index: 200;
-}
-
-.fastboard-bottom-right {
-  @extend .fastboard-bottom-left;
-  left: initial;
-  right: $unit;
-}

package/src/components/Root.tsx

@@ -1,61 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { Lock, Instance } from "../internal";
-import { Toolbar } from "./Toolbar";
-import { RedoUndo } from "./RedoUndo";
-import { ZoomControl } from "./ZoomControl";
-import { PageControl } from "./PageControl";
-
-export interface RootProps {
-  instance: Instance;
-}
-
-export function Root({ instance: app }: RootProps) {
-  const [mux] = useState(() => new Lock());
-
-  const useWhiteboard = useCallback(
-    (container: HTMLDivElement | null) =>
-      mux.schedule(
-        container ? () => app.mount(container) : () => app.unmount()
-      ),
-    [app, mux]
-  );
-
-  const {
-    Toolbar: toolbar = true,
-    RedoUndo: redo_undo = true,
-    ZoomControl: zoom_control = true,
-    PageControl: page_control = true,
-  } = app.config.layout || {};
-
-  const props = {
-    room: app.room,
-    manager: app.manager,
-    i18n: app.i18n,
-  };
-
-  return (
-    <Instance.Context.Provider value={app}>
-      <div className="fastboard-root">
-        {!app.room && <div className="fastboard-loading">Loading&hellip;</div>}
-        <div className="fastboard-view" ref={useWhiteboard} />
-        {toolbar && (
-          <div className="fastboard-left">
-            <Toolbar {...props} />
-          </div>
-        )}
-        {(redo_undo || zoom_control) && (
-          <div className="fastboard-bottom-left">
-            {redo_undo && <RedoUndo {...props} />}
-            {zoom_control && <ZoomControl {...props} />}
-          </div>
-        )}
-        {page_control && (
-          <div className="fastboard-bottom-right">
-            <PageControl {...props} />
-          </div>
-        )}
-      </div>
-    </Instance.Context.Provider>
-  );
-}

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;
-    }
-  }
-}