feat: move control position by dragging #456

Hufe921 · Jun 10, 2024 · cdb0788 · cdb0788
1 parent ec7e076
commit cdb0788
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/src/editor/core/draw/control/Control.ts b/src/editor/core/draw/control/Control.ts
@@ -179,6 +179,23 @@ export class Control {
     return false
   }
 
+  // 是否元素包含完整控件元素
+  public getIsElementListContainFullControl(elementList: IElement[]): boolean {
+    if (!elementList.some(element => element.controlId)) return false
+    let prefixCount = 0
+    let postfixCount = 0
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e]
+      if (element.controlComponent === ControlComponent.PREFIX) {
+        prefixCount++
+      } else if (element.controlComponent === ControlComponent.POSTFIX) {
+        postfixCount++
+      }
+    }
+    if (!prefixCount || !postfixCount) return false
+    return prefixCount === postfixCount
+  }
+
   public getIsDisabledControl(): boolean {
     return !!this.activeControl?.getElement().control?.disabled
   }

diff --git a/src/editor/core/event/handlers/mouseup.ts b/src/editor/core/event/handlers/mouseup.ts
@@ -136,23 +136,36 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
       }
     }
     // 格式化元素
-    const editorOptions = draw.getOptions()
+    const control = draw.getControl()
     const elementList = draw.getElementList()
+    // 是否排除控件属性（1.不包含控件 2.新位置在控件内 3.选区不包含完整控件）
+    const isOmitControlAttr =
+      !isContainControl ||
+      !!elementList[range.startIndex].controlId ||
+      !control.getIsElementListContainFullControl(dragElementList)
+    const editorOptions = draw.getOptions()
+    // 元素属性复制（1.文本提取样式及相关上下文 2.非文本排除相关上下文）
     const replaceElementList = dragElementList.map(el => {
       if (!el.type || el.type === ElementType.TEXT) {
         const newElement: IElement = {
           value: el.value
         }
-        EDITOR_ELEMENT_STYLE_ATTR.forEach(attr => {
+        const copyAttr = EDITOR_ELEMENT_STYLE_ATTR
+        if (!isOmitControlAttr) {
+          copyAttr.push(...CONTROL_CONTEXT_ATTR)
+        }
+        copyAttr.forEach(attr => {
           const value = el[attr] as never
           if (value !== undefined) {
             newElement[attr] = value
           }
         })
         return newElement
       } else {
-        // 移除控件上下文属性
-        const newElement = omitObject(deepClone(el), CONTROL_CONTEXT_ATTR)
+        let newElement = deepClone(el)
+        if (isOmitControlAttr) {
+          newElement = omitObject(newElement, CONTROL_CONTEXT_ATTR)
+        }
         formatElementList([newElement], {
           isHandleFirstElement: false,
           editorOptions
@@ -170,7 +183,6 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     const replaceLength = replaceElementList.length
     let rangeStart = range.startIndex
     let rangeEnd = rangeStart + replaceLength
-    const control = draw.getControl()
     const activeControl = control.getActiveControl()
     if (
       activeControl &&

diff --git a/src/main.ts b/src/main.ts
@@ -1686,7 +1686,8 @@ window.onload = function () {
       'table',
       'hyperlink',
       'separator',
-      'page-break'
+      'page-break',
+      'control'
     ]
     // 菜单操作权限
     disableMenusInControlContext.forEach(menu => {