feat(board): initialize board by useMemo

packages/react-board/src/board.tsx

@@ -34,7 +34,7 @@ import {
   type PlaitChildrenContext
 } from '@plait/core';
 import type { BoardChangeData } from './plugins/board';
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect, useState, useMemo } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import useBoardPluginEvent from './hooks/use-plugin-event';
@@ -62,9 +62,10 @@ export const Board: React.FC<BoardProps> = (props: BoardProps) => {
   const viewportContainerRef = useRef<HTMLDivElement>(null);
   const boardContainerRef = useRef<HTMLDivElement>(null);
 
-  const [board, setBoard] = useState<PlaitBoard>(
-    initializeBoard(props.value, props.options, props.plugins)
-  );
+  const board = useMemo(() => {
+    return initializeBoard(props.value, props.options, props.plugins);
+  }, []);
+
   const [boardClassName, setBoardClassName] = useState<string>(
     getBoardClassName(board)
   );
@@ -101,7 +102,6 @@ export const Board: React.FC<BoardProps> = (props: BoardProps) => {
     });
     const context = new PlaitBoardContext();
     BOARD_TO_CONTEXT.set(board, context);
-    setBoard(board);
 
     initializeViewportContainer(board);
     initializeViewBox(board);
@@ -125,8 +125,8 @@ export const Board: React.FC<BoardProps> = (props: BoardProps) => {
     };
   }, []);
 
-  useBoardPluginEvent({ board, hostRef });
-  useBoardEvent({ board, hostRef });
+  useBoardPluginEvent(board, hostRef);
+  useBoardEvent(board, hostRef);
 
   return (
     <div className={boardClassName} ref={boardContainerRef}>
@@ -204,6 +204,7 @@ const getBoardClassName = (board: PlaitBoard) => {
   return classNames(
     HOST_CLASS_NAME,
     `${getBrowserClassName()}`,
+    `pointer-${board.pointer}`,
     `theme-${board.theme?.themeColorMode}`,
     {
       focused: PlaitBoard.isFocus(board),

packages/react-board/src/hooks/use-board-event.ts

@@ -12,21 +12,21 @@ import {
 import { useEffect } from 'react';
 import { useEventListener } from 'ahooks';
 
-const useBoardEvent = (props: {
-  board: PlaitBoard;
-  hostRef: React.RefObject<SVGSVGElement>;
-}) => {
+const useBoardEvent = (
+  board: PlaitBoard,
+  hostRef: React.RefObject<SVGSVGElement>
+) => {
   useEventListener(
     'scroll',
     (event) => {
-      if (isFromViewportChange(props.board)) {
-        setIsFromViewportChange(props.board, false);
+      if (isFromViewportChange(board)) {
+        setIsFromViewportChange(board, false);
       } else {
         const { scrollLeft, scrollTop } = event.target as HTMLElement;
-        updateViewportByScrolling(props.board, scrollLeft, scrollTop);
+        updateViewportByScrolling(board, scrollLeft, scrollTop);
       }
     },
-    { target: PlaitBoard.getViewportContainer(props.board) }
+    { target: PlaitBoard.getViewportContainer(board) }
   );
 
   useEventListener(
@@ -37,7 +37,7 @@ const useBoardEvent = (props: {
       if (event.metaKey || event.ctrlKey) {
         event.preventDefault();
         const { deltaX, deltaY } = event;
-        const zoom = props.board.viewport.zoom;
+        const zoom = board.viewport.zoom;
         const sign = Math.sign(deltaY);
         const MAX_STEP = ZOOM_STEP * 100;
         const absDelta = Math.abs(deltaY);
@@ -52,26 +52,23 @@ const useBoardEvent = (props: {
           -sign *
           // reduced amplification for small deltas (small movements on a trackpad)
           Math.min(1, absDelta / 20);
-        BoardTransforms.updateZoom(props.board, newZoom, false);
+        BoardTransforms.updateZoom(board, newZoom, false);
       }
     },
-    { target: PlaitBoard.getViewportContainer(props.board), passive: false }
+    { target: PlaitBoard.getViewportContainer(board), passive: false }
   );
 
   useEffect(() => {
-    if (!PlaitBoard.getBoardContainer(props.board)) {
-      return;
-    }
     const resizeObserver = new ResizeObserver(() => {
-      initializeViewportContainer(props.board);
-      initializeViewBox(props.board);
-      updateViewportOffset(props.board);
+      initializeViewportContainer(board);
+      initializeViewBox(board);
+      updateViewportOffset(board);
     });
-    resizeObserver.observe(PlaitBoard.getBoardContainer(props.board));
+    resizeObserver.observe(PlaitBoard.getBoardContainer(board));
     return () => {
       resizeObserver && resizeObserver.disconnect();
     };
-  }, [props.board]);
+  }, []);
 };
 
 export default useBoardEvent;

packages/react-board/src/hooks/use-plugin-event.tsx

@@ -12,12 +12,10 @@ import {
 } from '@plait/core';
 import { useEventListener } from 'ahooks';
 
-const useBoardPluginEvent = (props: {
-  board: PlaitBoard;
-  hostRef: React.RefObject<SVGSVGElement>;
-}) => {
-  const { board, hostRef } = props;
-
+const useBoardPluginEvent = (
+  board: PlaitBoard,
+  hostRef: React.RefObject<SVGSVGElement>
+) => {
   useEventListener(
     'mousedown',
     (event) => {