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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. import { uniqueId } from 'utils/utils'
  2. import vec from 'utils/vec'
  3. import { CircleShape, ShapeType } from 'types'
  4. import { boundsContained } from 'utils/bounds'
  5. import { intersectCircleBounds } from 'utils/intersections'
  6. import { pointInCircle } from 'utils/hitTests'
  7. import { translateBounds } from 'utils/utils'
  8. import { defaultStyle, getShapeStyle } from 'state/shape-styles'
  9. import { registerShapeUtils } from './register'
  10. const circle = registerShapeUtils<CircleShape>({
  11. boundsCache: new WeakMap([]),
  12. create(props) {
  13. return {
  14. id: uniqueId(),
  15. seed: Math.random(),
  16. type: ShapeType.Circle,
  17. isGenerated: false,
  18. name: 'Circle',
  19. parentId: 'page1',
  20. childIndex: 0,
  21. point: [0, 0],
  22. rotation: 0,
  23. radius: 1,
  24. isAspectRatioLocked: false,
  25. isLocked: false,
  26. isHidden: false,
  27. style: defaultStyle,
  28. ...props,
  29. }
  30. },
  31. render({ id, radius, style }) {
  32. const styles = getShapeStyle(style)
  33. return (
  34. <circle
  35. id={id}
  36. cx={radius}
  37. cy={radius}
  38. r={Math.max(0, radius - Number(styles.strokeWidth) / 2)}
  39. />
  40. )
  41. },
  42. getBounds(shape) {
  43. if (!this.boundsCache.has(shape)) {
  44. const { radius } = shape
  45. const bounds = {
  46. minX: 0,
  47. maxX: radius * 2,
  48. minY: 0,
  49. maxY: radius * 2,
  50. width: radius * 2,
  51. height: radius * 2,
  52. }
  53. this.boundsCache.set(shape, bounds)
  54. }
  55. return translateBounds(this.boundsCache.get(shape), shape.point)
  56. },
  57. getRotatedBounds(shape) {
  58. return this.getBounds(shape)
  59. },
  60. getCenter(shape) {
  61. return [shape.point[0] + shape.radius, shape.point[1] + shape.radius]
  62. },
  63. hitTest(shape, point) {
  64. return pointInCircle(
  65. point,
  66. vec.addScalar(shape.point, shape.radius),
  67. shape.radius
  68. )
  69. },
  70. hitTestBounds(shape, bounds) {
  71. const shapeBounds = this.getBounds(shape)
  72. return (
  73. boundsContained(shapeBounds, bounds) ||
  74. intersectCircleBounds(
  75. vec.addScalar(shape.point, shape.radius),
  76. shape.radius,
  77. bounds
  78. ).length > 0
  79. )
  80. },
  81. transform(shape, bounds, { initialShape, transformOrigin, scaleX, scaleY }) {
  82. shape.radius =
  83. initialShape.radius * Math.min(Math.abs(scaleX), Math.abs(scaleY))
  84. shape.point = [
  85. bounds.minX +
  86. (bounds.width - shape.radius * 2) *
  87. (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),
  88. bounds.minY +
  89. (bounds.height - shape.radius * 2) *
  90. (scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),
  91. ]
  92. return this
  93. },
  94. transformSingle(shape, bounds) {
  95. shape.radius = Math.min(bounds.width, bounds.height) / 2
  96. shape.point = [bounds.minX, bounds.minY]
  97. return this
  98. },
  99. canChangeAspectRatio: false,
  100. })
  101. export default circle