placer request

This commit is contained in:
Evert Prants 2022-04-03 17:02:04 +03:00
parent db4b47b9b7
commit 31cf1bf053
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
6 changed files with 134 additions and 9 deletions

View File

@ -1,6 +1,6 @@
import { convertHex } from '../common/convert';
import { clamp, debounce } from '../common/helper';
import { Placement } from '../common/types/canvas';
import { CanvasRecord, Placement } from '../common/types/canvas';
import { IcyNetUser } from '../server/types/user';
import { Picker } from './picker';
import { $ } from './utils/dom';
@ -9,7 +9,8 @@ export class ViewCanvas {
public picker = new Picker();
private _user?: IcyNetUser;
private _fn?: (placement: Placement) => void;
private _placeFn?: (placement: Placement) => void;
private _getPlacerFn?: (x: number, y: number) => Promise<CanvasRecord>;
private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement;
private _ctx = this._canvas.getContext('2d');
private _wrapper = $('<div class="canvas__wrapper">');
@ -41,6 +42,8 @@ export class ViewCanvas {
private _dragging = false;
private _pinching = false;
private _previousPinchLength = 0;
private _placerTag: HTMLElement | null = null;
private _placerRequestTime: number = 0;
constructor() {}
@ -61,6 +64,8 @@ export class ViewCanvas {
}
public moveCursor(): void {
this._resetPlacerTag();
// Zoom multiplier
// Apparent size of the canvas after scaling it
const realSize = this._zoom * this._size;
@ -93,6 +98,10 @@ export class ViewCanvas {
}) ${this._zoom.toFixed(2)}x`;
this._updateURL();
if (this._zoom > 40) {
this._getPlacerAt(this._relcursorx, this._relcursory);
}
}
public initialize(): void {
@ -218,8 +227,8 @@ export class ViewCanvas {
});
this.picker.registerOnPlace((color) => {
if (this._fn) {
this._fn({
if (this._placeFn) {
this._placeFn({
x: this._relcursorx,
y: this._relcursory,
c: color,
@ -302,7 +311,13 @@ export class ViewCanvas {
}
public registerOnPlace(fn: (placement: Placement) => void): void {
this._fn = fn;
this._placeFn = fn;
}
public registerGetPlacer(
fn: (x: number, y: number) => Promise<CanvasRecord>,
): void {
this._getPlacerFn = fn;
}
public setUser(user: IcyNetUser): void {
@ -324,6 +339,46 @@ export class ViewCanvas {
);
}, 500);
private _getPlacerAtWaiter = debounce(
(x: number, y: number, order: number) => {
console.log(this._placerRequestTime);
if (this._placerRequestTime === order) {
this._getPlacerFn(x, y).then((placer) => {
if (placer && this._placerRequestTime === order) {
this._showPlacerTag(placer);
}
});
}
},
1000,
);
private _getPlacerAt(x: number, y: number) {
if (!this._getPlacerFn) {
return;
}
const stamp = Date.now();
this._placerRequestTime = +stamp;
this._getPlacerAtWaiter(x, y, stamp);
}
private _showPlacerTag(placer: CanvasRecord): void {
this._placerTag = $('<div class="canvas__cursor-placer">');
this._placerTag.innerText = placer.user;
this._placerTag.style.setProperty('--base-size', `${this._zoom / 1.5}px`);
this._placerTag.style.setProperty('--base-scale', `${this._zoom / 100}`);
this._cursor.append(this._placerTag);
}
private _resetPlacerTag(): void {
this._placerRequestTime = 0;
if (this._placerTag) {
this._cursor.removeChild(this._placerTag);
this._placerTag = null;
}
}
private _resetPositionOrCenter(): void {
const search = window.location.search.substring(1);
if (!search?.length) {

View File

@ -4,6 +4,9 @@ import { ViewCanvas } from './canvas';
const socket = SocketIO();
const canvas = new ViewCanvas();
let placerRequestResolve: any;
let placerRequest: any;
canvas.initialize();
socket.on('connect', () => {
@ -32,6 +35,25 @@ socket.on('colorack', ({ x, y, c }: Placement) => {
canvas.setPixel(x, y, c);
});
socket.on('placerat', (response: CanvasRecord) => {
if (placerRequest) {
placerRequestResolve(response);
}
});
canvas.registerOnPlace((placement) => {
socket.emit('color', placement);
});
canvas.registerGetPlacer((x: number, y: number) => {
if (placerRequest) {
placerRequestResolve(null);
}
placerRequest = new Promise((resolve) => {
placerRequestResolve = resolve;
});
socket.emit('getplacer', { x, y, reqt: Date.now() });
return placerRequest;
});

File diff suppressed because one or more lines are too long

View File

@ -157,6 +157,17 @@ io.on('connection', (socket) => {
socket.emit('colorack', { c, x, y, t });
});
socket.on('getplacer', ({ x, y, reqt }) => {
canvas.history
.getPlacerAt(x, y)
.then((placer) => {
if (placer) {
socket.emit('placerat', { ...placer, reqt });
}
})
.catch((e) => console.error(e));
});
socket.on('disconnect', () => {
connections.splice(connections.indexOf(socket), 1);
});

View File

@ -6,16 +6,16 @@ import { Imager } from './imager';
export class Canvas {
private _fn?: (change: CanvasRecord) => void;
private _canvas!: Uint32Array;
private _history = new History();
private _imager = new Imager(this.size);
public history = new History();
constructor(public size = 1000) {}
public async initialize(): Promise<void> {
this._imager.registerGetCanvas(() => this._canvas);
await this._history.initialize();
await this.history.initialize();
const image = await this._imager.load();
if (!image) {
@ -51,7 +51,7 @@ export class Canvas {
ts: Date.now(),
};
this._history.insert(record);
this.history.insert(record);
this._canvas[index] = color;
if (this._fn) {

View File

@ -35,4 +35,12 @@ export class History {
user,
);
}
async getPlacerAt(x: number, y: number): Promise<CanvasRecord | undefined> {
return this.db.get<CanvasRecord>(
`SELECT * FROM Placement WHERE x = ? AND y = ? ORDER BY ts DESC`,
x,
y,
);
}
}