[MindSync] 이동 중 긴 자식 노드가 존재할 때 발생하는 문제 해결

이동 중에 긴 자식 노드들이 존재할 경우 영역 표시에 관한 오류와 간선이 그대로 남아 있어 시각적으로 불편함을 주는 문제에 대해 해결책을 모색하게 되었다.

이를 해결하기 위한 고민 끝에, 노드 이동 시 구조를 유지하는 방식으로 접근하기로 결정했다. 이 방식은 노드 이동의 복잡성을 줄이면서도, 마인드맵의 전반적인 구조와 시각적 질서를 유지할 수 있게 해준다. 구체적으로 다음과 같은 조건을 만족해야한다.

1. 자식 노드의 구조 유지: 이동할 때 선택한 노드의 자식들은 서로간의 상대적인 위치를 유지하며 이동해야 한다. 이는 이동하는 노드가 가지고 있는 하위 구조가 변하지 않도록 보장함으로써, 이동 후에도 트리의 계층적 관계가 명확하게 유지되어야한다.
2. 이동 상태 관리: 노드가 이동 상태에 있을 때, 해당 노드와 직접적으로 연결되지 않은 다른 노드들은 원래의 상태와 위치를 유지해야 한다. 이는 사용자가 특정 노드의 이동에 집중할 수 있도록 하며, 이동 중인 노드 외의 다른 부분에 대한 불필요한 시각적 변화를 방지한다.
3. 부모 노드와의 연결 해제: 노드를 이동하기 시작할 때, 선택한 노드와 그 부모 노드 사이의 연결선을 일시적으로 끊는다. 이는 이동 중인 노드의 시각적 표현을 명확하게 하고, 사용자가 노드를 새로운 위치로 이동시키는 과정을 더욱 직관적으로 이해할 수 있도록 한다. 이동이 완료된 후, 새로운 위치에서의 적절한 연결을 재구성하여 트리의 일관성을 다시 확립한다.

자식 노드의 구조 유지 및 이동 상태 관리 조건 해결

private fun moveNode(
    dx: Float,
    dy: Float,
) {
    mindMapContainer.selectNode?.let { selectedNode ->
        // ...
        rightLayoutManager.arrangeNode(tree, selectedNode as RectangleNode)
    }
    lineView.updateTree(tree)
    invalidate()
}

fun arrangeNode(tree: Tree, rootNode: Node? = null) {
	// ...
	if (rootNode == null) {
		  tree.setRootNode(newHead as CircleNode)
	}
	recurArrangeNode(newHead, tree)
}

이동 상태에서도 구조를 유지해야하기 때문에 arrangeNode 메서드를 통해 구조를 유지하면서 이동할 수 있도록 하였다.

부모 노드와의 연결 해제 조건 해결

fun traverseLine(
    canvas: Canvas,
    node: Node,
    depth: Int,
) {
    for (toNodeId in node.children) {
        val toNode = tree.getNode(toNodeId)
        drawLine(node, toNode, canvas)
        traverseLine(canvas, toNode, depth + 1)
    }
}
// ...

private fun drawLine(
    fromNode: Node,
    toNode: Node,
    canvas: Canvas,
) {
    val linePaint = getLinePaintForMode()

    val path = createPath(fromNode, toNode)
    drawPathConditionally(toNode, canvas, path, linePaint)
}
// ...

private fun drawPathConditionally(
    toNode: Node,
    canvas: Canvas,
    path: Path,
    linePaint: Paint,
) {
    if (!mindMapContainer.isMoving || mindMapContainer.selectNode?.id != toNode.id) {
        canvas.drawPath(path, linePaint)
    }
}

부모 노드의 자식노드를 탐색하면서 선택한 노드 id와 탐색한 노드 id가 같지 않거나 움직임 상태가 아닌 경우 간선을 그려지도록 하였다.