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 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. import {
  2. Bounds,
  3. Shape,
  4. ShapeType,
  5. Corner,
  6. Edge,
  7. ShapeStyles,
  8. ShapeBinding,
  9. Mutable,
  10. ShapeByType,
  11. } from 'types'
  12. import * as vec from 'utils/vec'
  13. import {
  14. getBoundsCenter,
  15. getBoundsFromPoints,
  16. getRotatedCorners,
  17. } from 'utils/utils'
  18. import {
  19. boundsCollidePolygon,
  20. boundsContainPolygon,
  21. pointInBounds,
  22. } from 'utils/bounds'
  23. import { v4 as uuid } from 'uuid'
  24. import circle from './circle'
  25. import dot from './dot'
  26. import polyline from './polyline'
  27. import rectangle from './rectangle'
  28. import ellipse from './ellipse'
  29. import line from './line'
  30. import ray from './ray'
  31. import draw from './draw'
  32. import arrow from './arrow'
  33. import group from './group'
  34. /*
  35. Shape Utiliies
  36. A shape utility is an object containing utility methods for each type of shape
  37. in the application. While shapes may be very different, each shape must support
  38. a common set of utility methods, such as hit tests or translations, that
  39. Operations throughout the app will call these utility methods
  40. when performing tests (such as hit tests) or mutations, such as translations.
  41. */
  42. export interface ShapeUtility<K extends Shape> {
  43. // A cache for the computed bounds of this kind of shape.
  44. boundsCache: WeakMap<K, Bounds>
  45. // Whether to show transform controls when this shape is selected.
  46. canTransform: boolean
  47. // Whether the shape's aspect ratio can change
  48. canChangeAspectRatio: boolean
  49. // Whether the shape's style can be filled
  50. canStyleFill: boolean
  51. // Create a new shape.
  52. create(props: Partial<K>): K
  53. // Update a shape's styles
  54. applyStyles(
  55. this: ShapeUtility<K>,
  56. shape: Mutable<K>,
  57. style: Partial<ShapeStyles>
  58. ): ShapeUtility<K>
  59. translateBy(
  60. this: ShapeUtility<K>,
  61. shape: Mutable<K>,
  62. point: number[]
  63. ): ShapeUtility<K>
  64. translateTo(
  65. this: ShapeUtility<K>,
  66. shape: Mutable<K>,
  67. point: number[]
  68. ): ShapeUtility<K>
  69. rotateBy(
  70. this: ShapeUtility<K>,
  71. shape: Mutable<K>,
  72. rotation: number
  73. ): ShapeUtility<K>
  74. rotateTo(
  75. this: ShapeUtility<K>,
  76. shape: Mutable<K>,
  77. rotation: number,
  78. delta: number
  79. ): ShapeUtility<K>
  80. // Transform to fit a new bounding box when more than one shape is selected.
  81. transform(
  82. this: ShapeUtility<K>,
  83. shape: Mutable<K>,
  84. bounds: Bounds,
  85. info: {
  86. type: Edge | Corner
  87. initialShape: K
  88. scaleX: number
  89. scaleY: number
  90. transformOrigin: number[]
  91. }
  92. ): ShapeUtility<K>
  93. // Transform a single shape to fit a new bounding box.
  94. transformSingle(
  95. this: ShapeUtility<K>,
  96. shape: Mutable<K>,
  97. bounds: Bounds,
  98. info: {
  99. type: Edge | Corner
  100. initialShape: K
  101. scaleX: number
  102. scaleY: number
  103. transformOrigin: number[]
  104. }
  105. ): ShapeUtility<K>
  106. setProperty<P extends keyof K>(
  107. this: ShapeUtility<K>,
  108. shape: Mutable<K>,
  109. prop: P,
  110. value: K[P]
  111. ): ShapeUtility<K>
  112. // Respond when any child of this shape changes.
  113. onChildrenChange(
  114. this: ShapeUtility<K>,
  115. shape: Mutable<K>,
  116. children: Shape[]
  117. ): ShapeUtility<K>
  118. // Respond when a user moves one of the shape's bound elements.
  119. onBindingChange(
  120. this: ShapeUtility<K>,
  121. shape: Mutable<K>,
  122. bindings: Record<string, ShapeBinding>
  123. ): ShapeUtility<K>
  124. // Respond when a user moves one of the shape's handles.
  125. onHandleChange(
  126. this: ShapeUtility<K>,
  127. shape: Mutable<K>,
  128. handle: Partial<K['handles']>
  129. ): ShapeUtility<K>
  130. // Clean up changes when a session ends.
  131. onSessionComplete(this: ShapeUtility<K>, shape: Mutable<K>): ShapeUtility<K>
  132. // Render a shape to JSX.
  133. render(this: ShapeUtility<K>, shape: K): JSX.Element
  134. // Get the bounds of the a shape.
  135. getBounds(this: ShapeUtility<K>, shape: K): Bounds
  136. // Get the routated bounds of the a shape.
  137. getRotatedBounds(this: ShapeUtility<K>, shape: K): Bounds
  138. // Get the center of the shape
  139. getCenter(this: ShapeUtility<K>, shape: K): number[]
  140. // Test whether a point lies within a shape.
  141. hitTest(this: ShapeUtility<K>, shape: K, test: number[]): boolean
  142. // Test whether bounds collide with or contain a shape.
  143. hitTestBounds(this: ShapeUtility<K>, shape: K, bounds: Bounds): boolean
  144. }
  145. // A mapping of shape types to shape utilities.
  146. const shapeUtilityMap: Record<ShapeType, ShapeUtility<Shape>> = {
  147. [ShapeType.Circle]: circle,
  148. [ShapeType.Dot]: dot,
  149. [ShapeType.Polyline]: polyline,
  150. [ShapeType.Rectangle]: rectangle,
  151. [ShapeType.Ellipse]: ellipse,
  152. [ShapeType.Line]: line,
  153. [ShapeType.Ray]: ray,
  154. [ShapeType.Draw]: draw,
  155. [ShapeType.Arrow]: arrow,
  156. [ShapeType.Text]: arrow,
  157. [ShapeType.Group]: group,
  158. }
  159. /**
  160. * A helper to retrieve a shape utility based on a shape object.
  161. * @param shape
  162. * @returns
  163. */
  164. export function getShapeUtils<T extends Shape>(shape: T): ShapeUtility<T> {
  165. return shapeUtilityMap[shape.type] as ShapeUtility<T>
  166. }
  167. function getDefaultShapeUtil<T extends Shape>(): ShapeUtility<T> {
  168. return {
  169. boundsCache: new WeakMap(),
  170. canTransform: true,
  171. canChangeAspectRatio: true,
  172. canStyleFill: true,
  173. create(props) {
  174. return {
  175. id: uuid(),
  176. isGenerated: false,
  177. point: [0, 0],
  178. name: 'Shape',
  179. parentId: 'page0',
  180. childIndex: 0,
  181. rotation: 0,
  182. isAspectRatioLocked: false,
  183. isLocked: false,
  184. isHidden: false,
  185. ...props,
  186. } as T
  187. },
  188. render(shape) {
  189. return <circle id={shape.id} />
  190. },
  191. translateBy(shape, delta) {
  192. shape.point = vec.add(shape.point, delta)
  193. return this
  194. },
  195. translateTo(shape, point) {
  196. shape.point = point
  197. return this
  198. },
  199. rotateTo(shape, rotation) {
  200. shape.rotation = rotation
  201. return this
  202. },
  203. rotateBy(shape, rotation) {
  204. shape.rotation += rotation
  205. return this
  206. },
  207. transform(shape, bounds) {
  208. shape.point = [bounds.minX, bounds.minY]
  209. return this
  210. },
  211. transformSingle(shape, bounds, info) {
  212. return this.transform(shape, bounds, info)
  213. },
  214. onChildrenChange() {
  215. return this
  216. },
  217. onBindingChange() {
  218. return this
  219. },
  220. onHandleChange() {
  221. return this
  222. },
  223. onSessionComplete() {
  224. return this
  225. },
  226. getBounds(shape) {
  227. const [x, y] = shape.point
  228. return {
  229. minX: x,
  230. minY: y,
  231. maxX: x + 1,
  232. maxY: y + 1,
  233. width: 1,
  234. height: 1,
  235. }
  236. },
  237. getRotatedBounds(shape) {
  238. return getBoundsFromPoints(
  239. getRotatedCorners(this.getBounds(shape), shape.rotation)
  240. )
  241. },
  242. getCenter(shape) {
  243. return getBoundsCenter(this.getBounds(shape))
  244. },
  245. hitTest(shape, point) {
  246. return pointInBounds(point, this.getBounds(shape))
  247. },
  248. hitTestBounds(shape, brushBounds) {
  249. const rotatedCorners = getRotatedCorners(
  250. this.getBounds(shape),
  251. shape.rotation
  252. )
  253. return (
  254. boundsContainPolygon(brushBounds, rotatedCorners) ||
  255. boundsCollidePolygon(brushBounds, rotatedCorners)
  256. )
  257. },
  258. setProperty(shape, prop, value) {
  259. shape[prop] = value
  260. return this
  261. },
  262. applyStyles(shape, style) {
  263. Object.assign(shape.style, style)
  264. return this
  265. },
  266. }
  267. }
  268. /**
  269. * A factory of shape utilities, with typing enforced.
  270. * @param shape
  271. * @returns
  272. */
  273. export function registerShapeUtils<K extends Shape>(
  274. shapeUtil: Partial<ShapeUtility<K>>
  275. ): ShapeUtility<K> {
  276. return Object.freeze({ ...getDefaultShapeUtil<K>(), ...shapeUtil })
  277. }
  278. export function createShape<T extends ShapeType>(
  279. type: T,
  280. props: Partial<ShapeByType<T>>
  281. ): ShapeByType<T> {
  282. return shapeUtilityMap[type].create(props) as ShapeByType<T>
  283. }
  284. export default shapeUtilityMap