feat: add table cell border type #389

docs/en/guide/contextmenu-internal.md

@@ -28,6 +28,13 @@
 - All borders
 - Borderless
 - Outer border
+- Td borders
+  - Top border
+  - Right border
+  - Bottom border
+  - Left border
+  - Forward border
+  - Back border
 - Vertical alignment
 - Top alignment
 - Center vertically

docs/en/guide/i18n.md

@@ -64,7 +64,10 @@ interface ILang {
       borderEmpty: string
       borderExternal: string
       borderTd: string
+      borderTdTop: string
+      borderTdRight: string
       borderTdBottom: string
+      borderTdLeft: string
       borderTdForward: string
       borderTdBack: string
     }

docs/guide/contextmenu-internal.md

@@ -28,6 +28,13 @@
   - 所有框线
   - 无框线
   - 外侧框线
+  - 单元格边框
+    - 上边框
+    - 右边框
+    - 下边框
+    - 左边框
+    - 正斜线
+    - 反斜线
 - 垂直对齐
   - 顶端对齐
   - 垂直居中

docs/guide/i18n.md

@@ -64,7 +64,10 @@ interface ILang {
       borderEmpty: string
       borderExternal: string
       borderTd: string
+      borderTdTop: string
+      borderTdRight: string
       borderTdBottom: string
+      borderTdLeft: string
       borderTdForward: string
       borderTdBack: string
     }

src/editor/assets/css/contextmenu/contextmenu.css

@@ -163,10 +163,22 @@
   background-image: url(../../../assets/images/table-border-td.svg);
 }
 
+.ce-contextmenu-border-td-top {
+  background-image: url(../../../assets/images/table-border-td-top.svg);
+}
+
+.ce-contextmenu-border-td-left {
+  background-image: url(../../../assets/images/table-border-td-left.svg);
+}
+
 .ce-contextmenu-border-td-bottom {
   background-image: url(../../../assets/images/table-border-td-bottom.svg);
 }
 
+.ce-contextmenu-border-td-right {
+  background-image: url(../../../assets/images/table-border-td-right.svg);
+}
+
 .ce-contextmenu-border-td-forward {
   background-image: url(../../../assets/images/table-border-td-forward.svg);
 }

src/editor/assets/images/table-border-td-bottom.svg

@@ -1 +1 @@
-<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" d="M2.5 8.5 h12"/></svg>
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M2.5 14 h12"/></svg>

src/editor/assets/images/table-border-td-left.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M3 3 v11"/></svg>

src/editor/assets/images/table-border-td-right.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M14 3 v11"/></svg>

src/editor/assets/images/table-border-td-top.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M2.5 3 h12"/></svg>

src/editor/core/contextmenu/menus/tableMenus.ts

@@ -14,7 +14,10 @@ const {
     BORDER_EMPTY,
     BORDER_EXTERNAL,
     BORDER_TD,
+    BORDER_TD_TOP,
+    BORDER_TD_LEFT,
     BORDER_TD_BOTTOM,
+    BORDER_TD_RIGHT,
     BORDER_TD_BACK,
     BORDER_TD_FORWARD,
     VERTICAL_ALIGN,
@@ -80,6 +83,24 @@ export const tableMenus: IRegisterContextMenu[] = [
         icon: 'border-td',
         when: () => true,
         childMenus: [
+          {
+            key: BORDER_TD_TOP,
+            i18nPath: 'contextmenu.table.borderTdTop',
+            icon: 'border-td-top',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdBorderType(TdBorder.TOP)
+            }
+          },
+          {
+            key: BORDER_TD_RIGHT,
+            i18nPath: 'contextmenu.table.borderTdRight',
+            icon: 'border-td-right',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdBorderType(TdBorder.RIGHT)
+            }
+          },
           {
             key: BORDER_TD_BOTTOM,
             i18nPath: 'contextmenu.table.borderTdBottom',
@@ -89,6 +110,15 @@ export const tableMenus: IRegisterContextMenu[] = [
               command.executeTableTdBorderType(TdBorder.BOTTOM)
             }
           },
+          {
+            key: BORDER_TD_LEFT,
+            i18nPath: 'contextmenu.table.borderTdLeft',
+            icon: 'border-td-left',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdBorderType(TdBorder.LEFT)
+            }
+          },
           {
             key: BORDER_TD_FORWARD,
             i18nPath: 'contextmenu.table.borderTdForward',

src/editor/core/draw/particle/table/TableParticle.ts

@@ -189,13 +189,29 @@ export class TableParticle {
         ctx.translate(0.5, 0.5)
         // 绘制线条
         ctx.beginPath()
+        // 单元格边框
+        if (td.borderType === TdBorder.TOP) {
+          ctx.moveTo(x - width, y)
+          ctx.lineTo(x, y)
+          ctx.stroke()
+        }
+        if (td.borderType === TdBorder.RIGHT) {
+          ctx.moveTo(x, y)
+          ctx.lineTo(x, y + height)
+          ctx.stroke()
+        }
         if (td.borderType === TdBorder.BOTTOM) {
           ctx.moveTo(x, y + height)
           ctx.lineTo(x - width, y + height)
           ctx.stroke()
         }
+        if (td.borderType === TdBorder.LEFT) {
+          ctx.moveTo(x - width, y)
+          ctx.lineTo(x - width, y + height)
+          ctx.stroke()
+        }
+        // 表格线
         if (!isEmptyBorderType && !isExternalBorderType) {
-          ctx.moveTo(x, y + height)
           ctx.moveTo(x, y)
           ctx.lineTo(x, y + height)
           ctx.lineTo(x - width, y + height)

src/editor/core/i18n/lang/en.json

@@ -45,9 +45,12 @@
       "borderEmpty": "Empty",
       "borderExternal": "External",
       "borderTd": "Table cell border",
+      "borderTdTop": "Top",
+      "borderTdRight": "Right",
       "borderTdBottom": "Bottom",
-      "borderTdForward": "forward",
+      "borderTdLeft": "Left",
-      "borderTdBack": "back"
+      "borderTdForward": "Forward",
+      "borderTdBack": "Back"
     }
   },
   "datePicker": {

src/editor/core/i18n/lang/zh-CN.json

@@ -45,7 +45,10 @@
       "borderEmpty": "无框线",
       "borderExternal": "外侧框线",
       "borderTd": "单元格边框",
+      "borderTdTop": "上边框",
+      "borderTdRight": "右边框",
       "borderTdBottom": "下边框",
+      "borderTdLeft": "左边框",
       "borderTdForward": "正斜线",
       "borderTdBack": "反斜线"
     }

src/editor/dataset/constant/ContextMenu.ts

@@ -31,7 +31,10 @@ export const INTERNAL_CONTEXT_MENU_KEY = {
     BORDER_EMPTY: 'tableBorderEmpty',
     BORDER_EXTERNAL: 'tableBorderExternal',
     BORDER_TD: 'tableBorderTd',
+    BORDER_TD_TOP: 'tableBorderTdTop',
+    BORDER_TD_RIGHT: 'tableBorderTdRight',
     BORDER_TD_BOTTOM: 'tableBorderTdBottom',
+    BORDER_TD_LEFT: 'tableBorderTdLeft',
     BORDER_TD_FORWARD: 'tableBorderTdForward',
     BORDER_TD_BACK: 'tableBorderTdBack',
     VERTICAL_ALIGN: 'tableVerticalAlign',

src/editor/dataset/enum/table/Table.ts

@@ -5,7 +5,10 @@ export enum TableBorder {
 }
 
 export enum TdBorder {
-  BOTTOM = 'bottom'
+  TOP = 'top',
+  RIGHT = 'right',
+  BOTTOM = 'bottom',
+  LEFT = 'left'
 }
 
 export enum TdSlash {