src/components/Dialogs/CameraPathDialog.tsx - master - Cybran65/Project_0

src/components/Dialogs/CameraPathDialog.tsx

60 строк2 KB

Cybran65

style: выравнивание модели, масштаб ленты и векторные иконки

09 авг 2026, 01:10

09 авг 2026, 01:109ead2b4

import styles from './Dialogs.module.css';

interface Props {
  visible: boolean;
  onToggleVisible: () => void;
  onClose: () => void;
}

/** Точки демонстрационной траектории облёта (заглушка). */
const POINTS = [
  { id: 1, x: '3,0', y: '3,0', z: '6,0', note: 'Старт' },
  { id: 2, x: '15,0', y: '1,0', z: '6,0', note: 'Южный фасад' },
  { id: 3, x: '27,0', y: '6,0', z: '6,0', note: 'Восточный угол' },
  { id: 4, x: '28,0', y: '20,0', z: '6,0', note: 'Восточный фасад' },
  { id: 5, x: '16,0', y: '28,0', z: '6,0', note: 'Северный фасад' },
  { id: 6, x: '4,0', y: '22,0', z: '6,0', note: 'Западный угол' },
];

export default function CameraPathDialog({ visible, onToggleVisible, onClose }: Props) {
  return (
    <div className={styles.form}>
      <p className={styles.note}>
        Траектория облёта модели. Доступно отображение линии траектории в рабочей области;
        воспроизведение движения камеры будет добавлено позже.
      </p>

      <table className={styles.table}>
        <thead>
          <tr>
            <th style={{ width: 40 }}>№</th>
            <th>X, м</th>
            <th>Y, м</th>
            <th>Z, м</th>
            <th>Примечание</th>
          </tr>
        </thead>
        <tbody>
          {POINTS.map((point) => (
            <tr key={point.id}>
              <td>{point.id}</td>
              <td>{point.x}</td>
              <td>{point.y}</td>
              <td>{point.z}</td>
              <td>{point.note}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div className={styles.actions}>
        <button type="button" className={styles.secondary} onClick={onToggleVisible}>
          {visible ? 'Скрыть траекторию' : 'Показать траекторию'}
        </button>
        <button type="button" className={styles.primary} onClick={onClose}>
          Закрыть
        </button>
      </div>
    </div>
  );
}