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 {UiPropertyTreeNode} from 'viewers/common/ui_property_tree_node';
18
19@Component({
20  selector: 'coordinates-table',
21  template: `
22    <p *ngIf="!hasCoordinates()" class="mat-body-1">null</p>
23    <table *ngIf="hasCoordinates()" class="table">
24      <tr class="header-row">
25        <td>
26          <p class="mat-body-1">Left</p>
27        </td>
28        <td>
29          <p class="mat-body-1">Top</p>
30        </td>
31        <td>
32          <p class="mat-body-1">Right</p>
33        </td>
34        <td>
35          <p class="mat-body-1">Bottom</p>
36        </td>
37      </tr>
38      <tr>
39        <td>
40          <p class="mat-body-1">{{ coordinates.getChildByName('left')?.formattedValue() }}</p>
41        </td>
42        <td>
43          <p class="mat-body-1">{{ coordinates.getChildByName('top')?.formattedValue() }}</p>
44        </td>
45        <td>
46          <p class="mat-body-1">{{ coordinates.getChildByName('right')?.formattedValue() }}</p>
47        </td>
48        <td>
49          <p class="mat-body-1">{{ coordinates.getChildByName('bottom')?.formattedValue() }}</p>
50        </td>
51      </tr>
52    </table>
53  `,
54  styles: [
55    `
56      .table {
57        width: 100%;
58        border-collapse: collapse;
59      }
60
61      .table td {
62        padding: 1px 5px;
63        border: 1px solid var(--border-color);
64        text-align: center;
65        overflow-wrap: anywhere;
66      }
67
68      .header-row td {
69        color: gray;
70      }
71    `,
72  ],
73})
74export class CoordinatesTableComponent {
75  @Input() coordinates: UiPropertyTreeNode | undefined;
76
77  hasCoordinates() {
78    return (
79      this.coordinates?.getChildByName('left') ||
80      this.coordinates?.getChildByName('right') ||
81      this.coordinates?.getChildByName('top') ||
82      this.coordinates?.getChildByName('bottom')
83    );
84  }
85}
86