keep the placer tag visible when moved only a little
This commit is contained in:
parent
9b51620239
commit
cf521f9434
@ -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
Loading…
Reference in New Issue
Block a user