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
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114

import { css, html } from "lit-element";
import {
  BorderRadiusIcon,
  HorizontalPaddingIcon,
  VerticalPaddingIcon,
} from "./Icons";

export interface FigmaNode {
  name: string;
  backgroundColor: {
    a: number;
    r: number;
    g: number;
    b: number;
  };
  absoluteBoundingBox: {
    height: number;
    width: number;
  };
  cornerRadius?: number;
  rectangleCornerRadii?: number[];
  horizontalPadding: number;
  verticalPadding: number;
  style?: {
    fontFamily: string;
    fontSize: number;
    fontWeight: number;
    lineHeightPx: number;
    textAlignHorizontal: string;
    textAlignVertical: string;
  };
  type: "TEXT" | "INSTANCE" | "FRAME" | "VECTOR" | "RECTANGLE";
}

export const View = (node: FigmaNode) => {
  if (!node) {
    return null;
  }

  let borderRadius;
  if (node.rectangleCornerRadii) {
    borderRadius =
      node.rectangleCornerRadii.filter((radius) => radius === node.cornerRadius)
        .length < 4
        ? node.rectangleCornerRadii.join("px, ")
        : node.cornerRadius;
  }

  return html`
    <div class="inspector-view">
      <div class="inspector-section">
        <h4>${node.name}</h4>
      </div>
      <div class="inspector-section">
        <h4>Properties</h4>
        <p class="inspector-property">W: ${node.absoluteBoundingBox.width}px</p>
        <p class="inspector-property">
          H: ${node.absoluteBoundingBox.height}px
        </p>
        ${borderRadius &&
        html`<p class="inspector-property">
          ${BorderRadiusIcon()} ${borderRadius}px
        </p>`}
      </div>
      ${(node.horizontalPadding || node.verticalPadding) &&
      html`<div class="inspector-section">
        <h4>Layout</h4>
        <p class="inspector-property">
          ${HorizontalPaddingIcon()} ${node.horizontalPadding}px
        </p>
        <p class="inspector-property">
          ${VerticalPaddingIcon()} ${node.verticalPadding}px
        </p>
      </div>`}
      ${node.style &&
      html`<div class="inspector-section">
        <h4>Text</h4>
        <p>Font-family: ${node.style.fontFamily}</p>
        <p>Font size: ${node.style.fontSize}</p>
        <p>Font weight: ${node.style.fontWeight}</p>
      </div>`}
    </div>
  `;
};

export const styles = css`
  .inspector-view {
    height: 100vh;
    width: 300px;
    position: fixed;
    right: 0;
    background: white;
    border-left: 1px solid #ccc;
  }

  .inspector-section {
    padding: 1rem;
    border-bottom: 1px solid #ccc;
  }

  .inspector-section h4 {
    margin: 0;
  }

  .inspector-property {
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  .inspector-property svg {
    margin-right: 8px;
  }
`;