diff --git a/src/editor/assets/css/resizer/resizer.css b/src/editor/assets/css/resizer/resizer.css index 3714150..eb7bb56 100644 --- a/src/editor/assets/css/resizer/resizer.css +++ b/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 { diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 0a2dbc9..902d4bb 100644 --- a/src/editor/core/draw/Draw.ts +++ b/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() + } } diff --git a/src/editor/core/draw/particle/previewer/Previewer.ts b/src/editor/core/draw/particle/previewer/Previewer.ts index 67ad036..10ead62 100644 --- a/src/editor/core/draw/particle/previewer/Previewer.ts +++ b/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, diff --git a/src/editor/core/event/handlers/click.ts b/src/editor/core/event/handlers/click.ts index 1b31a6c..45af26b 100644 --- a/src/editor/core/event/handlers/click.ts +++ b/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 diff --git a/src/editor/core/event/handlers/mousedown.ts b/src/editor/core/event/handlers/mousedown.ts index 217bf47..fcbc11e 100644 --- a/src/editor/core/event/handlers/mousedown.ts +++ b/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 - host.cacheRange = deepClone(range) - host.cacheElementList = draw.getElementList() - host.cachePositionList = position.getPositionList() + setRangeCache(host) return } } @@ -119,6 +127,8 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) { draw.getCursor().drawCursor({ isShow: false }) + // 点击图片允许拖拽调整位置 + setRangeCache(host) } // 表格工具组件 const tableTool = draw.getTableTool() diff --git a/src/editor/core/event/handlers/mouseup.ts b/src/editor/core/event/handlers/mouseup.ts index f643bb4..61ac50f 100644 --- a/src/editor/core/event/handlers/mouseup.ts +++ b/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.endIndex <= cacheRange.endIndex + range.startIndex >= cacheStartIndex && + range.endIndex <= cacheEndIndex ) { rangeManager.replaceRange({ ...cacheRange @@ -47,14 +54,14 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) { } // 是否是不可拖拽的控件结构元素 const dragElementList = cacheElementList.slice( - cacheRange.startIndex + 1, - cacheRange.endIndex + 1 + cacheStartIndex + 1, + cacheEndIndex + 1 ) const isContainControl = dragElementList.find(element => element.controlId) if (isContainControl) { // 仅允许 (最前/后元素不是控件 || 在控件前后 || 文本控件且是值) 拖拽 - const cacheStartElement = cacheElementList[cacheRange.startIndex + 1] - const cacheEndElement = cacheElementList[cacheRange.endIndex] + const cacheStartElement = cacheElementList[cacheStartIndex + 1] + 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( - cacheElementList[cacheRange.startIndex] - ) - const cacheRangeEndId = createDragId(cacheElementList[cacheRange.endIndex]) + const cacheRangeStartId = createDragId(cacheElementList[cacheStartIndex]) + const cacheRangeEndId = createDragId(cacheElementList[cacheEndIndex]) // 设置拖拽值 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)