File size: 2,492 Bytes
f56a29b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import { useMemo } from 'react';
import { OperateResizeHandlers, OperateBorderLines } from '@/lib/types/edit';
export function useCommonOperate(width: number, height: number) {
// Element resize handlers
const resizeHandlers = useMemo(() => {
return [
{ direction: OperateResizeHandlers.LEFT_TOP, style: {} },
{
direction: OperateResizeHandlers.TOP,
style: { left: width / 2 + 'px' },
},
{
direction: OperateResizeHandlers.RIGHT_TOP,
style: { left: width + 'px' },
},
{
direction: OperateResizeHandlers.LEFT,
style: { top: height / 2 + 'px' },
},
{
direction: OperateResizeHandlers.RIGHT,
style: { left: width + 'px', top: height / 2 + 'px' },
},
{
direction: OperateResizeHandlers.LEFT_BOTTOM,
style: { top: height + 'px' },
},
{
direction: OperateResizeHandlers.BOTTOM,
style: { left: width / 2 + 'px', top: height + 'px' },
},
{
direction: OperateResizeHandlers.RIGHT_BOTTOM,
style: { left: width + 'px', top: height + 'px' },
},
];
}, [width, height]);
// Text element resize handlers
const textElementResizeHandlers = useMemo(() => {
return [
{
direction: OperateResizeHandlers.LEFT,
style: { top: height / 2 + 'px' },
},
{
direction: OperateResizeHandlers.RIGHT,
style: { left: width + 'px', top: height / 2 + 'px' },
},
];
}, [width, height]);
const verticalTextElementResizeHandlers = useMemo(() => {
return [
{
direction: OperateResizeHandlers.TOP,
style: { left: width / 2 + 'px' },
},
{
direction: OperateResizeHandlers.BOTTOM,
style: { left: width / 2 + 'px', top: height + 'px' },
},
];
}, [width, height]);
// Element selection border lines
const borderLines = useMemo(() => {
return [
{ type: OperateBorderLines.T, style: { width: width + 'px' } },
{
type: OperateBorderLines.B,
style: { top: height + 'px', width: width + 'px' },
},
{ type: OperateBorderLines.L, style: { height: height + 'px' } },
{
type: OperateBorderLines.R,
style: { left: width + 'px', height: height + 'px' },
},
];
}, [width, height]);
return {
resizeHandlers,
textElementResizeHandlers,
verticalTextElementResizeHandlers,
borderLines,
};
}
|