From 4cf4ea5e45e0ee94a20b53f5e775bba0ef9bacca Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 22 Dec 2022 18:50:42 +0800 Subject: [PATCH] feat:drag text to editor --- src/editor/core/event/CanvasEvent.ts | 101 ++++++++++++++------------- src/editor/core/event/GlobalEvent.ts | 8 +-- src/editor/core/position/Position.ts | 56 +++++++++++++++ 3 files changed, 112 insertions(+), 53 deletions(-) diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 7ca26eb..4414f40 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -18,14 +18,14 @@ import { RangeManager } from '../range/RangeManager' import { LETTER_REG, NUMBER_LIKE_REG } from '../../dataset/constant/Regular' import { Control } from '../draw/control/Control' import { CheckboxControl } from '../draw/control/checkbox/CheckboxControl' -import { splitText, threeClick } from '../../utils' +import { findParent, splitText, threeClick } from '../../utils' import { Previewer } from '../draw/particle/previewer/Previewer' import { DeepRequired } from '../../interface/Common' import { DateParticle } from '../draw/particle/date/DateParticle' export class CanvasEvent { - private isAllowDrag: boolean + private isAllowSelection: boolean private isCompositing: boolean private mouseDownStartPosition: ICurrentPosition | null @@ -45,7 +45,7 @@ export class CanvasEvent { private control: Control constructor(draw: Draw) { - this.isAllowDrag = false + this.isAllowSelection = false this.isCompositing = false this.mouseDownStartPosition = null @@ -72,11 +72,15 @@ export class CanvasEvent { this.pageContainer.addEventListener('mouseleave', this.mouseleave.bind(this)) this.pageContainer.addEventListener('mousemove', this.mousemove.bind(this)) this.pageContainer.addEventListener('dblclick', this.dblclick.bind(this)) + + this.pageContainer.addEventListener('dragover', this.dragover.bind(this)) + this.pageContainer.addEventListener('drop', this.drop.bind(this)) + threeClick(this.pageContainer, this.threeClick.bind(this)) } - public setIsAllowDrag(payload: boolean) { - this.isAllowDrag = payload + public setIsAllowSelection(payload: boolean) { + this.isAllowSelection = payload if (!payload) { this.applyPainterStyle() } @@ -110,7 +114,7 @@ export class CanvasEvent { } public mousemove(evt: MouseEvent) { - if (!this.isAllowDrag || !this.mouseDownStartPosition) return + if (!this.isAllowSelection || !this.mouseDownStartPosition) return const target = evt.target as HTMLDivElement const pageIndex = target.dataset.index // 设置pageNo @@ -175,59 +179,19 @@ export class CanvasEvent { if (pageIndex) { this.draw.setPageNo(Number(pageIndex)) } - this.isAllowDrag = true - const positionResult = this.position.getPositionByXY({ + this.isAllowSelection = true + const positionResult = this.position.adjustPositionContext({ x: evt.offsetX, y: evt.offsetY }) - // 激活控件 - if (positionResult.isControl && !isReadonly) { - const { - index, - isTable, - trIndex, - tdIndex, - tdValueIndex - } = positionResult - const { newIndex } = this.control.moveCursor({ - index, - isTable, - trIndex, - tdIndex, - tdValueIndex - }) - if (isTable) { - positionResult.tdValueIndex = newIndex - } else { - positionResult.index = newIndex - } - } const { index, isDirectHit, isCheckbox, - isControl, isImage, isTable, - trIndex, - tdIndex, tdValueIndex, - tdId, - trId, - tableId } = positionResult - // 设置位置上下文 - this.position.setPositionContext({ - isTable: isTable || false, - isCheckbox: isCheckbox || false, - isControl: isControl || false, - index, - trIndex, - tdIndex, - tdId, - trId, - tableId - }) // 记录选区开始位置 this.mouseDownStartPosition = { ...positionResult, @@ -300,7 +264,7 @@ export class CanvasEvent { // 是否还在canvas内部 const { x, y, width, height } = this.pageContainer.getBoundingClientRect() if (evt.x >= x && evt.x <= x + width && evt.y >= y && evt.y <= y + height) return - this.setIsAllowDrag(false) + this.setIsAllowSelection(false) } public keydown(evt: KeyboardEvent) { @@ -699,4 +663,43 @@ export class CanvasEvent { this.isCompositing = false } + public drop(evt: DragEvent) { + evt.preventDefault() + const data = evt.dataTransfer?.getData('text') + if (data) { + this.input(data) + } + } + + public dragover(evt: DragEvent) { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + evt.preventDefault() + // 非编辑器区禁止拖放 + const pageContainer = findParent( + evt.target as Element, + (node: Element) => node === this.pageContainer, + true + ) + if (!pageContainer) return + const target = evt.target as HTMLDivElement + const pageIndex = target.dataset.index + // 设置pageNo + if (pageIndex) { + this.draw.setPageNo(Number(pageIndex)) + } + const { isTable, tdValueIndex, index } = this.position.adjustPositionContext({ + x: evt.offsetX, + y: evt.offsetY + }) + // 设置选区及光标位置 + const positionList = this.position.getPositionList() + const curIndex = isTable ? tdValueIndex! : index + if (~index) { + this.range.setRange(curIndex, curIndex) + this.position.setCursorPosition(positionList[curIndex]) + } + this.cursor?.drawCursor() + } + } \ No newline at end of file diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index a0fb811..406f4d1 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/src/editor/core/event/GlobalEvent.ts @@ -48,7 +48,7 @@ export class GlobalEvent { window.addEventListener('blur', this.recoverEffect) document.addEventListener('keyup', this.setRangeStyle) document.addEventListener('click', this.recoverEffect) - document.addEventListener('mouseup', this.setDragState) + document.addEventListener('mouseup', this.setSelectionAbility) document.addEventListener('wheel', this.setPageScale, { passive: false }) document.addEventListener('visibilitychange', this._handleVisibilityChange) } @@ -57,7 +57,7 @@ export class GlobalEvent { window.removeEventListener('blur', this.recoverEffect) document.removeEventListener('keyup', this.setRangeStyle) document.removeEventListener('click', this.recoverEffect) - document.removeEventListener('mouseup', this.setDragState) + document.removeEventListener('mouseup', this.setSelectionAbility) document.removeEventListener('wheel', this.setPageScale) document.removeEventListener('visibilitychange', this._handleVisibilityChange) } @@ -90,8 +90,8 @@ export class GlobalEvent { this.dateParticle.clearDatePicker() } - public setDragState = () => { - this.canvasEvent.setIsAllowDrag(false) + public setSelectionAbility = () => { + this.canvasEvent.setIsAllowSelection(false) } public setRangeStyle = () => { diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts index 468a88d..3128088 100644 --- a/src/editor/core/position/Position.ts +++ b/src/editor/core/position/Position.ts @@ -193,4 +193,60 @@ export class Position { } } + public adjustPositionContext(payload: Pick): ICurrentPosition { + const isReadonly = this.draw.isReadonly() + const { x, y } = payload + const positionResult = this.getPositionByXY({ + x, + y + }) + // 移动控件内光标 + if (positionResult.isControl && !isReadonly) { + const { + index, + isTable, + trIndex, + tdIndex, + tdValueIndex + } = positionResult + const control = this.draw.getControl() + const { newIndex } = control.moveCursor({ + index, + isTable, + trIndex, + tdIndex, + tdValueIndex + }) + if (isTable) { + positionResult.tdValueIndex = newIndex + } else { + positionResult.index = newIndex + } + } + const { + index, + isCheckbox, + isControl, + isTable, + trIndex, + tdIndex, + tdId, + trId, + tableId + } = positionResult + // 设置位置上下文 + this.setPositionContext({ + isTable: isTable || false, + isCheckbox: isCheckbox || false, + isControl: isControl || false, + index, + trIndex, + tdIndex, + tdId, + trId, + tableId + }) + return positionResult + } + } \ No newline at end of file