feat: add table dashed border #858

Hufe921 · Oct 26, 2024 · dffac63 · dffac63
1 parent 8eabd07
commit dffac63
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 1 deletion.
diff --git a/docs/en/guide/contextmenu-internal.md b/docs/en/guide/contextmenu-internal.md
@@ -30,6 +30,7 @@
 - Table borders
 - All borders
 - Borderless
+- Dashed border
 - Outer border
 - Td borders
   - Top border

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

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

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

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

diff --git a/src/editor/assets/images/table-border-dash.svg b/src/editor/assets/images/table-border-dash.svg
diff --git a/src/editor/core/contextmenu/menus/tableMenus.ts b/src/editor/core/contextmenu/menus/tableMenus.ts
@@ -13,6 +13,7 @@ const {
     BORDER,
     BORDER_ALL,
     BORDER_EMPTY,
+    BORDER_DASH,
     BORDER_EXTERNAL,
     BORDER_TD,
     BORDER_TD_TOP,
@@ -73,6 +74,15 @@ export const tableMenus: IRegisterContextMenu[] = [
           command.executeTableBorderType(TableBorder.EMPTY)
         }
       },
+      {
+        key: BORDER_DASH,
+        i18nPath: 'contextmenu.table.borderDash',
+        icon: 'border-dash',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableBorderType(TableBorder.DASH)
+        }
+      },
       {
         key: BORDER_EXTERNAL,
         i18nPath: 'contextmenu.table.borderExternal',

diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts
@@ -159,6 +159,10 @@ export class TableParticle {
     // 仅外边框
     const isExternalBorderType = borderType === TableBorder.EXTERNAL
     ctx.save()
+    // 虚线
+    if (borderType === TableBorder.DASH) {
+      ctx.setLineDash([3, 3])
+    }
     ctx.lineWidth = scale
     // 渲染边框
     if (!isEmptyBorderType) {

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

diff --git a/src/editor/core/i18n/lang/zh-CN.json b/src/editor/core/i18n/lang/zh-CN.json
@@ -46,6 +46,7 @@
       "border": "表格边框",
       "borderAll": "所有框线",
       "borderEmpty": "无框线",
+      "borderDash": "虚框线",
       "borderExternal": "外侧框线",
       "borderTd": "单元格边框",
       "borderTdTop": "上边框",

diff --git a/src/editor/dataset/constant/ContextMenu.ts b/src/editor/dataset/constant/ContextMenu.ts
@@ -32,6 +32,7 @@ export const INTERNAL_CONTEXT_MENU_KEY = {
     BORDER: 'border',
     BORDER_ALL: 'tableBorderAll',
     BORDER_EMPTY: 'tableBorderEmpty',
+    BORDER_DASH: 'tableBorderDash',
     BORDER_EXTERNAL: 'tableBorderExternal',
     BORDER_TD: 'tableBorderTd',
     BORDER_TD_TOP: 'tableBorderTdTop',

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