Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

ray.tsx 2.1KB

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