feat: add table internal border #869

Hufe921 · Nov 8, 2024 · 5cc4f13 · 5cc4f13
1 parent 85cc2b7
commit 5cc4f13
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 4 deletions.
diff --git a/docs/en/guide/contextmenu-internal.md b/docs/en/guide/contextmenu-internal.md
@@ -32,6 +32,7 @@
 - Borderless
 - Dashed border
 - Outer border
+- Internal border
 - Td borders
   - Top border
   - Right border

diff --git a/docs/en/guide/i18n.md b/docs/en/guide/i18n.md
@@ -67,6 +67,7 @@ interface ILang {
       borderEmpty: string
       borderDash: string
       borderExternal: string
+      borderInternal: string
       borderTd: string
       borderTdTop: string
       borderTdRight: string

diff --git a/docs/guide/contextmenu-internal.md b/docs/guide/contextmenu-internal.md
@@ -32,6 +32,7 @@
   - 无框线
   - 虚框线
   - 外侧框线
+  - 内侧框线
   - 单元格边框
     - 上边框
     - 右边框

diff --git a/docs/guide/i18n.md b/docs/guide/i18n.md
@@ -66,6 +66,7 @@ interface ILang {
       borderEmpty: string
       borderDash: string
       borderExternal: string
+      borderInternal: string
       borderTd: string
       borderTdTop: string
       borderTdRight: string

diff --git a/src/editor/assets/css/contextmenu/contextmenu.css b/src/editor/assets/css/contextmenu/contextmenu.css
@@ -163,6 +163,10 @@
   background-image: url(../../../assets/images/table-border-external.svg);
 }
 
+.ce-contextmenu-border-internal {
+  background-image: url(../../../assets/images/table-border-internal.svg);
+}
+
 .ce-contextmenu-border-td {
   background-image: url(../../../assets/images/table-border-td.svg);
 }

diff --git a/src/editor/assets/images/table-border-internal.svg b/src/editor/assets/images/table-border-internal.svg
diff --git a/src/editor/core/contextmenu/menus/tableMenus.ts b/src/editor/core/contextmenu/menus/tableMenus.ts
@@ -15,6 +15,7 @@ const {
     BORDER_EMPTY,
     BORDER_DASH,
     BORDER_EXTERNAL,
+    BORDER_INTERNAL,
     BORDER_TD,
     BORDER_TD_TOP,
     BORDER_TD_LEFT,
@@ -92,6 +93,15 @@ export const tableMenus: IRegisterContextMenu[] = [
           command.executeTableBorderType(TableBorder.EXTERNAL)
         }
       },
+      {
+        key: BORDER_INTERNAL,
+        i18nPath: 'contextmenu.table.borderInternal',
+        icon: 'border-internal',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableBorderType(TableBorder.INTERNAL)
+        }
+      },
       {
         key: BORDER_TD,
         i18nPath: 'contextmenu.table.borderTd',

diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts
@@ -158,14 +158,16 @@ export class TableParticle {
     const isEmptyBorderType = borderType === TableBorder.EMPTY
     // 仅外边框
     const isExternalBorderType = borderType === TableBorder.EXTERNAL
+    // 内边框
+    const isInternalBorderType = borderType === TableBorder.INTERNAL
     ctx.save()
     // 虚线
     if (borderType === TableBorder.DASH) {
       ctx.setLineDash([3, 3])
     }
     ctx.lineWidth = scale
     // 渲染边框
-    if (!isEmptyBorderType) {
+    if (!isEmptyBorderType && !isInternalBorderType) {
       this._drawOuterBorder({
         ctx,
         startX,
@@ -221,9 +223,22 @@ export class TableParticle {
         }
         // 表格线
         if (!isEmptyBorderType && !isExternalBorderType) {
-          ctx.moveTo(x, y)
-          ctx.lineTo(x, y + height)
-          ctx.lineTo(x - width, y + height)
+          // 右边框
+          if (
+            !isInternalBorderType ||
+            td.colIndex! + td.colspan < colgroup.length
+          ) {
+            ctx.moveTo(x, y)
+            ctx.lineTo(x, y + height)
+          }
+          // 下边框
+          if (
+            !isInternalBorderType ||
+            td.rowIndex! + td.rowspan < trList.length
+          ) {
+            ctx.moveTo(x, y + height)
+            ctx.lineTo(x - width, y + height)
+          }
           ctx.stroke()
         }
         ctx.translate(-0.5, -0.5)

diff --git a/src/editor/core/i18n/lang/en.json b/src/editor/core/i18n/lang/en.json
@@ -48,6 +48,7 @@
       "borderEmpty": "Empty",
       "borderDash": "Dash",
       "borderExternal": "External",
+      "borderInternal": "Internal",
       "borderTd": "Table cell border",
       "borderTdTop": "Top",
       "borderTdRight": "Right",

diff --git a/src/editor/core/i18n/lang/zh-CN.json b/src/editor/core/i18n/lang/zh-CN.json
@@ -48,6 +48,7 @@
       "borderEmpty": "无框线",
       "borderDash": "虚框线",
       "borderExternal": "外侧框线",
+      "borderInternal": "内侧框线",
       "borderTd": "单元格边框",
       "borderTdTop": "上边框",
       "borderTdRight": "右边框",

diff --git a/src/editor/dataset/constant/ContextMenu.ts b/src/editor/dataset/constant/ContextMenu.ts
@@ -34,6 +34,7 @@ export const INTERNAL_CONTEXT_MENU_KEY = {
     BORDER_EMPTY: 'tableBorderEmpty',
     BORDER_DASH: 'tableBorderDash',
     BORDER_EXTERNAL: 'tableBorderExternal',
+    BORDER_INTERNAL: 'tableBorderInternal',
     BORDER_TD: 'tableBorderTd',
     BORDER_TD_TOP: 'tableBorderTdTop',
     BORDER_TD_RIGHT: 'tableBorderTdRight',

diff --git a/src/editor/dataset/enum/table/Table.ts b/src/editor/dataset/enum/table/Table.ts
@@ -2,6 +2,7 @@ export enum TableBorder {
   ALL = 'all',
   EMPTY = 'empty',
   EXTERNAL = 'external',
+  INTERNAL = 'internal',
   DASH = 'dash'
 }