Skip to content

Commit 7721ae2

Browse files
tmikovtmikov
committed
npm run format
1 parent 7e3004a commit 7721ae2

File tree

13 files changed

+472
-306
lines changed

13 files changed

+472
-306
lines changed

‎examples/custom-widget/app.jsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { useState } from "react";
1+
import React, { useState } from 'react';
22

3-
const ACTIONS = ["Cut", "Copy", "Paste", "Delete", "Save"];
3+
const ACTIONS = ['Cut', 'Copy', 'Paste', 'Delete', 'Save'];
44

55
export function App() {
66
const [menuOpen, setMenuOpen] = useState(false);
@@ -12,14 +12,20 @@ export function App() {
1212
};
1313

1414
return (
15-
<window title="Custom Widget Example" defaultWidth={600} defaultHeight={400}>
15+
<window
16+
title="Custom Widget Example"
17+
defaultWidth={600}
18+
defaultHeight={400}
19+
>
1620
<text>This example demonstrates creating custom ImGui widgets.</text>
17-
<text>The RadialMenu is a custom widget built using ImGui's draw list API.</text>
21+
<text>
22+
The RadialMenu is a custom widget built using ImGui's draw list API.
23+
</text>
1824
<separator />
1925

2026
<text>Click the button to open the radial menu:</text>
2127
<button onClick={() => setMenuOpen(!menuOpen)}>
22-
{menuOpen ? "Close Menu" : "Open Radial Menu"}
28+
{menuOpen ? 'Close Menu' : 'Open Radial Menu'}
2329
</button>
2430

2531
{menuOpen && (

‎examples/custom-widget/index.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
2-
import { createRoot, render } from "react-imgui-reconciler/reconciler.js";
3-
import { App } from "./app.jsx";
1+
import React from 'react';
2+
import { createRoot, render } from 'react-imgui-reconciler/reconciler.js';
3+
import { App } from './app.jsx';
44

55
// Create React root with fiber root and container
66
const root = createRoot();
@@ -12,7 +12,7 @@ globalThis.reactApp = {
1212
// Render the app
1313
render() {
1414
render(React.createElement(App), root);
15-
}
15+
},
1616
};
1717

1818
// Initial render

‎examples/dynamic-windows/app.jsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import React, { useState } from 'react';
66

77
export function App() {
88
const [windows, setWindows] = useState([
9-
{ id: 1, title: "Window 1" },
10-
{ id: 2, title: "Window 2" },
9+
{ id: 1, title: 'Window 1' },
10+
{ id: 2, title: 'Window 2' },
1111
]);
1212
const [nextId, setNextId] = useState(3);
1313

@@ -17,26 +17,34 @@ export function App() {
1717
};
1818

1919
const closeWindow = (windowId) => {
20-
setWindows(windows.filter(w => w.id !== windowId));
20+
setWindows(windows.filter((w) => w.id !== windowId));
2121
};
2222

2323
return (
2424
<>
25-
<window title="Control Panel" defaultX={20} defaultY={20} defaultWidth={300} defaultHeight={150}>
25+
<window
26+
title="Control Panel"
27+
defaultX={20}
28+
defaultY={20}
29+
defaultWidth={300}
30+
defaultHeight={150}
31+
>
2632
<text color="#FFFF00">Dynamic Window Manager</text>
2733
<separator />
2834
<text>Total windows: {windows.length}</text>
2935
<button onClick={addWindow}>Add New Window</button>
3036
<separator />
31-
<text color="#888888">Click the X button on any window to close it</text>
37+
<text color="#888888">
38+
Click the X button on any window to close it
39+
</text>
3240
</window>
3341

34-
{windows.map(w => (
42+
{windows.map((w) => (
3543
<window
3644
key={w.id}
3745
title={w.title}
38-
defaultX={100 + (w.id * 30)}
39-
defaultY={100 + (w.id * 30)}
46+
defaultX={100 + w.id * 30}
47+
defaultY={100 + w.id * 30}
4048
defaultWidth={400}
4149
defaultHeight={200}
4250
onClose={() => closeWindow(w.id)}

‎examples/dynamic-windows/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { createRoot, render } from 'react-imgui-reconciler/reconciler.js';
77
import { App } from './app.jsx';
88

99
// Configure window
10-
globalThis.sappConfig.title = "Dynamic Windows Demo";
10+
globalThis.sappConfig.title = 'Dynamic Windows Demo';
1111

1212
// Create React root with fiber root and container
1313
const root = createRoot();
@@ -20,7 +20,7 @@ globalThis.reactApp = {
2020
// Note: resetAfterCommit in host-config.js will sync rootChildren after each render
2121
render() {
2222
render(React.createElement(App), root);
23-
}
23+
},
2424
};
2525

2626
// Initial render

‎examples/hello/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { App } from './app.jsx';
99
// Configure window (optional - defaults are provided)
1010
// globalThis.sappConfig is created by imgui-unit with { title: "imgui-react-runtime" }
1111
// Applications can override properties here before rendering
12-
globalThis.sappConfig.title = "Hello World";
12+
globalThis.sappConfig.title = 'Hello World';
1313
globalThis.sappConfig.width = 320;
1414
globalThis.sappConfig.height = 200;
1515

@@ -24,7 +24,7 @@ globalThis.reactApp = {
2424
// Note: resetAfterCommit in host-config.js will sync rootChildren after each render
2525
render() {
2626
render(React.createElement(App), root);
27-
}
27+
},
2828
};
2929

3030
// Initial render

‎examples/showcase/BouncingBall.jsx‎

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,32 +29,40 @@ export function BouncingBall() {
2929
function render(t) {
3030
const dt = (t - time) / 10;
3131
time = t;
32-
33-
setBallX(prevX => {
32+
33+
setBallX((prevX) => {
3434
let newX = prevX + vx.current * dt;
3535

3636
// Bounce off left/right walls
37-
if (newX - ballRadius <= borderThickness || newX + ballRadius >= contentWidth - borderThickness) {
37+
if (
38+
newX - ballRadius <= borderThickness ||
39+
newX + ballRadius >= contentWidth - borderThickness
40+
) {
3841
vx.current = -vx.current;
3942
// Clamp position to stay within bounds
40-
newX = newX - ballRadius <= borderThickness
41-
? borderThickness + ballRadius
42-
: contentWidth - borderThickness - ballRadius;
43+
newX =
44+
newX - ballRadius <= borderThickness
45+
? borderThickness + ballRadius
46+
: contentWidth - borderThickness - ballRadius;
4347
}
4448

4549
return newX;
4650
});
4751

48-
setBallY(prevY => {
52+
setBallY((prevY) => {
4953
let newY = prevY + vy.current * dt;
5054

5155
// Bounce off top/bottom walls
52-
if (newY - ballRadius <= borderThickness || newY + ballRadius >= contentHeight - borderThickness) {
56+
if (
57+
newY - ballRadius <= borderThickness ||
58+
newY + ballRadius >= contentHeight - borderThickness
59+
) {
5360
vy.current = -vy.current;
5461
// Clamp position to stay within bounds
55-
newY = newY - ballRadius <= borderThickness
56-
? borderThickness + ballRadius
57-
: contentHeight - borderThickness - ballRadius;
62+
newY =
63+
newY - ballRadius <= borderThickness
64+
? borderThickness + ballRadius
65+
: contentHeight - borderThickness - ballRadius;
5866
}
5967

6068
return newY;
@@ -72,13 +80,47 @@ export function BouncingBall() {
7280
{/* flags=64 is ImGuiWindowFlags_AlwaysAutoResize */}
7381
<child width={contentWidth} height={contentHeight} noPadding noScrollbar>
7482
{/* White borders - top, left, bottom, right */}
75-
<rect x={0} y={0} width={contentWidth} height={borderThickness} color="#FFFFFF" filled />
76-
<rect x={0} y={0} width={borderThickness} height={contentHeight} color="#FFFFFF" filled />
77-
<rect x={0} y={contentHeight - borderThickness} width={contentWidth} height={borderThickness} color="#FFFFFF" filled />
78-
<rect x={contentWidth - borderThickness} y={0} width={borderThickness} height={contentHeight} color="#FFFFFF" filled />
83+
<rect
84+
x={0}
85+
y={0}
86+
width={contentWidth}
87+
height={borderThickness}
88+
color="#FFFFFF"
89+
filled
90+
/>
91+
<rect
92+
x={0}
93+
y={0}
94+
width={borderThickness}
95+
height={contentHeight}
96+
color="#FFFFFF"
97+
filled
98+
/>
99+
<rect
100+
x={0}
101+
y={contentHeight - borderThickness}
102+
width={contentWidth}
103+
height={borderThickness}
104+
color="#FFFFFF"
105+
filled
106+
/>
107+
<rect
108+
x={contentWidth - borderThickness}
109+
y={0}
110+
width={borderThickness}
111+
height={contentHeight}
112+
color="#FFFFFF"
113+
filled
114+
/>
79115

80116
{/* Green bouncing ball */}
81-
<circle x={ballX} y={ballY} radius={ballRadius} color="#00FF00" filled />
117+
<circle
118+
x={ballX}
119+
y={ballY}
120+
radius={ballRadius}
121+
color="#00FF00"
122+
filled
123+
/>
82124
</child>
83125
</window>
84126
);

‎examples/showcase/ControlledWindow.jsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,24 @@ export function ControlledWindow() {
1111
x: 300,
1212
y: 300,
1313
width: 350,
14-
height: 250
14+
height: 250,
1515
});
1616

1717
const snapToOrigin = () => {
18-
setWindowState(prev => ({ ...prev, x: 20, y: 20 }));
18+
setWindowState((prev) => ({ ...prev, x: 20, y: 20 }));
1919
};
2020

2121
const snapToCenter = () => {
2222
// Approximate screen center
23-
setWindowState(prev => ({ ...prev, x: 400, y: 300 }));
23+
setWindowState((prev) => ({ ...prev, x: 400, y: 300 }));
2424
};
2525

2626
const makeWide = () => {
27-
setWindowState(prev => ({ ...prev, width: 600, height: 250 }));
27+
setWindowState((prev) => ({ ...prev, width: 600, height: 250 }));
2828
};
2929

3030
const makeTall = () => {
31-
setWindowState(prev => ({ ...prev, width: 350, height: 400 }));
31+
setWindowState((prev) => ({ ...prev, width: 350, height: 400 }));
3232
};
3333

3434
return (
@@ -49,8 +49,13 @@ export function ControlledWindow() {
4949

5050
<text color="#00FFFF">Current State:</text>
5151
<indent>
52-
<text>Position: ({Math.round(windowState.x)}, {Math.round(windowState.y)})</text>
53-
<text>Size: {Math.round(windowState.width)} x {Math.round(windowState.height)}</text>
52+
<text>
53+
Position: ({Math.round(windowState.x)}, {Math.round(windowState.y)})
54+
</text>
55+
<text>
56+
Size: {Math.round(windowState.width)} x{' '}
57+
{Math.round(windowState.height)}
58+
</text>
5459
</indent>
5560

5661
<separator />
@@ -70,12 +75,14 @@ export function ControlledWindow() {
7075

7176
<collapsingheader title="How This Works">
7277
<text wrapped>
73-
This window uses x, y, width, and height props (not defaultX/defaultY).
74-
These props are enforced every frame using ImGuiCond_Always.
78+
This window uses x, y, width, and height props (not
79+
defaultX/defaultY). These props are enforced every frame using
80+
ImGuiCond_Always.
7581
</text>
7682
<text wrapped>
77-
When you move or resize the window, onWindowState fires with new values.
78-
We update React state, which updates the props, completing the cycle.
83+
When you move or resize the window, onWindowState fires with new
84+
values. We update React state, which updates the props, completing the
85+
cycle.
7986
</text>
8087
<text wrapped>
8188
The buttons demonstrate programmatic control: just update state!

0 commit comments

Comments
 (0)