feat: dragging image element to adjust position #404

src/editor/assets/css/resizer/resizer.css

@@ -1,6 +1,7 @@
 .ce-resizer-selection {
   position: absolute;
   border: 1px solid;
+  pointer-events: none;
 }
 
 .ce-resizer-selection .resizer-handle {
@@ -12,6 +13,7 @@
   border-radius: 5px;
   border: 2px solid #ffffff;
   box-sizing: border-box;
+  pointer-events: initial;
 }
 
 .ce-resizer-selection .handle-0 {

src/editor/core/draw/Draw.ts

@@ -2063,4 +2063,15 @@ export class Draw {
     this.scrollObserver.removeEvent()
     this.selectionObserver.removeEvent()
   }
+
+  public clearSideEffect() {
+    // 预览工具组件
+    this.getPreviewer().clearResizer()
+    // 表格工具组件
+    this.getTableTool().dispose()
+    // 超链接弹窗
+    this.getHyperlinkParticle().clearHyperlinkPopup()
+    // 日期控件
+    this.getDateParticle().clearDatePicker()
+  }
 }

src/editor/core/draw/particle/previewer/Previewer.ts

@@ -59,8 +59,6 @@ export class Previewer {
     this.mousedownX = 0
     this.mousedownY = 0
     this.curHandleIndex = 0 // 默认右下角
-    // 图片预览
-    resizerSelection.ondblclick = this._dblclick.bind(this)
     this.previewerContainer = null
     this.previewerImage = null
   }
@@ -242,11 +240,6 @@ export class Previewer {
     evt.preventDefault()
   }
 
-  private _dblclick() {
-    this._drawPreviewer()
-    document.body.style.overflow = 'hidden'
-  }
-
   private _drawPreviewer() {
     const previewerContainer = document.createElement('div')
     previewerContainer.classList.add(`${EDITOR_PREFIX}-image-previewer`)
@@ -398,6 +391,11 @@ export class Previewer {
     this.resizerSize.innerText = `${Math.round(width)} × ${Math.round(height)}`
   }
 
+  public render() {
+    this._drawPreviewer()
+    document.body.style.overflow = 'hidden'
+  }
+
   public drawResizer(
     element: IElement,
     position: IElementPosition,

src/editor/core/event/handlers/click.ts

@@ -6,12 +6,17 @@ function dblclick(host: CanvasEvent, evt: MouseEvent) {
   const draw = host.getDraw()
   const LETTER_REG = draw.getLetterReg()
   const position = draw.getPosition()
+  const positionContext = position.getPositionByXY({
+    x: evt.offsetX,
+    y: evt.offsetY
+  })
+  // 图片预览
+  if (positionContext.isImage && positionContext.isDirectHit) {
+    draw.getPreviewer().render()
+    return
+  }
   // 切换区域
   if (draw.getIsPagingMode()) {
-    const positionContext = position.getPositionByXY({
-      x: evt.offsetX,
-      y: evt.offsetY
-    })
     if (!~positionContext.index && positionContext.zone) {
       draw.getZone().setZone(positionContext.zone)
       return

src/editor/core/event/handlers/mousedown.ts

@@ -5,6 +5,17 @@ import { isMod } from '../../../utils/hotkey'
 import { CheckboxControl } from '../../draw/control/checkbox/CheckboxControl'
 import { CanvasEvent } from '../CanvasEvent'
 
+export function setRangeCache(host: CanvasEvent) {
+  const draw = host.getDraw()
+  const position = draw.getPosition()
+  const rangeManager = draw.getRange()
+  // 缓存选区上下文信息
+  host.isAllowDrag = true
+  host.cacheRange = deepClone(rangeManager.getRange())
+  host.cacheElementList = draw.getElementList()
+  host.cachePositionList = position.getPositionList()
+}
+
 export function mousedown(evt: MouseEvent, host: CanvasEvent) {
   if (evt.button === MouseEventButton.RIGHT) return
   const draw = host.getDraw()
@@ -20,10 +31,7 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
         evt.offsetY
       )
       if (isPointInRange) {
-        host.isAllowDrag = true
+        setRangeCache(host)
-        host.cacheRange = deepClone(range)
-        host.cacheElementList = draw.getElementList()
-        host.cachePositionList = position.getPositionList()
         return
       }
     }
@@ -119,6 +127,8 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
     draw.getCursor().drawCursor({
       isShow: false
     })
+    // 点击图片允许拖拽调整位置
+    setRangeCache(host)
   }
   // 表格工具组件
   const tableTool = draw.getTableTool()

src/editor/core/event/handlers/mouseup.ts

@@ -30,10 +30,17 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     const cacheElementList = host.cacheElementList!
     const cachePositionList = host.cachePositionList!
     const range = rangeManager.getRange()
+    // 缓存选区的信息
+    const isCacheRangeCollapsed = cacheRange.startIndex === cacheRange.endIndex
+    // 选区闭合时，起始位置向前移动一位进行扩选
+    const cacheStartIndex = isCacheRangeCollapsed
+      ? cacheRange.startIndex - 1
+      : cacheRange.startIndex
+    const cacheEndIndex = cacheRange.endIndex
     // 是否需要拖拽-位置发生改变
     if (
-      range.startIndex >= cacheRange.startIndex &&
+      range.startIndex >= cacheStartIndex &&
-      range.endIndex <= cacheRange.endIndex
+      range.endIndex <= cacheEndIndex
     ) {
       rangeManager.replaceRange({
         ...cacheRange
@@ -47,14 +54,14 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     }
     // 是否是不可拖拽的控件结构元素
     const dragElementList = cacheElementList.slice(
-      cacheRange.startIndex + 1,
+      cacheStartIndex + 1,
-      cacheRange.endIndex + 1
+      cacheEndIndex + 1
     )
     const isContainControl = dragElementList.find(element => element.controlId)
     if (isContainControl) {
       // 仅允许 (最前/后元素不是控件 || 在控件前后 || 文本控件且是值) 拖拽
-      const cacheStartElement = cacheElementList[cacheRange.startIndex + 1]
+      const cacheStartElement = cacheElementList[cacheStartIndex + 1]
-      const cacheEndElement = cacheElementList[cacheRange.endIndex]
+      const cacheEndElement = cacheElementList[cacheEndIndex]
       const isAllowDragControl =
         ((!cacheStartElement.controlId ||
           cacheStartElement.controlComponent === ControlComponent.PREFIX) &&
@@ -106,10 +113,8 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     })
     formatElementContext(elementList, replaceElementList, range.startIndex)
     // 缓存拖拽选区开始结束id
-    const cacheRangeStartId = createDragId(
+    const cacheRangeStartId = createDragId(cacheElementList[cacheStartIndex])
-      cacheElementList[cacheRange.startIndex]
+    const cacheRangeEndId = createDragId(cacheElementList[cacheEndIndex])
-    )
-    const cacheRangeEndId = createDragId(cacheElementList[cacheRange.endIndex])
     // 设置拖拽值
     const replaceLength = replaceElementList.length
     let rangeStart = range.startIndex
@@ -168,9 +173,9 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     }
     // 重设上下文
     const startElement = elementList[range.startIndex]
-    const cacheStartElement = cacheElementList[cacheRange.startIndex]
+    const cacheStartElement = cacheElementList[cacheStartIndex]
     const startPosition = positionList[range.startIndex]
-    const cacheStartPosition = cachePositionList[cacheRange.startIndex]
+    const cacheStartPosition = cachePositionList[cacheStartIndex]
     const positionContext = position.getPositionContext()
     let positionContextIndex = positionContext.index
     if (positionContextIndex) {
@@ -194,7 +199,7 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     const rangeStartIndex = getElementIndexByDragId(rangeStartId, elementList)
     const rangeEndIndex = getElementIndexByDragId(rangeEndId, elementList)
     rangeManager.setRange(
-      rangeStartIndex,
+      isCacheRangeCollapsed ? rangeEndIndex : rangeStartIndex,
       rangeEndIndex,
       range.tableId,
       range.startTdIndex,
@@ -206,6 +211,7 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     draw.render({
       isSetCursor: false
     })
+    draw.clearSideEffect()
   } else if (host.isAllowDrag) {
     // 如果是允许拖拽不允许拖放则光标重置
     host.mousedown(evt)