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.
84 lines
2.0 KiB
JavaScript
84 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { useElementDrag } from './hooks/useElementDrag';
|
|
import { useElementSelection } from './hooks/useElementSelection';
|
|
import { getElementStyle } from './utils/elementUtils';
|
|
import './elements.css';
|
|
|
|
/**
|
|
* Band element component
|
|
* Represents a repeating section that iterates over data arrays
|
|
*/
|
|
function BandElement({
|
|
element,
|
|
isSelected,
|
|
isSingleSelection,
|
|
onSelect,
|
|
onUpdate,
|
|
onDelete,
|
|
onDragStart,
|
|
onDrag,
|
|
charWidth,
|
|
charHeight,
|
|
toolMode,
|
|
children // Child elements to render inside band (in design mode)
|
|
}) {
|
|
// Use custom hooks for drag and selection
|
|
const { isDragging, handleMouseDown: handleDragMouseDown } = useElementDrag({
|
|
isSelected,
|
|
onDragStart,
|
|
onDrag,
|
|
toolMode,
|
|
constrainX: true // Only vertical dragging
|
|
});
|
|
|
|
const { handleClick } = useElementSelection({
|
|
isSelected,
|
|
onSelect,
|
|
onDelete,
|
|
toolMode
|
|
});
|
|
|
|
const handleMouseDown = (e) => {
|
|
e.stopPropagation();
|
|
if (!isSelected) {
|
|
onSelect();
|
|
}
|
|
handleDragMouseDown(e, element.id);
|
|
};
|
|
|
|
// Get caption text
|
|
const captionText = element.caption ||
|
|
`${element.bandType}: ${element.dataSource || 'no data'}`;
|
|
|
|
const style = {
|
|
...getElementStyle(element, charWidth, charHeight),
|
|
borderTop: '2px dashed #667eea',
|
|
borderBottom: '2px dashed #667eea',
|
|
borderLeft: 'none',
|
|
borderRight: 'none',
|
|
backgroundColor: isSelected
|
|
? 'rgba(102, 126, 234, 0.08)'
|
|
: 'rgba(200, 200, 200, 0.03)',
|
|
boxSizing: 'border-box'
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`band-element ${isSelected ? 'selected' : ''} ${isDragging ? 'dragging' : ''}`}
|
|
style={style}
|
|
onClick={handleClick}
|
|
onMouseDown={handleMouseDown}
|
|
>
|
|
<div className="band-caption">
|
|
{captionText}
|
|
</div>
|
|
{/* Render child elements inside band container in design mode */}
|
|
<div className="band-children">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BandElement;
|