• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BroadCast, Constants, Log } from '@ohos/common';
17import { ActionButton } from './ActionButton';
18import { ActionButtonInfo, ID } from './MainMenuInfo';
19import { ActionChangedEvent, RefreshActionMenu } from './RefreshMenu';
20import { CropRatioType } from '../crop/CropType';
21import { PhotoEditMode } from '../base/PhotoEditType';
22import { PhotoEditCrop } from '../crop/PhotoEditCrop';
23
24const TAG: string = 'editor_PcCropStyleBar';
25
26const COMPONENT_KEY_EDIT_CROP_FREEDOM: string = 'EditCropFreedom';
27const COMPONENT_KEY_EDIT_CROP_4_3: string = 'EditCrop_4_3';
28const COMPONENT_KEY_EDIT_CROP_3_4: string = 'EditCrop_3_4';
29const COMPONENT_KEY_EDIT_CROP_1_1: string = 'EditCrop_1_1';
30const COMPONENT_KEY_EDIT_CROP_3_2: string = 'EditCrop_3_2';
31const COMPONENT_KEY_EDIT_CROP_2_3: string = 'EditCrop_2_3';
32const COMPONENT_KEY_EDIT_CROP_9_16: string = 'EditCrop_9_16';
33const COMPONENT_KEY_EDIT_CROP_16_9: string = 'EditCrop_16_9';
34const COMPONENT_KEY_EDIT_CROP_PORT_FULL: string = 'PortFull';
35const COMPONENT_KEY_EDIT_CROP_LAND_FULL: string = 'LandFull';
36
37/**
38 * 天枢PC使用的裁剪比例风格工具栏
39 */
40@Component
41export struct PcCropStyleBar {
42  @Consume broadCast: BroadCast;
43  @Consume('verticalScreen') isVerticalScreen: boolean;
44  @Consume('selected') selectedMode: number;
45  @Consume isCropReset: boolean;
46  @Consume cropEdit: PhotoEditCrop;
47  mainMenuList: Array<ActionButtonInfo> = [
48    new ActionButtonInfo({
49      src: $r('app.media.ic_edit_photo_crop_freedom'),
50      actionID: CropRatioType.RATIO_TYPE_FREE,
51      isActive: true,
52      componentKey: COMPONENT_KEY_EDIT_CROP_FREEDOM
53    }),
54    new ActionButtonInfo({
55      src: $r('app.media.ic_edit_photo_crop_4_3'),
56      actionID: CropRatioType.RATIO_TYPE_4_3,
57      componentKey: COMPONENT_KEY_EDIT_CROP_4_3
58    }),
59    new ActionButtonInfo({
60      src: $r('app.media.ic_edit_photo_crop_3_4'),
61      actionID: CropRatioType.RATIO_TYPE_3_4,
62      componentKey: COMPONENT_KEY_EDIT_CROP_3_4
63    }),
64    new ActionButtonInfo({
65      src: $r('app.media.ic_edit_photo_crop_1_1'),
66      actionID: CropRatioType.RATIO_TYPE_1_1,
67      componentKey: COMPONENT_KEY_EDIT_CROP_1_1
68    }),
69    new ActionButtonInfo({
70      src: $r('app.media.ic_edit_photo_crop_3_2'),
71      actionID: CropRatioType.RATIO_TYPE_3_2,
72      componentKey: COMPONENT_KEY_EDIT_CROP_3_2
73    }),
74    new ActionButtonInfo({
75      src: $r('app.media.ic_edit_photo_crop_2_3'),
76      actionID: CropRatioType.RATIO_TYPE_2_3,
77      componentKey: COMPONENT_KEY_EDIT_CROP_2_3
78    }),
79    new ActionButtonInfo({
80      src: $r('app.media.ic_edit_photo_crop_9_16'),
81      actionID: CropRatioType.RATIO_TYPE_9_16,
82      componentKey: COMPONENT_KEY_EDIT_CROP_9_16
83    }),
84    new ActionButtonInfo({
85      src: $r('app.media.ic_edit_photo_crop_16_9'),
86      actionID: CropRatioType.RATIO_TYPE_16_9,
87      componentKey: COMPONENT_KEY_EDIT_CROP_16_9
88    }),
89    new ActionButtonInfo({
90      src: $r('app.media.ic_edit_photo_crop_portfull'),
91      actionID: CropRatioType.RATIO_TYPE_VERTICAL,
92      componentKey: COMPONENT_KEY_EDIT_CROP_PORT_FULL
93    }),
94    new ActionButtonInfo({
95      src: $r('app.media.ic_edit_photo_crop_landfull'),
96      actionID: CropRatioType.RATIO_TYPE_HORIZONTAL,
97      componentKey: COMPONENT_KEY_EDIT_CROP_LAND_FULL
98    }),
99  ];
100  @State @Watch('clickEvent') menuChanged: RefreshActionMenu = new RefreshActionMenu(-1, this.mainMenuList);
101  private menuClick: Function = (): void => {};
102  private resetClick: Function = (): void => {};
103
104  clickEvent() {
105    ActionChangedEvent.isActiveNotChanged(this.menuChanged);
106  }
107
108  onMenuClicked(actionID: number | CropRatioType) {
109    if (this.selectedMode != PhotoEditMode.EDIT_MODE_CROP) {
110      return;
111    }
112    if (actionID == ID.CROP_ROTATE) {
113      this.onRotateClicked();
114    }
115
116    if (actionID == ID.CROP_MIRROR) {
117      this.onMirrorClicked();
118    }
119
120    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
121      if (actionID === this.menuChanged.menuArray[i].actionID) {
122        this.menuChanged.isChanged = i;
123        this.cropEdit.onFixedRatioChange(actionID);
124        this.isCropReset = this.cropEdit.couldReset();
125      }
126    }
127  }
128
129  onRotateClicked(): void {
130    let id = -1;
131    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
132      if (this.menuChanged.menuArray[i].isActive) {
133        id = this.menuChanged.menuArray[i].actionID as number;
134      }
135    }
136
137    if (id === CropRatioType.RATIO_TYPE_4_3) {
138      id = CropRatioType.RATIO_TYPE_3_4;
139    } else if (id === CropRatioType.RATIO_TYPE_3_4) {
140      id = CropRatioType.RATIO_TYPE_4_3;
141    } else if (id === CropRatioType.RATIO_TYPE_16_9) {
142      id = CropRatioType.RATIO_TYPE_9_16;
143    } else if (id === CropRatioType.RATIO_TYPE_9_16) {
144      id = CropRatioType.RATIO_TYPE_16_9;
145    } else if (id === CropRatioType.RATIO_TYPE_2_3) {
146      id = CropRatioType.RATIO_TYPE_3_2;
147    } else if (id === CropRatioType.RATIO_TYPE_3_2) {
148      id = CropRatioType.RATIO_TYPE_2_3;
149    } else if (id === CropRatioType.RATIO_TYPE_VERTICAL) {
150      id = CropRatioType.RATIO_TYPE_HORIZONTAL;
151    } else if (id === CropRatioType.RATIO_TYPE_HORIZONTAL) {
152      id = CropRatioType.RATIO_TYPE_VERTICAL;
153    }
154
155    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
156      if (id === this.menuChanged.menuArray[i].actionID) {
157        this.menuChanged.isChanged = i;
158      }
159    }
160
161    this.cropEdit.onRotationAngleChange();
162    this.isCropReset = this.cropEdit.couldReset();
163  }
164
165  onMirrorClicked() {
166    this.cropEdit.onMirrorChange();
167    this.isCropReset = this.cropEdit.couldReset();
168  }
169
170  onResetClicked() {
171    this.menuChanged.isChanged = 0;
172    this.isCropReset = this.cropEdit.couldReset();
173  }
174
175  aboutToAppear() {
176    this.menuClick = (actionID: number | CropRatioType): void => this.onMenuClicked(actionID);
177    this.resetClick = (): void => this.onResetClicked();
178    this.broadCast.on(Constants.UPDATE_MENU, this.menuClick);
179    this.broadCast.on(Constants.CROP_RESET_CLICKED, this.resetClick);
180  }
181
182  aboutToDisappear() {
183    this.broadCast.off(Constants.UPDATE_MENU, this.menuClick);
184    this.broadCast.off(Constants.CROP_RESET_CLICKED, this.resetClick);
185  }
186
187  build() {
188    Grid() {
189      ForEach(this.menuChanged.menuArray, (item: ActionButtonInfo) => {
190        GridItem() {
191          ActionButton({
192            src: item.src,
193            isActive: item.isActive,
194            actionID: item.actionID,
195            heightOfActionButton: $r('app.float.icon_size'),
196            widthOfActionButton: $r('app.float.icon_size'),
197            isCropStyleButton: true,
198            componentKey: item.componentKey
199          })
200        }
201        .padding({
202          top: $r('app.float.crop_vertical_padding_right'),
203          bottom: $r('app.float.crop_vertical_padding_right')
204        })
205      })
206    }
207    .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
208    .backgroundColor('#33000000')
209    .borderRadius($r('app.float.edit_menu_item_radius'))
210    .width('100%')
211  }
212}