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