1/* 2 * Copyright (c) 2024 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 */ 15if (!('finalizeConstruction' in ViewPU.prototype)) { 16 Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { 17 }); 18} 19const curves = requireNativeModule('ohos.curves'); 20const LengthMetrics = requireNapi('arkui.node').LengthMetrics; 21const SymbolGlyphModifier = requireNapi('arkui.modifier').SymbolGlyphModifier; 22const bundleManager = requireNapi('bundle.bundleManager'); 23const hilog = requireNapi('hilog'); 24const i18n = requireNapi('i18n'); 25const backGroundColor = ['rgb(0,0,0)', 'rgb(255,255,255)', 'rgb(241,243,245)']; 26const backGroundTransparentGradientColor = [['rgba(0,0,0,0)', 'rgba(0,0,0,1)'], 27 ['rgba(255,255,255,0)', 'rgba(255,255,255,1)'], ['rgba(241,243,245,0)', 'rgba(241,243,245,1)']]; 28const transparencyMapArray = [0.15, 0.15, 0.4, 0.6, 0.8]; 29const RECTANGLE_OUTSIDE_OFFSET_ONE = 1; 30const COLOR_RATIO_THIRTY_PERCENT = 0.3; 31const COLOR_RATIO_FIFTY_PERCENT = 0.5; 32const COLOR_RATIO_SEVENTY_PERCENT = 0.7; 33const COLOR_RATIO_FORTY_PERCENT = 0.4; 34const COLOR_RATIO_SIXTY_PERCENT = 0.6; 35const COLOR_RATIO_ONE_FIFTY_PERCENT = 1.5; 36const COORDINATE_NEGATIVE_ONE = -1; 37const BLUR_CONSTANT = 500; 38const BREAK_POINT_VP_SM = 600; 39const BREAK_POINT_VP_MD = 840; 40const BREAK_POINT_SM = 'sm'; 41const BREAK_POINT_MD = 'md'; 42const BREAK_POINT_LG = 'lg'; 43const SIDE_BAR_EMBED_MIN_WIDTH = 240; 44const SIDE_BAR_OVERLAY_WIDTH = 304; 45const SIDE_BAR_COMMON_WIDTH = 360; 46const CONTENT_MIN_WIDTH = 600; 47const MENUBAR_X_FIRST_THRESHOLD = 200; 48const MENUBAR_X_SECOND_THRESHOLD = 40; 49const MENUBAR_CORRECTION_OFFSET_VALUE = 92; 50const TITLE_MAX_LINES = 2; 51const TITLE_MIN_FONT_SIZE = 14; 52const TITLE_MAX_FONT_SIZE = 26; 53const DEFAULT_TITLE_HEIGHT = 36; 54const TITLE_LAYOUT_WEIGHT = 1; 55const DEFAULT_PADDING_START_DISTANCE = 32; 56const DEFAULT_MARGIN_TOP_DISTANCE = 26; 57const TITLE_FONT_COLOR = { 'id': -1, 'type': 10001, params: ['sys.color.font_primary'], 58 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }; 59export let GradientAlpha; 60(function (GradientAlpha) { 61 GradientAlpha.OPACITY_20 = 1; 62 GradientAlpha.OPACITY_60 = 2; 63 GradientAlpha.OPACITY_80 = 3; 64 GradientAlpha.OPACITY_100 = 4; 65})(GradientAlpha || (GradientAlpha = {})); 66export let MixMode; 67(function (MixMode) { 68 MixMode.AVERAGE = 1; 69 MixMode.CROSS = 2; 70 MixMode.TOWARDS = 3; 71})(MixMode || (MixMode = {})); 72export let BackgroundTheme; 73(function (BackgroundTheme) { 74 BackgroundTheme.DARK = 1; 75 BackgroundTheme.LIGHT = 2; 76 BackgroundTheme.DEFAULT = 3; 77})(BackgroundTheme || (BackgroundTheme = {})); 78export class AtomicServiceNavigation extends ViewPU { 79 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 80 super(parent, __localStorage, elmtId, extraInfo); 81 if (typeof paramsLambda === 'function') { 82 this.paramsGenerator_ = paramsLambda; 83 } 84 this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, 'navPathStack'); 85 this.navigationContent = undefined; 86 this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, 'title'); 87 this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, 'titleOptions'); 88 this.__gradientBackground = new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, 'gradientBackground'); 89 this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, 'hideTitleBar'); 90 this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, 'navBarWidth'); 91 this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, 'mode'); 92 this.navDestinationBuilder = this.defaultNavDestinationBuilder; 93 this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, 'navBarWidthRange'); 94 this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, 'minContentWidth'); 95 this.__sideBarOptions = new SynchedPropertyObjectOneWayPU(params.sideBarOptions, this, 'sideBarOptions'); 96 this.sideBarContent = undefined; 97 this.__showMaskLayer = new ObservedPropertySimplePU(false, this, 'showMaskLayer'); 98 this.__marginWindowLeft = new ObservedPropertySimplePU(16, this, 'marginWindowLeft'); 99 this.__currentBreakPoint = new ObservedPropertySimplePU(BREAK_POINT_SM, this, 'currentBreakPoint'); 100 this.__sideBarAttribute = new ObservedPropertyObjectPU(new sideBarAttributeSet(), this, 'sideBarAttribute'); 101 this.__controlButtonVisible = new ObservedPropertySimplePU(true, this, 'controlButtonVisible'); 102 this.__titleBuilderPaddingEndWidth = new ObservedPropertySimplePU(0, this, 'titleBuilderPaddingEndWidth'); 103 this.menus = undefined; 104 this.stateChangeCallback = undefined; 105 this.modeChangeCallback = undefined; 106 this.settings = new RenderingContextSettings(true); 107 this.context = new CanvasRenderingContext2D(this.settings); 108 this.__navigationWidth = new ObservedPropertySimplePU(0, this, 'navigationWidth'); 109 this.__navigationHeight = new ObservedPropertySimplePU(0, this, 'navigationHeight'); 110 this.mainWindow = undefined; 111 this.onWindowSizeChangeCallback = undefined; 112 this.onAvoidSafeAreaChangeCallback = undefined; 113 this.sideBarHelper = undefined; 114 this.atomicServiceIcon = undefined; 115 this.navigationBarVisibility = true; 116 this.setInitiallyProvidedValue(params); 117 this.finalizeConstruction(); 118 } 119 setInitiallyProvidedValue(params) { 120 if (params.navPathStack !== undefined) { 121 this.navPathStack = params.navPathStack; 122 } 123 if (params.navigationContent !== undefined) { 124 this.navigationContent = params.navigationContent; 125 } 126 if (params.titleOptions === undefined) { 127 this.__titleOptions.set({ isBlurEnabled: true }); 128 } 129 if (params.navDestinationBuilder !== undefined) { 130 this.navDestinationBuilder = params.navDestinationBuilder; 131 } 132 if (params.sideBarContent !== undefined) { 133 this.sideBarContent = params.sideBarContent; 134 } 135 if (params.showMaskLayer !== undefined) { 136 this.showMaskLayer = params.showMaskLayer; 137 } 138 if (params.marginWindowLeft !== undefined) { 139 this.marginWindowLeft = params.marginWindowLeft; 140 } 141 if (params.currentBreakPoint !== undefined) { 142 this.currentBreakPoint = params.currentBreakPoint; 143 } 144 if (params.sideBarAttribute !== undefined) { 145 this.sideBarAttribute = params.sideBarAttribute; 146 } 147 if (params.controlButtonVisible !== undefined) { 148 this.controlButtonVisible = params.controlButtonVisible; 149 } 150 if (params.titleBuilderPaddingEndWidth !== undefined) { 151 this.titleBuilderPaddingEndWidth = params.titleBuilderPaddingEndWidth; 152 } 153 if (params.menus !== undefined) { 154 this.menus = params.menus; 155 } 156 if (params.stateChangeCallback !== undefined) { 157 this.stateChangeCallback = params.stateChangeCallback; 158 } 159 if (params.modeChangeCallback !== undefined) { 160 this.modeChangeCallback = params.modeChangeCallback; 161 } 162 if (params.settings !== undefined) { 163 this.settings = params.settings; 164 } 165 if (params.context !== undefined) { 166 this.context = params.context; 167 } 168 if (params.navigationWidth !== undefined) { 169 this.navigationWidth = params.navigationWidth; 170 } 171 if (params.navigationHeight !== undefined) { 172 this.navigationHeight = params.navigationHeight; 173 } 174 if (params.mainWindow !== undefined) { 175 this.mainWindow = params.mainWindow; 176 } 177 if (params.onWindowSizeChangeCallback !== undefined) { 178 this.onWindowSizeChangeCallback = params.onWindowSizeChangeCallback; 179 } 180 if (params.onAvoidSafeAreaChangeCallback !== undefined) { 181 this.onAvoidSafeAreaChangeCallback = params.onAvoidSafeAreaChangeCallback; 182 } 183 if (params.sideBarHelper !== undefined) { 184 this.sideBarHelper = params.sideBarHelper; 185 } 186 if (params.atomicServiceIcon !== undefined) { 187 this.atomicServiceIcon = params.atomicServiceIcon; 188 } 189 if (params.navigationBarVisibility !== undefined) { 190 this.navigationBarVisibility = params.navigationBarVisibility; 191 } 192 } 193 updateStateVars(params) { 194 this.__title.reset(params.title); 195 this.__titleOptions.reset(params.titleOptions); 196 this.__gradientBackground.reset(params.gradientBackground); 197 this.__hideTitleBar.reset(params.hideTitleBar); 198 this.__navBarWidth.reset(params.navBarWidth); 199 this.__mode.reset(params.mode); 200 this.__navBarWidthRange.reset(params.navBarWidthRange); 201 this.__minContentWidth.reset(params.minContentWidth); 202 this.__sideBarOptions.reset(params.sideBarOptions); 203 } 204 purgeVariableDependenciesOnElmtId(rmElmtId) { 205 this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); 206 this.__title.purgeDependencyOnElmtId(rmElmtId); 207 this.__titleOptions.purgeDependencyOnElmtId(rmElmtId); 208 this.__gradientBackground.purgeDependencyOnElmtId(rmElmtId); 209 this.__hideTitleBar.purgeDependencyOnElmtId(rmElmtId); 210 this.__navBarWidth.purgeDependencyOnElmtId(rmElmtId); 211 this.__mode.purgeDependencyOnElmtId(rmElmtId); 212 this.__navBarWidthRange.purgeDependencyOnElmtId(rmElmtId); 213 this.__minContentWidth.purgeDependencyOnElmtId(rmElmtId); 214 this.__sideBarOptions.purgeDependencyOnElmtId(rmElmtId); 215 this.__showMaskLayer.purgeDependencyOnElmtId(rmElmtId); 216 this.__marginWindowLeft.purgeDependencyOnElmtId(rmElmtId); 217 this.__currentBreakPoint.purgeDependencyOnElmtId(rmElmtId); 218 this.__sideBarAttribute.purgeDependencyOnElmtId(rmElmtId); 219 this.__controlButtonVisible.purgeDependencyOnElmtId(rmElmtId); 220 this.__titleBuilderPaddingEndWidth.purgeDependencyOnElmtId(rmElmtId); 221 this.__navigationWidth.purgeDependencyOnElmtId(rmElmtId); 222 this.__navigationHeight.purgeDependencyOnElmtId(rmElmtId); 223 } 224 aboutToBeDeleted() { 225 this.__navPathStack.aboutToBeDeleted(); 226 this.__title.aboutToBeDeleted(); 227 this.__titleOptions.aboutToBeDeleted(); 228 this.__gradientBackground.aboutToBeDeleted(); 229 this.__hideTitleBar.aboutToBeDeleted(); 230 this.__navBarWidth.aboutToBeDeleted(); 231 this.__mode.aboutToBeDeleted(); 232 this.__navBarWidthRange.aboutToBeDeleted(); 233 this.__minContentWidth.aboutToBeDeleted(); 234 this.__sideBarOptions.aboutToBeDeleted(); 235 this.__showMaskLayer.aboutToBeDeleted(); 236 this.__marginWindowLeft.aboutToBeDeleted(); 237 this.__currentBreakPoint.aboutToBeDeleted(); 238 this.__sideBarAttribute.aboutToBeDeleted(); 239 this.__controlButtonVisible.aboutToBeDeleted(); 240 this.__titleBuilderPaddingEndWidth.aboutToBeDeleted(); 241 this.__navigationWidth.aboutToBeDeleted(); 242 this.__navigationHeight.aboutToBeDeleted(); 243 SubscriberManager.Get().delete(this.id__()); 244 this.aboutToBeDeletedInternal(); 245 } 246 get navPathStack() { 247 return this.__navPathStack.get(); 248 } 249 set navPathStack(newValue) { 250 this.__navPathStack.set(newValue); 251 } 252 get title() { 253 return this.__title.get(); 254 } 255 set title(newValue) { 256 this.__title.set(newValue); 257 } 258 get titleOptions() { 259 return this.__titleOptions.get(); 260 } 261 set titleOptions(newValue) { 262 this.__titleOptions.set(newValue); 263 } 264 get gradientBackground() { 265 return this.__gradientBackground.get(); 266 } 267 set gradientBackground(newValue) { 268 this.__gradientBackground.set(newValue); 269 } 270 get hideTitleBar() { 271 return this.__hideTitleBar.get(); 272 } 273 set hideTitleBar(newValue) { 274 this.__hideTitleBar.set(newValue); 275 } 276 get navBarWidth() { 277 return this.__navBarWidth.get(); 278 } 279 set navBarWidth(newValue) { 280 this.__navBarWidth.set(newValue); 281 } 282 get mode() { 283 return this.__mode.get(); 284 } 285 set mode(newValue) { 286 this.__mode.set(newValue); 287 } 288 get navBarWidthRange() { 289 return this.__navBarWidthRange.get(); 290 } 291 set navBarWidthRange(newValue) { 292 this.__navBarWidthRange.set(newValue); 293 } 294 get minContentWidth() { 295 return this.__minContentWidth.get(); 296 } 297 set minContentWidth(newValue) { 298 this.__minContentWidth.set(newValue); 299 } 300 get sideBarOptions() { 301 return this.__sideBarOptions.get(); 302 } 303 set sideBarOptions(newValue) { 304 this.__sideBarOptions.set(newValue); 305 } 306 get showMaskLayer() { 307 return this.__showMaskLayer.get(); 308 } 309 set showMaskLayer(newValue) { 310 this.__showMaskLayer.set(newValue); 311 } 312 get marginWindowLeft() { 313 return this.__marginWindowLeft.get(); 314 } 315 set marginWindowLeft(newValue) { 316 this.__marginWindowLeft.set(newValue); 317 } 318 get currentBreakPoint() { 319 return this.__currentBreakPoint.get(); 320 } 321 set currentBreakPoint(newValue) { 322 this.__currentBreakPoint.set(newValue); 323 } 324 get sideBarAttribute() { 325 return this.__sideBarAttribute.get(); 326 } 327 set sideBarAttribute(newValue) { 328 this.__sideBarAttribute.set(newValue); 329 } 330 get controlButtonVisible() { 331 return this.__controlButtonVisible.get(); 332 } 333 set controlButtonVisible(newValue) { 334 this.__controlButtonVisible.set(newValue); 335 } 336 get titleBuilderPaddingEndWidth() { 337 return this.__titleBuilderPaddingEndWidth.get(); 338 } 339 set titleBuilderPaddingEndWidth(newValue) { 340 this.__titleBuilderPaddingEndWidth.set(newValue); 341 } 342 get navigationWidth() { 343 return this.__navigationWidth.get(); 344 } 345 set navigationWidth(newValue) { 346 this.__navigationWidth.set(newValue); 347 } 348 get navigationHeight() { 349 return this.__navigationHeight.get(); 350 } 351 set navigationHeight(newValue) { 352 this.__navigationHeight.set(newValue); 353 } 354 defaultNavDestinationBuilder(name, param, parent = null) { 355 } 356 BackgroundBuilder(gradientBackground, parent = null) { 357 this.observeComponentCreation2((elmtId, isInitialRender) => { 358 Canvas.create(this.context); 359 Canvas.opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 : 360 gradientBackground.alpha]); 361 Canvas.backdropBlur(BLUR_CONSTANT); 362 Canvas.height(this.navigationHeight); 363 Canvas.backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : 364 backGroundColor[gradientBackground.backgroundTheme - 1]); 365 Canvas.onReady(() => { 366 if (gradientBackground.secondaryColor === undefined) { 367 this.drawSingleGradient(this.context, gradientBackground.primaryColor, gradientBackground.backgroundTheme === undefined ? 368 backGroundColor[2] : backGroundColor[gradientBackground.backgroundTheme - 1]); 369 } else { 370 if (gradientBackground.mixMode === MixMode.AVERAGE) { 371 this.drawGradientCanvasHalf(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); 372 } 373 else if (gradientBackground.mixMode === MixMode.CROSS) { 374 this.drawGradientCanvasCross(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); 375 } 376 else { 377 this.drawGradientCanvasTowards(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); 378 } 379 this.drawTransparentGradient(this.context, gradientBackground.backgroundTheme === undefined ? BackgroundTheme.DEFAULT : 380 gradientBackground.backgroundTheme); 381 } 382 }); 383 Canvas.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 384 }, Canvas); 385 Canvas.pop(); 386 } 387 aboutToAppear() { 388 this.initWindow(); 389 this.initIcon(); 390 this.initSideBarAttr(); 391 } 392 initSideBarAttr() { 393 if (this.titleOptions?.titleBarType !== TitleBarType.DRAWER) { 394 return; 395 } 396 this.sideBarAttribute = new sideBarAttributeSet(); 397 this.sideBarHelper = new SideBarHelper(); 398 let p1 = (show) => { 399 this.sideBarAttribute.showSideBar = show; 400 this.updateControlButtonVisibility(); 401 if (this.sideBarOptions?.onChange) { 402 this.sideBarOptions.onChange(show); 403 } 404 }; 405 this.sideBarHelper.v1(p1); 406 } 407 freshMenubarAvoidAreaWidth(j1) { 408 setTimeout(() => { 409 const k1 = this.getUIContext().getAtomicServiceBar(); 410 if (!k1) { 411 this.titleBuilderPaddingEndWidth = 0; 412 return; 413 } 414 let l1 = k1.getBarRect().x; 415 let m1 = 0; 416 if (l1 > MENUBAR_X_FIRST_THRESHOLD) { 417 const o1 = px2vp(j1.getWindowProperties()?.windowRect?.width) - l1; 418 m1 = o1 > MENUBAR_X_FIRST_THRESHOLD ? 0 : o1; 419 } else if (l1 < MENUBAR_X_SECOND_THRESHOLD) { 420 m1 = l1 + MENUBAR_CORRECTION_OFFSET_VALUE; 421 } 422 let n1 = k1.getBarRect().width; 423 this.titleBuilderPaddingEndWidth = m1 > n1 ? m1 : n1; 424 }, 100); 425 } 426 initWindow() { 427 let context = getContext(this); 428 context?.windowStage?.getMainWindow().then(i1 => { 429 if (!i1) { 430 return; 431 } 432 this.mainWindow = i1; 433 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { 434 this.sideBarHelper?.w1(this.currentBreakPoint, this.sideBarAttribute); 435 } 436 this.updateBreakPoint(i1.getWindowProperties()?.windowRect?.width); 437 this.freshMenubarAvoidAreaWidth(i1); 438 this.onWindowSizeChangeCallback = ((windowSize) => { 439 this.updateBreakPoint(windowSize?.width); 440 this.freshMenubarAvoidAreaWidth(i1); 441 }); 442 i1.on('windowSizeChange', this.onWindowSizeChangeCallback); 443 }).catch((err) => { 444 console.error(`AtomicServiceNavigation get main window failed, message is ${err?.message}`); 445 }); 446 } 447 initIcon() { 448 if ((this.titleOptions?.titleBarType !== TitleBarType.ROUND_ICON && 449 this.titleOptions?.titleBarType !== TitleBarType.SQUARED_ICON) || this.titleOptions?.titleIcon) { 450 return; 451 } 452 let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION; 453 let g1 = bundleManager.getBundleInfoForSelfSync(bundleFlags); 454 let h1 = g1?.appInfo?.iconResource; 455 this.atomicServiceIcon = getContext(this)?.resourceManager?.getDrawableDescriptor(h1)?.getPixelMap(); 456 } 457 updateBreakPoint(windowWidth) { 458 if (!windowWidth || windowWidth <= 0) { 459 return; 460 } 461 let e1 = px2vp(windowWidth); 462 let f1 = ''; 463 if (e1 < BREAK_POINT_VP_SM) { 464 f1 = BREAK_POINT_SM; 465 } else if (e1 < BREAK_POINT_VP_MD) { 466 f1 = BREAK_POINT_MD; 467 } else { 468 f1 = BREAK_POINT_LG; 469 } 470 if (this.currentBreakPoint !== f1) { 471 this.currentBreakPoint = f1; 472 this.updateMargin(); 473 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { 474 this.sideBarHelper?.w1(this.currentBreakPoint, this.sideBarAttribute); 475 } 476 } 477 } 478 updateMargin() { 479 switch (this.currentBreakPoint) { 480 case BREAK_POINT_MD: 481 this.marginWindowLeft = 24; 482 break; 483 case BREAK_POINT_LG: 484 this.marginWindowLeft = 32; 485 break; 486 case BREAK_POINT_SM: 487 default: 488 this.marginWindowLeft = 16; 489 break; 490 } 491 } 492 aboutToDisappear() { 493 if (this.onWindowSizeChangeCallback) { 494 this.mainWindow?.off('windowSizeChange', this.onWindowSizeChangeCallback); 495 } 496 } 497 updateControlButtonVisibility() { 498 if (this.titleOptions?.titleBarType !== TitleBarType.DRAWER) { 499 return; 500 } 501 if (this.sideBarAttribute.showSideBar && this.controlButtonVisible) { 502 return; 503 } 504 if (this.currentBreakPoint === BREAK_POINT_LG) { 505 if (this.sideBarAttribute.showSideBar) { 506 if (!this.controlButtonVisible) { 507 this.controlButtonVisible = true; 508 } 509 return; 510 } 511 if (!this.navigationBarVisibility && !this.sideBarAttribute.showSideBar) { 512 if (this.controlButtonVisible) { 513 this.controlButtonVisible = false; 514 } 515 } 516 else { 517 if (!this.controlButtonVisible) { 518 this.controlButtonVisible = true; 519 } 520 } 521 } 522 else { 523 if (this.controlButtonVisible !== this.navigationBarVisibility) { 524 this.controlButtonVisible = this.navigationBarVisibility; 525 } 526 } 527 } 528 isRTL() { 529 return i18n.isRTL(i18n.System.getSystemLocale()); 530 } 531 drawerTitleBuilder(parent = null) { 532 this.observeComponentCreation2((elmtId, isInitialRender) => { 533 If.create(); 534 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && this.title) { 535 this.ifElseBranchUpdateFunction(0, () => { 536 this.observeComponentCreation2((elmtId, isInitialRender) => { 537 Row.create(); 538 Row.padding({ 539 start: LengthMetrics.vp(this.currentBreakPoint !== BREAK_POINT_LG ? this.marginWindowLeft + 36 + 8 : 540 (this.sideBarAttribute.showSideBar ? 8 : this.marginWindowLeft + 36 + 8)), 541 top: LengthMetrics.vp(10), 542 bottom: LengthMetrics.vp(10), 543 end: ((this.currentBreakPoint === BREAK_POINT_SM && 544 (this.mode === NavigationMode.Auto || !this.mode)) || this.mode === NavigationMode.Stack) ? 545 LengthMetrics.vp(this.titleBuilderPaddingEndWidth) : LengthMetrics.vp(0) 546 }); 547 Row.width('100%'); 548 }, Row); 549 this.observeComponentCreation2((elmtId, isInitialRender) => { 550 Text.create(this.title); 551 Text.maxLines(TITLE_MAX_LINES); 552 Text.minFontSize(TITLE_MIN_FONT_SIZE); 553 Text.maxFontSize(TITLE_MAX_FONT_SIZE); 554 Text.height(DEFAULT_TITLE_HEIGHT); 555 Text.fontColor(TITLE_FONT_COLOR); 556 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 557 Text.fontWeight(FontWeight.Bold); 558 Text.width(0); 559 Text.layoutWeight(TITLE_LAYOUT_WEIGHT); 560 Text.clip(true); 561 Text.textAlign(this.isRTL() ? TextAlign.End : TextAlign.Start); 562 }, Text); 563 Text.pop(); 564 Row.pop(); 565 }); 566 } 567 else { 568 this.ifElseBranchUpdateFunction(1, () => { 569 }); 570 } 571 }, If); 572 If.pop(); 573 } 574 maskLayer(parent = null) { 575 this.observeComponentCreation2((elmtId, isInitialRender) => { 576 Column.create(); 577 Column.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 578 Column.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_mask_thin'], 579 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 580 Column.transition(TransitionEffect.opacity(0).animation({ duration: 500, curve: Curve.Linear })); 581 Column.width('100%'); 582 Column.height('100%'); 583 Column.accessibilityLevel('no'); 584 Column.onClick(() => { 585 this.changeSideBarWithAnimation(false); 586 }); 587 }, Column); 588 Column.pop(); 589 } 590 controlButton(parent = null) { 591 this.observeComponentCreation2((elmtId, isInitialRender) => { 592 If.create(); 593 if (this.sideBarAttribute.showSideBar) { 594 this.ifElseBranchUpdateFunction(0, () => { 595 this.observeComponentCreation2((elmtId, isInitialRender) => { 596 If.create(); 597 if (!this.sideBarOptions?.sideBarIcon) { 598 this.ifElseBranchUpdateFunction(0, () => { 599 this.observeComponentCreation2((elmtId, isInitialRender) => { 600 Button.createWithChild({ type: ButtonType.Circle }); 601 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 602 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 603 Button.width(36); 604 Button.height(36); 605 Button.borderRadius(18); 606 Button.margin({ 607 start: LengthMetrics.vp(this.marginWindowLeft), 608 }); 609 Button.zIndex(2); 610 Button.draggable(false); 611 Button.onClick(() => { 612 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 613 this.changeSideBarWithAnimation(isShowSideBar); 614 }); 615 Button.position({ 616 start: LengthMetrics.vp(0), 617 top: LengthMetrics.vp(8) 618 }); 619 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 620 }, Button); 621 this.observeComponentCreation2((elmtId, isInitialRender) => { 622 SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.open_sidebar'], 623 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 624 SymbolGlyph.fontWeight(FontWeight.Normal); 625 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 626 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 627 SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 628 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); 629 }, SymbolGlyph); 630 Button.pop(); 631 }); 632 } 633 else if (this.sideBarOptions?.sideBarIcon instanceof SymbolGlyphModifier) { 634 this.ifElseBranchUpdateFunction(1, () => { 635 this.observeComponentCreation2((elmtId, isInitialRender) => { 636 Button.createWithChild({ type: ButtonType.Circle }); 637 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 638 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 639 Button.width(36); 640 Button.height(36); 641 Button.borderRadius(18); 642 Button.margin({ 643 start: LengthMetrics.vp(this.marginWindowLeft), 644 }); 645 Button.zIndex(2); 646 Button.draggable(false); 647 Button.onClick(() => { 648 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 649 this.changeSideBarWithAnimation(isShowSideBar); 650 }); 651 Button.position({ 652 start: LengthMetrics.vp(0), 653 top: LengthMetrics.vp(8) 654 }); 655 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 656 }, Button); 657 this.observeComponentCreation2((elmtId, isInitialRender) => { 658 SymbolGlyph.create(); 659 SymbolGlyph.attributeModifier.bind(this)(this.sideBarOptions?.sideBarIcon); 660 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 661 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 662 SymbolGlyph.size({ 663 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 664 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 665 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 666 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 667 }); 668 }, SymbolGlyph); 669 Button.pop(); 670 }); 671 } 672 else { 673 this.ifElseBranchUpdateFunction(2, () => { 674 this.observeComponentCreation2((elmtId, isInitialRender) => { 675 Image.create(this.sideBarOptions?.sideBarIcon); 676 Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 677 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 678 Image.width(36); 679 Image.height(36); 680 Image.borderRadius(18); 681 Image.margin({ 682 start: LengthMetrics.vp(this.marginWindowLeft), 683 }); 684 Image.zIndex(2); 685 Image.draggable(false); 686 Image.onClick(() => { 687 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 688 this.changeSideBarWithAnimation(isShowSideBar); 689 }); 690 Image.position({ 691 start: LengthMetrics.vp(0), 692 top: LengthMetrics.vp(8) 693 }); 694 Image.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 695 }, Image); 696 }); 697 } 698 }, If); 699 If.pop(); 700 }); 701 } 702 else { 703 this.ifElseBranchUpdateFunction(1, () => { 704 this.observeComponentCreation2((elmtId, isInitialRender) => { 705 If.create(); 706 if (!this.titleOptions?.titleIcon) { 707 this.ifElseBranchUpdateFunction(0, () => { 708 this.observeComponentCreation2((elmtId, isInitialRender) => { 709 Button.createWithChild({ type: ButtonType.Circle }); 710 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 711 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 712 Button.width(36); 713 Button.height(36); 714 Button.borderRadius(18); 715 Button.margin({ 716 start: LengthMetrics.vp(this.marginWindowLeft), 717 }); 718 Button.zIndex(2); 719 Button.draggable(false); 720 Button.onClick(() => { 721 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 722 this.changeSideBarWithAnimation(isShowSideBar); 723 }); 724 Button.position({ 725 start: LengthMetrics.vp(0), 726 top: LengthMetrics.vp(8) 727 }); 728 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 729 }, Button); 730 this.observeComponentCreation2((elmtId, isInitialRender) => { 731 SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.close_sidebar'], 732 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 733 SymbolGlyph.fontWeight(FontWeight.Normal); 734 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 735 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 736 SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 737 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); 738 }, SymbolGlyph); 739 Button.pop(); 740 }); 741 } 742 else if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { 743 this.ifElseBranchUpdateFunction(1, () => { 744 this.observeComponentCreation2((elmtId, isInitialRender) => { 745 Button.createWithChild({ type: ButtonType.Circle }); 746 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 747 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 748 Button.width(36); 749 Button.height(36); 750 Button.borderRadius(18); 751 Button.margin({ 752 start: LengthMetrics.vp(this.marginWindowLeft), 753 }); 754 Button.zIndex(2); 755 Button.draggable(false); 756 Button.onClick(() => { 757 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 758 this.changeSideBarWithAnimation(isShowSideBar); 759 }); 760 Button.position({ 761 start: LengthMetrics.vp(0), 762 top: LengthMetrics.vp(8) 763 }); 764 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 765 }, Button); 766 this.observeComponentCreation2((elmtId, isInitialRender) => { 767 SymbolGlyph.create(); 768 SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); 769 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 770 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 771 SymbolGlyph.size({ 772 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 773 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 774 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 775 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 776 }); 777 }, SymbolGlyph); 778 Button.pop(); 779 }); 780 } 781 else { 782 this.ifElseBranchUpdateFunction(2, () => { 783 this.observeComponentCreation2((elmtId, isInitialRender) => { 784 Image.create(this.titleOptions?.titleIcon); 785 Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 786 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 787 Image.width(36); 788 Image.height(36); 789 Image.borderRadius(18); 790 Image.margin({ 791 start: LengthMetrics.vp(this.marginWindowLeft), 792 }); 793 Image.zIndex(2); 794 Image.draggable(false); 795 Image.onClick(() => { 796 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 797 this.changeSideBarWithAnimation(isShowSideBar); 798 }); 799 Image.position({ 800 start: LengthMetrics.vp(0), 801 top: LengthMetrics.vp(8) 802 }); 803 Image.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 804 }, Image); 805 }); 806 } 807 }, If); 808 If.pop(); 809 }); 810 } 811 }, If); 812 If.pop(); 813 } 814 sideBar(parent = null) { 815 this.observeComponentCreation2((elmtId, isInitialRender) => { 816 Row.create(); 817 Row.border({ width: { 818 left: 0, 819 right: '1px', 820 top: 0, 821 bottom: 0 822 }, 823 color: { 'id': -1, 'type': 10001, params: ['sys.color.comp_divider'], 824 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 825 style: { 826 right: BorderStyle.Solid 827 } }); 828 Row.alignItems(VerticalAlign.Top); 829 Row.width('100%'); 830 Row.height('100%'); 831 Row.padding({ top: 56 }); 832 Row.focusable(true); 833 Row.defaultFocus(true); 834 Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { 'id': -1, 'type': 10001, 835 params: ['sys.color.ohos_id_color_sub_background'], 'bundleName': '__harDefaultBundleName__', 836 'moduleName': '__harDefaultModuleName__' }); 837 Row.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 838 }, Row); 839 this.observeComponentCreation2((elmtId, isInitialRender) => { 840 If.create(); 841 if (this.sideBarContent) { 842 this.ifElseBranchUpdateFunction(0, () => { 843 this.sideBarContent.bind(this)(); 844 }); 845 } 846 else { 847 this.ifElseBranchUpdateFunction(1, () => { 848 }); 849 } 850 }, If); 851 If.pop(); 852 Row.pop(); 853 } 854 roundIconBuilder(parent = null) { 855 this.observeComponentCreation2((elmtId, isInitialRender) => { 856 If.create(); 857 if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { 858 this.ifElseBranchUpdateFunction(0, () => { 859 this.observeComponentCreation2((elmtId, isInitialRender) => { 860 Button.createWithChild({ type: ButtonType.Circle }); 861 Button.stateEffect(false); 862 Button.backgroundColor('rgba(0, 0, 0, 0)'); 863 Button.width(36); 864 Button.height(36); 865 Button.borderRadius(18); 866 Button.margin({ 867 start: LengthMetrics.vp(this.marginWindowLeft), 868 end: LengthMetrics.vp(8), 869 top: LengthMetrics.vp(10), 870 bottom: LengthMetrics.vp(10) 871 }); 872 Button.zIndex(2); 873 Button.draggable(false); 874 Button.position({ 875 start: LengthMetrics.vp(0), 876 top: LengthMetrics.vp(0) 877 }); 878 }, Button); 879 this.observeComponentCreation2((elmtId, isInitialRender) => { 880 SymbolGlyph.create(); 881 SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); 882 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 883 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 884 SymbolGlyph.size({ 885 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 886 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 887 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 888 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 889 }); 890 }, SymbolGlyph); 891 Button.pop(); 892 }); 893 } 894 else { 895 this.ifElseBranchUpdateFunction(1, () => { 896 this.observeComponentCreation2((elmtId, isInitialRender) => { 897 Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); 898 Image.backgroundColor('rgba(0, 0, 0, 0)'); 899 Image.width(36); 900 Image.height(36); 901 Image.borderRadius(18); 902 Image.margin({ 903 start: LengthMetrics.vp(this.marginWindowLeft), 904 end: LengthMetrics.vp(8), 905 top: LengthMetrics.vp(10), 906 bottom: LengthMetrics.vp(10) 907 }); 908 Image.zIndex(2); 909 Image.draggable(false); 910 Image.position({ 911 start: LengthMetrics.vp(0), 912 top: LengthMetrics.vp(0) 913 }); 914 }, Image); 915 }); 916 } 917 }, If); 918 If.pop(); 919 } 920 longIconBuilder(parent = null) { 921 this.observeComponentCreation2((elmtId, isInitialRender) => { 922 If.create(); 923 if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { 924 this.ifElseBranchUpdateFunction(0, () => { 925 this.observeComponentCreation2((elmtId, isInitialRender) => { 926 Button.createWithChild(); 927 Button.height(36); 928 Button.width(36); 929 Button.margin({ 930 start: LengthMetrics.vp(this.marginWindowLeft), 931 end: LengthMetrics.vp(-12), 932 top: LengthMetrics.vp(10), 933 bottom: LengthMetrics.vp(10) 934 }); 935 Button.draggable(false); 936 Button.position({ 937 start: LengthMetrics.vp(0), 938 top: LengthMetrics.vp(0) 939 }); 940 Button.backgroundColor('rgba(0, 0, 0, 0)'); 941 Button.stateEffect(false); 942 Button.type(ButtonType.Normal); 943 }, Button); 944 this.observeComponentCreation2((elmtId, isInitialRender) => { 945 SymbolGlyph.create(); 946 SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); 947 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 948 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 949 SymbolGlyph.size({ 950 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 951 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 952 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 953 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 954 }); 955 }, SymbolGlyph); 956 Button.pop(); 957 }); 958 } 959 else { 960 this.ifElseBranchUpdateFunction(1, () => { 961 this.observeComponentCreation2((elmtId, isInitialRender) => { 962 Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); 963 Image.height(36); 964 Image.width(36); 965 Image.margin({ 966 start: LengthMetrics.vp(this.marginWindowLeft), 967 end: LengthMetrics.vp(-12), 968 top: LengthMetrics.vp(10), 969 bottom: LengthMetrics.vp(10) 970 }); 971 Image.draggable(false); 972 Image.position({ 973 start: LengthMetrics.vp(0), 974 top: LengthMetrics.vp(0) 975 }); 976 Image.backgroundColor('rgba(0, 0, 0, 0)'); 977 Image.objectFit(ImageFit.Auto); 978 }, Image); 979 }); 980 } 981 }, If); 982 If.pop(); 983 } 984 titleBuilder(parent = null) { 985 this.observeComponentCreation2((elmtId, isInitialRender) => { 986 If.create(); 987 if (this.titleOptions?.titleBarType === TitleBarType.SQUARED_ICON) { 988 this.ifElseBranchUpdateFunction(0, () => { 989 this.longIconBuilder.bind(this)(); 990 }); 991 } 992 else { 993 this.ifElseBranchUpdateFunction(1, () => { 994 this.roundIconBuilder.bind(this)(); 995 }); 996 } 997 }, If); 998 If.pop(); 999 } 1000 defaultTitleBuilder(parent = null) { 1001 this.observeComponentCreation2((elmtId, isInitialRender) => { 1002 Text.create(this.title); 1003 Text.maxLines(TITLE_MAX_LINES); 1004 Text.minFontSize(TITLE_MIN_FONT_SIZE); 1005 Text.maxFontSize(TITLE_MAX_FONT_SIZE); 1006 Text.height(DEFAULT_TITLE_HEIGHT); 1007 Text.fontColor(TITLE_FONT_COLOR); 1008 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 1009 Text.fontWeight(FontWeight.Bold); 1010 Text.layoutWeight(TITLE_LAYOUT_WEIGHT); 1011 Text.clip(true); 1012 Text.margin({ top: LengthMetrics.px(DEFAULT_MARGIN_TOP_DISTANCE) }); 1013 Text.padding({ start: LengthMetrics.px(DEFAULT_PADDING_START_DISTANCE) }); 1014 Text.textAlign(this.isRTL() ? TextAlign.End : TextAlign.Start); 1015 }, Text); 1016 Text.pop(); 1017 } 1018 isShowMenus() { 1019 return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; 1020 } 1021 getMenuItemArray() { 1022 return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; 1023 } 1024 initialRender() { 1025 this.observeComponentCreation2((elmtId, isInitialRender) => { 1026 Stack.create(); 1027 Stack.align(Alignment.TopStart); 1028 Stack.width('100%'); 1029 Stack.height('100%'); 1030 Stack.onSizeChange((oldValue, newValue) => { 1031 this.navigationWidth = newValue.width; 1032 this.navigationHeight = newValue.height; 1033 }); 1034 Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1035 }, Stack); 1036 this.observeComponentCreation2((elmtId, isInitialRender) => { 1037 Column.create(); 1038 }, Column); 1039 this.observeComponentCreation2((elmtId, isInitialRender) => { 1040 If.create(); 1041 if (this.gradientBackground !== undefined) { 1042 this.ifElseBranchUpdateFunction(0, () => { 1043 this.BackgroundBuilder.bind(this)(makeBuilderParameterProxy('BackgroundBuilder', { 1044 primaryColor: () => this.gradientBackground.primaryColor, 1045 secondaryColor: () => this.gradientBackground.secondaryColor, 1046 backgroundTheme: () => this.gradientBackground.backgroundTheme, 1047 mixMode: () => this.gradientBackground.mixMode, 1048 alpha: () => this.gradientBackground.alpha 1049 })); 1050 }); 1051 } else { 1052 this.ifElseBranchUpdateFunction(1, () => { 1053 }); 1054 } 1055 }, If); 1056 If.pop(); 1057 Column.pop(); 1058 this.observeComponentCreation2((elmtId, isInitialRender) => { 1059 If.create(); 1060 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { 1061 this.ifElseBranchUpdateFunction(0, () => { 1062 this.controlButton.bind(this)(); 1063 this.observeComponentCreation2((elmtId, isInitialRender) => { 1064 SideBarContainer.create(this.currentBreakPoint === BREAK_POINT_LG ? SideBarContainerType.Embed : 1065 SideBarContainerType.Overlay); 1066 SideBarContainer.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1067 SideBarContainer.sideBarWidth(this.sideBarAttribute.sideBarWidth); 1068 SideBarContainer.minContentWidth(this.sideBarAttribute.z1); 1069 SideBarContainer.minSideBarWidth(this.sideBarAttribute.minSideBarWidth); 1070 SideBarContainer.maxSideBarWidth(this.sideBarAttribute.maxSideBarWidth); 1071 SideBarContainer.showControlButton(false); 1072 SideBarContainer.showSideBar(this.sideBarAttribute.showSideBar); 1073 SideBarContainer.onChange((showSideBar) => { 1074 if (this.sideBarHelper?.isShowSideBar() !== showSideBar) { 1075 this.changeSideBarWithAnimation(showSideBar); 1076 } 1077 }); 1078 }, SideBarContainer); 1079 this.sideBar.bind(this)(); 1080 this.observeComponentCreation2((elmtId, isInitialRender) => { 1081 Stack.create(); 1082 Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1083 }, Stack); 1084 this.observeComponentCreation2((elmtId, isInitialRender) => { 1085 Navigation.create(this.navPathStack, { moduleName: '__harDefaultModuleName__', pagePath: '', isUserCreateStack: true }); 1086 Navigation.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1087 Navigation.title({ builder: () => { 1088 this.drawerTitleBuilder.call(this); 1089 } }, this.getTitleOption()); 1090 Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { 1091 this.menus.call(this); 1092 } } : this.getMenuItemArray()); 1093 Navigation.titleMode(NavigationTitleMode.Mini); 1094 Navigation.hideBackButton(true); 1095 Navigation.hideTitleBar(this.hideTitleBar); 1096 Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth)); 1097 Navigation.navBarPosition(NavBarPosition.Start); 1098 Navigation.mode(this.mode); 1099 Navigation.navDestination({ builder: this.navDestinationBuilder.bind(this) }); 1100 Navigation.navBarWidthRange(ObservedObject.GetRawObject(this.navBarWidthRange)); 1101 Navigation.minContentWidth(ObservedObject.GetRawObject(this.minContentWidth)); 1102 Navigation.onNavigationModeChange(this.modeChangeCallback); 1103 Navigation.onNavBarStateChange((visible) => { 1104 this.navigationBarVisibility = visible; 1105 this.updateControlButtonVisibility(); 1106 if (this.stateChangeCallback) { 1107 this.stateChangeCallback(visible); 1108 } 1109 }); 1110 }, Navigation); 1111 this.observeComponentCreation2((elmtId, isInitialRender) => { 1112 If.create(); 1113 if (this.navigationContent) { 1114 this.ifElseBranchUpdateFunction(0, () => { 1115 this.navigationContent.bind(this)(); 1116 }); 1117 } 1118 else { 1119 this.ifElseBranchUpdateFunction(1, () => { 1120 }); 1121 } 1122 }, If); 1123 If.pop(); 1124 Navigation.pop(); 1125 this.observeComponentCreation2((elmtId, isInitialRender) => { 1126 If.create(); 1127 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && this.sideBarAttribute.showSideBar && 1128 this.currentBreakPoint !== BREAK_POINT_LG && this.showMaskLayer) { 1129 this.ifElseBranchUpdateFunction(0, () => { 1130 this.maskLayer.bind(this)(); 1131 }); 1132 } 1133 else { 1134 this.ifElseBranchUpdateFunction(1, () => { 1135 }); 1136 } 1137 }, If); 1138 If.pop(); 1139 Stack.pop(); 1140 SideBarContainer.pop(); 1141 }); 1142 } 1143 else { 1144 this.ifElseBranchUpdateFunction(1, () => { 1145 this.observeComponentCreation2((elmtId, isInitialRender) => { 1146 Navigation.create(this.navPathStack, { moduleName: '__harDefaultModuleName__', pagePath: '', isUserCreateStack: true }); 1147 Navigation.title((this.titleOptions?.titleIcon || (this.titleOptions?.titleBarType && !this.title)) ? { builder: () => { 1148 this.titleBuilder.call(this); 1149 } } : { builder: () => { 1150 this.defaultTitleBuilder.call(this); 1151 } }, this.getTitleOption()); 1152 Navigation.titleMode(NavigationTitleMode.Mini); 1153 Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { 1154 this.menus.call(this); 1155 } } : this.getMenuItemArray()); 1156 Navigation.hideBackButton(true); 1157 Navigation.hideTitleBar(this.hideTitleBar); 1158 Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth)); 1159 Navigation.navBarPosition(NavBarPosition.Start); 1160 Navigation.mode(this.mode); 1161 Navigation.navDestination({ builder: this.navDestinationBuilder.bind(this) }); 1162 Navigation.navBarWidthRange(ObservedObject.GetRawObject(this.navBarWidthRange)); 1163 Navigation.minContentWidth(ObservedObject.GetRawObject(this.minContentWidth)); 1164 Navigation.onNavBarStateChange(this.stateChangeCallback); 1165 Navigation.onNavigationModeChange(this.modeChangeCallback); 1166 }, Navigation); 1167 this.observeComponentCreation2((elmtId, isInitialRender) => { 1168 If.create(); 1169 if (this.navigationContent) { 1170 this.ifElseBranchUpdateFunction(0, () => { 1171 this.navigationContent.bind(this)(); 1172 }); 1173 } 1174 else { 1175 this.ifElseBranchUpdateFunction(1, () => { 1176 }); 1177 } 1178 }, If); 1179 If.pop(); 1180 Navigation.pop(); 1181 }); 1182 } 1183 }, If); 1184 If.pop(); 1185 Stack.pop(); 1186 } 1187 drawGradientCanvasHalf(context, primaryColor, secondaryColor) { 1188 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1189 let c1 = context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 1190 height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); 1191 let d1 = context.createLinearGradient(this.navigationWidth * COLOR_RATIO_ONE_FIFTY_PERCENT, 1192 height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); 1193 c1.addColorStop(0, this.resourceColorToString(primaryColor)); 1194 c1.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); 1195 c1.addColorStop(1, this.resourceColorToString(secondaryColor)); 1196 d1.addColorStop(0, this.resourceColorToString(primaryColor)); 1197 d1.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); 1198 d1.addColorStop(1, this.resourceColorToString(secondaryColor)); 1199 context.fillStyle = c1; 1200 context.fillRect(0, 0, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, height); 1201 context.fillStyle = d1; 1202 context.fillRect(this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0, this.navigationWidth, height); 1203 } 1204 drawGradientCanvasCross(context, primaryColor, secondaryColor) { 1205 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1206 let u = context.createLinearGradient(0, 0, COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, 0); 1207 u.addColorStop(0, this.resourceColorToString(primaryColor)); 1208 u.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); 1209 u.addColorStop(1, this.resourceColorToString(secondaryColor)); 1210 context.fillStyle = u; 1211 context.fillRect(0, 0, COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, height); 1212 let y1 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? 1213 COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : 0; 1214 let a1 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); 1215 a1.addColorStop(0, this.resourceColorToString(secondaryColor)); 1216 a1.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); 1217 a1.addColorStop(1, this.resourceColorToString(primaryColor)); 1218 context.fillStyle = a1; 1219 context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 0, 1220 this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, 1221 height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); 1222 let y2 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? 1223 COLOR_RATIO_FIFTY_PERCENT * height + COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : height; 1224 let b1 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); 1225 b1.addColorStop(0, this.resourceColorToString(secondaryColor)); 1226 b1.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); 1227 b1.addColorStop(1, this.resourceColorToString(primaryColor)); 1228 context.fillStyle = b1; 1229 context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 1230 height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, 1231 height * COLOR_RATIO_FIFTY_PERCENT); 1232 } 1233 drawGradientCanvasTowards(context, primaryColor, secondaryColor) { 1234 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1235 let t = context.createLinearGradient(0, 0, this.navigationWidth, height); 1236 t.addColorStop(0, this.resourceColorToString(primaryColor)); 1237 t.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(primaryColor)); 1238 t.addColorStop(1, this.resourceColorToString(secondaryColor)); 1239 context.fillStyle = t; 1240 context.fillRect(0, 0, this.navigationWidth, height); 1241 } 1242 drawTransparentGradient(context, backgroundTheme) { 1243 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1244 let o = context.createLinearGradient(0, 0, 0, height); 1245 o.addColorStop(0, backGroundTransparentGradientColor[backgroundTheme - 1][0]); 1246 o.addColorStop(1, backGroundTransparentGradientColor[backgroundTheme - 1][1]); 1247 context.fillStyle = o; 1248 context.fillRect(0, 0, this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, height + 1249 RECTANGLE_OUTSIDE_OFFSET_ONE); 1250 if (backgroundTheme === BackgroundTheme.DARK) { 1251 context.fillStyle = Color.Black; 1252 context.fillRect(0, height, this.navigationWidth, this.navigationHeight - height); 1253 } 1254 } 1255 drawSingleGradient(context, primaryColor, backgroundColor) { 1256 let height = this.navigationHeight * COLOR_RATIO_SIXTY_PERCENT; 1257 let m = context.createLinearGradient(0, 0, 0, height); 1258 m.addColorStop(0, this.resourceColorToString(primaryColor)); 1259 m.addColorStop(1, backgroundColor); 1260 context.fillStyle = m; 1261 context.fillRect(0, 0, this.navigationWidth, height); 1262 if (backgroundColor === backGroundColor[0]) { 1263 context.fillStyle = Color.Black; 1264 context.fillRect(0, height, this.navigationWidth, this.navigationHeight * (1 - COLOR_RATIO_SIXTY_PERCENT)); 1265 } 1266 } 1267 resourceColorToString(resource) { 1268 if (typeof resource === 'object') { 1269 try { 1270 return getContext(this).resourceManager.getStringSync(resource); 1271 } 1272 catch (error) { 1273 let code = error.code; 1274 let message = error.message; 1275 hilog.error(0x0000, 'AtomicServiceNavigation', 1276 `resourceColorToString - systemResourceManager getStringValue failed, error code: ${code}, message: ${message}.`); 1277 } 1278 return ''; 1279 } 1280 else { 1281 return resource.toString(); 1282 } 1283 } 1284 getTitleOption() { 1285 return { 1286 backgroundColor: this.titleOptions?.backgroundColor, 1287 backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, 1288 barStyle: this.titleOptions?.barStyle 1289 }; 1290 } 1291 changeSideBarWithAnimation(j) { 1292 Context.animateTo({ 1293 duration: 500, 1294 curve: curves.cubicBezierCurve(0.2, 0.2, 0.1, 1), 1295 onFinish: () => { 1296 this.showMaskLayer = j; 1297 } 1298 }, () => { 1299 if (this.sideBarHelper) { 1300 this.sideBarHelper.a2(j); 1301 } 1302 this.showMaskLayer = true; 1303 }); 1304 } 1305 rerender() { 1306 this.updateDirtyElements(); 1307 } 1308} 1309let sideBarAttributeSet = class sideBarAttributeSet { 1310 constructor() { 1311 this.sideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1312 this.minSideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1313 this.maxSideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1314 this.z1 = SIDE_BAR_COMMON_WIDTH; 1315 this.showSideBar = false; 1316 } 1317}; 1318sideBarAttributeSet = __decorate([ 1319 Observed 1320], sideBarAttributeSet); 1321class SideBarHelper { 1322 constructor() { 1323 this.b2 = false; 1324 } 1325 v1(listener) { 1326 this.listener = listener; 1327 } 1328 c2() { 1329 this.listener = undefined; 1330 } 1331 isShowSideBar() { 1332 return this.b2; 1333 } 1334 a2(value) { 1335 this.b2 = value; 1336 if (this.listener) { 1337 this.listener(value); 1338 } 1339 } 1340 w1(i, layout) { 1341 if (i === BREAK_POINT_LG) { 1342 this.d2(layout); 1343 } else { 1344 this.e2(layout); 1345 } 1346 } 1347 e2(layout) { 1348 layout.sideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1349 layout.z1 = '100%'; 1350 } 1351 d2(layout) { 1352 layout.sideBarWidth = SIDE_BAR_EMBED_MIN_WIDTH; 1353 layout.z1 = CONTENT_MIN_WIDTH; 1354 } 1355} 1356export let TitleBarType; 1357(function (TitleBarType) { 1358 TitleBarType.SQUARED_ICON = 1; 1359 TitleBarType.ROUND_ICON = 2; 1360 TitleBarType.DRAWER = 3; 1361})(TitleBarType || (TitleBarType = {})); 1362//# sourceMappingURL=AtomicServiceNavigation.js.map 1363export default { 1364 AtomicServiceNavigation, 1365 MixMode, 1366 GradientAlpha, 1367 BackgroundTheme, 1368 TitleBarType 1369};