You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
2.3 KiB
Markdown
53 lines
2.3 KiB
Markdown
# 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.
|