From 0c6d978442b244ca3f29c1ffdd44b5007ae7ad93 Mon Sep 17 00:00:00 2001 From: Ilion Beyst Date: Wed, 29 Dec 2021 21:24:57 +0100 Subject: separate out visualizer library --- web/pw-visualizer/src/webgl/util.ts | 229 ++++++++++++++++++++++++++++++++++++ 1 file changed, 229 insertions(+) create mode 100644 web/pw-visualizer/src/webgl/util.ts (limited to 'web/pw-visualizer/src/webgl/util.ts') diff --git a/web/pw-visualizer/src/webgl/util.ts b/web/pw-visualizer/src/webgl/util.ts new file mode 100644 index 0000000..3ed2b4d --- /dev/null +++ b/web/pw-visualizer/src/webgl/util.ts @@ -0,0 +1,229 @@ +import { parse as parsePath } from 'extract-svg-path'; +import svgMesh3d from 'svg-mesh-3d'; + +export interface Dictionary { + [Key: string]: T; +} + + +interface OnLoadable { + onload: any; +} + +export function onload2promise(obj: T): Promise { + return new Promise(resolve => { + obj.onload = () => resolve(obj); + }); +} + +export function resizeCanvasToDisplaySize( + canvas: HTMLCanvasElement, + multiplier?: number, +): boolean { + multiplier = multiplier || 1; + var width = canvas.clientWidth * multiplier | 0; + var height = canvas.clientHeight * multiplier | 0; + if (canvas.width !== width || canvas.height !== height) { + canvas.width = width; + canvas.height = height; + return true; + } + return false; +} + +export class FPSCounter { + last: number; + count: number; + _delta: number; + _prev: number; + + _frame_start: number; + _total_frametime: number; + + constructor() { + this.last = 0; + this.count = 0; + this._delta = 0; + this._prev = 0; + } + + frame(now: number) { + this._frame_start = performance.now(); + this.count += 1; + this._delta = now - this._prev; + this._prev = now; + + if (now - this.last > 1000) { + this.last = now; + console.log(`${this.count} fps, ${(this._total_frametime / this.count).toFixed(2)}ms avg per frame`); + this.count = 0; + this._total_frametime = 0; + } + } + + frame_end() { + this._total_frametime += (performance.now() - this._frame_start); + } + + delta(now: number): number { + return this._delta; + } +} + +export class Resizer { + hoovering = false; + dragging = false; + + mouse_pos = [0, 0]; + last_drag = [0, 0]; + + viewbox: number[]; + orig_viewbox: number[]; + + el_box: number[]; + + scaleX = 1; + scaleY = 1; + + constructor(el: HTMLCanvasElement, viewbox: number[], keep_aspect_ratio=false) { + viewbox = [-viewbox[0] - viewbox[2], - viewbox[1] - viewbox[3], viewbox[2], viewbox[3]]; + this.viewbox = [...viewbox]; + this.el_box = [el.width, el.height]; + + if (keep_aspect_ratio) { + const or_width = this.viewbox[2]; + const or_height = this.viewbox[3]; + + const width_percentage = this.viewbox[2] / el.width; + const height_percentage = this.viewbox[3] / el.height; + + if (width_percentage < height_percentage) { + // width should be larger + this.viewbox[2] = height_percentage * el.width; + } else { + // height should be larger + this.viewbox[3] = width_percentage * el.height; + } + + this.viewbox[0] -= (this.viewbox[2] - or_width) / 2; + this.viewbox[1] -= (this.viewbox[3] - or_height) / 2; + + this.scaleX = this.viewbox[2] / this.viewbox[3]; + } + + this.orig_viewbox = [...this.viewbox]; + + el.addEventListener("mouseenter", this.mouseenter.bind(this), { capture: false, passive: true}); + el.addEventListener("mouseleave", this.mouseleave.bind(this), { capture: false, passive: true}); + el.addEventListener("mousemove", this.mousemove.bind(this), { capture: false, passive: true}); + el.addEventListener("mousedown", this.mousedown.bind(this), { capture: false, passive: true}); + el.addEventListener("mouseup", this.mouseup.bind(this), { capture: false, passive: true}); + + window.addEventListener('wheel', this.wheel.bind(this), { capture: false, passive: true}); + } + + _clip_viewbox() { + this.viewbox[0] = Math.max(this.viewbox[0], this.orig_viewbox[0]); + this.viewbox[1] = Math.max(this.viewbox[1], this.orig_viewbox[1]); + + this.viewbox[0] = Math.min(this.viewbox[0] + this.viewbox[2], this.orig_viewbox[0] + this.orig_viewbox[2]) - this.viewbox[2]; + this.viewbox[1] = Math.min(this.viewbox[1] + this.viewbox[3], this.orig_viewbox[1] + this.orig_viewbox[3]) - this.viewbox[3]; + } + + mouseenter() { + this.hoovering = true; + } + + mouseleave() { + this.hoovering = false; + } + + mousemove(e: MouseEvent) { + this.mouse_pos = [e.offsetX, this.el_box[1] - e.offsetY]; + + if (this.dragging) { + const scaleX = this.viewbox[2] / this.el_box[0]; + const scaleY = this.viewbox[3] / this.el_box[1]; + + this.viewbox[0] += (this.last_drag[0] - this.mouse_pos[0]) * scaleX; + this.viewbox[1] += (this.last_drag[1] - this.mouse_pos[1]) * scaleY; + + this.last_drag = [...this.mouse_pos]; + + this._clip_viewbox(); + } + } + + mousedown() { + this.dragging = true; + this.last_drag = [...this.mouse_pos]; + } + + mouseup() { + this.dragging = false; + } + + wheel(e: WheelEvent) { + if (this.hoovering) { + const delta = e.deltaY > 0 ? 0.1 * this.viewbox[2] : -0.1 * this.viewbox[2]; + const dx = delta * this.scaleX; + const dy = delta * this.scaleY; + + const mouse_dx = this.mouse_pos[0] / this.el_box[0]; + const mouse_dy = this.mouse_pos[1] / this.el_box[1]; + + this._zoom([dx, dy], [mouse_dx, mouse_dy]); + } + } + + _zoom(deltas: number[], center: number[]) { + this.viewbox[2] += deltas[0]; + this.viewbox[0] -= deltas[0] * center[0]; + this.viewbox[2] = Math.min(this.viewbox[2], this.orig_viewbox[2]); + + this.viewbox[3] += deltas[1]; + this.viewbox[1] -= deltas[1] * center[1]; + this.viewbox[3] = Math.min(this.viewbox[3], this.orig_viewbox[3]); + + this._clip_viewbox(); + } + + get_viewbox(): number[] { + return this.viewbox; + } + + get_mouse_pos(): number[] { + return this.mouse_pos; + } +} + +export class Mesh { + cells: number[]; + positions: number[]; + + constructor(mesh: any) { + this.cells = mesh.cells.flat(); + this.positions = mesh.positions.flat(); + } +} + +export async function url_to_mesh(url: string): Promise { + + return new Promise(function(resolve) { + fetch(url) + .then(resp => resp.text()) + .then(data => { + // var div = document.createElement('div'); + // div.innerHTML = data; + // var svg = div.querySelector('svg'); + + var svgPath = parsePath(data); + var mesh = svgMesh3d(svgPath, { + delaunay: false, + scale: 10, + }); + + resolve(new Mesh(mesh)); + }) + }); +} -- cgit v1.2.3