• 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 { BigDataConstants, BroadCast, Constants, Log, ReportToBigDataUtil } 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_CropStyleBar';
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@Component
38export struct CropStyleBar {
39  @Consume broadCast: BroadCast;
40  @Consume('verticalScreen') isVerticalScreen: boolean;
41  @Consume('selected') selectedMode: number;
42  @Consume isCropReset: boolean;
43  @Consume cropEdit: PhotoEditCrop;
44  mainMenuList: Array<ActionButtonInfo> = [
45    new ActionButtonInfo({
46      src: $r('app.media.ic_edit_photo_crop_freedom'),
47      actionID: CropRatioType.RATIO_TYPE_FREE,
48      isActive: true,
49      componentKey: COMPONENT_KEY_EDIT_CROP_FREEDOM
50    }),
51    new ActionButtonInfo({
52      src: $r('app.media.ic_edit_photo_crop_4_3'),
53      actionID: CropRatioType.RATIO_TYPE_4_3,
54      componentKey: COMPONENT_KEY_EDIT_CROP_4_3
55    }),
56    new ActionButtonInfo({
57      src: $r('app.media.ic_edit_photo_crop_3_4'),
58      actionID: CropRatioType.RATIO_TYPE_3_4,
59      componentKey: COMPONENT_KEY_EDIT_CROP_3_4
60    }),
61    new ActionButtonInfo({
62      src: $r('app.media.ic_edit_photo_crop_1_1'),
63      actionID: CropRatioType.RATIO_TYPE_1_1,
64      componentKey: COMPONENT_KEY_EDIT_CROP_1_1
65    }),
66    new ActionButtonInfo({
67      src: $r('app.media.ic_edit_photo_crop_3_2'),
68      actionID: CropRatioType.RATIO_TYPE_3_2,
69      componentKey: COMPONENT_KEY_EDIT_CROP_3_2
70    }),
71    new ActionButtonInfo({
72      src: $r('app.media.ic_edit_photo_crop_2_3'),
73      actionID: CropRatioType.RATIO_TYPE_2_3,
74      componentKey: COMPONENT_KEY_EDIT_CROP_2_3
75    }),
76    new ActionButtonInfo({
77      src: $r('app.media.ic_edit_photo_crop_9_16'),
78      actionID: CropRatioType.RATIO_TYPE_9_16,
79      componentKey: COMPONENT_KEY_EDIT_CROP_9_16
80    }),
81    new ActionButtonInfo({
82      src: $r('app.media.ic_edit_photo_crop_16_9'),
83      actionID: CropRatioType.RATIO_TYPE_16_9,
84      componentKey: COMPONENT_KEY_EDIT_CROP_16_9
85    }),
86    new ActionButtonInfo({
87      src: $r('app.media.ic_edit_photo_crop_portfull'),
88      actionID: CropRatioType.RATIO_TYPE_VERTICAL,
89      componentKey: COMPONENT_KEY_EDIT_CROP_PORT_FULL
90    }),
91    new ActionButtonInfo({
92      src: $r('app.media.ic_edit_photo_crop_landfull'),
93      actionID: CropRatioType.RATIO_TYPE_HORIZONTAL,
94      componentKey: COMPONENT_KEY_EDIT_CROP_LAND_FULL
95    }),
96  ];
97  @State @Watch('clickEvent') menuChanged: RefreshActionMenu = new RefreshActionMenu(-1, this.mainMenuList);
98  private menuClick: Function = undefined;
99  private resetClick: Function = undefined;
100
101  clickEvent(): void {
102    ActionChangedEvent.isActiveNotChanged(this.menuChanged);
103  }
104
105  onMenuClicked(actionID: number | CropRatioType): void {
106    if (this.selectedMode != PhotoEditMode.EDIT_MODE_CROP) {
107      return;
108    }
109    if (actionID == ID.CROP_ROTATE) {
110      this.onRotateClicked();
111    }
112
113    if (actionID == ID.CROP_MIRROR) {
114      this.onMirrorClicked();
115    }
116
117    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
118      if (actionID === this.menuChanged.menuArray[i].actionID) {
119        this.menuChanged.isChanged = i;
120        this.cropEdit.onFixedRatioChange(actionID);
121        this.isCropReset = this.cropEdit.couldReset();
122      }
123    }
124  }
125
126  onRotateClicked(): void {
127    let id = -1;
128    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
129      if (this.menuChanged.menuArray[i].isActive) {
130        id = this.menuChanged.menuArray[i].actionID;
131      }
132    }
133
134    if (id === CropRatioType.RATIO_TYPE_4_3) {
135      id = CropRatioType.RATIO_TYPE_3_4;
136    } else if (id === CropRatioType.RATIO_TYPE_3_4) {
137      id = CropRatioType.RATIO_TYPE_4_3;
138    } else if (id === CropRatioType.RATIO_TYPE_16_9) {
139      id = CropRatioType.RATIO_TYPE_9_16;
140    } else if (id === CropRatioType.RATIO_TYPE_9_16) {
141      id = CropRatioType.RATIO_TYPE_16_9;
142    } else if (id === CropRatioType.RATIO_TYPE_2_3) {
143      id = CropRatioType.RATIO_TYPE_3_2;
144    } else if (id === CropRatioType.RATIO_TYPE_3_2) {
145      id = CropRatioType.RATIO_TYPE_2_3;
146    } else if (id === CropRatioType.RATIO_TYPE_VERTICAL) {
147      id = CropRatioType.RATIO_TYPE_HORIZONTAL;
148    } else if (id === CropRatioType.RATIO_TYPE_HORIZONTAL) {
149      id = CropRatioType.RATIO_TYPE_VERTICAL;
150    }
151
152    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
153      if (id === this.menuChanged.menuArray[i].actionID) {
154        this.menuChanged.isChanged = i;
155      }
156    }
157
158    this.cropEdit.onRotationAngleChange();
159    this.isCropReset = this.cropEdit.couldReset();
160
161    let msg = {
162      'Type': BigDataConstants.PHOTO_EDIT_ROTATE
163    };
164    ReportToBigDataUtil.report(BigDataConstants.PHOTO_EDIT_TYPE_ID, msg);
165  }
166
167  onMirrorClicked(): void {
168    this.cropEdit.onMirrorChange();
169    this.isCropReset = this.cropEdit.couldReset();
170    let msg = {
171      'Type': BigDataConstants.PHOTO_EDIT_MIRROR
172    };
173    ReportToBigDataUtil.report(BigDataConstants.PHOTO_EDIT_TYPE_ID, msg);
174  }
175
176  onResetClicked(): void {
177    this.menuChanged.isChanged = 0;
178    this.isCropReset = this.cropEdit.couldReset();
179    let msg = {
180      'Type': BigDataConstants.PHOTO_EDIT_RESET
181    };
182    ReportToBigDataUtil.report(BigDataConstants.PHOTO_EDIT_TYPE_ID, msg);
183  }
184
185  aboutToAppear(): void {
186    this.menuClick = this.onMenuClicked.bind(this);
187    this.resetClick = this.onResetClicked.bind(this);
188    this.broadCast.on(Constants.UPDATE_MENU, this.menuClick);
189    this.broadCast.on(Constants.CROP_RESET_CLICKED, this.resetClick);
190  }
191
192  aboutToDisappear(): void {
193    this.broadCast.off(Constants.UPDATE_MENU, this.menuClick);
194    this.broadCast.off(Constants.CROP_RESET_CLICKED, this.resetClick);
195  }
196
197  build() {
198    Flex({
199      direction: this.isVerticalScreen ? FlexDirection.Column : FlexDirection.Row,
200      alignItems: ItemAlign.Center,
201      justifyContent: FlexAlign.Center
202    }) {
203      List({ space: Constants.CROP_STYLE_BAR }) {
204        ForEach(this.menuChanged.menuArray, (item: ActionButtonInfo) => {
205          ListItem() {
206            ActionButton({
207              src: item.src,
208              componentKey: item.componentKey,
209              isActive: item.isActive,
210              actionID: item.actionID,
211              sizeDefault: this.isVerticalScreen ?
212              $r('app.float.ic_size_default') : $r('app.float.ic_size_horizontal')
213            })
214          }
215        })
216      }
217      .padding(this.isVerticalScreen ?
218        {
219          top: Constants.VERTICAL_CROP_STYLE_BAR_TOP_PADDING,
220          bottom: Constants.VERTICAL_CROP_STYLE_BAR_BOTTOM_PADDING,
221          left: Constants.VERTICAL_CROP_STYLE_BAR_LEFT_PADDING,
222          right: Constants.VERTICAL_CROP_STYLE_BAR_RIGHT_PADDING
223        } : {
224              top: Constants.HORIZONTAL_CROP_STYLE_BAR_TOP_PADDING,
225              bottom: Constants.HORIZONTAL_CROP_STYLE_BAR_BOTTOM_PADDING,
226              left: Constants.HORIZONTAL_CROP_STYLE_BAR_LEFT_PADDING,
227              right: Constants.HORIZONTAL_CROP_STYLE_BAR_RIGHT_PADDING
228            })
229      .listDirection(this.isVerticalScreen ? Axis.Horizontal : Axis.Vertical)
230      .scrollBar(BarState.Off)
231    }
232  }
233}