Исправлен перенос на ts. Логика дерева отделена от изображения #4
Conversation
src/App.tsx
Outdated
| return ( | ||
| () => <div id={'my-canvas'}></div> | ||
| () => <div id={'my-canvas'}/> |
There was a problem hiding this comment.
Внести идентификатор my-canvas внутрь компонента, отрисовывающего дерево.
Предлагаю сделать ещё один класс-компонент, в котором в render будет возвращаться этот контейнер с внутренним идентификатором, плюс там же будет код который с помощью d3 отвечает за отрисовку.
И уже он будет использовать твой класс Tree.ts для работы с логикой, с моделью графа, который рисуется.
src/TreeNode.ts
Outdated
| const isError: boolean = this.checkVertex(node, label); | ||
| node.children.push(TreeNode.getInstance({ | ||
| label, | ||
| graph: getSubgraph(vertexArray, node.graph), |
There was a problem hiding this comment.
Чем отличается семантика методов данного класса и функций из модуля 'graph'? Может быть можно избавиться от модуля и сделать функции методами данного класса?
src/TreeNode.ts
Outdated
| return false; | ||
| } | ||
| else { | ||
| Notifier.send({ |
There was a problem hiding this comment.
Предлагаю выбрасывать наверх событие, что произошло в дереве, а сообщение нотификатором отправлять уже из приложения. Если мы будем переиспользовать этот компонент в других местах, чтобы не было завязано на конкретных сообщениях и штрафах.
| this.redraw(); | ||
| tree.currLbl = i; | ||
| d3.select("#labelpos").text(this.currLbl + '/' + this.glabels.length); | ||
| } | ||
|
|
||
| private redraw() { |
There was a problem hiding this comment.
Вынести тоже в компонент визуализации предлагаю, чтобы разделить логику и отрисовку.
Указаны типы, использованы стрелочные функции вместо анонимных, let исправлен на cost, где необходимо.
Логика дерева отделена от изобрадения дерева.