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 Constants from '../utils/constant';
17
18@Extend(Button)function locationButton() {
19  .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
20  .fontWeight(FontWeight.Medium)
21  .fontSize(Constants.TEXT_SMALLER_FONT_SIZE)
22  .height(Constants.LOCATION_BUTTON_HEIGHT)
23  .borderRadius(Constants.LOCATION_BUTTON_RADIUS)
24}
25
26@Component
27export struct LocationCanvas {
28  @Link locationFlag: number;
29
30  build() {
31    Column() {
32      Image($r('app.media.img_location_map'))
33        .opacity($r('app.float.opacity_location'))
34        .width(Constants.FULL_WIDTH)
35        .height(Constants.FULL_HEIGHT)
36        .scale({
37          x: (
38               (this.locationFlag == Constants.LOCATION_UPGRADE) ||
39               (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)
40             )
41          ? Constants.LOCATION_CANVAS_ZOOM_SCALE : Constants.LOCATION_CANVAS_INITIAL_SCALE,
42          y: (
43               (this.locationFlag == Constants.LOCATION_UPGRADE) ||
44               (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)
45             )
46            ? Constants.LOCATION_CANVAS_ZOOM_SCALE : Constants.LOCATION_CANVAS_INITIAL_SCALE
47        })
48        .animation({
49          duration: Constants.LOCATION_ANIMATION_DURATION, // Animation duration
50          curve: Curve.Smooth, // The animation curve
51          playMode: PlayMode.Normal // The animation mode
52        })
53      Image($r('app.media.ic_public_gps_filled'))
54        .fillColor($r('sys.color.brand'))
55        .width(Constants.LOCATION_ICON_WIDTH)
56        .height(Constants.LOCATION_ICON_HEIGHT)
57        .position({ x: Constants.LOCATION_ICON_POSITION_X, y: Constants.LOCATION_ICON_POSITION_Y })
58        .opacity(
59          (
60            (this.locationFlag == Constants.LOCATION_UPGRADE) ||
61            (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)
62          ) ? 1 : 0
63        )
64        .scale({
65          x: (
66               (this.locationFlag == Constants.LOCATION_UPGRADE) ||
67               (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)
68             ) ? 1 : 0.8,
69          y: (
70               (this.locationFlag == Constants.LOCATION_UPGRADE) ||
71               (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)
72             ) ? 1 : 0.8
73        })
74        .animation({
75          duration: Constants.LOCATION_ANIMATION_DURATION / 2, // Animation duration
76          delay: this.locationFlag == Constants.LOCATION_BOTH_PRECISE ? (Constants.LOCATION_ANIMATION_DURATION / 2) : 0,
77          curve: Curve.Smooth, // The animation curve
78          playMode: PlayMode.Normal // The animation mode
79        })
80      Circle({ width: Constants.LOCATION_CIRCLE_DIA, height: Constants.LOCATION_CIRCLE_DIA })
81        .position({ x: Constants.LOCATION_CIRCLE_POSITION_X, y: Constants.LOCATION_CIRCLE_POSITION_Y })
82        .fill($r('app.color.location_circle_color'))
83        .fillOpacity(Constants.LOCATION_CIRCLE_OPACITY)
84        .stroke($r('app.color.location_circle_color'))
85        .scale({
86          x: (
87               (this.locationFlag == Constants.LOCATION_UPGRADE) ||
88               (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)
89             ) ? 0 : 1,
90          y: (
91               (this.locationFlag == Constants.LOCATION_UPGRADE) ||
92               (this.locationFlag == Constants.LOCATION_BOTH_PRECISE)
93             ) ? 0 : 1
94        })
95        .animation({
96          duration: Constants.LOCATION_ANIMATION_DURATION, // Animation duration
97          curve: Curve.Smooth, // The animation curve
98          playMode: PlayMode.Normal // The animation mode
99        })
100      Row() {
101        if (this.locationFlag == Constants.LOCATION_BOTH_PRECISE) {
102          Button($r('app.string.precise_location_on'))
103            .locationButton()
104            .fontColor($r('sys.color.font_emphasize'))
105            .onClick(() => { this.locationFlag = Constants.LOCATION_BOTH_FUZZY })
106        }
107        if (this.locationFlag == Constants.LOCATION_BOTH_FUZZY) {
108          Button($r('app.string.precise_location_off'))
109            .locationButton()
110            .fontColor($r('sys.color.font_secondary'))
111            .onClick(() => { this.locationFlag = Constants.LOCATION_BOTH_PRECISE })
112        }
113      }.position({ x: 0, y: 0 })
114      .width(Constants.FULL_WIDTH)
115      .height(Constants.FULL_HEIGHT)
116      .alignItems(VerticalAlign.Top)
117      .justifyContent(FlexAlign.Center)
118      .padding({ top: Constants.LOCATION_BUTTON_POSITION_Y })
119    }.width(Constants.FULL_WIDTH)
120    .height(Constants.LOCATION_CANVAS_HEIGHT)
121    .margin({ top: Constants.LOCATION_CANVAS_MARGIN_TOP, bottom: Constants.LOCATION_CANVAS_MARGIN_BOTTOM })
122    .clip(true)
123  }
124}
125