You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.tsx 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. import {
  2. Bounds,
  3. BoundsSnapshot,
  4. Shape,
  5. Shapes,
  6. ShapeType,
  7. TransformCorner,
  8. TransformEdge,
  9. } from "types"
  10. import circle from "./circle"
  11. import dot from "./dot"
  12. import polyline from "./polyline"
  13. import rectangle from "./rectangle"
  14. import ellipse from "./ellipse"
  15. import line from "./line"
  16. import ray from "./ray"
  17. /*
  18. Shape Utiliies
  19. A shape utility is an object containing utility methods for each type of shape
  20. in the application. While shapes may be very different, each shape must support
  21. a common set of utility methods, such as hit tests or translations, that
  22. Operations throughout the app will call these utility methods
  23. when performing tests (such as hit tests) or mutations, such as translations.
  24. */
  25. export interface ShapeUtility<K extends Shape> {
  26. // A cache for the computed bounds of this kind of shape.
  27. boundsCache: WeakMap<K, Bounds>
  28. // Create a new shape.
  29. create(props: Partial<K>): K
  30. // Get the bounds of the a shape.
  31. getBounds(this: ShapeUtility<K>, shape: K): Bounds
  32. // Test whether a point lies within a shape.
  33. hitTest(this: ShapeUtility<K>, shape: K, test: number[]): boolean
  34. // Test whether bounds collide with or contain a shape.
  35. hitTestBounds(this: ShapeUtility<K>, shape: K, bounds: Bounds): boolean
  36. // Apply a rotation to a shape.
  37. rotate(this: ShapeUtility<K>, shape: K): K
  38. // Apply a translation to a shape.
  39. translate(this: ShapeUtility<K>, shape: K, delta: number[]): K
  40. // Transform to fit a new bounding box.
  41. transform(
  42. this: ShapeUtility<K>,
  43. shape: K,
  44. bounds: Bounds,
  45. info: {
  46. type: TransformEdge | TransformCorner
  47. initialShape: K
  48. initialShapeBounds: BoundsSnapshot
  49. initialBounds: Bounds
  50. isFlippedX: boolean
  51. isFlippedY: boolean
  52. anchor: TransformEdge | TransformCorner
  53. }
  54. ): K
  55. // Apply a scale to a shape.
  56. scale(this: ShapeUtility<K>, shape: K, scale: number): K
  57. // Apply a stretch to a shape.
  58. stretch(this: ShapeUtility<K>, shape: K, scaleX: number, scaleY: number): K
  59. // Render a shape to JSX.
  60. render(this: ShapeUtility<K>, shape: K): JSX.Element
  61. // Whether to show transform controls when this shape is selected.
  62. canTransform: boolean
  63. }
  64. // A mapping of shape types to shape utilities.
  65. const shapeUtilityMap: { [key in ShapeType]: ShapeUtility<Shapes[key]> } = {
  66. [ShapeType.Circle]: circle,
  67. [ShapeType.Dot]: dot,
  68. [ShapeType.Polyline]: polyline,
  69. [ShapeType.Rectangle]: rectangle,
  70. [ShapeType.Ellipse]: ellipse,
  71. [ShapeType.Line]: line,
  72. [ShapeType.Ray]: ray,
  73. }
  74. /**
  75. * A helper to retrieve a shape utility based on a shape object.
  76. * @param shape
  77. * @returns
  78. */
  79. export function getShapeUtils(shape: Shape): ShapeUtility<typeof shape> {
  80. return shapeUtilityMap[shape.type]
  81. }
  82. /**
  83. * A factory of shape utilities, with typing enforced.
  84. * @param shape
  85. * @returns
  86. */
  87. export function createShape<T extends Shape>(
  88. shape: ShapeUtility<T>
  89. ): ShapeUtility<T> {
  90. return Object.freeze(shape)
  91. }
  92. export default shapeUtilityMap