uniProject/uni_modules/jp-signature/components/jp-signature/signature.uts

import { LSignatureOptions, Point, Line } from '../../index.uts'

let points : Line = []
let undoStack : Line[] = [];
let redoStack : Line[] = [];
let lastX = 0;
let lastY = 0;


export class Signature {
	el : UniElement
	options : LSignatureOptions = {
		penColor: 'black',
		openSmooth: true,
		disableScroll: true,
		disabled: false,
		penSize: 2,
		minLineWidth: 2,
		maxLineWidth: 6,
		minSpeed: 1.5,
		maxWidthDiffRate: 20,
		maxHistoryLength: 20
	} as LSignatureOptions
	ctx : DrawableContext
	isEmpty : boolean = true
	isDrawing : boolean = false
	// historyList : Point[][] = []
	// id : string
	// instance : ComponentPublicInstance
	touchstartCallbackWrapper: UniCallbackWrapper|null = null
	touchmoveCallbackWrapper: UniCallbackWrapper|null= null
	touchendCallbackWrapper: UniCallbackWrapper|null= null
	constructor(el : UniElement) {
		this.el = el
		this.ctx = el.getDrawableContext() as DrawableContext
		this.init()
	}
	init() {
		this.touchstartCallbackWrapper = this.el.addEventListener('touchstart', this.onTouchStart)
		this.touchmoveCallbackWrapper = this.el.addEventListener('touchmove', this.onTouchMove)
		this.touchendCallbackWrapper = this.el.addEventListener('touchend', this.onTouchEnd)
	}
	remove() {
		if(this.touchstartCallbackWrapper == null) return
		this.el.removeEventListener('touchstart', this.touchstartCallbackWrapper!)
		this.el.removeEventListener('touchmove', this.touchmoveCallbackWrapper!)
		this.el.removeEventListener('touchend', this.touchendCallbackWrapper!)
	}
	setOption(options : LSignatureOptions) {
		this.options = options
	}
	disableScroll(event : UniTouchEvent) {
		event.stopPropagation()
		if (this.options.disableScroll) {
			{
				event.preventDefault()
			}
		}
	}
	getTouchPoint(event : UniTouchEvent) : Point {
		const rect = this.el.getBoundingClientRect()
		const touche = event.touches[0];
		const x = touche.clientX
		const y = touche.clientY
		// const force = touche.force
		return {
			x: x - rect.left,
			y: y - rect.top
		} as Point
	}
	onTouchStart: (event : UniTouchEvent) => void = (event : UniTouchEvent) =>{
		if (this.options.disabled) {
			return
		}
		this.disableScroll(event)
		const { x, y } = this.getTouchPoint(event)
		this.isDrawing = true;
		this.isEmpty = false
		lastX = x
		lastY = y
		points.push({ x, y } as Point);
	}
	onTouchMove: (event : UniTouchEvent) => void = (event : UniTouchEvent) =>{
		if (this.options.disabled || !this.isDrawing) {
			return
		}
		this.disableScroll(event)
		const { x, y } = this.getTouchPoint(event)
		const lineWidth = this.options.penSize
		const strokeStyle = this.options.penColor
		const point = { x, y } as Point
		const last = { x: lastX, y: lastY } as Point
		this.drawLine(point, last, lineWidth, strokeStyle)

		lastX = x
		lastY = y
		points.push({ x, y, c: strokeStyle, w: lineWidth } as Point);
	}
	onTouchEnd: (event : UniTouchEvent) => void = (event : UniTouchEvent) =>{
		this.disableScroll(event)
		this.isDrawing = false;
		undoStack.push(points);
		redoStack = [] as Line[];
		points = [] as Point[];
	}
	drawLine(point : Point, last : Point, lineWidth : number, strokeStyle : string) {
		const ctx = this.ctx
		ctx.lineWidth = lineWidth
		ctx.strokeStyle = strokeStyle
		ctx.lineCap = 'round'
		ctx.lineJoin = 'round'
		ctx.beginPath()
		ctx.moveTo(last.x, last.y)
		ctx.lineTo(point.x, point.y)
		ctx.stroke()
		ctx.update()
	}
	// addHistory() { }
	clear() {
		this.ctx.reset()
		this.ctx.update()
		this.isEmpty = true
		undoStack = [] as Line[];
		redoStack = [] as Line[];
		points = [] as Point[];
	}
	undo() {
		if(redoStack.length == this.options.maxHistoryLength && this.options.maxHistoryLength != 0){
			return
		}
		this.ctx.reset()
		if(undoStack.length > 0){
			const lastPath : Line = undoStack.pop()!;
			redoStack.push(lastPath);
			if(undoStack.length == 0){
				this.isEmpty = true
				this.ctx.update()
				return
			}
			for (let l = 0; l < undoStack.length; l++) {
				for (let i = 1; i < undoStack[l].length; i++) {
					const last  = undoStack[l][i - 1]
					const point = undoStack[l][i]
					this.drawLine(point, last, point.w!, point.c!)
				}
			}
		} else {
			this.ctx.update()
		}
	}
	redo() {
		if(redoStack.length < 1) return
		const lastPath : Line = redoStack.pop()!;
		undoStack.push(lastPath);
		this.isEmpty = false
		for (let l = 0; l < undoStack.length; l++) {
			for (let i = 1; i < undoStack[l].length; i++) {
				const last  = undoStack[l][i - 1]
				const point = undoStack[l][i]
				this.drawLine(point, last, point.w!, point.c!)
			}
		}
	}
	// restore() { }
}