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.

ray.tsx 2.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import { uniqueId } from 'utils'
  2. import vec from 'utils/vec'
  3. import { RayShape, ShapeType } from 'types'
  4. import { intersectCircleBounds } from 'utils/intersections'
  5. import { ThinLine } from 'components/canvas/misc'
  6. import { translateBounds, boundsContained } from 'utils'
  7. import { defaultStyle } from 'state/shape-styles'
  8. import { registerShapeUtils } from './register'
  9. const ray = registerShapeUtils<RayShape>({
  10. boundsCache: new WeakMap([]),
  11. create(props) {
  12. return {
  13. id: uniqueId(),
  14. type: ShapeType.Ray,
  15. isGenerated: false,
  16. name: 'Ray',
  17. parentId: 'page1',
  18. childIndex: 0,
  19. point: [0, 0],
  20. direction: [0, 1],
  21. rotation: 0,
  22. isAspectRatioLocked: false,
  23. isLocked: false,
  24. isHidden: false,
  25. ...props,
  26. style: {
  27. ...defaultStyle,
  28. ...props.style,
  29. isFilled: false,
  30. },
  31. }
  32. },
  33. render({ id, direction }) {
  34. const [x2, y2] = vec.add([0, 0], vec.mul(direction, 10000))
  35. return (
  36. <g id={id}>
  37. <ThinLine x1={0} y1={0} x2={x2} y2={y2} />
  38. <use href="#dot" />
  39. </g>
  40. )
  41. },
  42. getRotatedBounds(shape) {
  43. return this.getBounds(shape)
  44. },
  45. getBounds(shape) {
  46. if (!this.boundsCache.has(shape)) {
  47. const bounds = {
  48. minX: 0,
  49. maxX: 1,
  50. minY: 0,
  51. maxY: 1,
  52. width: 1,
  53. height: 1,
  54. }
  55. this.boundsCache.set(shape, bounds)
  56. }
  57. return translateBounds(this.boundsCache.get(shape), shape.point)
  58. },
  59. getCenter(shape) {
  60. return shape.point
  61. },
  62. hitTest() {
  63. return true
  64. },
  65. hitTestBounds(this, shape, brushBounds) {
  66. const shapeBounds = this.getBounds(shape)
  67. return (
  68. boundsContained(shapeBounds, brushBounds) ||
  69. intersectCircleBounds(shape.point, 4, brushBounds).length > 0
  70. )
  71. },
  72. transform(shape, bounds) {
  73. shape.point = [bounds.minX, bounds.minY]
  74. return this
  75. },
  76. transformSingle(shape, bounds, info) {
  77. return this.transform(shape, bounds, info)
  78. },
  79. canTransform: false,
  80. canChangeAspectRatio: false,
  81. canStyleFill: false,
  82. })
  83. export default ray