feat: add table cell border type #389

2 years ago · 3253f3708e
parent 981e4582f9
commit 3253f3708e
15 changed files with 98 additions and 5 deletions
--- a/docs/en/guide/contextmenu-internal.md
+++ b/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
--- a/docs/en/guide/i18n.md
+++ b/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
    }
--- a/docs/guide/contextmenu-internal.md
+++ b/docs/guide/contextmenu-internal.md
@ -28,6 +28,13 @@
  - 所有框线
  - 无框线
  - 外侧框线
+  - 单元格边框
+    - 上边框
+    - 右边框
+    - 下边框
+    - 左边框
+    - 正斜线
+    - 反斜线
 - 垂直对齐
  - 顶端对齐
  - 垂直居中
--- a/docs/guide/i18n.md
+++ b/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
    }
--- a/src/editor/assets/css/contextmenu/contextmenu.css
+++ b/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);
 }
--- a/src/editor/assets/images/table-border-td-bottom.svg
+++ b/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>
--- a/src/editor/assets/images/table-border-td-left.svg
+++ b/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>
--- a/src/editor/assets/images/table-border-td-right.svg
+++ b/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>
--- a/src/editor/assets/images/table-border-td-top.svg
+++ b/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>
--- a/src/editor/core/contextmenu/menus/tableMenus.ts
+++ b/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',
--- a/src/editor/core/draw/particle/table/TableParticle.ts
+++ b/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)
--- a/src/editor/core/i18n/lang/en.json
+++ b/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",
-      "borderTdBack": "back"
+      "borderTdLeft": "Left",
+      "borderTdForward": "Forward",
+      "borderTdBack": "Back"
    }
  },
  "datePicker": {
--- a/src/editor/core/i18n/lang/zh-CN.json
+++ b/src/editor/core/i18n/lang/zh-CN.json
@ -45,7 +45,10 @@
      "borderEmpty": "无框线",
      "borderExternal": "外侧框线",
      "borderTd": "单元格边框",
+      "borderTdTop": "上边框",
+      "borderTdRight": "右边框",
      "borderTdBottom": "下边框",
+      "borderTdLeft": "左边框",
      "borderTdForward": "正斜线",
      "borderTdBack": "反斜线"
    }
--- a/src/editor/dataset/constant/ContextMenu.ts
+++ b/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',
--- a/src/editor/dataset/enum/table/Table.ts
+++ b/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 {
				`@ -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>`