0

Я визуализирую данные двух таблиц:

const json ={
  "tables": [
    {
      "tableName": "One",
      "coordinates": {
        "x": "100",
        "y": "100"
      },
      "columns": [
        {"name": "smthLike",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""},
        {"name": "@MainColumn",
            "type": "integer",
            "typeFormat": "int64",
            "example": "",
            "descriptor": "codePlatform"}
      ]
    },
    {
      "tableName": "Two",
      "coordinates": {
        "x": "200",
        "y": "200"
      },
      "columns": [
        {"name": "codePlatform",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""},
        {"name": "namePlatform",
            "type": "string",
            "typeFormat": "",
            "example": "",
            "descriptor": ""}
      ]
    }
  ]
}
введите сюда код

В работе я использую код библиотеки react-xarrows, Example 4: https://codesandbox.io/embed/github/Eliav2/react-xarrows/tree/master/examples?fontsize=14&hidenavigation=1&theme=dark

У таблиц есть ключи name descriptor. Если дескриптор совпадает с именем (codePlatform в данном случае), то стрелка связи данных должна тянуться от поля с codePlatform к тому полю, у которого является дескриптором (@MainColumn).

Я пыталась прописать такое условие, но пока не выходит. Чтобы отрисовать стрелку, нужно задать ей точку начала и точку конца. Подскажите, как можно прописать такое условие в компонент поля Column?

import React from "react";
import styles from "./Column.module.css";
import Xarrow, { useXarrow, Xwrapper } from "react-xarrows";

export const Column = ({ column, index }) => {
  const { name, descriptor } = column;

  const line = {
    from: "",
    to: "",
  };

  return (
    <>
      <div className={styles.ColumnContainer}>
        {name}: {descriptor}
      </div>
    </>
  );
};

код компонента таблиц:

import Draggable from 'react-draggable';
import React from 'react';
import Xarrow, { useXarrow, Xwrapper } from 'react-xarrows';
import { Column } from '../Column/Column';

export const DraggableBox = ({table, key, reference = undefined, id = undefined, ...style }) => {
  const {tableName, coordinates} = table;
  
  const updateXarrow = useXarrow();
  
  //if (initialOffset) moreStyle = { position: 'absolute', left: initialOffset.x, top: initialOffset.y };
  return (
    <Draggable onDrag={updateXarrow} onStop={updateXarrow}>
      <div ref={reference} id={id} style={{position: 'absolute', left: coordinates.x + 'px', top: coordinates.y + 'px', border: '2px solid'}}>
      <p>Название: {tableName}</p>
      <div>
        {table.columns.map((column, index) => (
          <Column table={table} column={column} key={index} />
        ))}
      </div>
      </div>
      
    </Draggable>
  );
};
введите сюда код

и компонент, где перебираю весь массив данных:

import { Table } from "../Table/Table";
import styles from "./Tables.module.css";
import tableData from "../utils/all_db_schema.json";

export const Tables = () => {
  const [tableState, setTableState] = useState(tableData);

  return (
    <>
      {tableState.map((elem, index) => (
        <div
          className={styles.AreaContainer}
          key={index}
          style={{ color: elem.color }}
        >
          <p>Имя: {elem.groupName}</p>
          <div className={styles.ClassesContainer}>
            {elem.tables.map((table, index) => (
              DraggableBox table={table} key={index} />
            ))}
          </div>
        </div>
      ))}
    </>
  );
};
13
  • что именно это условие должно выполнять? и как выглядят сами точки это координаты "x","y" ? и еще где вы хотите использовать данные о координатах я так понимаю где-то вне Column тогда видимо стоит прокидывать на родительский компонент, или через стейт менеджер если он есть Commented 21 сент. 2022 в 12:34
  • @DaniilLoban условие должно записывать в lines откуда (от какого поля) идет стрелка и куда. Координаты нужны для размещения самих таблиц, на них у меня отдельный компонент, родительский для column
    – MIA
    Commented 21 сент. 2022 в 12:53
  • если я правильно понимаю ситуацию то стрелки идут от таблицы к таблице (от и до их колонок разумеется) но я не понимаю каким образом Вы в колонке хотите получить сразу 2 координаты, она может знать про свою только Commented 21 сент. 2022 в 12:57
  • где вы обрабатываете json? и где в нем видны связи между 2мя таблицами? Commented 21 сент. 2022 в 12:59
  • @DaniilLoban export const Tables = () => { const [tableState, setTableState] = useState(tableData); return ( <> {tableState.map((elem, index) => ( <div className={styles.AreaContainer} key={index} style={{ color: elem.color }} > <p>Имя: {elem.groupName}</p> <div className={styles.ClassesContainer}> {elem.tables.map((table, index) => ( <DraggableBox table={table} key={index} /> ))} </div> </div> ))} </> ); }; и в columns потом
    – MIA
    Commented 21 сент. 2022 в 13:07

1 ответ 1

0

В документации react-xarrows сказано что в качестве start и end могут выступать строки, поэтому я предпочел их использование useRef (которые пришлось бы прокидывать через все приложение), достаточно чтобы это были уникальные id (по всему приложению!), я внес их в данные колонок, как selfId:

{
  name: "smthLike",
  type: "string",
  typeFormat: "",
  example: "",
  descriptor: "",
  selfId: "box1" <--- добавляем Id (уникальное среди всех)
},

при cоздании колонки id присваивается элементу:

export const Column = ({ column, index }) => {
  const { name, descriptor, selfId } = column;
  return (
    <div id={selfId} className={styles.ColumnContainer}> // Присваиваем id
      {name}: {descriptor}
    </div>
  );
};

Хранение самих ссылок можно организовывать абсолютно по-разному, поэтому эту часть я не делал, это может быть отдельный массив, что упростит парсинг для рендера или эта информация может хранится в колонке вместе с selfId (имена разумеется могут бы по вкусу, я назвал так чтобы не было путаницы)

В Tables выводим все имеющиеся стрелки

<Xarrow start="box1" end="box3" />

Обновляем при перетаскивании onMouseMove={() => setUpd(!upd)}можно обновлять любым другим способом, так как используемый здесь способ может повлиять на производительность.

Я встречал такой способ обновления, возможно у него есть свои плюсы, но все это рассчитано на плоскую структуру (когда нет вложенности компонент), т.е. текущий случай иной.

const [, reRender] = useReducer(() => ({}), {});
const renderCount = useRef(0);
useEffect(() => {
   renderCount.current += 1;
   if (renderCount.current === 2) {
     reRender();
     renderCount.current = 0;
   }
});

К сожалению updateXarrow в DraggableBox почему-то не приводит к обновлению.

export const Tables = () => {
  const [upd, setUpd] = useState(false);

  return (
    .........        
    <div
       onMouseMove={() => setUpd(!upd)} // Обновляем при движении мыши
    >
     .........
      <div className={styles.ClassesContainer}>
        {elem.tables.map((table, index) => (
          <DraggableBox table={table} key={index} />
        ))}
        <Xarrow start="box1" end="box3" /> // Cтрелки
      </div>
     .........
 );

введите сюда описание изображения

Ссылка на песочницу с приведенными изменениями (файлы компонент, импорт немного модифицировались!)

7
  • Тут вот какая проблема| Сейчас таблицы две| А потом их будет сотня/ Каждому полю нужно будет дать свой Id? И каждый раз отрисовывать новую стрелку Тут нужно что-то более универсальное=< потому мне и прописали в json дескриптор
    – MIA
    Commented 22 сент. 2022 в 8:40
  • а если добавить в json свойства parent target? Можно будет реализовать такие связи по ним?
    – MIA
    Commented 22 сент. 2022 в 11:08
  • Ситуация такая что можно делать связи либо по id элемента либо по его ref (React) так как колонка является последней в цепочке а ref нужен на уровне Tables придется устраивать forwardRef и прокидывать до Column но ситуация в том что у одной таблицы может быть несколько связей и значит несколько колонок со связями но Table с использованием forwardRef может вернуть только один ref иными словами forwardRef на это не заточен. Commented 22 сент. 2022 в 14:39
  • Поэтому я предлагаю использовать id однако Вы можете создать уникальный id просто - имя_таблицы.имя_поля по всем правилам баз данных и то и другое будет уникально и ссумарное значение тоже т.е. в descriptor запишите Two.codePlatform и таким образом задача будет решена так же как в ответе и не нужно будет ломать голову с уникальностью Commented 22 сент. 2022 в 14:39
  • Мария, если будут сложности с тем что я описал, обращайтесь подправлю ответ под то что тут написано Commented 22 сент. 2022 в 14:48

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.