Skip to content

Commit

Permalink
fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zyie
Zyie committed Aug 5, 2024
1 parent 183f4a6 commit 0d8f0da
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 73 deletions.
57 changes: 33 additions & 24 deletions packages/frontend/src/components/smooth-charts/stat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ class Panel {
protected fg: CanvasFillStrokeStyles['fillStyle'];
protected bg: CanvasFillStrokeStyles['fillStyle'];
protected lineColor: CanvasFillStrokeStyles['fillStyle'];
protected textColor: CanvasFillStrokeStyles['fillStyle'];
protected min: number;
protected max: number;
protected context: CanvasRenderingContext2D;
Expand All @@ -25,11 +26,13 @@ class Panel {
fg: CanvasFillStrokeStyles['fillStyle'],
bg: CanvasFillStrokeStyles['fillStyle'],
lineColor: CanvasFillStrokeStyles['fillStyle'],
textColor: CanvasFillStrokeStyles['fillStyle'] = 'white',
) {
this.name = name;
this.fg = fg;
this.bg = bg;
this.lineColor = lineColor;
this.textColor = textColor;

this.min = Infinity;
this.max = 0;
Expand All @@ -53,7 +56,7 @@ class Panel {

this.context.fillStyle = this.bg;
this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
this.context.fillStyle = 'white';
this.context.fillStyle = this.textColor;
this.context.font = `0.75rem cascadia code,Menlo,Monaco,'Courier New',monospace`;
this.context.fillText(`${this.name} (${Math.round(value)})`, this.TEXT_X, this.TEXT_Y);
const width1 = this.context.measureText(`max: ${Math.round(this.max)}`).width;
Expand Down Expand Up @@ -102,28 +105,34 @@ interface CanvasProps {
bgColor: string;
fgColor: string;
lineColor: string;
textColor: string;
value: number;
}
export const CanvasComponent: React.FC<CanvasProps> = memo(({ title, bgColor, fgColor, lineColor, value }) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const panelRef = useRef<Panel | null>(null);

useEffect(() => {
if (canvasRef.current && !panelRef.current) {
// Initialize the Panel class with the canvas element
panelRef.current = new Panel(canvasRef.current, title, fgColor, bgColor, lineColor);
}
}, [bgColor, fgColor, lineColor, title]);

useInterval(() => {
if (panelRef.current) {
panelRef.current.update(value);
}
}, 100);

return (
<div>
<canvas ref={canvasRef} />
</div>
);
});
export const CanvasStatComponent: React.FC<CanvasProps> = memo(
({ title, bgColor, fgColor, lineColor, textColor, value }) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const panelRef = useRef<Panel | null>(null);

useEffect(() => {
if (canvasRef.current && !panelRef.current) {
// Initialize the Panel class with the canvas element
panelRef.current = new Panel(canvasRef.current, title, fgColor, bgColor, lineColor, textColor);
}
}, []);

Check warning on line 121 in packages/frontend/src/components/smooth-charts/stat.tsx

View workflow job for this annotation

GitHub Actions / Build 

React Hook useEffect has missing dependencies: 'bgColor', 'fgColor', 'lineColor', 'textColor', and 'title'. Either include them or remove the dependency array
useEffect(() => {
panelRef.current = new Panel(canvasRef.current!, title, fgColor, bgColor, lineColor, textColor);
}, [bgColor, fgColor, lineColor, title, textColor]);

useInterval(() => {
if (panelRef.current) {
panelRef.current.update(value);
}
}, 100);

return (
<div>
<canvas ref={canvasRef} />
</div>
);
},
);
17 changes: 10 additions & 7 deletions packages/frontend/src/pages/assets/gpuTextures/TextureStats.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { useEffect, useState } from 'react';
import { useDevtoolStore } from '../../../App';
import { CollapsibleSection } from '../../../components/collapsible/collapsible-section';
import { CanvasComponent } from '../../../components/smooth-charts/stat';
import { CanvasStatComponent } from '../../../components/smooth-charts/stat';
import { useTheme } from '../../../components/theme-provider';

export const TextureStats: React.FC = () => {
const { theme } = useTheme();
const [stats, setStats] = useState<Record<string, number>>({
'GPU Memory (MB)': 0,
'Total Textures': 0,
Expand All @@ -25,18 +27,19 @@ export const TextureStats: React.FC = () => {

return (
<CollapsibleSection title="Stats">
<div className="flex h-full max-h-[15%] flex-1 overflow-hidden">
<div className="flex h-full w-full flex-wrap justify-start overflow-auto">
<div className="flex h-full max-h-[10%] flex-1 overflow-hidden">
<div className="flex h-full w-full flex-wrap justify-start overflow-auto pb-4">
{stats &&
Object.keys(stats!).map((key) => {
const item = stats![key as keyof typeof stats];
return (
<div className="h-fit px-2 pt-2" key={key}>
<CanvasComponent
<CanvasStatComponent
title={key}
bgColor={'#1D1E20'}
fgColor={'#E72264'}
lineColor="#441E2B"
bgColor={theme === 'dark' ? '#1D1E20' : '#fff'}
fgColor={theme === 'dark' ? '#E72264' : '#E72264'}
lineColor={theme === 'dark' ? '#441E2B' : '#EC5685'}
textColor={theme === 'dark' ? '#fff' : '#000'}
value={item}
/>
</div>
Expand Down
13 changes: 8 additions & 5 deletions packages/frontend/src/pages/rendering/RenderingStats.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { useDevtoolStore } from '../../App';
import { SaveCollapsibleSection } from '../../components/collapsible/collapsible-section';
import { CanvasComponent } from '../../components/smooth-charts/stat';
import { CanvasStatComponent } from '../../components/smooth-charts/stat';
import { useInterval } from '../../lib/interval';
import { formatCamelCase, isDifferent } from '../../lib/utils';
import type { RenderingState } from './rendering';
import { useTheme } from '../../components/theme-provider';

export const RenderingStats: React.FC = () => {
const { theme } = useTheme();
const bridge = useDevtoolStore.use.bridge();
const renderingData = useDevtoolStore.use.renderingData();
const setRenderingData = useDevtoolStore.use.setRenderingData();
Expand All @@ -27,11 +29,12 @@ export const RenderingStats: React.FC = () => {
const item = renderingData![key as keyof typeof renderingData];
return (
<div className="h-fit px-2 pt-2" key={key}>
<CanvasComponent
<CanvasStatComponent
title={formatCamelCase(key)}
bgColor={'#1D1E20'}
fgColor={'#E72264'}
lineColor="#441E2B"
bgColor={theme === 'dark' ? '#1D1E20' : '#fff'}
fgColor={theme === 'dark' ? '#E72264' : '#E72264'}
lineColor={theme === 'dark' ? '#441E2B' : '#EC5685'}
textColor={theme === 'dark' ? '#fff' : '#000'}
value={item}
/>
</div>
Expand Down
3 changes: 1 addition & 2 deletions packages/frontend/src/pages/rendering/instructions/Filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import type { FilterInstruction } from './Instructions';
import { InstructionSection } from './shared/InstructionSection';
import { PropertyEntries } from './shared/PropertyDisplay';
import { Shader } from './shared/Shader';
import { State } from './shared/State';

export const FilterView: React.FC<FilterInstruction> = memo(({ renderables, filter, drawTextures, type, action }) => {
return (
Expand All @@ -19,7 +18,7 @@ export const FilterView: React.FC<FilterInstruction> = memo(({ renderables, filt
<div className="flex flex-col px-2 py-1 [&>*:first-child]:pt-0">
<PropertyEntries renderable={filter} propertyMap={propertyMap} ignore={['program', 'state']} />
<Shader vertex={filter.program.vertex} fragment={filter.program.fragment} />
<State {...filter.state} />
<PropertyEntries renderable={filter.state} propertyMap={propertyMap} />
</div>
</CollapsibleSection>
))}
Expand Down
42 changes: 15 additions & 27 deletions packages/frontend/src/pages/rendering/instructions/Mesh.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const MeshView: React.FC<MeshInstruction> = memo(({ renderable, drawTextu
const formatFloat32Array = (array: number[]) => {
return `[${array.join(', ')}]`;
};

return (
<div className="flex flex-col">
<div className="items-left flex w-full flex-col justify-between">
Expand All @@ -39,37 +40,24 @@ export const MeshView: React.FC<MeshInstruction> = memo(({ renderable, drawTextu
ignore={['texture', 'program', 'geometry', 'state']}
/>
<Shader vertex={renderable.program.vertex ?? ''} fragment={renderable.program.fragment ?? ''} />
<div className="ml-2 text-sm text-white">
<div className="text-lg">Geometry</div>
<div
className="flex flex-row flex-wrap gap-2 pt-4"
style={{
overflow: 'auto',
maxHeight: '200px',
}}
>
Indices: {formatFloat32Array(renderable.geometry.indices)}
<div className="flex h-full items-center pt-4">
<div className="w-1/4 overflow-hidden break-keep pr-2 text-xs dark:text-white">Indices</div>
<div className="border-border max-h-48 w-full overflow-auto rounded-sm border p-2">
{formatFloat32Array(renderable.geometry.indices)}
</div>
<div
className="flex flex-row flex-wrap gap-2 pt-4"
style={{
overflow: 'auto',
maxHeight: '200px',
}}
>
UVs: {formatFloat32Array(renderable.geometry.uvs)}
</div>
<div className="flex h-full items-center pt-4">
<div className="w-1/4 overflow-hidden break-keep pr-2 text-xs dark:text-white">UVs</div>
<div className="border-border max-h-48 w-full overflow-auto rounded-sm border p-2">
{formatFloat32Array(renderable.geometry.uvs)}
</div>
<div
className="flex flex-row flex-wrap gap-2 pt-4"
style={{
overflow: 'auto',
maxHeight: '200px',
}}
>
Positions: {formatFloat32Array(renderable.geometry.positions)}
</div>
<div className="flex h-full items-center pt-2">
<div className="w-1/4 overflow-hidden break-keep pr-2 text-xs dark:text-white">Positions</div>
<div className="border-border max-h-48 w-full overflow-auto rounded-sm border p-2">
{formatFloat32Array(renderable.geometry.positions)}
</div>
</div>
<div className="text-lg">State</div>
<PropertyEntries renderable={renderable.state} propertyMap={propertyMap} />
</div>
</CollapsibleSection>
Expand Down
21 changes: 13 additions & 8 deletions packages/frontend/src/pages/rendering/instructions/shared/Shader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,26 @@ interface ShaderProps {
}
export const Shader: React.FC<ShaderProps> = memo(({ vertex, fragment }) => {
return (
<div className={`flex flex-col items-center justify-between`}>
<ShaderView value={fragment} />
<ShaderView value={vertex} />
</div>
<>
<ShaderView value={fragment} title="Fragment" />
<ShaderView value={vertex} title="Vertex" />
</>
);
});

export const ShaderView: React.FC<{ value: string }> = memo(({ value }) => {
export const ShaderView: React.FC<{ value: string; title: string }> = memo(({ value, title }) => {
const valueFix = formatShader(value);
const { theme } = useTheme();
const style = theme === 'dark' ? dracula : prism;
return (
<SyntaxHighlighter language="javascript" style={style} customStyle={{ width: '100%' }}>
{valueFix}
</SyntaxHighlighter>
<div className="flex h-full items-center pt-1">
<div className="w-1/4 overflow-hidden break-keep pr-2 text-xs">{title}</div>
<div className="flex w-full max-w-[80%] items-center pl-2">
<SyntaxHighlighter language="javascript" style={style} customStyle={{ width: '100%' }}>
{valueFix}
</SyntaxHighlighter>
</div>
</div>
);
});

Expand Down

0 comments on commit 0d8f0da

Please sign in to comment.