@netless/fastboard 0.0.10 → 0.2.0

package/src/react.tsx

@@ -1,52 +0,0 @@
-import type { WhiteboardApp } from "./index";
-
-import React, { forwardRef, useEffect, useRef } from "react";
-import { useLastValue } from "./internal/hooks";
-
-// https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
-function useCombinedRefs<T>(...refs: React.Ref<T>[]) {
-  const targetRef = useRef<T | null>(null);
-
-  useEffect(() => {
-    for (const ref of refs) {
-      if (!ref) continue;
-
-      if (typeof ref === "function") {
-        ref(targetRef.current);
-      } else {
-        (ref as typeof targetRef).current = targetRef.current;
-      }
-    }
-  }, [refs]);
-
-  return targetRef;
-}
-
-/**
- * @example
- * let app = await createWhiteboardApp(config)
- * <Fastboard app={app} />
- * await app.dispose()
- */
-export const Fastboard = forwardRef<
-  HTMLDivElement,
-  { app?: WhiteboardApp | null } & React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  >
->(({ app, ...restProps }, outerRef) => {
-  const innerRef = useRef<HTMLDivElement>(null);
-  const ref = useCombinedRefs(outerRef, innerRef);
-  const previous = useLastValue(app);
-
-  useEffect(() => {
-    if (previous && previous !== app) {
-      previous.bindElement(null);
-    }
-    if (app) {
-      app.bindElement(ref.current);
-    }
-  }, [app, previous, ref]);
-
-  return <div className="fastboard" {...restProps} ref={ref} />;
-});

package/src/style.scss

@@ -1,35 +0,0 @@
-@import "@netless/window-manager/dist/style.css";
-@import "tippy.js/dist/tippy.css";
-@import "tippy.js/themes/light.css";
-@import "rc-slider/assets/index.css";
-@import "./components/Root.scss";
-@import "./components/RedoUndo.scss";
-@import "./components/PageControl.scss";
-@import "./components/ZoomControl.scss";
-@import "./components/Toolbar/Toolbar.scss";
-@import "./components/PlayerControl/PlayerControl.scss";
-
-.fastboard {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.tippy-box.fastboard-tip {
-  color: #eee;
-  background-color: rgba($color: #000000, $alpha: 0.95);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-}
-
-.tippy-box.fastboard-tip[data-placement^="right"] > .tippy-arrow::before {
-  top: 4px;
-  border-width: 4px;
-  border-right-color: #000;
-}
-
-.tippy-box.fastboard-tip[data-placement^="top"] > .tippy-arrow::before {
-  left: 4px;
-  border-width: 4px;
-  border-top-color: #000;
-}

package/src/svelte.ts

@@ -1,45 +0,0 @@
-import { readable, type Readable } from "svelte/store";
-import { createWhiteboardApp } from "./index";
-
-import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
-
-export type FastBoardConfig = WhiteboardAppConfig;
-
-/**
- * @example
- * ```svelte
- * <script>
- *   let ref = writable(null)
- *   let app = useFastboard(ref, { sdkConfig, joinRoom })
- *   if (app) {
- *     app.insertDocs({...})
- *   }
- * </script>
- * <div style="width: 100%; height: 100%" bind:this={$ref} />
- * ```
- */
-export function useFastboard(
-  ref: Readable<HTMLElement | null>,
-  config: FastBoardConfig
-): Readable<WhiteboardApp | null> {
-  return readable<WhiteboardApp | null>(null, set => {
-    let app_: WhiteboardApp | null = null;
-
-    createWhiteboardApp(config).then(app => {
-      set((app_ = app));
-    });
-
-    const dispose = ref.subscribe(div => {
-      if (div && app_) {
-        app_.bindElement(div);
-      }
-    });
-
-    return () => {
-      dispose();
-      if (app_) {
-        app_.dispose();
-      }
-    };
-  });
-}

package/src/theme/index.ts

@@ -1,36 +0,0 @@
-import type { IconProps } from "../types";
-
-export interface ThemeConfig {
-  color: string;
-  activeColor: string;
-  backgroundColor: string;
-  hoverBackgroundColor: string;
-}
-
-export const light: ThemeConfig = {
-  color: "#5D5D5D",
-  activeColor: "#3381FF",
-  backgroundColor: "#fff",
-  hoverBackgroundColor: "rgba(51, 129, 255, 0.1)",
-};
-
-export const dark: ThemeConfig = {
-  ...light,
-  color: "#eee",
-  backgroundColor: "#111",
-};
-
-export const themes = { light, dark };
-
-export const getStroke = (props: IconProps) => {
-  let config;
-  if (props.theme) {
-    config = themes[props.theme];
-  } else {
-    config = themes.light;
-  }
-  return props.active ? config.activeColor : config.color;
-};
-
-export const TopOffset = [0, 11] as [number, number];
-export const RightOffset = [0, 11] as [number, number];

package/src/types/index.ts

@@ -1,22 +0,0 @@
-import type { Room } from "white-web-sdk";
-import type { WindowManager } from "@netless/window-manager";
-import type { i18n } from "i18next";
-
-export type Theme = "light" | "dark";
-
-export interface IconProps {
-  theme?: Theme;
-  active?: boolean;
-}
-
-export interface CommonProps {
-  room?: Room | null;
-  manager?: WindowManager | null;
-  theme?: Theme;
-  i18n?: i18n | null;
-}
-
-export type GenericIcon<
-  K extends string,
-  E extends string = "disable"
-> = Partial<Record<`${K}Icon${Capitalize<E | "">}`, string>>;

package/src/vue.ts

@@ -1,74 +0,0 @@
-import type { ComponentPublicInstance, Ref } from "vue-demi";
-import {
-  computed,
-  getCurrentScope,
-  onScopeDispose,
-  shallowRef,
-  unref,
-  watchEffect,
-} from "vue-demi";
-import { createWhiteboardApp } from "./index";
-
-import type { WhiteboardApp, WhiteboardAppConfig } from "./WhiteboardApp";
-
-export type FastBoardConfig = WhiteboardAppConfig;
-
-export type MaybeRef<T> = T | Ref<T>;
-export type VueInstance = ComponentPublicInstance;
-export type MaybeElementRef = MaybeRef<
-  HTMLElement | SVGElement | VueInstance | undefined | null
->;
-
-/**
- * Get the dom element of a ref of element or Vue component instance
- */
-export function unrefElement(elRef: MaybeElementRef) {
-  const plain = unref(elRef);
-  return (plain as VueInstance)?.$el ?? plain;
-}
-
-function tryOnScopeDispose(fn: () => void) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn);
-    return true;
-  }
-  return false;
-}
-
-/**
- * @example
- * ```vue
- * <script setup>
- * const el = ref(null)
- * const app = useFastboard(el, { sdkConfig, joinRoom })
- * if (app.value) {
- *   app.value.insertDocs({...})
- * }
- * </script>
- * <template>
- *   <div style="width: 100%; height: 100%" ref="el"></div>
- * </template>
- * ```
- */
-export function useFastboard(el: MaybeElementRef, config: FastBoardConfig) {
-  const app = shallowRef<WhiteboardApp | null>(null);
-  const target = computed(() => unrefElement(el));
-
-  createWhiteboardApp(config).then(app_ => {
-    app.value = app_;
-  });
-
-  watchEffect(() => {
-    if (target.value && app.value) {
-      app.value.bindElement(target.value);
-    }
-  });
-
-  tryOnScopeDispose(() => {
-    if (app.value) {
-      app.value.dispose();
-    }
-  });
-
-  return app;
-}