diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index b1293149e71cf6c83cc983a5a8bc7947d87c01d0..a3e73c5d4f6e261810a4ec09147692cc74837cd9 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -50,7 +50,6 @@ const SIDE_BAR_OVERLAY_WIDTH = 304; const SIDE_BAR_COMMON_WIDTH = 360; const CONTENT_MIN_WIDTH = 600; const ATOMIC_SERVICE_CAPSULE_WIDTH = 81.5; - /** * 背景颜色的不透明度的枚举类型 * @@ -77,7 +76,6 @@ export let GradientAlpha; */ GradientAlpha.OPACITY_100 = 4; })(GradientAlpha || (GradientAlpha = {})); - /** * 背景颜色融合方式 * @@ -98,7 +96,6 @@ export let MixMode; */ MixMode.TOWARDS = 3; })(MixMode || (MixMode = {})); - /** * 背景底色 * @@ -119,7 +116,6 @@ export let BackgroundTheme; */ BackgroundTheme.DEFAULT = 3; })(BackgroundTheme || (BackgroundTheme = {})); - export class AtomicServiceNavigation extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); @@ -130,8 +126,7 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationContent = undefined; this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, 'title'); this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, 'titleOptions'); - this.__gradientBackground = - new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, 'gradientBackground'); + this.__gradientBackground = new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, 'gradientBackground'); this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, 'hideTitleBar'); this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, 'navBarWidth'); this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, 'mode'); @@ -145,6 +140,7 @@ export class AtomicServiceNavigation extends ViewPU { this.__currentBreakPoint = new ObservedPropertySimplePU(BREAK_POINT_SM, this, 'currentBreakPoint'); this.__sideBarAttribute = new ObservedPropertyObjectPU(new sideBarAttributeSet(), this, 'sideBarAttribute'); this.__controlButtonVisible = new ObservedPropertySimplePU(true, this, 'controlButtonVisible'); + this.menus = undefined; this.stateChangeCallback = undefined; this.modeChangeCallback = undefined; this.settings = new RenderingContextSettings(true); @@ -160,7 +156,6 @@ export class AtomicServiceNavigation extends ViewPU { this.setInitiallyProvidedValue(params); this.finalizeConstruction(); } - setInitiallyProvidedValue(params) { if (params.navPathStack !== undefined) { this.navPathStack = params.navPathStack; @@ -192,6 +187,9 @@ export class AtomicServiceNavigation extends ViewPU { if (params.controlButtonVisible !== undefined) { this.controlButtonVisible = params.controlButtonVisible; } + if (params.menus !== undefined) { + this.menus = params.menus; + } if (params.stateChangeCallback !== undefined) { this.stateChangeCallback = params.stateChangeCallback; } @@ -229,7 +227,6 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationBarVisibility = params.navigationBarVisibility; } } - updateStateVars(params) { this.__title.reset(params.title); this.__titleOptions.reset(params.titleOptions); @@ -241,7 +238,6 @@ export class AtomicServiceNavigation extends ViewPU { this.__minContentWidth.reset(params.minContentWidth); this.__sideBarOptions.reset(params.sideBarOptions); } - purgeVariableDependenciesOnElmtId(rmElmtId) { this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); this.__title.purgeDependencyOnElmtId(rmElmtId); @@ -259,7 +255,6 @@ export class AtomicServiceNavigation extends ViewPU { this.__sideBarAttribute.purgeDependencyOnElmtId(rmElmtId); this.__controlButtonVisible.purgeDependencyOnElmtId(rmElmtId); } - aboutToBeDeleted() { this.__navPathStack.aboutToBeDeleted(); this.__title.aboutToBeDeleted(); @@ -279,173 +274,136 @@ export class AtomicServiceNavigation extends ViewPU { SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } - get navPathStack() { return this.__navPathStack.get(); } - set navPathStack(newValue) { this.__navPathStack.set(newValue); } - get title() { return this.__title.get(); } - set title(newValue) { this.__title.set(newValue); } - get titleOptions() { return this.__titleOptions.get(); } - set titleOptions(newValue) { this.__titleOptions.set(newValue); } - get gradientBackground() { return this.__gradientBackground.get(); } - set gradientBackground(newValue) { this.__gradientBackground.set(newValue); } - get hideTitleBar() { return this.__hideTitleBar.get(); } - set hideTitleBar(newValue) { this.__hideTitleBar.set(newValue); } - get navBarWidth() { return this.__navBarWidth.get(); } - set navBarWidth(newValue) { this.__navBarWidth.set(newValue); } - get mode() { return this.__mode.get(); } - set mode(newValue) { this.__mode.set(newValue); } - get navBarWidthRange() { return this.__navBarWidthRange.get(); } - set navBarWidthRange(newValue) { this.__navBarWidthRange.set(newValue); } - get minContentWidth() { return this.__minContentWidth.get(); } - set minContentWidth(newValue) { this.__minContentWidth.set(newValue); } - get sideBarOptions() { return this.__sideBarOptions.get(); } - set sideBarOptions(newValue) { this.__sideBarOptions.set(newValue); } - get showMaskLayer() { return this.__showMaskLayer.get(); } - set showMaskLayer(newValue) { this.__showMaskLayer.set(newValue); } - get marginWindowLeft() { return this.__marginWindowLeft.get(); } - set marginWindowLeft(newValue) { this.__marginWindowLeft.set(newValue); } - get currentBreakPoint() { return this.__currentBreakPoint.get(); } - set currentBreakPoint(newValue) { this.__currentBreakPoint.set(newValue); } - get sideBarAttribute() { return this.__sideBarAttribute.get(); } - set sideBarAttribute(newValue) { this.__sideBarAttribute.set(newValue); } - get controlButtonVisible() { return this.__controlButtonVisible.get(); } - set controlButtonVisible(newValue) { this.__controlButtonVisible.set(newValue); } - defaultNavDestinationBuilder(name, param, parent = null) { } - BackgroundBuilder(gradientBackground, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Canvas.create(this.context); Canvas.opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 : - gradientBackground.alpha]); + gradientBackground.alpha]); Canvas.blur(BLUR_CONSTANT); Canvas.backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : - backGroundColor[gradientBackground.backgroundTheme - 1]); + backGroundColor[gradientBackground.backgroundTheme - 1]); Canvas.onReady(() => { if (gradientBackground.secondaryColor === undefined) { //单色渐变 - this.drawSingleGradient(this.context, gradientBackground.primaryColor, - gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : - backGroundColor[gradientBackground.backgroundTheme - 1]); + this.drawSingleGradient(this.context, gradientBackground.primaryColor, gradientBackground.backgroundTheme === undefined ? + backGroundColor[2] : backGroundColor[gradientBackground.backgroundTheme - 1]); } else { if (gradientBackground.mixMode === MixMode.AVERAGE) { //双色渐变五五分 - this.drawGradientCanvasHalf(this.context, gradientBackground.primaryColor, - gradientBackground.secondaryColor); - } else if (gradientBackground.mixMode === MixMode.CROSS) { + this.drawGradientCanvasHalf(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); + } + else if (gradientBackground.mixMode === MixMode.CROSS) { //第一种双色渐变三七分 - this.drawGradientCanvasCross(this.context, gradientBackground.primaryColor, - gradientBackground.secondaryColor); - } else { + this.drawGradientCanvasCross(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); + } + else { //第二种双色渐变三七分 - this.drawGradientCanvasTowards(this.context, gradientBackground.primaryColor, - gradientBackground.secondaryColor); + this.drawGradientCanvasTowards(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); } - this.drawTransparentGradient(this.context, - gradientBackground.backgroundTheme === undefined ? BackgroundTheme.DEFAULT : + this.drawTransparentGradient(this.context, gradientBackground.backgroundTheme === undefined ? BackgroundTheme.DEFAULT : gradientBackground.backgroundTheme); } }); }, Canvas); Canvas.pop(); } - aboutToAppear() { this.initWindow(); this.initIcon(); this.initSideBarAttr(); } - /** * 初始化侧边栏相关信息 */ @@ -464,7 +422,6 @@ export class AtomicServiceNavigation extends ViewPU { }; this.sideBarHelper.registerListener(sideBarStatusListener); } - /** * 初始化window，并设置windowSizeChange监听，更新断点信息 */ @@ -487,7 +444,6 @@ export class AtomicServiceNavigation extends ViewPU { console.error(`AtomicServiceNavigation get main window failed, message is ${err?.message}`); }); } - /** * 初始化icon，用户如果设置了则用自定义的icon，没有设置则用元服务图标 */ @@ -501,7 +457,6 @@ export class AtomicServiceNavigation extends ViewPU { let iconRes = bundleInfo?.appInfo?.iconResource; this.atomicServiceIcon = getContext(this)?.resourceManager?.getDrawableDescriptor(iconRes)?.getPixelMap(); } - /** * 更新断点信息 */ @@ -526,7 +481,6 @@ export class AtomicServiceNavigation extends ViewPU { } } } - /** * 更新边距 */ @@ -544,13 +498,11 @@ export class AtomicServiceNavigation extends ViewPU { break; } } - aboutToDisappear() { if (this.onWindowSizeChangeCallback) { this.mainWindow?.off('windowSizeChange', this.onWindowSizeChangeCallback); } } - /** * 更新control button的可见性 */ @@ -573,18 +525,19 @@ export class AtomicServiceNavigation extends ViewPU { if (this.controlButtonVisible) { this.controlButtonVisible = false; } - } else { + } + else { if (!this.controlButtonVisible) { this.controlButtonVisible = true; } } - } else { + } + else { if (this.controlButtonVisible !== this.navigationBarVisibility) { this.controlButtonVisible = this.navigationBarVisibility; } } } - drawerTitleBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -593,17 +546,14 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); Row.padding({ - start: LengthMetrics.vp(this.currentBreakPoint !== BREAK_POINT_LG ? - this.marginWindowLeft + 36 + 8 : + start: LengthMetrics.vp(this.currentBreakPoint !== BREAK_POINT_LG ? this.marginWindowLeft + 36 + 8 : (this.sideBarAttribute.showSideBar ? 8 : this.marginWindowLeft + 36 + 8)), top: LengthMetrics.vp(10), bottom: LengthMetrics.vp(10), // 在Stack模式，或者非分栏模式下右侧需要有一定padding值，避免超长文本时不能避让menuBar - end: ((this.currentBreakPoint === BREAK_POINT_SM && - (this.mode === NavigationMode.Auto || !this.mode)) || - this.mode === NavigationMode.Stack) ? - LengthMetrics.vp(ATOMIC_SERVICE_CAPSULE_WIDTH + 16) : - LengthMetrics.vp(0) + end: ((this.currentBreakPoint === BREAK_POINT_SM && (this.mode === NavigationMode.Auto || !this.mode)) || + this.mode === NavigationMode.Stack) ? LengthMetrics.vp(ATOMIC_SERVICE_CAPSULE_WIDTH + 16) : + LengthMetrics.vp(0) }); Row.width('100%'); }, Row); @@ -613,13 +563,7 @@ export class AtomicServiceNavigation extends ViewPU { Text.minFontSize(14); Text.maxFontSize(26); Text.height(36); - Text.fontColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.font_primary'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.font_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.fontWeight(FontWeight.Bold); Text.width(0); @@ -629,25 +573,19 @@ export class AtomicServiceNavigation extends ViewPU { Text.pop(); Row.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } }, If); If.pop(); } - maskLayer(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Column.create(); Column.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); - Column.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_mask_thin'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Column.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_mask_thin'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Column.transition(TransitionEffect.opacity(0).animation({ duration: 500, curve: Curve.Linear })); Column.width('100%'); Column.height('100%'); @@ -655,7 +593,6 @@ export class AtomicServiceNavigation extends ViewPU { }, Column); Column.pop(); } - controlButton(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -667,13 +604,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -693,42 +624,19 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ - 'id': -1, - 'type': 40000, - params: ['sys.symbol.open_sidebar'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.open_sidebar'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ - 'id': -1, - 'type': 10002, - params: ['sys.float.ohos_id_text_size_headline7'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); - SymbolGlyph.fontColor([{ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_titlebar_icon'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }]); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); }, SymbolGlyph); Button.pop(); }); - } else if (this.sideBarOptions?.sideBarIcon instanceof SymbolGlyphModifier) { + } + else if (this.sideBarOptions?.sideBarIcon instanceof SymbolGlyphModifier) { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -753,17 +661,12 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.sideBarOptions?.sideBarIcon); - Image.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -787,7 +690,8 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -795,13 +699,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -821,42 +719,19 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ - 'id': -1, - 'type': 40000, - params: ['sys.symbol.close_sidebar'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.close_sidebar'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ - 'id': -1, - 'type': 10002, - params: ['sys.float.ohos_id_text_size_headline7'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); - SymbolGlyph.fontColor([{ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_titlebar_icon'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }]); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); }, SymbolGlyph); Button.pop(); }); - } else if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { + } + else if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -881,17 +756,12 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon); - Image.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -919,41 +789,26 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - sideBar(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); - Row.border({ - width: { + Row.border({ width: { left: 0, right: '1px', top: 0, bottom: 0 }, - color: { - 'id': -1, - 'type': 10001, - params: ['sys.color.comp_divider'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }, + color: { 'id': -1, 'type': 10001, params: ['sys.color.comp_divider'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, style: { right: BorderStyle.Solid - } - }); + } }); Row.alignItems(VerticalAlign.Top); Row.width('100%'); Row.height('100%'); Row.padding({ top: 56 }); Row.focusable(true); Row.defaultFocus(true); - Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_sub_background'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_sub_background'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Row.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -962,7 +817,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.sideBarContent.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -970,7 +826,6 @@ export class AtomicServiceNavigation extends ViewPU { If.pop(); Row.pop(); } - roundIconBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -978,13 +833,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -1007,17 +856,12 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); - Image.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -1039,7 +883,6 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - longIconBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -1047,13 +890,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild(); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.margin({ @@ -1074,7 +911,8 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); @@ -1097,7 +935,6 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - titleBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -1105,7 +942,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.longIconBuilder.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.roundIconBuilder.bind(this)(); }); @@ -1113,7 +951,12 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - + isShowMenus() { + return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; + } + getMenuItemArray() { + return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; + } initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Stack.create(); @@ -1121,15 +964,16 @@ export class AtomicServiceNavigation extends ViewPU { Stack.height('100%'); Stack.background(this.gradientBackground === undefined ? undefined : { builder: () => { - this.BackgroundBuilder.call(this, makeBuilderParameterProxy('BackgroundBuilder', { - primaryColor: () => this.gradientBackground.primaryColor, - secondaryColor: () => this.gradientBackground.secondaryColor, - backgroundTheme: () => this.gradientBackground.backgroundTheme, - mixMode: () => this.gradientBackground.mixMode, - alpha: () => this.gradientBackground.alpha - })); - } - }); + this.BackgroundBuilder.call(this, + makeBuilderParameterProxy('BackgroundBuilder', { + primaryColor: () => this.gradientBackground.primaryColor, + secondaryColor: () => this.gradientBackground.secondaryColor, + backgroundTheme: () => this.gradientBackground.backgroundTheme, + mixMode: () => this.gradientBackground.mixMode, + alpha: () => this.gradientBackground.alpha + }) + ); + }}); Stack.onSizeChange((oldValue, newValue) => { this.navigationWidth = newValue.width; this.navigationHeight = newValue.height; @@ -1144,7 +988,7 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 SideBarContainer.create(this.currentBreakPoint === BREAK_POINT_LG ? SideBarContainerType.Embed : - SideBarContainerType.Overlay); + SideBarContainerType.Overlay); // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 SideBarContainer.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 @@ -1172,14 +1016,14 @@ export class AtomicServiceNavigation extends ViewPU { Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); }, Stack); this.observeComponentCreation2((elmtId, isInitialRender) => { - Navigation.create(this.navPathStack, - { moduleName: 'library', pagePath: '', isUserCreateStack: true }); + Navigation.create(this.navPathStack, { moduleName: 'library', pagePath: '', isUserCreateStack: true }); Navigation.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); - Navigation.title({ - builder: () => { + Navigation.title({ builder: () => { this.drawerTitleBuilder.call(this); - } - }, this.getTitleOption()); + } }, this.getTitleOption()); + Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { + this.menus.call(this); + } } : this.getMenuItemArray()); Navigation.titleMode(NavigationTitleMode.Mini); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); @@ -1204,7 +1048,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.navigationContent.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -1213,13 +1058,13 @@ export class AtomicServiceNavigation extends ViewPU { Navigation.pop(); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && - this.sideBarAttribute.showSideBar && + if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && this.sideBarAttribute.showSideBar && this.currentBreakPoint !== BREAK_POINT_LG && this.showMaskLayer) { this.ifElseBranchUpdateFunction(0, () => { this.maskLayer.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -1229,18 +1074,18 @@ export class AtomicServiceNavigation extends ViewPU { // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 SideBarContainer.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { - Navigation.create(this.navPathStack, - { moduleName: 'library', pagePath: '', isUserCreateStack: true }); - Navigation.title((this.titleOptions?.titleIcon || - (this.titleOptions?.titleBarType && !this.title)) ? { - builder: () => { + Navigation.create(this.navPathStack, { moduleName: 'library', pagePath: '', isUserCreateStack: true }); + Navigation.title((this.titleOptions?.titleIcon || (this.titleOptions?.titleBarType && !this.title)) ? { builder: () => { this.titleBuilder.call(this); - } - } : this.title, this.getTitleOption()); + } } : this.title, this.getTitleOption()); Navigation.titleMode(NavigationTitleMode.Mini); + Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { + this.menus.call(this); + } } : this.getMenuItemArray()); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth)); @@ -1258,7 +1103,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.navigationContent.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -1271,7 +1117,6 @@ export class AtomicServiceNavigation extends ViewPU { If.pop(); Stack.pop(); } - /** * 双色渐变下两种颜色各占50%的实现，把整个画布区域分为两个一样的矩形在绘制 * @param context 画布上下文 @@ -1280,9 +1125,8 @@ export class AtomicServiceNavigation extends ViewPU { */ drawGradientCanvasHalf(context, primaryColor, secondaryColor) { let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; - let grad1 = - context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, - height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); + let grad1 = context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, + height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); let grad2 = context.createLinearGradient(this.navigationWidth * COLOR_RATIO_ONE_FIFTY_PERCENT, height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); grad1.addColorStop(0, this.resourceColorToString(primaryColor)); @@ -1296,7 +1140,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillStyle = grad2; context.fillRect(this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0, this.navigationWidth, height); } - /** * 双色渐变的一种实现，把画布先分为两个大矩形，再把其中一个矩形分为两个小矩形 * @param context 画布上下文 @@ -1313,9 +1156,8 @@ export class AtomicServiceNavigation extends ViewPU { context.fillRect(0, 0, COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, height); let y1 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : 0; - let grad2 = - context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, - height * COLOR_RATIO_FIFTY_PERCENT); + let grad2 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, + height * COLOR_RATIO_FIFTY_PERCENT); grad2.addColorStop(0, this.resourceColorToString(secondaryColor)); grad2.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad2.addColorStop(1, this.resourceColorToString(primaryColor)); @@ -1325,19 +1167,16 @@ export class AtomicServiceNavigation extends ViewPU { height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); let y2 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? COLOR_RATIO_FIFTY_PERCENT * height + COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : height; - let grad3 = - context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, this.navigationWidth, - height * COLOR_RATIO_FIFTY_PERCENT); + let grad3 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, + this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); grad3.addColorStop(0, this.resourceColorToString(secondaryColor)); grad3.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad3.addColorStop(1, this.resourceColorToString(primaryColor)); context.fillStyle = grad3; context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, - height * COLOR_RATIO_FIFTY_PERCENT, - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, + height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT); } - /** * 双色渐变的一种实现，从矩形左上角颜色渐变到右下角 * @param context 画布上下文 @@ -1353,7 +1192,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillStyle = grad; context.fillRect(0, 0, this.navigationWidth, height); } - /** * 双色渐变下透明效果的实现 * @param context 画布上下文 @@ -1372,7 +1210,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillRect(0, height, this.navigationWidth, this.navigationHeight - height); } } - /** * 单色渐变： * @param context 画布上下文 @@ -1392,7 +1229,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillRect(0, height, this.navigationWidth, this.navigationHeight * (1 - COLOR_RATIO_SIXTY_PERCENT)); } } - /** * ResourceColor转化为能作为addColorStop使用的字符串 * @param resource ResourceColor = Color | number | string | Resource,对于Resource转化为直接使用的字符串需要特殊处理 @@ -1402,18 +1238,19 @@ export class AtomicServiceNavigation extends ViewPU { if (typeof resource === 'object') { try { return getContext(this).resourceManager.getStringSync(resource); - } catch (error) { + } + catch (error) { let code = error.code; let message = error.message; hilog.error(0x0000, 'AtomicServiceNavigation', `resourceColorToString - systemResourceManager getStringValue failed, error code: ${code}, message: ${message}.`); } return ''; - } else { + } + else { return resource.toString(); } } - /** * 获取NavigationTitleOptions */ @@ -1424,7 +1261,6 @@ export class AtomicServiceNavigation extends ViewPU { barStyle: this.titleOptions?.barStyle }; } - /** * 更新control button的可见性，并运行动画效果 */ @@ -1442,7 +1278,6 @@ export class AtomicServiceNavigation extends ViewPU { this.showMaskLayer = true; }); } - rerender() { this.updateDirtyElements(); } @@ -1477,7 +1312,6 @@ let sideBarAttributeSet = class sideBarAttributeSet { sideBarAttributeSet = __decorate([ Observed ], sideBarAttributeSet); - /** * 侧边栏辅助管理类 */ @@ -1485,7 +1319,6 @@ class SideBarHelper { constructor() { this.isExpandSideBar = false; } - /** * 注册侧边栏显隐状态变化监听 * @@ -1494,14 +1327,12 @@ class SideBarHelper { registerListener(listener) { this.listener = listener; } - /** * 取消注册监听 */ unregisterListener() { this.listener = undefined; } - /** * 获取侧边栏显示隐藏状态 * @@ -1510,7 +1341,6 @@ class SideBarHelper { isShowSideBar() { return this.isExpandSideBar; } - /** * 设置侧边栏显示隐藏状态 * @@ -1522,7 +1352,6 @@ class SideBarHelper { this.listener(value); } } - /** * 更新侧边栏布局 * @@ -1532,11 +1361,11 @@ class SideBarHelper { updateLayout(breakPoint, layout) { if (breakPoint === BREAK_POINT_LG) { this.updateLGLayout(layout); - } else { + } + else { this.updateCommonLayout(layout); } } - /** * 更新除LG外窗口模式的布局 */ @@ -1544,7 +1373,6 @@ class SideBarHelper { layout.sideBarWidth = SIDE_BAR_OVERLAY_WIDTH; layout.minContentWidthOfSideBar = '100%'; } - /** * 更新LG窗口模式布局 */ @@ -1553,7 +1381,6 @@ class SideBarHelper { layout.minContentWidthOfSideBar = CONTENT_MIN_WIDTH; } } - /** * 标题栏类型 */ @@ -1572,9 +1399,7 @@ export let TitleBarType; */ TitleBarType.DRAWER = 3; })(TitleBarType || (TitleBarType = {})); - //# sourceMappingURL=AtomicServiceNavigation.js.map - export default { AtomicServiceNavigation, MixMode, diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets index d9dff7c3e195399639dcf4a29cd1c4eb8a11830e..95650eb7941af2bc4278f0016f184b9141b80932 100644 --- a/atomicservicenavigation/source/atomicservicenavigation.ets +++ b/atomicservicenavigation/source/atomicservicenavigation.ets @@ -135,6 +135,7 @@ export struct AtomicServiceNavigation { @State private currentBreakPoint: string = BREAK_POINT_SM; @State private sideBarAttribute: sideBarAttributeSet = new sideBarAttributeSet(); @State private controlButtonVisible: boolean = true; + @BuilderParam menus?: CustomBuilder | Array; stateChangeCallback?: Callback; modeChangeCallback?: Callback; @@ -548,6 +549,14 @@ export struct AtomicServiceNavigation { } } + private isShowMenus(): boolean { + return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; + } + + private getMenuItemArray(): undefined | Array { + return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; + } + build() { Stack() { if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { @@ -566,6 +575,7 @@ export struct AtomicServiceNavigation { } .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) .title(this.drawerTitleBuilder(), this.getTitleOption()) + .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.getMenuItemArray()) .titleMode(NavigationTitleMode.Mini) .hideBackButton(true) .hideTitleBar(this.hideTitleBar) @@ -613,6 +623,7 @@ export struct AtomicServiceNavigation { this.title, this.getTitleOption()) .titleMode(NavigationTitleMode.Mini) + .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.getMenuItemArray()) .hideBackButton(true) .hideTitleBar(this.hideTitleBar) .navBarWidth(this.navBarWidth)