1/*
2 * Copyright (C) 2022 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 */
16
17import {Component, Input} from '@angular/core';
18import {PersistentStore} from 'common/persistent_store';
19import {TraceType} from 'trace/trace_type';
20import {CollapsibleSections} from 'viewers/common/collapsible_sections';
21import {CollapsibleSectionType} from 'viewers/common/collapsible_section_type';
22import {ShadingMode} from 'viewers/components/rects/shading_mode';
23import {viewerCardStyle} from 'viewers/components/styles/viewer_card.styles';
24import {UiData} from './ui_data';
25
26@Component({
27  selector: 'viewer-surface-flinger',
28  template: `
29    <div class="card-grid">
30      <collapsed-sections
31        [class.empty]="sections.areAllSectionsExpanded()"
32        [sections]="sections"
33        (sectionChange)="sections.onCollapseStateChange($event, false)">
34      </collapsed-sections>
35
36      <rects-view
37        class="rects-view"
38        [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.RECTS)"
39        [title]="rectsTitle"
40        [store]="store"
41        [isStackBased]="true"
42        [rects]="inputData?.rectsToDraw ?? []"
43        [highlightedItem]="inputData?.highlightedItem ?? ''"
44        [displays]="inputData?.displays ?? []"
45        [shadingModes]="shadingModes"
46        [dependencies]="inputData?.dependencies ?? []"
47        [userOptions]="inputData?.rectsUserOptions ?? {}"
48        [pinnedItems]="inputData?.pinnedItems ?? []"
49        [isDarkMode]="inputData?.isDarkMode ?? false"
50        (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.RECTS, true)"></rects-view>
51
52      <hierarchy-view
53        class="hierarchy-view"
54        [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.HIERARCHY)"
55        [tree]="inputData?.hierarchyTrees?.at(0)"
56        [dependencies]="inputData?.dependencies ?? []"
57        [highlightedItem]="inputData?.highlightedItem ?? ''"
58        [pinnedItems]="inputData?.pinnedItems ?? []"
59        [textFilter]="inputData?.hierarchyFilter"
60        [store]="store"
61        [userOptions]="inputData?.hierarchyUserOptions ?? {}"
62        [rectIdToShowState]="inputData?.rectIdToShowState"
63        (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.HIERARCHY, true)"></hierarchy-view>
64
65      <div class="properties" *ngIf="!arePropertiesCollapsed()">
66        <surface-flinger-property-groups
67          class="property-groups"
68          [class.empty]="!inputData?.curatedProperties && !sections.isSectionCollapsed(CollapsibleSectionType.PROPERTIES)"
69          [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.CURATED_PROPERTIES)"
70          [properties]="inputData?.curatedProperties"
71          (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.CURATED_PROPERTIES, true)"></surface-flinger-property-groups>
72
73        <properties-view
74          class="properties-view"
75          [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.PROPERTIES)"
76          [title]="propertiesTitle"
77          [userOptions]="inputData?.propertiesUserOptions ?? {}"
78          [propertiesTree]="inputData?.propertiesTree"
79          [highlightedProperty]="inputData?.highlightedProperty ?? ''"
80          [traceType]="${TraceType.SURFACE_FLINGER}"
81          [store]="store"
82          [isProtoDump]="true"
83          placeholderText="No selected entry or layer."
84          [textFilter]="inputData?.propertiesFilter"
85          (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.PROPERTIES, true)"></properties-view>
86      </div>
87    </div>
88  `,
89  styles: [
90    `
91      .properties {
92        flex: 1;
93        display: flex;
94        flex-direction: column;
95        overflow: auto;
96      }
97    `,
98    viewerCardStyle,
99  ],
100})
101export class ViewerSurfaceFlingerComponent {
102  @Input() inputData: UiData | undefined;
103  @Input() store: PersistentStore | undefined;
104  @Input() active = false;
105  TraceType = TraceType;
106  CollapsibleSectionType = CollapsibleSectionType;
107
108  rectsTitle = 'LAYERS';
109  propertiesTitle = 'PROTO DUMP';
110  sections = new CollapsibleSections([
111    {
112      type: CollapsibleSectionType.RECTS,
113      label: this.rectsTitle,
114      isCollapsed: false,
115    },
116    {
117      type: CollapsibleSectionType.HIERARCHY,
118      label: CollapsibleSectionType.HIERARCHY,
119      isCollapsed: false,
120    },
121    {
122      type: CollapsibleSectionType.CURATED_PROPERTIES,
123      label: 'PROPERTIES',
124      isCollapsed: false,
125    },
126    {
127      type: CollapsibleSectionType.PROPERTIES,
128      label: this.propertiesTitle,
129      isCollapsed: false,
130    },
131  ]);
132  shadingModes = [
133    ShadingMode.GRADIENT,
134    ShadingMode.OPACITY,
135    ShadingMode.WIRE_FRAME,
136  ];
137
138  arePropertiesCollapsed(): boolean {
139    return (
140      this.sections.isSectionCollapsed(CollapsibleSectionType.PROPERTIES) &&
141      this.sections.isSectionCollapsed(
142        CollapsibleSectionType.CURATED_PROPERTIES,
143      )
144    );
145  }
146}
147