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.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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. shouldRender(shape, prev) {
  34. return shape.direction !== prev.direction || shape.style !== prev.style
  35. },
  36. render({ id, direction }) {
  37. const [x2, y2] = vec.add([0, 0], vec.mul(direction, 10000))
  38. return (
  39. <g id={id}>
  40. <ThinLine x1={0} y1={0} x2={x2} y2={y2} />
  41. <use href="#dot" />
  42. </g>
  43. )
  44. },
  45. getRotatedBounds(shape) {
  46. return this.getBounds(shape)
  47. },
  48. getBounds(shape) {
  49. if (!this.boundsCache.has(shape)) {
  50. const bounds = {
  51. minX: 0,
  52. maxX: 1,
  53. minY: 0,
  54. maxY: 1,
  55. width: 1,
  56. height: 1,
  57. }
  58. this.boundsCache.set(shape, bounds)
  59. }
  60. return translateBounds(this.boundsCache.get(shape), shape.point)
  61. },
  62. getCenter(shape) {
  63. return shape.point
  64. },
  65. hitTest() {
  66. return true
  67. },
  68. hitTestBounds(this, shape, brushBounds) {
  69. const shapeBounds = this.getBounds(shape)
  70. return (
  71. boundsContained(shapeBounds, brushBounds) ||
  72. intersectCircleBounds(shape.point, 4, brushBounds).length > 0
  73. )
  74. },
  75. transform(shape, bounds) {
  76. shape.point = [bounds.minX, bounds.minY]
  77. return this
  78. },
  79. transformSingle(shape, bounds, info) {
  80. return this.transform(shape, bounds, info)
  81. },
  82. canTransform: false,
  83. canChangeAspectRatio: false,
  84. canStyleFill: false,
  85. })
  86. export default ray