refactor: use re-resizeable

packages/client/package.json

@@ -59,7 +59,6 @@
     "copy-to-clipboard": "^3.3.1",
     "deep-equal": "^2.0.5",
     "dompurify": "^2.3.5",
-    "interactjs": "^1.10.11",
     "katex": "^0.15.2",
     "kity": "^2.0.4",
     "lib0": "^0.2.47",
@@ -75,6 +74,7 @@
     "prosemirror-tables": "^1.1.1",
     "prosemirror-utils": "^0.9.6",
     "prosemirror-view": "^1.23.6",
+    "re-resizable": "^6.9.9",
     "react": "17.0.2",
     "react-countdown": "^2.3.2",
     "react-dom": "17.0.2",

packages/client/src/components/resizeable/resizeable.tsx

@@ -1,9 +1,9 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useCallback, useState } from 'react';
 import cls from 'classnames';
-import { useClickOutside } from 'hooks/use-click-outside';
-import interact from 'interactjs';
 import styles from './style.module.scss';
 
+import { Resizable } from 're-resizable';
+
 interface IProps {
   width: number;
   height: number;
@@ -15,71 +15,37 @@ interface IProps {
 const MIN_WIDTH = 50;
 const MIN_HEIGHT = 50;
 
-export const Resizeable: React.FC<IProps> = ({ width, height, className, onChange, onChangeEnd, children }) => {
-  const $container = useRef<HTMLDivElement>(null);
-  const $topLeft = useRef<HTMLDivElement>(null);
-  const $topRight = useRef<HTMLDivElement>(null);
-  const $bottomLeft = useRef<HTMLDivElement>(null);
-  const $bottomRight = useRef<HTMLDivElement>(null);
+export const Resizeable: React.FC<IProps> = ({
+  width: defaultWidth,
+  height: defaultHeight,
+  className,
+  onChange,
+  onChangeEnd,
+  children,
+}) => {
+  const [width, setWidth] = useState(defaultWidth);
+  const [height, setHeight] = useState(defaultHeight);
 
-  useClickOutside($container, {
-    in: () => $container.current.classList.add(styles.isActive),
-    out: () => $container.current.classList.remove(styles.isActive),
-  });
-
-  useEffect(() => {
-    interact($container.current).resizable({
-      edges: {
-        top: true,
-        right: true,
-        bottom: true,
-        left: true,
+  const onResizeStop = useCallback(
+    (e, direction, ref, d) => {
+      const nextWidth = width + d.width;
+      const nextHeight = height + d.height;
+      setWidth(nextWidth);
+      setHeight(nextHeight);
+      onChangeEnd({ width: nextWidth, height: nextHeight });
     },
-      listeners: {
-        move: function (event) {
-          let { x, y } = event.target.dataset;
-          x = (parseFloat(x) || 0) + event.deltaRect.left;
-          y = (parseFloat(y) || 0) + event.deltaRect.top;
-
-          let { width, height } = event.rect;
-          width = width < MIN_WIDTH ? MIN_WIDTH : width;
-          height = height < MIN_HEIGHT ? MIN_HEIGHT : height;
-
-          Object.assign(event.target.style, {
-            width: `${width}px`,
-            height: `${height}px`,
-            // transform: `translate(${x}px, ${y}px)`,
-          });
-          Object.assign(event.target.dataset, { x, y });
-          onChange && onChange({ width, height });
-        },
-        end: function (event) {
-          let { width, height } = event.rect;
-          onChangeEnd && onChangeEnd({ width, height });
-        },
-      },
-    });
-  }, []);
-
-  useEffect(() => {
-    Object.assign($container.current.style, {
-      width: `${width}px`,
-      height: `${height}px`,
-    });
-  }, [width, height]);
+    [width, height]
+  );
 
   return (
-    <div
-      id="js-resizeable-container"
+    <Resizable
+      size={{ width, height }}
       className={cls(className, styles.resizable)}
-      ref={$container}
-      style={{ width, height }}
+      minWidth={MIN_WIDTH}
+      minHeight={MIN_HEIGHT}
+      onResizeStop={onResizeStop}
     >
-      <span className={styles.resizer + ' ' + styles.topLeft} ref={$topLeft} data-type={'topLeft'}></span>
-      <span className={styles.resizer + ' ' + styles.topRight} ref={$topRight} data-type={'topRight'}></span>
-      <span className={styles.resizer + ' ' + styles.bottomLeft} ref={$bottomLeft} data-type={'bottomLeft'}></span>
-      <span className={styles.resizer + ' ' + styles.bottomRight} ref={$bottomRight} data-type={'bottomRight'}></span>
       {children}
-    </div>
+    </Resizable>
   );
 };

packages/client/src/components/resizeable/style.module.scss

@@ -4,47 +4,8 @@
   width: 100px;
   height: 100px;
   max-width: 100%;
-  box-sizing: border-box;
-
-  .resizer {
-    position: absolute;
-    z-index: 9999;
-    width: 10px;
-    height: 10px;
-    background: white;
-    border: 3px solid #4286f4;
-    border-radius: 50%;
-    opacity: 0;
-    box-sizing: border-box;
-  }
-
-  .resizer.topLeft {
-    top: -5px;
-    left: -5px;
-    cursor: nwse-resize;
-  }
-
-  .resizer.topRight {
-    top: -5px;
-    right: -5px;
-    cursor: nesw-resize;
-  }
-
-  .resizer.bottomLeft {
-    bottom: -5px;
-    left: -5px;
-    cursor: nesw-resize;
-  }
-
-  .resizer.bottomRight {
-    right: -5px;
-    bottom: -5px;
-    cursor: nwse-resize;
-  }
 
   &.isActive {
-    outline: 1px solid #4286f4;
-
     .resizer {
       opacity: 1;
     }

pnpm-lock.yaml

@@ -89,7 +89,6 @@ importers:
       copy-to-clipboard: ^3.3.1
       deep-equal: ^2.0.5
       dompurify: ^2.3.5
-      interactjs: ^1.10.11
       katex: ^0.15.2
       kity: ^2.0.4
       lib0: ^0.2.47
@@ -105,6 +104,7 @@ importers:
       prosemirror-tables: ^1.1.1
       prosemirror-utils: ^0.9.6
       prosemirror-view: ^1.23.6
+      re-resizable: ^6.9.9
       react: 17.0.2
       react-countdown: ^2.3.2
       react-dom: 17.0.2
@@ -172,7 +172,6 @@ importers:
       copy-to-clipboard: 3.3.1
       deep-equal: 2.0.5
       dompurify: 2.3.5
-      interactjs: 1.10.11
       katex: 0.15.2
       kity: 2.0.4
       lib0: 0.2.47
@@ -188,6 +187,7 @@ importers:
       prosemirror-tables: 1.1.1
       prosemirror-utils: 0.9.6_prosemirror-tables@1.1.1
       prosemirror-view: 1.23.6
+      re-resizable: 6.9.9_react-dom@17.0.2+react@17.0.2
       react: 17.0.2
       react-countdown: 2.3.2_react-dom@17.0.2+react@17.0.2
       react-dom: 17.0.2_react@17.0.2
@@ -955,10 +955,6 @@ packages:
       - y-protocols
     dev: false
 
-  /@interactjs/types/1.10.11:
-    resolution: {integrity: sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA==}
-    dev: false
-
   /@ioredis/commands/1.1.1:
     resolution: {integrity: sha512-fsR4P/ROllzf/7lXYyElUJCheWdTJVJvOTps8v9IWKFATxR61ANOlnoPqhH099xYLrJGpc2ZQ28B3rMeUt5VQg==}
     dev: false
@@ -4468,12 +4464,6 @@ packages:
       through: 2.3.8
     dev: true
 
-  /interactjs/1.10.11:
-    resolution: {integrity: sha512-VPUWsGAOPmrZe1YF7Fq/4AIBBZ+3FikZRS8bpzT6VsAfUuhxl/CKJY73IAiZHd3fz9p174CXErn0Qs81XEFICA==}
-    dependencies:
-      '@interactjs/types': 1.10.11
-    dev: false
-
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
     engines: {node: '>= 0.4'}
@@ -6707,6 +6697,16 @@ packages:
       unpipe: 1.0.0
     dev: false
 
+  /re-resizable/6.9.9_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==}
+    peerDependencies:
+      react: ^16.13.1 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
   /react-countdown/2.3.2_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==}
     peerDependencies: