feat:add separator

index.html

@@ -120,6 +120,9 @@
         <div class="menu-item__hyperlink">
           <i></i>
         </div>
+        <div class="menu-item__separator">
+          <i></i>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">

src/assets/images/separator.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 2.8l2.01 2.506c.2.25.58.25.78 0L8.7 2.799l2.01 2.507c.2.25.58.25.78 0l2.4-2.993-.78-.626-2.01 2.507-2.01-2.507a.5.5 0 00-.78 0L6.3 4.194 4.29 1.687a.5.5 0 00-.78 0l-2.4 3 .78.625L3.9 2.8zM1 8h13v1H1zm0 4h3v1H1zm5 0h3v1H6zm5 0h3v1h-3z" fill="#3D4757"/></svg>

src/editor/core/command/Command.ts

@@ -40,6 +40,7 @@ export class Command {
   private static cancelMergeTableCell: Function
   private static image: Function
   private static hyperlink: Function
+  private static separator: Function
   private static search: Function
   private static print: Function
   private static pageScaleRecovery: Function
@@ -82,6 +83,7 @@ export class Command {
     Command.cancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt)
     Command.image = adapt.image.bind(adapt)
     Command.hyperlink = adapt.hyperlink.bind(adapt)
+    Command.separator = adapt.separator.bind(adapt)
     Command.search = adapt.search.bind(adapt)
     Command.print = adapt.print.bind(adapt)
     Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt)
@@ -233,6 +235,10 @@ export class Command {
     return Command.image(payload)
   }
 
+  public executeSeparator() {
+    return Command.separator()
+  }
+
   public executeSearch(payload: string | null) {
     return Command.search(payload)
   }

src/editor/core/command/CommandAdapt.ts

@@ -890,6 +890,22 @@ export class CommandAdapt {
     this.draw.render({ curIndex })
   }
 
+  public separator() {
+    const { startIndex, endIndex } = this.range.getRange()
+    if (!~startIndex && !~endIndex) return
+    const elementList = this.draw.getElementList()
+    // 光标后是否存在分割线
+    if (elementList[endIndex]?.type === ElementType.SEPARATOR) return
+    const element: IElement = {
+      value: '\n',
+      type: ElementType.SEPARATOR
+    }
+    const curIndex = startIndex + 1
+    elementList.splice(curIndex, 0, element)
+    this.range.setRange(curIndex, curIndex)
+    this.draw.render({ curIndex })
+  }
+
   public image(payload: IDrawImagePayload) {
     const { startIndex, endIndex } = this.range.getRange()
     if (!~startIndex && !~endIndex) return

src/editor/core/draw/Draw.ts

@@ -30,6 +30,7 @@ import { HyperlinkParticle } from "./particle/HyperlinkParticle"
 import { Header } from "./frame/Header"
 import { SuperscriptParticle } from "./particle/Superscript"
 import { SubscriptParticle } from "./particle/Subscript"
+import { SeparatorParticle } from "./particle/Separator"
 
 export class Draw {
 
@@ -60,6 +61,7 @@ export class Draw {
   private pageNumber: PageNumber
   private header: Header
   private hyperlinkParticle: HyperlinkParticle
+  private separatorParticle: SeparatorParticle
   private superscriptParticle: SuperscriptParticle
   private subscriptParticle: SubscriptParticle
 
@@ -102,6 +104,7 @@ export class Draw {
     this.pageNumber = new PageNumber(this)
     this.header = new Header(this)
     this.hyperlinkParticle = new HyperlinkParticle(this)
+    this.separatorParticle = new SeparatorParticle(this)
     this.superscriptParticle = new SuperscriptParticle()
     this.subscriptParticle = new SubscriptParticle()
 
@@ -443,6 +446,11 @@ export class Draw {
         metrics.height = elementHeight
         metrics.boundingBoxDescent = elementHeight
         metrics.boundingBoxAscent = 0
+      } else if (element.type === ElementType.SEPARATOR) {
+        metrics.width = innerWidth
+        metrics.height = this.options.defaultSize
+        metrics.boundingBoxAscent = -rowMargin
+        metrics.boundingBoxDescent = -rowMargin
       } else {
         // 设置上下标真实字体尺寸
         const size = element.size || this.options.defaultSize
@@ -570,6 +578,8 @@ export class Draw {
         } else if (element.type === ElementType.SUBSCRIPT) {
           this.textParticle.complete()
           this.subscriptParticle.render(ctx, element, x, y + offsetY)
+        } else if (element.type === ElementType.SEPARATOR) {
+          this.separatorParticle.render(ctx, element, x, y)
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY)
         }

src/editor/core/draw/particle/Separator.ts

@@ -0,0 +1,26 @@
+import { IRowElement } from "../../../interface/Row"
+import { Draw } from "../Draw"
+
+export class SeparatorParticle {
+
+  private draw: Draw
+
+  constructor(draw: Draw) {
+    this.draw = draw
+  }
+
+  public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) {
+    const innerWidth = this.draw.getInnerWidth()
+    ctx.save()
+    if (element.color) {
+      ctx.strokeStyle = element.color
+    }
+    ctx.translate(0.5, 0.5)
+    ctx.beginPath()
+    ctx.moveTo(x, y)
+    ctx.lineTo(x + innerWidth, y)
+    ctx.stroke()
+    ctx.restore()
+  }
+
+}

src/editor/dataset/enum/Element.ts

@@ -4,5 +4,6 @@ export enum ElementType {
   TABLE = 'table',
   HYPERLINK = 'hyperlink',
   SUPERSCRIPT = 'superscript',
-  SUBSCRIPT = 'subscript'
+  SUBSCRIPT = 'subscript',
+  SEPARATOR = 'separator'
 }

src/main.ts

@@ -63,7 +63,11 @@ window.onload = function () {
       size: 16
     }
   })
-  data.splice(137, 0, {
+  data.splice(8, 0, {
+    value: '\n',
+    type: ElementType.SEPARATOR
+  })
+  data.splice(138, 0, {
     type: ElementType.HYPERLINK,
     value: '',
     valueList: [{
@@ -81,16 +85,16 @@ window.onload = function () {
     }],
     url: 'https://hufe.club/canvas-editor'
   })
-  data.splice(378, 0, {
-    value: '危',
+  data.splice(379, 0, {
+    value: '∆',
     color: '#FF0000',
     type: ElementType.SUBSCRIPT
   })
-  data.splice(466, 0, {
+  data.splice(467, 0, {
     value: '9',
     type: ElementType.SUPERSCRIPT
   })
-  data.splice(592, 0, {
+  data.splice(593, 0, {
     value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`,
     width: 89,
     height: 32,
@@ -460,6 +464,11 @@ window.onload = function () {
       }
     })
   }
+  const separatorDom = document.querySelector<HTMLDivElement>('.menu-item__separator')!
+  separatorDom.onclick = function () {
+    console.log('separator')
+    instance.command.executeSeparator()
+  }
   const collspanDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')
   document.querySelector<HTMLDivElement>('.menu-item__search')!.onclick = function () {

src/style.css

@@ -369,6 +369,10 @@ ul {
   background-image: url('./assets/images/hyperlink.svg');
 }
 
+.menu-item__separator i {
+  background-image: url('./assets/images/separator.svg');
+}
+
 .menu-item__search {
   position: relative;
 }