2022-10-24 00:02:35 +00:00
|
|
|
import 'dart:ui';
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:notes/canvas/my_painter.dart';
|
2022-10-26 22:15:13 +00:00
|
|
|
import 'package:notes/canvas/screen_document_mapping.dart';
|
2022-10-24 00:02:35 +00:00
|
|
|
|
|
|
|
import 'document_types.dart';
|
|
|
|
|
2022-10-24 10:27:38 +00:00
|
|
|
class DrawingPage extends StatefulWidget {
|
|
|
|
const DrawingPage({Key? key}) : super(key: key);
|
2022-10-24 00:02:35 +00:00
|
|
|
|
|
|
|
@override
|
2022-10-24 10:27:38 +00:00
|
|
|
State<DrawingPage> createState() => _DrawingPageState();
|
2022-10-24 00:02:35 +00:00
|
|
|
}
|
|
|
|
|
2022-10-24 10:27:38 +00:00
|
|
|
class _DrawingPageState extends State<DrawingPage> {
|
2022-10-24 00:02:35 +00:00
|
|
|
List<Stroke> _strokes = [];
|
|
|
|
bool allowDrawWithFinger = false;
|
|
|
|
|
2022-10-26 22:15:13 +00:00
|
|
|
double zoom = .75;
|
|
|
|
double basezoom = 1.0;
|
|
|
|
Offset offset = const Offset(.0, .0);
|
2022-10-24 10:27:38 +00:00
|
|
|
|
2022-10-24 00:02:35 +00:00
|
|
|
@override
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
return Scaffold(
|
|
|
|
appBar: AppBar(backgroundColor: Colors.blueGrey),
|
|
|
|
body: _buildCanvas(),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-10-24 14:28:56 +00:00
|
|
|
double _calcTiltedWidth(double baseWidth, double tilt) {
|
2022-10-24 00:02:35 +00:00
|
|
|
return baseWidth * tilt;
|
|
|
|
}
|
|
|
|
|
2022-10-24 14:28:56 +00:00
|
|
|
double _calcAngleDependentWidth(List<Point> pts, double basetickness) {
|
2022-10-24 10:27:38 +00:00
|
|
|
return basetickness;
|
|
|
|
|
2022-10-24 00:02:35 +00:00
|
|
|
// todo do correct linear interpolation and extimate angle
|
2022-10-26 22:15:13 +00:00
|
|
|
// final lininterpol = PolynomialInterpolation(
|
|
|
|
// nodes: pts
|
|
|
|
// .map((e) => InterpolationNode(x: e.point.dx, y: e.point.dy))
|
|
|
|
// .toList(growable: false));
|
|
|
|
// lininterpol.compute(1.0);
|
|
|
|
// print(lininterpol.buildPolynomial().toString());
|
|
|
|
//
|
|
|
|
// // double angle = atan((pt2.dy - pt1.dy)/(pt2.dx - pt1.dx));
|
|
|
|
//
|
|
|
|
// final angle = 5 / (2 * pi);
|
|
|
|
// // print("pt1: ${pt1}, pt2: ${pt2}, angle: ${angle}");
|
|
|
|
//
|
|
|
|
// return basetickness * (angle / .5 + .5);
|
2022-10-24 00:02:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
Widget _buildCanvas() {
|
2022-10-24 10:27:38 +00:00
|
|
|
final width = MediaQuery.of(context).size.width;
|
2022-10-26 22:15:13 +00:00
|
|
|
final height = MediaQuery.of(context).size.height;
|
2022-10-24 10:27:38 +00:00
|
|
|
|
2022-10-24 00:02:35 +00:00
|
|
|
return Scaffold(
|
|
|
|
body: Listener(
|
2022-10-26 22:15:13 +00:00
|
|
|
behavior: HitTestBehavior.opaque,
|
2022-10-24 00:02:35 +00:00
|
|
|
onPointerMove: (event) {
|
2022-10-26 22:15:13 +00:00
|
|
|
Offset pos = event.localPosition;
|
|
|
|
final scale =
|
|
|
|
calcPageDependentScale(zoom, a4Page, Size(width, height));
|
|
|
|
pos = translateScreenToDocumentPoint(pos, scale, offset);
|
2022-10-24 00:02:35 +00:00
|
|
|
|
2022-10-26 22:15:13 +00:00
|
|
|
if (!a4Page.contains(pos)) {
|
|
|
|
return;
|
|
|
|
}
|
2022-10-24 00:02:35 +00:00
|
|
|
|
|
|
|
if (allowDrawWithFinger || event.kind != PointerDeviceKind.touch) {
|
2022-10-26 22:15:13 +00:00
|
|
|
final pts = _strokes.last.points;
|
|
|
|
|
|
|
|
if (pts.last.point == pos) return;
|
|
|
|
|
2022-10-24 00:02:35 +00:00
|
|
|
double newWidth = _calcTiltedWidth(3.0, event.tilt);
|
|
|
|
|
2022-10-26 22:15:13 +00:00
|
|
|
if (_strokes.last.points.length > 1) {
|
2022-10-24 00:02:35 +00:00
|
|
|
// todo current point not in list
|
2022-10-26 22:15:13 +00:00
|
|
|
newWidth = _calcAngleDependentWidth(
|
|
|
|
pts
|
|
|
|
.getRange(pts.length - 10 >= 0 ? pts.length - 10 : 0,
|
|
|
|
pts.length)
|
|
|
|
.toList(growable: false),
|
|
|
|
event.tilt);
|
2022-10-24 00:02:35 +00:00
|
|
|
}
|
|
|
|
setState(() {
|
|
|
|
_strokes = List.from(_strokes, growable: false)
|
|
|
|
..last.points.add(Point(pos, newWidth));
|
|
|
|
});
|
2022-10-26 22:15:13 +00:00
|
|
|
} else {
|
|
|
|
if (zoom > 1.0) {
|
|
|
|
Offset newOffset = offset + event.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 < (-width * zoom) + width) {
|
|
|
|
setState(() {
|
|
|
|
offset = Offset((-width * zoom) + width, newOffset.dy);
|
|
|
|
});
|
|
|
|
print(offset);
|
|
|
|
} else {
|
|
|
|
setState(() {
|
|
|
|
offset = offset + event.delta;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
setState(() {
|
|
|
|
// keep page x centered if zoomed out
|
|
|
|
offset = Offset(
|
|
|
|
(width - (width * zoom)) / 2, offset.dy + event.delta.dy);
|
|
|
|
});
|
|
|
|
}
|
2022-10-24 00:02:35 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
onPointerDown: (event) {
|
|
|
|
if (allowDrawWithFinger || event.kind != PointerDeviceKind.touch) {
|
2022-10-26 22:15:13 +00:00
|
|
|
Offset pos = event.localPosition;
|
|
|
|
final scale =
|
|
|
|
calcPageDependentScale(zoom, a4Page, Size(width, height));
|
|
|
|
pos = translateScreenToDocumentPoint(pos, scale, offset);
|
|
|
|
|
|
|
|
// todo line drawn on edge where line left page
|
|
|
|
if (!a4Page.contains(pos)) return;
|
|
|
|
|
2022-10-24 00:02:35 +00:00
|
|
|
setState(() {
|
|
|
|
_strokes = List.from(_strokes)
|
2022-10-26 22:15:13 +00:00
|
|
|
..add(Stroke.fromPoints(
|
|
|
|
[Point(pos, _calcTiltedWidth(3.0, event.tilt))]));
|
2022-10-24 00:02:35 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onPointerUp: (event) {
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
},
|
2022-10-24 14:28:56 +00:00
|
|
|
child: GestureDetector(
|
2022-10-26 22:15:13 +00:00
|
|
|
onScaleUpdate: (details) {
|
|
|
|
if (details.scale == 1.0) return;
|
|
|
|
|
|
|
|
print('scale; ${details.scale}');
|
|
|
|
setState(() {
|
|
|
|
zoom = (basezoom * details.scale).clamp(0.25, 5.0);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onScaleEnd: (details) {
|
|
|
|
basezoom = zoom;
|
|
|
|
},
|
|
|
|
child: CustomPaint(
|
|
|
|
painter: MyPainter(strokes: _strokes, offset: offset, zoom: zoom),
|
|
|
|
// todo not working
|
|
|
|
size: Size.infinite, // todo add different paper dimensions
|
2022-10-24 10:27:38 +00:00
|
|
|
),
|
2022-10-24 00:02:35 +00:00
|
|
|
),
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|