Peaceultime/vtt-mapper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Starting to work on input controls

Browse Source
This commit is contained in:
Peaceultime
2024-06-16 22:59:17 +02:00
parent c01f4bd8c6
commit a70e599c14
10 changed files with 610 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/input.class.ts
View File

@@ -167,12 +167,12 @@ export default class Input
}
static #keydown(e: KeyboardEvent): void
{
Input.#keys[e.key] = true;
Input.#keys[e.key.toLowerCase()] = true;
}
static #keyup(e: KeyboardEvent): void
{
Input.#keys[e.key] = false;
Input.#keys[e.key.toLowerCase()] = false;
Input.#inputCb && Input.#inputCb(e.key);
Input.#inputCb && Input.#inputCb(e.key.toLowerCase());
}
}

16
src/renderer/renderer.class.ts
View File

@@ -3,7 +3,18 @@ import { RESOLUTION_X, RESOLUTION_Y } from '../consts';
import Stats from 'stats.js';
import { Point } from '../physics/common';
import Selector from './selector.class';
import Asset from '../assets/asset.class';
export enum CursorType
{
default = "default",
pointer = "pointer",
move = "move",
updown = "ns-resize",
leftright = "ew-resize",
nesw = "nesw-resize",
nwse = "nwse-resize",
}
export default class Renderer
{
static scene: Three.Scene;
@@ -87,6 +98,7 @@ export default class Renderer
this.#stats.begin();
Selector.update();
this.renderer.render(this.scene, this.camera);
Asset.quadtree.cleanup();
this.#stats.end();
}
static startRendering(): void
@@ -97,4 +109,8 @@ export default class Renderer
{
this.renderer.setAnimationLoop(null);
}
static cursor(type?: CursorType): void
{
Renderer.canvas.style.setProperty("cursor", type ?? CursorType.default);
}
}

106
src/renderer/selector.class.ts
View File

@@ -1,12 +1,22 @@
import * as Three from "three";
import Asset from "../assets/asset.class";
import { Point } from "../physics/common";
import Renderer from "./renderer.class";
import { Point, intersects, intersectsAsset, sqrtLen } from "../physics/common";
import Renderer, { CursorType } from "./renderer.class";
import { QUAD } from '../consts';
import { DragMode } from "../main";
const _vector = new Three.Vector3();
const orientation = {
0: { x: -1, y: -1 },
1: { x: -1, y: 1 },
2: { x: -1, y: 1 },
3: { x: -1, y: 1 },
};
export default class Selector
{
static #assets: Asset[];
static #assets: Asset[] = [];
static #selected: boolean = false;
static #previousZoom: number = 1;
@@ -68,6 +78,8 @@ export default class Selector
}
static ghost(asset: Asset): void
{
Renderer.cursor(asset && !asset.selected ? CursorType.pointer : undefined);
if(!asset)
{
Selector.#ghostMesh.visible = false;
@@ -81,11 +93,18 @@ export default class Selector
}
static select(assets: Asset[]): void
{
for (let i = 0; i < Selector.#assets.length; i++) {
Selector.#assets[i].selected = false;
}
Selector.#assets = assets;
Selector.hide();
if(assets.length <= 0)
{
Selector.#selected = false;
return;
}
Selector.#selected = true;
@@ -96,6 +115,8 @@ export default class Selector
minY = Math.min(minY, assets[i].aabb.y1);
maxX = Math.max(maxX, assets[i].aabb.x2);
maxY = Math.max(maxY, assets[i].aabb.y2);
assets[i].selected = true;
}
const scale = Math.max((maxX - minX) / 2, (maxY - minY) / 2)
@@ -125,6 +146,7 @@ export default class Selector
for(let i = 0; i < assets.length; i++)
{
const index = Selector.#assets.indexOf(assets[i]);
assets[i].selected = false;
if(index === -1)
Selector.#assets.push(assets[i]);
@@ -135,7 +157,11 @@ export default class Selector
}
static clear(): void
{
for(let i = 0; i < Selector.#assets.length; i++)
Selector.#assets[i].selected = false;
Selector.#assets = [];
Selector.#selected = false;
Selector.hide();
}
@@ -162,4 +188,78 @@ export default class Selector
Selector.gizmoScale[3].scale.set(20 / Renderer.zoom, 20 / Renderer.zoom, 1);
}
}
static mousemove(x: number, y: number): { mode: DragMode, details?: number }
{
if(!Selector.selected)
return { mode: DragMode.select };
const minX = Selector.#selectionMesh.box.min.x,
minY = Selector.#selectionMesh.box.min.y,
maxX = Selector.#selectionMesh.box.max.x,
maxY = Selector.#selectionMesh.box.max.y;
if (sqrtLen(x, y, Selector.gizmoScale[0].position.x, Selector.gizmoScale[0].position.y) <= 500 / Renderer.zoom)
{
Renderer.cursor(CursorType.nesw);
return { mode: DragMode.scale, details: 0 };
}
else if (sqrtLen(x, y, Selector.gizmoScale[1].position.x, Selector.gizmoScale[1].position.y) <= 500 / Renderer.zoom)
{
Renderer.cursor(CursorType.nwse);
return { mode: DragMode.scale, details: 1 };
}
else if (sqrtLen(x, y, Selector.gizmoScale[2].position.x, Selector.gizmoScale[2].position.y) <= 500 / Renderer.zoom)
{
Renderer.cursor(CursorType.nwse);
return { mode: DragMode.scale, details: 2 };
}
else if (sqrtLen(x, y, Selector.gizmoScale[3].position.x, Selector.gizmoScale[3].position.y) <= 500 / Renderer.zoom)
{
Renderer.cursor(CursorType.nesw);
return { mode: DragMode.scale, details: 3 };
}
else if (intersects(x, y, x, y, minX, minY, maxX, maxY))
{
Renderer.cursor(CursorType.move);
return { mode: DragMode.move };
}
return { mode: DragMode.select };
}
static move(x: number, y: number): void
{
Selector.selection.forEach(e => e.moveTo(e.posX + x, e.posY + y).update(false));
Asset.instance.computeBoundingBox();
Asset.instance.computeBoundingSphere();
Selector.#selectionMesh.box.translate(_vector.set(x, y, 0));
Selector.#ghostMesh.box.translate(_vector.set(x, y, 0));
Selector.gizmoScale[0].position.add({ x: x, y: y, z: 0 });
Selector.gizmoScale[1].position.add({ x: x, y: y, z: 0 });
Selector.gizmoScale[2].position.add({ x: x, y: y, z: 0 });
Selector.gizmoScale[3].position.add({ x: x, y: y, z: 0 });
}
static scale(dragFrom: number, x: number, y: number): void
{
console.log(dragFrom, x, y);
//@ts-ignore
x *= orientation[dragFrom].x;
//@ts-ignore
y *= orientation[dragFrom].y;
Selector.selection.forEach(e => e.scaleTo(e.scaleX + x, e.scaleY + y).moveTo(e.posX - x / 2, e.posY - y / 2).update(false));
Selector.#selectionMesh.box.translate(_vector.set(-x / 2, -y / 2, 0));
Selector.gizmoScale[0].position.add({ x: -x / 2, y: -y / 2, z: 0 });
Selector.gizmoScale[1].position.add({ x: -x / 2, y: -y / 2, z: 0 });
Selector.gizmoScale[2].position.add({ x: -x / 2, y: -y / 2, z: 0 });
Selector.gizmoScale[3].position.add({ x: -x / 2, y: -y / 2, z: 0 });
Asset.instance.computeBoundingBox();
Asset.instance.computeBoundingSphere();
}
}