Terncode/Pixelcanvas.io-overlay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add coordinate prediction

Browse Source
This commit is contained in:
Terncode
2025-02-15 15:13:54 +01:00
parent e11a847110
commit 58baae133b
6 changed files with 275 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/UI/components/menu.tsx
+16 -2
View File
@@ -1,4 +1,4 @@
import { faCamera, faCaretDown, faCaretUp, faPieChart, faUpload } from "@fortawesome/free-solid-svg-icons";
import { faCamera, faCaretDown, faCaretUp, faLocationCrosshairs, faPieChart, faUpload } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
import styled from "styled-components";
@@ -83,6 +83,7 @@ interface Props {
interface State {
takingCanvasShot: boolean;
canvasShotAvailable: boolean;
locationPrecision: boolean;
}
export class Menu extends React.Component<Props, State> {
@@ -92,6 +93,7 @@ export class Menu extends React.Component<Props, State> {
this.state = {
takingCanvasShot: false,
canvasShotAvailable: true,
locationPrecision: props.cords.highPrecision
};
}
@@ -116,11 +118,15 @@ export class Menu extends React.Component<Props, State> {
Popup.alert(error.name);
}
};
inputElement = (event: React.FormEvent<HTMLInputElement>) => {
const percentage = parseInt((event.target as HTMLInputElement).value);
this.props.onOpacityChange(percentage);
};
togglePrecision = () => {
const value = !this.state.locationPrecision;
this.setState({ locationPrecision: value });
this.props.cords.toggleHigherPrecision(value);
};
screenshot = async () => {
if (this.props.cords.uScale < 0) {
//Popup.alert("Cannot take screenshot at sc")
@@ -148,6 +154,14 @@ export class Menu extends React.Component<Props, State> {
onClick={() => this.props.showChart()}
title="Pixels graph">
<FontAwesomeIcon icon={ faPieChart } />
</Btn>
<Btn
title="Runtime coordinate calculator. Uses more resources"
onClick={this.togglePrecision}
style={{
border: this.state.locationPrecision ? "" : "2px dotted black"
}}>
<FontAwesomeIcon icon={ faLocationCrosshairs } />
</Btn>
<InputRange type="range" min={0} max={100} value={this.props.opacity} onInput={this.inputElement} />
<PercentageDiv>{this.props.opacity}%</PercentageDiv>
src/UI/components/overlay.tsx
+2
View File
@@ -46,6 +46,7 @@ export class Overlay extends React.Component<Props, State> {
this.ref.current!.style.top = this.ref.current!.style.left = `0px`;
this.props.cords.on(CordType.Url, this.draw);
this.props.cords.on(CordType.UrlPredict, this.draw);
this.props.cords.on(CordType.Div, this.updateIfMouseDown);
window.addEventListener("mousemove", this.onMouseMove);
window.addEventListener("touchmove", this.onTouchMove);
@@ -60,6 +61,7 @@ export class Overlay extends React.Component<Props, State> {
}
componentWillUnmount() {
this.props.cords.off(CordType.Url, this.draw);
this.props.cords.off(CordType.UrlPredict, this.draw);
this.props.cords.off(CordType.Div, this.updateIfMouseDown);
window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("touchmove", this.onTouchMove);
src/index.ts
+1 -1
View File
@@ -18,7 +18,7 @@ async function main() {
await store.load();
const injector = new Injector(store);
await injector.inject();
const coordinates = new Coordinates(injector);
const coordinates = new Coordinates(injector, store);
await coordinates.init();
createUI(store,storage, coordinates, palette);
src/lib/coordinates.ts
+54 -25
View File
@@ -1,11 +1,14 @@
import { CHUNK_SIZE } from "../constants";
import { CoordinatePredictor } from "./coordinatesPredictor";
import { Listener, BasicEventEmitter } from "./eventEmitter";
import { InjectEvents, Injector } from "./injector";
import { Store } from "./store";
import { waitForDraw } from "./utils";
export enum CordType {
Div,
Url
Url,
UrlPredict
}
export class Coordinates {
@@ -20,19 +23,56 @@ export class Coordinates {
private _uy = 0;
private _uScale = 0;
private down?: number[];
private coordinatePredictor: CoordinatePredictor;
private _highPrecision = false;
//div: HTMLDivElement;
constructor(injector: Injector) {
constructor(injector: Injector, private storage: Store) {
injector.on(InjectEvents.UrlChange, url => {
this.onUrlCordsUpdate(url);
});
this.onUrlCordsUpdate();
this.coordinatePredictor = new CoordinatePredictor(this, (x, y, scale) => {
this._ux = Math.round(x);
this._uy = Math.round(y);
this._uScale = Math.round(scale);
this.emitter.emit(CordType.UrlPredict, x, y, scale);
});
}
window.addEventListener("touchstart", (event) => {
toggleHigherPrecision(value: boolean) {
if (this._highPrecision === value) {
return;
}
if (value) {
this.coordinatePredictor.enable();
window.removeEventListener("touchstart", this.touchStart);
window.removeEventListener("touchmove", this.touchMove);
window.removeEventListener("touchend", this.endMovement);
window.removeEventListener("mousedown", this.mouseDown);
window.removeEventListener("mousemove", this.mouseMove);
window.removeEventListener("mouseup", this.endMovement);
} else {
this.coordinatePredictor.disable();
window.addEventListener("touchstart", this.touchStart);
window.addEventListener("touchmove", this.touchMove);
window.addEventListener("touchend", this.endMovement);
window.addEventListener("mousedown", this.mouseDown);
window.addEventListener("mousemove", this.mouseMove);
window.addEventListener("mouseup", this.endMovement);
}
this.storage.toggleHighPrecision(value);
this._highPrecision = value;
}
get highPrecision() {
return this._highPrecision;
}
private touchStart = (event: TouchEvent) => {
if (event.target instanceof HTMLCanvasElement && event.touches.length === 1) {
this.down = [event.touches[0].clientX, event.touches[0].clientY, this.ux, this.uy];
}
});
window.addEventListener("touchmove", event => {
};
private touchMove = (event: TouchEvent) => {
if (this.down && event.touches.length === 1) {
const mx = Math.round((this.down[0] - event.touches[0].clientX) / Math.pow(2, this._uScale));
const my = Math.round((this.down[1] - event.touches[0].clientY) / Math.pow(2, this._uScale));
@@ -44,16 +84,13 @@ export class Coordinates {
this.emitter.emit(CordType.Url, this._ux, this._uy, this._uScale);
}
}
});
window.addEventListener("touchend", () => {
this.down = undefined;
});
window.addEventListener("mousedown", event => {
};
private mouseDown = (event: MouseEvent) => {
if (event.target instanceof HTMLCanvasElement) {
this.down = [event.x, event.y, this.ux, this.uy];
}
});
window.addEventListener("mousemove", event => {
};
private mouseMove = (event: MouseEvent) => {
if (this.down) {
const mx = Math.round((this.down[0] - event.x) / Math.pow(2, this._uScale));
const my = Math.round((this.down[1] - event.y) / Math.pow(2, this._uScale));
@@ -65,20 +102,10 @@ export class Coordinates {
this.emitter.emit(CordType.Url, this._ux, this._uy, this._uScale);
}
}
});
window.addEventListener("mouseup", () => {
};
private endMovement = () => {
this.down = undefined;
});
// window.addEventListener("wheel" , event => {
// const s = this._uScale;
// if (event.deltaY > 0) {
// this._uScale = s / 2;
// } else {
// this._uScale = s * 2;
// }
// }, true);
}
};
on(event: CordType, listener: Listener<[number, number, number]>) {
this.emitter.on(event, listener);
@@ -105,6 +132,8 @@ export class Coordinates {
}
await waitForDraw();
}
const value = await this.storage.enabledHighPrecision();
this.toggleHigherPrecision(value);
}
stop() {
src/lib/coordinatesPredictor.ts
+166
View File
@@ -0,0 +1,166 @@
import { CHUNK_SIZE } from "../constants";
import { Coordinates, CordType } from "./coordinates";
export class CoordinatePredictor {
private frame?: number;
tileRef?: HTMLCanvasElement;
private lastX?: number;
private lastY?: number;
private lastScale?: number;
private cords: number[];
constructor(
private coordinates: Coordinates,
private predict: (x: number, y: number, scale: number) => void
) {
coordinates.on(CordType.Url, (x, y, scale) => {
if (this.cords) {
this.cords[0] = x;
this.cords[1] = y;
this.cords[2] = scale;
} else {
this.cords = [x, y, scale];
}
});
}
private cordUpdate = (x: number, y: number, s: number) => {
this.cords = [x, y, s];
};
syncCords() {
const cords = this.coordinates;
this.cordUpdate(cords.ux, cords.uy, cords.uScale);
}
enable() {
if (this.frame)
return;
this.syncCords();
this.coordinates.on(CordType.Url, this.cordUpdate);
this.frame = requestAnimationFrame(this.tick);
}
disable() {
if (this.frame) {
this.coordinates.off(CordType.Url, this.cordUpdate);
cancelAnimationFrame(this.frame);
this.frame = undefined;
}
}
get enabled() {
return !!this.frame;
}
tick = () => {
if (!this.tileRef || !document.body.contains(this.tileRef)) {
this.tileRef = [...document.getElementsByTagName("canvas")]
.find(e => e.classList.contains("leaflet-tile"));
if (this.tileRef) {
const rect = this.tileRef?.getBoundingClientRect();
if (rect) {
this.syncCords();
this.lastScale = this.getScale(rect.width);
this.lastX = rect?.left;
this.lastY = rect?.top;
}
this.nextFrame();
return;
}
} else {
const rect = this.tileRef?.getBoundingClientRect();
if (rect) {
if (this.lastX != null && this.lastY != null && this.lastScale != null) {
const scale = this.getScale(rect.width);
const x = rect?.left;
const y = rect?.top;
if (x !== this.lastX || y !== this.lastY || scale != this.lastScale) {
const mx = this.lastX - rect?.left;
const my = this.lastY - rect?.top;
//const ms = this.lastScale - this.lastScale;
// console.log(this.lastX - rect?.left, this.lastY - rect?.top, scale);
// console.log(x / this.lastScale);
// console.log(y / this.lastScale);
this.lastX = x;
this.lastY = y;
this.lastScale = scale;
this.cords[0] += (mx / (rect.width / CHUNK_SIZE));
this.cords[1] += (my / (rect.width / CHUNK_SIZE));
this.predict(this.cords[0], this.cords[1], this.cords[2]);
this.cords[2] = scale;
}
}
}
}
this.nextFrame();
};
private nextFrame() {
if (this.frame) {
this.frame = requestAnimationFrame(this.tick);
}
}
private getScale(width: number) {
const scale = width / CHUNK_SIZE;
return Math.log(scale) / Math.log(2);
}
// private get centerCanvas() {
// const hww = window.innerWidth / 2;
// const hhw = window.innerHeight / 2;
// const canvasObject = [
// ...document.getElementsByTagName("canvas")]
// .filter(c => c.classList.contains("leaflet-tile"))
// .map(c => {
// const bounds = c.getBoundingClientRect();
// return {
// canvas: c,
// bounds: {
// width: bounds.width,
// height: bounds.height,
// top: bounds.top,
// bottom: bounds.bottom,
// left: bounds.left,
// right: bounds.right,
// },
// };
// }).find(r => hww > r.bounds.left && hww < r.bounds.right && hhw > r.bounds.top && hhw < r.bounds.bottom);
// if (canvasObject) {
// const ratio = canvasObject.canvas.width / CHUNK_SIZE;
// if (ratio === 2) { // scale -1
// const hw = canvasObject.bounds.left + canvasObject.bounds.width / 2;
// const hh = canvasObject.bounds.top + canvasObject.bounds.height / 2;
// const chunkW = CHUNK_SIZE / canvasObject.canvas.width;
// const chunkH = CHUNK_SIZE / canvasObject.canvas.height;
// canvasObject.bounds.width = chunkW;
// canvasObject.bounds.height = chunkH;
// if (hww <= hw && hhw <= hh) {
// // top left
// } else if (hww > hw && hhw < hh) {
// // top right
// canvasObject.bounds.top += chunkW;
// } else if (hww > hw && hhw > hh) {
// // bottom left
// canvasObject.bounds.left += chunkH;
// } else {
// // bottom left right
// canvasObject.bounds.left += chunkW;
// canvasObject.bounds.top += chunkH;
// }
// canvasObject.bounds.bottom = canvasObject.bounds.top + chunkW;
// canvasObject.bounds.right = canvasObject.bounds.left + chunkH;
// return null;
// }
// canvasObject.bounds.width /= ratio;
// canvasObject.bounds.height /= ratio;
// canvasObject.bounds.right = canvasObject.bounds.left + canvasObject.bounds.width;
// canvasObject.bounds.bottom = canvasObject.bounds.bottom + canvasObject.bounds.height;
// }
// return canvasObject;
// }
}
src/lib/store.ts
+8 -1
View File
@@ -38,10 +38,10 @@ export interface PixelLogEx extends PixelLog {
}
export class Store implements LoadUnload {
private readonly STORAGE_KEY_HIGH_PRECISION = "_high-precision";
private readonly STORAGE_KEY_MURAL = "_murals";
private readonly STORAGE_KEY_SELECTED = "_mural";
private readonly STORAGE_KEY_LOG_STORE = "records";
private readonly STORAGE_KEY_PIXEL_LOG = "_pixel-log";
private _murals: MuralEx[] = [];
private _selected?: MuralEx;
private emitter = new BasicEventEmitter();
@@ -290,6 +290,13 @@ export class Store implements LoadUnload {
this.emit(StoreEvents.MuralPhantomOverlay);
}
}
async enabledHighPrecision() {
return (await this.storage.getItem<boolean>(this.STORAGE_KEY_HIGH_PRECISION)) ?? false;
}
toggleHighPrecision(value: boolean) {
return this.storage.setItem(this.STORAGE_KEY_HIGH_PRECISION, value);
}
get murals() {
return this._murals;
}