feat: insert Table

src/BlockHub/TableBlock/Table.vue

@@ -3,32 +3,37 @@ 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)
   }
   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 })
+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 +42,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>

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,7 @@ 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)
     this._row = row
     this._column = column
     this._data = this._initData()
@@ -34,6 +34,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 }
   }

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

src/Lang/Locale/en-US/ToolBar.json

@@ -55,7 +55,7 @@
       },
       "table": {
         "title": "Table",
-        "dialogTitle": "Insert Table"
+        "insert": "Insert Table"
       },
       "picture": {
         "title": "Picture",

src/Lang/Locale/zh-CN/ToolBar.json

@@ -55,7 +55,7 @@
       },
       "table": {
         "title": "表格",
-        "dialogTitle": "插入表格"
+        "insert": "插入表格"
       },
       "picture": {
         "title": "图像",

src/UserInterface/ToolBar/components/Insert/Table.vue

@@ -1,23 +1,58 @@
 <script setup lang="ts">
+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'
 
+const curRowIndex = ref<number>(0)
+const curColIndex = ref<number>(0)
+
 const insertTable = () => {
-  const block = new TableBlock(300, 200, 4, 3)
+  const block = new TableBlock(100, 100, curRowIndex.value, curColIndex.value)
   slideManager.currentSlide.addBlock(block)
+  selectionManager.focus(block)
+  curRowIndex.value = 0
+  curColIndex.value = 0
+}
+
+const mouseOverHandler = (rowIndex: number, colIndex: number) => {
+  curRowIndex.value = rowIndex
+  curColIndex.value = colIndex
+}
+
+const mouseLeaveHandler = () => {
+  curRowIndex.value = 0
+  curColIndex.value = 0
 }
 </script>
 
 <template>
   <ButtonGroup :name="$t('ToolBar.insert.table.title')">
-    <ToolButton :clickHandler="insertTable" :hasMenu="true">
+    <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 @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"
+                :key="`${rowIndex}-${colIndex}`"
+                class="w-[17px] h-[17px] border"
+                :class="rowIndex <= curRowIndex && colIndex <= curColIndex ? 'bg-blue-100 border-blue-400' : ''"
+                @mouseover="mouseOverHandler(rowIndex, colIndex)"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </template>
     </ToolButton>
   </ButtonGroup>
 </template>