keep the placer tag visible when moved only a little

This commit is contained in:
Evert Prants 2022-04-04 17:51:36 +03:00
parent 9b51620239
commit cf521f9434
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
2 changed files with 75 additions and 29 deletions

View File

@ -12,14 +12,18 @@ export class ViewCanvas {
private _placeFn?: (placement: Placement) => void; private _placeFn?: (placement: Placement) => void;
private _getPlacerFn?: (x: number, y: number) => Promise<CanvasRecord>; private _getPlacerFn?: (x: number, y: number) => Promise<CanvasRecord>;
private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement; private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement;
private _ctx = this._canvas.getContext('2d');
private _wrapper = $('<div class="canvas__wrapper">'); private _wrapper = $('<div class="canvas__wrapper">');
private _zoomWrapper = $('<div class="canvas__zoom">'); private _zoomWrapper = $('<div class="canvas__zoom">');
private _eventWrapper = $('<div class="canvas__container">'); private _eventWrapper = $('<div class="canvas__container">');
private _cursor = $('<div class="canvas__cursor">'); private _cursor = $('<div class="canvas__cursor">');
private _coods = $('<div class="canvas__coordinates">'); private _coods = $('<div class="canvas__coordinates">');
private _userInfo = $('<a class="canvas__user">'); private _userInfo = $('<a class="canvas__user">');
private _ctx = this._canvas.getContext('2d');
private _size = 1000; private _size = 1000;
private _minZoom = 1;
private _maxZoom = 100;
private _viewWidth = 0; private _viewWidth = 0;
private _viewHeight = 0; private _viewHeight = 0;
@ -31,13 +35,12 @@ export class ViewCanvas {
private _mousex = 0; private _mousex = 0;
private _mousey = 0; private _mousey = 0;
private _relmousex = 0;
private _relmousey = 0;
private _cursorx = 0; private _cursorx = 0;
private _cursory = 0; private _cursory = 0;
private _relcursorx = 0; private _highlightedTileX = 0;
private _relcursory = 0; private _highlightedTileY = 0;
private _previousTileX = 0;
private _previousTileY = 0;
private _screencursorx = 0; private _screencursorx = 0;
private _screencursory = 0; private _screencursory = 0;
@ -67,8 +70,6 @@ export class ViewCanvas {
} }
public moveCursor(): void { public moveCursor(): void {
this._resetPlacerTag();
// Apparent size of the canvas after scaling it // Apparent size of the canvas after scaling it
const realSize = this._zoom * this._size; const realSize = this._zoom * this._size;
// The difference between the real canvas size and apparent size // The difference between the real canvas size and apparent size
@ -84,33 +85,43 @@ export class ViewCanvas {
clamp(this._viewHeight / 2, screenY, screenY + realSize), clamp(this._viewHeight / 2, screenY, screenY + realSize),
); );
// Store previous canvas position
this._previousTileX = this._highlightedTileX;
this._previousTileY = this._highlightedTileY;
// Position of the cursor on the canvas // Position of the cursor on the canvas
this._relcursorx = clamp( this._highlightedTileX = clamp(
Math.floor((this._cursorx - screenX) / this._zoom), Math.floor((this._cursorx - screenX) / this._zoom),
0, 0,
this._size - 1, this._size - 1,
); );
this._relcursory = clamp( this._highlightedTileY = clamp(
Math.floor((this._cursory - screenY) / this._zoom), Math.floor((this._cursory - screenY) / this._zoom),
0, 0,
this._size - 1, this._size - 1,
); );
this._screencursorx = this._relcursorx * this._zoom + screenX; // Remove placer tag if the highlighted tile position has changed
this._screencursory = this._relcursory * this._zoom + screenY; const skipRequest = this._resetPlacerTag();
// Position the cursor on the screen so that it is snapped to the current tile
this._screencursorx = this._highlightedTileX * this._zoom + screenX;
this._screencursory = this._highlightedTileY * this._zoom + screenY;
this._cursor.style.transform = `translate(${this._screencursorx}px, ${this._screencursory}px)`; this._cursor.style.transform = `translate(${this._screencursorx}px, ${this._screencursory}px)`;
this._cursor.style.width = `${this._zoom}px`; this._cursor.style.width = `${this._zoom}px`;
this._cursor.style.height = `${this._zoom}px`; this._cursor.style.height = `${this._zoom}px`;
this._coods.innerText = `(${this._relcursorx}, ${ // Update coordinate display
this._relcursory this._coods.innerText = `(${this._highlightedTileX}, ${
this._highlightedTileY
}) ${this._zoom.toFixed(2)}x`; }) ${this._zoom.toFixed(2)}x`;
this._updateURL(); this._updateURL();
if (this._zoom > 20) { // Get placer tag and tile color info for picker button
this._getPlacerAt(this._relcursorx, this._relcursory); if (this._zoom > 20 && !skipRequest) {
this._getPlacerAt(this._highlightedTileX, this._highlightedTileY);
} }
} }
@ -232,7 +243,7 @@ export class ViewCanvas {
const scaleY = (ev.clientY - this._posy) / this._zoom; const scaleY = (ev.clientY - this._posy) / this._zoom;
ev.deltaY < 0 ? (this._zoom *= 1.2) : (this._zoom /= 1.2); ev.deltaY < 0 ? (this._zoom *= 1.2) : (this._zoom /= 1.2);
this._zoom = clamp(this._zoom, 1, 100); this._zoom = clamp(this._zoom, this._minZoom, this._maxZoom);
this._posx = ev.clientX - scaleX * this._zoom; this._posx = ev.clientX - scaleX * this._zoom;
this._posy = ev.clientY - scaleY * this._zoom; this._posy = ev.clientY - scaleY * this._zoom;
@ -248,8 +259,8 @@ export class ViewCanvas {
this.picker.registerOnPlace((color) => { this.picker.registerOnPlace((color) => {
if (this._placeFn) { if (this._placeFn) {
this._placeFn({ this._placeFn({
x: this._relcursorx, x: this._highlightedTileX,
y: this._relcursory, y: this._highlightedTileY,
c: color, c: color,
t: Date.now(), t: Date.now(),
}); });
@ -351,8 +362,8 @@ export class ViewCanvas {
private _updateURL = debounce(() => { private _updateURL = debounce(() => {
const urlelements = new URLSearchParams({ const urlelements = new URLSearchParams({
px: this._relcursorx.toString(), px: this._highlightedTileX.toString(),
py: this._relcursory.toString(), py: this._highlightedTileY.toString(),
z: this._zoom.toFixed(2), z: this._zoom.toFixed(2),
}); });
@ -374,7 +385,7 @@ export class ViewCanvas {
}); });
} }
}, },
1000, 500,
); );
private _getPlacerAt(x: number, y: number) { private _getPlacerAt(x: number, y: number) {
@ -391,17 +402,36 @@ export class ViewCanvas {
this._placerTag = $('<div class="canvas__cursor-placer">'); this._placerTag = $('<div class="canvas__cursor-placer">');
this._placerTag.innerText = placer.user; this._placerTag.innerText = placer.user;
this._placerTag.style.setProperty('--base-size', `${this._zoom / 2}px`); this._placerTag.style.setProperty('--base-size', `${this._zoom / 2}px`);
this._placerTag.style.setProperty('--base-scale', `${this._zoom / 100}`); this._placerTag.style.setProperty(
'--base-scale',
`${this._zoom / this._maxZoom}`,
);
this._cursor.append(this._placerTag); this._cursor.append(this._placerTag);
} }
private _resetPlacerTag(): void { private _resetPlacerTag(): boolean {
if (
this._previousTileX === this._highlightedTileX &&
this._previousTileY === this._highlightedTileY &&
this._placerTag
) {
this._placerTag.style.setProperty('--base-size', `${this._zoom / 2}px`);
this._placerTag.style.setProperty(
'--base-scale',
`${this._zoom / this._maxZoom}`,
);
return true;
}
this._placerRequestTime = 0; this._placerRequestTime = 0;
this.picker.setPickColor(null); this.picker.setPickColor(null);
if (this._placerTag) { if (this._placerTag) {
this._cursor.removeChild(this._placerTag); this._cursor.removeChild(this._placerTag);
this._placerTag = null; this._placerTag = null;
} }
return false;
} }
private _resetPositionOrCenter(): void { private _resetPositionOrCenter(): void {
@ -419,22 +449,37 @@ export class ViewCanvas {
} }
if (obj.get('z')) { if (obj.get('z')) {
this._zoom = clamp(parseFloat(obj.get('z')), 1, 100); this._zoom = clamp(
parseFloat(obj.get('z')),
this._minZoom,
this._maxZoom,
);
} }
if (obj.get('px')) { if (obj.get('px')) {
this._relcursorx = clamp(parseInt(obj.get('px'), 10), 0, this._size - 1); this._highlightedTileX = clamp(
parseInt(obj.get('px'), 10),
0,
this._size - 1,
);
} }
if (obj.get('py')) { if (obj.get('py')) {
this._relcursory = clamp(parseInt(obj.get('py'), 10), 0, this._size - 1); this._highlightedTileY = clamp(
parseInt(obj.get('py'), 10),
0,
this._size - 1,
);
} }
this._cursorx = this._viewWidth / 2; this._cursorx = this._viewWidth / 2;
this._cursory = this._viewHeight / 2; this._cursory = this._viewHeight / 2;
this._posx = -Math.ceil(this._relcursorx * this._zoom - this._cursorx) - 1; this._posx =
this._posy = -Math.ceil(this._relcursory * this._zoom - this._cursory); -Math.ceil(this._highlightedTileX * this._zoom - this._cursorx) - 1;
this._posy = -Math.ceil(
this._highlightedTileY * this._zoom - this._cursory,
);
this.moveCanvas(); this.moveCanvas();
this.moveCursor(); this.moveCursor();

File diff suppressed because one or more lines are too long