選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

rectangle.tsx 3.0KB

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