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 { PcCropStyleBar } from './PcCropStyleBar'; 21import { PcCropRulerBar } from './PcCropRulerBar'; 22import { CropResetButton } from './CropResetButton'; 23 24const TAG: string = 'editor_PcCropModeBar'; 25 26/** 27 * 天枢PC图片编辑使用的裁剪模式工具栏 28 */ 29@Component 30export struct PcCropModeBar { 31 @Consume('angle') rotateAngle: number; 32 @Consume broadCast: BroadCast; 33 @Consume('verticalScreen') isVerticalScreen: boolean; 34 @Consume('selected') selectedMode: number; 35 @Consume cropEdit: PhotoEditCrop; 36 @Consume isCropReset: boolean; 37 @Consume screenWidth: number; 38 @Consume screenHeight: number; 39 @State rulerSwitchOn: boolean = true; 40 @State frameStyleSwitchOn: boolean = true; 41 private rulerComponentSize: number = 0; 42 private rulerChanged: Function = (): void => {}; 43 private resetClicked: Function = (): void => {}; 44 45 aboutToAppear() { 46 this.rulerChanged = (number: number): void => this.onRulerChanged(number); 47 this.broadCast.on(Constants.RULER_CHANGED, this.rulerChanged); 48 this.resetClicked = (): void => this.onResetClicked(); 49 this.broadCast.on(Constants.CROP_RESET_CLICKED, this.resetClicked); 50 this.rulerComponentSize = this.screenWidth; 51 Log.debug(TAG, `this.rulerComponentSize = ${this.rulerComponentSize}`); 52 } 53 54 aboutToDisappear() { 55 this.broadCast.off(Constants.RULER_CHANGED, this.rulerChanged); 56 this.broadCast.off(Constants.CROP_RESET_CLICKED, this.resetClicked); 57 this.isCropReset = false; 58 } 59 60 onRulerChanged(number: number) { 61 this.rotateAngle = number; 62 this.cropEdit.onSliderAngleChange(this.rotateAngle); 63 this.isCropReset = this.cropEdit.couldReset(); 64 } 65 66 switchRuler() { 67 this.rulerSwitchOn = !this.rulerSwitchOn 68 } 69 70 switchFrameStyle() { 71 this.frameStyleSwitchOn = !this.frameStyleSwitchOn 72 } 73 74 onResetClicked() { 75 this.rotateAngle = 0; 76 } 77 78 build() { 79 Column() { 80 // 菜单栏顶部的按钮条 81 Row() { 82 CropResetButton() 83 Blank().flexGrow(1) 84 ActionButton({ 85 src: $r('app.media.ic_edit_photo_crop_rotate'), 86 actionID: ID.CROP_ROTATE, 87 widthOfActionButton: $r('app.float.secondary_menu_height_default'), 88 heightOfActionButton: $r('app.float.crop_action_size') 89 }) 90 Column().width($r('app.float.menu_margin_right')) 91 ActionButton({ 92 src: $r('app.media.ic_edit_photo_crop_mirror'), 93 actionID: ID.CROP_MIRROR, 94 widthOfActionButton: $r('app.float.secondary_menu_height_default'), 95 heightOfActionButton: $r('app.float.crop_action_size') 96 }) 97 }.width('100%') 98 .height('60vp') 99 100 // 分割线 101 Divider().margin({ bottom: $r('app.float.margin_crop_rotate') }).color('#1affffff') 102 103 // 旋转刻度尺 104 Row() { 105 Image($r('app.media.ic_public_spinner_open')) 106 .width($r('app.float.edit_open_status_icon_length')) 107 .height($r('app.float.edit_open_status_icon_length')) 108 .objectFit(ImageFit.Contain) 109 .fillColor('#FFFFFF') 110 .rotate(this.rulerSwitchOn ? { x: 0, y: 0, z: 1, angle: 0 } : { 111 x: 0, 112 y: 0, 113 z: 1, 114 angle: Constants.ANGLE_270 115 }) 116 .margin({ right: $r('app.float.id_icon_margin_horizontal') }) 117 Image($r('app.media.ic_public_rotate')) 118 .width($r('app.float.edit_menu_icon_length')) 119 .height($r('app.float.edit_menu_icon_length')) 120 .margin({ left: $r('app.float.id_icon_margin_horizontal'), right: $r('app.float.id_icon_margin_horizontal') }) 121 Text($r('app.string.rotate_text')) 122 .fontSize($r('sys.float.ohos_id_text_size_sub_title2')) 123 .fontWeight(FontWeight.Regular) 124 .fontColor($r('sys.color.ohos_id_color_text_primary_contrary')) 125 Blank().flexGrow(1) 126 Text('' + this.rotateAngle) 127 .fontColor($r('sys.color.ohos_fa_text_secondary_dark')) 128 .fontSize($r('sys.float.ohos_id_text_size_body1')) 129 .fontWeight(FontWeight.Regular) 130 } 131 .width('100%') 132 .margin({ 133 bottom: this.rulerSwitchOn ? $r('app.float.crop_vertical_padding_right') : $r('sys.float.ohos_id_elements_margin_vertical_l') 134 }) 135 .onClick(() => { 136 this.switchRuler() 137 }) 138 139 Flex({ 140 direction: FlexDirection.Row, 141 alignItems: ItemAlign.Center, 142 justifyContent: FlexAlign.Center 143 }) { 144 PcCropRulerBar(); 145 } 146 .width('100%') 147 .margin({ bottom: this.rulerSwitchOn ? $r('app.float.edit_menu_item_gap') : 0 }) 148 .visibility(this.rulerSwitchOn ? Visibility.Visible : Visibility.None) 149 150 Row() { 151 Image($r('app.media.ic_public_spinner_open')) 152 .width($r('app.float.edit_open_status_icon_length')) 153 .height($r('app.float.edit_open_status_icon_length')) 154 .objectFit(ImageFit.Contain) 155 .fillColor('#FFFFFF') 156 .rotate(this.frameStyleSwitchOn ? { x: 0, y: 0, z: 1, angle: 0 } : { 157 x: 0, 158 y: 0, 159 z: 1, 160 angle: Constants.ANGLE_270 161 }) 162 .margin({ right: $r('app.float.id_icon_margin_horizontal') }) 163 Image($r('app.media.ic_public_picture_frame')) 164 .width($r('app.float.edit_menu_icon_length')) 165 .height($r('app.float.edit_menu_icon_length')) 166 .margin({ left: $r('app.float.id_icon_margin_horizontal'), right: $r('app.float.id_icon_margin_horizontal') }) 167 Text($r('app.string.edit_frame_style')) 168 .fontSize($r('sys.float.ohos_id_text_size_sub_title2')) 169 .fontWeight(FontWeight.Regular) 170 .fontColor($r('sys.color.ohos_id_color_text_primary_contrary')) 171 } 172 .width('100%') 173 .margin({ bottom: $r('app.float.crop_vertical_padding_right') }) 174 .onClick((): void => { 175 this.switchFrameStyle(); 176 }) 177 178 // 剪切风格bar 179 Flex({ 180 direction: FlexDirection.Row, 181 alignItems: ItemAlign.Center, 182 justifyContent: FlexAlign.Center 183 }) { 184 PcCropStyleBar() 185 } 186 .width('100%') 187 .height($r('app.float.edit_menu_crop_style_bar_height')) 188 .visibility(this.frameStyleSwitchOn ? Visibility.Visible : Visibility.Hidden) 189 }.padding({ left: $r('app.float.edit_toolBar_padding'), right: $r('app.float.edit_toolBar_padding') }) 190 } 191}