johnruina/furniture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add presets (table/chair), object count, near_object condition, optimization locks placed objects and randomizes remaining

Browse Source
This commit is contained in:
plus_one
2026-10-17 19:52:52 -04:00
parent a708a0cfe5
commit ced33b672f
6 changed files with 172 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.html
Vendored
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>furniture-app</title>
<script type="module" crossorigin src="/assets/index-PcoLP7A2.js"></script>
<script type="module" crossorigin src="/assets/index-j9ORS9Fz.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B4HUQdL0.css">
</head>
<body>
src/App.tsx
+34 -3
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { RoomCanvas } from './components/RoomCanvas';
import { ControlPanel } from './components/ControlPanel';
import type { LayoutState } from './types';
import type { FurnitureConfig, LayoutState } from './types';
import { runRandomSearch } from './optimization/randomSearch';
import { optimizeWithNN } from './ai/nn';
@@ -9,6 +9,7 @@ const initialState: LayoutState = {
room: { width: 600, height: 400, gridSize: 10 },
entrance: { x: 30, y: 30 },
furniture: [],
objectCount: 0,
};
function App() {
@@ -18,10 +19,10 @@ function App() {
const [optimizing, setOptimizing] = useState(false);
const [timeLeft, setTimeLeft] = useState(15);
useEffect(() => {
if (!optimizing) return;
if (timeLeft <= 0) {
// run NN optimization after random search window conceptually; run final pass
const res = optimizeWithNN(state, { gridSize: 10 });
setState(res.bestState);
setOptimizing(false);
@@ -29,7 +30,6 @@ function App() {
return;
}
const t = setTimeout(() => setTimeLeft((v) => v - 1), 1000);
// also do a quick random search step each tick by sampling (lightweight)
const { bestState } = runRandomSearch(state, {
iterations: 5,
roomWidth: state.room.width,
@@ -41,6 +41,37 @@ function App() {
}, [optimizing, timeLeft]);
const handleOptimize = () => {
// lock all objects that are on map; generate remaining up to objectCount with random positions
const existing = state.furniture.map((f) => ({ ...f, lockedForOptimization: true, placed: true }));
const target = state.objectCount ?? existing.length;
const need = Math.max(0, target - existing.length);
const generated: FurnitureConfig[] = [];
for (let i = 0; i < need; i++) {
const id = 'g_' + Date.now() + '_' + i;
generated.push({
id,
name: 'Obj ' + (existing.length + i + 1),
shape: {
type: 'rectangle',
x: Math.random() * Math.max(50, state.room.width - 60),
y: Math.random() * Math.max(50, state.room.height - 60),
width: 40 + Math.random() * 40,
height: 30 + Math.random() * 30,
},
conditions: [
{ kind: 'walk_to_and_sit', weight: 1 },
{ kind: 'accessible', weight: 1 },
],
color: '#90caf9',
lockedForOptimization: false,
placed: false,
});
}
const lockedState: LayoutState = {
...state,
furniture: [...existing, ...generated],
};
setState(lockedState);
setOptimizing(true);
setTimeLeft(15);
};
src/ai/nn.ts
+14
View File
@@ -26,9 +26,23 @@ export function optimizeWithNN(state: LayoutState, options: NNOptions = {}): { b
let targetY = f.shape.y;
const needsNearEntrance = f.conditions.some((c) => c.kind === 'near_entrance');
const needsCenter = f.conditions.some((c) => c.kind === 'around_open_area');
const needsNearObj = f.conditions.find((c) => c.kind === 'near_object');
if (entrance && needsNearEntrance) {
targetX = entrance.x + (Math.random() - 0.5) * 40;
targetY = entrance.y + (Math.random() - 0.5) * 40;
} else if (needsNearObj) {
const tid = (needsNearObj.params as any)?.targetId;
const t = tid ? candidate.furniture.find((x) => x.id === tid) : undefined;
if (t) {
targetX = t.shape.x + t.shape.width / 2 - f.shape.width / 2 + (Math.random() - 0.5) * 30;
targetY = t.shape.y + t.shape.height / 2 - f.shape.height / 2 + (Math.random() - 0.5) * 30;
} else if (needsCenter) {
targetX = centerX - f.shape.width / 2 + (Math.random() - 0.5) * 60;
targetY = centerY - f.shape.height / 2 + (Math.random() - 0.5) * 60;
} else {
targetX = Math.random() * (candidate.room.width - f.shape.width);
targetY = Math.random() * (candidate.room.height - f.shape.height);
}
} else if (needsCenter) {
targetX = centerX - f.shape.width / 2 + (Math.random() - 0.5) * 60;
targetY = centerY - f.shape.height / 2 + (Math.random() - 0.5) * 60;
src/components/ControlPanel.tsx
+98 -11
View File
@@ -1,4 +1,4 @@
import type { ConditionKind, Entrance, FurnitureConfig, LayoutState, RoomConfig } from '../types';
import type { ConditionKind, Entrance, FurnitureConfig, FurniturePreset, LayoutState, RoomConfig } from '../types';
interface ControlPanelProps {
state: LayoutState;
@@ -23,6 +23,21 @@ export function ControlPanel({
optimizing,
timeLeft,
}: ControlPanelProps) {
const addPreset = (p: FurniturePreset) => {
const id = 'f_' + Date.now();
const newItem: FurnitureConfig = {
id,
name: p.name,
shape: { ...p.shape, x: 50, y: 50 },
conditions: p.conditions.map((c) => ({ ...c })),
color: p.color,
lockedForOptimization: false,
placed: true,
};
onStateChange({ ...state, furniture: [...state.furniture, newItem] });
onSelect(id);
};
const addFurniture = () => {
const id = 'f_' + Date.now();
const newItem: FurnitureConfig = {
@@ -41,6 +56,28 @@ export function ControlPanel({
onSelect(id);
};
const tablePreset: FurniturePreset = {
id: 'table',
name: 'Table',
shape: { type: 'rectangle', width: 80, height: 60 },
conditions: [
{ kind: 'walk_to_and_sit', weight: 1 },
{ kind: 'accessible', weight: 1 },
],
color: '#a1887f',
};
const chairPreset: FurniturePreset = {
id: 'chair',
name: 'Chair',
shape: { type: 'rectangle', width: 40, height: 40 },
conditions: [
{ kind: 'walk_to_and_sit', weight: 1 },
{ kind: 'near_object', weight: 1, params: {} },
{ kind: 'accessible', weight: 1 },
],
color: '#d7ccc5',
};
const setRoom = (room: Partial<RoomConfig>) => {
onStateChange({ ...state, room: { ...state.room, ...room } });
};
@@ -68,7 +105,8 @@ export function ControlPanel({
if (f.id !== selectedId) return f;
const has = f.conditions.some((c) => c.kind === kind);
if (enabled && !has) {
return { ...f, conditions: [...f.conditions, { kind, weight: 1 }] };
const params = kind === 'near_object' ? { targetId: '' } : {};
return { ...f, conditions: [...f.conditions, { kind, weight: 1, params }] };
}
if (!enabled && has) {
return { ...f, conditions: f.conditions.filter((c) => c.kind !== kind) };
@@ -78,6 +116,18 @@ export function ControlPanel({
onStateChange({ ...state, furniture: updated });
};
const setNearObjectTarget = (targetId: string) => {
if (!selectedId) return;
const updated = state.furniture.map((f) => {
if (f.id !== selectedId) return f;
return {
...f,
conditions: f.conditions.map((c) => (c.kind === 'near_object' ? { ...c, params: { ...c.params, targetId } } : c)),
};
});
onStateChange({ ...state, furniture: updated });
};
const selected = state.furniture.find((f) => f.id === selectedId);
return (
@@ -112,10 +162,29 @@ export function ControlPanel({
style={{ width: 80, marginLeft: 4 }}
/>
</label>
<div style={{ marginTop: 8 }}>
<label>
Object Count:
<input
type="number"
min={0}
value={state.objectCount ?? state.furniture.length}
onChange={(e) =>
onStateChange({ ...state, objectCount: Math.max(0, Number(e.target.value)) })
}
style={{ width: 80, marginLeft: 4 }}
/>
</label>
</div>
<div style={{ marginTop: 8 }}>
<button onClick={addFurniture}>Add Furniture</button>
<button onClick={placeEntrance} style={{ marginLeft: 8 }}>
Place Entrance
</button> <button onClick={() => addPreset(tablePreset)} style={{ marginLeft: 8 }}>
Add Table
</button>
<button onClick={() => addPreset(chairPreset)} style={{ marginLeft: 8 }}>
Add Chair
</button>
</div>
{state.entrance && (
@@ -176,16 +245,34 @@ export function ControlPanel({
</div>
<div style={{ marginTop: 8 }}>
<div>Conditions:</div>
{(['walk_to_and_sit', 'around_open_area', 'near_entrance', 'accessible', 'not_blocking_path', 'open_circulation'] as ConditionKind[]).map(
{(['walk_to_and_sit', 'around_open_area', 'near_entrance', 'near_object', 'accessible', 'not_blocking_path', 'open_circulation'] as ConditionKind[]).map(
(k) => (
<label key={k} style={{ display: 'block' }}>
<input
type="checkbox"
checked={selected.conditions.some((c) => c.kind === k)}
onChange={(e) => updateSelectedCondition(k, e.target.checked)}
/>
{k}
</label>
<div key={k} style={{ display: 'block' }}>
<label>
<input
type="checkbox"
checked={selected.conditions.some((c) => c.kind === k)}
onChange={(e) => updateSelectedCondition(k, e.target.checked)}
/>
{k}
</label>
{k === 'near_object' && selected.conditions.some((c) => c.kind === 'near_object') && (
<select
style={{ marginLeft: 8 }}
value={(selected.conditions.find((c) => c.kind === 'near_object')?.params as any)?.targetId || ''}
onChange={(e) => setNearObjectTarget(e.target.value)}
>
<option value="">Select object</option>
{state.furniture
.filter((f) => f.id !== selected.id)
.map((f) => (
<option key={f.id} value={f.id}>
{f.name}
</option>
))}
</select>
)}
</div>
),
)}
</div>
src/layout/evaluator.ts
+14 -1
View File
@@ -40,7 +40,7 @@ export function evaluateLayout(state: LayoutState, gridSize: number = 10): Layou
let score = 0;
for (const c of f.conditions) {
const s = scoreCondition(c.kind, f, state, accessibility.find((a) => a.furnitureId === f.id) || null, path);
const s = scoreCondition(c.kind, c, f, state, accessibility.find((a) => a.furnitureId === f.id) || null, path);
score += (s * (c.weight || 1)) / (f.conditions.length || 1);
}
conditionScores[f.id] = score;
@@ -53,6 +53,7 @@ export function evaluateLayout(state: LayoutState, gridSize: number = 10): Layou
function scoreCondition(
kind: string,
c: any,
f: FurnitureConfig,
state: LayoutState,
acc: AccessibilityResult | null,
@@ -85,6 +86,18 @@ function scoreCondition(
case 'accessible': {
return acc?.reachable ? 1.0 : 0.0;
}
case 'near_object': {
const tid = (c.params as any)?.targetId;
if (!tid) return 0.3;
const t = state.furniture.find((x) => x.id === tid);
if (!t) return 0.3;
const cx = f.shape.x + f.shape.width / 2;
const cy = f.shape.y + f.shape.height / 2;
const tx = t.shape.x + t.shape.width / 2;
const ty = t.shape.y + t.shape.height / 2;
const d = Math.sqrt((cx - tx) ** 2 + (cy - ty) ** 2);
return Math.max(0, 1 - d / 80);
}
case 'open_circulation': {
return path && path.length > 2 ? 0.7 : 0.5;
}
src/types/index.ts
+11
View File
@@ -26,6 +26,7 @@ export type ConditionKind =
| 'walk_to_and_sit'
| 'around_open_area'
| 'near_entrance'
| 'near_object'
| 'not_blocking_path'
| 'accessible'
| 'open_circulation';
@@ -87,8 +88,18 @@ export interface LayoutEvaluation {
penalty: number;
}
export interface FurniturePreset {
id: string;
name: string;
shape: Omit<ShapeData, 'x' | 'y'>;
conditions: ConditionSpec[];
color?: string;
}
export interface LayoutState {
room: RoomConfig;
entrance: Entrance | null;
furniture: FurnitureConfig[];
presets?: FurniturePreset[];
objectCount?: number;
}