refactor(Dashboard): When optimizing the addition of components, they can be arranged in order from left to right in the dashboard (dataease#114)

Author: ziyujiahao

frontend/src/stores/dashboard/dashboard.ts

@@ -13,6 +13,10 @@ export const dashboardStore = defineStore('dashboard', {
       canvasViewInfo: {},
       fullscreenFlag: false,
       dataPrepareState: false,
+      baseMatrixCount: {
+        x: 72,
+        y: 36,
+      },
       dashboardInfo: {
         id: null,
         name: null,

frontend/src/views/dashboard/canvas/CanvasCore.vue

@@ -1069,8 +1069,6 @@ const forceComputed = () => {
 }
 
 function addItemBox(item: CanvasItem) {
-  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  item.x = findPositionX(item)
   canvasComponentData.value.push(item)
   forceComputed()
   nextTick(() => {
@@ -1177,8 +1175,7 @@ function tabMoveInCheckSQ() {
 /**
  * Find position box
  */
-function findPositionX(item: CanvasItem) {
-  const width = item.sizeX
+function findPositionX(width: number) {
   let resultX = 1
   let checkPointYIndex = -1 // -1 means not occupying any Y-direction canvas
   // Component width
@@ -1245,6 +1242,7 @@ defineExpose({
   removeItem,
   findClosetCoords,
   makeCoordinate,
+  findPositionX,
 })
 </script>
 

frontend/src/views/dashboard/editor/DashboardEditor.vue

@@ -85,6 +85,11 @@ const addItemToBox = (item: CanvasItem) => {
   canvasCoreRef.value.addItemBox(item)
 }
 
+const findPositionX = (width: number) => {
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  return canvasCoreRef.value.findPositionX(width)
+}
+
 useEmitt({
   name: 'custom-canvas-resize',
   callback: canvasSizeInit,
@@ -93,6 +98,7 @@ useEmitt({
 defineExpose({
   canvasSizeInit,
   addItemToBox,
+  findPositionX,
 })
 
 onMounted(() => {

frontend/src/views/dashboard/editor/Toolbar.vue

@@ -22,7 +22,7 @@ const { dashboardInfo, fullscreenFlag } = storeToRefs(dashboardStore)
 
 const snapshotStore = snapshotStoreWithOut()
 const { snapshotIndex } = storeToRefs(snapshotStore)
-const emits = defineEmits(['addComponent'])
+const emits = defineEmits(['addComponents'])
 const resourceGroupOptRef = ref(null)
 const chatChartSelectionRef = ref(null)
 const openViewDialog = () => {
@@ -139,10 +139,11 @@ const backToMain = () => {
 }
 
 const addChatChart = (views: any) => {
+  emits('addComponents', 'SQView', views)
   views.forEach((view: any) => {
     const target = cloneDeep(view)
     delete target.chart.sourceType
-    emits('addComponent', 'SQView', target)
+    emits('addComponents', 'SQView', target)
   })
   ElMessage({
     type: 'success',
@@ -212,14 +213,14 @@ const previewInner = () => {
         :title="t('dashboard.text')"
         themes="light"
         is-label
-        @custom-click="() => emits('addComponent', 'SQText')"
+        @custom-click="() => emits('addComponents', 'SQText')"
       ></component-button-label>
       <component-button-label
         :icon-name="dvTab"
         title="Tab"
         themes="light"
         is-label
-        @custom-click="() => emits('addComponent', 'SQTab')"
+        @custom-click="() => emits('addComponents', 'SQTab')"
       >
       </component-button-label>
     </div>

frontend/src/views/dashboard/editor/index.vue

@@ -13,7 +13,8 @@ import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 const dashboardStore = dashboardStoreWithOut()
-const { componentData, canvasViewInfo, fullscreenFlag } = storeToRefs(dashboardStore)
+const { componentData, canvasViewInfo, fullscreenFlag, baseMatrixCount } =
+  storeToRefs(dashboardStore)
 
 const dataInitState = ref(true)
 const state = reactive({
@@ -23,8 +24,26 @@ const state = reactive({
 })
 
 const dashboardEditorInnerRef = ref(null)
-const addComponent = (componentType: string, viewInfo?: any) => {
+const addComponents = (componentType: string, views?: any) => {
   const component = cloneDeep(findNewComponentFromList(componentType))
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  component.x = findPositionX(component.sizeX)
+  if (views) {
+    views.forEach((view: any, index: number) => {
+      const target = cloneDeep(view)
+      delete target.chart.sourceType
+      if (index > 0) {
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        component.x = ((component.x + component?.sizeX - 1) % baseMatrixCount.value.x) + 1
+      }
+      addComponent(component, target)
+    })
+  } else {
+    addComponent(component)
+  }
+}
+const addComponent = (componentSource: any, viewInfo?: any) => {
+  const component = cloneDeep(componentSource)
   if (component && dashboardEditorInnerRef.value) {
     component.id = guid()
     // add view
@@ -34,9 +53,7 @@ const addComponent = (componentType: string, viewInfo?: any) => {
       dashboardStore.addCanvasViewInfo(viewInfo)
     } else if (component.component === 'SQTab') {
       const subTabName = guid('tab')
-      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
       component.propValue[0].name = subTabName
-      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
       component.propValue[0].title = t('dashboard.new_tab')
       component.activeTabName = subTabName
     }
@@ -85,12 +102,20 @@ const baseParams = computed(() => {
     pid: state.routerPid,
   }
 })
+const findPositionX = (width: number) => {
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  return dashboardEditorInnerRef.value.findPositionX(width)
+}
 </script>
 
 <template>
   <div class="editor-content" :class="{ 'editor-content-fullscreen': fullscreenFlag }">
     <div class="editor-main">
-      <Toolbar :base-params="baseParams" @add-component="addComponent"></Toolbar>
+      <Toolbar
+        :base-params="baseParams"
+        :find-position-x="findPositionX"
+        @add-components="addComponents"
+      ></Toolbar>
       <DashboardEditor
         v-if="dataInitState"
         ref="dashboardEditorInnerRef"