노드 간의 간선을 그릴 때 중점을 기준으로 그리는 방식을 사용했다. 그러나, 새로운 노드가 추가될 때마다 기존 노드들이 상단으로 이동하면서, 이 과정에서 간선이 다른 노드 영역에 침범하는 문제가 발생했다. 이는 노드 간의 명확한 구분을 방해하고 시각적 혼란을 야기했다.

Untitled

이 문제를 해결하기 위해 간선을 그리는 방식을 수정할 필요가 있었다. 기존에는 두 노드의 중점을 연결하는 방식으로 간선을 그렸지만, 이를 시작 노드의 오른쪽 면과 끝 노드의 왼쪽 면의 중간점을 기준으로 연결하는 방식으로 변경했다.

이러한 접근 방식은 간선이 노드 간에 보다 명확하고 깔끔하게 그려지도록 하였다

또한 마인드맵의 간선을 매력적인 간선으로 만들고 싶은 욕심이 생겼다

처음에는 quadTo 함수로 곡선을 그렸다. 그러나 cubicTo 함수로 전환함으로써 간선을 마인드맵 스타일로 보다 세련되게 표현할 수 있었다

private fun drawLine(
        fromNode: Node,
        toNode: Node,
        canvas: Canvas,
    ) {
        val startX = getNodeEdgeX(fromNode, true)
        val startY = fromNode.path.centerY.toPx(context)
        val endX = getNodeEdgeX(toNode, false)
        val endY = toNode.path.centerY.toPx(context)
        val midX = (startX + endX) / 2
        val path =
            path.apply {
                reset()
                moveTo(startX, startY)
                cubicTo(midX, startY, midX, endY, endX, endY)
            }
        canvas.drawPath(path, drawInfo.linePaint)
    }

    private fun getNodeEdgeX(
        node: Node,
        isStart: Boolean,
    ): Float {
        val nodeCenterX = node.path.centerX.toPx(context)
        val widthOffset =
            when (node) {
                is CircleNode -> node.path.radius.toPx(context)
                is RectangleNode -> node.path.width.toPx(context) / 2
            }
        return if (isStart) nodeCenterX + widthOffset else nodeCenterX - widthOffset
    }

Untitled

이러한 개선을 통해, 노드 간의 연결선이 더욱 명확하고 시각적으로 매력적인 방식으로 표현될 수 있게 되었으며, 전체적인 노드 구조의 가독성과 시각적 질서 또한 개선되었다.