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

types.ts 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import React from "react"
  2. export interface Data {
  3. camera: {
  4. point: number[]
  5. zoom: number
  6. }
  7. brush?: Bounds
  8. currentPageId: string
  9. selectedIds: Set<string>
  10. pointedId?: string
  11. document: {
  12. pages: Record<string, Page>
  13. }
  14. }
  15. export interface Page {
  16. id: string
  17. type: "page"
  18. childIndex: number
  19. name: string
  20. shapes: Record<string, Shape>
  21. }
  22. export enum ShapeType {
  23. Dot = "dot",
  24. Circle = "circle",
  25. Ellipse = "ellipse",
  26. Line = "line",
  27. Ray = "ray",
  28. Polyline = "polyline",
  29. Rectangle = "rectangle",
  30. // Glob = "glob",
  31. // Spline = "spline",
  32. // Cubic = "cubic",
  33. // Conic = "conic",
  34. }
  35. export interface BaseShape {
  36. id: string
  37. type: ShapeType
  38. parentId: string
  39. childIndex: number
  40. name: string
  41. point: number[]
  42. rotation: 0
  43. style: Partial<React.SVGProps<SVGUseElement>>
  44. }
  45. export interface DotShape extends BaseShape {
  46. type: ShapeType.Dot
  47. }
  48. export interface CircleShape extends BaseShape {
  49. type: ShapeType.Circle
  50. radius: number
  51. }
  52. export interface EllipseShape extends BaseShape {
  53. type: ShapeType.Ellipse
  54. radiusX: number
  55. radiusY: number
  56. }
  57. export interface LineShape extends BaseShape {
  58. type: ShapeType.Line
  59. vector: number[]
  60. }
  61. export interface RayShape extends BaseShape {
  62. type: ShapeType.Ray
  63. vector: number[]
  64. }
  65. export interface PolylineShape extends BaseShape {
  66. type: ShapeType.Polyline
  67. points: number[][]
  68. }
  69. export interface RectangleShape extends BaseShape {
  70. type: ShapeType.Rectangle
  71. size: number[]
  72. }
  73. export type Shape =
  74. | DotShape
  75. | CircleShape
  76. | EllipseShape
  77. | LineShape
  78. | RayShape
  79. | PolylineShape
  80. | RectangleShape
  81. export interface Bounds {
  82. minX: number
  83. minY: number
  84. maxX: number
  85. maxY: number
  86. width: number
  87. height: number
  88. }
  89. export interface Shapes extends Record<ShapeType, Shape> {
  90. [ShapeType.Dot]: DotShape
  91. [ShapeType.Circle]: CircleShape
  92. [ShapeType.Ellipse]: EllipseShape
  93. [ShapeType.Line]: LineShape
  94. [ShapeType.Ray]: RayShape
  95. [ShapeType.Polyline]: PolylineShape
  96. [ShapeType.Rectangle]: RectangleShape
  97. }
  98. export type Difference<A, B> = A extends B ? never : A
  99. export type ShapeSpecificProps<T extends Shape> = Pick<
  100. T,
  101. Difference<keyof T, keyof BaseShape>
  102. >
  103. export type ShapeIndicatorProps<T extends Shape> = ShapeSpecificProps<T>
  104. export type BaseLibShape<K extends ShapeType> = {
  105. create(props: Partial<Shapes[K]>): Shapes[K]
  106. getBounds(shape: Shapes[K]): Bounds
  107. hitTest(shape: Shapes[K], test: number[]): boolean
  108. rotate(shape: Shapes[K]): Shapes[K]
  109. translate(shape: Shapes[K]): Shapes[K]
  110. scale(shape: Shapes[K], scale: number): Shapes[K]
  111. stretch(shape: Shapes[K], scaleX: number, scaleY: number): Shapes[K]
  112. render(shape: Shapes[K]): JSX.Element
  113. }