@netless/fastboard-ui 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -10,14 +10,14 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "0.3.5"
+    "@netless/fastboard-core": "0.3.7"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "0.3.5"
+    "@netless/fastboard-core": "0.3.7"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/actions/scroll.ts

@@ -10,7 +10,7 @@ export const scrollTop: SvelteAction<Writable<number>> = function (node, value)
 
   function on_scroll() {
     clearTimeout(timer);
-    timer = setTimeout(() => value.set(node.scrollTop), 200);
+    timer = window.setTimeout(() => value.set(node.scrollTop), 200);
   }
 
   node.addEventListener("scroll", on_scroll);

package/src/components/Button/Button.svelte.d.ts

@@ -18,8 +18,7 @@ export declare interface ButtonEvents {
 }
 
 export declare interface ButtonSlots {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  default: {};
+  default: any;
 }
 
 declare class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {}

package/src/components/Toolbar/README.md

@@ -52,6 +52,6 @@ The `computed_height` is calculated by:
 
 ```js
 const max_height = button_height * 2 + scrollable_area_full_height;
-let full_height = container.height;
+const full_height = container.height;
 computed_height = full_height < max_height ? full_height : max_height;
 ```

package/src/components/Toolbar/Toolbar.scss

@@ -25,7 +25,7 @@ $name: "fastboard-toolbar";
   cursor: pointer;
   pointer-events: auto;
 
-  &:focus-within {
+  &:focus-visible {
     outline: 2px solid -webkit-focus-ring-color;
   }
 

package/src/components/Toolbar/components/Shapes.svelte

@@ -65,6 +65,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-shapes {theme}" on:click={set_appliance_or_shape}>
   {#each shapes as key (key)}
     {@const is_selected = appliance === "shape" ? shape === key : appliance === key}

package/src/components/Toolbar/components/StrokeColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

package/src/components/Toolbar/components/TextColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

package/src/helpers/index.ts

@@ -5,9 +5,9 @@ import { Fastboard, ReplayFastboard } from "../components/Fastboard";
 
 export interface UI {
   /** render UI to div */
-  mount(div: Element, props?: Omit<FastboardProps, "app">): UI;
+  mount(div: Element, props?: FastboardProps): UI;
   /** update UI (theme, language, etc.) */
-  update(props?: Omit<FastboardProps, "app">): void;
+  update(props?: FastboardProps): void;
   /** remove UI */
   destroy(): void;
 }
@@ -17,18 +17,18 @@ export interface UI {
  * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
  * ui.update({ theme: "dark" })
  */
-export function createUI(app: FastboardApp, div?: Element): UI {
+export function createUI(app?: FastboardApp | null, div?: Element): UI {
   let fastboard: Fastboard | undefined;
 
   const ui: UI = {
-    mount(div: Element, props?: Omit<FastboardProps, "app">) {
+    mount(div: Element, props?: FastboardProps) {
       if (fastboard) {
         fastboard.$destroy();
       }
       fastboard = new Fastboard({ target: div, props: { app, ...props } });
       return ui;
     },
-    update(props?: Omit<FastboardProps, "app">) {
+    update(props?: FastboardProps) {
       if (fastboard) {
         fastboard.$set(props);
       }
@@ -42,7 +42,7 @@ export function createUI(app: FastboardApp, div?: Element): UI {
   };
 
   if (div) {
-    ui.mount(div);
+    ui.mount(div, { app });
   }
 
   return ui;
@@ -50,9 +50,9 @@ export function createUI(app: FastboardApp, div?: Element): UI {
 
 export interface ReplayUI {
   /** render UI to div */
-  mount(div: Element, props?: Omit<ReplayFastboardProps, "player">): ReplayUI;
+  mount(div: Element, props?: ReplayFastboardProps): ReplayUI;
   /** update UI (theme, language, etc.) */
-  update(props?: Omit<ReplayFastboardProps, "player">): void;
+  update(props?: ReplayFastboardProps): void;
   /** remove UI */
   destroy(): void;
 }
@@ -62,18 +62,18 @@ export interface ReplayUI {
  * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
  * ui.update({ theme: "dark" })
  */
-export function createReplayUI(player: FastboardPlayer, div?: Element): ReplayUI {
+export function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI {
   let fastboard: ReplayFastboard | undefined;
 
   const ui: ReplayUI = {
-    mount(div: Element, props?: Omit<ReplayFastboardProps, "player">) {
+    mount(div: Element, props?: ReplayFastboardProps) {
       if (fastboard) {
         fastboard.$destroy();
       }
       fastboard = new ReplayFastboard({ target: div, props: { player, ...props } });
       return ui;
     },
-    update(props?: Omit<ReplayFastboardProps, "player">) {
+    update(props?: ReplayFastboardProps) {
       if (fastboard) {
         fastboard.$set(props);
       }
@@ -87,7 +87,7 @@ export function createReplayUI(player: FastboardPlayer, div?: Element): ReplayUI
   };
 
   if (div) {
-    ui.mount(div);
+    ui.mount(div, { player });
   }
 
   return ui;

package/src/index.ts

@@ -1,3 +1,5 @@
+import "./style.scss";
+
 export * from "./typings";
 
 export { default as RedoUndo, type RedoUndoProps } from "./components/RedoUndo";
@@ -5,10 +7,12 @@ export { default as PageControl, type PageControlProps } from "./components/Page
 export { default as ZoomControl, type ZoomControlProps } from "./components/ZoomControl";
 export { default as Toolbar, type ToolbarProps } from "./components/Toolbar";
 export { default as PlayerControl, type PlayerControlProps } from "./components/PlayerControl";
-export { Fastboard, ReplayFastboard } from "./components/Fastboard";
-export type { FastboardProps, ReplayFastboardProps } from "./components/Fastboard";
+export {
+  Fastboard,
+  ReplayFastboard,
+  type FastboardProps,
+  type ReplayFastboardProps,
+} from "./components/Fastboard";
 
 export * from "./helpers";
 export * from "./behaviors";
-
-import "./style.scss";

package/src/style.scss

@@ -34,3 +34,7 @@
     padding: 8px;
   }
 }
+
+.netless-whiteboard:focus-visible {
+  outline: none;
+}