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