• 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 { 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 COMPONENT_KEY_Edit_CROP: 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: COMPONENT_KEY_Edit_CROP
52    })
53  ];
54  // 2022年8月11日 @Watch('clickEvent')打包报错    @State @Watch('clickEvent') menuChanged: RefreshActionMenu = new RefreshActionMenu(-1, this.mainMenuList);
55  @State menuChanged: RefreshActionMenu = new RefreshActionMenu(-1, this.mainMenuList);
56  private textSize: number | Resource = $r('app.float.buttonActionTextSize_default');
57  private menuClick: Function = (): void => {};
58  private immersiveClick: Function = (): void => {};
59
60  clickEvent() {
61    ActionChangedEvent.isActiveNotChanged(this.menuChanged);
62  }
63
64  onMenuClick(actionID: number) {
65    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
66      if (actionID == this.menuChanged.menuArray[i].actionID) {
67        this.selectedMode = this.menuChanged.menuArray[i].mode;
68        Log.info(TAG, 'mainMenu onMenuClick mode = ' + this.selectedMode);
69        this.menuChanged.isChanged = i;
70
71        let canvasWidth = this.isVerticalScreen ? this.screenWidth : (this.screenHeight - this.mainBottomSize);
72        switch (this.selectedMode) {
73          case PhotoEditMode.EDIT_MODE_CROP:
74            this.imageScale = this.isVerticalScreen
75              ? (this.screenHeight - this.titleSize - this.mainBottomSize)
76              : (this.screenWidth - this.titleSize);
77            this.barScale = $r('app.float.menuBar_edit');
78            this.isCompare = false;
79            break;
80          default:
81            Log.info(TAG, 'this.selectedMode is not toolBar');
82            break;
83        }
84
85        this.selectedMode = this.editorManager.switchMode(this.selectedMode);
86        this.isRedo = this.editorManager.isRedoValid();
87        this.isUndo = this.editorManager.isUndoValid();
88        this.editorManager.getPhotoEditBaseInstance(this.selectedMode)
89          .setCanvasSize(canvasWidth, this.imageScale);
90      }
91    }
92  }
93
94  immersive(isImmersive: boolean) {
95    this.isImmersive = isImmersive;
96  }
97
98  aboutToAppear() {
99    this.menuClick = (actionID: number): void => this.onMenuClick(actionID);
100    this.immersiveClick = (isImmersive: boolean): void => this.immersive(isImmersive);
101    this.broadCast.on(Constants.UPDATE_MENU, this.menuClick);
102    this.broadCast.on(Constants.IS_IMMERSIVE, this.immersiveClick);
103
104    for (let i = 0; i < this.menuChanged.menuArray.length; i++) {
105      if (this.selectedMode == this.menuChanged.menuArray[i].mode) {
106        Log.info(TAG, 'mainMenu onMenuClick mode = ' + this.selectedMode);
107        this.menuChanged.isChanged = i;
108      }
109    }
110  }
111
112  aboutToDisappear() {
113    this.broadCast.off(Constants.UPDATE_MENU, this.menuClick);
114    this.broadCast.off(Constants.IS_IMMERSIVE, this.immersiveClick);
115  }
116
117  build() {
118    Flex({
119      direction: this.isVerticalScreen ? FlexDirection.Row : FlexDirection.Column,
120      alignItems: ItemAlign.Center,
121      justifyContent: FlexAlign.Center
122    }) {
123      ForEach(this.menuChanged.menuArray, (item: ActionButtonInfo) => {
124        ActionButton({
125          src: item.src,
126          text: item.text,
127          textSize: this.textSize,
128          isActive: item.isActive,
129          actionID: item.actionID,
130          widthOfActionButton: this.isVerticalScreen
131            ? $r('app.float.edit_vertical_toolBar_size') : $r('app.float.actionButton_default'),
132          heightOfActionButton: this.isVerticalScreen
133            ? $r('app.float.actionButton_default') : $r('app.float.edit_horizontal_toolBar_size'),
134          componentKey: item.componentKey
135        })
136      })
137    }
138    .width(Constants.PERCENT_100)
139    .height(Constants.PERCENT_100)
140  }
141}