useCommonOperate.ts 2.4 KB

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