소스 검색

fix: 修改对齐

jiaxing.liao 2 주 전
부모
커밋
1a1d3b6379
3개의 변경된 파일21개의 추가작업 그리고 7개의 파일을 삭제
  1. 13 6
      src/renderer/src/store/modules/action.ts
  2. 7 0
      src/renderer/src/store/modules/project.ts
  3. 1 1
      src/renderer/src/views/designer/tools/Operate.vue

+ 13 - 6
src/renderer/src/store/modules/action.ts

@@ -35,9 +35,11 @@ export const useActionStore = defineStore('action', () => {
    */
   const onAlign = (type: AlignType) => {
     const widgets = projectStore.activeWidgets
+    const screen = projectStore.activeScreen
     switch (type) {
       case 'left': {
-        const minX = Math.min(...widgets.map((widget) => widget.props.x))
+        let minX = Math.min(...widgets.map((widget) => widget.props.x))
+        if (widgets.length === 1) minX = 0
         widgets.forEach((widget) => {
           widget.props.x = minX
         })
@@ -45,7 +47,8 @@ export const useActionStore = defineStore('action', () => {
       }
 
       case 'right': {
-        const maxX = Math.max(...widgets.map((widget) => widget.props.x + widget.props.width))
+        let maxX = Math.max(...widgets.map((widget) => widget.props.x + widget.props.width))
+        if (widgets.length === 1) maxX = screen?.width ?? maxX
         widgets.forEach((widget) => {
           widget.props.x = maxX - widget.props.width
         })
@@ -53,7 +56,8 @@ export const useActionStore = defineStore('action', () => {
       }
 
       case 'top': {
-        const minY = Math.min(...widgets.map((widget) => widget.props.y))
+        let minY = Math.min(...widgets.map((widget) => widget.props.y))
+        if (widgets.length === 1) minY = 0
         widgets.forEach((widget) => {
           widget.props.y = minY
         })
@@ -61,7 +65,8 @@ export const useActionStore = defineStore('action', () => {
       }
 
       case 'bottom': {
-        const maxY = Math.max(...widgets.map((widget) => widget.props.y + widget.props.height))
+        let maxY = Math.max(...widgets.map((widget) => widget.props.y + widget.props.height))
+        if (widgets.length === 1) maxY = screen?.height ?? maxY
         widgets.forEach((widget) => {
           widget.props.y = maxY - widget.props.height
         })
@@ -71,7 +76,8 @@ export const useActionStore = defineStore('action', () => {
       case 'vcenter': {
         const maxY = Math.max(...widgets.map((widget) => widget.props.y + widget.props.height))
         const minY = Math.min(...widgets.map((widget) => widget.props.y))
-        const centerY = minY + (maxY + minY) / 2
+        let centerY = minY + (maxY - minY) / 2
+        if (widgets.length === 1) centerY = screen?.height ? screen.height / 2 : centerY
         widgets.forEach((widget) => {
           widget.props.y = centerY - widget.props.height / 2
         })
@@ -81,7 +87,8 @@ export const useActionStore = defineStore('action', () => {
       case 'hcenter': {
         const maxX = Math.max(...widgets.map((widget) => widget.props.x + widget.props.width))
         const minX = Math.min(...widgets.map((widget) => widget.props.x))
-        const centerX = minX + (maxX + minX) / 2
+        let centerX = minX + (maxX - minX) / 2
+        if (widgets.length === 1) centerX = screen?.width ? screen.width / 2 : centerX
         widgets.forEach((widget) => {
           widget.props.x = centerX - widget.props.width / 2
         })

+ 7 - 0
src/renderer/src/store/modules/project.ts

@@ -71,6 +71,12 @@ export const useProjectStore = defineStore('project', () => {
     const pages = project.value?.screens.map((screen) => screen.pages)
     return pages?.flat().find((page) => page.id === activePageId.value)
   })
+  // 当前激活的屏幕
+  const activeScreen = computed(() => {
+    return project.value?.screens.find((screen) =>
+      screen.pages.some((page) => page.id === activePageId.value)
+    )
+  })
   // 打开页面 用以记录每个屏幕打开的页面
   const openPages = ref<Page[]>([])
 
@@ -306,6 +312,7 @@ export const useProjectStore = defineStore('project', () => {
     activeWidgetMap,
     globalStyle,
     currentMaxScreen,
+    activeScreen,
 
     // 历史记录
     history,

+ 1 - 1
src/renderer/src/views/designer/tools/Operate.vue

@@ -36,7 +36,7 @@ const projectStore = useProjectStore()
 const actionStore = useActionStore()
 
 const projectMenu = computed((): MenuItemType[] => {
-  const disabledAlign = projectStore.activeWidgets.length < 2
+  const disabledAlign = projectStore.activeWidgets.length < 1
   const disabledAvg = projectStore.activeWidgets.length < 3
   const disabledLevel = !projectStore.activeWidgets.length
   return [