Слияние кода завершено, страница обновится автоматически
React Flow Chart
Этот проект направлен на создание настраиваемой библиотеки диаграмм потоков данных с декларативным подходом. Важно отметить, что вы контролируете состояние. Выберите Redux, MobX, React или любую другую библиотеку управления состоянием — просто передайте текущее состояние и подключите обратные вызовы.
Например:
Диаграмма потока данных представляет собой набор узлов, портов и связей. Вы можете определить свои собственные свойства, делая этот формат достаточно гибким. См. types/chart.ts (./src/types/chart.ts). Обратите внимание, узлы, порты и связи должны иметь уникальный идентификатор.
export const chart: IChart = {
offset: {
x: 0,
y: 0
},
scale: 1,
nodes: {
node1: {
id: 'node1',
type: 'output-only',
position: {
x: 300,
y: 100
},
ports: {
port1: {
id: 'port1',
type: 'output',
properties: {
value: 'yes'
}
},
port2: {
id: 'port2',
type: 'output',
properties: {
value: 'no'
}
}
}
},
node2: {
id: 'node2',
type: 'input-output',
position: {
x: 300,
y: 300
},
ports: {
port1: {
id: 'port1',
type: 'input'
},
port2: {
id: 'port2',
type: 'output'
}
}
}
},
links: {
link1: {
id: 'link1',
from: {
nodeId: 'node1',
portId: 'port2'
},
to: {
nodeId: 'node2',
portId: 'port1'
}
}
},
selected: {},
hovered: {}
};
Это создаст простую диаграмму с двумя узлами, которая будет выглядеть следующим образом:
npm i @mrblenny/react-flow-chart
Большинство компонентов/типов доступны как экспорт на корневом уровне. Ознакомьтесь с демонстрацией Storybook для получения дополнительных примеров.
import { FlowChartWithState } from "@mrblenny/react-flow-chart";
const chartSimple = {
offset: {
x: 0,
y: 0
},
nodes: {
node1: {
id: "node1",
type: "output-only",
position: {
x: 300,
y: 100
},
ports: {
port1: {
id: "port1",
type: "output",
properties: {
value: "yes"
}
},
port2: {
id: "port2",
type: "output",
properties: {
value: "no"
}
}
}
},
node2: {
id: "node2",
type: "input-output",
position: {
x: 300,
y: 300
},
ports: {
port1: {
id: "port1",
type: "input"
},
port2: {
id: "port2",
type: "output"
}
}
}
},
links: {
link1: {
id: "link1",
from: {
nodeId: "node1",
portId: "port2"
},
to: {
nodeId: "node2",
portId: "port1"
}
}
},
selected: {},
hovered: {}
};
const Example = (
<FlowChartWithState initialValue={chartSimple} />
);
stories/InternalReactState.tsx
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )