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-frontend/src/lib/visualizer/webgl/util.ts | 229 ----------------------- 1 file changed, 229 deletions(-) delete mode 100644 web/pw-frontend/src/lib/visualizer/webgl/util.ts (limited to 'web/pw-frontend/src/lib/visualizer/webgl/util.ts') diff --git a/web/pw-frontend/src/lib/visualizer/webgl/util.ts b/web/pw-frontend/src/lib/visualizer/webgl/util.ts deleted file mode 100644 index 3ed2b4d..0000000 --- a/web/pw-frontend/src/lib/visualizer/webgl/util.ts +++ /dev/null @@ -1,229 +0,0 @@ -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