1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79

import "@figspec/components";
// This line is treated as type-only import even without the `type` keyword.
// The keyword is here to indicate the line does not triggers any side-effects.
import type { FigspecViewer as FigspecViewerElement } from "@figspec/components";
import {
  forwardRef,
  useCallback,
  useEffect,
  useImperativeHandle,
  useState,
} from "react";

type ElementProps = Pick<
  FigspecViewerElement,
  // HTML attributes
  | "id"
  | "className"
  | "style"
  // Element props
  | "nodes"
  | "renderedImage"
  // Element attributes (will be converted to kebab-case)
  | "zoomSpeed"
  | "panSpeed"
  | "zoomMargin"
>;

export interface FigspecViewerProps extends ElementProps {}

type Ref = FigspecViewerElement | null | undefined;

export const FigspecViewer = forwardRef<
  FigspecViewerElement,
  FigspecViewerProps
>(
  (
    {
      nodes,
      renderedImage,
      className,
      panSpeed,
      zoomMargin,
      zoomSpeed,
      ...rest
    },
    ref
  ) => {
    const [refNode, setNode] = useState<FigspecViewerElement | null>(null);

    useImperativeHandle<Ref, Ref>(ref, () => refNode, [refNode]);

    const refCb = useCallback((node: FigspecViewerElement | null) => {
      if (node) {
        setNode(node);

        node.nodes = nodes;
        node.renderedImage = renderedImage;
      }
    }, []);

    useEffect(() => {
      if (!refNode) return;

      refNode.nodes = nodes;
      refNode.renderedImage = renderedImage;
    }, [refNode, nodes, renderedImage]);

    return (
      <figspec-viewer
        ref={refCb}
        class={className}
        pan-speed={panSpeed}
        zoom-margin={zoomMargin}
        zoom-speed={zoomSpeed}
        {...rest}
      />
    );
  }
);