黄云飞
4 years ago
parent
58c32c4f21
commit
ab7c5788c8
@ -0,0 +1,335 @@
|
|||||||
|
import { IEditorOption } from '../../../../interface/Editor'
|
||||||
|
import { IElement, IElementPosition } from '../../../../interface/Element'
|
||||||
|
import { IPreviewerCreateResult, IPreviewerDrawOption } from '../../../../interface/Previewer'
|
||||||
|
import { downloadFile } from '../../../../utils'
|
||||||
|
import { Draw } from '../../Draw'
|
||||||
|
|
||||||
|
export class Previewer {
|
||||||
|
|
||||||
|
private container: HTMLDivElement
|
||||||
|
private canvas: HTMLCanvasElement
|
||||||
|
private draw: Draw
|
||||||
|
private options: Required<IEditorOption>
|
||||||
|
private curElement: IElement | null
|
||||||
|
private curElementSrc: string
|
||||||
|
private previewerDrawOption: IPreviewerDrawOption
|
||||||
|
private curPosition: IElementPosition | null
|
||||||
|
// 拖拽改变尺寸
|
||||||
|
private resizerSelection: HTMLDivElement
|
||||||
|
private resizerHandleList: HTMLDivElement[]
|
||||||
|
private resizerImageContainer: HTMLDivElement
|
||||||
|
private resizerImage: HTMLImageElement
|
||||||
|
private width: number
|
||||||
|
private height: number
|
||||||
|
private mousedownX: number
|
||||||
|
private mousedownY: number
|
||||||
|
private curHandleIndex: number
|
||||||
|
// 预览选区
|
||||||
|
private previewerContainer: HTMLDivElement | null
|
||||||
|
private previewerImage: HTMLImageElement | null
|
||||||
|
|
||||||
|
constructor(draw: Draw) {
|
||||||
|
this.container = draw.getContainer()
|
||||||
|
this.canvas = draw.getPage()
|
||||||
|
this.draw = draw
|
||||||
|
this.options = draw.getOptions()
|
||||||
|
this.curElement = null
|
||||||
|
this.curElementSrc = ''
|
||||||
|
this.previewerDrawOption = {}
|
||||||
|
this.curPosition = null
|
||||||
|
// 图片尺寸缩放
|
||||||
|
const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage } = this._createResizerDom()
|
||||||
|
this.resizerSelection = resizerSelection
|
||||||
|
this.resizerHandleList = resizerHandleList
|
||||||
|
this.resizerImageContainer = resizerImageContainer
|
||||||
|
this.resizerImage = resizerImage
|
||||||
|
this.width = 0
|
||||||
|
this.height = 0
|
||||||
|
this.mousedownX = 0
|
||||||
|
this.mousedownY = 0
|
||||||
|
this.curHandleIndex = 0 // 默认右下角
|
||||||
|
// 图片预览
|
||||||
|
resizerSelection.ondblclick = this._dblclick.bind(this)
|
||||||
|
this.previewerContainer = null
|
||||||
|
this.previewerImage = null
|
||||||
|
}
|
||||||
|
|
||||||
|
private _createResizerDom(): IPreviewerCreateResult {
|
||||||
|
// 拖拽边框
|
||||||
|
const resizerSelection = document.createElement('div')
|
||||||
|
resizerSelection.classList.add('resizer-selection')
|
||||||
|
resizerSelection.style.display = 'none'
|
||||||
|
resizerSelection.style.borderColor = this.options.resizerColor
|
||||||
|
const resizerHandleList: HTMLDivElement[] = []
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
const handleDom = document.createElement('div')
|
||||||
|
handleDom.style.background = this.options.resizerColor
|
||||||
|
handleDom.classList.add(`handle-${i}`)
|
||||||
|
handleDom.setAttribute('data-index', String(i))
|
||||||
|
handleDom.onmousedown = this._mousedown.bind(this)
|
||||||
|
resizerSelection.append(handleDom)
|
||||||
|
resizerHandleList.push(handleDom)
|
||||||
|
}
|
||||||
|
this.container.append(resizerSelection)
|
||||||
|
// 拖拽镜像
|
||||||
|
const resizerImageContainer = document.createElement('div')
|
||||||
|
resizerImageContainer.classList.add('resizer-image')
|
||||||
|
resizerImageContainer.style.display = 'none'
|
||||||
|
const resizerImage = document.createElement('img')
|
||||||
|
resizerImageContainer.append(resizerImage)
|
||||||
|
this.container.append(resizerImageContainer)
|
||||||
|
return { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage }
|
||||||
|
}
|
||||||
|
|
||||||
|
private _mousedown(evt: MouseEvent) {
|
||||||
|
this.canvas = this.draw.getPage()
|
||||||
|
if (!this.curPosition || !this.curElement) return
|
||||||
|
const { scale } = this.options
|
||||||
|
const height = this.draw.getHeight()
|
||||||
|
const pageGap = this.draw.getPageGap()
|
||||||
|
this.mousedownX = evt.x
|
||||||
|
this.mousedownY = evt.y
|
||||||
|
const target = evt.target as HTMLDivElement
|
||||||
|
this.curHandleIndex = Number(target.dataset.index)
|
||||||
|
// 改变光标
|
||||||
|
const cursor = window.getComputedStyle(target).cursor
|
||||||
|
document.body.style.cursor = cursor
|
||||||
|
this.canvas.style.cursor = cursor
|
||||||
|
// 拖拽图片镜像
|
||||||
|
this.resizerImage.src = this.curElementSrc
|
||||||
|
this.resizerImageContainer.style.display = 'block'
|
||||||
|
const { coordinate: { leftTop: [left, top] } } = this.curPosition
|
||||||
|
const prePageHeight = this.draw.getPageNo() * (height + pageGap)
|
||||||
|
this.resizerImageContainer.style.left = `${left}px`
|
||||||
|
this.resizerImageContainer.style.top = `${top + prePageHeight}px`
|
||||||
|
this.resizerImage.style.width = `${this.curElement.width! * scale}px`
|
||||||
|
this.resizerImage.style.height = `${this.curElement.height! * scale}px`
|
||||||
|
// 追加全局事件
|
||||||
|
const mousemoveFn = this._mousemove.bind(this)
|
||||||
|
document.addEventListener('mousemove', mousemoveFn)
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
// 改变尺寸
|
||||||
|
if (this.curElement && this.curPosition) {
|
||||||
|
this.curElement.width = this.width
|
||||||
|
this.curElement.height = this.height
|
||||||
|
this.draw.render({ isSetCursor: false })
|
||||||
|
this.drawResizer(this.curElement, this.curPosition, this.previewerDrawOption)
|
||||||
|
}
|
||||||
|
// 还原副作用
|
||||||
|
this.resizerImageContainer.style.display = 'none'
|
||||||
|
document.removeEventListener('mousemove', mousemoveFn)
|
||||||
|
document.body.style.cursor = ''
|
||||||
|
this.canvas.style.cursor = 'text'
|
||||||
|
}, {
|
||||||
|
once: true
|
||||||
|
})
|
||||||
|
evt.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _mousemove(evt: MouseEvent) {
|
||||||
|
if (!this.curElement) return
|
||||||
|
const { scale } = this.options
|
||||||
|
let dx = 0
|
||||||
|
let dy = 0
|
||||||
|
switch (this.curHandleIndex) {
|
||||||
|
case 0:
|
||||||
|
dx = this.mousedownX - evt.x
|
||||||
|
dy = this.mousedownY - evt.y
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
dy = this.mousedownY - evt.y
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
dx = evt.x - this.mousedownX
|
||||||
|
dy = this.mousedownY - evt.y
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
dx = evt.x - this.mousedownX
|
||||||
|
break
|
||||||
|
case 5:
|
||||||
|
dy = evt.y - this.mousedownY
|
||||||
|
break
|
||||||
|
case 6:
|
||||||
|
dx = this.mousedownX - evt.x
|
||||||
|
dy = evt.y - this.mousedownY
|
||||||
|
break
|
||||||
|
case 7:
|
||||||
|
dx = this.mousedownX - evt.x
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
dx = evt.x - this.mousedownX
|
||||||
|
dy = evt.y - this.mousedownY
|
||||||
|
break
|
||||||
|
}
|
||||||
|
this.width = this.curElement.width! + dx
|
||||||
|
this.height = this.curElement.height! + dy
|
||||||
|
this.resizerImage.style.width = `${this.width * scale}px`
|
||||||
|
this.resizerImage.style.height = `${this.height * scale}px`
|
||||||
|
evt.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _dblclick() {
|
||||||
|
this._drawPreviewer()
|
||||||
|
document.body.style.overflow = 'hidden'
|
||||||
|
}
|
||||||
|
|
||||||
|
private _drawPreviewer() {
|
||||||
|
const previewerContainer = document.createElement('div')
|
||||||
|
previewerContainer.classList.add('image-previewer')
|
||||||
|
// 关闭按钮
|
||||||
|
const closeBtn = document.createElement('i')
|
||||||
|
closeBtn.classList.add('image-close')
|
||||||
|
closeBtn.onclick = () => {
|
||||||
|
this._clearPreviewer()
|
||||||
|
}
|
||||||
|
previewerContainer.append(closeBtn)
|
||||||
|
// 图片
|
||||||
|
const imgContainer = document.createElement('div')
|
||||||
|
imgContainer.classList.add('image-container')
|
||||||
|
const img = document.createElement('img')
|
||||||
|
img.src = this.curElementSrc
|
||||||
|
img.draggable = false
|
||||||
|
imgContainer.append(img)
|
||||||
|
this.previewerImage = img
|
||||||
|
previewerContainer.append(imgContainer)
|
||||||
|
// 操作栏
|
||||||
|
let x = 0
|
||||||
|
let y = 0
|
||||||
|
let scaleSize = 1
|
||||||
|
let rotateSize = 0
|
||||||
|
const menuContainer = document.createElement('div')
|
||||||
|
menuContainer.classList.add('image-menu')
|
||||||
|
const zoomIn = document.createElement('i')
|
||||||
|
zoomIn.classList.add('zoom-in')
|
||||||
|
zoomIn.onclick = () => {
|
||||||
|
scaleSize += 0.1
|
||||||
|
this._setPreviewerTransform(scaleSize, rotateSize, x, y)
|
||||||
|
}
|
||||||
|
menuContainer.append(zoomIn)
|
||||||
|
const zoomOut = document.createElement('i')
|
||||||
|
zoomOut.onclick = () => {
|
||||||
|
if (scaleSize - 0.1 <= 0.1) return
|
||||||
|
scaleSize -= 0.1
|
||||||
|
this._setPreviewerTransform(scaleSize, rotateSize, x, y)
|
||||||
|
}
|
||||||
|
zoomOut.classList.add('zoom-out')
|
||||||
|
menuContainer.append(zoomOut)
|
||||||
|
const rotate = document.createElement('i')
|
||||||
|
rotate.classList.add('rotate')
|
||||||
|
rotate.onclick = () => {
|
||||||
|
rotateSize += 1
|
||||||
|
this._setPreviewerTransform(scaleSize, rotateSize, x, y)
|
||||||
|
}
|
||||||
|
menuContainer.append(rotate)
|
||||||
|
const originalSize = document.createElement('i')
|
||||||
|
originalSize.classList.add('original-size')
|
||||||
|
originalSize.onclick = () => {
|
||||||
|
x = 0
|
||||||
|
y = 0
|
||||||
|
scaleSize = 1
|
||||||
|
rotateSize = 0
|
||||||
|
this._setPreviewerTransform(scaleSize, rotateSize, x, y)
|
||||||
|
}
|
||||||
|
menuContainer.append(originalSize)
|
||||||
|
const imageDownload = document.createElement('i')
|
||||||
|
imageDownload.classList.add('image-download')
|
||||||
|
imageDownload.onclick = () => {
|
||||||
|
const { mime } = this.previewerDrawOption
|
||||||
|
downloadFile(img.src, `${this.curElement?.id}.${mime || 'png'}`)
|
||||||
|
}
|
||||||
|
menuContainer.append(imageDownload)
|
||||||
|
previewerContainer.append(menuContainer)
|
||||||
|
this.previewerContainer = previewerContainer
|
||||||
|
document.body.append(previewerContainer)
|
||||||
|
// 拖拽调整位置
|
||||||
|
let startX = 0
|
||||||
|
let startY = 0
|
||||||
|
let isAllowDrag = false
|
||||||
|
img.onmousedown = (evt) => {
|
||||||
|
isAllowDrag = true
|
||||||
|
startX = evt.x
|
||||||
|
startY = evt.y
|
||||||
|
previewerContainer.style.cursor = 'move'
|
||||||
|
}
|
||||||
|
previewerContainer.onmousemove = (evt: MouseEvent) => {
|
||||||
|
if (!isAllowDrag) return
|
||||||
|
x += (evt.x - startX)
|
||||||
|
y += (evt.y - startY)
|
||||||
|
startX = evt.x
|
||||||
|
startY = evt.y
|
||||||
|
this._setPreviewerTransform(scaleSize, rotateSize, x, y)
|
||||||
|
}
|
||||||
|
previewerContainer.onmouseup = () => {
|
||||||
|
isAllowDrag = false
|
||||||
|
previewerContainer.style.cursor = 'auto'
|
||||||
|
}
|
||||||
|
previewerContainer.onwheel = (evt) => {
|
||||||
|
evt.preventDefault()
|
||||||
|
if (evt.deltaY < 0) {
|
||||||
|
// 放大
|
||||||
|
scaleSize += 0.1
|
||||||
|
} else {
|
||||||
|
// 缩小
|
||||||
|
if (scaleSize - 0.1 <= 0.1) return
|
||||||
|
scaleSize -= 0.1
|
||||||
|
}
|
||||||
|
this._setPreviewerTransform(scaleSize, rotateSize, x, y)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public _setPreviewerTransform(scale: number, rotate: number, x: number, y: number) {
|
||||||
|
if (!this.previewerImage) return
|
||||||
|
this.previewerImage.style.left = `${x}px`
|
||||||
|
this.previewerImage.style.top = `${y}px`
|
||||||
|
this.previewerImage.style.transform = `scale(${scale}) rotate(${rotate * 90}deg)`
|
||||||
|
}
|
||||||
|
|
||||||
|
private _clearPreviewer() {
|
||||||
|
this.previewerContainer?.remove()
|
||||||
|
this.previewerContainer = null
|
||||||
|
document.body.style.overflow = 'auto'
|
||||||
|
}
|
||||||
|
|
||||||
|
public drawResizer(element: IElement, position: IElementPosition, options: IPreviewerDrawOption = {}) {
|
||||||
|
this.previewerDrawOption = options
|
||||||
|
const { scale } = this.options
|
||||||
|
const { coordinate: { leftTop: [left, top] } } = position
|
||||||
|
const elementWidth = element.width! * scale
|
||||||
|
const elementHeight = element.height! * scale
|
||||||
|
const height = this.draw.getHeight()
|
||||||
|
const pageGap = this.draw.getPageGap()
|
||||||
|
const handleSize = this.options.resizerSize
|
||||||
|
const preY = this.draw.getPageNo() * (height + pageGap)
|
||||||
|
// 边框
|
||||||
|
this.resizerSelection.style.left = `${left}px`
|
||||||
|
this.resizerSelection.style.top = `${top + preY}px`
|
||||||
|
this.resizerSelection.style.width = `${elementWidth}px`
|
||||||
|
this.resizerSelection.style.height = `${elementHeight}px`
|
||||||
|
// handle
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
const left = i === 0 || i === 6 || i === 7
|
||||||
|
? -handleSize
|
||||||
|
: i === 1 || i === 5
|
||||||
|
? elementWidth / 2
|
||||||
|
: elementWidth - handleSize
|
||||||
|
const top = i === 0 || i === 1 || i === 2
|
||||||
|
? -handleSize
|
||||||
|
: i === 3 || i === 7
|
||||||
|
? elementHeight / 2 - handleSize
|
||||||
|
: elementHeight - handleSize
|
||||||
|
this.resizerHandleList[i].style.left = `${left}px`
|
||||||
|
this.resizerHandleList[i].style.top = `${top}px`
|
||||||
|
}
|
||||||
|
this.resizerSelection.style.display = 'block'
|
||||||
|
this.curElement = element
|
||||||
|
this.curElementSrc = element[options.srcKey || 'value'] || ''
|
||||||
|
this.curPosition = position
|
||||||
|
this.width = this.curElement.width! * scale
|
||||||
|
this.height = this.curElement.height! * scale
|
||||||
|
}
|
||||||
|
|
||||||
|
public clearResizer() {
|
||||||
|
this.resizerSelection.style.display = 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { IElement } from './Element'
|
||||||
|
|
||||||
|
export interface IPreviewerCreateResult {
|
||||||
|
resizerSelection: HTMLDivElement;
|
||||||
|
resizerHandleList: HTMLDivElement[];
|
||||||
|
resizerImageContainer: HTMLDivElement;
|
||||||
|
resizerImage: HTMLImageElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IPreviewerDrawOption {
|
||||||
|
mime?: 'png' | 'jpg' | 'jpeg' | 'svg';
|
||||||
|
srcKey?: keyof Pick<IElement, 'value' | 'laTexSVG'>;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue