# ScalesApp React Expert Memory ## Key File Paths - Report Editor root: `frontend/src/components/ReportEditor/` - Element models: `models/Element.jsx` — OOP class hierarchy, `fromJSON` has `elementClasses` map - Element CSS: `elements.css` — one block per element type - Inspector CSS: `ObjectInspector.css` - Data resolver utils: `utils/dataResolver.js` — `resolveDBTextValue`, `getAvailableObjects`, `getAvailableFields` - Expression evaluator: `utils/expressionEvaluator.js` — recursive-descent, no eval ## Element Type Pattern Adding a new element type requires touching 8 files: 1. `models/Element.jsx` — new class + register in `elementClasses` map in `fromJSON` 2. `NewElement.jsx` — component file, modeled on `DBTextField.jsx` 3. `ExpressionEditorPanel.jsx` (or equivalent inspector panel) 4. `EditorCanvas.jsx` — import + `renderElement` case + click handler in `handleCanvasClick` 5. `Toolbar.jsx` — tool button 6. `ObjectInspector.jsx` — import panel + render for `element.type === 'xxx'` 7. `elements.css` — CSS block for new class 8. `ResizeHandles.jsx` — add type to `getHandles` switch, `getHandlePosition` branch, and resize logic branch ## ObjectInspector Band-Detection Pattern When a panel needs to detect if an element is inside a band (for field resolution): ```js const parentBand = allElements.find(el => el.type === 'band' && el.children && el.children.includes(element.id)); // Nested band handling: if (parentBand.parentBandId) { const grandparentBand = allElements.find(el => el.id === parentBand.parentBandId); // grandparentData[0][parentBand.dataSource] → nestedData array } ``` ## DBTextField / ExpressionField Props Pattern Both receive: `element, isSelected, isSingleSelection, onSelect, onUpdate, onDelete, onDragStart, onDrag, charWidth, charHeight, previewMode, toolMode, parentBandId` Uses hooks: `useElementDrag`, `useElementSelection`, `useReportData`, `useBandContext` ## resolveDBTextValue signature ```js resolveDBTextValue(reportData, objectKey, fieldPath, parentBandId, { currentBandData }) ``` - objectKey = `''` for band-relative field access ## ExpressionField Field Ref Format `[objectKey.fieldPath]` for top-level fields, `[fieldPath]` for band-relative fields. Strip brackets, split on first `.` to get objectKey and fieldPath.