Merge pull request #45 from mbebenita/toggle
Mesh Debugger Improvements
This commit is contained in:
commit
a6582aefb3
|
@ -52,7 +52,9 @@ const SEGMENT_POINT_FILL_STYLE: string = "rgb(0, 0, 128)";
|
||||||
const LIGHT_STROKE_STYLE: string = "rgb(192, 192, 192)";
|
const LIGHT_STROKE_STYLE: string = "rgb(192, 192, 192)";
|
||||||
const LINE_STROKE_STYLE: string = "rgb(0, 128, 0)";
|
const LINE_STROKE_STYLE: string = "rgb(0, 128, 0)";
|
||||||
const CURVE_STROKE_STYLE: string = "rgb(128, 0, 0)";
|
const CURVE_STROKE_STYLE: string = "rgb(128, 0, 0)";
|
||||||
|
const SEGMENT_CONTROL_POINT_FILL_STYLE: string = "rgb(255, 255, 255)";
|
||||||
const SEGMENT_CONTROL_POINT_STROKE_STYLE: string = "rgb(0, 0, 128)";
|
const SEGMENT_CONTROL_POINT_STROKE_STYLE: string = "rgb(0, 0, 128)";
|
||||||
|
const SEGMENT_CONTROL_POINT_HULL_STROKE_STYLE: string = "rgba(128, 128, 128, 0.5)";
|
||||||
|
|
||||||
const NORMAL_STROKE_STYLES: NormalStyleParameter<string> = {
|
const NORMAL_STROKE_STYLES: NormalStyleParameter<string> = {
|
||||||
bVertex: '#e6aa00',
|
bVertex: '#e6aa00',
|
||||||
|
@ -223,6 +225,10 @@ class MeshDebuggerView extends PathfinderView {
|
||||||
|
|
||||||
private appController: MeshDebuggerAppController;
|
private appController: MeshDebuggerAppController;
|
||||||
|
|
||||||
|
private drawControl: boolean = true;
|
||||||
|
private drawNormals: boolean = true;
|
||||||
|
private drawVertices: boolean = true;
|
||||||
|
|
||||||
constructor(appController: MeshDebuggerAppController) {
|
constructor(appController: MeshDebuggerAppController) {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
@ -232,6 +238,8 @@ class MeshDebuggerView extends PathfinderView {
|
||||||
this.camera.onPan = () => this.setDirty();
|
this.camera.onPan = () => this.setDirty();
|
||||||
this.camera.onZoom = () => this.setDirty();
|
this.camera.onZoom = () => this.setDirty();
|
||||||
|
|
||||||
|
window.addEventListener('keypress', event => this.onKeyPress(event), false);
|
||||||
|
|
||||||
this.resizeToFit(true);
|
this.resizeToFit(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -295,27 +303,28 @@ class MeshDebuggerView extends PathfinderView {
|
||||||
const lowerRightPosition = unwrapNull(getPosition(positions, lowerRightIndex));
|
const lowerRightPosition = unwrapNull(getPosition(positions, lowerRightIndex));
|
||||||
const lowerControlPointPosition = getPosition(positions, lowerControlPointIndex);
|
const lowerControlPointPosition = getPosition(positions, lowerControlPointIndex);
|
||||||
|
|
||||||
drawVertexIfNecessary(context,
|
if (this.drawVertices) {
|
||||||
drawnVertices,
|
drawVertexIfNecessary(context,
|
||||||
upperLeftIndex,
|
drawnVertices,
|
||||||
upperLeftPosition,
|
upperLeftIndex,
|
||||||
invScaleFactor);
|
upperLeftPosition,
|
||||||
drawVertexIfNecessary(context,
|
invScaleFactor);
|
||||||
drawnVertices,
|
drawVertexIfNecessary(context,
|
||||||
upperRightIndex,
|
drawnVertices,
|
||||||
upperRightPosition,
|
upperRightIndex,
|
||||||
invScaleFactor);
|
upperRightPosition,
|
||||||
drawVertexIfNecessary(context,
|
invScaleFactor);
|
||||||
drawnVertices,
|
drawVertexIfNecessary(context,
|
||||||
lowerLeftIndex,
|
drawnVertices,
|
||||||
lowerLeftPosition,
|
lowerLeftIndex,
|
||||||
invScaleFactor);
|
lowerLeftPosition,
|
||||||
drawVertexIfNecessary(context,
|
invScaleFactor);
|
||||||
drawnVertices,
|
drawVertexIfNecessary(context,
|
||||||
lowerRightIndex,
|
drawnVertices,
|
||||||
lowerRightPosition,
|
lowerRightIndex,
|
||||||
invScaleFactor);
|
lowerRightPosition,
|
||||||
|
invScaleFactor);
|
||||||
|
}
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.moveTo(upperLeftPosition[0], -upperLeftPosition[1]);
|
context.moveTo(upperLeftPosition[0], -upperLeftPosition[1]);
|
||||||
if (upperControlPointPosition != null) {
|
if (upperControlPointPosition != null) {
|
||||||
|
@ -361,32 +370,59 @@ class MeshDebuggerView extends PathfinderView {
|
||||||
const lowerRightNormal = bVertexNormals[lowerRightIndex];
|
const lowerRightNormal = bVertexNormals[lowerRightIndex];
|
||||||
const upperLeftNormal = bVertexNormals[upperLeftIndex];
|
const upperLeftNormal = bVertexNormals[upperLeftIndex];
|
||||||
const upperRightNormal = bVertexNormals[upperRightIndex];
|
const upperRightNormal = bVertexNormals[upperRightIndex];
|
||||||
drawNormal(context, lowerLeftPosition, lowerLeftNormal, invScaleFactor, 'bVertex');
|
if (this.drawVertices && this.drawNormals) {
|
||||||
drawNormal(context, lowerRightPosition, lowerRightNormal, invScaleFactor, 'bVertex');
|
drawNormal(context, lowerLeftPosition, lowerLeftNormal, invScaleFactor,
|
||||||
drawNormal(context, upperLeftPosition, upperLeftNormal, invScaleFactor, 'bVertex');
|
'bVertex');
|
||||||
drawNormal(context, upperRightPosition, upperRightNormal, invScaleFactor, 'bVertex');
|
drawNormal(context, lowerRightPosition, lowerRightNormal, invScaleFactor,
|
||||||
|
'bVertex');
|
||||||
|
drawNormal(context, upperLeftPosition, upperLeftNormal, invScaleFactor,
|
||||||
|
'bVertex');
|
||||||
|
drawNormal(context, upperRightPosition, upperRightNormal, invScaleFactor,
|
||||||
|
'bVertex');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Draw segments.
|
// Draw segments.
|
||||||
drawSegmentVertices(context,
|
if (this.drawVertices) {
|
||||||
new Float32Array(meshes.segmentLines),
|
drawSegmentVertices(context,
|
||||||
new Float32Array(meshes.segmentLineNormals),
|
new Float32Array(meshes.segmentLines),
|
||||||
meshes.segmentLineCount,
|
new Float32Array(meshes.segmentLineNormals),
|
||||||
[0, 1],
|
meshes.segmentLineCount,
|
||||||
null,
|
[0, 1],
|
||||||
2,
|
null,
|
||||||
invScaleFactor);
|
2,
|
||||||
drawSegmentVertices(context,
|
invScaleFactor,
|
||||||
new Float32Array(meshes.segmentCurves),
|
this.drawControl,
|
||||||
new Float32Array(meshes.segmentCurveNormals),
|
this.drawNormals);
|
||||||
meshes.segmentCurveCount,
|
drawSegmentVertices(context,
|
||||||
[0, 2],
|
new Float32Array(meshes.segmentCurves),
|
||||||
1,
|
new Float32Array(meshes.segmentCurveNormals),
|
||||||
3,
|
meshes.segmentCurveCount,
|
||||||
invScaleFactor);
|
[0, 2],
|
||||||
|
1,
|
||||||
|
3,
|
||||||
|
invScaleFactor,
|
||||||
|
this.drawControl,
|
||||||
|
this.drawNormals);
|
||||||
|
}
|
||||||
context.restore();
|
context.restore();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private onKeyPress(event: KeyboardEvent): void {
|
||||||
|
if (event.key === "c") {
|
||||||
|
this.drawControl = !this.drawControl;
|
||||||
|
} else if (event.key === "n") {
|
||||||
|
this.drawNormals = !this.drawNormals;
|
||||||
|
} else if (event.key === "v") {
|
||||||
|
this.drawVertices = !this.drawVertices;
|
||||||
|
} else if (event.key === "r") {
|
||||||
|
// Reset
|
||||||
|
this.drawControl = true;
|
||||||
|
this.drawNormals = true;
|
||||||
|
this.drawVertices = true;
|
||||||
|
}
|
||||||
|
this.setDirty();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPosition(positions: Float32Array, vertexIndex: number): glmatrix.vec2 | null {
|
function getPosition(positions: Float32Array, vertexIndex: number): glmatrix.vec2 | null {
|
||||||
|
@ -417,7 +453,9 @@ function drawSegmentVertices(context: CanvasRenderingContext2D,
|
||||||
endpointOffsets: number[],
|
endpointOffsets: number[],
|
||||||
controlPointOffset: number | null,
|
controlPointOffset: number | null,
|
||||||
segmentSize: number,
|
segmentSize: number,
|
||||||
invScaleFactor: number) {
|
invScaleFactor: number,
|
||||||
|
drawControl: boolean,
|
||||||
|
drawNormals: boolean) {
|
||||||
for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex++) {
|
for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex++) {
|
||||||
const positionStartOffset = segmentSize * 2 * segmentIndex;
|
const positionStartOffset = segmentSize * 2 * segmentIndex;
|
||||||
const normalStartOffset = segmentSize * segmentIndex;
|
const normalStartOffset = segmentSize * segmentIndex;
|
||||||
|
@ -447,15 +485,27 @@ function drawSegmentVertices(context: CanvasRenderingContext2D,
|
||||||
else
|
else
|
||||||
normalControlPoint = null;
|
normalControlPoint = null;
|
||||||
|
|
||||||
|
if (drawNormals) {
|
||||||
|
drawNormal(context, position0, normal0, invScaleFactor, 'edge');
|
||||||
|
drawNormal(context, position1, normal1, invScaleFactor, 'edge');
|
||||||
|
if (drawControl && controlPoint != null && normalControlPoint != null)
|
||||||
|
drawNormal(context, controlPoint, normalControlPoint, invScaleFactor, 'edge');
|
||||||
|
}
|
||||||
|
|
||||||
drawSegmentVertex(context, position0, invScaleFactor);
|
drawSegmentVertex(context, position0, invScaleFactor);
|
||||||
drawSegmentVertex(context, position1, invScaleFactor);
|
drawSegmentVertex(context, position1, invScaleFactor);
|
||||||
if (controlPoint != null)
|
if (drawControl && controlPoint != null) {
|
||||||
|
context.save();
|
||||||
|
context.strokeStyle = SEGMENT_CONTROL_POINT_HULL_STROKE_STYLE;
|
||||||
|
context.setLineDash([2 * invScaleFactor, 2 * invScaleFactor]);
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(position0[0], -position0[1]);
|
||||||
|
context.lineTo(controlPoint[0], -controlPoint[1]);
|
||||||
|
context.lineTo(position1[0], -position1[1]);
|
||||||
|
context.stroke();
|
||||||
|
context.restore();
|
||||||
drawSegmentControlPoint(context, controlPoint, invScaleFactor);
|
drawSegmentControlPoint(context, controlPoint, invScaleFactor);
|
||||||
|
}
|
||||||
drawNormal(context, position0, normal0, invScaleFactor, 'edge');
|
|
||||||
drawNormal(context, position1, normal1, invScaleFactor, 'edge');
|
|
||||||
if (controlPoint != null && normalControlPoint != null)
|
|
||||||
drawNormal(context, controlPoint, normalControlPoint, invScaleFactor, 'edge');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -502,6 +552,7 @@ function drawSegmentControlPoint(context: CanvasRenderingContext2D,
|
||||||
invScaleFactor: number) {
|
invScaleFactor: number) {
|
||||||
context.save();
|
context.save();
|
||||||
context.strokeStyle = SEGMENT_CONTROL_POINT_STROKE_STYLE;
|
context.strokeStyle = SEGMENT_CONTROL_POINT_STROKE_STYLE;
|
||||||
|
context.fillStyle = SEGMENT_CONTROL_POINT_FILL_STYLE;
|
||||||
context.lineWidth = invScaleFactor * SEGMENT_CONTROL_POINT_STROKE_WIDTH;
|
context.lineWidth = invScaleFactor * SEGMENT_CONTROL_POINT_STROKE_WIDTH;
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.arc(position[0],
|
context.arc(position[0],
|
||||||
|
@ -509,6 +560,7 @@ function drawSegmentControlPoint(context: CanvasRenderingContext2D,
|
||||||
SEGMENT_POINT_RADIUS * invScaleFactor,
|
SEGMENT_POINT_RADIUS * invScaleFactor,
|
||||||
0,
|
0,
|
||||||
2.0 * Math.PI);
|
2.0 * Math.PI);
|
||||||
|
context.fill();
|
||||||
context.stroke();
|
context.stroke();
|
||||||
context.restore();
|
context.restore();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue