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.

ellipse.tsx 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import { v4 as uuid } from "uuid"
  2. import * as vec from "utils/vec"
  3. import { EllipseShape, ShapeType } from "types"
  4. import { registerShapeUtils } from "./index"
  5. import { boundsContained, getRotatedEllipseBounds } from "utils/bounds"
  6. import { intersectEllipseBounds } from "utils/intersections"
  7. import { pointInEllipse } from "utils/hitTests"
  8. import {
  9. getBoundsFromPoints,
  10. getRotatedCorners,
  11. rotateBounds,
  12. translateBounds,
  13. } from "utils/utils"
  14. const ellipse = registerShapeUtils<EllipseShape>({
  15. boundsCache: new WeakMap([]),
  16. create(props) {
  17. return {
  18. id: uuid(),
  19. type: ShapeType.Ellipse,
  20. isGenerated: false,
  21. name: "Ellipse",
  22. parentId: "page0",
  23. childIndex: 0,
  24. point: [0, 0],
  25. radiusX: 20,
  26. radiusY: 20,
  27. rotation: 0,
  28. style: {
  29. fill: "#c6cacb",
  30. stroke: "#000",
  31. },
  32. ...props,
  33. }
  34. },
  35. render({ id, radiusX, radiusY }) {
  36. return (
  37. <ellipse id={id} cx={radiusX} cy={radiusY} rx={radiusX} ry={radiusY} />
  38. )
  39. },
  40. getBounds(shape) {
  41. if (!this.boundsCache.has(shape)) {
  42. const { radiusX, radiusY } = shape
  43. const bounds = {
  44. minX: 0,
  45. minY: 0,
  46. maxX: radiusX * 2,
  47. maxY: radiusY * 2,
  48. width: radiusX * 2,
  49. height: radiusY * 2,
  50. }
  51. this.boundsCache.set(shape, bounds)
  52. }
  53. return translateBounds(this.boundsCache.get(shape), shape.point)
  54. },
  55. getRotatedBounds(shape) {
  56. return getRotatedEllipseBounds(
  57. shape.point[0],
  58. shape.point[1],
  59. shape.radiusX,
  60. shape.radiusY,
  61. shape.rotation
  62. )
  63. },
  64. getCenter(shape) {
  65. return [shape.point[0] + shape.radiusX, shape.point[1] + shape.radiusY]
  66. },
  67. hitTest(shape, point) {
  68. return pointInEllipse(
  69. point,
  70. vec.add(shape.point, [shape.radiusX, shape.radiusY]),
  71. shape.radiusX,
  72. shape.radiusY,
  73. shape.rotation
  74. )
  75. },
  76. hitTestBounds(this, shape, brushBounds) {
  77. const shapeBounds = this.getBounds(shape)
  78. return (
  79. boundsContained(shapeBounds, brushBounds) ||
  80. intersectEllipseBounds(
  81. vec.add(shape.point, [shape.radiusX, shape.radiusY]),
  82. shape.radiusX,
  83. shape.radiusY,
  84. brushBounds,
  85. shape.rotation
  86. ).length > 0
  87. )
  88. },
  89. rotate(shape) {
  90. return shape
  91. },
  92. translate(shape, delta) {
  93. shape.point = vec.add(shape.point, delta)
  94. return shape
  95. },
  96. scale(shape, scale: number) {
  97. return shape
  98. },
  99. transform(shape, bounds, { scaleX, scaleY, initialShape }) {
  100. shape.point = [bounds.minX, bounds.minY]
  101. shape.radiusX = bounds.width / 2
  102. shape.radiusY = bounds.height / 2
  103. shape.rotation =
  104. (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)
  105. ? -initialShape.rotation
  106. : initialShape.rotation
  107. return shape
  108. },
  109. transformSingle(shape, bounds, info) {
  110. return this.transform(shape, bounds, info)
  111. },
  112. canTransform: true,
  113. canChangeAspectRatio: true,
  114. })
  115. export default ellipse