shapes.tsx 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import React from "react";
  2. // We inline font-awesome icons in order to save on js size rather than including the font awesome react library
  3. export const SHAPES = [
  4. {
  5. icon: (
  6. // fa-mouse-pointer
  7. <svg viewBox="0 0 320 512" className="">
  8. <path d="M302.189 329.126H196.105l55.831 135.993c3.889 9.428-.555 19.999-9.444 23.999l-49.165 21.427c-9.165 4-19.443-.571-23.332-9.714l-53.053-129.136-86.664 89.138C18.729 472.71 0 463.554 0 447.977V18.299C0 1.899 19.921-6.096 30.277 5.443l284.412 292.542c11.472 11.179 3.007 31.141-12.5 31.141z" />
  9. </svg>
  10. ),
  11. value: "selection",
  12. },
  13. {
  14. icon: (
  15. // fa-square
  16. <svg viewBox="0 0 448 512">
  17. <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" />
  18. </svg>
  19. ),
  20. value: "rectangle",
  21. },
  22. {
  23. icon: (
  24. // custom
  25. <svg viewBox="0 0 223.646 223.646">
  26. <path d="M111.823 0L16.622 111.823 111.823 223.646 207.025 111.823z" />
  27. </svg>
  28. ),
  29. value: "diamond",
  30. },
  31. {
  32. icon: (
  33. // fa-circle
  34. <svg viewBox="0 0 512 512">
  35. <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
  36. </svg>
  37. ),
  38. value: "ellipse",
  39. },
  40. {
  41. icon: (
  42. // fa-long-arrow-alt-right
  43. <svg viewBox="0 0 448 512" className="rtl-mirror">
  44. <path d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z" />
  45. </svg>
  46. ),
  47. value: "arrow",
  48. },
  49. {
  50. icon: (
  51. // custom
  52. <svg viewBox="0 0 6 6">
  53. <line x1="0" y1="3" x2="6" y2="3" stroke="#000" strokeLinecap="round" />
  54. </svg>
  55. ),
  56. value: "line",
  57. },
  58. {
  59. icon: (
  60. // fa-font
  61. <svg viewBox="0 0 448 512">
  62. <path d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z" />
  63. </svg>
  64. ),
  65. value: "text",
  66. },
  67. ] as const;
  68. export const shapesShortcutKeys = SHAPES.map((shape, index) => [
  69. shape.value[0],
  70. (index + 1).toString(),
  71. ]).flat(1);
  72. export function findShapeByKey(key: string) {
  73. return (
  74. SHAPES.find((shape, index) => {
  75. return shape.value[0] === key || key === (index + 1).toString();
  76. })?.value || "selection"
  77. );
  78. }