feat:实现分割线可自定义设置大小及颜色 线型也可以添加双线粗细 #674

index.html

@@ -258,6 +258,11 @@
                 <i></i>
               </li>
             </ul>
+            <div class="more">
+              <div>颜色:<input type="color" id="color" /></div>
+              <div>粗细(px):<input type="tel" id="lineWidth" value="1" /></div>
+              <div class="dialog-menu"><button class="confirm" type="submit">确定</button><button class="cancel">取消</button></div>
+            </div>
           </div>
         </div>
         <div class="menu-item__watermark">

src/editor/core/command/CommandAdapt.ts

@@ -1005,7 +1005,7 @@ export class CommandAdapt {
     })
   }
 
-  public separator(payload: number[]) {
+  public separator(payload: number[],lineWidth:number|undefined,color :string|undefined) {
     const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const activeControl = this.control.getActiveControl()
@@ -1019,17 +1019,21 @@ export class CommandAdapt {
     if (endElement && endElement.type === ElementType.SEPARATOR) {
       if (
         endElement.dashArray &&
-        endElement.dashArray.join() === payload.join()
+        endElement.dashArray.join() === payload.join() && endElement.color === color && endElement.lineWidth === lineWidth
       ) {
         return
       }
       curIndex = endIndex
       endElement.dashArray = payload
+      endElement.color = color
+      endElement.lineWidth = lineWidth
     } else {
       const newElement: IElement = {
         value: WRAP,
         type: ElementType.SEPARATOR,
-        dashArray: payload
+        dashArray: payload,
+        lineWidth:lineWidth,
+        color:color
       }
       // 从行头增加分割线
       formatElementContext(elementList, [newElement], startIndex, {

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

@@ -20,7 +20,7 @@ export class SeparatorParticle {
       scale,
       separator: { lineWidth, strokeStyle }
     } = this.options
-    ctx.lineWidth = lineWidth * scale
+    ctx.lineWidth = (element.lineWidth ||lineWidth) * scale
     ctx.strokeStyle = element.color || strokeStyle
     if (element.dashArray?.length) {
       ctx.setLineDash(element.dashArray)

src/editor/dataset/constant/Element.ts

@@ -43,6 +43,7 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
   'size',
   'bold',
   'color',
+  'lineWidth',
   'italic',
   'highlight',
   'underline',

src/editor/interface/Element.ts

@@ -20,6 +20,7 @@ export interface IElementBasic {
   value: string
   extension?: unknown
   externalId?: string
+  lineWidth?: number
 }
 
 export interface IElementStyle {

src/editor/interface/Row.ts

@@ -5,6 +5,7 @@ export type IRowElement = IElement & {
   metrics: IElementMetrics
   style: string
   left?: number
+  lineWidth?: number
 }
 
 export interface IRow {

src/main.ts

@@ -500,21 +500,60 @@ window.onload = function () {
   const separatorOptionDom =
     separatorDom.querySelector<HTMLDivElement>('.options')!
   separatorDom.onclick = function () {
-    console.log('separator')
-    separatorOptionDom.classList.toggle('visible')
+    console.log('separator1')
+    separatorOptionDom.classList.add('visible')
   }
+  const separatorConfirmDom =separatorDom.querySelector<HTMLDivElement>('.confirm')!
+  const separatorCancelDom =separatorDom.querySelector<HTMLDivElement>('.cancel')!
+  let payload: number[] = []
   separatorOptionDom.onmousedown = function (evt) {
-    let payload: number[] = []
+
+    separatorOptionDom
+    .querySelectorAll('li')
+    .forEach(li => li.classList.remove('active'))
     const li = evt.target as HTMLLIElement
+    li.classList.add('active')
     const separatorDash = li.dataset.separator?.split(',').map(Number)
     if (separatorDash) {
       const isSingleLine = separatorDash.every(d => d === 0)
       if (!isSingleLine) {
         payload = separatorDash
       }
     }
-    instance.command.executeSeparator(payload)
   }
+  // 分割线提交
+  separatorConfirmDom.onclick = function (event) {
+    event.stopPropagation()
+    const colorDom = separatorDom.querySelector<HTMLInputElement>('#color')
+    const lineWidthDown = separatorDom.querySelector<HTMLInputElement>('#lineWidth')
+    const linewidth= Number(lineWidthDown?.value)
+    const color=colorDom?.value
+    instance.command.executeSeparator(payload,linewidth,color)
+    if (colorDom) {
+      colorDom.value = ''
+    }
+    if (lineWidthDown) {
+      lineWidthDown.value = '1'
+    }
+    console.log('separator2')
+    payload = []
+    separatorOptionDom.classList.remove('visible')
+  }
+  separatorCancelDom.onclick = function (event) {
+    event.stopPropagation()
+    const colorDom = separatorDom.querySelector<HTMLInputElement>('#color')
+    const lineWidthDown = separatorDom.querySelector<HTMLInputElement>('#lineWidth')
+    if (colorDom) {
+      colorDom.value = ''
+    }
+    if (lineWidthDown) {
+      lineWidthDown.value = '1'
+    }
+    console.log('separator3')
+    payload = []
+    separatorOptionDom.classList.remove('visible')
+  }
+
 
   const pageBreakDom = document.querySelector<HTMLDivElement>(
     '.menu-item__page-break'
@@ -1504,9 +1543,6 @@ window.onload = function () {
     payload.type === ElementType.SEPARATOR
       ? separatorDom.classList.add('active')
       : separatorDom.classList.remove('active')
-    separatorOptionDom
-      .querySelectorAll('li')
-      .forEach(li => li.classList.remove('active'))
     if (payload.type === ElementType.SEPARATOR) {
       const separator = payload.dashArray.join(',') || '0,0'
       const curSeparatorDom = separatorOptionDom.querySelector<HTMLLIElement>(

src/style.css

@@ -516,6 +516,19 @@ ul {
   background-image: url('./assets/images/line-dash-dot-dot.svg');
 }
 
+.menu-item__separator .more input{
+width: 100%;
+}
+.menu-item__separator .more div span{
+  width: 30px;
+}
+.menu-item__separator .more .dialog-menu{
+  margin-top: 20px;
+}
+.menu-item__separator .more .dialog-menu button:last-child{
+  margin-left: 8px;
+}
+
 .menu-item__watermark>i {
   background-image: url('./assets/images/watermark.svg');
 }