298 lines
9.2 KiB
Dart
298 lines
9.2 KiB
Dart
import 'dart:math';
|
|
import 'dart:ui';
|
|
import 'package:adwaita_icons/adwaita_icons.dart';
|
|
import 'package:fluentui_system_icons/fluentui_system_icons.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:iconify_flutter/iconify_flutter.dart';
|
|
import 'package:iconify_flutter/icons/emojione_monotone.dart';
|
|
import 'package:iconify_flutter/icons/jam.dart';
|
|
import 'package:notes/canvas/my_painter.dart';
|
|
import 'package:notes/canvas/screen_document_mapping.dart';
|
|
|
|
import '../icon_material_button.dart';
|
|
import 'document_types.dart';
|
|
|
|
class DrawingPage extends StatefulWidget {
|
|
const DrawingPage({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<DrawingPage> createState() => _DrawingPageState();
|
|
}
|
|
|
|
class _DrawingPageState extends State<DrawingPage> {
|
|
List<Stroke> _strokes = [];
|
|
bool allowDrawWithFinger = false;
|
|
|
|
double zoom = .75;
|
|
double basezoom = 1.0;
|
|
Offset offset = const Offset(.0, .0);
|
|
|
|
// todo better pen system
|
|
bool eraseractive = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
// todo might be weird behaviour if used with short side
|
|
final screenWidth =
|
|
(window.physicalSize.longestSide / window.devicePixelRatio);
|
|
_calcNewPageOffset(const Offset(.0, .0), screenWidth);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(backgroundColor: Colors.blueGrey, actions: [
|
|
IconMaterialButton(
|
|
icon: const Icon(FluentIcons.book_open_48_filled),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () {},
|
|
),
|
|
IconMaterialButton(
|
|
icon: const Icon(FluentIcons.document_one_page_24_regular),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () {},
|
|
),
|
|
IconMaterialButton(
|
|
icon: const Icon(Icons.attachment_outlined),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () {},
|
|
rotation: -pi / 4,
|
|
),
|
|
IconMaterialButton(
|
|
icon: const Icon(Icons.more_vert),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () {},
|
|
),
|
|
]),
|
|
body: Row(
|
|
children: [
|
|
Container(
|
|
color: const Color(0xff3f3f3f),
|
|
width: 45,
|
|
child: Column(
|
|
children: [
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
IconMaterialButton(
|
|
icon: const Iconify(EmojioneMonotone.fountain_pen, color: Color.fromRGBO(255, 255, 255, .85),),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () => setState(() => eraseractive = false),
|
|
selected: !eraseractive,
|
|
iconSize: 24,
|
|
),
|
|
IconMaterialButton(
|
|
icon: const Iconify(Jam.highlighter, color: Color.fromRGBO(255, 255, 255, .85),),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () => setState(() => eraseractive = false),
|
|
selected: false,
|
|
iconSize: 24,
|
|
),
|
|
IconMaterialButton(
|
|
icon: Transform.translate(
|
|
offset: const Offset(-2.0, .0),
|
|
child: const AdwaitaIcon(AdwaitaIcons.eraser2),
|
|
),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () => setState(() => eraseractive = true),
|
|
iconSize: 24,
|
|
selected: eraseractive,
|
|
),
|
|
IconMaterialButton(
|
|
icon: const Icon(FluentIcons.select_object_24_regular),
|
|
color: const Color.fromRGBO(255, 255, 255, .85),
|
|
onPressed: () => setState(() => eraseractive = false),
|
|
selected: false,
|
|
iconSize: 24,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(child: RepaintBoundary(child: _buildCanvas())),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
double _calcTiltedWidth(double baseWidth, double tilt) {
|
|
if (tilt == .0) return baseWidth;
|
|
return baseWidth * tilt;
|
|
}
|
|
|
|
double _calcAngleDependentWidth(Point pt1, Point pt2, double basetickness) {
|
|
double dx = pt2.point.dx - pt1.point.dx;
|
|
double dy = pt2.point.dy - pt1.point.dy;
|
|
|
|
// todo those deltas to small to get an accurate direction!
|
|
|
|
double alpha = atan(dx / dy);
|
|
// alpha has range from 0 - 2pi
|
|
// we want 0.5 -1;
|
|
|
|
alpha /= (2 * pi * 2);
|
|
alpha += .5;
|
|
|
|
double thickness = basetickness * alpha;
|
|
return thickness;
|
|
}
|
|
|
|
// calculate new page offset from mousepointer delta
|
|
void _calcNewPageOffset(Offset delta, double canvasWidth) {
|
|
if (zoom > 1.0) {
|
|
Offset newOffset = offset + delta;
|
|
// don't allow navigating out of page if zoomed in
|
|
if (newOffset.dx > .0) {
|
|
setState(() {
|
|
offset = Offset(.0, newOffset.dy);
|
|
});
|
|
} else if (newOffset.dx < (-canvasWidth * zoom) + canvasWidth) {
|
|
setState(() {
|
|
offset = Offset((-canvasWidth * zoom) + canvasWidth, newOffset.dy);
|
|
});
|
|
print(offset);
|
|
} else {
|
|
setState(() {
|
|
offset = offset + delta;
|
|
});
|
|
}
|
|
} else {
|
|
setState(() {
|
|
// keep page x centered if zoomed out
|
|
offset = Offset(
|
|
(canvasWidth - (canvasWidth * zoom)) / 2, offset.dy + delta.dy);
|
|
});
|
|
}
|
|
}
|
|
|
|
void _onPointerMove(PointerMoveEvent event, Size size) {
|
|
Offset pos = event.localPosition;
|
|
final scale = calcPageDependentScale(zoom, a4Page, size);
|
|
pos = translateScreenToDocumentPoint(pos, scale, offset);
|
|
|
|
if (!a4Page.contains(pos)) {
|
|
return;
|
|
}
|
|
|
|
// todo outsource this eraser pen
|
|
if (eraseractive) {
|
|
// todo dynamic eraser size
|
|
final eraserrect = Rect.fromCircle(center: pos, radius: 3);
|
|
for (final stroke in _strokes) {
|
|
// check if delete action was within bounding rect of stroke
|
|
if (stroke.getBoundingRect().contains(pos)) {
|
|
// check if eraser hit an point within its range
|
|
for (final pt in stroke.points) {
|
|
if (eraserrect.contains(pt.point)) {
|
|
setState(() {
|
|
_strokes = List.from(_strokes)..remove(stroke);
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (allowDrawWithFinger || event.kind != PointerDeviceKind.touch) {
|
|
final pts = _strokes.last.points;
|
|
|
|
if (pts.last.point == pos) return;
|
|
|
|
double newWidth = _calcTiltedWidth(5.0, event.tilt);
|
|
if (_strokes.last.points.length > 1) {
|
|
newWidth =
|
|
_calcAngleDependentWidth(pts.last, pts[pts.length - 2], newWidth);
|
|
}
|
|
|
|
setState(() {
|
|
_strokes = List.from(_strokes, growable: false)
|
|
..last.addPoint(Point(pos, newWidth));
|
|
});
|
|
} else {
|
|
_calcNewPageOffset(event.delta, size.width);
|
|
}
|
|
}
|
|
|
|
Widget _buildCanvas() {
|
|
final size = MediaQuery.of(context).size;
|
|
|
|
final canvasSize = Size(size.width - 45, size.height);
|
|
|
|
return Listener(
|
|
behavior: HitTestBehavior.opaque,
|
|
onPointerMove: (e) => _onPointerMove(e, size),
|
|
onPointerSignal: (event) {
|
|
print('Button: ${event.buttons}');
|
|
},
|
|
onPointerDown: (event) {
|
|
print('Button: ${event.buttons}');
|
|
|
|
if (allowDrawWithFinger || event.kind != PointerDeviceKind.touch) {
|
|
Offset pos = event.localPosition;
|
|
final scale = calcPageDependentScale(zoom, a4Page, size);
|
|
pos = translateScreenToDocumentPoint(pos, scale, offset);
|
|
|
|
// todo line drawn on edge where line left page
|
|
if (!a4Page.contains(pos)) return;
|
|
|
|
if (eraseractive) return;
|
|
|
|
setState(() {
|
|
_strokes = List.from(_strokes)
|
|
..add(Stroke.fromPoints(
|
|
[Point(pos, _calcTiltedWidth(3.0, event.tilt))]));
|
|
});
|
|
}
|
|
},
|
|
onPointerUp: (event) {
|
|
if (eraseractive) return;
|
|
|
|
if (allowDrawWithFinger || event.kind != PointerDeviceKind.touch) {
|
|
if (_strokes.last.points.length <= 1) {
|
|
// if the line consists only of one point (point) add endpoint as the same to allow drawing a line
|
|
// todo maybe solve this in custompainter in future
|
|
setState(() {
|
|
_strokes = List.from(_strokes, growable: false)
|
|
..last.points.add(_strokes.last.points.last);
|
|
});
|
|
} else {
|
|
setState(() {});
|
|
}
|
|
|
|
print(_strokes.length);
|
|
print(_strokes.last.points.length);
|
|
}
|
|
},
|
|
child: GestureDetector(
|
|
onScaleUpdate: (details) {
|
|
if (details.scale == 1.0) return;
|
|
|
|
setState(() {
|
|
zoom = (basezoom * details.scale).clamp(0.25, 5.0);
|
|
});
|
|
},
|
|
onScaleEnd: (details) {
|
|
basezoom = zoom;
|
|
},
|
|
onSecondaryTap: () {
|
|
print('secctab');
|
|
},
|
|
onTertiaryTapDown: (details) {
|
|
print('tertiary button');
|
|
},
|
|
child: CustomPaint(
|
|
painter: MyPainter(
|
|
strokes: _strokes,
|
|
offset: offset,
|
|
zoom: zoom,
|
|
canvasSize: canvasSize),
|
|
size: canvasSize,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|