feat: support custom layout

MegEngine · Feb 6, 2024 · e301651 · e301651
1 parent 63f244c
commit e301651
Show file tree

Hide file tree

Showing 15 changed files with 5,041 additions and 4,630 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "MegSpot",
-  "version": "v2.2.5",
+  "version": "v2.2.6",
   "author": "weiyajun <[email protected]>",
   "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
@@ -0,0 +1,105 @@
+<template>
+  <el-dialog :title="$t('image.layout.dialogTitle')" :visible.sync="dialogVisible" center width="600px">
+    <div class="config-list">
+      <div class="config-item">
+        <b>{{ $t('image.layout.rowLabel') }}:</b>
+        <el-input-number v-model.number="rows" :min="1" step="1" step-strictly></el-input-number>
+      </div>
+      <div class="config-item">
+        <b>{{ $t('image.layout.columnLabel') }}:</b>
+        <el-input-number v-model.number="columns" :min="1" step="1" step-strictly></el-input-number>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleCreateNewLayout">{{ $t('image.layout.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapGetters: imageMapGetters, mapActions: imageMapActions } = createNamespacedHelpers('imageStore')
+const { mapGetters: videoMapGetters, mapActions: videoMapActions } = createNamespacedHelpers('videoStore')
+const { mapGetters: preferenceMapGetters, mapActions: preferenceMapActions } =
+  createNamespacedHelpers('preferenceStore')
+import { i18nRender } from '@/lang'
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      rows: 1,
+      columns: 1
+    }
+  },
+  computed: {
+    ...preferenceMapGetters(['preference']),
+    ...imageMapGetters(['imageList', 'imageConfig']),
+    ...videoMapGetters(['videoList', 'videoConfig'])
+  },
+  methods: {
+    ...preferenceMapActions(['setPreference']),
+    ...imageMapActions(['setImageConfig']),
+    ...videoMapActions(['setVideoConfig']),
+    show() {
+      this.dialogVisible = true
+    },
+    handleCreateNewLayout() {
+      const newLayout = `${this.rows}x${this.columns}`
+      if (this.preference.layouts.includes(newLayout)) {
+        this.$message.info(i18nRender('image.layout.layoutExists'))
+      } else {
+        const newLayouts = [newLayout, ...this.preference.layouts]
+        newLayouts.sort()
+        this.setPreference({
+          layouts: newLayouts
+        })
+        this.$message.success(i18nRender('image.layout.successAdded') + `：${newLayout}`)
+
+        if (
+          (this.$route.path.includes('image') &&
+            this.imageConfig.layout !== newLayout &&
+            this.imageList.length >= this.rows * this.columns) ||
+          (this.$route.path.includes('video') &&
+            this.videoConfig.layout !== newLayout &&
+            this.videoList.length >= this.rows * this.columns)
+        ) {
+          this.$confirm(
+            i18nRender('image.layout.confirmUseNewLayout') + '?',
+            i18nRender('image.layout.confirmDialogTitle'),
+            {
+              confirmButtonText: i18nRender('image.layout.confirmUse'),
+              cancelButtonText: i18nRender('common.cancel'),
+              type: 'info',
+              'append-to-body': true
+            }
+          ).then(() => {
+            if (this.$route.path.includes('image')) {
+              this.setImageConfig({ layout: newLayout })
+            } else if (this.$route.path.includes('video')) {
+              this.setVideoConfig({ layout: newLayout })
+            }
+          })
+        }
+      }
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.config-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  .config-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+}
+</style>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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, // 视频最小渲染间隔，