julian/sheetless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up sheet_viewer_page, add two page turn and fullscreen exit on top-right touch

Browse Source
This commit is contained in:
Julian Mutter
2025-10-22 18:33:47 +02:00
parent 6c196454fe
commit 4585b95db1
1 changed files with 226 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
lib/sheet_viewer_page.dart
View File

@@ -31,11 +31,12 @@ class _SheetViewerPageState extends State<SheetViewerPage>
final log = Logger("SheetViewerPage"); final log = Logger("SheetViewerPage");
final StorageHelper storageHelper = StorageHelper(); final StorageHelper storageHelper = StorageHelper();
int page = 1; int currentPageNumber = 1;
int numPages = 1; int numPages = 1;
late Future<bool> documentLoaded; late Future<bool> documentLoaded;
PdfDocument? document; PdfDocument? document;
bool paintMode = false; bool paintMode = false;
Pages? pages;
@override @override
void initState() { void initState() {
@@ -84,58 +85,67 @@ class _SheetViewerPageState extends State<SheetViewerPage>
void turnPage(int numTurns) { void turnPage(int numTurns) {
setState(() { setState(() {
page += numTurns; currentPageNumber += numTurns;
page = page.clamp(1, numPages); currentPageNumber = currentPageNumber.clamp(1, numPages);
}); });
} }
AppBar? buildAppBar() {
if (widget.config.fullscreen) {
return null;
}
return AppBar(
title: Text(widget.sheet.name),
actions: [
IconButton(
onPressed: () {
setState(() {
if (widget.config.twoPageMode) {
// TODO: notification that paint mode only in single page mode
} else {
paintMode = !paintMode;
}
});
},
icon: Icon(Icons.brush),
),
IconButton(
onPressed: () {
setState(() {
widget.config.twoPageMode = !widget.config.twoPageMode;
storageHelper.writeConfig(widget.config);
if (widget.config.twoPageMode) {
paintMode = false;
// TODO: notification that paint mode was deactivated since only possible in single page mode
}
});
},
icon: Icon(
widget.config.twoPageMode ? Icons.filter_1 : Icons.filter_2,
),
),
],
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BtPedalShortcuts( return BtPedalShortcuts(
onTurnPageForward: () => turnPage(1), onTurnPageForward: () => turnPage(1),
onTurnPageBackward: () => turnPage(-1), onTurnPageBackward: () => turnPage(-1),
child: Scaffold( child: Scaffold(
appBar: widget.config.fullscreen appBar: buildAppBar(),
? null
: AppBar(
title: Text(widget.sheet.name),
actions: [
IconButton(
onPressed: () {
setState(() {
if (widget.config.twoPageMode) {
// TODO: notification that paint mode only in single page mode
} else {
paintMode = !paintMode;
}
});
},
icon: Icon(Icons.brush),
),
IconButton(
onPressed: () {
setState(() {
widget.config.twoPageMode = !widget.config.twoPageMode;
storageHelper.writeConfig(widget.config);
if (widget.config.twoPageMode) {
paintMode = false;
// TODO: notification that paint mode was deactivated since only possible in single page mode
}
});
},
icon: Icon(
widget.config.twoPageMode
? Icons.filter_1
: Icons.filter_2,
),
),
],
),
body: FutureBuilder( body: FutureBuilder(
future: documentLoaded, future: documentLoaded,
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) { builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
if (snapshot.hasData && document != null) { if (snapshot.hasData && document != null) {
numPages = document!.pages.length; numPages = document!.pages.length;
pages = Pages(
document: document!,
numPages: numPages,
config: widget.config,
currentPageNumber: currentPageNumber,
);
return Stack( return Stack(
children: [ children: [
@@ -143,127 +153,22 @@ class _SheetViewerPageState extends State<SheetViewerPage>
children: [ children: [
Visibility( Visibility(
visible: !paintMode, visible: !paintMode,
child: GestureDetector( child: TouchablePages(
onTapUp: (TapUpDetails details) { pages: pages!,
// Get the size of the screen onToggleFullscreen: () {
final screenWidth = MediaQuery.of( toggleFullscreen();
context, },
).size.width; onExitSheetViewer: () {
Navigator.pop(context);
// print("Touch at y = ${details.localPosition.dy}"); },
// print("Touch at x = ${details.localPosition.dx}"); onTurnPage: (int numTurns) {
// print("Screenwidth = ${screenWidth}"); turnPage(numTurns);
// Check where the user tapped
if (details.localPosition.dy < 100) {
// TODO
setState(() {
toggleFullscreen();
});
} else if (details.localPosition.dx <
screenWidth / 2) {
// Left half of the screen
turnPage(-1);
} else {
// Right half of the screen
turnPage(1);
}
}, },
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
spacing: 0,
children: [
Expanded(
child: Stack(
children: [
PdfPageView(
key: ValueKey(page),
document: document,
pageNumber: page,
maximumDpi: 300,
alignment: widget.config.twoPageMode
? Alignment.centerRight
: Alignment.center,
),
Positioned.fill(
child: Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 5),
child: Text('$page / $numPages'),
),
),
],
),
),
Visibility(
visible: widget.config.twoPageMode == true,
child: Expanded(
child: Stack(
children: [
PdfPageView(
key: ValueKey(page),
document: document,
pageNumber: page + 1,
maximumDpi: 300,
alignment: Alignment.centerLeft,
// alignment: Alignment.center,
),
Positioned.fill(
child: Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 5),
child: Text(
'${page + 1} / $numPages',
),
),
),
],
),
),
),
],
),
), ),
), ),
// Positioned.fill(
Visibility( Visibility(
visible: paintMode, visible: paintMode,
child: SizedBox.expand( child: PaintablePages(pages: pages!),
child: LayoutBuilder(
builder: (context, constraints) {
final maxSize = Size(
constraints.maxWidth,
constraints.maxHeight,
);
final pageSizeUnscaled = document!.pages
.elementAt(page)
.size;
final pageSizeScaled = calcScaledPageSize(
maxSize,
pageSizeUnscaled,
);
return DrawingBoard(
background: SizedBox(
width: pageSizeScaled.width,
height: pageSizeScaled.height,
child: PdfPageView(
document: document,
pageNumber: page,
alignment: Alignment.center,
),
),
// showDefaultTools: true,
// showDefaultActions: true,
boardConstrained: true,
minScale: 1,
maxScale: 3,
alignment: Alignment.topRight,
boardBoundaryMargin: EdgeInsets.all(0),
);
},
),
),
), ),
], ],
), ),
@@ -287,25 +192,183 @@ class _SheetViewerPageState extends State<SheetViewerPage>
), ),
); );
} }
}
Size calcScaledPageSize(Size parentSize, Size pageSize) { typedef PageturnCallback = void Function(int numTurns);
class TouchablePages extends StatelessWidget {
final Pages pages;
final VoidCallback onToggleFullscreen;
final VoidCallback onExitSheetViewer;
final PageturnCallback onTurnPage;
const TouchablePages({
super.key,
required this.pages,
required this.onToggleFullscreen,
required this.onExitSheetViewer,
required this.onTurnPage,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior:
HitTestBehavior.opaque, // Also register when outside of pdf pages
onTapUp: (TapUpDetails details) {
final mediaQuery = MediaQuery.of(context);
final pixelsPerInch =
mediaQuery.devicePixelRatio *
160; // 160 dpi = 1 logical inch baseline
final pixelsPerCm = pixelsPerInch / 2.54;
final touchAreaWidth = mediaQuery.size.width;
if (details.localPosition.dy < 2 * pixelsPerCm &&
details.localPosition.dx >= touchAreaWidth - 2 * pixelsPerCm &&
pages.config.fullscreen) {
onExitSheetViewer();
} else if (details.localPosition.dy < 2 * pixelsPerCm) {
onToggleFullscreen();
} else if (details.localPosition.dx < touchAreaWidth / 4 &&
pages.config.twoPageMode) {
onTurnPage(-2);
} else if (details.localPosition.dx < touchAreaWidth / 2) {
onTurnPage(-1);
} else if (details.localPosition.dx > touchAreaWidth * 3 / 4 &&
pages.config.twoPageMode) {
onTurnPage(2);
} else {
onTurnPage(1);
}
},
child: pages,
);
}
}
class PaintablePages extends StatelessWidget {
final Pages pages;
const PaintablePages({super.key, required this.pages});
@override
Widget build(BuildContext context) {
return SizedBox.expand(
child: LayoutBuilder(
builder: (context, constraints) {
final maxSize = Size(constraints.maxWidth, constraints.maxHeight);
final pageSizeScaled = pages.calcCurrentPageSizeScaled(maxSize);
return DrawingBoard(
background: SizedBox(
width: pageSizeScaled.width,
height: pageSizeScaled.height,
child: pages,
),
// showDefaultTools: true,
// showDefaultActions: true,
boardConstrained: true,
minScale: 1,
maxScale: 3,
alignment: Alignment.topRight,
boardBoundaryMargin: EdgeInsets.all(0),
);
},
),
);
}
}
class Pages extends StatelessWidget {
final PdfDocument document;
final int numPages;
final int currentPageNumber;
final Config config;
const Pages({
super.key,
required this.document,
required this.numPages,
required this.currentPageNumber,
required this.config,
});
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
spacing: 0,
children: [
Expanded(
child: Stack(
children: [
PdfPageView(
key: ValueKey(currentPageNumber),
document: document,
pageNumber: currentPageNumber,
maximumDpi: 300,
alignment: config.twoPageMode
? Alignment.centerRight
: Alignment.center,
),
Positioned.fill(
child: Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 5),
child: Text('$currentPageNumber / $numPages'),
),
),
],
),
),
Visibility(
visible: config.twoPageMode == true,
child: Expanded(
child: Stack(
children: [
PdfPageView(
key: ValueKey(currentPageNumber),
document: document,
pageNumber: currentPageNumber + 1,
maximumDpi: 300,
alignment: Alignment.centerLeft,
// alignment: Alignment.center,
),
Positioned.fill(
child: Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 5),
child: Text('${currentPageNumber + 1} / $numPages'),
),
),
],
),
),
),
],
);
}
Size calcCurrentPageSizeScaled(Size parentSize) {
return _calcScaledPageSize(parentSize, _getCurrentPageSizeUnscaled());
}
Size _getCurrentPageSizeUnscaled() {
return document.pages.elementAt(currentPageNumber).size;
}
Size _calcScaledPageSize(Size parentSize, Size pageSize) {
// page restricted by height // page restricted by height
log.info("ParentSize: ${parentSize.width}, ${parentSize.height}");
log.info("ParentSizeRatio: ${parentSize.aspectRatio}");
log.info("PageSizeRatio: ${pageSize.aspectRatio}");
if (parentSize.aspectRatio > pageSize.aspectRatio) { if (parentSize.aspectRatio > pageSize.aspectRatio) {
log.info("Restricted by height");
final height = parentSize.height; final height = parentSize.height;
final width = height * pageSize.aspectRatio; final width = height * pageSize.aspectRatio;
log.info("Size: $width, $height");
return Size(width, height); return Size(width, height);
} }
// page restricted by width // page restricted by width
else { else {
log.info("Restricted by height");
final width = parentSize.width; final width = parentSize.width;
final height = width / pageSize.aspectRatio; final height = width / pageSize.aspectRatio;
log.info("Size: $width, $height");
return Size(width, height); return Size(width, height);
} }
} }