• 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 { ID } from './MainMenuInfo';
19import { PhotoEditCrop } from '../crop/PhotoEditCrop';
20import { CropStyleBar } from './CropStyleBar';
21import { CropRulerBar } from './CropRulerBar';
22import { CropResetButton } from './CropResetButton';
23import { ToolBar } from './ToolBar';
24
25const TAG: string = 'editor_CropModeBar';
26
27const COMPONENT_KEY_ROTATE: string = 'Rotate';
28const COMPONENT_KEY_MIRROR: string = 'Mirror';
29interface RulerProperties {
30  rulerWidth: number;
31  rulerHeight: number;
32}
33
34@Component
35export struct CropModeBar {
36  @Consume('angle') rotateAngle: number;
37  @Consume broadCast: BroadCast;
38  @Consume('verticalScreen') isVerticalScreen: boolean;
39  @Consume('selected') selectedMode: number;
40  @Consume cropEdit: PhotoEditCrop;
41  @Consume isCropReset: boolean;
42  @Consume screenWidth: number;
43  @Consume screenHeight: number;
44  @State rulerSwitchOn: boolean = true;
45  @State frameStyleSwitchOn: boolean = true;
46  @StorageLink('rulerProperties') rulerProperties: RulerProperties = { rulerWidth: 0, rulerHeight: 0 };
47  private rulerChangedFunc: Function = (number: number): void => this.onRulerChanged(number);
48  private resetClickedFunc: Function = (): void => this.onResetClicked();
49  private cropRulerBarHeight: number = Constants.VERTICAL_RULER_COMPONENT_HEIGHT;
50
51
52
53  aboutToAppear(): void {
54    this.broadCast.on(Constants.RULER_CHANGED, this.rulerChangedFunc);
55    this.broadCast.on(Constants.CROP_RESET_CLICKED, this.resetClickedFunc);
56  }
57
58  aboutToDisappear(): void {
59    this.broadCast.off(Constants.RULER_CHANGED, this.rulerChangedFunc);
60    this.broadCast.off(Constants.CROP_RESET_CLICKED, this.resetClickedFunc);
61    this.isCropReset = false;
62  }
63
64  onRulerChanged(number: number): void {
65    this.rotateAngle = number;
66    this.cropEdit.onSliderAngleChange(this.rotateAngle);
67    this.isCropReset = this.cropEdit.couldReset();
68  }
69
70  switchRuler(): void {
71    this.rulerSwitchOn = !this.rulerSwitchOn;
72  }
73
74  switchFrameStyle(): void {
75    this.frameStyleSwitchOn = !this.frameStyleSwitchOn;
76  }
77
78  onResetClicked(): void {
79    this.rotateAngle = 0;
80  }
81
82  build() {
83    Flex({
84      direction: this.isVerticalScreen ? FlexDirection.Column : FlexDirection.Row,
85      alignItems: ItemAlign.Center,
86      justifyContent: FlexAlign.Start
87    }) {
88      Column() {
89        // 重置按钮
90        CropResetButton({
91          isPcStyle: false
92        })
93      }
94      .margin(this.isVerticalScreen ? {
95                                        top: Constants.VERTICAL_RESET_BUTTON_MARGIN,
96                                        bottom: Constants.VERTICAL_RESET_BUTTON_MARGIN
97                                      } : { left: Constants.HORIZONTAL_RESET_BUTTON_MARGIN })
98
99      Flex({
100        direction: this.isVerticalScreen ? FlexDirection.Column : FlexDirection.Row,
101        alignItems: ItemAlign.Center,
102        justifyContent: FlexAlign.Center
103      }) {
104        CropStyleBar();
105      }
106      .height(this.isVerticalScreen ? Constants.VERTICAL_CROP_STYLE_BAR_HEIGHT : Constants.PERCENT_100)
107      .width(this.isVerticalScreen ? Constants.PERCENT_100 : Constants.HORIZONTAL_CROP_STYLE_BAR_HEIGHT)
108
109      Flex({
110        direction: this.isVerticalScreen ? FlexDirection.Row : FlexDirection.Column,
111        alignItems: ItemAlign.Center,
112        justifyContent: FlexAlign.Center
113      }) {
114        Flex({
115          direction: this.isVerticalScreen ? FlexDirection.Column : FlexDirection.Row,
116          alignItems: ItemAlign.Center,
117          justifyContent: FlexAlign.Center
118        }) {
119          ActionButton({
120            src: $r('app.media.ic_edit_photo_crop_rotate'),
121            text: $r('app.string.rotate_text'),
122            textSize: this.isVerticalScreen ?
123            $r('app.float.buttonActionTextSize_default') : $r('app.float.buttonActionTextSize_horizontal'),
124            sizeDefault: this.isVerticalScreen ?
125            $r('app.float.ic_size_default') : $r('app.float.ic_size_horizontal'),
126            actionID: ID.CROP_ROTATE,
127            widthOfActionButton: this.isVerticalScreen ?
128            $r('app.float.secondary_menu_height_default') : Constants.HORIZONTAL_ACTION_BUTTON_WIDTH,
129            heightOfActionButton: this.isVerticalScreen ?
130            $r('app.float.crop_action_size') : Constants.HORIZONTAL_ACTION_BUTTON_HEIGHT,
131            componentKey: COMPONENT_KEY_ROTATE
132          })
133        }
134        .padding(this.isVerticalScreen ? {} : { left: Constants.HORIZONTAL_ACTION_BUTTON_LEFT_PADDING })
135        .margin(this.isVerticalScreen ? {} : { left: Constants.HORIZONTAL_ACTION_BUTTON_LEFT_MARGIN })
136        .width(this.isVerticalScreen ? Constants.VERTICAL_OUTSIDE_ACTION_BUTTON_CONTAINER_WIDTH :
137        Constants.HORIZONTAL_OUTSIDE_ACTION_BUTTON_CONTAINER_WIDTH)
138        .height(this.isVerticalScreen ? Constants.VERTICAL_OUTSIDE_ACTION_BUTTON_CONTAINER_HEIGHT :
139        Constants.HORIZONTAL_OUTSIDE_ACTION_BUTTON_CONTAINER_HEIGHT)
140
141        if (this.rulerSwitchOn) {
142          // 旋转刻度尺
143          Flex({
144            direction: this.isVerticalScreen ? FlexDirection.Column : FlexDirection.Row,
145            alignItems: ItemAlign.Center,
146            justifyContent: FlexAlign.Center
147          }) {
148            CropRulerBar()
149          }
150          .margin(this.isVerticalScreen ? {} : { left: Constants.HORIZONTAL_CROP_RULER_MARGIN })
151          .height(this.isVerticalScreen ? this.cropRulerBarHeight : this.rulerProperties.rulerHeight)
152          .width(this.rulerProperties.rulerWidth)
153        }
154
155        Flex({
156          direction: FlexDirection.Column,
157          alignItems: ItemAlign.Center,
158          justifyContent: FlexAlign.Center
159        }) {
160          ActionButton({
161            src: $r('app.media.ic_edit_photo_crop_mirror'),
162            text: $r('app.string.mirror_text'),
163            textSize: this.isVerticalScreen ?
164            $r('app.float.buttonActionTextSize_default') : $r('app.float.buttonActionTextSize_horizontal'),
165            sizeDefault: this.isVerticalScreen ?
166            $r('app.float.ic_size_default') : $r('app.float.ic_size_horizontal'),
167            actionID: ID.CROP_MIRROR,
168            widthOfActionButton: this.isVerticalScreen ?
169            $r('app.float.secondary_menu_height_default') : Constants.HORIZONTAL_ACTION_BUTTON_WIDTH,
170            heightOfActionButton: this.isVerticalScreen ?
171            $r('app.float.crop_action_size') : Constants.HORIZONTAL_ACTION_BUTTON_HEIGHT,
172            componentKey: COMPONENT_KEY_MIRROR
173          })
174        }
175        .padding(this.isVerticalScreen ? {} : { left: Constants.HORIZONTAL_ACTION_BUTTON_LEFT_PADDING })
176        .margin(this.isVerticalScreen ? {} : { left: Constants.HORIZONTAL_ACTION_BUTTON_LEFT_MARGIN })
177        .width(this.isVerticalScreen ? Constants.VERTICAL_OUTSIDE_ACTION_BUTTON_CONTAINER_WIDTH :
178        Constants.HORIZONTAL_OUTSIDE_ACTION_BUTTON_CONTAINER_WIDTH)
179        .height(this.isVerticalScreen ? Constants.VERTICAL_OUTSIDE_ACTION_BUTTON_CONTAINER_HEIGHT :
180        Constants.HORIZONTAL_OUTSIDE_ACTION_BUTTON_CONTAINER_HEIGHT)
181      }
182      .width(this.isVerticalScreen ? Constants.PERCENT_100 : Constants.HORIZONTAL_RULER_COMPONENT_WIDTH)
183
184      Column() {
185        ToolBar({
186          textSize: this.isVerticalScreen ?
187          $r('app.float.buttonActionTextSize_default') : $r('app.float.buttonActionTextSize_horizontal')
188        })
189      }
190      .alignItems(HorizontalAlign.Center)
191      .width(this.isVerticalScreen ? Constants.VERTICAL_TOOL_BAR_WIDTH : Constants.HORIZONTAL_TOOL_BAR_WIDTH)
192      .height(this.isVerticalScreen ? Constants.VERTICAL_TOOL_BAR_HEIGHT : Constants.HORIZONTAL_TOOL_BAR_HEIGHT)
193    }
194  }
195}