fd5c0c9747
* applied eslint * add locales and lint the project * removed error boundary * updated locales * fix min files * fix locales
99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
export default class AnnotationCanvas {
|
|
readonly canvas: HTMLCanvasElement;
|
|
|
|
private ctx: CanvasRenderingContext2D | null = null;
|
|
|
|
private painting: boolean = false;
|
|
|
|
constructor() {
|
|
this.canvas = document.createElement('canvas');
|
|
Object.assign(this.canvas.style, {
|
|
position: 'fixed',
|
|
cursor:
|
|
"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0IArs4c6QAAAWNJREFUOE+l1D1Lw1AUBuD35Catg5NzaCMRMilINnGok7sguLg4OlRcBTd/hqBVB0ed7KDgIPgXhJoaG10Kgk4a83EkhcYYktimd703z31zzuESSqwGIDs1bRvAIiRcWrZ9ETFUwhJ6XTsDsPH7Le1bz08H42JkGMa09+W2CVhKBmHC7jhYlOgUTPdUEa3Q86+SIDN/j4olf43BtJMFjoJl1AgMUJMUcRInZHT+w7KgYakGoDxVafmue0hBsJeLmaapvPffziFhraDjDMKWZdvHRaNRlCi2mUNHYl55dBwrDysFZWGloTQ2EZTEJoZiTFXVmaos34Ixn9e5qNgCaHR6vW7emcFozNVmN1ERbfb9myww3bVCTK9rPsDrpCh37HnXAC3Ek5lqf9ErM0im1zUG8BmGtCqq4mEIjppoeEESA5g/JIkaLMuv7AVHEgfNohqlU/7Fol3mPodiufvS7Yz7cP4ARjbPWyYPZSMAAAAASUVORK5CYII=') 0 20, crosshair",
|
|
left: 0,
|
|
top: 0,
|
|
// zIndex: 2147483647 - 2,
|
|
});
|
|
}
|
|
|
|
isPainting() {
|
|
return this.painting;
|
|
}
|
|
|
|
private resizeCanvas = () => {
|
|
if (!this.canvas.parentElement) {
|
|
return;
|
|
}
|
|
this.canvas.width = this.canvas.parentElement.offsetWidth;
|
|
this.canvas.height = this.canvas.parentElement.offsetHeight;
|
|
};
|
|
|
|
private lastPosition: [number, number] = [0, 0];
|
|
|
|
start = (p: [number, number]) => {
|
|
this.painting = true;
|
|
this.clrTmID && clearTimeout(this.clrTmID);
|
|
this.lastPosition = p;
|
|
};
|
|
|
|
stop = () => {
|
|
if (!this.painting) {
|
|
return;
|
|
}
|
|
this.painting = false;
|
|
this.fadeOut();
|
|
};
|
|
|
|
move = (p: [number, number]) => {
|
|
if (!this.ctx || !this.painting) {
|
|
return;
|
|
}
|
|
this.ctx.globalAlpha = 1.0;
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(this.lastPosition[0], this.lastPosition[1]);
|
|
this.ctx.lineTo(p[0], p[1]);
|
|
this.ctx.lineWidth = 8;
|
|
this.ctx.lineCap = 'round';
|
|
this.ctx.lineJoin = 'round';
|
|
this.ctx.strokeStyle = 'red';
|
|
this.ctx.stroke();
|
|
this.lastPosition = p;
|
|
};
|
|
|
|
clrTmID: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
private fadeOut() {
|
|
let timeoutID: ReturnType<typeof setTimeout>;
|
|
const fadeStep = () => {
|
|
if (!this.ctx || this.painting) {
|
|
return;
|
|
}
|
|
this.ctx.globalCompositeOperation = 'destination-out';
|
|
this.ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
|
|
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.ctx.globalCompositeOperation = 'source-over';
|
|
timeoutID = setTimeout(fadeStep, 100);
|
|
};
|
|
this.clrTmID = setTimeout(() => {
|
|
clearTimeout(timeoutID);
|
|
this.ctx &&
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}, 3700);
|
|
fadeStep();
|
|
}
|
|
|
|
mount(parent: HTMLElement) {
|
|
parent.appendChild(this.canvas);
|
|
this.ctx = this.canvas.getContext('2d');
|
|
window.addEventListener('resize', this.resizeCanvas);
|
|
this.resizeCanvas();
|
|
}
|
|
|
|
remove() {
|
|
if (this.canvas.parentNode) {
|
|
this.canvas.parentNode.removeChild(this.canvas);
|
|
}
|
|
window.removeEventListener('resize', this.resizeCanvas);
|
|
}
|
|
}
|