openharmony/applications_launcher
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_launcher synced 2025-02-05 23:27:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Desktop drag event rectification

Browse Source 
Signed-off-by: zhangchao <zhangchao338@huawei.com>
This commit is contained in:
zhangchao 2022-08-02 19:48:57 +08:00
parent 6a841d2027
commit 4df82cd7fd
47 changed files with 1596 additions and 2401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README_zh.md
View File

@ -45,6 +45,8 @@ Launcher 采用 扩展的TS语言（eTS）开发，主要的结构如下：
- **DevEco Studio for OpenHarmony**: 版本号大于3.0.0.900，下载安装OpenHarmony SDK API Version 9。（初始的IDE配置可以参考IDE的使用文档）
- 语言版本
- [eTS](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/start-with-ets.md)
- 建议
- 推荐使用本工程下的launcher.p7b文件，路径：signature/launcher.p7b
## 说明
### 使用说明

9
common/index.ets
View File

@ -31,13 +31,13 @@ export { FormConstants } from './src/main/ets/default/constants/FormConstants'
export { StyleConstants } from './src/main/ets/default/constants/StyleConstants'
export { CommonConstants } from './src/main/ets/default/constants/CommonConstants'
export { PresetStyleConstants } from './src/main/ets/default/constants/PresetStyleConstants'
export { AppList } from './src/main/ets/default/uicomponents/AppList'
export { AppGrid } from './src/main/ets/default/uicomponents/AppGrid'
export { AppName } from './src/main/ets/default/uicomponents/AppName'
export { AppIcon } from './src/main/ets/default/uicomponents/AppIcon'
export { AppMenu } from './src/main/ets/default/uicomponents/AppMenu'
export { AppBubble } from './src/main/ets/default/uicomponents/AppBubble'
export { ScrollerComponent } from './src/main/ets/default/uicomponents/ScrollerComponent';
export { RemoveFormDialog } from './src/main/ets/default/uicomponents/RemoveFormDialog'
export { CustomOverlay } from './src/main/ets/default/uicomponents/CustomOverlay'
export { UninstallDialog } from './src/main/ets/default/uicomponents/UninstallDialog'
export { FolderComponent } from './src/main/ets/default/uicomponents/FolderComponent'
export { FormManagerDialog } from './src/main/ets/default/uicomponents/FormManagerDialog'
@ -72,9 +72,12 @@ export { LayoutViewModel } from './src/main/ets/default/viewmodel/LayoutViewMod
export { AppModel } from './src/main/ets/default/model/AppModel'
export { FormModel } from './src/main/ets/default/model/FormModel'
export { SettingsModel } from './src/main/ets/default/model/SettingsModel'
export { PageDesktopModel } from './src/main/ets/default/model/PageDesktopModel'
export { RecentMissionsModel } from './src/main/ets/default/model/RecentMissionsModel'
export { SettingsModelObserver } from './src/main/ets/default/model/SettingsModelObserver'
export { FormListInfoCacheManager } from './src/main/ets/default/cache/FormListInfoCacheManager'
export { SettingItemsConfig } from './src/main/ets/default/configs/SettingItemsConfig'
export { SettingItemsManager } from './src/main/ets/default/settings/SettingItemsManager'
export { SettingItemOptionsChecker } from './src/main/ets/default/settings/SettingItemOptionsChecker'
export { SettingItemOptionsChecker } from './src/main/ets/default/settings/SettingItemOptionsChecker'
export { DragArea } from './src/main/ets/default/interface/DragArea'
export { DragItemPosition } from './src/main/ets/default/interface/DragItemPosition'

185
common/src/main/ets/default/base/BaseDragHandler.ts
View File

@ -14,17 +14,11 @@
*/
import { Log } from '../utils/Log';
import { DragArea } from '../interface/DragArea';
import { CommonConstants } from '../constants/CommonConstants';
const TAG = 'BaseDragHandler';
interface Area {
left: number,
right: number,
top: number,
bottom: number
}
/**
* Drag processing base class, drag processing is mainly responsible for the processing of the following tasks:
* 1.Efficient event distribution based on drag area.
@ -33,13 +27,8 @@ interface Area {
*/
export abstract class BaseDragHandler {
protected mIsInEffectArea = false;
protected mDragEffectArea: Area | undefined;
protected mDragEffectArea: DragArea | undefined;
private mDragStateListener = null;
private mIsDraging = false;
private mSelectItemIndex: number = CommonConstants.INVALID_VALUE;
constructor() {
@ -54,7 +43,7 @@ export abstract class BaseDragHandler {
/**
* Get the position of the drag target.
*/
protected abstract getItemIndex(event: any): number;
protected abstract getItemIndex(x: number, y: number): number;
/**
* Get the object at the target location.
@ -64,14 +53,14 @@ export abstract class BaseDragHandler {
/**
* Set the drag effective area.
*/
setDragEffectArea(effectArea: Area): void {
setDragEffectArea(effectArea: DragArea): void {
this.mDragEffectArea = effectArea;
}
/**
* Get valid area.
*/
protected getDragEffectArea(): Area | undefined {
protected getDragEffectArea(): DragArea | undefined {
return this.mDragEffectArea;
}
@ -121,167 +110,13 @@ export abstract class BaseDragHandler {
AppStorage.SetOrCreate('isLongPress', isLongPress);
}
/**
* Get whether it is a drag within the component.
*
* @return
*/
protected isSelfDrag(): boolean {
return this.mIsDraging;
}
/**
* Get whether the dragged position is dropped outside the component
*/
protected isDropOutSide(): boolean {
return this.isSelfDrag() && !this.mIsInEffectArea;
}
/**
* Notify that the drag event has changed
*/
notifyTouchEventUpdate(event: any): void {
AppStorage.SetOrCreate('dragEvent', event);
let dragLocation = event.touches[0].screenX + '_' + event.touches[0].screenY + '_' + event.type;
AppStorage.SetOrCreate('dragLocation', dragLocation);
if (event.type == CommonConstants.TOUCH_TYPE_UP) {
dragLocation = event.touches[0].screenX + '_' + event.touches[0].screenY;
AppStorage.SetOrCreate('dragEvent', {});
AppStorage.SetOrCreate('dragLocation', dragLocation);
AppStorage.SetOrCreate('dragResult', false);
}
}
/**
* The drag event changes
*/
onTouchEventUpdate(event: any): void {
if (event.type == undefined) {
Log.showInfo(TAG, 'onTouchEventUpdate event:undefined');
const dragResult: boolean = AppStorage.Get('dragResult');
this.onDragEnd(dragResult);
this.setIsLongPress(false);
this.mIsDraging = false;
this.mIsInEffectArea = false;
this.mSelectItemIndex = CommonConstants.INVALID_VALUE;
return;
}
if (event.type == CommonConstants.TOUCH_TYPE_DOWN) {
this.mSelectItemIndex = this.getItemIndex(event);
Log.showInfo(TAG, `onTouchEventUpdate event:down mSelectItemIndex: ${this.mSelectItemIndex}`);
}
if (event.type == CommonConstants.TOUCH_TYPE_MOVE) {
const isLongPress = this.getIsLongPress();
if (!isLongPress && this.mSelectItemIndex != CommonConstants.INVALID_VALUE) {
Log.showInfo(TAG,'onTouchEventUpdate event:move invalid move!');
return;
protected isDragEffectArea(x: number, y: number): boolean {
if (this.mDragEffectArea) {
if (x >= this.mDragEffectArea.left && x <= this.mDragEffectArea.right
&& y >= this.mDragEffectArea.top && y <= this.mDragEffectArea.bottom) {
return true;
}
if (!this.mIsInEffectArea && this.isInEffectArea(event)) {
this.mIsInEffectArea = true;
Log.showInfo(TAG, 'onTouchEventUpdate event:move onDragEnter');
this.onDragEnter(event);
} else if (this.mIsInEffectArea && !this.isInEffectArea(event)) {
this.mIsInEffectArea = false;
Log.showInfo(TAG, 'onTouchEventUpdate event:move onDragLeave');
this.onDragLeave(event);
}
if (this.mIsInEffectArea) {
if (!this.mIsDraging && this.mSelectItemIndex != CommonConstants.INVALID_VALUE) {
this.mIsDraging = true;
Log.showInfo(TAG, 'onTouchEventUpdate event:move onDragStart');
this.onDragStart(event, this.mSelectItemIndex);
} else {
const insertIndex = this.getItemIndex(event);
this.onDragMove(event, insertIndex, this.mSelectItemIndex);
}
}
}
if (event.type == CommonConstants.TOUCH_TYPE_UP) {
if (this.mIsDraging || this.mIsInEffectArea) {
const insertIndex = this.getItemIndex(event);
Log.showInfo(TAG, `onTouchEventUpdate event:up insertIndex: ${insertIndex}`);
const dragResult = this.onDragDrop(event, insertIndex, this.mSelectItemIndex);
if (dragResult) {
AppStorage.SetOrCreate('dragResult', dragResult);
}
}
this.reset();
}
}
reset(): void {
this.setIsLongPress(false);
this.mIsDraging = false;
this.mIsInEffectArea = false;
this.mSelectItemIndex = CommonConstants.INVALID_VALUE;
}
private isInEffectArea(event: any): boolean {
const positionX = event.touches[0].screenX;
const positionY = event.touches[0].screenY;
const effectArea = this.getDragEffectArea();
if (positionX > effectArea.left && positionX < effectArea.right
&& positionY > effectArea.top && positionY < effectArea.bottom) {
return true;
}
return false;
}
/**
* Start dragging
*/
protected onDragStart(event: any, itemIndex: number): void {
const dragItemInfo = this.getItemByIndex(itemIndex);
if (this.mDragStateListener && this.mDragStateListener.onItemDragStart && dragItemInfo) {
this.mDragStateListener.onItemDragStart(event, itemIndex);
}
ContextMenu.close();
this.setDragItemInfo(dragItemInfo);
}
/**
* Drag the position into the target area
*/
protected onDragEnter(event: any): void {
if (this.mDragStateListener && this.mDragStateListener.onItemDragEnter) {
this.mDragStateListener.onItemDragEnter(event);
}
}
/**
* Drag the position away from the target area
*/
protected onDragLeave(event: any): void {
if (this.mDragStateListener && this.mDragStateListener.onItemDragLeave) {
this.mDragStateListener.onItemDragLeave(event);
}
}
/**
* While the drag target is moving
*/
protected onDragMove(event: any, insertIndex: number, itemIndex: number): void {
if (this.mDragStateListener && this.mDragStateListener.onItemDragMove) {
this.mDragStateListener.onItemDragMove(event, insertIndex, itemIndex);
}
}
/**
* drag and drop
*/
protected onDragDrop(event: any, insertIndex: number, itemIndex: number): boolean {
if (this.mDragStateListener && this.mDragStateListener.onItemDrop) {
this.mDragStateListener.onItemDrop(event, insertIndex, itemIndex);
}
return true;
}
/**
* end drag
*/
protected onDragEnd(isSuccess: boolean): void {
if (this.mDragStateListener && this.mDragStateListener.onItemDragEnd) {
this.mDragStateListener.onItemDragEnd();
}
}
}

2
common/src/main/ets/default/base/BaseViewModel.ts
View File

@ -117,7 +117,7 @@ const KEY_NAME = 'name';
}
}
getAppName(cacheKey: string) {
getAppName(cacheKey: string): string {
return this.mResourceManager.getAppResourceCache(cacheKey, KEY_NAME);
}
}

10
common/src/main/ets/default/constants/CommonConstants.ts
View File

@ -277,4 +277,14 @@ export class CommonConstants {
* setting data ability uri
*/
static SETTING_DATA_ABILITY_URI: string = 'dataability:///com.ohos.settingsdata.DataAbility';
/**
* Drag events from the smartDock.
*/
static DRAG_FROM_DOCK = 1;
/**
* Drag events from the workspace.
*/
static DRAG_FROM_DESKTOP = 2;
}

1
common/src/main/ets/default/constants/EventConstants.ts
View File

@ -29,6 +29,7 @@ export const EventConstants = {
EVENT_REQUEST_PAGEDESK_FORM_ITEM_ADD: 'launcher.event.EVENT_REQUEST_PAGEDESK_FORM_ITEM_ADD',
EVENT_SMARTDOCK_INIT_FINISHED: 'launcher.event.EVENT_SMARTDOCK_INIT_FINISHED',
EVENT_BADGE_UPDATE: 'launcher.event.EVENT_BADGE_UPDATE',
EVENT_REQUEST_PAGEDESK_REFRESH: 'EVENT_REQUEST_PAGEDESK_REFRESH', // pageDesktop refresh
// smartdock events
EVENT_REQUEST_DOCK_ITEM_ADD: 'launcher.event.REQUEST_DOCK_ITEM_ADD', //request add app to smartDock

24
common/src/main/ets/default/interface/DragArea.ts Normal file
View File

@ -0,0 +1,24 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Component draggable area.
*/
export interface DragArea {
left: number;
right: number;
top: number;
bottom: number;
}

25
common/src/main/ets/default/interface/DragItemPosition.ts Normal file
View File

@ -0,0 +1,25 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Component draggable area.
*/
export interface DragItemPosition {
page: number;
row: number;
column: number;
X: number;
Y: number;
}

2
common/src/main/ets/default/layoutconfig/PageDesktopLayoutConfig.ts
View File

@ -87,13 +87,13 @@ export class PageDesktopLayoutConfig extends ILayoutConfig {
* @params gridLayoutInfo
*/
updateGridLayoutInfo(gridLayoutInfo: any): void {
this.mGridLayoutInfo = gridLayoutInfo;
const temp = {
layoutDescription: {},
layoutInfo: []
};
temp.layoutDescription = gridLayoutInfo.layoutDescription;
FileUtils.writeStringToFile(JSON.stringify(temp), this.getConfigFileAbsPath());
this.mGridLayoutInfo = gridLayoutInfo;
globalThis.RdbStoreManagerInstance.insertGridLayoutInfo(gridLayoutInfo).then(() => {
Log.showInfo(TAG, 'updateGridLayoutInfo success.');
}).catch((err) => {

2
common/src/main/ets/default/manager/RdbStoreManager.ts
View File

@ -343,7 +343,7 @@ export class RdbStoreManager {
let result = false;
try {
// get deviceType
let deviceType = AppStorage.Get('device');
let deviceType = AppStorage.Get('deviceType');
// init default settings config
if (CheckEmptyUtils.isEmpty(key) || CheckEmptyUtils.isEmpty(value)) {

245
common/src/main/ets/default/model/PageDesktopModel.ts Normal file
View File

@ -0,0 +1,245 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { EventConstants } from '../constants/EventConstants';
import { localEventManager } from '../manager/LocalEventManager';
import { Log } from '../utils/Log';
const TAG = 'PageDesktopModel';
/**
* PageDesktop Model
*/
export class PageDesktopModel {
private isAddByDraggingFlag = false;
private constructor() {
}
/**
* Obtains the pageDesktop data model object.
*
* @return PageDesktopModel
*/
static getInstance(): PageDesktopModel {
if (globalThis.PageDesktopModel == null) {
globalThis.PageDesktopModel = new PageDesktopModel();
}
return globalThis.PageDesktopModel;
}
/**
* Register for the PageDesktop application list add event.
*
* @param listener
*/
registerPageDesktopItemAddEvent(listener): void {
localEventManager.registerEventListener(listener, [
EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_ADD,
EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_DELETE,
EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_UPDATE,
EventConstants.EVENT_REQUEST_PAGEDESK_FORM_ITEM_ADD,
EventConstants.EVENT_SMARTDOCK_INIT_FINISHED,
EventConstants.EVENT_REQUEST_PAGEDESK_REFRESH
]);
}
/**
* register badge update event.
*
* @param listener
*/
registerPageDesktopBadgeUpdateEvent(listener): void {
localEventManager.registerEventListener(listener, [
EventConstants.EVENT_BADGE_UPDATE
]);
}
/**
* Unregister application list change listener.
*
* @param listener
*/
unregisterEventListener(listener): void {
localEventManager.unregisterEventListener(listener);
}
sendDockItemChangeEvent(appInfo): void {
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_DOCK_ITEM_ADD, appInfo);
}
/**
* delete blank page from layoutInfo
*
* @param layoutInfo
* @param page
*/
deleteBlankPageFromLayoutInfo(layoutInfo, page): boolean {
for (let i = 0; i < layoutInfo.layoutInfo.length; i++) {
if (layoutInfo.layoutInfo[i].page == page) {
return false;
}
}
layoutInfo.layoutDescription.pageCount--;
for (let m = 0; m < layoutInfo.layoutInfo.length; m++) {
if (layoutInfo.layoutInfo[m].page > page) {
layoutInfo.layoutInfo[m].page--;
}
}
return true;
}
/**
* get the addByDragging flag
*/
isAddByDragging(): boolean {
return this.isAddByDraggingFlag;
}
/**
* set the addByDragging flag
* @param {boolean} isAddByDragging
*/
setAddByDragging(isAddByDragging: boolean): void {
this.isAddByDraggingFlag = isAddByDragging
}
updateAppItemLayoutInfo(info, item): void {
const pageCount = info.layoutDescription.pageCount;
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
const layoutInfo = info.layoutInfo;
// current page has space
let isNeedNewPage = true;
pageCycle: for (let i = 0; i < pageCount; i++) {
for (let y = 0; y < row; y++) {
for (let x = 0; x < column; x++) {
if (this.isPositionValid(info, item, i, x, y)) {
Log.showInfo(TAG, `updateAppItemLayoutInfo isPositionValid: x:${x} y:${y} page:${i}`);
isNeedNewPage = false;
layoutInfo.push({
bundleName: item.bundleName,
typeId: item.typeId,
abilityName: item.abilityName,
moduleName: item.moduleName,
keyName: item.keyName,
area: item.area,
page: i,
column: x,
row: y
});
break pageCycle;
}
}
}
}
if (isNeedNewPage) {
layoutInfo.push({
bundleName: item.bundleName,
typeId: item.typeId,
abilityName: item.abilityName,
moduleName: item.moduleName,
keyName: item.keyName,
area: item.area,
page: pageCount,
column: 0,
row: 0
});
++info.layoutDescription.pageCount;
}
}
updatePageDesktopLayoutInfo(info, item): boolean {
const pageCount = info.layoutDescription.pageCount;
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
// current page has space
let isNeedNewPage = true;
const curPageIndex = this.getPageIndex();
const max = pageCount - 1 > curPageIndex ? curPageIndex + 1 : pageCount - 1;
pageCycle: for (let i = curPageIndex; i <= max; i++) {
for (let y = 0; y < row; y++) {
for (let x = 0; x < column; x++) {
if (this.isPositionValid(info, item, i, x, y)) {
Log.showInfo(TAG, `updatePageDesktopLayoutInfo isPositionValid: x:${x} y:${y} page:${i}`);
isNeedNewPage = false;
item.page = i;
item.column = x;
item.row = y;
break pageCycle;
}
}
}
}
if (isNeedNewPage) {
item.page = curPageIndex + 1;
item.column = 0;
item.row = 0;
}
return isNeedNewPage;
}
private isPositionValid(info, item, page, startColumn, startRow): boolean {
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
if ((startColumn + item.area[0]) > column || (startRow + item.area[1]) > row) {
return false;
}
let isValid = true;
for (let x = startColumn; x < startColumn + item.area[0]; x++) {
for (let y = startRow; y < startRow + item.area[1]; y++) {
if (this.isPositionOccupied(info, page, x, y)) {
isValid = false;
break;
}
}
}
return isValid;
}
private isPositionOccupied(info, page, column, row): boolean {
const pageCount = info.layoutDescription.pageCount;
const layoutInfo = info.layoutInfo;
// current page has space
for (const layout of layoutInfo) {
if (layout.page == page) {
const xMatch = (column >= layout.column) && (column < layout.column + layout.area[0]);
const yMatch = (row >= layout.row) && (row < layout.row + layout.area[1]);
if (xMatch && yMatch) {
return true;
}
}
}
return false;
}
/**
* Changing the Desktop Page Number.
*
* @param idx: Page number
*/
setPageIndex(idx: number): void {
Log.showInfo(TAG, 'setPageIndex: ' + idx);
AppStorage.SetOrCreate('pageIndex', idx);
}
/**
* Get the Desktop Page Number.
*/
getPageIndex(): number {
return AppStorage.Get('pageIndex');
}
}

13
common/src/main/ets/default/uicomponents/AppBubble.ets
View File

@ -43,11 +43,13 @@ export struct AppBubble {
appName: string = '';
useCache: boolean = true;
shortCutEnabled: boolean = false;
dragStart: Function;
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
AppMenu({
menuInfoList: this.menuInfo
menuInfoList: this.menuInfo,
isContextMenu: true
})
}
.width(StyleConstants.CONTEXT_MENU_WIDTH)
@ -79,6 +81,9 @@ export struct AppBubble {
marginTop: this.mIconNameMargin
})
}
.onDragStart((event: DragEvent, extraParams: string) => {
return this.dragStart(event);
})
.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
.bindContextMenu(this.MenuBuilder, ResponseType.RightClick)
.width(this.isSelect ? this.iconSize + StyleConstants.DEFAULT_40 : StyleConstants.PERCENTAGE_100)
@ -87,12 +92,6 @@ export struct AppBubble {
.borderRadius(this.isSelect ? StyleConstants.DEFAULT_15 : StyleConstants.DEFAULT_0)
.padding(this.isSelect ? { left: StyleConstants.DEFAULT_20,
right: StyleConstants.DEFAULT_20, top: this.mPaddingTop } : { top: this.mPaddingTop })
.gesture(
LongPressGesture({ repeat: false })
.onAction((event: GestureEvent) => {
AppStorage.SetOrCreate('isLongPress', true);
})
)
}
.parallelGesture(
LongPressGesture({ repeat: false })

343
common/src/main/ets/default/uicomponents/AppList.ets
View File

@ -1,343 +0,0 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Log } from '../utils/Log';
import { AppItemInfo } from '../bean/AppItemInfo';
import { StyleConstants } from '../constants/StyleConstants';
import { CommonConstants } from '../constants/CommonConstants';
import { ResourceManager } from '../manager/ResourceManager';
import { AppListStyleConfig } from '../layoutconfig/AppListStyleConfig';
import { AppIcon } from './AppIcon';
import { AppName } from './AppName';
import { AppMenu } from './AppMenu';
import ScrollerComponent from './ScrollerComponent';
let mAppListStyleConfig: AppListStyleConfig = null;
const TAG = 'AppList';
@Component
export struct AppList {
@StorageLink('sysUiRecentOnClickEvent') @Watch('sysUiRecentOnClick') sysUiRecentOnClickEvent: number = 0;
@State isHover: boolean = false;
@State showPopup: boolean = false;
@State onHoverItem: string = '';
@Link appList: Array<AppItemInfo>;
appListStyleConfig: AppListStyleConfig;
onItemClick: Function = null;
onItemLongPress: Function = null;
buildMenu: Function = null;
onHoverEvent: Function = null;
isScrollHover: boolean = false;
popup: {
show: boolean,
showItem: string,
popup
} = { show: false, showItem: '', popup: null };
onClickWithPopup: boolean = false;
autoCancel: boolean = false;
private updateData: Function = null;
aboutToAppear(): void {
mAppListStyleConfig = this.appListStyleConfig;
}
private sysUiRecentOnClick() {
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
}
@Builder popupBuilder() {
Column() {
ScrollerComponent({
popupHide: () => {
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
},
updateData: (show, bundleName, callback) => {
this.updateData = () => {
callback();
setTimeout(() => {
this.onHoverEvent(true, bundleName);
}, 100)
}
if (show) {
this.updateData();
this.getShowPopup();
return;
}
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
}
})
}.onHover((isScrollHover: boolean) => {
this.autoCancel = false;
if (isScrollHover) {
this.isScrollHover = true;
} else {
this.isScrollHover = false;
}
this.getShowPopup();
})
.onClick(() => {
this.getShowPopup();
})
}
async getShowPopup() {
await this.delay(500);
if (this.popup.show || this.isScrollHover) {
this.showPopup = true;
} else {
this.showPopup = false;
}
return this.showPopup;
}
delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
build() {
List({ space: mAppListStyleConfig.mListItemGap }) {
ForEach(this.appList, (item) => {
ListItem() {
if (mAppListStyleConfig.mNameDisplaySide) {
HorizontalListItem({
appInfo: item,
buildMenu: this.buildMenu,
itemOffset: mAppListStyleConfig.mItemOffset
})
} else {
VerticalListItem({
appInfo: item,
onItemLongPress: this.onItemLongPress
})
}
}
.bindPopup(this.showPopup && item.bundleName == this.onHoverItem && !AppStorage.Get('smartDockShowMenu') as boolean, {
builder: this.popupBuilder,
placement: Placement.Top,
enableArrow: true,
autoCancel: this.autoCancel,
maskColor: ('rgba(250,250,250,0)'),
popupColor: ('rgba(250,250,250,0.6)'),
onStateChange: (e) => {
if (!e.isVisible && this.autoCancel) {
this.popup = { show: false, showItem: '', popup: null };
this.onHoverItem = '';
this.onClickWithPopup = false;
this.autoCancel = false;
this.showPopup = false;
AppStorage.SetOrCreate('snapshotList', []);
AppStorage.SetOrCreate('recentShowPopup', false);
}
if (this.updateData) {
this.updateData();
this.updateData = () => {
}
}
}
})
.onHover((isHover) => {
this.autoCancel = false;
if (this.onHoverEvent) {
this.onHoverEvent(isHover, item.bundleName);
this.onHoverItem = item.bundleName;
this.getShowPopup();
}
})
.onClick((event: ClickEvent) => {
this.onItemClick(event, item);
this.onClickWithPopup = AppStorage.Get('recentShowPopup');
Log.showInfo(TAG, `onClick this.onClickWithPopup: ${this.onClickWithPopup}`);
if (this.onClickWithPopup) {
this.autoCancel = true;
this.showPopup = true
this.onHoverItem = item.bundleName;
}
AppStorage.SetOrCreate('recentShowPopup', false);
})
}, (item) => JSON.stringify(item))
}
.width(StyleConstants.PERCENTAGE_100)
.height(StyleConstants.PERCENTAGE_100)
.listDirection(mAppListStyleConfig.mListDirection)
}
}
@Component
struct HorizontalListItem {
@State isShow: boolean = false;
appInfo: AppItemInfo = null;
buildMenu: Function = null;
itemOffset: {} = { x: 0, y: 0 }
private menuInfo;
aboutToAppear(): void {
this.menuInfo = this.buildMenu(this.appInfo);
}
private getLongPress(): boolean {
return AppStorage.Get('isLongPress');
}
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
AppMenu({
menuInfoList: this.menuInfo
})
}
.width(StyleConstants.CONTEXT_MENU_WIDTH)
.height(StyleConstants.DEFAULT_40 * this.menuInfo.length + StyleConstants.DEFAULT_8)
}
build() {
if (this.menuInfo.length > 0) {
Column() {
AppItem({
appInfo: this.appInfo
})
}
.gesture(
LongPressGesture({ repeat: false })
.onAction((event: GestureEvent) => {
this.isShow = true;
AppStorage.SetOrCreate('isLongPress', true);
})
)
.bindPopup(this.isShow, {
builder: this.MenuBuilder,
placement: Placement.Top,
popupColor: Color.White,
onStateChange: (e) => {
if (!e.isVisible) {
this.isShow = false;
}
AppStorage.SetOrCreate('smartDockShowMenu', e.isVisible)
},
autoCancel: true
})
.onTouch((event: TouchEvent) => {
if (event.type == CommonConstants.TOUCH_TYPE_MOVE && this.getLongPress()) {
this.isShow = false;
}
})
.onMouse((event: MouseEvent) => {
Log.showInfo(TAG, `onMouse MouseType: ${event.button}`);
if (event.button == MouseButton.Right) {
event.stopPropagation();
AppStorage.SetOrCreate('selectDesktopAppItem', '');
this.isShow = true;
}
})
.offset(this.itemOffset)
} else {
Column() {
AppItem({
appInfo: this.appInfo
})
}
}
}
}
@Component
struct VerticalListItem {
appInfo: AppItemInfo = null;
onItemLongPress: Function = null;
build() {
Column() {
AppIcon({
iconSize: mAppListStyleConfig.mIconSize,
iconId: this.appInfo.appIconId,
bundleName: this.appInfo.bundleName,
moduleName: this.appInfo.moduleName,
icon: ResourceManager.getInstance().getCachedAppIcon(this.appInfo.appIconId,
this.appInfo.bundleName, this.appInfo.moduleName),
badgeNumber: CommonConstants.BADGE_DISPLAY_HIDE
})
if (mAppListStyleConfig.mWithAppName) {
Column() {
AppName({
nameHeight: mAppListStyleConfig.mNameHeight,
nameSize: mAppListStyleConfig.mNameSize,
nameFontColor: mAppListStyleConfig.mNameFontColor,
bundleName: this.appInfo.bundleName,
moduleName: this.appInfo.moduleName,
appName: this.appInfo.appName,
labelId: this.appInfo.appLabelId
})
}
.margin({
top: mAppListStyleConfig.mNameIconGap
})
}
}
.gesture(
LongPressGesture({ repeat: false })
.onAction((event: GestureEvent) => {
if (this.onItemLongPress != null) {
this.onItemLongPress(event, this.appInfo);
}
})
)
.width(mAppListStyleConfig.mListItemWidth)
.height(mAppListStyleConfig.mListItemHeight)
.padding(mAppListStyleConfig.mItemPadding)
.backgroundColor(mAppListStyleConfig.mItemBackgroundColor)
.borderRadius(mAppListStyleConfig.mItemBorderRadius)
}
}
@Component
struct AppItem {
appInfo: AppItemInfo = null;
build() {
Row() {
AppIcon({
iconSize: mAppListStyleConfig.mIconSize,
iconId: this.appInfo.appIconId,
bundleName: this.appInfo.bundleName,
moduleName: this.appInfo.moduleName,
icon: ResourceManager.getInstance().getCachedAppIcon(this.appInfo.appIconId,
this.appInfo.bundleName, this.appInfo.moduleName),
badgeNumber: this.appInfo.badgeNumber
})
if (mAppListStyleConfig.mWithAppName) {
Row() {
AppName({
nameHeight: mAppListStyleConfig.mNameHeight,
nameSize: mAppListStyleConfig.mNameSize,
nameFontColor: mAppListStyleConfig.mNameFontColor,
bundleName: this.appInfo.bundleName,
moduleName: this.appInfo.moduleName,
appName: this.appInfo.appName,
labelId: this.appInfo.appLabelId
})
}
.margin({
left: mAppListStyleConfig.mNameIconGap
})
}
}
.width(mAppListStyleConfig.mListItemWidth)
.height(mAppListStyleConfig.mListItemHeight)
.backgroundColor(mAppListStyleConfig.mItemBackgroundColor)
.borderRadius(mAppListStyleConfig.mItemBorderRadius)
}
}

11
common/src/main/ets/default/uicomponents/AppMenu.ets
View File

@ -23,6 +23,7 @@ const TAG = 'AppMenu';
@Component
export struct AppMenu {
isContextMenu: boolean = false;
menuInfoList: Array<MenuInfo> = new Array<MenuInfo>();
getMenuInfoList: Function;
menuMode: number = CommonConstants.MENU_UI_MODE_LIGHT;
@ -62,7 +63,8 @@ export struct AppMenu {
Column() {
HorizontalMenuItem({
menuInfo: item,
menuMode: this.menuMode
menuMode: this.menuMode,
isContextMenu: this.isContextMenu
})
}
}, item => JSON.stringify(item))
@ -81,7 +83,8 @@ export struct AppMenu {
Column() {
HorizontalMenuItem({
menuInfo: item,
menuMode: this.menuMode
menuMode: this.menuMode,
isContextMenu: this.isContextMenu
})
}
}, item => JSON.stringify(item))
@ -102,6 +105,7 @@ export struct AppMenu {
struct HorizontalMenuItem {
@State shortcutIcon: string = StyleConstants.DEFAULT_ICON;
@State shortcutName: string = "";
isContextMenu: boolean;
private mResourceManager;
menuInfo: MenuInfo;
menuMode: number = CommonConstants.MENU_UI_MODE_LIGHT;
@ -175,6 +179,9 @@ struct HorizontalMenuItem {
.width(235)
.onClick(() => {
this.menuInfo.onMenuClick();
if (this.isContextMenu) {
ContextMenu.close();
}
})
}
}

141
common/src/main/ets/default/uicomponents/CustomOverlay.ets
View File

@ -1,141 +0,0 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import OverlayAppIcon from './OverlayAppIcon';
import { FolderComponent } from './FolderComponent';
import { FormItemComponent } from './FormItemComponent';
import { MenuInfo } from '../bean/MenuInfo'
import { StyleConstants } from '../constants/StyleConstants';
import { ResourceManager } from '../manager/ResourceManager';
import { CommonConstants } from '../constants/CommonConstants';
@Component
export struct CustomOverlay {
@State @Watch('showStateChange') overLayShow: boolean = false;
@State overLayAlpha: number = 0;
@StorageLink('withBlur') withBlur: boolean = true;
@StorageLink('overlayPositionX') overlayPositionX: number = 0;
@StorageLink('overlayPositionY') overlayPositionY: number = 0;
@StorageLink('overlayMode') @Watch('updateOverlayData') overlayMode: number = CommonConstants.OVERLAY_TYPE_HIDE;
overlayData: any = null;
private updateOverlayData() {
this.overlayData = AppStorage.Get('overlayData');
if (this.overlayMode == CommonConstants.OVERLAY_TYPE_HIDE) {
this.overLayShow = false;
} else {
this.overLayShow = true;
}
}
private showStateChange() {
if (this.overLayShow) {
this.showOverLay();
} else {
this.hideOverLay();
}
}
private hideOverLay() {
this.overlayMode = CommonConstants.OVERLAY_TYPE_HIDE;
this.overLayAlpha = 0;
this.overlayPositionX = 0;
this.overlayPositionY = 0;
this.withBlur = true;
}
private showOverLay() {
animateTo({
duration: 150,
curve: Curve.EaseIn
}, () => {
this.overLayAlpha = 1;
})
}
build() {
Stack() {
if (this.withBlur) {
Column()
.blur(CommonConstants.OVERLAY_BLUR_RADIUS)
.width("100%")
.height("100%")
}
if (this.overlayMode == CommonConstants.OVERLAY_TYPE_APP_ICON) {
Column() {
OverlayAppIcon({
iconSize: this.overlayData.iconSize,
appIcon: this.overlayData.appInfo.appIconId,
icon: ResourceManager.getInstance()
.getCachedAppIcon(this.overlayData.appInfo.appIconId,
this.overlayData.appInfo.bundleName, this.overlayData.appInfo.moduleName),
bundleName: this.overlayData.appInfo.bundleName,
badgeNumber: CommonConstants.BADGE_DISPLAY_HIDE
})
}
.position({
x: this.overlayPositionX,
y: this.overlayPositionY,
})
} else if (this.overlayMode == CommonConstants.OVERLAY_TYPE_FOLDER) {
Column() {
FolderComponent({
showFolderName: false,
nameFontColor: this.overlayData.nameFontColor,
folderNameHeight: 0,
folderNameSize: 0,
mFolderItem: this.overlayData.folderInfo,
folderGridSize:this.overlayData.folderGridSize,
appIconSize: this.overlayData.appIconSize,
gridMargin: this.overlayData.gridMargin,
gridGap: this.overlayData.gridGap,
buildMenu: (folderItem) => {
return new Array<MenuInfo>();
}
})
}
.position({
x: this.overlayPositionX,
y: this.overlayPositionY,
})
.height(this.overlayData.folderGridSize)
.width(this.overlayData.folderGridSize)
} else if (this.overlayMode == CommonConstants.OVERLAY_TYPE_CARD) {
Column() {
FormItemComponent({
formItem: this.overlayData.formInfo,
formItemWidth: this.overlayData.formWidth,
formItemHeight: this.overlayData.formHeight,
formNameHeight: 0,
formNameSize: 0
})
}
.position({
x: this.overlayPositionX,
y: this.overlayPositionY,
})
.height(this.overlayData.formHeight)
.width(this.overlayData.formWidth)
}
}
.width(StyleConstants.PERCENTAGE_100)
.height(StyleConstants.PERCENTAGE_100)
.visibility(this.overLayShow ? Visibility.Visible : Visibility.None)
.opacity(this.overLayAlpha)
.onClick(() => {
this.hideOverLay();
})
}
}

4
common/src/main/ets/default/uicomponents/FolderComponent.ets
View File

@ -65,6 +65,7 @@ export struct FolderComponent {
folderNameLines: number = PresetStyleConstants.DEFAULT_APP_NAME_LINES;
iconNameMargin: number = PresetStyleConstants.DEFAULT_ICON_NAME_GAP;
isSelect?: boolean;
dragStart: Function;
aboutToAppear(): void {
Log.showInfo(TAG, `aboutToAppear start`);
@ -274,6 +275,9 @@ export struct FolderComponent {
})
}
}
.onDragStart((event: DragEvent) => {
return this.dragStart(event);
})
.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
.bindContextMenu(this.MenuBuilder, ResponseType.RightClick)
.padding(this.gridMargin)

4
common/src/main/ets/default/uicomponents/FormItemComponent.ets
View File

@ -42,6 +42,7 @@ export struct FormItemComponent {
mPaddingTop: number = StyleConstants.DEFAULT_10;
getFormId: (id: number) => void;
clickForm?: Function = null;
dragStart: Function;
aboutToAppear(): void {
this.mFormModel = FormModel.getInstance();
@ -114,5 +115,8 @@ export struct FormItemComponent {
.width(StyleConstants.PERCENTAGE_100)
.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
.bindContextMenu(this.MenuBuilder, ResponseType.RightClick)
.onDragStart((event: DragEvent, extraParams: string) => {
return this.dragStart(event);
})
}
}

56
common/src/main/ets/default/uicomponents/OverlayAppIcon.ets
View File

@ -1,56 +0,0 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Log } from '../utils/Log';
import { ResourceManager } from '../manager/ResourceManager';
const TAG = 'OverlayAppIcon';
@Component
export default struct OverlayAppIcon {
@Prop iconSize: number;
@Prop appIcon: string;
@Prop bundleName: string;
@Prop icon: string;
// 0.9(pressed size) / 1.05(hover size) = 0.8571
@State overlaySize: number = 0.8571;
useCache: boolean = true;
@Prop badgeNumber: number;
@State badge: number = 0;
private mResourceManager;
private mDefaultAppIcon;
aboutToAppear(): void {
this.mResourceManager = ResourceManager.getInstance();
}
build() {
Column() {
Image(this.icon)
.width(this.iconSize)
.height(this.iconSize)
.onComplete(() => {
Log.showInfo(TAG, 'OverlayAppIcon complete');
this.overlaySize = 1;
AppStorage.SetOrCreate('isOverlayComplete', true);
})
}
.width(this.iconSize)
.height(this.iconSize)
.scale({ x: this.overlaySize, y: this.overlaySize })
.animation({ duration: 100 })
}
}

2
common/src/main/ets/default/uicomponents/ScrollerComponent.ets
View File

@ -17,7 +17,7 @@ import { StyleConstants } from '../constants/StyleConstants';
import { amsMissionManager }from '../manager/AmsMissionManager'
@Component
export default struct ScrollerComponent {
export struct ScrollerComponent {
@StorageLink('snapshotList') dataList: {
name: any,
image: any,

1
feature/appcenter/index.ets
View File

@ -13,7 +13,6 @@
* limitations under the License.
*/
export { AppListLayout } from './src/main/ets/default/layout/AppListLayout'
export { AppGridLayout } from './src/main/ets/default/layout/AppGridLayout'
export { AppGridViewModel } from './src/main/ets/default/viewmodel/AppGridViewModel'
export { AppListViewModel } from './src/main/ets/default/viewmodel/AppListViewModel'

150
feature/appcenter/src/main/ets/default/layout/AppListLayout.ets
View File

@ -1,150 +0,0 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Log } from '@ohos/common';
import { StyleConstants } from '@ohos/common';
import { AppList } from '@ohos/common';
import { UninstallDialog } from '@ohos/common';
import { ResourceManager } from '@ohos/common';
import { layoutConfigManager } from '@ohos/common';
import { AppListViewModel } from '../viewmodel/AppListViewModel';
import AppcenterConstants from '../common/constants/AppcenterConstants';
import AppCenterListStyleConfig from '../common/AppCenterListStyleConfig';
const TAG = 'AppListLayout';
let mAppListViewModel: AppListViewModel;
@Component
export struct AppListLayout {
@StorageLink('listInfo') appListInfo: [] = [];
@StorageLink('uninstallAppInfo') appInfo: any = {};
dialogName: string = "";
mAppCenterListStyleConfig: AppCenterListStyleConfig = null;
aboutToAppear(): void {
mAppListViewModel = AppListViewModel.getInstance();
mAppListViewModel.getAppList();
mAppListViewModel.registerAppListChangeCallback();
this.mAppCenterListStyleConfig = layoutConfigManager.getStyleConfig(AppCenterListStyleConfig.APP_LIST_STYLE_CONFIG, AppcenterConstants.FEATURE_NAME);
ResourceManager.getInstance().getStringByResource($r('app.string.uninstall')).then((resName) => {
this.dialogName = resName;
});
}
dialogController: CustomDialogController = new CustomDialogController({
builder: ShowDialog({ action: this.openUninstallDialog }),
cancel: this.cancelDialog,
autoCancel: true,
customStyle: true
});
uninstallDialogController: CustomDialogController = new CustomDialogController({
builder: UninstallDialog({
cancel: () => {},
confirm: () => {
mAppListViewModel.uninstallApp(this.appInfo.bundleName, this.appInfo.isUninstallAble);
},
dialogName: this.dialogName,
dialogContent: this.appInfo.appName + ' ?',
}),
cancel: this.cancelDialog,
autoCancel: true,
customStyle: true
});
openUninstallDialog() {
this.dialogController.close();
this.uninstallDialogController.open();
}
cancelDialog() {
Log.showDebug(TAG, 'Cancel Dialog');
}
build() {
Column() {
AppList({
appList: $appListInfo,
appListStyleConfig: this.mAppCenterListStyleConfig,
onItemClick: (event, item) => {
mAppListViewModel.openApplication(item.abilityName, item.bundleName, item.moduleName);
},
onItemLongPress: (event, item) => {
AppStorage.SetOrCreate('uninstallAppInfo', item);
this.dialogController.open();
}
})
}
}
}
@CustomDialog
struct ShowDialog {
@StorageLink('uninstallAppInfo') appInfo: any = {};
controller: CustomDialogController;
cancel: () => void;
action: () => void;
build() {
Column() {
Text($r('app.string.launcher_edit'))
.fontSize(StyleConstants.DEFAULT_BADGE_FONT_SIZE)
.fontColor(StyleConstants.TEXT_COLOR_PRIMARY)
.margin({top : StyleConstants.DEFAULT_DIALOG_RADIUS, bottom: StyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN})
Flex({justifyContent: FlexAlign.SpaceEvenly}) {
Button() {
Text($r('app.string.into_settings'))
.fontSize(StyleConstants.DEFAULT_BADGE_FONT_SIZE)
.fontColor(StyleConstants.BUTTON_FONT_COLOR)
}
.backgroundColor(StyleConstants.DEFAULT_BG_COLOR)
.height(StyleConstants.DEFAULT_BUTTON_HEIGHT)
.width(StyleConstants.DEFAULT_BUTTON_WIDTH)
.onClick(() => {
mAppListViewModel.intoSetting();
this.controller.close();
})
Divider()
.vertical(true)
.color(StyleConstants.DEFAULT_DIVIDER_COLOR)
.height(StyleConstants.DEFAULT_BUTTON_HEIGHT)
Button() {
Text($r('app.string.uninstall'))
.fontSize(StyleConstants.DEFAULT_BADGE_FONT_SIZE)
.fontColor(StyleConstants.DEFAULT_COLOR_ERROR)
}
.backgroundColor(StyleConstants.DEFAULT_BG_COLOR)
.height(StyleConstants.DEFAULT_BUTTON_HEIGHT)
.width(StyleConstants.DEFAULT_BUTTON_WIDTH)
.onClick(() => {
mAppListViewModel.uninstallApp(this.appInfo.bundleName, this.appInfo.isUninstallAble);
this.controller.close();
})
}
}
.backgroundColor(Color.White)
.padding({
bottom: StyleConstants.DEFAULT_DIALOG_BOTTOM_MARGIN
})
.border({
radius: StyleConstants.DEFAULT_DIALOG_RADIUS
})
.width(StyleConstants.DEFAULT_DIALOG_WIDTH)
}
}

361
feature/bigfolder/src/main/ets/default/common/BigFolderDragHandler.ts
View File

@ -1,361 +0,0 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Log } from '@ohos/common';
import { EventConstants } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import { localEventManager } from '@ohos/common';
import { layoutConfigManager } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { BaseDragHandler } from '@ohos/common';
import { AppGridStyleConfig } from '@ohos/common';
import { BigFolderModel } from '../model/BigFolderModel';
import { BigFolderViewModel } from '../viewmodel/BigFolderViewModel';
import { BigFolderConstants } from './constants/BigFolderConstants';
const TAG = 'BigFolderDragHandler';
const DRAG_DROP_DELAY = 500;
/**
* bigfolder drag handler class
*/
export default class BigFolderDragHandler extends BaseDragHandler {
private mFolderCoordinateData = {
gridXAxis: [],
gridYAxis: []
};
private mStartIndex = 0;
private mEndIndex = 0;
private mStartPosition: any = null;
private mEndPosition: any = null;
private readonly mSettingsModel: SettingsModel;
private readonly mBigFolderModel: BigFolderModel = null;
private mFolderAppList: any[] = [];
private readonly mBigFolderViewModel: BigFolderViewModel = null;
private mOpenGridConfig;
private mGridItemHeight: any = null;
private mGridItemWidth: any = null;
private readonly mDesktopStyleConfig: AppGridStyleConfig = null;
private hasDroped = false;
constructor() {
super();
this.mBigFolderModel = BigFolderModel.getInstance();
this.mBigFolderViewModel = BigFolderViewModel.getInstance();
this.mDesktopStyleConfig = layoutConfigManager.getStyleConfig(AppGridStyleConfig.APP_GRID_STYLE_CONFIG,
BigFolderConstants.PAGEDESKTOP_FEATURE_NAME);
}
static getInstance(): BigFolderDragHandler {
if (globalThis.BigFolderDragHandlerInstance == null) {
globalThis.BigFolderDragHandlerInstance = new BigFolderDragHandler();
}
return globalThis.BigFolderDragHandlerInstance;
}
setDragEffectArea(effectArea): void {
super.setDragEffectArea(effectArea);
this.updateFolderParam(effectArea);
}
getEffectArea(): any {
return this.getDragEffectArea();
}
private updateFolderParam(effectArea): void {
const gridWidth = effectArea.right - effectArea.left;
const gridHeight = effectArea.bottom - effectArea.top;
Log.showDebug(TAG, `Launcher OpenFolder updateGridParam gridWidth: ${gridWidth}, gridHeight: ${gridHeight}`);
this.mOpenGridConfig = this.mBigFolderModel.getFolderOpenLayout();
const column = this.mOpenGridConfig.column;
const row = this.mOpenGridConfig.row;
this.mGridItemHeight = gridHeight / row;
Log.showDebug(TAG, `this.mGridItemHeight ${this.mGridItemHeight}`);
this.mGridItemWidth = gridWidth / column;
Log.showDebug(TAG, `this.mGridItemWidth ${this.mGridItemWidth}`);
Log.showDebug(TAG, `Launcher BigFolder updateGridParam column: ${column}, row: ${row}`);
this.mFolderCoordinateData.gridYAxis = [];
for (let i = 1; i <= row; i++) {
const touchPositioningY = this.mGridItemHeight * i + effectArea.top;
this.mFolderCoordinateData.gridYAxis.push(touchPositioningY);
}
this.mFolderCoordinateData.gridXAxis = [];
for (let i = 1; i <= column; i++) {
const touchPositioningX = this.mGridItemWidth * i + effectArea.left;
this.mFolderCoordinateData.gridXAxis.push(touchPositioningX);
}
}
protected getDragRelativeData(): any {
const openFolderData: {
layoutInfo: [[]]
} = AppStorage.Get('openFolderData');
return openFolderData;
}
protected getItemIndex(event: any): number {
const x = event.touches[0].screenX;
const y = event.touches[0].screenY;
let rowVal = CommonConstants.INVALID_VALUE;
for (let index = 0; index < this.mFolderCoordinateData.gridYAxis.length; index++) {
if (this.mFolderCoordinateData.gridYAxis[index] > y) {
rowVal = index;
break;
}
}
let columnVal = CommonConstants.INVALID_VALUE;
for (let index = 0; index < this.mFolderCoordinateData.gridXAxis.length; index++) {
if (this.mFolderCoordinateData.gridXAxis[index] > x) {
columnVal = index;
break;
}
}
const column = this.mOpenGridConfig.column;
Log.showDebug(TAG, `Launcher BigFolder getItemIndex column: ${column}, rowVal: ${rowVal}, columnVal: ${columnVal}`);
if (rowVal != CommonConstants.INVALID_VALUE && columnVal != CommonConstants.INVALID_VALUE) {
return rowVal * column + columnVal;
}
return CommonConstants.INVALID_VALUE;
}
protected getItemByIndex(index: number): any {
const pageIndex: number = this.mBigFolderViewModel.getIndex();
Log.showDebug(TAG, `getItemByIndex: ${index}, pageIndex: ${pageIndex}`);
const dataObj = this.getDragRelativeData().layoutInfo;
if (index >= 0 && pageIndex < dataObj.length && index < dataObj[pageIndex].length) {
return dataObj[pageIndex][index];
}
return null;
}
private getTouchPosition(x, y): any {
const pageIndex: number = this.mBigFolderViewModel.getIndex();
const position = {
page: pageIndex,
row: 0,
column: 0,
X: x,
Y: y,
};
for (let i = 0; i < this.mFolderCoordinateData.gridXAxis.length; i++) {
if (x < this.mFolderCoordinateData.gridXAxis[i]) {
position.column = i;
break;
} else {
position.column = this.mFolderCoordinateData.gridXAxis.length - 1;
}
}
for (let i = 0; i < this.mFolderCoordinateData.gridYAxis.length; i++) {
if (y < this.mFolderCoordinateData.gridYAxis[i]) {
position.row = i;
break;
} else {
position.row = this.mFolderCoordinateData.gridYAxis.length - 1;
}
}
return position;
}
protected onDragStart(event: any, itemIndex: number): void {
super.onDragStart(event, itemIndex);
this.mFolderAppList = [];
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
this.mStartPosition = this.getTouchPosition(moveAppX, moveAppY);
const pageIndex: number = this.mBigFolderViewModel.getIndex();
const mItemIndex = this.getItemIndex(event);
this.mStartIndex = mItemIndex + this.mOpenGridConfig.column * this.mOpenGridConfig.row * pageIndex;
Log.showDebug(TAG, `onDragStart mStartIndex: ${this.mStartIndex}`);
AppStorage.SetOrCreate('overlayPositionX', moveAppX);
AppStorage.SetOrCreate('overlayPositionY', moveAppY);
AppStorage.SetOrCreate('overlayData', {
iconSize: this.mDesktopStyleConfig.mIconSize * 1.05,
nameSize: this.mDesktopStyleConfig.mNameSize * 1.05,
nameHeight: this.mDesktopStyleConfig.mNameHeight * 1.05,
appInfo: this.getDragItemInfo(),
});
AppStorage.SetOrCreate('withBlur', false);
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_APP_ICON);
}
protected onDragMove(event: any, insertIndex: number, itemIndex: number): void {
super.onDragMove(event, insertIndex, itemIndex);
Log.showDebug(TAG, `Launcher OpenFolder onDragMove insertIndex: ${insertIndex}`);
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
AppStorage.SetOrCreate('overlayPositionX', moveAppX);
AppStorage.SetOrCreate('overlayPositionY', moveAppY);
}
protected onDragLeave(event: any): void {
super.onDragLeave(event);
const moveAppY = event.touches[0].screenY;
const dragEffectArea = this.getEffectArea();
if (moveAppY >= dragEffectArea.bottom || moveAppY <= dragEffectArea.top) {
this.mBigFolderViewModel.closeFolder();
}
}
protected onDragDrop(event: any, insertIndex: number, itemIndex: number): boolean {
if (this.hasDroped) {
return false;
}
this.dropDelay();
super.onDragDrop(event, insertIndex, itemIndex);
Log.showDebug(TAG, `Launcher OpenFolder onDragDrop insertIndex:${insertIndex},mIsInEffectArea: ${this.mIsInEffectArea}`);
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_HIDE);
const openingStatus = AppStorage.Get('openFolderStatus');
const pageIndex: number = this.mBigFolderViewModel.getIndex();
const openFolderData: {
folderId: string,
layoutInfo: any
} = this.getDragRelativeData();
for (let i = 0; i < openFolderData.layoutInfo.length; i++) {
this.mFolderAppList = this.mFolderAppList.concat(openFolderData.layoutInfo[i]);
}
if (this.mIsInEffectArea && openingStatus !== BigFolderConstants.OPEN_FOLDER_STATUS_CLOSE) {
this.updateFolderNotClose(event, pageIndex);
} else if (openingStatus === BigFolderConstants.OPEN_FOLDER_STATUS_CLOSE) {
// effectarea in desktop
const endLayoutInfo = this.getEndLayoutInfo(event);
if (endLayoutInfo != undefined
&& endLayoutInfo.typeId === CommonConstants.TYPE_FOLDER
&& endLayoutInfo.folderId === openFolderData.folderId) {
return false;
}
let result = false;
const dragAppInfo = this.mFolderAppList[this.mStartIndex];
result = this.mBigFolderViewModel.deleteAppByDraging(this.mFolderAppList, this.mStartIndex);
if (endLayoutInfo != undefined && endLayoutInfo.typeId == CommonConstants.TYPE_FOLDER) {
this.mBigFolderViewModel.addOneAppToFolder(dragAppInfo, endLayoutInfo.folderId);
}
AppStorage.SetOrCreate('openFolderData', {});
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_UPDATE, null);
if (!result) {
return false;
}
}
return true;
}
protected onDragEnd(isSuccess: boolean): void {
super.onDragEnd(isSuccess);
this.mStartPosition = null;
this.mEndPosition = null;
AppStorage.SetOrCreate('dragFocus', '');
}
private dropDelay(): void {
this.hasDroped = true;
setTimeout(() => {
this.hasDroped = false;
}, DRAG_DROP_DELAY);
}
private layoutAdjustment(startIndex: number, endIndex: number): void {
Log.showDebug(TAG, 'layoutAdjustment start');
const item = this.mFolderAppList[startIndex];
this.mFolderAppList.splice(startIndex, 1);
this.mFolderAppList.splice(endIndex, 0, item);
const folderLayoutInfo = this.mBigFolderViewModel.filterFolderPage(this.mFolderAppList);
let openFolderData: {
folderId: string,
layoutInfo: any
} = AppStorage.Get('openFolderData');
openFolderData.layoutInfo = folderLayoutInfo;
openFolderData = this.mBigFolderViewModel.addAddIcon(openFolderData);
AppStorage.SetOrCreate('openFolderData', openFolderData);
Log.showDebug(TAG, `layoutAdjustment this.openFolderData.folderId: ${openFolderData.folderId}`);
const info = this.mSettingsModel.getLayoutInfo();
const layoutInfo = info.layoutInfo;
for (let i = 0; i < layoutInfo.length; i++) {
if (layoutInfo[i].typeId === CommonConstants.TYPE_FOLDER) {
if (layoutInfo[i].folderId === openFolderData.folderId) {
layoutInfo[i].layoutInfo = folderLayoutInfo;
break;
}
}
}
info.layoutInfo = layoutInfo;
this.mSettingsModel.setLayoutInfo(info);
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_UPDATE, null);
Log.showDebug(TAG, 'layoutAdjustment end');
}
/**
* update folder info when folder is not close
*
* @param event - drag event object
* @param pageIndex - the index of page
*/
private updateFolderNotClose(event, pageIndex) {
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
this.mEndPosition = this.getTouchPosition(moveAppX, moveAppY);
let mItemIndex = this.getItemIndex(event);
const itemCountByPage = this.mOpenGridConfig.column * this.mOpenGridConfig.row;
mItemIndex = mItemIndex + itemCountByPage * pageIndex;
Log.showDebug(TAG, `onDragDrop mItemIndex: ${mItemIndex}`);
// remove add icon
if (this.mFolderAppList.length > 0
&& this.mFolderAppList[this.mFolderAppList.length - 1].typeId == CommonConstants.TYPE_ADD) {
this.mFolderAppList.pop();
}
if (mItemIndex > this.mFolderAppList.length - 1) {
this.mEndIndex = this.mFolderAppList.length - 1;
} else {
this.mEndIndex = mItemIndex;
}
Log.showDebug(TAG, `onDragDrop this.mEndIndex: ${this.mEndIndex}, this.mStartIndex: ${this.mStartIndex}`);
this.layoutAdjustment(this.mStartIndex, this.mEndIndex);
}
/**
* get drag end position from layoutInfo
*
* @param event - drag event object
*/
private getEndLayoutInfo(event) {
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
const mDesktopPosition = globalThis.PageDesktopDragHandler.getTouchPosition(moveAppX, moveAppY);
const info = this.mSettingsModel.getLayoutInfo();
const layoutInfo = info.layoutInfo;
const endLayoutInfo = layoutInfo.find(item => {
if (item.typeId === CommonConstants.TYPE_FOLDER) {
return item.page === mDesktopPosition.page
&& (item.row <= mDesktopPosition.row && mDesktopPosition.row <= item.row + 1)
&& (item.column <= mDesktopPosition.column && mDesktopPosition.column <= item.column + 1);
}
});
return endLayoutInfo;
}
}

89
feature/bigfolder/src/main/ets/default/view/FolderOpenComponent.ets
View File

@ -29,7 +29,6 @@ import { localEventManager } from '@ohos/common';
import { InputMethodManager } from '@ohos/common';
import { BigFolderModel } from '../model/BigFolderModel';
import { BigFolderViewModel } from '../viewmodel/BigFolderViewModel';
import BigFolderDragHandler from '../common/BigFolderDragHandler';
import { BigFolderStyleConfig } from '../common/BigFolderStyleConfig';
import { BigFolderConstants } from '../common/constants/BigFolderConstants';
import { BigFolderStyleConstants } from '../common/constants/BigFolderStyleConstants';
@ -38,10 +37,8 @@ import FolderAppListDialog from '../common/uicomponents/FolderAppListDialog';
const TAG = 'FolderOpenComponent';
const DOUBLE_CLICK_COUNT = 2;
const APP_INFO_REFRESH_DELAY = 500;
const FOLDER_CLOSE_DELAY = 500;
let mBigFolderViewModel: BigFolderViewModel;
let mBigFolderDragHandler: BigFolderDragHandler;
let mBigFolderStyleConfig: BigFolderStyleConfig;
let mFolderModel: BigFolderModel;
let isOpenFolderDialog: boolean = false;
@ -304,9 +301,7 @@ struct FolderSwiperPage {
aboutToAppear(): void {
mFolderModel = BigFolderModel.getInstance();
mBigFolderDragHandler = BigFolderDragHandler.getInstance();
this.updateConfig();
this.updateOpenFolderParams();
}
private updateConfig() {
@ -326,19 +321,6 @@ struct FolderSwiperPage {
}
}
private async updateOpenFolderParams() {
let screenWidth = await windowManager.getWindowWidth();
if (mBigFolderDragHandler != null) {
mBigFolderDragHandler.setDragEffectArea({
left: (screenWidth - mGridWidth) / 2,
top: mGridMarginTop,
right: (screenWidth - mGridWidth) / 2 + mGridWidth,
bottom: mGridMarginTop + mGridHeight
});
}
}
folderDialogController: CustomDialogController = new CustomDialogController({
builder: FolderAppListDialog({
cancel: () => {
@ -445,8 +427,6 @@ struct FolderSwiperPage {
@Component
struct FolderAppItem {
@StorageLink('uninstallAppInfo') appInfo: any = {};
// @StorageLink('dragLocation') @Watch('onTouchEventUpdate') dragLocation: string = '';
@State @Watch('onIsDraging') isDraging: boolean = false;
@StorageLink('selectDesktopAppItem') selectDesktopAppItem: string = '';
@State item: any = {};
private ColumnsTemplate: string = '';
@ -466,16 +446,6 @@ struct FolderAppItem {
});
}
private onTouchEventUpdate() {
if (AppStorage.Get('dragFocus') == BigFolderConstants.FEATURE_NAME) {
mBigFolderDragHandler.onTouchEventUpdate(AppStorage.Get('dragEvent'));
}
}
private onIsDraging() {
AppStorage.SetOrCreate('isDraging', this.isDraging);
}
uninstallDialogController: CustomDialogController = new CustomDialogController({
builder: UninstallDialog({
cancel: () => {
@ -501,6 +471,7 @@ struct FolderAppItem {
autoCancel: true,
customStyle: true
});
formManagerDialogController: CustomDialogController = new CustomDialogController({
builder: FormManagerDialog({
cancel: (callback?) => {
@ -528,56 +499,6 @@ struct FolderAppItem {
this.clearForm();
}
private mDragStateListener = {
onItemDragStart: (event: any, itemIndex: number) => {
this.isDraging = true;
},
onItemDragMove: (event: any, insertIndex: number, itemIndex: number) => {
Log.showDebug(TAG, "FolderOpenComponent onItemDragMove start");
this.uninstallDialogController.close();
if (this.isSwappingPage) {
return;
}
let moveX = event.touches[0].screenX;
let moveY = event.touches[0].screenY;
let dragEffectArea = mBigFolderDragHandler.getEffectArea();
this.mFolderInfo = AppStorage.Get('openFolderData');
let pageCount = this.mFolderInfo.layoutInfo.length;
let pageIndex: number = mBigFolderViewModel.getIndex();
Log.showDebug(TAG, `FolderOpenComponent onItemDragMove pageIndex: ${pageIndex},
dragEffectArea.left: ${dragEffectArea.left},
dragEffectArea.bottom: ${dragEffectArea.bottom},
dragEffectArea.right: ${dragEffectArea.right}`);
if ((moveX - mAppIconSize / 2) < dragEffectArea.left && moveY < dragEffectArea.bottom) {
if (pageIndex > 0) {
mBigFolderViewModel.changeIndex(pageIndex - 1);
this.movingIconSwapPageDelay();
} else if (this.willCloseFolder) {
mBigFolderViewModel.closeFolder();
} else {
this.closeFolderDelay();
}
} else if ((moveX + mAppIconSize / 2) > dragEffectArea.right && moveY < dragEffectArea.bottom) {
if (pageIndex < pageCount - 1) {
mBigFolderViewModel.changeIndex(pageIndex + 1);
this.movingIconSwapPageDelay();
} else if (this.willCloseFolder) {
mBigFolderViewModel.closeFolder();
} else {
this.closeFolderDelay();
}
}
},
onItemDragEnd: () => {
this.isDraging = false;
}
};
closeFolderDelay() {
this.willCloseFolder = false;
setTimeout(() => {
@ -585,13 +506,6 @@ struct FolderAppItem {
}, FOLDER_CLOSE_DELAY);
}
movingIconSwapPageDelay() {
this.isSwappingPage = true;
setTimeout(() => {
this.isSwappingPage = false;
}, APP_INFO_REFRESH_DELAY);
}
removeAppOutOfFolder(appInfo) {
mBigFolderViewModel.removeAppOutOfFolder(appInfo);
}
@ -626,7 +540,6 @@ struct FolderAppItem {
}
.width(mAppItemWidth)
.height(mAppItemWidth)
.visibility(this.isDraging ? Visibility.Hidden : Visibility.Visible)
.onClick(() => {
Log.showDebug(TAG, 'App click');
globalThis.PageDesktopViewModel.openApplication(this.item.abilityName, this.item.bundleName, this.item.moduleName);

45
feature/bigfolder/src/main/ets/default/viewModel/BigFolderViewModel.ts
View File

@ -20,6 +20,7 @@ import { EventConstants } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import { BaseViewModel } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { PageDesktopModel } from '@ohos/common';
import { ResourceManager } from '@ohos/common';
import { localEventManager } from '@ohos/common';
import { layoutConfigManager } from '@ohos/common';
@ -34,7 +35,8 @@ const HEXADECIMAL_VALUE = 36;
export class BigFolderViewModel extends BaseViewModel {
private readonly mSettingsModel: SettingsModel;
private readonly mFolderModel: BigFolderModel;
private readonly mBigFolderModel: BigFolderModel;
private readonly mPageDesktopModel: PageDesktopModel;
private readonly mPinyinSort: PinyinSort;
private readonly mGridConfig;
private mPageIndex = 0;
@ -42,7 +44,7 @@ export class BigFolderViewModel extends BaseViewModel {
private readonly mFolderLayoutConfig: FolderLayoutConfig;
private readonly mLocalEventListener = {
onReceiveEvent: (event, params) => {
Log.showDebug(TAG, `FolderViewModel receive event: ${event}, params: ${JSON.stringify(params)}`);
Log.showDebug(TAG, `onReceiveEvent receive event: ${event}, params: ${JSON.stringify(params)}`);
const openStatus = AppStorage.Get('openFolderStatus');
if (event === EventConstants.EVENT_BADGE_UPDATE && (openStatus == BigFolderConstants.OPEN_FOLDER_STATUS_OPEN || openStatus == BigFolderConstants.OPEN_FOLDER_STATUS_STATIC)) {
const openFolderData: {
@ -74,11 +76,12 @@ export class BigFolderViewModel extends BaseViewModel {
private constructor() {
super();
this.mFolderModel = BigFolderModel.getInstance();
this.mBigFolderModel = BigFolderModel.getInstance();
this.mSettingsModel = SettingsModel.getInstance();
this.mPageDesktopModel = PageDesktopModel.getInstance();
this.mGridConfig = this.mSettingsModel.getGridConfig();
this.mPinyinSort = new PinyinSort();
this.mFolderModel.registerFolderUpdateEvent(this.mLocalEventListener);
this.mBigFolderModel.registerFolderUpdateEvent(this.mLocalEventListener);
this.mFolderStyleConfig = layoutConfigManager.getStyleConfig(BigFolderStyleConfig.APP_LIST_STYLE_CONFIG,
BigFolderConstants.FEATURE_NAME);
this.mFolderLayoutConfig = layoutConfigManager.getFunctionConfig(FolderLayoutConfig.FOLDER_GRID_LAYOUT_INFO);
@ -144,11 +147,11 @@ export class BigFolderViewModel extends BaseViewModel {
folderInfo.layoutInfo.push(folderAppInfo);
folderInfo.badgeNumber = badgeNumber;
const needNewPage: boolean = globalThis.PageDesktopViewModel.updateFolderItemLayoutInfo(gridLayoutInfo, folderInfo);
const needNewPage: boolean = this.mPageDesktopModel.updatePageDesktopLayoutInfo(gridLayoutInfo, folderInfo);
if (needNewPage) {
gridLayoutInfo.layoutDescription.pageCount = gridLayoutInfo.layoutDescription.pageCount + 1;
for (let index = 0; index < gridLayoutInfo.layoutInfo.length; index++) {
if (gridLayoutInfo.layoutInfo[index].page > globalThis.PageDesktopViewModel.getIndex()) {
if (gridLayoutInfo.layoutInfo[index].page > this.mPageDesktopModel.getPageIndex()) {
gridLayoutInfo.layoutInfo[index].page++;
}
}
@ -158,7 +161,7 @@ export class BigFolderViewModel extends BaseViewModel {
gridLayoutInfo.layoutInfo.push(folderInfo);
this.deleteAppLayoutItems(gridLayoutInfo, appLayoutInfo);
if (needNewPage) {
globalThis.PageDesktopViewModel.changeIndex(globalThis.PageDesktopViewModel.getIndex() + 1);
this.mPageDesktopModel.setPageIndex(this.mPageDesktopModel.getPageIndex() + 1);
}
}
@ -188,7 +191,7 @@ export class BigFolderViewModel extends BaseViewModel {
if (lastPageItems[lastPageItems.length - 1].typeId == CommonConstants.TYPE_ADD) {
lastPageItems[lastPageItems.length - 1] = appInfo;
} else {
const openFolderConfig = this.mFolderModel.getFolderOpenLayout();
const openFolderConfig = this.mBigFolderModel.getFolderOpenLayout();
if (lastPageItems.length == openFolderConfig.column * openFolderConfig.row) {
info.push([appInfo]);
} else {
@ -253,7 +256,7 @@ export class BigFolderViewModel extends BaseViewModel {
}
const dragAppInfo = folderAppList[index];
if (folderAppList.length > 2) {
const needNewPage: boolean = globalThis.PageDesktopViewModel.updateAppItemFromFolder(gridLayoutInfo, dragAppInfo);
const needNewPage: boolean = this.mPageDesktopModel.updatePageDesktopLayoutInfo(gridLayoutInfo, dragAppInfo);
Log.showDebug(TAG, `deleteAppByDraging needNewPage: ${needNewPage}`);
if (needNewPage) {
return false;
@ -285,7 +288,7 @@ export class BigFolderViewModel extends BaseViewModel {
const appListInfo = this.mSettingsModel.getAppListInfo();
for (let i = 0; i < removeAppInfos.length; i++) {
globalThis.PageDesktopViewModel.updateAppItemFromFolder(gridLayoutInfo, removeAppInfos[i]);
this.mPageDesktopModel.updatePageDesktopLayoutInfo(gridLayoutInfo, removeAppInfos[i]);
const gridLayout = this.createAppLayoutInfo(removeAppInfos[i]);
gridLayoutInfo.layoutInfo.push(gridLayout);
appListInfo.push(removeAppInfos[i]);
@ -501,7 +504,7 @@ export class BigFolderViewModel extends BaseViewModel {
folderItem.layoutInfo = [[]];
for (let i = 0; i < removeFolderApp.length; i++) {
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_ADD, removeFolderApp[i]);
globalThis.PageDesktopViewModel.updateAppItemFromFolder(gridLayoutInfoTemp, removeFolderApp[i]);
this.mPageDesktopModel.updatePageDesktopLayoutInfo(gridLayoutInfoTemp, removeFolderApp[i]);
const gridLayout = this.createAppLayoutInfo(removeFolderApp[i]);
gridLayoutInfoTemp.layoutInfo.push(gridLayout);
}
@ -695,11 +698,11 @@ export class BigFolderViewModel extends BaseViewModel {
if (appFolderToDesktop.length > 0) {
for (let i = 0; i < appFolderToDesktop.length; i++) {
const needNewPage: boolean = globalThis.PageDesktopViewModel.updateAppItemFromFolder(gridLayoutInfoTemp, appFolderToDesktop[i]);
const needNewPage: boolean = this.mPageDesktopModel.updatePageDesktopLayoutInfo(gridLayoutInfoTemp, appFolderToDesktop[i]);
if (needNewPage) {
gridLayoutInfoTemp.layoutDescription.pageCount = gridLayoutInfoTemp.layoutDescription.pageCount + 1;
for (let index = 0; index < gridLayoutInfoTemp.layoutInfo.length; index++) {
if (gridLayoutInfoTemp.layoutInfo[index].page > globalThis.PageDesktopViewModel.getIndex()) {
if (gridLayoutInfoTemp.layoutInfo[index].page > this.mPageDesktopModel.getPageIndex()) {
gridLayoutInfoTemp.layoutInfo[index].page++;
}
}
@ -879,7 +882,7 @@ export class BigFolderViewModel extends BaseViewModel {
return folderItem;
}
const openFolderConfig = this.mFolderModel.getFolderOpenLayout();
const openFolderConfig = this.mBigFolderModel.getFolderOpenLayout();
const column = openFolderConfig.column;
const row = openFolderConfig.row;
const addInfo = {
@ -1006,7 +1009,7 @@ export class BigFolderViewModel extends BaseViewModel {
filterFolderPage(appInfos): any[] {
const folderLayoutInfo = [];
const appListInfo = JSON.parse(JSON.stringify(appInfos));
const openFolderConfig = this.mFolderModel.getFolderOpenLayout();
const openFolderConfig = this.mBigFolderModel.getFolderOpenLayout();
const itemCountByPage = openFolderConfig.column * openFolderConfig.row;
let pageCount = Math.floor(appListInfo.length / itemCountByPage);
@ -1049,7 +1052,7 @@ export class BigFolderViewModel extends BaseViewModel {
* @return {any} folderInfo.
*/
private async createNewFolderInfo() {
const folderConfig = this.mFolderModel.getFolderLayout();
const folderConfig = this.mBigFolderModel.getFolderLayout();
const folderName = await this.generateFolderName();
// Create new folder info
const folderInfo = {
@ -1134,7 +1137,7 @@ export class BigFolderViewModel extends BaseViewModel {
* get addlist dialog's column
*/
getAddListColumn(): number {
return this.mFolderModel.getFolderAddAppLayout().column;
return this.mBigFolderModel.getFolderAddAppLayout().column;
}
/**
@ -1145,8 +1148,8 @@ export class BigFolderViewModel extends BaseViewModel {
getDialogHeight(appList: []): number {
let height = 0;
const styleConfig = this.mFolderStyleConfig;
const column = this.mFolderModel.getFolderAddAppLayout().column;
const row = this.mFolderModel.getFolderAddAppLayout().row;
const column = this.mBigFolderModel.getFolderAddAppLayout().column;
const row = this.mBigFolderModel.getFolderAddAppLayout().row;
const num = Math.ceil(appList.length / column);
if (num <= row) {
height = styleConfig.mAddFolderDialogHeight;
@ -1251,11 +1254,11 @@ export class BigFolderViewModel extends BaseViewModel {
const appListInfo = this.mSettingsModel.getAppListInfo();
// Add app to desktop app list
for (let i = 0; i < removeAppInfos.length; i++) {
const needNewPage: boolean = globalThis.PageDesktopViewModel.updateAppItemFromFolder(gridLayoutInfo, removeAppInfos[i]);
const needNewPage: boolean = this.mPageDesktopModel.updatePageDesktopLayoutInfo(gridLayoutInfo, removeAppInfos[i]);
if (needNewPage) {
gridLayoutInfo.layoutDescription.pageCount = gridLayoutInfo.layoutDescription.pageCount + 1;
for (let index = 0; index < gridLayoutInfo.layoutInfo.length; index++) {
if (gridLayoutInfo.layoutInfo[index].page > globalThis.PageDesktopViewModel.getIndex()) {
if (gridLayoutInfo.layoutInfo[index].page > this.mPageDesktopModel.getPageIndex()) {
gridLayoutInfo.layoutInfo[index].page++;
}
}

5
feature/form/src/main/ets/default/viewmodel/FormViewModel.ts
View File

@ -15,6 +15,7 @@
import { Log } from '@ohos/common';
import { FormModel } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { PageDesktopModel } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import { layoutConfigManager } from '@ohos/common';
import { FormListInfoCacheManager } from '@ohos/common';
@ -30,6 +31,7 @@ const KEY_FORM_LIST = 'formListInfo';
export class FormViewModel {
private readonly mFormModel: FormModel;
private readonly mSettingsModel: SettingsModel;
private readonly mPageDesktopModel: PageDesktopModel;
private readonly mFormStyleConfig: FormStyleConfig;
private readonly mFormListInfoCacheManager: FormListInfoCacheManager;
private mAllFormsInfo;
@ -38,6 +40,7 @@ export class FormViewModel {
Log.showInfo(TAG, 'constructor start');
this.mFormModel = FormModel.getInstance();
this.mSettingsModel = SettingsModel.getInstance();
this.mPageDesktopModel = PageDesktopModel.getInstance();
this.mFormStyleConfig = layoutConfigManager.getStyleConfig(FormStyleConfig.APP_LIST_STYLE_CONFIG,
FormConstants.FEATURE_NAME);
this.mFormListInfoCacheManager = FormListInfoCacheManager.getInstance();
@ -110,7 +113,7 @@ export class FormViewModel {
this.mFormModel.deleteFormById(cardId);
const page = gridLayoutInfo.layoutInfo[cardIndex].page;
gridLayoutInfo.layoutInfo.splice(cardIndex, 1);
globalThis.PageDesktopViewModel.deleteBlankPageFromLayoutInfo(gridLayoutInfo, page);
this.mPageDesktopModel.deleteBlankPageFromLayoutInfo(gridLayoutInfo, page);
this.mSettingsModel.setLayoutInfo(gridLayoutInfo);
}
const formInfoList: any = this.mFormListInfoCacheManager.getCache(KEY_FORM_LIST);

391
feature/pagedesktop/src/main/ets/default/common/PageDesktopDragHandler.ts
View File

@ -14,13 +14,20 @@
*/
import { Log } from '@ohos/common';
import { DragArea } from '@ohos/common';
import { BaseDragHandler } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import { CheckEmptyUtils } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { EventConstants } from '@ohos/common';
import { localEventManager } from '@ohos/common';
import { layoutConfigManager } from '@ohos/common';
import { PageDesktopModel } from '@ohos/common';
import { DragItemPosition } from '@ohos/common';
import { FormViewModel } from '@ohos/form';
import { BigFolderViewModel } from '@ohos/bigfolder';
import PageDesktopViewModel from '../viewmodel/PageDesktopViewModel';
import { PageDesktopGridStyleConfig } from './PageDesktopGridStyleConfig';
import PageDesktopConstants from './constants/PageDesktopConstants'
const TAG = 'PageDesktopDragHandler';
@ -28,27 +35,30 @@ const TAG = 'PageDesktopDragHandler';
* Desktop workspace drag and drop processing class
*/
export class PageDesktopDragHandler extends BaseDragHandler {
private readonly mPageDesktopViewModel: PageDesktopViewModel;
private readonly mPageDesktopStyleConfig: PageDesktopGridStyleConfig;
private readonly mBigFolderViewModel: BigFolderViewModel;
private readonly mFormViewModel: FormViewModel;
private readonly mSettingsModel: SettingsModel;
private readonly mPageDesktopModel: PageDesktopModel;
private mGridConfig;
private mPageCoordinateData = {
gridXAxis: [],
gridYAxis: []
};
private mStartPosition: any = null;
private mEndPosition: any = null;
private mStartPosition: DragItemPosition;
private mEndPosition: DragItemPosition;
private readonly styleConfig;
private mGridItemHeight: any = null;
private mGridItemWidth: any = null;
private mGridItemHeight: number;
private mGridItemWidth: number;
private constructor() {
super();
this.mPageDesktopViewModel = PageDesktopViewModel.getInstance();
this.mBigFolderViewModel = BigFolderViewModel.getInstance();
this.mSettingsModel = SettingsModel.getInstance();
this.mFormViewModel = FormViewModel.getInstance();
this.styleConfig = this.mPageDesktopViewModel.getPageDesktopStyleConfig();
this.mPageDesktopModel = PageDesktopModel.getInstance();
this.mPageDesktopStyleConfig = layoutConfigManager.getStyleConfig(PageDesktopGridStyleConfig.APP_GRID_STYLE_CONFIG,
PageDesktopConstants.FEATURE_NAME);
}
static getInstance(): PageDesktopDragHandler {
@ -59,23 +69,51 @@ export class PageDesktopDragHandler extends BaseDragHandler {
}
setDragEffectArea(effectArea): void {
Log.showInfo(TAG, `setDragEffectArea:${JSON.stringify(effectArea)}`)
Log.showDebug(TAG, `setDragEffectArea:${JSON.stringify(effectArea)}`)
AppStorage.SetOrCreate('pageDesktopDragEffectArea', effectArea);
super.setDragEffectArea(effectArea);
this.updateGridParam(effectArea);
}
private updateGridParam(effectArea) {
const gridWidth = this.mPageDesktopViewModel.getPageDesktopStyleConfig().mGridWidth;
const gridHeight = this.mPageDesktopViewModel.getPageDesktopStyleConfig().mGridHeight;
Log.showInfo(TAG, `updateGridParam gridWidth: ${gridWidth}, gridHeight: ${gridHeight}`);
this.mGridConfig = this.mPageDesktopViewModel.getGridConfig();
isDragEffectArea(x: number, y: number): boolean {
const isInEffectArea = super.isDragEffectArea(x, y);
Log.showDebug(TAG, `isDragEffectArea x: ${x}, y: ${y}, isInEffectArea: ${isInEffectArea}`);
const deviceType: string = AppStorage.Get('deviceType');
const smartDockDragEffectArea: DragArea = AppStorage.Get('smartDockDragEffectArea');
Log.showDebug(TAG, `isDragEffectArea smartDockDragEffectArea: ${JSON.stringify(smartDockDragEffectArea)}`);
if (smartDockDragEffectArea) {
if (deviceType == CommonConstants.DEFAULT_DEVICE_TYPE) {
if (isInEffectArea || (y <= smartDockDragEffectArea.bottom && y >= smartDockDragEffectArea.top)
&& x <= smartDockDragEffectArea.right && x >= smartDockDragEffectArea.left) {
return true;
}
return false;
}
return isInEffectArea;
}
return false;
}
getRow(index: number): number {
return ~~(index / this.mSettingsModel.getGridConfig().column);
}
getColumn(index: number): number {
return index % this.mSettingsModel.getGridConfig().column;
}
private updateGridParam(effectArea: DragArea): void {
const gridWidth = this.mPageDesktopStyleConfig.mGridWidth;
const gridHeight = this.mPageDesktopStyleConfig.mGridHeight;
Log.showDebug(TAG, `updateGridParam gridWidth: ${gridWidth}, gridHeight: ${gridHeight}`);
this.mGridConfig = this.mSettingsModel.getGridConfig();
const column = this.mGridConfig.column;
const row = this.mGridConfig.row;
const columnsGap = this.mPageDesktopViewModel.getPageDesktopStyleConfig().mColumnsGap;
const rowGap = this.mPageDesktopViewModel.getPageDesktopStyleConfig().mRowsGap;
const columnsGap = this.mPageDesktopStyleConfig.mColumnsGap;
const rowGap = this.mPageDesktopStyleConfig.mRowsGap;
this.mGridItemHeight = row > 0 ? (gridHeight + columnsGap) / row : 0;
this.mGridItemWidth = column > 0 ? (gridWidth + rowGap) / column : 0;
Log.showInfo(TAG, `updateGridParam column: ${column}, row: ${row}`);
Log.showDebug(TAG, `updateGridParam column: ${column}, row: ${row}`);
this.mPageCoordinateData.gridYAxis = [];
for (let i = 1; i <= row; i++) {
const touchPositioningY = (gridHeight / row) * i + effectArea.top;
@ -96,9 +134,7 @@ export class PageDesktopDragHandler extends BaseDragHandler {
return desktopDataInfo.appGridInfo;
}
protected getItemIndex(event: any): number {
const x = event.touches[0].screenX;
const y = event.touches[0].screenY;
protected getItemIndex(x: number, y: number): number {
Log.showInfo(TAG, `getItemIndex x: ${x}, y: ${y}`);
let rowVal = CommonConstants.INVALID_VALUE;
for (let index = 0; index < this.mPageCoordinateData.gridYAxis.length; index++) {
@ -124,7 +160,7 @@ export class PageDesktopDragHandler extends BaseDragHandler {
protected getItemByIndex(index: number): any {
const column = index % this.mGridConfig.column;
const row = Math.floor(index / this.mGridConfig.column);
const pageIndex: number = this.mPageDesktopViewModel.getIndex();
const pageIndex: number = AppStorage.Get('pageIndex');
const appGridInfo = this.getDragRelativeData();
Log.showInfo(TAG, `getItemByIndex pageIndex: ${pageIndex}, appGridInfo length: ${appGridInfo.length},
column: ${column}, row: ${row}`);
@ -148,14 +184,10 @@ export class PageDesktopDragHandler extends BaseDragHandler {
return item.column <= column && column < item.column + item.area[0] && item.row <= row && row < item.row + item.area[1];
}
getCalPosition(x, y): any{
return this.getTouchPosition(x, y);
}
private getTouchPosition(x, y): any {
const pageIndex =this.mPageDesktopViewModel.getIndex();
Log.showInfo(TAG, `getTouchPosition pageIndex: ${pageIndex}`);
const position = {
private getTouchPosition(x: number, y: number): DragItemPosition {
const pageIndex: number = AppStorage.Get('pageIndex');
Log.showDebug(TAG, `getTouchPosition pageIndex: ${pageIndex}`);
const position: DragItemPosition = {
page: pageIndex,
row: 0,
column: 0,
@ -181,184 +213,125 @@ export class PageDesktopDragHandler extends BaseDragHandler {
return position;
}
protected onDragStart(event: any, itemIndex: number): void {
Log.showInfo(TAG, `onDragStart itemIndex: ${itemIndex}`);
super.onDragStart(event, itemIndex);
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
const dragItemInfo = this.getDragItemInfo();
this.mStartPosition = this.getTouchPosition(moveAppX, moveAppY);
if (dragItemInfo.typeId == CommonConstants.TYPE_FOLDER || dragItemInfo.typeId == CommonConstants.TYPE_CARD) {
const rowOffset = this.mStartPosition.row - dragItemInfo.row;
const columnOffset = this.mStartPosition.column - dragItemInfo.column;
const positionOffset = [columnOffset, rowOffset];
AppStorage.SetOrCreate('positionOffset', positionOffset);
const desktopMarginTop = this.mPageDesktopViewModel.getPageDesktopStyleConfig().mDesktopMarginTop;
const margin = this.mPageDesktopViewModel.getPageDesktopStyleConfig().mMargin;
const dragItemx = dragItemInfo.column * this.mGridItemWidth + margin;
const dragItemy = dragItemInfo.row * this.mGridItemHeight + desktopMarginTop;
const moveOffset = [moveAppX - dragItemx, moveAppY - dragItemy];
AppStorage.SetOrCreate('moveOffset', moveOffset);
this.mStartPosition.row = dragItemInfo.row;
this.mStartPosition.column = dragItemInfo.column;
}
AppStorage.SetOrCreate('overlayPositionX', moveAppX);
AppStorage.SetOrCreate('overlayPositionY', moveAppY);
if (dragItemInfo.typeId == CommonConstants.TYPE_APP){
this.setAppOverlayData();
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_APP_ICON);
} else if (dragItemInfo.typeId == CommonConstants.TYPE_FOLDER) {
this.setFolderOverlayData();
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_FOLDER);
} else if (dragItemInfo.typeId == CommonConstants.TYPE_CARD) {
this.setFormOverlayData(dragItemInfo);
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_CARD);
}
AppStorage.SetOrCreate('withBlur', false);
}
reset(): void {
super.reset();
}
private setAppOverlayData(): void {
AppStorage.SetOrCreate('overlayData', {
iconSize: this.styleConfig.mIconSize * 1.05,
nameSize: this.styleConfig.mNameSize * 1.05,
nameHeight: this.styleConfig.mNameHeight * 1.05,
appInfo: this.getDragItemInfo(),
});
}
private setFolderOverlayData(): void {
const folderStyleConfig = this.mBigFolderViewModel.getFolderStyleConfig();
const folderSize = folderStyleConfig.mGridSize * 1.05;
const iconSize = folderStyleConfig.mFolderAppSize * 1.05;
const gridMargin = folderStyleConfig.mGridMargin * 1.05;
const gridGap = folderStyleConfig.mFolderGridGap * 1.05;
AppStorage.SetOrCreate('overlayData', {
folderHeight: folderSize,
folderWidth: folderSize,
folderGridSize: folderSize,
appIconSize: iconSize,
gridMargin: gridMargin,
gridGap: gridGap,
folderInfo: this.getDragItemInfo()
});
}
private setFormOverlayData(dragItemInfo): void {
const formStyleConfig = this.mFormViewModel.getFormStyleConfig();
const cardDimension = dragItemInfo.cardDimension.toString();
const formHeight = formStyleConfig.mFormHeight.get(cardDimension) * 1.05;
const formWidth = formStyleConfig.mFormWidth.get(cardDimension) * 1.05;
AppStorage.SetOrCreate('overlayData', {
formHeight: formHeight,
formWidth: formWidth,
formInfo: this.getDragItemInfo()
});
}
protected onDragMove(event: any, insertIndex: number, itemIndex: number): void {
super.onDragMove(event, insertIndex, itemIndex);
Log.showInfo(TAG, `onDragMove insertIndex: ${insertIndex}`);
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
const dragItemInfo = this.getDragItemInfo();
if (dragItemInfo.typeId == CommonConstants.TYPE_FOLDER || dragItemInfo.typeId == CommonConstants.TYPE_CARD) {
const moveOffset = AppStorage.Get('moveOffset');
AppStorage.SetOrCreate('overlayPositionX', moveAppX - moveOffset[0]);
AppStorage.SetOrCreate('overlayPositionY', moveAppY - moveOffset[1]);
} else {
AppStorage.SetOrCreate('overlayPositionX', moveAppX - (this.styleConfig.mIconSize/2));
AppStorage.SetOrCreate('overlayPositionY', moveAppY - (this.styleConfig.mIconSize/2));
}
}
protected onDragDrop(event: any, insertIndex: number, itemIndex: number): boolean {
super.onDragDrop(event, insertIndex, itemIndex);
Log.showInfo(TAG, `onDragDrop insertIndex: ${insertIndex}, mIsInEffectArea: ${this.mIsInEffectArea}`);
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_HIDE);
let isDragSuccess = false;
const startPosition = this.copyPosition(this.mStartPosition);
let endPosition = null;
if (this.mIsInEffectArea) {
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
this.mEndPosition = this.getTouchPosition(moveAppX, moveAppY);
endPosition = this.copyPosition(this.mEndPosition);
const dragItemInfo = this.getDragItemInfo();
const info = this.mSettingsModel.getLayoutInfo();
const layoutInfo = info.layoutInfo;
if (dragItemInfo.typeId == CommonConstants.TYPE_FOLDER || dragItemInfo.typeId == CommonConstants.TYPE_CARD ) {
this.updateEndPosition(dragItemInfo);
AppStorage.SetOrCreate('positionOffset', []);
AppStorage.SetOrCreate('moveOffset', []);
} else if(dragItemInfo.typeId === CommonConstants.TYPE_APP) {
// end position is the same as start position
if (this.isMoveToSamePosition(dragItemInfo)) {
this.deleteBlankPageAfterDragging(startPosition, endPosition);
return true;
}
const endLayoutInfo = this.getEndLayoutInfo(layoutInfo);
if (endLayoutInfo != undefined) {
if (endLayoutInfo.typeId === CommonConstants.TYPE_FOLDER) {
// add app to folder
this.mBigFolderViewModel.addOneAppToFolder(dragItemInfo, endLayoutInfo.folderId);
this.deleteBlankPageAfterDragging(startPosition, endPosition);
return true;
} else if (endLayoutInfo.typeId === CommonConstants.TYPE_APP) {
// create a new folder
const appLayoutInfo = [endLayoutInfo];
const startLayoutInfo = this.getStartLayoutInfo(layoutInfo, dragItemInfo);
appLayoutInfo.push(startLayoutInfo);
this.mBigFolderViewModel.addNewFolder(appLayoutInfo).then(()=> {
this.deleteBlankPageAfterDragging(startPosition, endPosition);
});
return true;
}
}
}
if (this.isSelfDrag()) {
this.checkAndMove(this.mStartPosition, this.mEndPosition, layoutInfo, dragItemInfo);
info.layoutInfo = layoutInfo;
this.mSettingsModel.setLayoutInfo(info);
this.mPageDesktopViewModel.pagingFiltering();
isDragSuccess = true;
} else {
Log.showInfo(TAG, 'onDragEnd not selfDrag');
}
}
this.deleteBlankPageAfterDragging(startPosition, endPosition);
return isDragSuccess;
}
protected onDragEnd(isSuccess: boolean): void {
super.onDragEnd(isSuccess);
Log.showInfo(TAG, `onDragEnd isSuccess: ${isSuccess}`);
if (this.isDropOutSide() && isSuccess) {
Log.showInfo(TAG, 'onDragEnd dropOutSide');
}
onDragStart(x: number, y: number): void {
this.mStartPosition = null;
this.mEndPosition = null;
AppStorage.SetOrCreate('dragFocus', '');
Log.showInfo(TAG, `onDragStart start`);
const selectAppIndex = this.getItemIndex(x, y);
AppStorage.SetOrCreate('selectAppIndex', selectAppIndex);
this.mStartPosition = this.getTouchPosition(x, y);
}
onDragDrop(x: number, y: number) {
const selectAppIndex: number = AppStorage.Get('selectAppIndex');
const endIndex = this.getItemIndex(x, y);
Log.showInfo(TAG, `onDragDrop selectAppIndex: ${selectAppIndex}`);
const startPosition: DragItemPosition = this.copyPosition(this.mStartPosition);
let endPosition: DragItemPosition = null;
this.mEndPosition = this.getTouchPosition(x, y);
Log.showInfo(TAG, `onDragEnd mEndPosition: ${JSON.stringify(this.mEndPosition)}`);
endPosition = this.copyPosition(this.mEndPosition);
const dragItemInfo: any = AppStorage.Get('dragItemInfo');
Log.showInfo(TAG, `onDragEnd dragItemInfo: ${JSON.stringify(dragItemInfo)}`);
const info = this.mSettingsModel.getLayoutInfo();
const layoutInfo = info.layoutInfo;
if (dragItemInfo.typeId == CommonConstants.TYPE_FOLDER || dragItemInfo.typeId == CommonConstants.TYPE_CARD ) {
this.updateEndPosition(dragItemInfo);
AppStorage.SetOrCreate('positionOffset', []);
} else {
if (this.isMoveToSamePosition(dragItemInfo)) {
this.deleteBlankPageAfterDragging(startPosition, endPosition);
return true;
}
const endLayoutInfo = this.getEndLayoutInfo(layoutInfo);
if (endLayoutInfo != undefined) {
// add app to folder
if (endLayoutInfo.typeId === CommonConstants.TYPE_FOLDER) {
this.mBigFolderViewModel.addOneAppToFolder(dragItemInfo, endLayoutInfo.folderId);
if (dragItemInfo && AppStorage.Get('dragItemType') === CommonConstants.DRAG_FROM_DOCK
&& AppStorage.Get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE) {
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_RESIDENT_DOCK_ITEM_DELETE, dragItemInfo);
}
this.deleteBlankPageAfterDragging(startPosition, endPosition);
return;
} else if (endLayoutInfo.typeId === CommonConstants.TYPE_APP) {
// create a new folder
const layoutInfoList = [endLayoutInfo];
let startLayoutInfo = null;
if (dragItemInfo && AppStorage.Get('dragItemType') === CommonConstants.DRAG_FROM_DOCK
&& AppStorage.Get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE) {
let appInfoList = this.mSettingsModel.getAppListInfo();
const appIndex = appInfoList.findIndex(item => {
return item.keyName === dragItemInfo.keyName;
})
if (appIndex == CommonConstants.INVALID_VALUE) {
appInfoList.push({
"appName": dragItemInfo.appName,
"isSystemApp": dragItemInfo.isSystemApp,
"isUninstallAble": dragItemInfo.isUninstallAble,
"appIconId": dragItemInfo.appIconId,
"appLabelId": dragItemInfo.appLabelId,
"bundleName": dragItemInfo.bundleName,
"abilityName": dragItemInfo.abilityName,
"moduleName": dragItemInfo.moduleName,
"keyName": dragItemInfo.keyName,
"typeId": dragItemInfo.typeId,
"area": dragItemInfo.area,
"page": dragItemInfo.page,
"column": this.getColumn(endIndex),
"row": this.getRow(endIndex),
"x": 0,
"installTime": dragItemInfo.installTime
})
this.mSettingsModel.setAppListInfo(appInfoList);
}
startLayoutInfo = dragItemInfo;
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_RESIDENT_DOCK_ITEM_DELETE, dragItemInfo);
} else {
startLayoutInfo = this.getStartLayoutInfo(layoutInfo, dragItemInfo);
}
layoutInfoList.push(startLayoutInfo);
this.mBigFolderViewModel.addNewFolder(layoutInfoList).then(()=> {
this.deleteBlankPageAfterDragging(startPosition, endPosition);
});
return;
}
}
}
if (dragItemInfo && AppStorage.Get('dragItemType') === CommonConstants.DRAG_FROM_DOCK
&& AppStorage.Get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE) {
let appInfoTemp = {
"bundleName": dragItemInfo.bundleName,
"typeId": dragItemInfo.typeId,
"abilityName": dragItemInfo.abilityName,
"moduleName": dragItemInfo.moduleName,
"keyName": dragItemInfo.keyName,
"area": dragItemInfo.area,
"page": dragItemInfo.page,
"column": this.getColumn(endIndex),
"row": this.getRow(endIndex)
};
layoutInfo.push(appInfoTemp);
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_RESIDENT_DOCK_ITEM_DELETE, dragItemInfo);
} else {
this.checkAndMove(this.mStartPosition, this.mEndPosition, layoutInfo, dragItemInfo);
}
info.layoutInfo = layoutInfo;
this.mSettingsModel.setLayoutInfo(info);
localEventManager.sendLocalEventSticky(EventConstants.EVENT_SMARTDOCK_INIT_FINISHED, null);
this.deleteBlankPageAfterDragging(startPosition, endPosition);
}
/**
* copy a new position object by original position
*
* @param position - original position
*/
private copyPosition(position) {
private copyPosition(position: DragItemPosition): DragItemPosition {
if (CheckEmptyUtils.isEmpty(position)) {
return null;
}
const directionPosition = {
const directionPosition: DragItemPosition = {
page: position.page,
row: position.row,
column: position.column,
@ -374,40 +347,40 @@ export class PageDesktopDragHandler extends BaseDragHandler {
* @param startPosition - drag start position
* @param endPosition - drag end position
*/
private deleteBlankPageAfterDragging(startPosition, endPosition): void {
deleteBlankPageAfterDragging(startPosition: DragItemPosition, endPosition: DragItemPosition): void {
const layoutInfo = this.mSettingsModel.getLayoutInfo();
const pageCount = layoutInfo.layoutDescription.pageCount;
const isAddByDraggingFlag = this.mPageDesktopViewModel.isAddByDragging();
const isAddByDraggingFlag = this.mPageDesktopModel.isAddByDragging();
let deleteLastFlag = false;
if (isAddByDraggingFlag && (CheckEmptyUtils.isEmpty(endPosition) ||
!CheckEmptyUtils.isEmpty(endPosition) && endPosition.page != pageCount - 1 )) {
!CheckEmptyUtils.isEmpty(endPosition) && endPosition.page != pageCount - 1 )) {
layoutInfo.layoutDescription.pageCount = pageCount - 1;
deleteLastFlag = true;
}
let deleteStartFlag = false;
if (!CheckEmptyUtils.isEmpty(startPosition)) {
deleteStartFlag = this.mPageDesktopViewModel.deleteBlankPageFromLayoutInfo(layoutInfo, startPosition.page);
deleteStartFlag = this.mPageDesktopModel.deleteBlankPageFromLayoutInfo(layoutInfo, startPosition.page);
}
if (CheckEmptyUtils.isEmpty(endPosition)) {
this.mPageDesktopViewModel.changeIndex(startPosition.page);
AppStorage.SetOrCreate('pageIndex', startPosition.page);
} else if (deleteStartFlag) {
if (startPosition.page > endPosition.page) {
this.mPageDesktopViewModel.changeIndex(endPosition.page);
AppStorage.SetOrCreate('pageIndex', endPosition.page);
} else if (endPosition.page > startPosition.page &&
endPosition.page < layoutInfo.layoutDescription.pageCount) {
this.mPageDesktopViewModel.changeIndex(endPosition.page - 1);
endPosition.page < layoutInfo.layoutDescription.pageCount) {
AppStorage.SetOrCreate('pageIndex', endPosition.page - 1);
}
}
this.mPageDesktopModel.setAddByDragging(false);
if (deleteLastFlag || deleteStartFlag) {
this.mSettingsModel.setLayoutInfo(layoutInfo);
this.mPageDesktopViewModel.pagingFiltering();
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_PAGEDESK_REFRESH, null);
}
this.mPageDesktopViewModel.setAddByDragging(false);
}
private isMoveToSamePosition(dragItemInfo): boolean {
if (this.mEndPosition.page == dragItemInfo.page &&
this.mEndPosition.row == dragItemInfo.row && this.mEndPosition.column == dragItemInfo.column) {
this.mEndPosition.row == dragItemInfo.row && this.mEndPosition.column == dragItemInfo.column) {
return true;
}
return false;
@ -418,7 +391,7 @@ export class PageDesktopDragHandler extends BaseDragHandler {
this.mEndPosition.row = this.mEndPosition.row - positionOffset[1];
this.mEndPosition.column = this.mEndPosition.column - positionOffset[0];
this.mGridConfig = this.mPageDesktopViewModel.getGridConfig();
this.mGridConfig = this.mSettingsModel.getGridConfig();
if (this.mEndPosition.row < 0) {
this.mEndPosition.row = 0;
} else if (this.mEndPosition.row + dragItemInfo.area[1] > this.mGridConfig.row) {
@ -553,7 +526,7 @@ export class PageDesktopDragHandler extends BaseDragHandler {
}
private setAllpositionsToNull(allPositions): void {
const mGridConfig = this.mPageDesktopViewModel.getGridConfig();
const mGridConfig = this.mSettingsModel.getGridConfig();
const pageRow = mGridConfig.row;
const pageColumn = mGridConfig.column;

4
feature/pagedesktop/src/main/ets/default/common/PageDesktopGridStyleConfig.ts
View File

@ -16,7 +16,7 @@
import { CommonConstants } from '@ohos/common';
import { PresetStyleConstants } from '@ohos/common';
import { AppGridStyleConfig } from '@ohos/common';
import PagedesktopConstants from './constants/PagedesktopConstants';
import PageDesktopConstants from './constants/PageDesktopConstants';
/**
* Work control grid style configuration class
@ -54,6 +54,6 @@ export class PageDesktopGridStyleConfig extends AppGridStyleConfig {
}
getFeatureName(): string {
return PagedesktopConstants.FEATURE_NAME;
return PageDesktopConstants.FEATURE_NAME;
}
}

100
feature/pagedesktop/src/main/ets/default/common/components/AppItem.ets
View File

@ -17,27 +17,26 @@ import { Log } from '@ohos/common';
import { Trace } from '@ohos/common';
import { StyleConstants } from '@ohos/common';
import { PresetStyleConstants } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { AppBubble } from '@ohos/common';
import { AppIcon } from '@ohos/common';
import { UninstallDialog } from '@ohos/common';
import { FormManagerDialog } from '@ohos/common';
import { ResourceManager } from '@ohos/common';
import { PageDesktopDragHandler } from '../PageDesktopDragHandler';
import { CommonConstants } from '@ohos/common';
import PageDesktopViewModel from '../../viewmodel/PageDesktopViewModel';
import PagedesktopConstants from '../constants/PagedesktopConstants';
const APP_INFO_REFRESH_DELAY = 500;
const DOUBLE_CLICK_COUNT = 2
const TAG = "AppItem";
@Component
export default struct AppItem {
@StorageLink('dragItemInfo') pageDesktopDragItemInfo: any = {};
@StorageLink('dragItemType') dragItemType: number = CommonConstants.DRAG_FROM_DESKTOP;
@StorageLink('uninstallAppInfo') appInfo: any = {};
@StorageLink('formAppInfo') formAppInfo: any = {};
@StorageLink('selectDesktopAppItem') selectDesktopAppItem: string = '';
@StorageLink('isOverlayComplete') isOverlayComplete: boolean = false;
@State isDragging: boolean = false;
@State mAppNameHeight: number = StyleConstants.DEFAULT_APP_NAME_HEIGHT;
@State mAppItemWidth: number = StyleConstants.DEFAULT_APP_ITEM_WIDTH;
@State mAppNameSize: number = StyleConstants.DEFAULT_APP_NAME_SIZE;
@ -51,7 +50,6 @@ export default struct AppItem {
private isSwappingPage = false;
private item: any;
private mPageDesktopViewModel: PageDesktopViewModel;
private mSettingsModel: SettingsModel;
private isPad: boolean = false;
private mPageDesktopDragHandler: PageDesktopDragHandler;
private mouseClick: number = 0;
@ -105,6 +103,19 @@ export default struct AppItem {
customStyle: true
});
@Builder dragLayerBuilder() {
Column() {
AppIcon({
iconSize: this.mIconSize * 1.05,
iconId: this.item.appIconId,
bundleName: this.item.bundleName,
moduleName: this.item.moduleName,
icon: ResourceManager.getInstance().getCachedAppIcon(this.item.appIconId, this.item.bundleName, this.item.moduleName),
badgeNumber: this.item.badgeNumber
})
}
}
/**
* When click cancel dialog, this function will be called.
*/
@ -115,7 +126,6 @@ export default struct AppItem {
aboutToAppear(): void {
this.mPageDesktopDragHandler = PageDesktopDragHandler.getInstance();
this.mSettingsModel = SettingsModel.getInstance();
this.isPad = this.mPageDesktopViewModel.getDevice();
let styleConfig = this.mPageDesktopViewModel.getPageDesktopStyleConfig();
this.mAppNameHeight = styleConfig.mNameHeight;
@ -133,42 +143,6 @@ export default struct AppItem {
});
}
/**
* The app item on desktop workspace: drag state listener.
*/
private mDragStateListener = {
onItemDragStart: (event: any, itemIndex: number) => {
this.dialogController.close();
this.formManagerDialogController.close();
this.isDragging = true;
},
onItemDragMove: (event: any, insertIndex: number, itemIndex: number) => {
if (this.isSwappingPage) {
return;
}
let moveX = event.touches[0].screenX;
let moveY = event.touches[0].screenY;
let curPageIndex = this.mPageDesktopViewModel.getIndex();
if ((moveX - this.mIconSize / 2) < this.mMargin && curPageIndex > 0 && moveY < this.mGridSpaceHeight) {
this.mPageDesktopViewModel.showPrevious();
this.movingIconSwapPageDelay();
} else if ((moveX + this.mIconSize / 2) > this.mGridSpaceWidth && moveY < this.mGridSpaceHeight) {
let cachePageIndex = this.mSettingsModel.getLayoutInfo().layoutDescription.pageCount;
if (curPageIndex == cachePageIndex - 1 && !this.mPageDesktopViewModel.isBlankPage()) {
this.mPageDesktopViewModel.addBlankPage(true);
} else if(curPageIndex < cachePageIndex - 1) {
this.mPageDesktopViewModel.showNext();
}
this.movingIconSwapPageDelay();
}
},
onItemDragEnd: () => {
this.isDragging = false;
AppStorage.SetOrCreate('isOverlayComplete', false);
}
};
/**
* When click cancel dialog, this function will be called.
*/
@ -176,16 +150,6 @@ export default struct AppItem {
Log.showInfo(TAG, 'cancel app uninstall dialog');
}
/**
* Increase delay when dragging app to other page.
*/
movingIconSwapPageDelay() {
this.isSwappingPage = true;
setTimeout(() => {
this.isSwappingPage = false;
}, APP_INFO_REFRESH_DELAY);
}
build() {
Flex({
direction: FlexDirection.Column,
@ -210,10 +174,12 @@ export default struct AppItem {
this.dialogController, this.formManagerDialogController),
mPaddingTop: this.mMarginVertical,
nameLines: this.mNameLines,
mIconNameMargin: this.mIconNameMargin
mIconNameMargin: this.mIconNameMargin,
dragStart: this.dragStart.bind(this)
})
}
.visibility((this.isDragging && this.isOverlayComplete) ? Visibility.Hidden : Visibility.Visible)
.visibility(this.dragItemType === CommonConstants.DRAG_FROM_DESKTOP && this.pageDesktopDragItemInfo.keyName === this.item.keyName ?
Visibility.None : Visibility.Visible)
.onMouse((event: MouseEvent) => {
if (event.button == MouseButton.Right) {
event.stopPropagation();
@ -246,10 +212,16 @@ export default struct AppItem {
)
)
.onTouch((event: TouchEvent) => {
AppStorage.SetOrCreate('dragFocus', PagedesktopConstants.FEATURE_NAME);
this.mPageDesktopDragHandler.setDragStateListener(this.mDragStateListener);
Log.showInfo(TAG, `tap click notifyTouchEventUpdate x: ${event.touches[0].screenX}, y: ${event.touches[0].screenY}`);
this.mPageDesktopDragHandler.notifyTouchEventUpdate(event);
Log.showDebug(TAG, `onTouch event type: ${event.type}, x: ${event.touches[0].screenX}, y: ${event.touches[0].screenY}`);
if (event.type === CommonConstants.TOUCH_TYPE_UP && AppStorage.Get('isDrag')) {
let mIsDragEffectArea = globalThis.PageDesktopDragHandler.isDragEffectArea(event.touches[0].screenX, event.touches[0].screenY);
Log.showInfo(TAG, `onTouch mIsDragEffectArea: ${mIsDragEffectArea}`);
if (!mIsDragEffectArea) {
this.pageDesktopDragItemInfo = {};
AppStorage.SetOrCreate('selectAppIndex', null);
AppStorage.SetOrCreate('isDrag', false);
}
}
})
}
.width(this.mAppItemWidth)
@ -263,4 +235,14 @@ export default struct AppItem {
Trace.start(Trace.CORE_METHOD_LAUNCH_APP);
this.mPageDesktopViewModel.onAppDoubleClick(this.item.abilityName, this.item.bundleName, this.item.moduleName);
}
dragStart(event: DragEvent): CustomBuilder {
AppStorage.SetOrCreate('isDrag', true);
ContextMenu.close();
this.dragItemType = CommonConstants.DRAG_FROM_DESKTOP;
this.pageDesktopDragItemInfo = this.item;
Log.showInfo(TAG, `pageDesktopDragItemInfo: ${JSON.stringify(this.pageDesktopDragItemInfo)}`);
globalThis.PageDesktopDragHandler.onDragStart(event.getX(), event.getY());
return this.dragLayerBuilder();
}
}

109
feature/pagedesktop/src/main/ets/default/common/components/FolderItem.ets
View File

@ -23,10 +23,8 @@ import { BigFolderViewModel } from '@ohos/bigfolder';
import { BigFolderStyleConfig } from '@ohos/bigfolder';
import { PageDesktopDragHandler } from '../PageDesktopDragHandler';
import PageDesktopViewModel from '../../viewmodel/PageDesktopViewModel'
import PagedesktopConstants from '../constants/PagedesktopConstants';
import { BigFolderConstants } from '@ohos/bigfolder';
const FOLDER_INFO_REFRESH_DELAY = 500;
const TAG = 'FolderItem';
/**
@ -34,9 +32,10 @@ const TAG = 'FolderItem';
*/
@Component
export default struct FolderItem {
@StorageLink('openFolderStatus') openFolderStatus: number = 0;
@StorageLink('dragItemInfo') pageDesktopDragItemInfo: any = {};
@StorageLink('dragItemType') dragItemType: number = CommonConstants.DRAG_FROM_DESKTOP;
@StorageLink('openFolderStatus') openFolderStatus: number = BigFolderConstants.OPEN_FOLDER_STATUS_CLOSE;
@StorageLink('selectDesktopAppItem') selectDesktopAppItem: string = '';
@State isDragging: boolean = false;
@State mAppNameHeight: number = StyleConstants.DEFAULT_APP_NAME_HEIGHT;
@State mAppNameSize: number = StyleConstants.DEFAULT_APP_NAME_SIZE;
private folderItem: any;
@ -52,6 +51,27 @@ export default struct FolderItem {
private mFolderStyleConfig: BigFolderStyleConfig;
mNameLines: number = PresetStyleConstants.DEFAULT_APP_NAME_LINES;
@Builder dragLayerBuilder() {
Column() {
FolderComponent({
showFolderName: false,
nameFontColor: this.mPageDesktopViewModel.getPageDesktopStyleConfig().mNameFontColor,
folderNameHeight: 0,
folderNameSize: 0,
mFolderItem: this.folderItem,
folderGridSize: this.mFolderStyleConfig.mGridSize * 1.05,
appIconSize: this.mFolderStyleConfig.mFolderAppSize * 1.05,
gridMargin: this.mFolderStyleConfig.mGridMargin * 1.05,
gridGap: this.mFolderStyleConfig.mFolderGridGap * 1.05,
buildMenu: (folderItem) => {
return [];
}
})
}
.height(this.mFolderStyleConfig.mGridSize * 1.05)
.width(this.mFolderStyleConfig.mGridSize * 1.05)
}
aboutToAppear(): void {
this.mPageDesktopDragHandler = PageDesktopDragHandler.getInstance();
this.mBigFolderViewModel = BigFolderViewModel.getInstance();
@ -66,7 +86,7 @@ export default struct FolderItem {
this.mMargin = styleConfig.mMargin;
this.mGridSpaceWidth = Number(this.mPageDesktopViewModel.getWorkSpaceWidth()) - this.mMargin;
this.mGridSpaceHeight = Number(this.mPageDesktopViewModel.getWorkSpaceHeight());
this.openFolderStatus = AppStorage.Get('openFolderStatus') != 'undefined' ? AppStorage.Get('openFolderStatus') : 0;
this.openFolderStatus = AppStorage.Get('openFolderStatus') != 'undefined' ? AppStorage.Get('openFolderStatus') : BigFolderConstants.OPEN_FOLDER_STATUS_CLOSE;
this.formatFolderInfo();
}
@ -92,38 +112,6 @@ export default struct FolderItem {
}
}
/**
* The folder item on desktop workspace: drag state listener.
*/
private mDragStateListener = {
onItemDragStart: (event: any, itemIndex: number) => {
this.isDragging = true;
},
onItemDragMove: (event: any, insertIndex: number, itemIndex: number) => {
if (this.isSwappingPage) {
return;
}
let moveX = event.touches[0].screenX;
let moveY = event.touches[0].screenY;
if ((moveX - this.mAppItemWidth / 2) < this.mMargin
&& this.mPageDesktopViewModel.getIndex() > 0 && moveY < this.mGridSpaceHeight) {
this.mPageDesktopViewModel.showPrevious();
this.movingFolderSwapPageDelay();
} else if ((moveX + this.mAppItemWidth / 2) > this.mGridSpaceWidth && moveY < this.mGridSpaceHeight) {
if (this.mPageDesktopViewModel.getIndex() == this.mPageDesktopViewModel.getGridPageCount() - 1
&& !this.mPageDesktopViewModel.isBlankPage()) {
this.mPageDesktopViewModel.addBlankPage(true);
} else if (this.mPageDesktopViewModel.getIndex() < this.mPageDesktopViewModel.getGridPageCount() - 1) {
this.mPageDesktopViewModel.showNext();
}
this.movingFolderSwapPageDelay();
}
},
onItemDragEnd: () => {
this.isDragging = false;
}
};
/**
* When rename is clicked, call this function to change folder state.
*/
@ -133,17 +121,7 @@ export default struct FolderItem {
this.mBigFolderViewModel.openFolder(true, this.folderItem);
}
/**
* Increase delay when dragging folder to other page.
*/
movingFolderSwapPageDelay() {
this.isSwappingPage = true;
setTimeout(() => {
this.isSwappingPage = false;
}, FOLDER_INFO_REFRESH_DELAY);
}
private getOpenFolder(): String {
private getOpenFolder(): string {
let openFolderData: {
folderId: string,
layoutInfo: any
@ -152,6 +130,23 @@ export default struct FolderItem {
return openFolderData.folderId;
}
dragStart(event: DragEvent): CustomBuilder {
AppStorage.SetOrCreate('isDrag', true);
ContextMenu.close();
this.dragItemType = CommonConstants.DRAG_FROM_DESKTOP;
this.pageDesktopDragItemInfo = this.folderItem;
const selectAppIndex = globalThis.PageDesktopDragHandler.getItemIndex(event.getX(), event.getY());
const startPosition = globalThis.PageDesktopDragHandler.getTouchPosition(event.getX(), event.getY())
globalThis.PageDesktopDragHandler.mStartPosition = startPosition;
AppStorage.SetOrCreate('selectAppIndex', selectAppIndex);
Log.showInfo(TAG, `onDragStart event: [${event.getX()}, ${event.getY()}], selectAppIndex: ${selectAppIndex}`);
const rowOffset = startPosition.row - this.pageDesktopDragItemInfo.row;
const columnOffset = startPosition.column - this.pageDesktopDragItemInfo.column;
const positionOffset = [columnOffset, rowOffset];
AppStorage.SetOrCreate('positionOffset', positionOffset);
return this.dragLayerBuilder();
}
build() {
Flex({
direction: FlexDirection.Column,
@ -184,10 +179,15 @@ export default struct FolderItem {
this.mBigFolderViewModel.openFolder(false, folderItem);
},
onFolderTouch: (event, folderItem) => {
Log.showInfo(TAG, "onFolderTouch");
AppStorage.SetOrCreate('dragFocus', PagedesktopConstants.FEATURE_NAME);
this.mPageDesktopDragHandler.setDragStateListener(this.mDragStateListener);
this.mPageDesktopDragHandler.notifyTouchEventUpdate(event);
if (event.type === CommonConstants.TOUCH_TYPE_UP && AppStorage.Get('isDrag')) {
let mIsDragEffectArea = globalThis.PageDesktopDragHandler.isDragEffectArea(event.touches[0].screenX, event.touches[0].screenY);
Log.showInfo(TAG, `onTouch mIsDragEffectArea: ${mIsDragEffectArea}`);
if (!mIsDragEffectArea) {
AppStorage.SetOrCreate('dragItemInfo', {});
AppStorage.SetOrCreate('selectAppIndex', null);
AppStorage.SetOrCreate('isDrag', false);
}
}
},
onGetPosition: (getPosition: Function) => {
Log.showInfo(TAG, "onGetPosition");
@ -203,10 +203,11 @@ export default struct FolderItem {
getPosition(x, y);
},
buildMenu: (folderItem) =>
this.mPageDesktopViewModel.buildRenameMenuInfoList(folderItem, this.renameClick.bind(this))
this.mPageDesktopViewModel.buildRenameMenuInfoList(folderItem, this.renameClick.bind(this)),
dragStart: this.dragStart.bind(this)
})
}
.visibility((this.isDragging || (this.openFolderStatus != 0 && this.getOpenFolder() == this.folderItem.folderId)) ? Visibility.Hidden : Visibility.Visible)
.visibility((this.pageDesktopDragItemInfo.folderId === this.folderItem.folderId || (this.openFolderStatus != 0 && this.getOpenFolder() == this.folderItem.folderId)) ? Visibility.Hidden : Visibility.Visible)
.onMouse((event: MouseEvent) => {
if (event.button == MouseButton.Right) {
event.stopPropagation();

166
feature/pagedesktop/src/main/ets/default/common/components/FormItem.ets
View File

@ -23,10 +23,9 @@ import { FormItemComponent } from '@ohos/common';
import { FormViewModel } from '@ohos/form';
import { FormStyleConfig } from '@ohos/form';
import { PageDesktopDragHandler } from '../PageDesktopDragHandler';
import { CommonConstants } from '@ohos/common';
import PageDesktopViewModel from '../../viewmodel/PageDesktopViewModel';
import PagedesktopConstants from '../constants/PagedesktopConstants';
const FORM_INFO_REFRESH_DELAY = 500;
const TAG = 'FormItem';
/**
@ -34,7 +33,9 @@ const TAG = 'FormItem';
*/
@Component
export default struct FormItem {
@StorageLink('dragItemInfo') pageDesktopDragItemInfo: any = {};
@StorageLink('isRemoveForm') @Watch('removeFormAnimate') isRemoveForm: boolean = false;
@StorageLink('dragItemType') dragItemType: number = CommonConstants.DRAG_FROM_DESKTOP;
@StorageLink('formAnimateData') formAnimateData: {
cardId: number,
isOpenRemoveFormDialog: boolean,
@ -48,7 +49,6 @@ export default struct FormItem {
private mFormViewModel: FormViewModel;
private mFormStyleConfig: FormStyleConfig;
private mPageDesktopDragHandler: PageDesktopDragHandler;
@State isDragging: boolean = false;
@State mFormNameHeight: number = StyleConstants.DEFAULT_APP_NAME_HEIGHT;
@State mAppItemWidth: number = StyleConstants.DEFAULT_APP_ITEM_WIDTH;
@State mFormNameSize: number = StyleConstants.DEFAULT_APP_NAME_SIZE;
@ -64,11 +64,24 @@ export default struct FormItem {
private mForm: string = '';
private clearForm: Function = null;
@Builder dragLayerBuilder() {
Column() {
FormItemComponent({
formItem: this.formItem,
formItemWidth: this.mFormItemWidth * 1.05,
formItemHeight: this.mFormItemHeight * 1.05,
formNameHeight: 0,
formNameSize: 0
})
}
.height(this.mFormNameHeight * 1.05)
.width(this.mFormItemWidth * 1.05)
}
aboutToAppear(): void {
this.mPageDesktopDragHandler = PageDesktopDragHandler.getInstance();
this.mFormViewModel = FormViewModel.getInstance();
this.mFormStyleConfig = this.mFormViewModel.getFormStyleConfig();
let mGridConfig = this.mPageDesktopViewModel.getGridConfig();
let styleConfig = this.mPageDesktopViewModel.getPageDesktopStyleConfig();
this.mFormNameHeight = styleConfig.mNameHeight;
this.mAppItemWidth = styleConfig.mIconSize;
@ -191,94 +204,75 @@ export default struct FormItem {
this.clearForm();
}
/**
* The form item on desktop workspace: drag state listener.
*/
private mDragStateListener = {
onItemDragStart: (event: any, itemIndex: number) => {
this.isDragging = true;
},
onItemDragMove: (event: any, insertIndex: number, itemIndex: number) => {
if (this.isSwappingPage) {
return;
}
let moveX = event.touches[0].screenX;
let moveY = event.touches[0].screenY;
if ((moveX - this.mAppItemWidth / 2) < this.mMargin
&& this.mPageDesktopViewModel.getIndex() > 0 && moveY < this.mGridSpaceHeight) {
this.mPageDesktopViewModel.showPrevious();
this.movingFormSwapPageDelay();
} else if ((moveX + this.mAppItemWidth / 2) > this.mGridSpaceWidth && moveY < this.mGridSpaceHeight) {
if (this.mPageDesktopViewModel.getIndex() === this.mPageDesktopViewModel.getGridPageCount() - 1
&& !this.mPageDesktopViewModel.isBlankPage()) {
this.mPageDesktopViewModel.addBlankPage(true);
} else if (this.mPageDesktopViewModel.getIndex() < this.mPageDesktopViewModel.getGridPageCount() - 1) {
this.mPageDesktopViewModel.showNext();
}
this.movingFormSwapPageDelay();
}
},
onItemDragEnd: (event: any, insertIndex: number, itemIndex: number) => {
this.isDragging = false;
}
};
/**
* Increase delay when dragging card to other page.
*/
movingFormSwapPageDelay() {
this.isSwappingPage = true;
setTimeout(() => {
this.isSwappingPage = false;
}, FORM_INFO_REFRESH_DELAY);
dragStart(event: DragEvent): CustomBuilder {
AppStorage.SetOrCreate('isDrag', true);
ContextMenu.close();
this.dragItemType = CommonConstants.DRAG_FROM_DESKTOP;
this.pageDesktopDragItemInfo = this.formItem;
const selectAppIndex = globalThis.PageDesktopDragHandler.getItemIndex(event.getX(), event.getY());
const startPosition = globalThis.PageDesktopDragHandler.getTouchPosition(event.getX(), event.getY())
globalThis.PageDesktopDragHandler.mStartPosition = startPosition;
AppStorage.SetOrCreate('selectAppIndex', selectAppIndex);
Log.showInfo(TAG, `onDragStart event: [${event.getX()}, ${event.getY()}], selectAppIndex: ${selectAppIndex}`);
const rowOffset = startPosition.row - this.pageDesktopDragItemInfo.row;
const columnOffset = startPosition.column - this.pageDesktopDragItemInfo.column;
const positionOffset = [columnOffset, rowOffset];
AppStorage.SetOrCreate('positionOffset', positionOffset);
return this.dragLayerBuilder();
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
if (!this.isDragging) {
Column() {
FormItemComponent({
formItemWidth: this.mFormItemWidth,
formItemHeight: this.mFormItemHeight,
formNameHeight: this.mFormNameHeight,
formNameSize: this.mFormNameSize,
nameFontColor: this.mPageDesktopViewModel.getPageDesktopStyleConfig().mNameFontColor,
formItem: this.formItem,
nameLines: this.mNameLines,
mPaddingTop: this.mIconMarginVertical,
iconNameMargin: this.mPageDesktopViewModel.getPageDesktopStyleConfig().mIconNameMargin,
menuInfo: this.mPageDesktopViewModel.buildCardMenuInfoList(this.formItem,
this.dialogController, this.formManagerDialogController),
clickForm: (event, formItem) => {
this.mPageDesktopViewModel.openApplication(this.formItem.abilityName, this.formItem.bundleName, this.formItem.moduleName);
}
})
}
.scale({ x: this.animateScale, y: this.animateScale })
.opacity(this.animateOpacity)
.onMouse((event: MouseEvent) => {
if (event.button === MouseButton.Right) {
event.stopPropagation();
Log.showInfo(TAG, 'onMouse mouse button right');
}
Column() {
FormItemComponent({
formItemWidth: this.mFormItemWidth,
formItemHeight: this.mFormItemHeight,
formNameHeight: this.mFormNameHeight,
formNameSize: this.mFormNameSize,
nameFontColor: this.mPageDesktopViewModel.getPageDesktopStyleConfig().mNameFontColor,
formItem: this.formItem,
nameLines: this.mNameLines,
mPaddingTop: this.mIconMarginVertical,
iconNameMargin: this.mPageDesktopViewModel.getPageDesktopStyleConfig().mIconNameMargin,
menuInfo: this.mPageDesktopViewModel.buildCardMenuInfoList(this.formItem,
this.dialogController, this.formManagerDialogController),
clickForm: (event, formItem) => {
this.mPageDesktopViewModel.openApplication(this.formItem.abilityName, this.formItem.bundleName, this.formItem.moduleName);
},
dragStart: this.dragStart.bind(this)
})
.gesture(
GestureGroup(GestureMode.Exclusive,
TapGesture({ count: 2 })
.onAction((event: GestureEvent) => {
Log.showInfo(TAG, 'mouse double click');
this.mPageDesktopViewModel.onAppDoubleClick(this.formItem.abilityName, this.formItem.bundleName, this.formItem.moduleName);
})
)
)
.onTouch((event: TouchEvent) => {
AppStorage.SetOrCreate('dragFocus', PagedesktopConstants.FEATURE_NAME);
this.mPageDesktopDragHandler.setDragStateListener(this.mDragStateListener);
this.mPageDesktopDragHandler.notifyTouchEventUpdate(event);
})
.width(StyleConstants.PERCENTAGE_100)
.height(StyleConstants.PERCENTAGE_100)
}
.visibility(this.pageDesktopDragItemInfo.cardId === this.formItem.cardId ? Visibility.None : Visibility.Visible)
.scale({ x: this.animateScale, y: this.animateScale })
.opacity(this.animateOpacity)
.onMouse((event: MouseEvent) => {
if (event.button === MouseButton.Right) {
event.stopPropagation();
Log.showInfo(TAG, 'onMouse mouse button right');
}
})
.gesture(
GestureGroup(GestureMode.Exclusive,
TapGesture({ count: 2 })
.onAction((event: GestureEvent) => {
Log.showInfo(TAG, 'mouse double click');
this.mPageDesktopViewModel.onAppDoubleClick(this.formItem.abilityName, this.formItem.bundleName, this.formItem.moduleName);
})
)
)
.onTouch((event: TouchEvent) => {
if (event.type === CommonConstants.TOUCH_TYPE_UP && AppStorage.Get('isDrag')) {
let mIsDragEffectArea = globalThis.PageDesktopDragHandler.isDragEffectArea(event.touches[0].screenX, event.touches[0].screenY);
Log.showInfo(TAG, `onTouch mIsDragEffectArea: ${mIsDragEffectArea}`);
if (!mIsDragEffectArea) {
this.pageDesktopDragItemInfo = {};
AppStorage.SetOrCreate('selectAppIndex', null);
AppStorage.SetOrCreate('isDrag', false);
}
}
})
.width(StyleConstants.PERCENTAGE_100)
.height(StyleConstants.PERCENTAGE_100)
}
.width(StyleConstants.PERCENTAGE_100)
.height(StyleConstants.PERCENTAGE_100)

14
feature/pagedesktop/src/main/ets/default/common/components/GridSwiper.ets
View File

@ -21,8 +21,9 @@ const TAG = "GridSwiper";
@Component
export default struct GridSwiper {
@StorageLink('NavigationBarStatusValue') navigationBarStatusValue: boolean = false;
@Prop gridConfig: string;
@StorageLink('pageIndex') PageIndex: number = 0;
@StorageLink('pageIndex') pageIndex: number = 0;
private mPageDesktopViewModel;
@State mAppGridInfo: [[]] = [[]];
private swiperController: SwiperController = new SwiperController();
@ -33,12 +34,11 @@ export default struct GridSwiper {
aboutToDisappear(): void {
Log.showInfo(TAG, 'aboutToDisappear');
this.mPageDesktopViewModel.setPageIndex();
}
private buildLog(): boolean {
let isDesktopLoadFinished = AppStorage.Get('isDesktopLoadFinished');
Log.showInfo(TAG, `build start ${isDesktopLoadFinished} page ${this.PageIndex}`);
Log.showInfo(TAG, `build start ${isDesktopLoadFinished} page ${this.pageIndex}`);
return isDesktopLoadFinished == true;
}
@ -54,17 +54,19 @@ export default struct GridSwiper {
})
})
}
.padding({
top: this.navigationBarStatusValue ? this.mPageDesktopViewModel.getPageDesktopStyleConfig().mDesktopMarginTop : this.mPageDesktopViewModel.getPageDesktopStyleConfig().mDesktopMarginTop + 0
})
.height(StyleConstants.PERCENTAGE_100)
.width(StyleConstants.PERCENTAGE_100)
.indicatorStyle({
selectedColor: StyleConstants.DEFAULT_FONT_COLOR
})
.loop(false)
.index(this.PageIndex)
.index(this.pageIndex)
.onChange((index) => {
this.PageIndex = index;
this.pageIndex = index;
Log.showInfo(TAG, `swiper change to page ${index}`);
this.mPageDesktopViewModel.changeIndexOnly(index);
})
}
}

73
feature/pagedesktop/src/main/ets/default/common/components/SwiperPage.ets
View File

@ -22,11 +22,11 @@ import FolderItem from './FolderItem';
import { PageDesktopGridStyleConfig } from '../PageDesktopGridStyleConfig';
const TAG = "SwiperPage";
const APP_INFO_REFRESH_DELAY = 500;
@Component
export default struct SwiperPage {
@StorageLink('workSpaceWidth') workSpaceWidth: number = 0;
@StorageLink('NavigationBarStatusValue') navigationBarStatusValue: boolean = false;
@State ColumnsTemplate: string = '';
@State RowsTemplate: string = ''
@Prop @Watch('changeColumnAndRow') gridConfig: string;
@ -41,6 +41,10 @@ export default struct SwiperPage {
private mPageDesktopStyleConfig:PageDesktopGridStyleConfig;
private mGridWidth : number;
private mGridHeight: number;
private mIconSize: number;
private mGridSpaceWidth : number;
private mGridSpaceHeight: number;
private isSwappingPage = false;
aboutToAppear(): void {
this.mPageDesktopStyleConfig = this.mPageDesktopViewModel.getPageDesktopStyleConfig();
@ -52,9 +56,40 @@ export default struct SwiperPage {
this.mMarginTop = this.mPageDesktopStyleConfig.mDesktopMarginTop;
this.mGridWidth = this.mPageDesktopStyleConfig.mGridWidth;
this.mGridHeight = this.mPageDesktopStyleConfig.mGridHeight;
this.mIconSize = this.mPageDesktopStyleConfig.mIconSize;
this.mGridSpaceWidth = Number(this.mPageDesktopViewModel.getWorkSpaceWidth()) - this.mMargin;
this.mGridSpaceHeight = Number(this.mPageDesktopViewModel.getWorkSpaceHeight());
this.changeConfig();
}
itemMove(moveX: number, moveY: number){
if (this.isSwappingPage) {
return;
}
let curPageIndex: number = AppStorage.Get('pageIndex');
if ((moveX - this.mIconSize / 2) < this.mMargin && curPageIndex > 0 && moveY < this.mGridSpaceHeight) {
this.mPageDesktopViewModel.showPrevious();
this.movingIconSwapPageDelay();
} else if ((moveX + this.mIconSize / 2) > this.mGridSpaceWidth && moveY < this.mGridSpaceHeight) {
let cachePageIndex = this.mPageDesktopViewModel.getGridPageCount();
if (curPageIndex == cachePageIndex - 1 && !this.mPageDesktopViewModel.isBlankPage()) {
this.mPageDesktopViewModel.addBlankPage(true);
} else if(curPageIndex < cachePageIndex - 1) {
this.mPageDesktopViewModel.showNext();
}
this.movingIconSwapPageDelay();
}
}
/**
* Increase delay when dragging app to other page.
*/
movingIconSwapPageDelay() {
this.isSwappingPage = true;
setTimeout(() => {
this.isSwappingPage = false;
}, APP_INFO_REFRESH_DELAY);
}
private changeColumnAndRow(): void {
this.changeConfig();
}
@ -77,6 +112,7 @@ export default struct SwiperPage {
Log.showInfo(TAG, `build item bundleName: ${item.bundleName}`);
return true;
}
build() {
Grid() {
ForEach(this.mAppListInfo, (item) => {
@ -120,8 +156,7 @@ export default struct SwiperPage {
.height(this.mGridHeight)
.margin({
right: this.mMargin,
left: this.mMargin,
top: this.navigationBarStatusValue ? this.mPageDesktopStyleConfig.mDesktopMarginTop : this.mPageDesktopStyleConfig.mDesktopMarginTop + 0
left: this.mMargin
})
.onMouse((event: MouseEvent) => {
if (event.button == MouseButton.Right) {
@ -131,5 +166,37 @@ export default struct SwiperPage {
.onClick(() => {
AppStorage.SetOrCreate('selectDesktopAppItem', '')
})
.onDragEnter((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDragEnter extraParams: ${extraParams}, event: [${event.getX()}, ${event.getY()}]`);
})
.onDragMove((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDragMove event: [${event.getX()}, ${event.getY()}]`);
if (AppStorage.Get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE
|| (AppStorage.Get('deviceType') != CommonConstants.DEFAULT_DEVICE_TYPE && AppStorage.Get('dragItemType') !== 1)) {
this.itemMove(event.getX(), event.getY());
}
})
.onDragLeave((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDragLeave event: [${event.getX()}, ${event.getY()}]`);
})
.onDrop((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDrop event: [${event.getX()}, ${event.getY()}]`);
let dragItemInfo: any = AppStorage.Get('dragItemInfo');
// Drag within its own component
if (dragItemInfo && AppStorage.Get('dragItemType') === 2) {
globalThis.PageDesktopDragHandler.onDragDrop(event.getX(), event.getY());
}
// Drag from other components
if (dragItemInfo && AppStorage.Get('dragItemType') === 1 && AppStorage.Get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE) {
dragItemInfo.typeId = 0;
dragItemInfo.area = [1, 1];
dragItemInfo.page = AppStorage.Get('pageIndex');
AppStorage.SetOrCreate('dragItemInfo', dragItemInfo);
globalThis.PageDesktopDragHandler.onDragDrop(event.getX(), event.getY());
}
AppStorage.SetOrCreate('dragItemInfo', {});
AppStorage.SetOrCreate('selectAppIndex', null);
AppStorage.SetOrCreate('isDrag', false);
})
}
}

2
feature/pagedesktop/src/main/ets/default/common/constants/PagedesktopConstants.ts
View File

@ -13,6 +13,6 @@
* limitations under the License.
*/
export default class PagedesktopConstants {
export default class PageDesktopConstants {
static readonly FEATURE_NAME = 'featurePageDesktop';
}

20
feature/pagedesktop/src/main/ets/default/layout/PageDesktopLayout.ets
View File

@ -20,7 +20,6 @@ import { MenuInfo } from '@ohos/common';
import { StyleConstants } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import GridSwiper from '../common/components/GridSwiper';
import PagedesktopConstants from '../common/constants/PagedesktopConstants';
import { PageDesktopDragHandler } from '../common/PageDesktopDragHandler';
import PageDesktopViewModel from '../viewmodel/PageDesktopViewModel';
@ -32,16 +31,15 @@ export struct PageDesktopLayout {
@StorageLink('appListInfo') AppListInfo: {
appGridInfo: [[]]
} = { appGridInfo: [[]] };
@StorageLink('dragLocation') @Watch('onTouchEventUpdate') dragLocation: string = '';
@StorageLink('workSpaceWidth') @Watch('updateDeskTopParams') workSpaceWidth: number = 0;
@StorageLink('workSpaceHeight') @Watch('updateDeskTopParams') workSpaceHeight: number = 0;
@State device: string = 'phone';
@State @Watch('updateDeskTopParams') mMargin: number = 0;
@State mTop: number = 0;
@State @Watch('changeGridConfig') gridConfig: string = '';
@StorageLink('menuId') menuId: number = 0;
private mPageDesktopDragHandler: PageDesktopDragHandler = null;
private isPad: boolean = false;
private deviceType: string = CommonConstants.DEFAULT_DEVICE_TYPE;
dialogController: CustomDialogController = new CustomDialogController({
builder: settingDialog({ cancel: this.onCancel, confirm: this.confirm, onAccept: this.onAccept }),
cancel: this.onCancel,
@ -51,7 +49,6 @@ export struct PageDesktopLayout {
})
onCancel() {
}
onAccept() {
@ -64,17 +61,18 @@ export struct PageDesktopLayout {
}
aboutToAppear(): void {
this.deviceType = AppStorage.Get('deviceType');
this.mPageDesktopDragHandler = PageDesktopDragHandler.getInstance();
mPageDesktopViewModel = PageDesktopViewModel.getInstance();
this.gridConfig = mPageDesktopViewModel.getGridConfig().layout;
this.updateStyle();
if (this.device != CommonConstants.PAD_DEVICE_TYPE) {
if (this.deviceType != CommonConstants.PAD_DEVICE_TYPE) {
mPageDesktopViewModel.registerAppListChangeCallback();
}
}
private updateStyle() {
mPageDesktopViewModel.setDevice(this.device);
mPageDesktopViewModel.setDevice(this.deviceType);
this.isPad = mPageDesktopViewModel.getDevice();
Log.showInfo(TAG, `updateStyle isPad: ${this.isPad}`);
}
@ -88,17 +86,11 @@ export struct PageDesktopLayout {
left: this.mMargin,
top: this.mTop,
right: this.workSpaceWidth - this.mMargin,
bottom: this.workSpaceHeight
bottom: mPageDesktopViewModel.getPageDesktopStyleConfig().mGridHeight + this.mTop
});
}
}
private onTouchEventUpdate() {
if (AppStorage.Get('device') === 'phone' || AppStorage.Get('dragFocus') == PagedesktopConstants.FEATURE_NAME) {
this.mPageDesktopDragHandler.onTouchEventUpdate(AppStorage.Get('dragEvent'));
}
}
private changeGridConfig(): void {
Log.showInfo(TAG, `changeGridConfig GridConfig: ${this.gridConfig}`);
this.updateDeskTopParams();
@ -150,7 +142,7 @@ export struct PageDesktopLayout {
}
build() {
if (this.device == 'phone') {
if (this.deviceType == CommonConstants.DEFAULT_DEVICE_TYPE) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
if (this.buildLog()) {
}

77
feature/pagedesktop/src/main/ets/default/model/PageDesktopModel.ts
View File

@ -1,77 +0,0 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { EventConstants } from '@ohos/common';
import { localEventManager } from '@ohos/common';
/**
* PageDesktop Model
*/
export default class PageDesktopModel {
private constructor() {
}
/**
* Obtains the pageDesktop data model object.
*
* @return PageDesktopModel
*/
static getInstance(): PageDesktopModel {
if (globalThis.PageDesktopModel == null) {
globalThis.PageDesktopModel = new PageDesktopModel();
}
return globalThis.PageDesktopModel;
}
/**
* Register for the PageDesktop application list add event.
*
* @param listener
*/
registerPageDesktopItemAddEvent(listener): void {
localEventManager.registerEventListener(listener, [
EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_ADD,
EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_DELETE,
EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_UPDATE,
EventConstants.EVENT_REQUEST_PAGEDESK_FORM_ITEM_ADD,
EventConstants.EVENT_SMARTDOCK_INIT_FINISHED
]);
}
/**
* register badge update event.
*
* @param listener
*/
registerPageDesktopBadgeUpdateEvent(listener): void {
localEventManager.registerEventListener(listener, [
EventConstants.EVENT_BADGE_UPDATE
]);
}
/**
* Unregister application list change listener.
*
* @param listener
*/
unregisterEventListener(listener): void {
localEventManager.unregisterEventListener(listener);
}
sendDockItemChangeEvent(appInfo) {
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_DOCK_ITEM_ADD, appInfo);
}
}

322
feature/pagedesktop/src/main/ets/default/viewmodel/PageDesktopViewModel.ts
View File

@ -25,16 +25,16 @@ import { windowManager } from '@ohos/common';
import { layoutConfigManager } from '@ohos/common';
import { BaseViewModel } from '@ohos/common';
import { SettingsModelObserver } from '@ohos/common';
import { FormListInfoCacheManager, localEventManager } from '@ohos/common';
import { FormListInfoCacheManager } from '@ohos/common';
import { FormModel } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { PageDesktopModel } from '@ohos/common';
import { MenuInfo } from '@ohos/common';
import { CardItemInfo } from '@ohos/common';
import { BigFolderModel } from '@ohos/bigfolder';
import { FormDetailLayoutConfig } from '@ohos/form';
import { localEventManager } from '@ohos/common';
import PageDesktopModel from '../model/PageDesktopModel';
import PagedesktopConstants from '../common/constants/PagedesktopConstants';
import PageDesktopConstants from '../common/constants/PageDesktopConstants';
import { PageDesktopGridStyleConfig } from '../common/PageDesktopGridStyleConfig';
const TAG = 'PageDesktopViewModel';
@ -50,11 +50,9 @@ export default class PageDesktopViewModel extends BaseViewModel {
private readonly mPageDesktopModel: PageDesktopModel;
private readonly mBadgeManager: BadgeManager;
private readonly mFormListInfoCacheManager: FormListInfoCacheManager;
private readonly mAppInfoList;
private mBundleInfoList;
private mHideBundleInfoList = new Array<any>();
private mGridConfig;
private mPageIndex = 0;
private mGridAppsInfos;
private readonly mPageCoordinateData = {
gridXAxis: [],
@ -105,6 +103,9 @@ export default class PageDesktopViewModel extends BaseViewModel {
case EventConstants.EVENT_SMARTDOCK_INIT_FINISHED:
this.getGridList();
break;
case EventConstants.EVENT_REQUEST_PAGEDESK_REFRESH:
this.pagingFiltering();
break;
default:
if (!this.isPad) {
Log.showInfo(TAG, 'localEventListener hideBundleInfoList!')
@ -135,9 +136,8 @@ export default class PageDesktopViewModel extends BaseViewModel {
this.mSettingsModel.addObserver(this.mSettingsChangeObserver);
this.onPageDesktopCreate();
this.mGridConfig = this.getGridConfig();
this.pageDesktopStyleConfig = layoutConfigManager.getStyleConfig(PageDesktopGridStyleConfig.APP_GRID_STYLE_CONFIG, PagedesktopConstants.FEATURE_NAME);
this.formDetailLayoutConfig = layoutConfigManager.getStyleConfig(FormDetailLayoutConfig.FORM_LAYOUT_INFO, PagedesktopConstants.FEATURE_NAME);
AppStorage.SetOrCreate('pageIndex', this.mPageIndex);
this.pageDesktopStyleConfig = layoutConfigManager.getStyleConfig(PageDesktopGridStyleConfig.APP_GRID_STYLE_CONFIG, PageDesktopConstants.FEATURE_NAME);
this.formDetailLayoutConfig = layoutConfigManager.getStyleConfig(FormDetailLayoutConfig.FORM_LAYOUT_INFO, PageDesktopConstants.FEATURE_NAME);
}
/**
@ -256,7 +256,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
(layoutInfo[i].bundleName == appItem.bundleName || layoutInfo[i].keyName == appItem.keyName)) {
const page = layoutInfo[i].page;
gridLayoutInfo.layoutInfo.splice(i, 1);
this.deleteBlankPageFromLayoutInfo(gridLayoutInfo, page);
this.mPageDesktopModel.deleteBlankPageFromLayoutInfo(gridLayoutInfo, page);
this.mSettingsModel.setLayoutInfo(gridLayoutInfo);
break;
}
@ -694,180 +694,12 @@ export default class PageDesktopViewModel extends BaseViewModel {
// calculate the layout of new apps
for (let i = 0; i < newApp.length; i++) {
if (newApp[i].typeId == CommonConstants.TYPE_APP) {
this.updateAppItemLayoutInfo(info, newApp[i]);
this.mPageDesktopModel.updateAppItemLayoutInfo(info, newApp[i]);
}
}
return info;
}
private updateCardItemLayoutInfo(info, item) {
const pageCount = info.layoutDescription.pageCount;
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
// current page has space
let isNeedNewPage = true;
const max = pageCount - 1 > this.mPageIndex ? this.mPageIndex + 1 : pageCount - 1;
pageCycle: for (let i = this.mPageIndex; i <= max; i++) {
for (let y = 0; y < row; y++) {
for (let x = 0; x < column; x++) {
if (this.isPositionValid(info, item, i, x, y)) {
Log.showInfo(TAG, 'updateCardItemLayoutInfo isPositionValid: x:' + x + ' y: '+ y + ' page: '+ i);
isNeedNewPage = false;
item.page = i;
item.column = x;
item.row = y;
break pageCycle;
}
}
}
}
if (isNeedNewPage) {
item.page = this.mPageIndex + 1;
item.column = 0;
item.row = 0;
}
return isNeedNewPage;
}
private updateAppItemLayoutInfo(info, item): void {
const pageCount = info.layoutDescription.pageCount;
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
const layoutInfo = info.layoutInfo;
// current page has space
let isNeedNewPage = true;
pageCycle: for (let i = 0; i < pageCount; i++) {
for (let y = 0; y < row; y++) {
for (let x = 0; x < column; x++) {
if (this.isPositionValid(info, item, i, x, y)) {
Log.showInfo(TAG, `updateAppItemLayoutInfo isPositionValid: x:${x} y:${y} page:${i}`);
isNeedNewPage = false;
layoutInfo.push({
bundleName: item.bundleName,
typeId: item.typeId,
abilityName: item.abilityName,
moduleName: item.moduleName,
keyName: item.keyName,
badgeNumber:item.badgeNumber,
area: item.area,
page: i,
column: x,
row: y
});
break pageCycle;
}
}
}
}
if (isNeedNewPage) {
layoutInfo.push({
bundleName: item.bundleName,
typeId: item.typeId,
abilityName: item.abilityName,
moduleName: item.moduleName,
keyName: item.keyName,
badgeNumber:item.badgeNumber,
area: item.area,
page: pageCount,
column: 0,
row: 0
});
++info.layoutDescription.pageCount;
}
}
updateFolderItemLayoutInfo(info, item): boolean {
const pageCount = info.layoutDescription.pageCount;
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
// current page has space
let isNeedNewPage = true;
const max = pageCount - 1 > this.mPageIndex ? this.mPageIndex + 1 : pageCount - 1;
pageCycle: for (let i = this.mPageIndex; i <= max; i++) {
for (let y = 0; y < row; y++) {
for (let x = 0; x < column; x++) {
if (this.isPositionValid(info, item, i, x, y)) {
Log.showInfo(TAG, `updateFolderItemLayoutInfo isPositionValid: x:${x} y:${y} page:${i}`);
isNeedNewPage = false;
item.page = i;
item.column = x;
item.row = y;
break pageCycle;
}
}
}
}
if (isNeedNewPage) {
item.page = this.mPageIndex + 1;
item.column = 0;
item.row = 0;
}
return isNeedNewPage;
}
updateAppItemFromFolder(info, item): boolean {
const pageCount = info.layoutDescription.pageCount;
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
// current page has space
let isNeedNewPage = true;
const max = pageCount - 1 > this.mPageIndex ? this.mPageIndex + 1 : pageCount - 1;
pageCycle: for (let i = this.mPageIndex; i <= max; i++) {
for (let y = 0; y < row; y++) {
for (let x = 0; x < column; x++) {
if (this.isPositionValid(info, item, i, x, y)) {
Log.showInfo(TAG, `updateAppItemFromFolder isPositionValid: x:${x} y:${y} page:${i}`);
isNeedNewPage = false;
item.page = i;
item.column = x;
item.row = y;
break pageCycle;
}
}
}
}
if (isNeedNewPage) {
item.page = this.mPageIndex + 1;
item.column = 0;
item.row = 0;
}
return isNeedNewPage;
}
private isPositionValid(info, item, page, startColumn, startRow) {
const row = info.layoutDescription.row;
const column = info.layoutDescription.column;
if ((startColumn + item.area[0]) > column || (startRow + item.area[1]) > row) {
return false;
}
let isValid = true;
for (let x = startColumn; x < startColumn + item.area[0]; x++) {
for (let y = startRow; y < startRow + item.area[1]; y++) {
if (this.isPositionOccupied(info, page, x, y)) {
isValid = false;
break;
}
}
}
return isValid;
}
private isPositionOccupied(info, page, column, row) {
const pageCount = info.layoutDescription.pageCount;
const layoutInfo = info.layoutInfo;
// current page has space
for (const layout of layoutInfo) {
if (layout.page == page) {
const xMatch = (column >= layout.column) && (column < layout.column + layout.area[0]);
const yMatch = (row >= layout.row) && (row < layout.row + layout.area[1]);
if (xMatch && yMatch) {
return true;
}
}
}
return false;
}
private createNewInfo() {
this.mGridConfig = this.getGridConfig();
const column = this.mGridConfig.column;
@ -926,7 +758,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
/**
* Open Settings.
*/
intoSetting() {
intoSetting(): void {
Log.showInfo(TAG, 'intoSetting');
this.jumpToSetting();
}
@ -949,53 +781,20 @@ export default class PageDesktopViewModel extends BaseViewModel {
return this.isBlankPage() ? '/common/pics/ic_public_delete.svg' : '/common/pics/ic_public_add_black.svg';
}
/**
* Changing the Desktop Page Number.
*
* @param newPageIndex: Page number
*/
changeIndexOnly(newPageIndex: number) {
this.mPageIndex = newPageIndex;
}
/**
* set pageIndex to appStorage.
*/
setPageIndex(): void {
AppStorage.SetOrCreate('pageIndex', this.mPageIndex);
}
isBlankPage(): boolean {
Log.showInfo(TAG, `isBlankPage ${this.mPageIndex}`);
if (CheckEmptyUtils.isEmpty(this.mGridAppsInfos) || CheckEmptyUtils.isEmpty(this.mGridAppsInfos[this.mPageIndex])
|| CheckEmptyUtils.isEmpty(this.mGridAppsInfos[this.mPageIndex].length)) {
const curPageIndex = this.mPageDesktopModel.getPageIndex();
Log.showInfo(TAG, `isBlankPage ${curPageIndex}`);
if (CheckEmptyUtils.isEmpty(this.mGridAppsInfos) || CheckEmptyUtils.isEmpty(this.mGridAppsInfos[curPageIndex])
|| CheckEmptyUtils.isEmpty(this.mGridAppsInfos[curPageIndex].length)) {
return true;
}
Log.showInfo(TAG, `isBlankPage ${this.mGridAppsInfos[this.mPageIndex].length}`);
if (this.mGridAppsInfos[this.mPageIndex].length === 0) {
Log.showInfo(TAG, `isBlankPage ${this.mGridAppsInfos[curPageIndex].length}`);
if (this.mGridAppsInfos[curPageIndex].length === 0) {
return true;
}
return false;
}
/**
* Changing the Desktop Page Number.
*
* @param idx: Page number
*/
changeIndex(idx) {
this.mPageIndex = idx;
Log.showInfo(TAG, 'changeIndex ' + idx);
AppStorage.SetOrCreate('pageIndex', this.mPageIndex);
}
/**
* Get the Desktop Page Number.
*/
getIndex(): number {
return this.mPageIndex;
}
/**
* Add or delete the chosen blank page.
*/
@ -1013,28 +812,12 @@ export default class PageDesktopViewModel extends BaseViewModel {
* @param {boolean} isAddByDrag
*/
addBlankPage(isAddByDrag: boolean): void {
Log.showInfo(TAG, 'addBlankPage' + this.mPageIndex);
this.isAddByDraggingFlag = isAddByDrag;
Log.showInfo(TAG, 'addBlankPage' + this.mPageDesktopModel.getPageIndex());
this.mPageDesktopModel.setAddByDragging(isAddByDrag);
const allPageCount = this.mSettingsModel.getLayoutInfo().layoutDescription.pageCount + 1;
this.setGridPageCount(allPageCount);
this.pagingFiltering();
this.mPageIndex = allPageCount - 1;
AppStorage.SetOrCreate('pageIndex', this.mPageIndex);
}
/**
* get the addByDragging flag
*/
isAddByDragging(): boolean {
return this.isAddByDraggingFlag;
}
/**
* set the addByDragging flag
* @param {boolean} isAddByDragging
*/
setAddByDragging(isAddByDragging: boolean): void {
this.isAddByDraggingFlag = isAddByDragging
this.mPageDesktopModel.setPageIndex(allPageCount - 1);
}
/**
@ -1066,10 +849,10 @@ export default class PageDesktopViewModel extends BaseViewModel {
* Delete the chosen blank page.
*/
private deleteBlankPage(): void {
Log.showInfo(TAG, 'deleteBlankPage ' + this.mPageIndex);
this.deleteGridPage(this.mPageIndex);
this.mPageIndex = this.mPageIndex - 1;
AppStorage.SetOrCreate('pageIndex', this.mPageIndex);
const curPageIndex = this.mPageDesktopModel.getPageIndex();
Log.showInfo(TAG, 'deleteBlankPage ' + curPageIndex);
this.deleteGridPage(curPageIndex);
this.mPageDesktopModel.setPageIndex(curPageIndex - 1);
this.setGridPageCount(this.mSettingsModel.getLayoutInfo().layoutDescription.pageCount - 1);
this.pagingFiltering();
}
@ -1108,7 +891,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
return this.isPad;
}
buildMenuInfoList(appInfo, dialog, formDialog?, folderCallback?) {
buildMenuInfoList(appInfo, dialog, formDialog?, folderCallback?): MenuInfo[] {
let menuInfoList = new Array<MenuInfo>();
const shortcutInfo = this.mAppModel.getShortcutInfo(appInfo.bundleName);
if (shortcutInfo) {
@ -1211,7 +994,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
return menuInfoList;
}
buildCardMenuInfoList(formInfo, dialog, formDialog) {
buildCardMenuInfoList(formInfo, dialog, formDialog): MenuInfo[] {
const menuInfoList = new Array<MenuInfo>();
if (!this.ifStringIsNull(formInfo.formConfigAbility)
&& formInfo.formConfigAbility.startsWith(CommonConstants.FORM_CONFIG_ABILITY_PREFIX, 0)) {
@ -1262,7 +1045,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
return menuInfoList;
}
buildRenameMenuInfoList(folderItemInfo, menuCallback) {
buildRenameMenuInfoList(folderItemInfo, menuCallback): MenuInfo[] {
const menuInfoList = new Array<MenuInfo>();
const renameMenu = new MenuInfo();
renameMenu.menuType = CommonConstants.MENU_TYPE_DYNAMIC;
@ -1297,24 +1080,6 @@ export default class PageDesktopViewModel extends BaseViewModel {
return AppStorage.Get('workSpaceHeight');
}
/**
* Set workSpaceWidth.
*
* @param workSpaceWidth
*/
setWorkSpaceWidth(workSpaceWidth: number): void {
AppStorage.SetOrCreate('workSpaceWidth', workSpaceWidth);
}
/**
* Set workSpaceHeight.
*
* @param workSpaceHeight
*/
setWorkSpaceHeight(workSpaceHeight: string): void {
AppStorage.SetOrCreate('workSpaceHeight', workSpaceHeight);
}
/**
* Get getAppPageStartConfig.
*/
@ -1388,11 +1153,12 @@ export default class PageDesktopViewModel extends BaseViewModel {
column: 0
};
const needNewPage: boolean =this.updateCardItemLayoutInfo(gridLayoutInfo, cardItemLayoutInfo);
const needNewPage: boolean =this.mPageDesktopModel.updatePageDesktopLayoutInfo(gridLayoutInfo, cardItemLayoutInfo);
const curPageIndex = this.mPageDesktopModel.getPageIndex();
if (needNewPage) {
gridLayoutInfo.layoutDescription.pageCount = gridLayoutInfo.layoutDescription.pageCount + 1;
for (let index = 0; index < gridLayoutInfo.layoutInfo.length; index++) {
if (gridLayoutInfo.layoutInfo[index].page > this.getIndex()) {
if (gridLayoutInfo.layoutInfo[index].page > curPageIndex) {
gridLayoutInfo.layoutInfo[index].page++;
}
}
@ -1402,7 +1168,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
gridLayoutInfo.layoutInfo.push(cardItemLayoutInfo);
this.mSettingsModel.setLayoutInfo(gridLayoutInfo);
if (needNewPage) {
this.changeIndex(this.getIndex() + 1);
this.mPageDesktopModel.setPageIndex(curPageIndex + 1);
}
}
this.getGridList();
@ -1434,28 +1200,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
return false;
}
/**
* delete blank page from layoutInfo
*
* @param layoutInfo
* @param page
*/
deleteBlankPageFromLayoutInfo(layoutInfo, page): boolean {
for (let i = 0; i < layoutInfo.layoutInfo.length; i++) {
if (layoutInfo.layoutInfo[i].page == page) {
return false;
}
}
layoutInfo.layoutDescription.pageCount--;
for (let m = 0; m < layoutInfo.layoutInfo.length; m++) {
if (layoutInfo.layoutInfo[m].page > page) {
layoutInfo.layoutInfo[m].page--;
}
}
return true;
}
private addNewInstalledInfo(totalAppInfoList, pageDesktopInfo) {
private addNewInstalledInfo(totalAppInfoList, pageDesktopInfo): void {
for (const i in totalAppInfoList) {
let hasInstalled = false;
for (const j in pageDesktopInfo) {
@ -1491,7 +1236,7 @@ export default class PageDesktopViewModel extends BaseViewModel {
}
}
private removeFolderInfo(pageDesktopInfo) {
private removeFolderInfo(pageDesktopInfo): void {
const gridLayoutInfo = this.mSettingsModel.getLayoutInfo();
const layoutInfo = gridLayoutInfo.layoutInfo;
for (let i = 0; i < layoutInfo.length; i++) {
@ -1513,5 +1258,4 @@ export default class PageDesktopViewModel extends BaseViewModel {
}
}
}
}

1
feature/smartdock/index.ets
View File

@ -14,7 +14,6 @@
*/
export { SmartDock } from './src/main/ets/default/layout/SmartDock'
export { SmartDockContent } from './src/main/ets/default/layout/SmartDockContent'
export { smartDockPreLoader } from './src/main/ets/default/common/SmartDockPreLoader'
export { SmartDockStyleConfig } from './src/main/ets/default/config/SmartDockStyleConfig'
export { SmartDockLayoutConfig } from './src/main/ets/default/config/SmartDockLayoutConfig'

139
feature/smartdock/src/main/ets/default/common/SmartDockDragHandler.ts
View File

@ -13,13 +13,14 @@
* limitations under the License.
*/
import { Log } from '@ohos/common';
import { DragArea } from '@ohos/common';
import { EventConstants } from '@ohos/common';
import { localEventManager } from '@ohos/common';
import { BaseDragHandler } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import { layoutConfigManager } from '@ohos/common';
import SmartDockModel from '../model/SmartDockModel';
import { SmartDockStyleConfig } from '../config/SmartDockStyleConfig';
import SmartDockModel from '../model/SmartDockModel';
import SmartDockConstants from '../common/constants/SmartDockConstants';
const TAG = 'SmartDockDragHandler';
@ -50,19 +51,45 @@ export default class SmartDockDragHandler extends BaseDragHandler {
setDragEffectArea(effectArea): void {
Log.showDebug(TAG, `setDragEffectArea: ${JSON.stringify(effectArea)}`);
AppStorage.SetOrCreate('smartDockDragEffectArea', effectArea);
super.setDragEffectArea(effectArea);
this.updateDockParam(effectArea);
}
private updateDockParam(effectArea) {
isDragEffectArea(x: number, y: number): boolean {
const isInEffectArea = super.isDragEffectArea(x, y);
Log.showDebug(TAG, `isDragEffectArea x: ${x}, y: ${y}, isInEffectArea: ${isInEffectArea}`);
const deviceType = AppStorage.Get('deviceType');
const pageDesktopDragEffectArea: DragArea = AppStorage.Get('pageDesktopDragEffectArea');
Log.showDebug(TAG, `isDragEffectArea pageDesktopDragEffectArea: ${JSON.stringify(pageDesktopDragEffectArea)}`);
if (pageDesktopDragEffectArea) {
if (deviceType == CommonConstants.DEFAULT_DEVICE_TYPE) {
if (isInEffectArea || (y < pageDesktopDragEffectArea.bottom && y > pageDesktopDragEffectArea.top)
&& x < pageDesktopDragEffectArea.right && x > pageDesktopDragEffectArea.left) {
return true;
}
return false;
}
return isInEffectArea;
}
return false;
}
private updateDockParam(effectArea: DragArea): void {
this.mDockCoordinateData = [];
const dockWidth = effectArea.right - effectArea.left;
const dockData: [] = this.getDragRelativeData();
const dataCount = dockData.length;
Log.showDebug(TAG, `updateDockParam dockWidth: ${dockWidth}, dataCount: ${dataCount}`);
const dockPadding: {right: number, left: number, top: number, bottom: number} = AppStorage.Get('dockPadding');
const itemSize = this.mSmartDockStyleConfig.mListItemWidth;
const itemGap = this.mSmartDockStyleConfig.mListItemGap;
if (dataCount > 0) {
for (let index = 1; index <= dataCount; index++) {
this.mDockCoordinateData.push(dockWidth / dataCount * index + effectArea.left);
for (let index = 0; index < dataCount; index++) {
if (index == dataCount - 1) {
this.mDockCoordinateData.push(effectArea.right - dockPadding.left - (itemSize / 2));
return;
}
this.mDockCoordinateData.push(effectArea.left + dockPadding.left + (itemSize / 2) + ((itemSize + itemGap) * index));
}
} else {
this.mDockCoordinateData.push(dockWidth);
@ -75,16 +102,31 @@ export default class SmartDockDragHandler extends BaseDragHandler {
return dockData;
}
protected getItemIndex(event: any): number {
const x = event.touches[0].screenX;
const y = event.touches[0].screenY;
if (x > this.mDragEffectArea.left && x < this.mDragEffectArea.right
&& y > this.mDragEffectArea.top && y < this.mDragEffectArea.bottom) {
protected getItemIndex(x: number, y: number): number {
if (super.isDragEffectArea(x, y)) {
for (let index = 0; index < this.mDockCoordinateData.length; index++) {
if (this.mDockCoordinateData[index] > x) {
return index;
}
}
return this.mDockCoordinateData.length;
}
return CommonConstants.INVALID_VALUE;
}
/**
* Get dragItem location by coordinates.
*
* @param x - x position
* @param y - y position
*/
getDragItemIndexByCoordinates(x: number, y: number): number {
if (super.isDragEffectArea(x, y)) {
for (let index = 0; index < this.mDockCoordinateData.length; index++) {
if (this.mDockCoordinateData[index] + this.mSmartDockStyleConfig.mListItemWidth / 2 >= x) {
return index;
}
}
}
return CommonConstants.INVALID_VALUE;
}
@ -97,72 +139,27 @@ export default class SmartDockDragHandler extends BaseDragHandler {
return null;
}
protected onDragStart(event: any, itemIndex: number): void {
super.onDragStart(event, itemIndex);
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
Log.showDebug(TAG, `onDragStart itemIndex: ${itemIndex}, dragItemInfo: ${this.getDragItemInfo()}`);
AppStorage.SetOrCreate('overlayPositionX', moveAppX);
AppStorage.SetOrCreate('overlayPositionY', moveAppY);
AppStorage.SetOrCreate('overlayData', {
iconSize: this.mSmartDockStyleConfig.mIconSize,
appInfo: this.getDragItemInfo(),
});
AppStorage.SetOrCreate('withBlur', false);
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_APP_ICON);
}
protected onDragMove(event: any, insertIndex: number, itemIndex: number): void {
super.onDragMove(event, insertIndex, itemIndex);
Log.showDebug(TAG, `onDragMove insertIndex: ${insertIndex}`);
const moveAppX = event.touches[0].screenX;
const moveAppY = event.touches[0].screenY;
AppStorage.SetOrCreate('overlayPositionX', moveAppX - (this.mSmartDockStyleConfig.mIconSize / 2));
AppStorage.SetOrCreate('overlayPositionY', moveAppY - (this.mSmartDockStyleConfig.mIconSize / 2));
}
protected onDragDrop(event: any, insertIndex: number, itemIndex: number): boolean {
this.mDevice = AppStorage.Get('device');
super.onDragDrop(event, insertIndex, itemIndex);
Log.showDebug(TAG, `onDragDrop insertIndex: ${insertIndex}, IsInEffectArea: ${this.mIsInEffectArea}`);
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_HIDE);
let isDragSuccess = true;
if (this.mIsInEffectArea) {
if (this.isSelfDrag()) {
this.layoutAdjustment(insertIndex, itemIndex);
isDragSuccess = true;
} else if (this.mDevice == CommonConstants.DEFAULT_DEVICE_TYPE) {
const dragItemInfo = this.getDragItemInfo();
Log.showDebug(TAG, `onDragDrop addItem: ${JSON.stringify(dragItemInfo)}`);
isDragSuccess = this.addItemToSmartDock(dragItemInfo, insertIndex);
}
} else if (this.mDevice == CommonConstants.DEFAULT_DEVICE_TYPE) {
Log.showDebug(TAG, 'onDragDrop remove item');
const dragItemInfo = this.getDragItemInfo();
let deleteDockRes = this.mSmartDockModel.deleteDockItem({
bundleName: undefined,
keyName: dragItemInfo.keyName
}, SmartDockConstants.RESIDENT_DOCK_TYPE);
if (deleteDockRes) {
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_ADD, dragItemInfo);
}
}
return isDragSuccess;
}
protected onDragEnd(isSuccess: boolean): void {
this.mDevice = AppStorage.Get('device');
super.onDragEnd(isSuccess);
if (this.isDropOutSide() && isSuccess) {
Log.showDebug(TAG, 'onDragEnd dropOutSide');
layoutAdjustment(insertIndex: number, itemIndex: number): void {
if (insertIndex != CommonConstants.INVALID_VALUE || itemIndex != CommonConstants.INVALID_VALUE) {
this.mSmartDockModel.insertItemToIndex(insertIndex, itemIndex);
}
}
private layoutAdjustment(insertIndex: number, itemIndex: number): void {
this.mSmartDockModel.inserItemToIndex(insertIndex, itemIndex);
protected onDragDrop(x: number, y: number) {
const dragItemInfo = AppStorage.Get('dragItemInfo');
const insertIndex = this.getItemIndex(x, y);
if (dragItemInfo && AppStorage.Get('dragItemType') === CommonConstants.DRAG_FROM_DOCK) {
const selectAppIndex = AppStorage.Get('selectAppIndex');
globalThis.SmartDockDragHandler.layoutAdjustment(insertIndex, selectAppIndex);
}
if (dragItemInfo && AppStorage.Get('dragItemType') === CommonConstants.DRAG_FROM_DESKTOP
&& AppStorage.Get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE) {
Log.showInfo(TAG, `onDrop insertIndex: ${insertIndex}`);
this.addItemToSmartDock(dragItemInfo, insertIndex);
}
}
private addItemToSmartDock(dragItemInfo: any, insertIndex: number): boolean {
addItemToSmartDock(dragItemInfo: any, insertIndex: number): boolean {
let addToDockRes = this.mSmartDockModel.addToSmartdock(dragItemInfo, insertIndex);
if (addToDockRes) {
localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_PAGEDESK_ITEM_DELETE, {

279
feature/smartdock/src/main/ets/default/layout/RecentLayout.ets Normal file
View File

@ -0,0 +1,279 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AppMenu } from '@ohos/common';
import { AppIcon } from '@ohos/common';
import { DockItemInfo } from '@ohos/common';
import { ScrollerComponent } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import { StyleConstants } from '@ohos/common';
import { ResourceManager } from '@ohos/common';
import { Log } from '@ohos/common';
import { SmartDockStyleConfig } from '../config/SmartDockStyleConfig';
let mSmartDockStyleConfig: SmartDockStyleConfig = null;
const TAG = 'RecentLayout';
@Component
export default struct RecentLayout {
@StorageLink('sysUiRecentOnClickEvent') @Watch('sysUiRecentOnClick') sysUiRecentOnClickEvent: number = 0;
@StorageLink('dockPadding') dockPadding: {right: number, left: number, top: number, bottom: number} = {right: 0, left: 0, top: 0, bottom: 0};
@State isHover: boolean = false;
@State showPopup: boolean = false;
@State onHoverItem: string = '';
@Link @Watch('onDockListChange') appList: Array<DockItemInfo>;
mRecentMaxNum: number;
mSmartDockStyleConfig: SmartDockStyleConfig;
onItemClick: Function = null;
buildMenu: Function = null;
onHoverEvent: Function = null;
onDockListChangeFunc: Function = null;
isScrollHover: boolean = false;
popup: {
show: boolean,
showItem: string,
popup
} = { show: false, showItem: '', popup: null };
onClickWithPopup: boolean = false;
autoCancel: boolean = false;
private updateData: Function = null;
aboutToAppear(): void {
this.mRecentMaxNum = this.mSmartDockStyleConfig.mMaxRecentNum;
mSmartDockStyleConfig = this.mSmartDockStyleConfig;
}
private sysUiRecentOnClick() {
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
}
@Builder popupBuilder() {
Column() {
ScrollerComponent({
popupHide: () => {
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
},
updateData: (show, bundleName, callback) => {
this.updateData = () => {
callback();
setTimeout(() => {
this.onHoverEvent(true, bundleName);
}, 100)
}
if (show) {
this.updateData();
this.getShowPopup();
return;
}
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
}
})
}.onHover((isScrollHover: boolean) => {
this.autoCancel = false;
if (isScrollHover) {
this.isScrollHover = true;
} else {
this.isScrollHover = false;
}
this.getShowPopup();
})
.onClick(() => {
this.getShowPopup();
})
}
async getShowPopup() {
await this.delay(500);
if (this.popup.show || this.isScrollHover) {
this.showPopup = true;
} else {
this.showPopup = false;
}
return this.showPopup;
}
delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
build() {
List({ space: mSmartDockStyleConfig.mListItemGap }) {
ForEach(this.appList, (item) => {
ListItem() {
AppItem({
appInfo: item,
buildMenu: this.buildMenu
})
}
.bindPopup(this.showPopup && item.bundleName == this.onHoverItem && !AppStorage.Get('smartDockShowMenu') as boolean, {
builder: this.popupBuilder,
placement: Placement.Top,
enableArrow: true,
autoCancel: this.autoCancel,
maskColor: ('rgba(250,250,250,0)'),
popupColor: ('rgba(250,250,250,0.6)'),
onStateChange: (e) => {
if (!e.isVisible && this.autoCancel) {
this.popup = { show: false, showItem: '', popup: null };
this.onHoverItem = '';
this.onClickWithPopup = false;
this.autoCancel = false;
this.showPopup = false;
AppStorage.SetOrCreate('snapshotList', []);
AppStorage.SetOrCreate('recentShowPopup', false);
}
if (this.updateData) {
this.updateData();
this.updateData = () => {
}
}
}
})
.onHover((isHover) => {
this.autoCancel = false;
if (this.onHoverEvent) {
this.onHoverEvent(isHover, item.bundleName);
this.onHoverItem = item.bundleName;
this.getShowPopup();
}
})
.onClick((event: ClickEvent) => {
this.onItemClick(event, item);
this.onClickWithPopup = AppStorage.Get('recentShowPopup');
Log.showInfo(TAG, `onClick this.onClickWithPopup: ${this.onClickWithPopup}`);
if (this.onClickWithPopup) {
this.autoCancel = true;
this.showPopup = true
this.onHoverItem = item.bundleName;
}
AppStorage.SetOrCreate('recentShowPopup', false);
})
}, (item) => JSON.stringify(item))
}
.padding(this.dockPadding)
.width(this.getListWidth())
.height(this.mSmartDockStyleConfig.mDockHeight)
.backgroundColor(this.mSmartDockStyleConfig.mBackgroundColor)
.borderRadius(this.mSmartDockStyleConfig.mDockRadius)
.backdropBlur(this.mSmartDockStyleConfig.mBackdropBlur)
.visibility(this.getListWidth() === 0 ? Visibility.None : Visibility.Visible)
.listDirection(this.mSmartDockStyleConfig.mListDirection)
}
getListWidth(): number {
let width = 0;
if (AppStorage.Get("deviceType") == CommonConstants.DEFAULT_DEVICE_TYPE) {
return width;
}
if (typeof this.appList === 'undefined' || this.appList == null || this.appList.length === 0) {
return width;
}
let num = this.appList.length;
if (num > this.mRecentMaxNum) {
num = this.mRecentMaxNum;
}
width = this.mSmartDockStyleConfig.mDockPadding * 2 + num * (this.mSmartDockStyleConfig.mListItemWidth) + (num - 1) * (this.mSmartDockStyleConfig.mListItemGap);
return width;
}
private onDockListChange() {
this.onDockListChangeFunc();
}
}
@Component
struct AppItem {
@State isShow: boolean = false;
appInfo: DockItemInfo = null;
buildMenu: Function = null;
private menuInfo;
aboutToAppear(): void {
this.menuInfo = this.buildMenu(this.appInfo);
}
private getLongPress(): boolean {
return AppStorage.Get('isLongPress');
}
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
AppMenu({
menuInfoList: this.menuInfo,
isContextMenu: false
})
}
.width(StyleConstants.CONTEXT_MENU_WIDTH)
.height(StyleConstants.DEFAULT_40 * this.menuInfo.length + StyleConstants.DEFAULT_8)
}
build() {
Column() {
Row() {
AppIcon({
iconSize: mSmartDockStyleConfig.mIconSize,
iconId: this.appInfo.appIconId,
bundleName: this.appInfo.bundleName,
moduleName: this.appInfo.moduleName,
icon: ResourceManager.getInstance().getCachedAppIcon(this.appInfo.appIconId,
this.appInfo.bundleName, this.appInfo.moduleName),
badgeNumber: this.appInfo.badgeNumber
})
}
.width(mSmartDockStyleConfig.mListItemWidth)
.height(mSmartDockStyleConfig.mListItemHeight)
.backgroundColor(mSmartDockStyleConfig.mItemBackgroundColor)
.borderRadius(mSmartDockStyleConfig.mItemBorderRadius)
}
.gesture(
LongPressGesture({ repeat: false })
.onAction((event: GestureEvent) => {
this.isShow = true;
AppStorage.SetOrCreate('isLongPress', true);
})
)
.bindPopup(this.isShow, {
builder: this.MenuBuilder,
placement: Placement.Top,
popupColor: Color.White,
onStateChange: (e) => {
if (!e.isVisible) {
this.isShow = false;
}
AppStorage.SetOrCreate('smartDockShowMenu', e.isVisible)
},
autoCancel: true
})
.onTouch((event: TouchEvent) => {
if (event.type == CommonConstants.TOUCH_TYPE_UP) {
AppStorage.SetOrCreate('isLongPress', false);
}
if (event.type == CommonConstants.TOUCH_TYPE_MOVE && this.getLongPress()) {
this.isShow = false;
}
})
.onMouse((event: MouseEvent) => {
Log.showInfo(TAG, `onMouse MouseType: ${event.button}`);
if (event.button == MouseButton.Right) {
event.stopPropagation();
AppStorage.SetOrCreate('selectDesktopAppItem', '');
this.isShow = true;
}
})
}
}

335
feature/smartdock/src/main/ets/default/layout/ResidentLayout.ets Normal file
View File

@ -0,0 +1,335 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AppMenu } from '@ohos/common';
import { AppIcon } from '@ohos/common';
import { DockItemInfo } from '@ohos/common';
import { ScrollerComponent } from '@ohos/common';
import { CommonConstants } from '@ohos/common';
import { StyleConstants } from '@ohos/common';
import { ResourceManager } from '@ohos/common';
import { Log } from '@ohos/common';
import { SmartDockStyleConfig } from '../config/SmartDockStyleConfig';
let mSmartDockStyleConfig: SmartDockStyleConfig = null;
const TAG = 'ResidentLayout';
@Component
export default struct ResidentLayout {
@StorageLink('sysUiRecentOnClickEvent') @Watch('sysUiRecentOnClick') sysUiRecentOnClickEvent: number = 0;
@StorageLink('dockPadding') dockPadding: {right: number, left: number, top: number, bottom: number} = {right: 0, left: 0, top: 0, bottom: 0};
@State isHover: boolean = false;
@State showPopup: boolean = false;
@State onHoverItem: string = '';
@Link @Watch('onDockListChange') appList: Array<DockItemInfo>;
mResidentMaxNum: number;
mSmartDockStyleConfig: SmartDockStyleConfig;
onItemClick: Function = null;
buildMenu: Function = null;
onHoverEvent: Function = null;
onDockListChangeFunc: Function = null;
isScrollHover: boolean = false;
popup: {
show: boolean,
showItem: string,
popup
} = { show: false, showItem: '', popup: null };
onClickWithPopup: boolean = false;
autoCancel: boolean = false;
private updateData: Function = null;
aboutToAppear(): void {
this.mResidentMaxNum = this.mSmartDockStyleConfig.mMaxDockNum;
mSmartDockStyleConfig = this.mSmartDockStyleConfig;
}
private sysUiRecentOnClick() {
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
}
@Builder popupBuilder() {
Column() {
ScrollerComponent({
popupHide: () => {
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
},
updateData: (show, bundleName, callback) => {
this.updateData = () => {
callback();
setTimeout(() => {
this.onHoverEvent(true, bundleName);
}, 100)
}
if (show) {
this.updateData();
this.getShowPopup();
return;
}
this.showPopup = false;
this.popup = { show: false, showItem: '', popup: null };
}
})
}.onHover((isScrollHover: boolean) => {
this.autoCancel = false;
if (isScrollHover) {
this.isScrollHover = true;
} else {
this.isScrollHover = false;
}
this.getShowPopup();
})
.onClick(() => {
this.getShowPopup();
})
}
async getShowPopup() {
await this.delay(500);
if (this.popup.show || this.isScrollHover) {
this.showPopup = true;
} else {
this.showPopup = false;
}
return this.showPopup;
}
delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
build() {
List({ space: this.appList.length == 0 ? 0 : this.mSmartDockStyleConfig.mListItemGap }) {
ForEach(this.appList, (item) => {
ListItem() {
AppItem({
appInfo: item,
buildMenu: this.buildMenu
})
}
.bindPopup(this.showPopup && item.bundleName == this.onHoverItem && !AppStorage.Get('smartDockShowMenu') as boolean, {
builder: this.popupBuilder,
placement: Placement.Top,
enableArrow: true,
autoCancel: this.autoCancel,
maskColor: ('rgba(250,250,250,0)'),
popupColor: ('rgba(250,250,250,0.6)'),
onStateChange: (e) => {
if (!e.isVisible && this.autoCancel) {
this.popup = { show: false, showItem: '', popup: null };
this.onHoverItem = '';
this.onClickWithPopup = false;
this.autoCancel = false;
this.showPopup = false;
AppStorage.SetOrCreate('snapshotList', []);
AppStorage.SetOrCreate('recentShowPopup', false);
}
if (this.updateData) {
this.updateData();
this.updateData = () => {
}
}
}
})
.onHover((isHover) => {
this.autoCancel = false;
if (this.onHoverEvent) {
this.onHoverEvent(isHover, item.bundleName);
this.onHoverItem = item.bundleName;
this.getShowPopup();
}
})
.onClick((event: ClickEvent) => {
this.onItemClick(event, item);
this.onClickWithPopup = AppStorage.Get('recentShowPopup');
Log.showInfo(TAG, `onClick this.onClickWithPopup: ${this.onClickWithPopup}`);
if (this.onClickWithPopup) {
this.autoCancel = true;
this.showPopup = true
this.onHoverItem = item.bundleName;
}
AppStorage.SetOrCreate('recentShowPopup', false);
})
}, (item) => JSON.stringify(item))
}
.padding(this.dockPadding)
.width(this.getListWidth())
.height(this.mSmartDockStyleConfig.mDockHeight)
.backgroundColor(this.mSmartDockStyleConfig.mBackgroundColor)
.borderRadius(this.mSmartDockStyleConfig.mDockRadius)
.backdropBlur(this.mSmartDockStyleConfig.mBackdropBlur)
.visibility(this.getListWidth() === 0 ? Visibility.None : Visibility.Visible)
.listDirection(this.mSmartDockStyleConfig.mListDirection)
.editMode(true)
.onDragEnter((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDragEnter extraParams: ${extraParams}, event: [${event.getX()}, ${event.getY()}]`);
})
.onDragMove((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDragMove event: [${event.getX()}, ${event.getY()}]`);
})
.onDragLeave((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDragLeave event: [${event.getX()}, ${event.getY()}]`);
})
.onDrop((event: DragEvent, extraParams: string) => {
Log.showInfo(TAG, `onDrop event: [${event.getX()}, ${event.getY()}]`);
globalThis.SmartDockDragHandler.onDragDrop(event.getX(), event.getY());
AppStorage.SetOrCreate('dragItemInfo', {});
AppStorage.SetOrCreate('selectAppIndex', null);
AppStorage.SetOrCreate('isDrag', false);
})
}
getListWidth(): number {
let width = 0;
if (AppStorage.Get("deviceType") == CommonConstants.DEFAULT_DEVICE_TYPE) {
Log.showInfo(TAG, `getListWidth mDockPadding: ${this.mSmartDockStyleConfig.mDockPadding}, mMaxNum: ${this.mResidentMaxNum}`);
width = this.mSmartDockStyleConfig.mDockPadding * 2 + this.mResidentMaxNum * (this.mSmartDockStyleConfig.mListItemWidth) + (this.mResidentMaxNum - 1) * (this.mSmartDockStyleConfig.mListItemGap);
Log.showInfo(TAG, `getListWidth width 1: ${width}`);
return width;
}
if (typeof this.appList === 'undefined' || this.appList == null || this.appList.length === 0) {
return width;
} else {
let num = this.appList.length;
if (num > this.mResidentMaxNum) {
num = this.mResidentMaxNum;
}
width = this.mSmartDockStyleConfig.mDockPadding * 2 + num * (this.mSmartDockStyleConfig.mListItemWidth) + (num - 1) * (this.mSmartDockStyleConfig.mListItemGap);
}
return width;
}
private onDockListChange() {
this.onDockListChangeFunc();
}
}
@Component
struct AppItem {
@StorageLink('dragItemInfo') smartDragItemInfo: any = {};
@StorageLink('dragItemType') dragItemType: number = CommonConstants.DRAG_FROM_DOCK;
@State isShow: boolean = false;
appInfo: DockItemInfo = null;
buildMenu: Function = null;
private menuInfo;
@Builder dragLayerBuilder() {
Column() {
AppIcon({
iconSize: mSmartDockStyleConfig.mIconSize * 1.05,
iconId: this.appInfo.appIconId,
bundleName: this.appInfo.bundleName,
moduleName: this.appInfo.moduleName,
icon: ResourceManager.getInstance().getCachedAppIcon(this.appInfo.appIconId,
this.appInfo.bundleName, this.appInfo.moduleName),
badgeNumber: CommonConstants.BADGE_DISPLAY_HIDE
})
}
}
aboutToAppear(): void {
this.menuInfo = this.buildMenu(this.appInfo);
}
private getLongPress(): boolean {
return AppStorage.Get('isLongPress');
}
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
AppMenu({
menuInfoList: this.menuInfo,
isContextMenu: false
})
}
.width(StyleConstants.CONTEXT_MENU_WIDTH)
.height(StyleConstants.DEFAULT_40 * this.menuInfo.length + StyleConstants.DEFAULT_8)
}
build() {
Column() {
Row() {
AppIcon({
iconSize: mSmartDockStyleConfig.mIconSize,
iconId: this.appInfo.appIconId,
bundleName: this.appInfo.bundleName,
moduleName: this.appInfo.moduleName,
icon: ResourceManager.getInstance().getCachedAppIcon(this.appInfo.appIconId,
this.appInfo.bundleName, this.appInfo.moduleName),
badgeNumber: this.appInfo.badgeNumber
})
}
.width(mSmartDockStyleConfig.mListItemWidth)
.height(mSmartDockStyleConfig.mListItemHeight)
.backgroundColor(mSmartDockStyleConfig.mItemBackgroundColor)
.borderRadius(mSmartDockStyleConfig.mItemBorderRadius)
}
.parallelGesture(
LongPressGesture({ repeat: false })
.onAction((event: GestureEvent) => {
Log.showInfo(TAG, 'onAction start');
this.isShow = true;
AppStorage.SetOrCreate('isLongPress', true);
})
)
.bindPopup(this.isShow, {
builder: this.MenuBuilder,
placement: Placement.Top,
popupColor: Color.White,
onStateChange: (e) => {
if (!e.isVisible) {
this.isShow = false;
}
AppStorage.SetOrCreate('smartDockShowMenu', e.isVisible)
},
autoCancel: true
})
.onTouch((event: TouchEvent) => {
Log.showInfo(TAG, `onTouch event type: ${event.type}`);
if (event.type === CommonConstants.TOUCH_TYPE_UP && AppStorage.Get('isDrag')) {
let mIsDragEffectArea = globalThis.SmartDockDragHandler.isDragEffectArea(event.touches[0].screenX, event.touches[0].screenY);
if (!mIsDragEffectArea) {
AppStorage.SetOrCreate('dragItemInfo', {});
AppStorage.SetOrCreate('selectAppIndex', null);
AppStorage.SetOrCreate('isDrag', false);
}
AppStorage.SetOrCreate('isLongPress', false);
}
if (event.type === CommonConstants.TOUCH_TYPE_MOVE && this.getLongPress()) {
this.isShow = false;
}
})
.onMouse((event: MouseEvent) => {
Log.showInfo(TAG, `onMouse MouseType: ${event.button}`);
if (event.button == MouseButton.Right) {
event.stopPropagation();
AppStorage.SetOrCreate('selectDesktopAppItem', '');
this.isShow = true;
}
})
.visibility(this.dragItemType === CommonConstants.DRAG_FROM_DOCK && this.smartDragItemInfo.keyName === this.appInfo.keyName ?
Visibility.Hidden : Visibility.Visible)
.onDragStart((event: DragEvent, extraParams: string) => {
AppStorage.SetOrCreate('isDrag', true);
this.dragItemType = CommonConstants.DRAG_FROM_DOCK;
this.smartDragItemInfo = this.appInfo;
Log.showInfo(TAG, `smartDragItemInfo: ${JSON.stringify(this.smartDragItemInfo)}`);
const selectAppIndex = globalThis.SmartDockDragHandler.getDragItemIndexByCoordinates(event.getX(), event.getY());
AppStorage.SetOrCreate('selectAppIndex', selectAppIndex);
return this.dragLayerBuilder;
})
}
}

31
feature/smartdock/src/main/ets/default/layout/SmartDock.ets
View File

@ -19,15 +19,15 @@ import { CommonConstants } from '@ohos/common';
import { windowManager } from '@ohos/common';
import { ResourceManager } from '@ohos/common';
import { UninstallDialog } from '@ohos/common';
import { SmartDockContent } from '../layout/SmartDockContent';
import SmartDockViewModel from '../viewmodel/SmartDockViewModel';
import SmartDockConstants from '../common/constants/SmartDockConstants';
import ResidentLayout from './ResidentLayout.ets';
import RecentLayout from './RecentLayout.ets';
const TAG = 'SmartDock';
@Component
export struct SmartDock {
@State device: string = 'phone';
@State popup: {
show: boolean,
showItem: string,
@ -41,6 +41,7 @@ export struct SmartDock {
@StorageLink('residentList') residentList: any = [];
@StorageLink('recentList') recentList: any = [];
@StorageLink('missionInfoList') missionInfoList: any = [];
private deviceType: string = CommonConstants.DEFAULT_DEVICE_TYPE;
private mSmartDockViewModel: SmartDockViewModel;
private mSelectedItem = null;
private mSelectedDockType = 0;
@ -48,15 +49,13 @@ export struct SmartDock {
aboutToAppear(): void {
Log.showInfo(TAG, 'aboutToAppear start!');
AppStorage.SetOrCreate('device', this.device);
this.deviceType = AppStorage.Get('deviceType');
try {
this.mSmartDockViewModel = SmartDockViewModel.getInstance();
} catch (error) {
Log.showError(TAG, `catch error ${JSON.stringify(error)}`);
}
Log.showInfo(TAG, 'aboutToAppear end!');
ResourceManager.getInstance().getStringByResource(this.device === CommonConstants.PAD_DEVICE_TYPE
ResourceManager.getInstance().getStringByResource(this.deviceType === CommonConstants.PAD_DEVICE_TYPE
? $r('app.string.is_delete_form') : $r('app.string.isUninstall')).then((resName) => {
this.dialogName = resName;
});
@ -88,7 +87,7 @@ export struct SmartDock {
Log.showDebug(TAG, 'onConfirm click menu item null!');
return;
}
if (this.device === CommonConstants.PAD_DEVICE_TYPE) {
if (this.deviceType === CommonConstants.PAD_DEVICE_TYPE) {
this.mSmartDockViewModel.deleteDockItem({
bundleName: undefined,
keyName: this.mSelectedItem.keyName
@ -137,36 +136,28 @@ export struct SmartDock {
build() {
List({
space: this.device == CommonConstants.DEFAULT_DEVICE_TYPE ? CommonConstants.DOCK_SPACE :
space: this.deviceType == CommonConstants.DEFAULT_DEVICE_TYPE || this.recentList.length == 0 ? CommonConstants.DOCK_SPACE :
this.mSmartDockViewModel.getStyleConfig().mDockGap
}) {
if (this.buildLog()) {
}
ListItem() {
SmartDockContent({
dockItemList: $residentList,
mMaxNum: this.mSmartDockViewModel.getStyleConfig().mMaxDockNum,
ResidentLayout({
appList: $residentList,
mSmartDockStyleConfig: this.mSmartDockViewModel.getStyleConfig(),
onItemClick: (event, item) => this.mSmartDockViewModel.residentOnClick(event, item, this.showAppCenter),
buildMenu: ((item) => this.mSmartDockViewModel.buildMenuInfoList(item, SmartDockConstants.RESIDENT_DOCK_TYPE, this.showAppCenter, this.showDialog.bind(this))).bind(this.mSmartDockViewModel),
onItemTouch: (event) => this.mSmartDockViewModel.residentOnTouch(event),
onDockListChangeFunc: () => this.mSmartDockViewModel.onDockListChange(),
onTouchEventUpdateFunc: () => this.mSmartDockViewModel.onTouchEventUpdate()
})
}
ListItem() {
SmartDockContent({
dockItemList: $recentList,
mMaxNum: this.mSmartDockViewModel.getStyleConfig().mMaxRecentNum,
RecentLayout({
appList: $recentList,
mSmartDockStyleConfig: this.mSmartDockViewModel.getStyleConfig(),
onItemClick: (event, item) => this.mSmartDockViewModel.recentOnClick(event, item, () => this.recentOnClickWithPopup(item)),
buildMenu: ((item) => this.mSmartDockViewModel.buildMenuInfoList(item, SmartDockConstants.RECENT_DOCK_TYPE, this.showAppCenter, this.showDialog.bind(this))).bind(this.mSmartDockViewModel),
onItemTouch: (event) => {
},
onDockListChangeFunc: () => this.mSmartDockViewModel.onDockListChange(),
onTouchEventUpdateFunc: () => {
},
popup: this.popup,
onHoverEvent: (onHover, bundleName) => this.onHoverEvent(onHover, bundleName)
})

93
feature/smartdock/src/main/ets/default/layout/SmartDockContent.ets
View File

@ -1,93 +0,0 @@
/**
* Copyright (c) 2021-2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AppList } from '@ohos/common';
import { DockItemInfo } from '@ohos/common';
import { SmartDockStyleConfig } from '../config/SmartDockStyleConfig';
import SmartDockConstants from '../common/constants/SmartDockConstants';
@Component
export struct SmartDockContent {
@Link @Watch('onDockListChange') dockItemList: Array<DockItemInfo>;
@StorageLink('dragLocation') @Watch('onTouchEventUpdate') dragLocation: string = "";
mSmartDockStyleConfig: SmartDockStyleConfig;
mMaxNum: number;
onItemClick: Function;
onItemTouch: Function;
onDockListChangeFunc: Function;
onTouchEventUpdateFunc: Function;
buildMenu: Function;
popup: {
show: boolean,
showItem: string,
popup
};
onHoverEvent: Function;
aboutToAppear(): void {
}
aboutToDisappear(): void {
}
build() {
Row() {
AppList({
appList: $dockItemList,
appListStyleConfig: this.mSmartDockStyleConfig,
onItemClick: this.onItemClick,
buildMenu: this.buildMenu,
popup: this.popup,
onHoverEvent: (onHover, bundleName) => {
this.onHoverEvent(onHover, bundleName)
}
})
}
.onTouch((event: TouchEvent) => {
AppStorage.SetOrCreate('dragFocus', SmartDockConstants.FEATURE_NAME);
this.onItemTouch(event);
})
.width(this.getListWidth(this.dockItemList))
.height(this.mSmartDockStyleConfig.mDockHeight)
.backgroundColor(this.mSmartDockStyleConfig.mBackgroundColor)
.borderRadius(this.mSmartDockStyleConfig.mDockRadius)
.backdropBlur(this.mSmartDockStyleConfig.mBackdropBlur)
.visibility(this.getListWidth(this.dockItemList) === 0 ? Visibility.None : Visibility.Visible)
}
public getListWidth(itemList): number {
let width = 0;
if (typeof itemList === 'undefined' || itemList == null || itemList.length === 0) {
return width;
} else {
let num = itemList.length;
if (num > this.mMaxNum) {
num = this.mMaxNum
}
width = this.mSmartDockStyleConfig.mDockPadding * 2 + num * (this.mSmartDockStyleConfig.mListItemWidth) + (num - 1) * (this.mSmartDockStyleConfig.mListItemGap);
}
return width;
}
private onDockListChange() {
this.onDockListChangeFunc();
}
private onTouchEventUpdate() {
if (AppStorage.Get('device') === 'phone' || AppStorage.Get('dragFocus') == SmartDockConstants.FEATURE_NAME){
this.onTouchEventUpdateFunc();
}
}
}

19
feature/smartdock/src/main/ets/default/model/SmartDockModel.ts
View File

@ -56,7 +56,7 @@ export default class SmartDockModel {
this.mAppModel = AppModel.getInstance();
this.mResourceManager = ResourceManager.getInstance();
this.registerDockListener();
this.mDevice = AppStorage.Get('device');
this.mDevice = AppStorage.Get('deviceType');
Log.showDebug(TAG, `dockDevice: ${this.mDevice}`);
this.getResidentList().then(() => {}, () => {});
if (this.mDevice === CommonConstants.PAD_DEVICE_TYPE) {
@ -293,7 +293,8 @@ export default class SmartDockModel {
* @param insertIndex
* @param itemIndex
*/
inserItemToIndex(insertIndex: number, itemIndex: number): void {
insertItemToIndex(insertIndex: number, itemIndex: number): void {
Log.showInfo(TAG, `insertItemToIndex insertIndex: ${insertIndex}, itemIndex: ${itemIndex}`);
if ((insertIndex == 0 || insertIndex == 1 || itemIndex == 0 || itemIndex == 1) && this.mDevice === CommonConstants.PAD_DEVICE_TYPE) {
Prompt.showToast({
message: $r('app.string.disable_to_move')
@ -301,22 +302,16 @@ export default class SmartDockModel {
return;
}
this.mResidentList = AppStorage.Get('residentList');
if (itemIndex < insertIndex) {
const selectItem = this.mResidentList[itemIndex];
for (let i = itemIndex; i < insertIndex; i++) {
this.mResidentList[i] = this.mResidentList[i+1];
}
this.mResidentList[insertIndex] = selectItem;
this.mResidentList.splice(insertIndex, 0, selectItem);
this.mResidentList.splice(itemIndex, 1);
}
if (itemIndex > insertIndex) {
const selectItem = this.mResidentList[itemIndex];
for (let i = itemIndex; i > insertIndex; i--) {
this.mResidentList[i] = this.mResidentList[i-1];
}
this.mResidentList[insertIndex] = selectItem;
this.mResidentList.splice(itemIndex, 1);
this.mResidentList.splice(insertIndex, 0, selectItem);
}
AppStorage.SetOrCreate('residentList', this.mResidentList);
globalThis.RdbStoreManagerInstance.insertIntoSmartdock(this.mResidentList);
}

53
feature/smartdock/src/main/ets/default/viewmodel/SmartDockViewModel.ts
View File

@ -117,15 +117,6 @@ export default class SmartDockViewModel extends BaseViewModel {
}
}
/**
* resident dock item onTouch function
* @param event
*/
residentOnTouch(event) {
Log.showDebug(TAG, 'residentOnTouch event:' + event.type);
this.mSmartDockDragHandler.notifyTouchEventUpdate(event);
}
/**
* what SmartDockContent.dockItemList onChange
*/
@ -141,24 +132,39 @@ export default class SmartDockViewModel extends BaseViewModel {
const screenHeight: number = AppStorage.Get('screenHeight');
const sysUIBottomHeight: number = AppStorage.Get('sysUIBottomHeight');
const dockHeight: number = AppStorage.Get('dockHeight');
const mResidentWidth: number = this.getListWidth(AppStorage.Get('residentList'));
let mResidentWidth: number = this.getListWidth(AppStorage.Get('residentList'));
if (AppStorage.Get("deviceType") === CommonConstants.DEFAULT_DEVICE_TYPE) {
const maxDockNum = this.getStyleConfig().mMaxDockNum;
mResidentWidth = this.mSmartDockStyleConfig.mDockPadding * 2 + maxDockNum * (this.mSmartDockStyleConfig.mListItemWidth) + (maxDockNum - 1) * (this.mSmartDockStyleConfig.mListItemGap);
}
AppStorage.SetOrCreate('residentWidth', mResidentWidth);
AppStorage.SetOrCreate("dockPadding", this.getDockPadding(mResidentWidth));
const mRecentWidth: number = this.getListWidth(AppStorage.Get('recentList'));
Log.showInfo(TAG, `updateDockParams screenWidth:${screenWidth}, screenHeight:${screenHeight}, sysUIBottomHeight:${sysUIBottomHeight}, dockHeight:${dockHeight}, mResidentWidth:${mResidentWidth}, mRecentWidth:${mRecentWidth}`);
if (typeof (this.mSmartDockDragHandler) != 'undefined') {
let left = mResidentWidth === 0 ? 0 : (screenWidth - mResidentWidth - (mRecentWidth === 0 ? 0 : (this.mSmartDockStyleConfig.mDockGap + mRecentWidth))) / 2;
let right = mResidentWidth === 0 ? screenWidth : (screenWidth - mResidentWidth - (mRecentWidth === 0 ? 0 : (this.mSmartDockStyleConfig.mDockGap + mRecentWidth))) / 2 + mResidentWidth;
if (AppStorage.Get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE) {
left = (screenWidth - mResidentWidth) / 2;
right = screenWidth - left;
}
this.mSmartDockDragHandler.setDragEffectArea({
left: mResidentWidth === 0 ? 0 : (screenWidth - mResidentWidth - (mRecentWidth === 0 ? 0 : (this.mSmartDockStyleConfig.mDockGap + mRecentWidth))) / 2,
right: mResidentWidth === 0 ? screenWidth : (screenWidth - mResidentWidth - (mRecentWidth === 0 ? 0 : (this.mSmartDockStyleConfig.mDockGap + mRecentWidth))) / 2 + mResidentWidth,
left: left,
right: right,
top: screenHeight - sysUIBottomHeight - dockHeight,
bottom: screenHeight - sysUIBottomHeight
bottom: screenHeight - sysUIBottomHeight - this.mSmartDockStyleConfig.mMarginBottom
});
}
}
/**
* what SmartDockContent.dragLocation onChange
*/
onTouchEventUpdate() {
this.mSmartDockDragHandler.onTouchEventUpdate(AppStorage.Get('dragEvent'));
private getDockPadding(residentWidth: number): {right: number, left: number, top: number, bottom: number} {
let paddingNum: number = this.mSmartDockStyleConfig.mDockPadding;
const residentList: [] = AppStorage.Get('residentList');
if (AppStorage.Get("deviceType") === CommonConstants.DEFAULT_DEVICE_TYPE) {
paddingNum = (residentWidth - (residentList.length * this.mSmartDockStyleConfig.mListItemWidth + (residentList.length - 1) * (this.mSmartDockStyleConfig.mListItemGap))) / 2;
}
Log.showInfo(TAG, `getDockPadding paddingNum: ${paddingNum}`);
return {right: paddingNum, left: paddingNum, top: this.mSmartDockStyleConfig.mDockPadding, bottom: this.mSmartDockStyleConfig.mDockPadding};
}
/**
@ -199,7 +205,7 @@ export default class SmartDockViewModel extends BaseViewModel {
menuInfoList.push(open);
if (appInfo.itemType != CommonConstants.TYPE_FUNCTION) {
this.mDevice = AppStorage.Get('device');
this.mDevice = AppStorage.Get('deviceType');
if (this.mDevice === CommonConstants.PAD_DEVICE_TYPE && dockType === SmartDockConstants.RESIDENT_DOCK_TYPE) {
const addToWorkSpaceMenu = new MenuInfo();
addToWorkSpaceMenu.menuType = CommonConstants.MENU_TYPE_FIXED;
@ -254,14 +260,13 @@ export default class SmartDockViewModel extends BaseViewModel {
* calcaulate dock list width after list change
* @param itemList
*/
private getListWidth(itemList): number {
private getListWidth(itemList: []): number {
let width = 0;
if (typeof itemList === 'undefined' || itemList == null || itemList.length === 0) {
return width;
} else {
const num = itemList.length;
width = this.mSmartDockStyleConfig.mDockPadding * 2 + num * (this.mSmartDockStyleConfig.mListItemWidth) + (num - 1) * (this.mSmartDockStyleConfig.mListItemGap);
}
const num = itemList.length;
width = this.mSmartDockStyleConfig.mDockPadding * 2 + num * (this.mSmartDockStyleConfig.mListItemWidth) + (num - 1) * (this.mSmartDockStyleConfig.mListItemGap);
return width;
}

7
product/pad/src/main/ets/pages/AppCenterView.ets
View File

@ -58,11 +58,8 @@ struct AppCenterView {
}
private async updateScreenSize() {
let screenWidth = await windowManager.getWindowWidth();
let screenHeight = await windowManager.getWindowHeight();
this.workSpaceHeight = this.mLayoutViewModel.getWorkSpaceHeight();
this.dockHeight = this.mLayoutViewModel.getDockHeight();
Log.showInfo(TAG, `updateScreenSize product: ${this.device}, screenWidth: ${screenWidth}, screenHeight: ${screenHeight}`);
}
onBackPress(): boolean {
@ -93,9 +90,7 @@ struct AppCenterView {
.height(this.workSpaceHeight)
Column() {
SmartDock({
device: this.device,
})
SmartDock();
}
.height(this.dockHeight)
}

15
product/pad/src/main/ets/pages/EntryView.ets
View File

@ -20,7 +20,6 @@ import { CommonConstants } from '@ohos/common';
import { EventConstants } from '@ohos/common';
import { windowManager } from '@ohos/common';
import { localEventManager } from '@ohos/common';
import { CustomOverlay } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { LayoutViewModel } from '@ohos/common';
import { SmartDock } from '@ohos/smartdock';
@ -38,17 +37,16 @@ const TAG = 'EntryView';
struct EntryView {
@StorageLink('screenWidth') screenWidth: number = 0;
@StorageLink('screenHeight') @Watch('updateScreenInfo') screenHeight: number = 0;
@StorageLink('deviceType') deviceType: string = CommonConstants.PAD_DEVICE_TYPE;
@State workSpaceWidth: number = 0;
@State workSpaceHeight: number = 0;
@State dockHeight: number = 0;
@State device: string = CommonConstants.PAD_DEVICE_TYPE;
private mStage: PadStage = new PadStage();
private mLayoutViewModel: LayoutViewModel;
private navigationBarStatus: string | undefined;
aboutToAppear(): void {
Log.showInfo(TAG, 'aboutToAppear');
AppStorage.SetOrCreate('device', this.device);
this.mStage.onCreate();
// init layout config
@ -117,7 +115,7 @@ struct EntryView {
AppStorage.SetOrCreate('workSpaceWidth', this.workSpaceWidth);
AppStorage.SetOrCreate('workSpaceHeight', this.workSpaceHeight);
AppStorage.SetOrCreate('dockHeight', this.dockHeight);
Log.showInfo(TAG, `updateScreenSize product: ${this.device}, screenWidth: ${this.screenWidth}, screenHeight: ${this.screenHeight}, workSpaceWidth: ${this.workSpaceWidth}, workSpaceHeight: ${this.workSpaceHeight}, dockHeight: ${this.dockHeight}`);
Log.showInfo(TAG, `updateScreenSize product: ${this.deviceType}, screenWidth: ${this.screenWidth}, screenHeight: ${this.screenHeight}, workSpaceWidth: ${this.workSpaceWidth}, workSpaceHeight: ${this.workSpaceHeight}, dockHeight: ${this.dockHeight}`);
}
aboutToDisappear(): void {
@ -131,7 +129,6 @@ struct EntryView {
AppStorage.SetOrCreate('overlayMode', CommonConstants.OVERLAY_TYPE_HIDE);
AppStorage.SetOrCreate('openFolderStatus', BigFolderConstants.OPEN_FOLDER_STATUS_CLOSE);
AppStorage.SetOrCreate('selectDesktopAppItem', '');
PageDesktopDragHandler.getInstance().reset();
this.closeRecentDockPopup();
return true;
}
@ -153,16 +150,13 @@ struct EntryView {
Column() {
Column() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
PageDesktopLayout({
device: this.device,
});
PageDesktopLayout();
}
}
.height(this.workSpaceHeight)
Column() {
SmartDock({
device: this.device,
showAppCenter: () => {
Trace.start(Trace.CORE_METHOD_START_APP_CENTER);
globalThis.createWindowWithName(windowManager.APP_CENTER_WINDOW_NAME, windowManager.DESKTOP_RANK);
@ -182,8 +176,7 @@ struct EntryView {
.width('100%')
.height('100%')
FolderOpenComponent()
CustomOverlay()
FolderOpenComponent();
}
.backgroundImage('/common/pics/img_wallpaper_default.jpg')
.backgroundImageSize(ImageSize.Cover)

15
product/phone/src/main/ets/pages/EntryView.ets
View File

@ -18,7 +18,6 @@ import { CommonConstants } from '@ohos/common';
import { EventConstants } from '@ohos/common';
import { windowManager } from '@ohos/common';
import { localEventManager } from '@ohos/common';
import { CustomOverlay } from '@ohos/common';
import { SettingsModel } from '@ohos/common';
import { LayoutViewModel } from '@ohos/common';
import { SmartDock } from '@ohos/smartdock';
@ -35,10 +34,10 @@ const TAG = "EntryView";
struct EntryView {
@StorageLink('screenWidth') screenWidth: number = 0;
@StorageLink('screenHeight') @Watch('updateScreenInfo') screenHeight: number = 0;
@StorageLink('deviceType') deviceType: string = CommonConstants.DEFAULT_DEVICE_TYPE;
@State workSpaceWidth: number = 0;
@State workSpaceHeight: number = 0;
@State dockHeight: number = 0;
@State device: string = 'phone';
private mStage: PhoneStage = new PhoneStage();
private mLayoutViewModel: LayoutViewModel;
private navigationBarStatus: string | undefined;
@ -53,7 +52,6 @@ struct EntryView {
aboutToAppear(): void {
Log.showInfo(TAG, 'aboutToAppear');
AppStorage.SetOrCreate('device', this.device);
this.mStage.onCreate();
// init layout config
@ -123,20 +121,18 @@ struct EntryView {
AppStorage.SetOrCreate('workSpaceWidth', this.workSpaceWidth);
AppStorage.SetOrCreate('workSpaceHeight', this.workSpaceHeight);
AppStorage.SetOrCreate('dockHeight', this.dockHeight);
Log.showDebug(TAG, `updateScreenSize product: ${this.device}, screenWidth: ${this.screenWidth}, screenHeight: ${this.screenHeight}, workSpaceWidth: ${this.workSpaceWidth}, workSpaceHeight: ${this.workSpaceHeight}, dockHeight: ${this.dockHeight}`);
Log.showDebug(TAG, `updateScreenSize product: ${this.deviceType}, screenWidth: ${this.screenWidth}, screenHeight: ${this.screenHeight}, workSpaceWidth: ${this.workSpaceWidth}, workSpaceHeight: ${this.workSpaceHeight}, dockHeight: ${this.dockHeight}`);
}
build() {
Stack() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
Column() {
PageDesktopLayout({
device: this.device
});
PageDesktopLayout();
}
.height(this.workSpaceHeight)
Column() {
SmartDock()
SmartDock();
}
.onAreaChange((event) => {
Log.showDebug(TAG, `onAreaChange navigationBarStatus: ${this.navigationBarStatus}`);
@ -148,8 +144,7 @@ struct EntryView {
})
.height(this.dockHeight)
}
FolderOpenComponent()
CustomOverlay()
FolderOpenComponent();
}
.backgroundImage(StyleConstants.DEFAULT_BACKGROUND_IMAGE)
.backgroundImageSize(ImageSize.Cover)