placer request
This commit is contained in:
parent
db4b47b9b7
commit
31cf1bf053
@ -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) {
|
||||
|
@ -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
@ -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);
|
||||
});
|
||||
|
@ -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) {
|
||||
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user