diff --git a/src/BlockHub/TableBlock/Table.vue b/src/BlockHub/TableBlock/Table.vue index 3597fb2..12c2628 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>) -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,19 @@ for (const row of block.data) { tableData.value.push(rowData as Array) } -const tableRef = ref(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 }) @@ -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`, }" >
diff --git a/src/BlockHub/TableBlock/TableBlock.ts b/src/BlockHub/TableBlock/TableBlock.ts index 7f61654..5fb14b2 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,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 } } 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/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/components/Insert/Table.vue b/src/UserInterface/ToolBar/components/Insert/Table.vue index 03a5114..09a4502 100644 --- a/src/UserInterface/ToolBar/components/Insert/Table.vue +++ b/src/UserInterface/ToolBar/components/Insert/Table.vue @@ -1,23 +1,58 @@