diff --git a/package.json b/package.json index c124fd2..6d4cf47 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "MegSpot", - "version": "v2.2.5", + "version": "v2.2.6", "author": "weiyajun ", "description": "A tool to improve the viewing of pictures and videos by researchers", "homepage": "https://github.com/MegEngine/MegSpot", @@ -44,8 +44,8 @@ "appId": "org.megvii.megspot", "copyright": " Copyright (c) 2022 Megvii Inc. All rights reserved.", "releaseInfo": { - "releaseNotes": "新增功能：\n 1. 视频对比中支持并默认启用视频进度同步功能，可在工具栏最右侧的图像设置中进行更改，详情请见github wiki说明", - "releaseDate": "2023.12.17" + "releaseNotes": "新增功能：\n 1. 支持新建任意行数、列数的布局配置", + "releaseDate": "2024.02.07" }, "directories": { "output": "build" @@ -229,6 +229,7 @@ } }, "volta": { - "node": "16.20.2" + "node": "16.20.2", + "yarn": "1.22.21" } } diff --git a/src/renderer/components/new-layout-dialog/index.vue b/src/renderer/components/new-layout-dialog/index.vue new file mode 100644 index 0000000..18f3392 --- /dev/null +++ b/src/renderer/components/new-layout-dialog/index.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/src/renderer/constants.js b/src/renderer/constants.js index c956285..93d4fa7 100644 --- a/src/renderer/constants.js +++ b/src/renderer/constants.js @@ -10,12 +10,12 @@ export const DIRECTION_BOTTOM = 'direction_bottom' export const DIRECTION_TOP = 'direction_top' export const LAYOUT_1X1 = '1x1' -export const LAYOUT_1X2 = '1x2' +export const LAYOUT_1x2 = '1x2' +export const LAYOUT_1X3 = '1x3' +export const LAYOUT_1X4 = '1x4' export const LAYOUT_2X1 = '2x1' -export const LAYOUT_3X1 = '3x1' -export const LAYOUT_4X1 = '4x1' export const LAYOUT_2X2 = '2x2' -export const LAYOUT_3X2 = '3x2' +export const LAYOUT_2X3 = '2x3' export const SCALE_CONSTANTS = 1 / 6 export const DRAG_CONSTANTS = 1 / 4 @@ -31,19 +31,21 @@ export const SHARE_ZIP_NAME = 'MegSpotShare.zip' export const DEFAULT_IMAGE_COLLECTION_NAME = 'defaultImageList' export const DEFAULT_VIDEO_COLLECTION_NAME = 'defaultVideoList' +export const DEFAULT_LAYOUTS = [LAYOUT_1X1, LAYOUT_1x2, LAYOUT_1X3, LAYOUT_1X4, LAYOUT_2X1, LAYOUT_2X2, LAYOUT_2X3] + export const SHARE_PROJECT_DEFAULT_PROPS = () => ({ name: '', snapPath: '', config: { imageStore: { imageConfig: { - layout: LAYOUT_2X1, + layout: LAYOUT_1x2, smooth: true } }, videoStore: { videoConfig: { - layout: LAYOUT_2X1, + layout: LAYOUT_1x2, smooth: true } }, diff --git a/src/renderer/lang/en.js b/src/renderer/lang/en.js index e7a638b..4d9a5f4 100644 --- a/src/renderer/lang/en.js +++ b/src/renderer/lang/en.js @@ -138,6 +138,17 @@ export default { }, folder: { loadingText: 'loading resource...' + }, + layout: { + dialogTitle: 'New Layout Config', + rowLabel: 'Rows', + columnLabel: 'Columns', + confirm: 'Confirm Create', + layoutExists: 'The layout config is already exists', + successAdded: 'New layout config added successfully', + confirmUseNewLayout: 'Whether to use this layout immediately', + confirmDialogTitle: 'Use New Layout', + confirmUse: 'Use Now' } }, imagePreview: { diff --git a/src/renderer/lang/ja.js b/src/renderer/lang/ja.js index 6d901e6..1194c98 100644 --- a/src/renderer/lang/ja.js +++ b/src/renderer/lang/ja.js @@ -134,6 +134,17 @@ export default { }, folder: { loadingText: 'データの読み込み...' + }, + layout: { + dialogTitle: '新しいレイアウト設定', + rowLabel: '行の数', + columnLabel: '列の数', + confirm: '新規確認', + layoutExists: 'レイアウト構成はすでに存在します', + successAdded: '新しいレイアウト構成が正常に追加されました', + confirmUseNewLayout: 'このレイアウトを今すぐ使用しますか', + confirmDialogTitle: '新しいレイアウトを使用する', + confirmUse: 'すぐに使用する' } }, imagePreview: { diff --git a/src/renderer/lang/zh.js b/src/renderer/lang/zh.js index 9c95d49..d4d1cae 100644 --- a/src/renderer/lang/zh.js +++ b/src/renderer/lang/zh.js @@ -137,6 +137,17 @@ export default { }, folder: { loadingText: '文件夹资源获取中...' + }, + layout: { + dialogTitle: '新建布局设置', + rowLabel: '行数', + columnLabel: '列数', + confirm: '确认新建', + layoutExists: '该配置已存在', + successAdded: '已成功添加新布局', + confirmUseNewLayout: '是否立即使用该布局', + confirmDialogTitle: '使用新布局', + confirmUse: '立即使用' } }, imagePreview: { diff --git a/src/renderer/store/modules/imageSnapshotStore.js b/src/renderer/store/modules/imageSnapshotStore.js index 434c1dc..8d03313 100644 --- a/src/renderer/store/modules/imageSnapshotStore.js +++ b/src/renderer/store/modules/imageSnapshotStore.js @@ -8,7 +8,7 @@ const imageSnapshotStore = { imageList: [], imageConfig: { smooth: true, - layout: GLOBAL_CONSTANT.LAYOUT_2X1, + layout: GLOBAL_CONSTANT.LAYOUT_1x2, defaultSort: { order: 'asc', field: 'name' diff --git a/src/renderer/store/modules/imageStore.js b/src/renderer/store/modules/imageStore.js index c0c564f..58eac35 100644 --- a/src/renderer/store/modules/imageStore.js +++ b/src/renderer/store/modules/imageStore.js @@ -29,7 +29,7 @@ const imageStore = { collectionName: GLOBAL_CONSTANT.DEFAULT_IMAGE_COLLECTION_NAME, imageConfig: { smooth: true, - layout: GLOBAL_CONSTANT.LAYOUT_2X1, + layout: GLOBAL_CONSTANT.LAYOUT_1x2, defaultSort: { order: 'asc', field: 'name' diff --git a/src/renderer/store/modules/preferenceStore.js b/src/renderer/store/modules/preferenceStore.js index c0f0ce7..8318dfa 100644 --- a/src/renderer/store/modules/preferenceStore.js +++ b/src/renderer/store/modules/preferenceStore.js @@ -1,5 +1,6 @@ import { getArrStr } from '@/tools/hotkey' import { getType } from '@/utils' +import { DEFAULT_LAYOUTS } from '@/constants' const preferenceStore = { namespaced: true, @@ -29,7 +30,8 @@ const preferenceStore = { videoProcessBarStyle: 'fixed', showScale: true, showMousePos: true, - hotkeys: [] + hotkeys: [], + layouts: DEFAULT_LAYOUTS }, // gamma校正 gamma: 1, diff --git a/src/renderer/store/modules/videoStore.js b/src/renderer/store/modules/videoStore.js index 1e61f8e..ff6f2f6 100644 --- a/src/renderer/store/modules/videoStore.js +++ b/src/renderer/store/modules/videoStore.js @@ -32,7 +32,7 @@ const videoStore = { speed: 1.0, currentTime: 0, dynamicPickColor: false, - layout: GLOBAL_CONSTANT.LAYOUT_2X1, + layout: GLOBAL_CONSTANT.LAYOUT_1x2, allVideoPaused: true, // 所有视频都为暂停状态 enableSyncTime: true, // 启用视频进度同步 minRenderInterval: 0.01, // 视频最小渲染间隔， diff --git a/src/renderer/views/image/Content.vue b/src/renderer/views/image/Content.vue index 4e129e0..c7ecb26 100644 --- a/src/renderer/views/image/Content.vue +++ b/src/renderer/views/image/Content.vue @@ -98,10 +98,10 @@ export default { smartLayout = GLOBAL_CONSTANTS.LAYOUT_1X1 break case 2: - smartLayout = GLOBAL_CONSTANTS.LAYOUT_2X1 + smartLayout = GLOBAL_CONSTANTS.LAYOUT_1x2 break case 3: - smartLayout = GLOBAL_CONSTANTS.LAYOUT_3X1 + smartLayout = GLOBAL_CONSTANTS.LAYOUT_1X3 break case 4: smartLayout = GLOBAL_CONSTANTS.LAYOUT_2X2 @@ -134,7 +134,7 @@ export default { currentLayout() { return ( (this.snapshotMode ? this.snapshotConfig?.config?.imageStore?.imageConfig?.layout : this.imageConfig.layout) ?? - this.imageConfig.layout + GLOBAL_CONSTANTS.DEFAULT_LAYOUTS[0] ) }, // 每组图片数量 @@ -150,50 +150,60 @@ export default { : [] }, containerStyle() { - switch (this.currentLayout) { - case GLOBAL_CONSTANTS.LAYOUT_1X1: - return { - display: 'flex', - flexDirection: 'column' - } - case GLOBAL_CONSTANTS.LAYOUT_2X1: - return { - display: 'grid', - gridTemplateColumns: '1fr 1fr' - } - case GLOBAL_CONSTANTS.LAYOUT_1X2: - return { - display: 'grid', - gridTemplateRows: '50% 50%' - } - case GLOBAL_CONSTANTS.LAYOUT_3X1: - return { - display: 'grid', - gridTemplateColumns: '1fr 1fr 1fr' - } - case GLOBAL_CONSTANTS.LAYOUT_4X1: - return { - display: 'grid', - gridTemplateColumns: '1fr 1fr 1fr 1fr' - } - case GLOBAL_CONSTANTS.LAYOUT_2X2: - return { - display: 'grid', - gridTemplateColumns: '1fr 1fr', - gridTemplateRows: '50% 50%' - } - case GLOBAL_CONSTANTS.LAYOUT_3X2: - return { - display: 'grid', - gridTemplateColumns: '1fr 1fr 1fr', - gridTemplateRows: '50% 50%' - } - default: - return { - display: 'grid', - gridTemplateColumns: '1fr 1fr' - } + const rows = parseInt(this.currentLayout[0]) + const columns = parseInt(this.currentLayout[2]) + const rowGap = 0, + columnGap = 0 + return { + display: 'grid', + gridTemplateRows: `repeat(${rows}, 1fr)`, + gridTemplateColumns: `repeat(${columns}, 1fr)`, + gap: `${rowGap} ${columnGap}` } + // switch (this.currentLayout) { + // case GLOBAL_CONSTANTS.LAYOUT_1X1: + // return { + // display: 'flex', + // flexDirection: 'column' + // } + // case GLOBAL_CONSTANTS.LAYOUT_1x2: + // return { + // display: 'grid', + // gridTemplateColumns: '1fr 1fr' + // } + // case GLOBAL_CONSTANTS.LAYOUT_2X1: + // return { + // display: 'grid', + // gridTemplateRows: '50% 50%' + // } + // case GLOBAL_CONSTANTS.LAYOUT_1X3: + // return { + // display: 'grid', + // gridTemplateColumns: '1fr 1fr 1fr' + // } + // case GLOBAL_CONSTANTS.LAYOUT_1X4: + // return { + // display: 'grid', + // gridTemplateColumns: '1fr 1fr 1fr 1fr' + // } + // case GLOBAL_CONSTANTS.LAYOUT_2X2: + // return { + // display: 'grid', + // gridTemplateColumns: '1fr 1fr', + // gridTemplateRows: '50% 50%' + // } + // case GLOBAL_CONSTANTS.LAYOUT_2X3: + // return { + // display: 'grid', + // gridTemplateColumns: '1fr 1fr 1fr', + // gridTemplateRows: '50% 50%' + // } + // default: + // return { + // display: 'grid', + // gridTemplateColumns: '1fr 1fr' + // } + // } } }, watch: { @@ -346,35 +356,13 @@ export default { }, calcWidth() { const containerWidth = document.body.clientWidth - switch (this.currentLayout) { - case GLOBAL_CONSTANTS.LAYOUT_1X1: - case GLOBAL_CONSTANTS.LAYOUT_1X2: - return containerWidth - case GLOBAL_CONSTANTS.LAYOUT_2X1: - case GLOBAL_CONSTANTS.LAYOUT_2X2: - return containerWidth / 2 - case GLOBAL_CONSTANTS.LAYOUT_3X1: - case GLOBAL_CONSTANTS.LAYOUT_3X2: - return containerWidth / 3 - case GLOBAL_CONSTANTS.LAYOUT_4X1: - return containerWidth / 4 - } + return containerWidth / parseInt(this.currentLayout[2]) }, calcHeight() { const toolbarInfo = document.getElementsByClassName('toolbar')[0].getBoundingClientRect() const headerInfo = document.getElementsByClassName('header')[0].getBoundingClientRect() const containerHeight = document.body.clientHeight - toolbarInfo.height - headerInfo.height - switch (this.currentLayout) { - case GLOBAL_CONSTANTS.LAYOUT_1X1: - case GLOBAL_CONSTANTS.LAYOUT_2X1: - case GLOBAL_CONSTANTS.LAYOUT_3X1: - case GLOBAL_CONSTANTS.LAYOUT_4X1: - return containerHeight - case GLOBAL_CONSTANTS.LAYOUT_2X2: - case GLOBAL_CONSTANTS.LAYOUT_3X2: - case GLOBAL_CONSTANTS.LAYOUT_1X2: - return containerHeight / 2 - } + return containerHeight / parseInt(this.currentLayout[0]) }, setOverLay({ direction, status }) { const handlecover = this.handleCompareOptions(direction) @@ -503,20 +491,9 @@ export default { coveredArr[i].setCoverStatus(layImg, status) } }, + //获取列数 getColumnLine() { - //获取列数 - if ([GLOBAL_CONSTANTS.LAYOUT_1X1, GLOBAL_CONSTANTS.LAYOUT_1X2].includes(this.currentLayout)) { - return 1 - } - if ([GLOBAL_CONSTANTS.LAYOUT_2X2, GLOBAL_CONSTANTS.LAYOUT_2X1].includes(this.currentLayout)) { - return 2 - } - if ([GLOBAL_CONSTANTS.LAYOUT_3X1, GLOBAL_CONSTANTS.LAYOUT_3X2].includes(this.currentLayout)) { - return 3 - } - if ([GLOBAL_CONSTANTS.LAYOUT_4X1].includes(this.currentLayout)) { - return 4 - } + return parseInt(this.currentLayout[2]) } } } @@ -524,7 +501,6 @@ export default {