Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

circle.tsx 3.0KB

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