Juan/hym_ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

WIP: android/ios-adaption feature, markdown, and augment #6

Draft
Juan wants to merge 28 commits from android-adaption into main
pull from: android-adaption
merge into: Juan:main
Conversation 0 Commits 28 Files Changed 68 +157 -197
1 changed files with 157 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit de3d7f8bfc - Show all commits

354
lib/collapsableEmailsWeb.dart
View File

@ -53,17 +53,20 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
String markdown = ''; String markdown = '';
List<List<String>> sentinel = []; List<List<String>> sentinel = [];
int level = 0; int level = 0;
AugmentTree root = AugmentTree(); AugmentTree zoomTreeRoot = AugmentTree();
late AugmentTree currentZoomNode;
bool zoomOut = false;
bool zoomIn = true;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_markdownConverter(); _markdownConverter();
// _registerViewFactory(widget.threadHTML); // _registerViewFactory(widget.threadHTML);
// _serializableData(widget.threadIDs); // this _serializableData(widget.threadIDs); // this
_markdown2Tree(markdown); _markdown2Tree(markdown);
_keyListener(); _keyListener();
_buildForZooms(level); _buildForZooms();
} }
@override @override
@ -111,6 +114,7 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
} }
tree.children = [newNode]; tree.children = [newNode];
} else { } else {
newNode.parent = tree;
tree.children.add(newNode); tree.children.add(newNode);
} }
// } else{ // so the node should go high // } else{ // so the node should go high
@ -131,12 +135,12 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
return; return;
} }
print("> ${node2add.tag}"); // print("> ${node2add.tag}");
_add2Tree(tree.children.last, node2add); _add2Tree(tree.children.last, node2add);
} else if ((hirarchyDict[node2add.tag] ?? -1) == } else if ((hirarchyDict[node2add.tag] ?? -1) ==
(hirarchyDict[tree.children.last.ogTag] ?? -1)) { (hirarchyDict[tree.children.last.ogTag] ?? -1)) {
print("equals??"); // print("equals??");
tree.children.add(newNode); tree.children.add(newNode);
newNode.parent = tree; newNode.parent = tree;
} }
@ -145,8 +149,6 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
void _markdown2Tree(String text) { void _markdown2Tree(String text) {
print("started markdown2tree"); print("started markdown2tree");
int highest = 0;
AugmentTree zoomTreeRoot = AugmentTree();
final List<md.Node> nakedList = md.Document().parseLines(text.split('\n')); final List<md.Node> nakedList = md.Document().parseLines(text.split('\n'));
List<String> pList = []; List<String> pList = [];
List<String> h1List = []; List<String> h1List = [];
@ -169,46 +171,23 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
} else if (node.tag == 'h2') { } else if (node.tag == 'h2') {
// i dont add any since i dont have it, maybe the function makes sense // i dont add any since i dont have it, maybe the function makes sense
h2List.add(node.textContent); h2List.add(node.textContent);
_add2Tree(zoomTreeRoot, node); // fix this
} else if (node.tag == 'h3') { } else if (node.tag == 'h3') {
h3List.add(node.textContent); h3List.add(node.textContent);
root.children.add(temp);
_add2Tree(zoomTreeRoot, node); _add2Tree(zoomTreeRoot, node);
} else if (node.tag == 'h4') { } else if (node.tag == 'h4') {
h4List.add(node.textContent); //this broke it h4List.add(node.textContent); //this broke it
_add2Tree(zoomTreeRoot, node); // change to temp _add2Tree(zoomTreeRoot, node); // change to temp
if (root.children.isNotEmpty) {
root.children.last.children.add(temp);
}
} else if (node.tag == 'h5') { } else if (node.tag == 'h5') {
h5List.add(node.textContent); h5List.add(node.textContent);
print(node.textContent); print(node.textContent);
_add2Tree(zoomTreeRoot, node); _add2Tree(zoomTreeRoot, node);
if (root.children.last.children.isNotEmpty) {
print("h5 index ${root.children.last.children.length}");
root.children.last.children.last.children.add(temp);
print(
"h5 after index length ${root.children.last.children.last.children.length}");
}
} else if (node.tag == 'h6') { } else if (node.tag == 'h6') {
h6List.add(node.textContent); h6List.add(node.textContent);
if (root.children.last.children.isNotEmpty) { _add2Tree(zoomTreeRoot, node); // fix this
print(
"h6 index ${root.children.last.children.last.children.length}");
root.children.last.children.last.children.add(temp);
print(node.textContent);
_add2Tree(zoomTreeRoot, node);
}
// root.children.last.children.last.children.add(temp);
} else if (node.tag == 'p' || node.tag == 'ul' || node.tag == 'li') { } else if (node.tag == 'p' || node.tag == 'ul' || node.tag == 'li') {
pList.add(node.textContent); pList.add(node.textContent);
_add2Tree(zoomTreeRoot, node); // fix this _add2Tree(zoomTreeRoot, node); // fix this
if (root.children.isEmpty) {
root.children.add(temp);
} else if (root.children.last.children.isNotEmpty) {
//perhaps recursive
root.children.last.children.last.children.add(temp);
}
} }
} }
} }
@ -216,31 +195,32 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
this.sentinel = [h1List, h2List, h3List, h4List, h5List, h6List, pList]; this.sentinel = [h1List, h2List, h3List, h4List, h5List, h6List, pList];
sentinel.removeWhere((hList) => hList.isEmpty); sentinel.removeWhere((hList) => hList.isEmpty);
print('algorithm adding: '); // print('algorithm adding: ');
print("first layer: ${zoomTreeRoot.children}"); // print("first layer: ${zoomTreeRoot.children}");
print("first node: ${zoomTreeRoot.children[0].data}"); //good // print("first node: ${zoomTreeRoot.children[0].data}"); //good
print("second layer: ${zoomTreeRoot.children.last.children}"); //good // print("second layer: ${zoomTreeRoot.children.last.children}"); //good
print( // print(
"first node: ${zoomTreeRoot.children.last.children.first.data}"); //good // "first node: ${zoomTreeRoot.children.last.children.first.data}"); //good
for (int n = 1; n < zoomTreeRoot.children.last.children.length - 1; n++) { // for (int n = 1; n < zoomTreeRoot.children.last.children.length - 1; n++) {
//good // //good
print(zoomTreeRoot.children.last.children[n].data); // print(zoomTreeRoot.children.last.children[n].data);
} // }
print("last node: ${zoomTreeRoot.children.last.children.last.data}"); //good // print("last node: ${zoomTreeRoot.children.last.children.last.data}"); //good
print("third layer"); // print("third layer");
for (int thirdLayer = 0; // for (int thirdLayer = 0;
thirdLayer < zoomTreeRoot.children.last.children.length; // thirdLayer < zoomTreeRoot.children.last.children.length;
thirdLayer++) { // thirdLayer++) {
print(zoomTreeRoot.children.last.children[thirdLayer].children); // print(zoomTreeRoot.children.last.children[thirdLayer].children);
} // }
print("third layer contents first"); //not sure // print("third layer contents first"); //not sure
print(zoomTreeRoot.children.last.children[5].children[0].data); //good // print(zoomTreeRoot.children.last.children[5].children[0].data); //good
for (int contentsOf4 = 1; // for (int contentsOf4 = 1;
contentsOf4 < zoomTreeRoot.children.last.children[5].children.length; // contentsOf4 < zoomTreeRoot.children.last.children[5].children.length;
contentsOf4++) { // contentsOf4++) {
print(zoomTreeRoot.children.last.children[5].children[contentsOf4].data); // print(zoomTreeRoot.children.last.children[5].children[contentsOf4].data);
} // }
currentZoomNode = zoomTreeRoot;
if (!mounted) return; if (!mounted) return;
setState(() { setState(() {
_isLoaded = true; _isLoaded = true;
@ -256,57 +236,67 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
setState(() { setState(() {
level = (level - 1).clamp(0, sentinel.length - 1); level = (level - 1).clamp(0, sentinel.length - 1);
}); });
// _buildForZooms(level + 1); //probably need a level?
} else if (keyEvent.key == "b") { } else if (keyEvent.key == "b") {
print("b"); print("b");
setState(() { setState(() {
level = (level + 1).clamp(0, sentinel.length - 1); level = (level + 1).clamp(0, sentinel.length - 1);
}); });
// _buildForZooms(level - 1); //probably need a level?
} }
} }
void _registerViewFactory(List<String> currentContent) async { void _goToChildren(int index) async {
// setState(() { //update to do item per item final target = currentZoomNode.children[index];
// each item to have itsviewtype ID if (target.children.isNotEmpty) {
// is this necessarey here?? setState(() {
currentZoomNode = target;
//could just move to collapsable });
} else {
for (var emailHTML in widget.threadHTML) { print("This child has no further children.");
String viewTypeId = 'email-${DateTime.now().millisecondsSinceEpoch}';
final ghost = web.document.createElement('div') as web.HTMLDivElement
..style.visibility = 'hidden'
..style.position = 'absolute'
..style.width = '100%'
..style.overflow = 'auto'
..innerHTML = emailHTML
.toJS; // temporarily index because it has to do all of them
web.document.body?.append(ghost);
await Future.delayed(Duration(milliseconds: 10));
final heightOfEmail = ghost.scrollHeight;
ghost.remove();
final HTMLsnippet = web.document.createElement('div')
as web.HTMLDivElement
..id = viewTypeId
..innerHTML = emailHTML
.toJS; // temporarily index because it has to do all of them
HTMLsnippet.style
..width = '100%'
..height = '${heightOfEmail}px'
..overflow = 'auto'
..scrollBehavior = 'smooth';
ui.platformViewRegistry.registerViewFactory(
viewTypeId,
(int viewId) => HTMLsnippet,
);
viewtypeIDs.add(viewTypeId);
heightOfViewTypes.add(heightOfEmail);
} }
// if (currentZoomNode.children.isNotEmpty) {
// setState(() {
// zoomIn = true;
// zoomOut = true;
// currentZoomNode = currentZoomNode.children[index];
// if (currentZoomNode.children[index].children.isEmpty) {
// print('disable in');
// setState(() {
// zoomIn = false;
// });
// }
// });
// } else {
// print("disable zoom down");
// setState(() {
// zoomIn = false;
// });
// }
}
void _goToParent() async {
if (currentZoomNode.parent != null) {
setState(() {
currentZoomNode = currentZoomNode.parent!;
});
} else {
print("Already at root.");
}
// print("parent ${currentZoomNode.parent}");
// print("parent ${currentZoomNode.parent!.parent}");
// if (currentZoomNode.parent != null) {
// setState(() {
// currentZoomNode = currentZoomNode.parent!;
// if (currentZoomNode.parent == null) {
// setState(() {
// zoomOut = false;
// });
// }
// });
// } else if (currentZoomNode.parent == null ||
// currentZoomNode.parent!.parent == null) {
// print("disable zoom up");
} }
void _serializableData(String threadID) async { void _serializableData(String threadID) async {
@ -361,7 +351,6 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
} }
} else if (keyEvent.key == 'w') { } else if (keyEvent.key == 'w') {
print("you pressed 'w'"); print("you pressed 'w'");
// getTopLevel();
} }
} }
@ -376,79 +365,56 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
web.window.document.addEventListener('keydown', _listener!); web.window.document.addEventListener('keydown', _listener!);
} }
// void getTopLevel() { Widget _buildForZooms({Key? key}) {
// print("started top"); if (!_isLoaded) {
// int highest = 0; return const Center(child: CircularProgressIndicator()); // loading screen
// AugmentTree zoomTreeRoot = AugmentTree();
// // zoomTreeRoot.data = emailsHTML[0]; // whole thing
// while (highest < hirarchy.length - 1) {
// var highestElement = web.document.querySelectorAll(hirarchy[highest]);
// print("nodelist $highestElement");
// if (highestElement.isNull || highestElement.length == 0) {
// //from h1, h2, h3, ..., p.
// highest += 1;
// print(hirarchy[highest]);
// } else {
// AugmentTree newLevel = AugmentTree(); // list of children of each level
// for (int i = 0; i < highestElement.length; i++) {
// print(highestElement.item(i)?.textContent);
// tagsCollected
// .add(highestElement.item(i)?.textContent ?? "nameless subtitle");
// newLevel.children
// .add(highestElement.item(i)?.textContent ?? "nameless subtitle");
// }
// // traverse to last node and add new level to it
// // next
// if (zoomTreeRoot.node == null) {
// zoomTreeRoot.node = newLevel;
// } else {
// AugmentTree temp = zoomTreeRoot;
// while (true) {
// //get to the last and assign node = last node
// if (temp.node != null) {
// temp = temp.node!;
// } else {
// temp.node = newLevel;
// break;
// }
// }
// }
// highest += 1;
// }
// }
// print("out safely");
// print(tagsCollected); //instead of a list make a tree
// print(zoomTreeRoot.children);
// print(zoomTreeRoot.node?.children);
// print(zoomTreeRoot.node?.node?.children);
// print(zoomTreeRoot.node?.node?.node?.children);
// }
Widget _buildForZooms(int lvl) {
this.level = lvl;
if (lvl < 0 || lvl >= sentinel.length) {
return Center(child: Text("No content at level $lvl"));
} }
final canZoomOut = currentZoomNode.parent != null;
return ListView.builder( return ListView.builder(
itemCount: this.sentinel[level].length, key: key,
itemCount: currentZoomNode.children.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final childNode = currentZoomNode.children[index];
final canZoomIn = childNode.children.isNotEmpty;
return Padding( return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0), padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0),
child: Material( child: Material(
elevation: 1, elevation: 1,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
color: Theme.of(context).colorScheme.surface, color: Theme.of(context).colorScheme.surface,
surfaceTintColor: Theme.of(context).colorScheme.surfaceTint, surfaceTintColor: Theme.of(context).colorScheme.surfaceBright,
child: Padding( child: Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
child: MarkdownBlock( child: Row(
data: sentinel[level][index], // one string of markdown crossAxisAlignment: CrossAxisAlignment.start,
config: MarkdownConfig children: [
.darkConfig, // or lightConfig depending on theme Wrap(
spacing: 4.0,
children: [
OutlinedButton(
onPressed:
canZoomOut ? () => _goToParent() : null,
child: Icon(Icons.north_west_sharp),
),
OutlinedButton(
onPressed:
canZoomIn ? () => _goToChildren(index) : null,
child: Icon(Icons.south_east_sharp),
),
],
),
SizedBox(width: 12.0),
Expanded(
child: MarkdownBlock(
data: currentZoomNode
.children[index].data, // one string of markdown
config: MarkdownConfig
.darkConfig, // or lightConfig depending on theme
),
),
],
), ),
), ),
), ),
@ -462,43 +428,37 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
return _isLoaded return _isLoaded
? Column(children: [ ? Column(children: [
Expanded( Expanded(
// child: MarkdownWidget(data: markdown), //hmmm child: ListView.builder(
child: _buildForZooms(level), itemCount: emailsInThread.length,
itemBuilder: (context, index) {
final isExpanded = _expandedEmails
.contains(index); //check if email is expanded
return Column(
children: [
ListTile(
title: Text(emailsInThread[index].from),
trailing: Text(emailsInThread[index].date),
onTap: () {
setState(() {
if (isExpanded) {
_expandedEmails.remove(index);
} else {
_expandedEmails.add(index);
}
});
},
),
if (isExpanded)
SizedBox(
height: 800,
child:
_buildForZooms(key: ValueKey(currentZoomNode))),
Divider(),
],
);
},
),
) )
// Expanded(
// child: ListView.builder(
// itemCount: widget.thread.length,
// itemBuilder: (context, index) {
// final isExpanded = _expandedEmails
// .contains(index); //check if email is expanded
// return Column(
// children: [
// ListTile(
// title: Text(emailsInThread[index].from),
// trailing: Text(emailsInThread[index].date),
// onTap: () {
// setState(() {
// if (isExpanded) {
// _expandedEmails.remove(index);
// } else {
// _expandedEmails.add(index);
// }
// });
// },
// ),
// if (isExpanded)
// SizedBox(
// height: heightOfViewTypes[index].toDouble(),
// child: HtmlElementView(
// key: UniqueKey(), viewType: viewtypeIDs[index]),
// ),
// Divider(),
// ],
// );
// },
// ),
// )
]) ])
: const Center(child: CircularProgressIndicator()); : const Center(child: CircularProgressIndicator());
} }