1/* 2 * Copyright (C) 2023 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 {ChangeDetectionStrategy, 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'; 23 24import {viewerCardStyle} from 'viewers/components/styles/viewer_card.styles'; 25import {UiData} from './ui_data'; 26 27/** 28 * TODO: Upgrade the View Capture's Properties View after getting UX's opinion. 29 */ 30@Component({ 31 selector: 'viewer-view-capture', 32 changeDetection: ChangeDetectionStrategy.OnPush, 33 template: ` 34 <div class="card-grid"> 35 <collapsed-sections 36 [class.empty]="sections.areAllSectionsExpanded()" 37 [sections]="sections" 38 (sectionChange)="sections.onCollapseStateChange($event, false)"> 39 </collapsed-sections> 40 <rects-view 41 class="rects-view" 42 [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.RECTS)" 43 [title]="rectsTitle" 44 [store]="store" 45 [rects]="inputData?.rectsToDraw ?? []" 46 [zoomFactor]="4" 47 [miniRects]="inputData?.sfRects ?? []" 48 [highlightedItem]="inputData?.highlightedItem ?? ''" 49 [displays]="inputData?.displays ?? []" 50 groupLabel="Windows" 51 [shadingModes]="shadingModes" 52 [dependencies]="inputData?.dependencies ?? []" 53 [userOptions]="inputData?.rectsUserOptions ?? {}" 54 [pinnedItems]="inputData?.pinnedItems ?? []" 55 [isDarkMode]="inputData?.isDarkMode ?? false" 56 (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.RECTS, true)"></rects-view> 57 <hierarchy-view 58 class="hierarchy-view" 59 [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.HIERARCHY)" 60 [subtrees]="inputData?.hierarchyTrees" 61 [dependencies]="inputData?.dependencies ?? []" 62 [highlightedItem]="inputData?.highlightedItem ?? ''" 63 [pinnedItems]="inputData?.pinnedItems ?? []" 64 [textFilter]="inputData?.hierarchyFilter" 65 [store]="store" 66 [userOptions]="inputData?.hierarchyUserOptions ?? {}" 67 [rectIdToShowState]="inputData?.rectIdToShowState" 68 (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.HIERARCHY, true)"></hierarchy-view> 69 <properties-view 70 class="properties-view" 71 [class.collapsed]="sections.isSectionCollapsed(CollapsibleSectionType.PROPERTIES)" 72 [userOptions]="inputData?.propertiesUserOptions ?? {}" 73 [propertiesTree]="inputData?.propertiesTree" 74 [curatedProperties]="inputData?.curatedProperties" 75 [traceType]="${TraceType.VIEW_CAPTURE}" 76 [store]="store" 77 [isProtoDump]="false" 78 placeholderText="No selected item." 79 [textFilter]="inputData?.propertiesFilter" 80 (collapseButtonClicked)="sections.onCollapseStateChange(CollapsibleSectionType.PROPERTIES, true)"></properties-view> 81 </div> 82 `, 83 styles: [viewerCardStyle], 84}) 85export class ViewerViewCaptureComponent { 86 @Input() inputData: UiData | undefined; 87 @Input() store: PersistentStore | undefined; 88 CollapsibleSectionType = CollapsibleSectionType; 89 90 rectsTitle = 'SKETCH'; 91 sections = new CollapsibleSections([ 92 { 93 type: CollapsibleSectionType.RECTS, 94 label: this.rectsTitle, 95 isCollapsed: false, 96 }, 97 { 98 type: CollapsibleSectionType.HIERARCHY, 99 label: CollapsibleSectionType.HIERARCHY, 100 isCollapsed: false, 101 }, 102 { 103 type: CollapsibleSectionType.PROPERTIES, 104 label: CollapsibleSectionType.PROPERTIES, 105 isCollapsed: false, 106 }, 107 ]); 108 shadingModes = [ 109 ShadingMode.GRADIENT, 110 ShadingMode.OPACITY, 111 ShadingMode.WIRE_FRAME, 112 ]; 113} 114