1/*
2 * Copyright (C) 2024 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16import {Component, Input} from '@angular/core';
17import {VcCuratedProperties} from 'viewers/common/curated_properties';
18
19@Component({
20  selector: 'view-capture-property-groups',
21  template: `
22    <div *ngIf="properties" class="group view">
23      <h3 class="group-header mat-subheading-2">View</h3>
24      <div class="left-column class-name">
25        <p class="mat-body-1">
26          <span class="mat-body-2">Class: </span>
27          &ngsp;
28          {{ properties.className }}
29        </p>
30        <p class="mat-body-1 hashcode">
31          <span class="mat-body-2">Hashcode: </span>
32          &ngsp;
33          {{ properties.hashcode }}
34        </p>
35      </div>
36    </div>
37    <mat-divider></mat-divider>
38    <div *ngIf="properties" class="group geometry">
39      <h3 class="group-header mat-subheading-2">Geometry</h3>
40      <div class="left-column coordinates">
41        <p class="column-header mat-small">Coordinates</p>
42        <p class="mat-body-1 left">
43          <span class="mat-body-2">Left: </span>
44          &ngsp;
45          {{ properties.left }}
46        </p>
47        <p class="mat-body-1 top">
48          <span class="mat-body-2">Top: </span>
49          &ngsp;
50          {{ properties.top }}
51        </p>
52        <p class="mat-body-1 elevation">
53          <span class="mat-body-2">Elevation: </span>
54          &ngsp;
55          {{ properties.elevation }}
56        </p>
57      </div>
58      <div class="right-column size">
59        <p class="column-header mat-small">Size</p>
60        <p class="mat-body-1 height">
61          <span class="mat-body-2">Height: </span>
62          &ngsp;
63          {{ properties.height }}
64        </p>
65        <p class="mat-body-1 width">
66          <span class="mat-body-2">Width: </span>
67          &ngsp;
68          {{ properties.width }}
69        </p>
70      </div>
71    </div>
72    <div *ngIf="properties" class="group geometry">
73      <h3 class="group-header mat-subheading-2"></h3>
74      <div class="left-column translation">
75        <p class="column-header mat-small">Translation</p>
76        <p class="mat-body-1 translationx">
77          <span class="mat-body-2">Translation X: </span>
78          &ngsp;
79          {{ properties.translationX }}
80        </p>
81        <p class="mat-body-1 translationy">
82          <span class="mat-body-2">Translation Y: </span>
83          &ngsp;
84          {{ properties.translationY }}
85        </p>
86      </div>
87      <div class="right-column scroll">
88        <p class="column-header mat-small">Scroll</p>
89        <p class="mat-body-1 scrollx">
90          <span class="mat-body-2">Scroll X: </span>
91          &ngsp;
92          {{ properties.scrollX }}
93        </p>
94        <p class="mat-body-1 scrolly">
95          <span class="mat-body-2">Scroll Y: </span>
96          &ngsp;
97          {{ properties.scrollY }}
98        </p>
99      </div>
100    </div>
101    <div *ngIf="properties" class="group geometry">
102      <h3 class="group-header mat-subheading-2"></h3>
103      <div class="left-column scale">
104        <p class="column-header mat-small">Scale</p>
105        <p class="mat-body-1 scalex">
106          <span class="mat-body-2">Scale X: </span>
107          &ngsp;
108          {{ properties.scaleX }}
109        </p>
110        <p class="mat-body-1 scaley">
111          <span class="mat-body-2">Scale Y: </span>
112          &ngsp;
113          {{ properties.scaleY }}
114        </p>
115      </div>
116    </div>
117    <mat-divider></mat-divider>
118    <div *ngIf="properties" class="group effects">
119      <h3 class="group-header mat-subheading-2">Effects</h3>
120      <div class="left-column translation">
121        <p class="column-header mat-small">Translation</p>
122        <p class="mat-body-1 visibility">
123          <span class="mat-body-2">Visibility: </span>
124          &ngsp;
125          {{ properties.visibility }}
126        </p>
127        <p class="mat-body-1 alpha">
128          <span class="mat-body-2">Alpha: </span>
129          &ngsp;
130          {{ properties.alpha }}
131        </p>
132        <p class="mat-body-1 will-not-draw">
133          <span class="mat-body-2">Will Not Draw: </span>
134          &ngsp;
135          {{ properties.willNotDraw }}
136        </p>
137      </div>
138      <div class="right-column misc">
139        <p class="column-header mat-small">Miscellaneous</p>
140        <p class="mat-body-1 clip-children">
141          <span class="mat-body-2">Clip Children: </span>
142          &ngsp;
143          {{ properties.clipChildren }}
144        </p>
145      </div>
146    </div>
147  `,
148  styles: [
149    `
150      .group {
151        display: flex;
152        flex-direction: row;
153        padding: 8px;
154      }
155
156      .group-header {
157        width: 80px;
158        color: gray;
159      }
160
161      .left-column {
162        flex: 1;
163        padding: 0 5px;
164      }
165
166      .right-column {
167        flex: 1;
168        border: 1px solid var(--border-color);
169        border-left-width: 5px;
170        padding: 0 5px;
171      }
172
173      .column-header {
174        color: gray;
175      }
176    `,
177  ],
178})
179export class ViewCapturePropertyGroupsComponent {
180  @Input() properties: VcCuratedProperties | undefined;
181}
182