From afd9f8206449ff06646ab22b13f295295276aa81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E4=BF=8A=E4=BF=8A?= <1300722971@qq.com>
Date: Mon, 15 Jan 2024 15:24:21 +0800
Subject: [PATCH 1/5] feat:  add table create feature

---
 src/UserInterface/ToolBar/ToolBar.vue         |  2 +-
 .../ToolBar/components/Insert/Table.vue       | 58 +++++++++++++++++--
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/src/UserInterface/ToolBar/ToolBar.vue b/src/UserInterface/ToolBar/ToolBar.vue
index f989743..7f76745 100644
--- a/src/UserInterface/ToolBar/ToolBar.vue
+++ b/src/UserInterface/ToolBar/ToolBar.vue
@@ -22,7 +22,7 @@ const components: { [key: string]: Component } = {
 </script>
 
 <template>
-  <div class="bg-secondary">
+  <div class="relative z-10 bg-secondary">
     <ToolTabs :active="activeTab" :tabs="TOOL_TABS" @click-tab="handleClickTab" />
     <TabContent>
       <component :is="components[activeTab]"></component>
diff --git a/src/UserInterface/ToolBar/components/Insert/Table.vue b/src/UserInterface/ToolBar/components/Insert/Table.vue
index 1928d11..974a4b5 100644
--- a/src/UserInterface/ToolBar/components/Insert/Table.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Table.vue
@@ -1,21 +1,71 @@
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
 import { TableFile, Down } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { slideManager } from '@Kernel/index'
 import { TableBlock } from '@BlockHub/TableBlock/TableBlock'
 
-const insertTable = () => {
-  const block = new TableBlock(300, 200, 4, 3)
+const showCreateTableBox = ref<boolean>(false);
+const curTableId = ref<number>(-1);
+const curRowIndex = ref<number>(0);
+const curColIndex = ref<number>(0);
+
+const insertTable = (rowIndex: number, colIndex: number) => {
+  const block = new TableBlock(300, 200, rowIndex, colIndex)
   slideManager.currentSlide.addBlock(block)
+  showCreateTableBox.value = false
+  curRowIndex.value = 0
+  curColIndex.value = 0
+  curTableId.value = -1
+}
+const mouseoverHanlder = (rowIndex: number, colIndex: number) => {
+  curRowIndex.value = rowIndex;
+  curColIndex.value = colIndex;
+  /* if (curTableId.value === -1) {
+    const block = new TableBlock(300, 200, rowIndex, colIndex)
+    slideManager.currentSlide.addBlock(block)
+    curTableId.value = block.id
+  } else {
+    console.log(slideManager.currentSlide.blocks[curTableId.value]);
+    slideManager.currentSlide.blocks[curTableId.value].updateCurrentSize(rowIndex, colIndex);
+  } */
+}
+const mouseLeaveHandler = () => {
+  curRowIndex.value = 0;
+  curColIndex.value = 0;
 }
+const handleDocumentClick = () => {
+  showCreateTableBox.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleDocumentClick)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', handleDocumentClick)
+})
 </script>
 
 <template>
   <ButtonGroup :name="$t('ToolBar.insert.table.title')">
-    <button class="flex flex-col items-center py-0 menu-btn" @click="insertTable">
-      <TableFile class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2" />
+    <button class="relative flex flex-col items-center py-0 menu-btn" @click.stop="showCreateTableBox = !showCreateTableBox">
+      <TableFile class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2"/>
       <span class="text-xs">{{ $t('ToolBar.insert.table.title') }}</span>
       <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
+      <div v-if="showCreateTableBox" class="absolute w-[210px] h-[200px] border border-gray-500 top-[70px] left-0 bg-white">
+        <div class="w-full h-[20px] mb-[5px] bg-gray-100 text-left pl-2 font-bold text-gray-500">插入表格</div>
+        <div class="ml-[3px]" @mouseleave="mouseLeaveHandler">
+          <div v-for="rowIndex of 8" :key="rowIndex" class="flex justify-center">
+            <div
+              v-for="colIndex of 10" :key="colIndex + (rowIndex - 1) * 10"
+              class="w-[17px] h-[17px] border mr-[3px] mb-1"
+              :class="rowIndex <= curRowIndex && colIndex <= curColIndex ? 'border-orange-300' : ''"
+              @mouseover="mouseoverHanlder(rowIndex, colIndex)"
+              @click.stop="insertTable(rowIndex, colIndex)"
+            ></div>
+          </div>
+        </div>
+      </div>
     </button>
   </ButtonGroup>
 </template>

From 33158cd9e0b50fa60164190de104463ca5d0e5ec Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 19:09:08 +0800
Subject: [PATCH 2/5] refactor: use ToolButton

---
 src/Lang/Locale/en-US/ToolBar.json            |  2 +-
 src/Lang/Locale/zh-CN/ToolBar.json            |  2 +-
 src/UserInterface/ToolBar/ToolBar.vue         |  2 +-
 .../ToolBar/components/Insert/Table.vue       | 81 +++++++------------
 4 files changed, 33 insertions(+), 54 deletions(-)

diff --git a/src/Lang/Locale/en-US/ToolBar.json b/src/Lang/Locale/en-US/ToolBar.json
index 1d30eb6..84875ae 100644
--- a/src/Lang/Locale/en-US/ToolBar.json
+++ b/src/Lang/Locale/en-US/ToolBar.json
@@ -55,7 +55,7 @@
       },
       "table": {
         "title": "Table",
-        "dialogTitle": "Insert Table"
+        "insert": "Insert Table"
       },
       "picture": {
         "title": "Picture",
diff --git a/src/Lang/Locale/zh-CN/ToolBar.json b/src/Lang/Locale/zh-CN/ToolBar.json
index 97a211a..83c676c 100644
--- a/src/Lang/Locale/zh-CN/ToolBar.json
+++ b/src/Lang/Locale/zh-CN/ToolBar.json
@@ -55,7 +55,7 @@
       },
       "table": {
         "title": "表格",
-        "dialogTitle": "插入表格"
+        "insert": "插入表格"
       },
       "picture": {
         "title": "图像",
diff --git a/src/UserInterface/ToolBar/ToolBar.vue b/src/UserInterface/ToolBar/ToolBar.vue
index 7f76745..f989743 100644
--- a/src/UserInterface/ToolBar/ToolBar.vue
+++ b/src/UserInterface/ToolBar/ToolBar.vue
@@ -22,7 +22,7 @@ const components: { [key: string]: Component } = {
 </script>
 
 <template>
-  <div class="relative z-10 bg-secondary">
+  <div class="bg-secondary">
     <ToolTabs :active="activeTab" :tabs="TOOL_TABS" @click-tab="handleClickTab" />
     <TabContent>
       <component :is="components[activeTab]"></component>
diff --git a/src/UserInterface/ToolBar/components/Insert/Table.vue b/src/UserInterface/ToolBar/components/Insert/Table.vue
index fba99cb..c3a73ea 100644
--- a/src/UserInterface/ToolBar/components/Insert/Table.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Table.vue
@@ -1,79 +1,58 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { TableFile, Down } from '@icon-park/vue-next'
+import { ref } from 'vue'
+import { TableFile } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
 import { slideManager } from '@Kernel/index'
 import { TableBlock } from '@BlockHub/TableBlock/TableBlock'
 import ToolButton from '../ToolButton.vue'
 
-const showCreateTableBox = ref<boolean>(false)
-const curTableId = ref<number>(-1)
 const curRowIndex = ref<number>(0)
 const curColIndex = ref<number>(0)
 
-const insertTable = (rowIndex: number, colIndex: number) => {
-  const block = new TableBlock(300, 200, rowIndex, colIndex)
+const insertTable = (row: number, column: number) => {
+  const block = new TableBlock(100, 100, row, column)
   slideManager.currentSlide.addBlock(block)
-  showCreateTableBox.value = false
   curRowIndex.value = 0
   curColIndex.value = 0
-  curTableId.value = -1
 }
-const mouseoverHanlder = (rowIndex: number, colIndex: number) => {
+
+const mouseOverHandler = (rowIndex: number, colIndex: number) => {
   curRowIndex.value = rowIndex
   curColIndex.value = colIndex
-  /* if (curTableId.value === -1) {
-    const block = new TableBlock(300, 200, rowIndex, colIndex)
-    slideManager.currentSlide.addBlock(block)
-    curTableId.value = block.id
-  } else {
-    console.log(slideManager.currentSlide.blocks[curTableId.value]);
-    slideManager.currentSlide.blocks[curTableId.value].updateCurrentSize(rowIndex, colIndex);
-  } */
 }
+
 const mouseLeaveHandler = () => {
   curRowIndex.value = 0
   curColIndex.value = 0
 }
-const handleDocumentClick = () => {
-  showCreateTableBox.value = false
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleDocumentClick)
-})
-onUnmounted(() => {
-  document.removeEventListener('click', handleDocumentClick)
-})
 </script>
 
 <template>
   <ButtonGroup :name="$t('ToolBar.insert.table.title')">
-    <button
-      class="relative flex flex-col items-center py-0 menu-btn"
-      @click.stop="showCreateTableBox = !showCreateTableBox"
-    >
-      <TableFile class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2" />
-      <span class="text-xs">{{ $t('ToolBar.insert.table.title') }}</span>
-      <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
-      <div
-        v-if="showCreateTableBox"
-        class="absolute w-[210px] h-[200px] border border-gray-500 top-[70px] left-0 bg-white"
-      >
-        <div class="w-full h-[20px] mb-[5px] bg-gray-100 text-left pl-2 font-bold text-gray-500">插入表格</div>
-        <div class="ml-[3px]" @mouseleave="mouseLeaveHandler">
-          <div v-for="rowIndex of 8" :key="rowIndex" class="flex justify-center">
-            <div
-              v-for="colIndex of 10"
-              :key="colIndex + (rowIndex - 1) * 10"
-              class="w-[17px] h-[17px] border mr-[3px] mb-1"
-              :class="rowIndex <= curRowIndex && colIndex <= curColIndex ? 'border-orange-300' : ''"
-              @mouseover="mouseoverHanlder(rowIndex, colIndex)"
-              @click.stop="insertTable(rowIndex, colIndex)"
-            ></div>
+    <ToolButton :hasMenu="true">
+      <template #icon>
+        <TableFile class="mb-1" theme="outline" size="32" fill="#333" :strokeWidth="2" />
+      </template>
+      <template #name>{{ $t('ToolBar.insert.table.title') }}</template>
+      <template #menu>
+        <div class="px-[16px] pt-[6px] pb-[12px]">
+          <div class="h-[28px]">
+            {{ $t('ToolBar.insert.table.insert') }}
+          </div>
+          <div @mouseleave="mouseLeaveHandler" class="flex flex-wrap gap-[4px]">
+            <div v-for="rowIndex of 8" :key="rowIndex" class="flex justify-center gap-[4px]">
+              <div
+                v-for="colIndex of 10"
+                :key="`${rowIndex}-${colIndex}`"
+                class="w-[17px] h-[17px] border"
+                :class="rowIndex <= curRowIndex && colIndex <= curColIndex ? 'bg-blue-100 border-blue-400' : ''"
+                @mouseover="mouseOverHandler(rowIndex, colIndex)"
+                @click="insertTable(rowIndex, colIndex)"
+              ></div>
+            </div>
           </div>
         </div>
-      </div>
-    </button>
+      </template>
+    </ToolButton>
   </ButtonGroup>
 </template>

From 0f593d0a72bfdf61ab3e815983978c54fad128e2 Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 19:13:33 +0800
Subject: [PATCH 3/5] fix: click on gap

---
 src/UserInterface/ToolBar/components/Insert/Table.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/UserInterface/ToolBar/components/Insert/Table.vue b/src/UserInterface/ToolBar/components/Insert/Table.vue
index c3a73ea..2abc30f 100644
--- a/src/UserInterface/ToolBar/components/Insert/Table.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Table.vue
@@ -9,8 +9,8 @@ import ToolButton from '../ToolButton.vue'
 const curRowIndex = ref<number>(0)
 const curColIndex = ref<number>(0)
 
-const insertTable = (row: number, column: number) => {
-  const block = new TableBlock(100, 100, row, column)
+const insertTable = () => {
+  const block = new TableBlock(100, 100, curRowIndex.value, curColIndex.value)
   slideManager.currentSlide.addBlock(block)
   curRowIndex.value = 0
   curColIndex.value = 0
@@ -39,7 +39,7 @@ const mouseLeaveHandler = () => {
           <div class="h-[28px]">
             {{ $t('ToolBar.insert.table.insert') }}
           </div>
-          <div @mouseleave="mouseLeaveHandler" class="flex flex-wrap gap-[4px]">
+          <div @click="insertTable" @mouseleave="mouseLeaveHandler" class="flex flex-wrap gap-[4px]">
             <div v-for="rowIndex of 8" :key="rowIndex" class="flex justify-center gap-[4px]">
               <div
                 v-for="colIndex of 10"
@@ -47,7 +47,6 @@ const mouseLeaveHandler = () => {
                 class="w-[17px] h-[17px] border"
                 :class="rowIndex <= curRowIndex && colIndex <= curColIndex ? 'bg-blue-100 border-blue-400' : ''"
                 @mouseover="mouseOverHandler(rowIndex, colIndex)"
-                @click="insertTable(rowIndex, colIndex)"
               ></div>
             </div>
           </div>

From ec63bfcbdc0ee567e4f0e3193849e9584edcf34f Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 19:46:23 +0800
Subject: [PATCH 4/5] feat: update table size

---
 src/BlockHub/TableBlock/Table.vue             | 46 ++++++++++++-------
 src/BlockHub/TableBlock/TableBlock.ts         | 13 +++++-
 src/BlockHub/TableBlock/const.ts              |  4 +-
 .../ToolBar/components/Insert/Table.vue       |  3 +-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/BlockHub/TableBlock/Table.vue b/src/BlockHub/TableBlock/Table.vue
index 3597fb2..2bec463 100644
--- a/src/BlockHub/TableBlock/Table.vue
+++ b/src/BlockHub/TableBlock/Table.vue
@@ -3,15 +3,17 @@ import { type TableBlock } from './TableBlock'
 import RichText from '@RichText/RichText.vue'
 import { type ArrayStore } from '@Kernel/Store/ArrayStore'
 import type { TextStore } from '@Kernel/Store/TextStore'
-import { ref, shallowRef, onMounted, onUnmounted } from 'vue'
-import { CELL_WIDTH, CELL_HEIGHT } from './const'
+import { ref, shallowRef, computed } from 'vue'
+import { BasicPropName } from '@BlockHub/Block/Block'
 
 const { block } = defineProps<{
   block: TableBlock
 }>()
 
+const { row, column, data, x, y, width, height, rotate, bindController } = block
+
 const tableData = shallowRef([] as Array<Array<TextStore>>)
-for (const row of block.data) {
+for (const row of data) {
   const rowData = []
   for (const cell of row as ArrayStore) {
     rowData.push(cell)
@@ -19,16 +21,20 @@ for (const row of block.data) {
   tableData.value.push(rowData as Array<TextStore>)
 }
 
-const tableRef = ref<HTMLElement | null>(null)
-const resizeObserver = new ResizeObserver((entries) => {
-  const height = entries[0].borderBoxSize[0].blockSize
-  block.height = height
+const props = ref({ x, y, width, height, rotate })
+console.log('props', width, height)
+block.props.events.update.on(({ key, to }) => {
+  const value = to as number
+  const rectKey = key as BasicPropName
+  if (['x', 'y', 'width', 'height', 'rotate'].includes(rectKey)) {
+    props.value[rectKey] = value
+  }
 })
-onMounted(() => {
-  resizeObserver.observe(tableRef.value as HTMLElement)
+const cellWidth = computed(() => {
+  return props.value.width / column
 })
-onUnmounted(() => {
-  resizeObserver.unobserve(tableRef.value as HTMLElement)
+const cellHeight = computed(() => {
+  return props.value.height / row
 })
 </script>
 
@@ -37,25 +43,31 @@ onUnmounted(() => {
     ref="tableRef"
     class="table absolute border border-dashed border-secondary-border"
     :style="{
-      left: `${block.x}px`,
-      top: `${block.y}px`,
-      padding: '30px',
+      left: `${props.x}px`,
+      top: `${props.y}px`,
+      width: `${props.width}px`,
+      height: `${props.height}px`,
+      rotate: `${props.rotate}deg`,
     }"
   >
     <div
       class="row flex"
       v-for="(row, rowIndex) of tableData"
-      :style="{ width: `${CELL_WIDTH * row.length}`, minHeight: `${CELL_HEIGHT}px` }"
+      :style="{
+        width: `${cellWidth * row.length}`,
+        height: `${cellHeight}px`,
+        backgroundColor: rowIndex % 2 === 0 ? '#d0d5e8' : '#e9ebf4',
+      }"
     >
       <div
         class="cell inline-block border align-top"
-        :style="{ width: `${CELL_WIDTH}px` }"
+        :style="{ width: `${cellWidth}px` }"
         v-for="(cell, columnIndex) of row"
       >
         <RichText
           @click="block.updateCurrentCoord(rowIndex, columnIndex)"
           :textStore="(cell as TextStore)"
-          :bindController="(controller) => block.bindController(rowIndex, columnIndex, controller)"
+          :bindController="(controller) => bindController(rowIndex, columnIndex, controller)"
         />
       </div>
     </div>
diff --git a/src/BlockHub/TableBlock/TableBlock.ts b/src/BlockHub/TableBlock/TableBlock.ts
index 7f61654..ec398f9 100644
--- a/src/BlockHub/TableBlock/TableBlock.ts
+++ b/src/BlockHub/TableBlock/TableBlock.ts
@@ -2,7 +2,7 @@ import { TextStore } from '@Kernel/Store/TextStore'
 import { Block } from '../Block/Block'
 import { type RichTextController } from '@RichText/RichText'
 import { ArrayStore } from '@Kernel/Store/ArrayStore'
-import { CELL_HEIGHT, CELL_WIDTH } from './const'
+import { DEFAULT_CELL_HEIGHT, DEFAULT_CELL_WIDTH } from './const'
 
 export class TableBlock extends Block {
   private _row: number
@@ -11,7 +11,8 @@ export class TableBlock extends Block {
   private _currentCoord = { row: 0, column: 0 }
 
   constructor(x: number, y: number, row: number, column: number) {
-    super('Table', x, y, CELL_WIDTH * column, CELL_HEIGHT * row)
+    super('Table', x, y, DEFAULT_CELL_WIDTH * column, DEFAULT_CELL_HEIGHT * row)
+    console.log('con', DEFAULT_CELL_WIDTH * column, DEFAULT_CELL_HEIGHT * row)
     this._row = row
     this._column = column
     this._data = this._initData()
@@ -34,6 +35,14 @@ export class TableBlock extends Block {
     return this._data
   }
 
+  get row() {
+    return this._row
+  }
+
+  get column() {
+    return this._column
+  }
+
   updateCurrentCoord(row: number, column: number) {
     this._currentCoord = { row, column }
   }
diff --git a/src/BlockHub/TableBlock/const.ts b/src/BlockHub/TableBlock/const.ts
index 2560743..d67c43e 100644
--- a/src/BlockHub/TableBlock/const.ts
+++ b/src/BlockHub/TableBlock/const.ts
@@ -1,2 +1,2 @@
-export const CELL_WIDTH = 112
-export const CELL_HEIGHT = 36
+export const DEFAULT_CELL_WIDTH = 112
+export const DEFAULT_CELL_HEIGHT = 36
diff --git a/src/UserInterface/ToolBar/components/Insert/Table.vue b/src/UserInterface/ToolBar/components/Insert/Table.vue
index 2abc30f..09a4502 100644
--- a/src/UserInterface/ToolBar/components/Insert/Table.vue
+++ b/src/UserInterface/ToolBar/components/Insert/Table.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { TableFile } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
-import { slideManager } from '@Kernel/index'
+import { selectionManager, slideManager } from '@Kernel/index'
 import { TableBlock } from '@BlockHub/TableBlock/TableBlock'
 import ToolButton from '../ToolButton.vue'
 
@@ -12,6 +12,7 @@ const curColIndex = ref<number>(0)
 const insertTable = () => {
   const block = new TableBlock(100, 100, curRowIndex.value, curColIndex.value)
   slideManager.currentSlide.addBlock(block)
+  selectionManager.focus(block)
   curRowIndex.value = 0
   curColIndex.value = 0
 }

From 957205da1b5b18e0d9d4ddbea30f8daf92e3e996 Mon Sep 17 00:00:00 2001
From: Zhilin Liu <zhilin7@qq.com>
Date: Mon, 15 Jan 2024 19:47:10 +0800
Subject: [PATCH 5/5] chore: delete log

---
 src/BlockHub/TableBlock/Table.vue     | 1 -
 src/BlockHub/TableBlock/TableBlock.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/BlockHub/TableBlock/Table.vue b/src/BlockHub/TableBlock/Table.vue
index 2bec463..12c2628 100644
--- a/src/BlockHub/TableBlock/Table.vue
+++ b/src/BlockHub/TableBlock/Table.vue
@@ -22,7 +22,6 @@ for (const row of data) {
 }
 
 const props = ref({ x, y, width, height, rotate })
-console.log('props', width, height)
 block.props.events.update.on(({ key, to }) => {
   const value = to as number
   const rectKey = key as BasicPropName
diff --git a/src/BlockHub/TableBlock/TableBlock.ts b/src/BlockHub/TableBlock/TableBlock.ts
index ec398f9..5fb14b2 100644
--- a/src/BlockHub/TableBlock/TableBlock.ts
+++ b/src/BlockHub/TableBlock/TableBlock.ts
@@ -12,7 +12,6 @@ export class TableBlock extends Block {
 
   constructor(x: number, y: number, row: number, column: number) {
     super('Table', x, y, DEFAULT_CELL_WIDTH * column, DEFAULT_CELL_HEIGHT * row)
-    console.log('con', DEFAULT_CELL_WIDTH * column, DEFAULT_CELL_HEIGHT * row)
     this._row = row
     this._column = column
     this._data = this._initData()