Hufe
4 years ago
committed by
GitHub
commit
51b275c8a9
@ -0,0 +1,37 @@
|
||||
import Editor from '../../../src/editor'
|
||||
|
||||
describe('菜单-LaTeX', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
cy.visit('http://localhost:3000/canvas-editor/')
|
||||
|
||||
cy.get('canvas').first().as('canvas').should('have.length', 1)
|
||||
})
|
||||
|
||||
const text = 'canvas-editor'
|
||||
|
||||
it('LaTeX', () => {
|
||||
cy.getEditor().then((editor: Editor) => {
|
||||
editor.listener.saved = function (payload) {
|
||||
const data = payload.data
|
||||
|
||||
expect(data[0].type).to.eq('latex')
|
||||
|
||||
expect(data[0].value).to.eq(text)
|
||||
}
|
||||
|
||||
editor.command.executeSelectAll()
|
||||
|
||||
editor.command.executeBackspace()
|
||||
|
||||
cy.get('.menu-item__latex').click()
|
||||
|
||||
cy.get('.dialog-option__item [name="value"]').type(text)
|
||||
|
||||
cy.get('.dialog-menu button').eq(1).click()
|
||||
|
||||
cy.get('@canvas').type('{ctrl}s')
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
After Width: | Height: | Size: 393 B |
@ -0,0 +1,34 @@
|
||||
import { IElement } from '../../../../interface/Element'
|
||||
import { ImageParticle } from '../ImageParticle'
|
||||
import { LaTexSVG, LaTexUtils } from './utils/LaTeXUtils'
|
||||
|
||||
export class LaTexParticle extends ImageParticle {
|
||||
|
||||
public static convertLaTextToSVG(laTex: string): LaTexSVG {
|
||||
return new LaTexUtils(laTex).svg({
|
||||
SCALE_X: 10,
|
||||
SCALE_Y: 10,
|
||||
MARGIN_X: 0,
|
||||
MARGIN_Y: 0
|
||||
})
|
||||
}
|
||||
|
||||
public render(ctx: CanvasRenderingContext2D, element: IElement, x: number, y: number) {
|
||||
const { scale } = this.options
|
||||
const width = element.width! * scale
|
||||
const height = element.height! * scale
|
||||
if (this.imageCache.has(element.value)) {
|
||||
const img = this.imageCache.get(element.value)!
|
||||
ctx.drawImage(img, x, y, width, height)
|
||||
} else {
|
||||
const img = new Image()
|
||||
img.src = element.laTexSVG!
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, x, y, width, height)
|
||||
this.imageCache.set(element.value, img)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,298 @@
|
||||
/*
|
||||
https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols
|
||||
https://en.wikibooks.org/wiki/LaTeX/Mathematics
|
||||
*/
|
||||
export interface Symb {
|
||||
glyph: number;
|
||||
arity?: number;
|
||||
flags: Record<string, boolean>;
|
||||
}
|
||||
|
||||
const SYMB: Record<string, Symb> = {
|
||||
'\\frac': { glyph: 0, arity: 2, flags: {} },
|
||||
'\\binom': { glyph: 0, arity: 2, flags: {} },
|
||||
'\\sqrt': { glyph: 2267, arity: 1, flags: { opt: true, xfl: true, yfl: true } },
|
||||
'^': { glyph: 0, arity: 1, flags: {} },
|
||||
'_': { glyph: 0, arity: 1, flags: {} },
|
||||
'(': { glyph: 2221, arity: 0, flags: { yfl: true } },
|
||||
')': { glyph: 2222, arity: 0, flags: { yfl: true } },
|
||||
'[': { glyph: 2223, arity: 0, flags: { yfl: true } },
|
||||
']': { glyph: 2224, arity: 0, flags: { yfl: true } },
|
||||
'\\langle': { glyph: 2227, arity: 0, flags: { yfl: true } },
|
||||
'\\rangle': { glyph: 2228, arity: 0, flags: { yfl: true } },
|
||||
'|': { glyph: 2229, arity: 0, flags: { yfl: true } },
|
||||
|
||||
'\\|': { glyph: 2230, arity: 0, flags: { yfl: true } },
|
||||
'\\{': { glyph: 2225, arity: 0, flags: { yfl: true } },
|
||||
'\\}': { glyph: 2226, arity: 0, flags: { yfl: true } },
|
||||
|
||||
'\\#': { glyph: 2275, arity: 0, flags: {} },
|
||||
'\\$': { glyph: 2274, arity: 0, flags: {} },
|
||||
'\\&': { glyph: 2273, arity: 0, flags: {} },
|
||||
'\\%': { glyph: 2271, arity: 0, flags: {} },
|
||||
|
||||
/*semantics*/
|
||||
'\\begin': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\end': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\left': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\right': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\middle': { glyph: 0, arity: 1, flags: {} },
|
||||
|
||||
/*operators*/
|
||||
'\\cdot': { glyph: 2236, arity: 0, flags: {} },
|
||||
'\\pm': { glyph: 2233, arity: 0, flags: {} },
|
||||
'\\mp': { glyph: 2234, arity: 0, flags: {} },
|
||||
'\\times': { glyph: 2235, arity: 0, flags: {} },
|
||||
'\\div': { glyph: 2237, arity: 0, flags: {} },
|
||||
'\\leqq': { glyph: 2243, arity: 0, flags: {} },
|
||||
'\\geqq': { glyph: 2244, arity: 0, flags: {} },
|
||||
'\\leq': { glyph: 2243, arity: 0, flags: {} },
|
||||
'\\geq': { glyph: 2244, arity: 0, flags: {} },
|
||||
'\\propto': { glyph: 2245, arity: 0, flags: {} },
|
||||
'\\sim': { glyph: 2246, arity: 0, flags: {} },
|
||||
'\\equiv': { glyph: 2240, arity: 0, flags: {} },
|
||||
'\\dagger': { glyph: 2277, arity: 0, flags: {} },
|
||||
'\\ddagger': { glyph: 2278, arity: 0, flags: {} },
|
||||
'\\ell': { glyph: 662, arity: 0, flags: {} },
|
||||
|
||||
/*accents*/
|
||||
'\\vec': { glyph: 2261, arity: 1, flags: { hat: true, xfl: true, yfl: true } },
|
||||
'\\overrightarrow': { glyph: 2261, arity: 1, flags: { hat: true, xfl: true, yfl: true } },
|
||||
'\\overleftarrow': { glyph: 2263, arity: 1, flags: { hat: true, xfl: true, yfl: true } },
|
||||
'\\bar': { glyph: 2231, arity: 1, flags: { hat: true, xfl: true } },
|
||||
'\\overline': { glyph: 2231, arity: 1, flags: { hat: true, xfl: true } },
|
||||
'\\widehat': { glyph: 2247, arity: 1, flags: { hat: true, xfl: true, yfl: true } },
|
||||
'\\hat': { glyph: 2247, arity: 1, flags: { hat: true } },
|
||||
'\\acute': { glyph: 2248, arity: 1, flags: { hat: true } },
|
||||
'\\grave': { glyph: 2249, arity: 1, flags: { hat: true } },
|
||||
'\\breve': { glyph: 2250, arity: 1, flags: { hat: true } },
|
||||
'\\tilde': { glyph: 2246, arity: 1, flags: { hat: true } },
|
||||
'\\underline': { glyph: 2231, arity: 1, flags: { mat: true, xfl: true } },
|
||||
|
||||
'\\not': { glyph: 2220, arity: 1, flags: {} },
|
||||
|
||||
'\\neq': { glyph: 2239, arity: 1, flags: {} },
|
||||
'\\ne': { glyph: 2239, arity: 1, flags: {} },
|
||||
'\\exists': { glyph: 2279, arity: 0, flags: {} },
|
||||
'\\in': { glyph: 2260, arity: 0, flags: {} },
|
||||
'\\subset': { glyph: 2256, arity: 0, flags: {} },
|
||||
'\\supset': { glyph: 2258, arity: 0, flags: {} },
|
||||
'\\cup': { glyph: 2257, arity: 0, flags: {} },
|
||||
'\\cap': { glyph: 2259, arity: 0, flags: {} },
|
||||
'\\infty': { glyph: 2270, arity: 0, flags: {} },
|
||||
'\\partial': { glyph: 2265, arity: 0, flags: {} },
|
||||
'\\nabla': { glyph: 2266, arity: 0, flags: {} },
|
||||
'\\aleph': { glyph: 2077, arity: 0, flags: {} },
|
||||
'\\wp': { glyph: 2190, arity: 0, flags: {} },
|
||||
'\\therefore': { glyph: 740, arity: 0, flags: {} },
|
||||
'\\mid': { glyph: 2229, arity: 0, flags: {} },
|
||||
|
||||
'\\sum': { glyph: 2402, arity: 0, flags: { big: true } },
|
||||
'\\prod': { glyph: 2401, arity: 0, flags: { big: true } },
|
||||
'\\bigoplus': { glyph: 2284, arity: 0, flags: { big: true } },
|
||||
'\\bigodot': { glyph: 2281, arity: 0, flags: { big: true } },
|
||||
'\\int': { glyph: 2412, arity: 0, flags: { yfl: true } },
|
||||
'\\oint': { glyph: 2269, arity: 0, flags: { yfl: true } },
|
||||
'\\oplus': { glyph: 1284, arity: 0, flags: {} },
|
||||
'\\odot': { glyph: 1281, arity: 0, flags: {} },
|
||||
'\\perp': { glyph: 738, arity: 0, flags: {} },
|
||||
'\\angle': { glyph: 739, arity: 0, flags: {} },
|
||||
'\\triangle': { glyph: 842, arity: 0, flags: {} },
|
||||
'\\Box': { glyph: 841, arity: 0, flags: {} },
|
||||
|
||||
'\\rightarrow': { glyph: 2261, arity: 0, flags: {} },
|
||||
'\\to': { glyph: 2261, arity: 0, flags: {} },
|
||||
'\\leftarrow': { glyph: 2263, arity: 0, flags: {} },
|
||||
'\\gets': { glyph: 2263, arity: 0, flags: {} },
|
||||
'\\circ': { glyph: 902, arity: 0, flags: {} },
|
||||
'\\bigcirc': { glyph: 904, arity: 0, flags: {} },
|
||||
'\\bullet': { glyph: 828, arity: 0, flags: {} },
|
||||
'\\star': { glyph: 856, arity: 0, flags: {} },
|
||||
'\\diamond': { glyph: 743, arity: 0, flags: {} },
|
||||
'\\ast': { glyph: 728, arity: 0, flags: {} },
|
||||
|
||||
/*verbatim symbols*/
|
||||
'\\log': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\ln': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\exp': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\mod': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\lim': { glyph: 0, arity: 0, flags: { txt: true, big: true } },
|
||||
|
||||
'\\sin': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\cos': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\tan': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\csc': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\sec': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\cot': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\sinh': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\cosh': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\tanh': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\csch': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\sech': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\coth': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\arcsin': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\arccos': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\arctan': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\arccsc': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\arcsec': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
'\\arccot': { glyph: 0, arity: 0, flags: { txt: true } },
|
||||
|
||||
/*font modes*/
|
||||
'\\text': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathnormal': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathrm': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathit': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathbf': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathsf': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathtt': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathfrak': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathcal': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathbb': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\mathscr': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\rm': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\it': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\bf': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\sf': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\tt': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\frak': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\cal': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\bb': { glyph: 0, arity: 1, flags: {} },
|
||||
'\\scr': { glyph: 0, arity: 1, flags: {} },
|
||||
|
||||
'\\quad': { glyph: 0, arity: 0, flags: {} },
|
||||
'\\,': { glyph: 0, arity: 0, flags: {} },
|
||||
'\\.': { glyph: 0, arity: 0, flags: {} },
|
||||
'\\;': { glyph: 0, arity: 0, flags: {} },
|
||||
'\\!': { glyph: 0, arity: 0, flags: {} },
|
||||
|
||||
/*greek letters*/
|
||||
'\\alpha': { glyph: 2127, flags: {} },
|
||||
'\\beta': { glyph: 2128, flags: {} },
|
||||
'\\gamma': { glyph: 2129, flags: {} },
|
||||
'\\delta': { glyph: 2130, flags: {} },
|
||||
'\\varepsilon': { glyph: 2131, flags: {} },
|
||||
'\\zeta': { glyph: 2132, flags: {} },
|
||||
'\\eta': { glyph: 2133, flags: {} },
|
||||
'\\vartheta': { glyph: 2134, flags: {} },
|
||||
'\\iota': { glyph: 2135, flags: {} },
|
||||
'\\kappa': { glyph: 2136, flags: {} },
|
||||
'\\lambda': { glyph: 2137, flags: {} },
|
||||
'\\mu': { glyph: 2138, flags: {} },
|
||||
'\\nu': { glyph: 2139, flags: {} },
|
||||
'\\xi': { glyph: 2140, flags: {} },
|
||||
'\\omicron': { glyph: 2141, flags: {} },
|
||||
'\\pi': { glyph: 2142, flags: {} },
|
||||
'\\rho': { glyph: 2143, flags: {} },
|
||||
'\\sigma': { glyph: 2144, flags: {} },
|
||||
'\\tau': { glyph: 2145, flags: {} },
|
||||
'\\upsilon': { glyph: 2146, flags: {} },
|
||||
'\\varphi': { glyph: 2147, flags: {} },
|
||||
'\\chi': { glyph: 2148, flags: {} },
|
||||
'\\psi': { glyph: 2149, flags: {} },
|
||||
'\\omega': { glyph: 2150, flags: {} },
|
||||
|
||||
'\\epsilon': { glyph: 2184, flags: {} },
|
||||
'\\theta': { glyph: 2185, flags: {} },
|
||||
'\\phi': { glyph: 2186, flags: {} },
|
||||
'\\varsigma': { glyph: 2187, flags: {} },
|
||||
|
||||
'\\Alpha': { glyph: 2027, flags: {} },
|
||||
'\\Beta': { glyph: 2028, flags: {} },
|
||||
'\\Gamma': { glyph: 2029, flags: {} },
|
||||
'\\Delta': { glyph: 2030, flags: {} },
|
||||
'\\Epsilon': { glyph: 2031, flags: {} },
|
||||
'\\Zeta': { glyph: 2032, flags: {} },
|
||||
'\\Eta': { glyph: 2033, flags: {} },
|
||||
'\\Theta': { glyph: 2034, flags: {} },
|
||||
'\\Iota': { glyph: 2035, flags: {} },
|
||||
'\\Kappa': { glyph: 2036, flags: {} },
|
||||
'\\Lambda': { glyph: 2037, flags: {} },
|
||||
'\\Mu': { glyph: 2038, flags: {} },
|
||||
'\\Nu': { glyph: 2039, flags: {} },
|
||||
'\\Xi': { glyph: 2040, flags: {} },
|
||||
'\\Omicron': { glyph: 2041, flags: {} },
|
||||
'\\Pi': { glyph: 2042, flags: {} },
|
||||
'\\Rho': { glyph: 2043, flags: {} },
|
||||
'\\Sigma': { glyph: 2044, flags: {} },
|
||||
'\\Tau': { glyph: 2045, flags: {} },
|
||||
'\\Upsilon': { glyph: 2046, flags: {} },
|
||||
'\\Phi': { glyph: 2047, flags: {} },
|
||||
'\\Chi': { glyph: 2048, flags: {} },
|
||||
'\\Psi': { glyph: 2049, flags: {} },
|
||||
'\\Omega': { glyph: 2050, flags: {} },
|
||||
}
|
||||
|
||||
export { SYMB }
|
||||
|
||||
export function asciiMap(x: string, mode = 'math'): number {
|
||||
const c = x.charCodeAt(0)
|
||||
if (65 <= c && c <= 90) {
|
||||
const d = c - 65
|
||||
if (mode == 'text' || mode == 'rm') {
|
||||
return d + 2001
|
||||
} else if (mode == 'tt') {
|
||||
return d + 501
|
||||
} else if (mode == 'bf' || mode == 'bb') {
|
||||
return d + 3001
|
||||
} else if (mode == 'sf') {
|
||||
return d + 2501
|
||||
} else if (mode == 'frak') {
|
||||
return d + 3301
|
||||
} else if (mode == 'scr' || mode == 'cal') {
|
||||
return d + 2551
|
||||
} else {
|
||||
return d + 2051
|
||||
}
|
||||
}
|
||||
if (97 <= c && c <= 122) {
|
||||
const d = c - 97
|
||||
if (mode == 'text' || mode == 'rm') {
|
||||
return d + 2101
|
||||
} else if (mode == 'tt') {
|
||||
return d + 601
|
||||
} else if (mode == 'bf' || mode == 'bb') {
|
||||
return d + 3101
|
||||
} else if (mode == 'sf') {
|
||||
return d + 2601
|
||||
} else if (mode == 'frak') {
|
||||
return d + 3401
|
||||
} else if (mode == 'scr' || mode == 'cal') {
|
||||
return d + 2651
|
||||
} else {
|
||||
return d + 2151
|
||||
}
|
||||
}
|
||||
if (48 <= c && c <= 57) {
|
||||
const d = c - 48
|
||||
if (mode == 'it') {
|
||||
return d + 2750
|
||||
} else if (mode == 'bf') {
|
||||
return d + 3200
|
||||
} else if (mode == 'tt') {
|
||||
return d + 700
|
||||
} else {
|
||||
return d + 2200
|
||||
}
|
||||
}
|
||||
|
||||
return <number>{
|
||||
'.': 2210,
|
||||
',': 2211,
|
||||
':': 2212,
|
||||
';': 2213,
|
||||
'!': 2214,
|
||||
'?': 2215,
|
||||
'\'': 2216,
|
||||
'"': 2217,
|
||||
'*': 2219,
|
||||
'/': 2220,
|
||||
'-': 2231,
|
||||
'+': 2232,
|
||||
'=': 2238,
|
||||
'<': 2241,
|
||||
'>': 2242,
|
||||
'~': 2246,
|
||||
'@': 2273,
|
||||
'\\': 804,
|
||||
}[x]
|
||||
}
|
||||
@ -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