Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix format

This commit is contained in:
Sean Boult 2021-09-27 12:36:22 +00:00 committed by GitHub
parent 0a71099deb
commit 9cfb6910ff
1 changed files with 63 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/debug.ts
View File

@ -1,22 +1,22 @@
import { SkinViewer } from "./viewer"; import { SkinViewer } from "./viewer";
export class DebugCanvas { export class DebugCanvas {
private wrapperElement: HTMLElement | null; private wrapperElement: HTMLElement | null;
private canvas: HTMLCanvasElement | null; private canvas: HTMLCanvasElement | null;
private ctx: CanvasRenderingContext2D | null; private ctx: CanvasRenderingContext2D | null;
private _skinViewer: SkinViewer; private _skinViewer: SkinViewer;
public enabled: boolean = false; public enabled: boolean = false;
constructor(skinViewer: SkinViewer) { constructor(skinViewer: SkinViewer) {
this.canvas = null; this.canvas = null;
this.ctx = null; this.ctx = null;
this.wrapperElement = null; this.wrapperElement = null;
this._skinViewer = skinViewer; this._skinViewer = skinViewer;
} }
createCanvas(): void { createCanvas(): void {
// create the canvas // create the canvas
this.canvas = document.createElement("canvas"); this.canvas = document.createElement("canvas");
const width = 100; const width = 100;
@ -24,77 +24,75 @@ export class DebugCanvas {
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
// attempt dpi correction // attempt dpi correction
const ratio = Math.ceil(window.devicePixelRatio); const ratio = Math.ceil(window.devicePixelRatio);
this.canvas.width = width * ratio; this.canvas.width = width * ratio;
this.canvas.height = height * ratio; this.canvas.height = height * ratio;
this.canvas.style.width = `${width}px`; this.canvas.style.width = `${width}px`;
this.canvas.style.height = `${height}px`; this.canvas.style.height = `${height}px`;
// create a wrapper node // create a wrapper node
const wrapper = document.createElement("div"); const wrapper = document.createElement("div");
wrapper.style.position = "absolute"; wrapper.style.position = "absolute";
wrapper.style.top = "0"; wrapper.style.top = "0";
wrapper.style.left = "0"; wrapper.style.left = "0";
wrapper.style.background = "rgba(0,0,0,0.5)"; wrapper.style.background = "rgba(0,0,0,0.5)";
wrapper.appendChild(this.canvas); wrapper.appendChild(this.canvas);
this.wrapperElement = wrapper; this.wrapperElement = wrapper;
// add it to the dom and overlay it aboslute
const parent = this._skinViewer.canvas.parentNode;
if (parent) {
parent.appendChild(wrapper);
}
// add it to the dom and overlay it aboslute
const parent = this._skinViewer.canvas.parentNode;
if (parent) {
parent.appendChild(wrapper);
}
} }
destroyCanvas(): void { destroyCanvas(): void {
// attempt to remove canvas // attempt to remove canvas
this.wrapperElement?.remove(); this.wrapperElement?.remove();
this.canvas = null; this.canvas = null;
this.wrapperElement = null; this.wrapperElement = null;
} }
setState(state: boolean): void { setState(state: boolean): void {
// set the new state // set the new state
this.enabled = state; this.enabled = state;
// call the create/destroy method based on prior // call the create/destroy method based on prior
this.enabled ? this.createCanvas() : this.destroyCanvas(); this.enabled ? this.createCanvas() : this.destroyCanvas();
// debug log // debug log
console.info("[Debug canvas]", this.enabled ? "enabled": "disabled"); console.info("[Debug canvas]", this.enabled ? "enabled" : "disabled");
} }
render(): void { render(): void {
const { ctx, canvas, _skinViewer } = this; const { ctx, canvas, _skinViewer } = this;
if (!ctx || !canvas) { if (!ctx || !canvas) {
return; return;
} }
const { x, y, z } = _skinViewer.camera.position; const { x, y, z } = _skinViewer.camera.position;
const { x: rotX, y: rotY, z: rotZ } = _skinViewer.camera.rotation; const { x: rotX, y: rotY, z: rotZ } = _skinViewer.camera.rotation;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '14px serif'; ctx.font = "14px serif";
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
const items = [ const items = [
`x: ${x.toFixed(2)}`, `x: ${x.toFixed(2)}`,
`y: ${y.toFixed(2)}`, `y: ${y.toFixed(2)}`,
`z: ${z.toFixed(2)}`, `z: ${z.toFixed(2)}`,
`rotX: ${rotX.toFixed(2)}`, `rotX: ${rotX.toFixed(2)}`,
`rotY: ${rotY.toFixed(2)}`, `rotY: ${rotY.toFixed(2)}`,
`rotZ: ${rotZ.toFixed(2)}`, `rotZ: ${rotZ.toFixed(2)}`,
] ];
const spacing = 15; const spacing = 15;
const offsetX = 15; const offsetX = 15;
const offsetY = 6; const offsetY = 6;
items.forEach((s, index) => ctx.fillText(s, offsetY, offsetX + spacing * index)); items.forEach((s, index) => ctx.fillText(s, offsetY, offsetX + spacing * index));
}
}
} }