refactor: use re-resizeable

This commit is contained in:
fantasticit 2022-04-27 13:01:09 +08:00
parent bcde9ce598
commit 2095cafec2
4 changed files with 42 additions and 115 deletions

View File

@ -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",

View File

@ -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,
},
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]);
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 });
},
[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>
);
};

View File

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

View File

@ -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: