preliminary mobile support

This commit is contained in:
Evert Prants 2022-04-03 15:48:43 +03:00
parent 6515b151fc
commit aac1d8d280
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
3 changed files with 46 additions and 6 deletions

View File

@ -39,6 +39,8 @@ export class ViewCanvas {
private _screencursory = 0; private _screencursory = 0;
private _dragging = false; private _dragging = false;
private _pinching = false;
private _previousPinchLength = 0;
constructor() {} constructor() {}
@ -102,12 +104,12 @@ export class ViewCanvas {
this._wrapper.append(this.picker.element); this._wrapper.append(this.picker.element);
document.body.append(this._wrapper); document.body.append(this._wrapper);
this._wrapper.addEventListener('pointermove', (ev: MouseEvent) => { const dragEvent = (x: number, y: number) => {
const currentX = this._mousex; const currentX = this._mousex;
const currentY = this._mousey; const currentY = this._mousey;
this._mousex = ev.clientX; this._mousex = x;
this._mousey = ev.clientY; this._mousey = y;
const offsetX = currentX - this._mousex; const offsetX = currentX - this._mousex;
const offsetY = currentY - this._mousey; const offsetY = currentY - this._mousey;
@ -128,7 +130,11 @@ export class ViewCanvas {
this.moveCanvas(); this.moveCanvas();
this.moveCursor(); this.moveCursor();
} }
}); };
this._wrapper.addEventListener('mousemove', (ev: MouseEvent) =>
dragEvent(ev.clientX, ev.clientY),
);
this._wrapper.addEventListener('mousedown', (ev: MouseEvent) => { this._wrapper.addEventListener('mousedown', (ev: MouseEvent) => {
this._mousex = ev.clientX; this._mousex = ev.clientX;
@ -145,10 +151,42 @@ export class ViewCanvas {
this._mousex = touch.pageX; this._mousex = touch.pageX;
this._mousey = touch.pageY; this._mousey = touch.pageY;
this._dragging = true; this._dragging = true;
if (ev.touches.length === 2) {
this._pinching = true;
}
});
this._wrapper.addEventListener('touchmove', (ev: TouchEvent) => {
ev.preventDefault();
if (ev.touches.length === 2 && this._pinching) {
const pinchScale = Math.hypot(
ev.touches[0].pageX - ev.touches[1].pageX,
ev.touches[0].pageY - ev.touches[1].pageY,
);
if (this._previousPinchLength) {
const delta = pinchScale / this._previousPinchLength;
const scaleX = (ev.touches[0].clientX - this._posx) / this._zoom;
const scaleY = (ev.touches[0].clientY - this._posy) / this._zoom;
delta > 0 ? (this._zoom *= delta) : (this._zoom /= delta);
this._zoom = clamp(this._zoom, 1, 100);
this._posx = ev.touches[0].clientX - scaleX * this._zoom;
this._posy = ev.touches[0].clientY - scaleY * this._zoom;
}
this._previousPinchLength = pinchScale;
}
dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
}); });
this._wrapper.addEventListener('touchend', (ev: TouchEvent) => { this._wrapper.addEventListener('touchend', (ev: TouchEvent) => {
this._dragging = false; this._dragging = false;
this._pinching = false;
this._previousPinchLength = 0;
}); });
this._wrapper.addEventListener('pointerleave', (ev: MouseEvent) => { this._wrapper.addEventListener('pointerleave', (ev: MouseEvent) => {

View File

@ -174,7 +174,7 @@ setInterval(() => {
/// ///
canvas.initialize().then(() => canvas.initialize().then(() =>
server.listen(config.server.port, 'localhost', () => { server.listen(config.server.port, '0.0.0.0', () => {
console.log(`Listening at http://localhost:${config.server.port}/`); console.log(`Listening at http://localhost:${config.server.port}/`);
}), }),
); );

View File

@ -25,7 +25,9 @@ module.exports = {
resolve: { resolve: {
extensions: ['.ts', '.js'], extensions: ['.ts', '.js'],
}, },
plugins: [new HtmlWebpackPlugin(), new MiniCssExtractPlugin()], plugins: [new HtmlWebpackPlugin({
title: 'IcyDraw canvas - Draw together!'
}), new MiniCssExtractPlugin()],
output: { output: {
path: path.resolve(__dirname, 'dist', 'public'), path: path.resolve(__dirname, 'dist', 'public'),
filename: 'bundle.js', filename: 'bundle.js',