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 { ActionButton } from './ActionButton';
17import { BroadCast, Constants, Log } from '@ohos/common';
18import { ActionButtonInfo } from './MainMenuInfo';
19import { ActionChangedEvent, RefreshActionMenu } from './RefreshMenu';
20import { PhotoEditMode } from '../base/PhotoEditType';
21import { PhotoEditorManager } from '../PhotoEditorManager';
22
23const TAG: string = 'editor_ToolBar';
24
25const comPonentKeyEditCrop: string = 'EditToolBarCrop';
26
27@Component
28export struct ToolBar {
29  @Consume editorManager: PhotoEditorManager;
30  @Consume('selected') selectedMode: number;
31  @Consume('scale') imageScale: number;
32  @Consume('barSize') barScale: Resource;
33  @Consume('compare') isCompare: boolean;
34  @Consume broadCast: BroadCast;
35  @State isImmersive: boolean = false;
36  @Consume('verticalScreen') isVerticalScreen: boolean;
37  @Consume screenWidth: number;
38  @Consume screenHeight: number;
39  @Consume mainBottomSize: number;
40  @Consume titleSize: number;
41  @Consume isRedo: boolean;
42  @Consume isUndo: boolean;
43  mainMenuList: Array<ActionButtonInfo> = [
44    new ActionButtonInfo({
45      src: $r('app.media.ic_edit_photo_toolbar_crop'),
46
47      // 加入其它按钮时改为PhotoEditMode.EDIT_MODE_CROP
48      actionID: undefined,
49      text: $r('app.string.crop_text'),
50      isActive: true,
51      componentKey: comPonentKeyEditCrop
52    })
53  ];
54  /**
55   * 2022年8月11日 @Watch('clickEvent')打包报错
56   * @State @Watch('clickEvent') menuChanged: RefreshActionMenu =
57   * new RefreshActionMenu(-1, this.mainMenuList);
58   */
59  @State menuChanged: RefreshActionMenu = new RefreshActionMenu(-1, this.mainMenuList);
60  private textSize: number | Resource = $r('app.float.buttonActionTextSize_default');
61  private menuClick: Function = (): void => {};
62  private immersiveClick: Function = (): void => {};
63
64  clickEvent() {
65    ActionChangedEvent.isActiveNotChanged(this.menuChanged);
66  }
67
68  onMenuClick(actionID: number) {
69    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
70      if (actionID == this.menuChanged.menuArray[i].actionID) {
71        this.selectedMode = this.menuChanged.menuArray[i].mode;
72        Log.info(TAG, 'mainMenu onMenuClick mode = ' + this.selectedMode);
73        this.menuChanged.isChanged = i;
74
75        let canvasWidth = this.isVerticalScreen ? this.screenWidth : (this.screenHeight - this.mainBottomSize);
76        switch (this.selectedMode) {
77          case PhotoEditMode.EDIT_MODE_CROP:
78            this.imageScale = this.isVerticalScreen
79              ? (this.screenHeight - this.titleSize - this.mainBottomSize)
80              : (this.screenWidth - this.titleSize);
81            this.barScale = $r('app.float.menuBar_edit');
82            this.isCompare = false;
83            break;
84          default:
85            Log.info(TAG, 'this.selectedMode is not toolBar');
86            break;
87        }
88
89        this.selectedMode = this.editorManager.switchMode(this.selectedMode);
90        this.isRedo = this.editorManager.isRedoValid();
91        this.isUndo = this.editorManager.isUndoValid();
92        this.editorManager.getPhotoEditBaseInstance(this.selectedMode)
93          .setCanvasSize(canvasWidth, this.imageScale);
94      }
95    }
96  }
97
98  immersive(isImmersive: boolean) {
99    this.isImmersive = isImmersive;
100  }
101
102  aboutToAppear() {
103    this.menuClick = (actionID: number): void => this.onMenuClick(actionID);
104    this.immersiveClick = (isImmersive: boolean): void => this.immersive(isImmersive);
105    this.broadCast.on(Constants.UPDATE_MENU, this.menuClick);
106    this.broadCast.on(Constants.IS_IMMERSIVE, this.immersiveClick);
107
108    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
109      if (this.selectedMode == this.menuChanged.menuArray[i].mode) {
110        Log.info(TAG, 'mainMenu onMenuClick mode = ' + this.selectedMode);
111        this.menuChanged.isChanged = i;
112      }
113    }
114  }
115
116  aboutToDisappear() {
117    this.broadCast.off(Constants.UPDATE_MENU, this.menuClick);
118    this.broadCast.off(Constants.IS_IMMERSIVE, this.immersiveClick);
119  }
120
121  build() {
122    Flex({
123      direction: this.isVerticalScreen ? FlexDirection.Row : FlexDirection.Column,
124      alignItems: ItemAlign.Center,
125      justifyContent: FlexAlign.Center
126    }) {
127      ForEach(this.menuChanged.menuArray, (item: ActionButtonInfo) => {
128        ActionButton({
129          src: item.src,
130          text: item.text,
131          textSize: this.textSize,
132          isActive: item.isActive,
133          actionID: item.actionID,
134          widthOfActionButton: this.isVerticalScreen
135            ? $r('app.float.edit_vertical_toolBar_size') : $r('app.float.actionButton_default'),
136          heightOfActionButton: this.isVerticalScreen
137            ? $r('app.float.actionButton_default') : $r('app.float.edit_horizontal_toolBar_size'),
138          componentKey: item.componentKey
139        })
140      })
141    }
142    .width(Constants.PERCENT_100)
143    .height(Constants.PERCENT_100)
144  }
145}