Skip to content

Commit

Permalink
thread view performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@leo-lox
leo-lox committed Nov 5, 2024
1 parent 2b09a68 commit 317b5b7
Showing 2 changed files with 182 additions and 183 deletions.
316 changes: 162 additions & 154 deletions lib/presentation_layer/components/comments_section.dart
View file
Original file line number Diff line number Diff line change
@@ -1,184 +1,192 @@
import 'package:flutter/material.dart';
import 'package:camelus/config/palette.dart';
import 'package:camelus/domain_layer/entities/user_metadata.dart';
import 'package:camelus/domain_layer/entities/nostr_note.dart';
import 'package:camelus/domain_layer/entities/tree_node.dart';
import 'package:camelus/presentation_layer/components/note_card/note_card_container.dart';
import 'package:flutter/material.dart';

import '../../domain_layer/entities/nostr_note.dart';
import '../../domain_layer/entities/tree_node.dart';
import '../atoms/rounded_corner_painer.dart';
import 'note_card/note_card.dart';

class CommentSection extends StatefulWidget {
final TreeNode<NostrNote> commentTree;
import 'package:camelus/presentation_layer/atoms/rounded_corner_painer.dart';

const CommentSection({super.key, required this.commentTree});
class CommentSection extends StatelessWidget {
final TreeNode<NostrNote> comment;

@override
State<CommentSection> createState() => _CommentSectionState();
}

class _CommentSectionState extends State<CommentSection> {
final repliesExpanded = <String, bool>{};
const CommentSection({
super.key,
required this.comment,
});

@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: _buildCommentTree(widget.commentTree, 0, []),
return CommentTreeItem(
node: comment,
depth: 0,
ancestorHasSibling: [false],
);
}
}

Widget _buildCommentTree(
TreeNode<NostrNote> node,
int depth,
List<bool> ancestorHasSibling,
) {
final Color lineColor = Palette.darkGray;
class CommentTreeItem extends StatefulWidget {
final TreeNode<NostrNote> node;
final int depth;
final List<bool> ancestorHasSibling;

List<bool> childAncestorHasSibling = List.from(ancestorHasSibling);
childAncestorHasSibling.add(node.hasSiblings);
const CommentTreeItem({
super.key,
required this.node,
required this.depth,
required this.ancestorHasSibling,
});

bool isRepliesExpanded = repliesExpanded[node.value.id] ?? false;
@override
CommentTreeItemState createState() => CommentTreeItemState();
}

if (node.children.length < 2) {
setState(() {
repliesExpanded[node.value.id] = true;
isRepliesExpanded = true;
});
}
class CommentTreeItemState extends State<CommentTreeItem> {
bool isExpanded = false;

@override
void initState() {
super.initState();
isExpanded = widget.node.children.length < 2;
}

@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
clipBehavior: Clip.none,
children: [
// for (int i = 0; i < depth; i++)
// if (ancestorHasSibling[i])
// Positioned(
// left: 13.0 * i,
// top: 0,
// bottom: 0,
// child: Container(
// width: 2.0,
// height: 60,
// color: Palette.purple,
// ),
// ),
CommentCard(
node: widget.node,
depth: widget.depth,
ancestorHasSibling: widget.ancestorHasSibling,
isExpanded: isExpanded,
onToggleExpand: () {
setState(() {
isExpanded = !isExpanded;
});
},
),
if (isExpanded)
...widget.node.children.map((child) => CommentTreeItem(
node: child,
depth: widget.depth + 1,
ancestorHasSibling: [
...widget.ancestorHasSibling,
widget.node.hasSiblings
],
)),
],
);
}
}

Padding(
padding: EdgeInsets.only(left: depth * 16.0),
child: Stack(
clipBehavior: Clip.none,
children: [
// Rounded corner connecting horizontal and vertical lines
if (node.hasParent)
Positioned(
left: -15.0,
top: 0.0,
child: Column(
children: [
Container(
width: 2.0,
height: 60.0,
color: lineColor,
),
Padding(
padding: EdgeInsets.only(left: 10.0),
child: CustomPaint(
size: Size(10.0, 10.0),
painter: RoundedCornerPainter(
color: lineColor,
),
),
),
],
),
),
class CommentCard extends StatelessWidget {
final TreeNode<NostrNote> node;
final int depth;
final List<bool> ancestorHasSibling;
final bool isExpanded;
final VoidCallback onToggleExpand;

const CommentCard({
super.key,
required this.node,
required this.depth,
required this.ancestorHasSibling,
required this.isExpanded,
required this.onToggleExpand,
});

if (node.hasChildren)
Positioned(
left: 10.0,
top: 60,
bottom: 40,
child: Container(
width: 2.0,
color: lineColor,
),
),

/// paint the gap that expand button is leaving
if (node.hasChildren && node.children.length == 1)
Positioned(
left: 10.0,
top: 60,
bottom: 0,
child: Container(
width: 2.0,
color: lineColor,
),
),
@override
Widget build(BuildContext context) {
final Color lineColor = Palette.darkGray;

if (node.hasChildren && isRepliesExpanded)
Positioned(
left: 10.0,
bottom: 0,
child: Container(
return Stack(
clipBehavior: Clip.none,
children: [
Padding(
padding: EdgeInsets.only(left: depth * 16.0),
child: Stack(
clipBehavior: Clip.none,
children: [
if (node.hasParent)
Positioned(
left: -15.0,
top: 0.0,
child: Column(
children: [
Container(
width: 2.0,
height: 22,
height: 60.0,
color: lineColor,
),
),

NoteCardContainer(
key: ValueKey(node.value.id),
note: node.value,
),

/// on only one child its expaded already
if (node.hasChildren && node.children.length > 1)
// expand replies
Positioned(
left: 0.0,
//top: 60,
bottom: 20,
child: GestureDetector(
onTap: () {
print("expand replies");
setState(() {
repliesExpanded[node.value.id] =
!(repliesExpanded[node.value.id] ?? false);
isRepliesExpanded =
repliesExpanded[node.value.id] ?? false;
});
},
child: Container(
//padding: const EdgeInsets.all(4.0),

child: isRepliesExpanded
? Icon(
Icons.remove_circle_outline,
color: Palette.gray,
size: 22.0,
)
: Icon(
Icons.add_circle_outline,
color: Palette.gray,
size: 22.0,
),
Padding(
padding: EdgeInsets.only(left: 10.0),
child: CustomPaint(
size: Size(10.0, 10.0),
painter: RoundedCornerPainter(
color: lineColor,
),
),
),
),
],
],
),
),
if (node.hasChildren)
Positioned(
left: 10.0,
top: 60,
bottom: 40,
child: Container(
width: 2.0,
color: lineColor,
),
),
if (node.hasChildren && node.children.length == 1)
Positioned(
left: 10.0,
top: 60,
bottom: 0,
child: Container(
width: 2.0,
color: lineColor,
),
),
if (node.hasChildren && isExpanded)
Positioned(
left: 10.0,
bottom: 0,
child: Container(
width: 2.0,
height: 22,
color: lineColor,
),
),
NoteCardContainer(
key: ValueKey(node.value.id),
note: node.value,
),
),
],
if (node.hasChildren && node.children.length > 1)
Positioned(
left: 0.0,
bottom: 20,
child: GestureDetector(
onTap: onToggleExpand,
child: Container(
child: isExpanded
? Icon(
Icons.remove_circle_outline,
color: Palette.gray,
size: 22.0,
)
: Icon(
Icons.add_circle_outline,
color: Palette.gray,
size: 22.0,
),
),
),
),
],
),
),
if (isRepliesExpanded)
...node.children.map((child) => _buildCommentTree(
child,
depth + 1,
childAncestorHasSibling,
)),
],
);
}
Loading

0 comments on commit 317b5b7

Please sign in to comment.