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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { getFromCache, uniqueId } from 'utils/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, getShapeStyle } from 'state/shape-styles'
  8. import { registerShapeUtils } from './register'
  9. const ray = registerShapeUtils<RayShape>({
  10. boundsCache: new WeakMap([]),
  11. defaultProps: {
  12. id: uniqueId(),
  13. type: ShapeType.Ray,
  14. name: 'Ray',
  15. parentId: 'page1',
  16. childIndex: 0,
  17. point: [0, 0],
  18. direction: [0, 1],
  19. rotation: 0,
  20. style: defaultStyle,
  21. },
  22. shouldRender(shape, prev) {
  23. return shape.direction !== prev.direction || shape.style !== prev.style
  24. },
  25. render(shape, { isDarkMode }) {
  26. const { direction } = shape
  27. const styles = getShapeStyle(shape.style, isDarkMode)
  28. const [x2, y2] = vec.add([0, 0], vec.mul(direction, 10000))
  29. return (
  30. <>
  31. <ThinLine x1={0} y1={0} x2={x2} y2={y2} stroke={styles.stroke} />
  32. <circle r={4} fill="transparent" />
  33. <use href="#dot" />
  34. </>
  35. )
  36. },
  37. getRotatedBounds(shape) {
  38. return this.getBounds(shape)
  39. },
  40. getBounds(shape) {
  41. const bounds = getFromCache(this.boundsCache, shape, (cache) => {
  42. cache.set(shape, {
  43. minX: 0,
  44. maxX: 1,
  45. minY: 0,
  46. maxY: 1,
  47. width: 1,
  48. height: 1,
  49. })
  50. })
  51. return translateBounds(bounds, shape.point)
  52. },
  53. getCenter(shape) {
  54. return shape.point
  55. },
  56. hitTest() {
  57. return true
  58. },
  59. hitTestBounds(this, shape, brushBounds) {
  60. const shapeBounds = this.getBounds(shape)
  61. return (
  62. boundsContained(shapeBounds, brushBounds) ||
  63. intersectCircleBounds(shape.point, 4, brushBounds).length > 0
  64. )
  65. },
  66. transform(shape, bounds) {
  67. shape.point = [bounds.minX, bounds.minY]
  68. return this
  69. },
  70. transformSingle(shape, bounds, info) {
  71. return this.transform(shape, bounds, info)
  72. },
  73. canTransform: false,
  74. canChangeAspectRatio: false,
  75. canStyleFill: false,
  76. })
  77. export default ray