您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.tsx 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import {
  2. Bounds,
  3. BoundsSnapshot,
  4. Shape,
  5. Shapes,
  6. ShapeType,
  7. Corner,
  8. Edge,
  9. ShapeByType,
  10. ShapeStyles,
  11. } from "types"
  12. import circle from "./circle"
  13. import dot from "./dot"
  14. import polyline from "./polyline"
  15. import rectangle from "./rectangle"
  16. import ellipse from "./ellipse"
  17. import line from "./line"
  18. import ray from "./ray"
  19. import draw from "./draw"
  20. /*
  21. Shape Utiliies
  22. A shape utility is an object containing utility methods for each type of shape
  23. in the application. While shapes may be very different, each shape must support
  24. a common set of utility methods, such as hit tests or translations, that
  25. Operations throughout the app will call these utility methods
  26. when performing tests (such as hit tests) or mutations, such as translations.
  27. */
  28. export interface ShapeUtility<K extends Readonly<Shape>> {
  29. // A cache for the computed bounds of this kind of shape.
  30. boundsCache: WeakMap<K, Bounds>
  31. // Whether to show transform controls when this shape is selected.
  32. canTransform: boolean
  33. // Whether the shape's aspect ratio can change
  34. canChangeAspectRatio: boolean
  35. // Create a new shape.
  36. create(props: Partial<K>): K
  37. applyStyles(
  38. this: ShapeUtility<K>,
  39. shape: K,
  40. style: ShapeStyles
  41. ): ShapeUtility<K>
  42. // Set the shape's point.
  43. translateTo(this: ShapeUtility<K>, shape: K, delta: number[]): ShapeUtility<K>
  44. // Set the shape's rotation.
  45. rotateTo(this: ShapeUtility<K>, shape: K, rotation: number): ShapeUtility<K>
  46. // Transform to fit a new bounding box when more than one shape is selected.
  47. transform(
  48. this: ShapeUtility<K>,
  49. shape: K,
  50. bounds: Bounds,
  51. info: {
  52. type: Edge | Corner
  53. initialShape: K
  54. scaleX: number
  55. scaleY: number
  56. transformOrigin: number[]
  57. }
  58. ): ShapeUtility<K>
  59. // Transform a single shape to fit a new bounding box.
  60. transformSingle(
  61. this: ShapeUtility<K>,
  62. shape: K,
  63. bounds: Bounds,
  64. info: {
  65. type: Edge | Corner
  66. initialShape: K
  67. scaleX: number
  68. scaleY: number
  69. transformOrigin: number[]
  70. }
  71. ): ShapeUtility<K>
  72. // Move a shape to a new parent.
  73. setParent(this: ShapeUtility<K>, shape: K, parentId: string): ShapeUtility<K>
  74. // Change the child index of a shape
  75. setChildIndex(
  76. this: ShapeUtility<K>,
  77. shape: K,
  78. childIndex: number
  79. ): ShapeUtility<K>
  80. // Add a point
  81. setPoints?(
  82. this: ShapeUtility<K>,
  83. shape: K,
  84. points: number[][]
  85. ): ShapeUtility<K>
  86. // Render a shape to JSX.
  87. render(this: ShapeUtility<K>, shape: K): JSX.Element
  88. // Get the bounds of the a shape.
  89. getBounds(this: ShapeUtility<K>, shape: K): Bounds
  90. // Get the routated bounds of the a shape.
  91. getRotatedBounds(this: ShapeUtility<K>, shape: K): Bounds
  92. // Get the center of the shape
  93. getCenter(this: ShapeUtility<K>, shape: K): number[]
  94. // Test whether a point lies within a shape.
  95. hitTest(this: ShapeUtility<K>, shape: K, test: number[]): boolean
  96. // Test whether bounds collide with or contain a shape.
  97. hitTestBounds(this: ShapeUtility<K>, shape: K, bounds: Bounds): boolean
  98. }
  99. // A mapping of shape types to shape utilities.
  100. const shapeUtilityMap: Record<ShapeType, ShapeUtility<Shape>> = {
  101. [ShapeType.Circle]: circle,
  102. [ShapeType.Dot]: dot,
  103. [ShapeType.Polyline]: polyline,
  104. [ShapeType.Rectangle]: rectangle,
  105. [ShapeType.Ellipse]: ellipse,
  106. [ShapeType.Line]: line,
  107. [ShapeType.Ray]: ray,
  108. [ShapeType.Draw]: draw,
  109. }
  110. /**
  111. * A helper to retrieve a shape utility based on a shape object.
  112. * @param shape
  113. * @returns
  114. */
  115. export function getShapeUtils<T extends Shape>(shape: T): ShapeUtility<T> {
  116. return shapeUtilityMap[shape.type] as ShapeUtility<T>
  117. }
  118. /**
  119. * A factory of shape utilities, with typing enforced.
  120. * @param shape
  121. * @returns
  122. */
  123. export function registerShapeUtils<T extends Shape>(
  124. shape: ShapeUtility<T>
  125. ): ShapeUtility<T> {
  126. return Object.freeze(shape)
  127. }
  128. export function createShape<T extends Shape>(
  129. type: T["type"],
  130. props: Partial<T>
  131. ) {
  132. return shapeUtilityMap[type].create(props) as T
  133. }
  134. export default shapeUtilityMap