simple view layer: static screenspace widgets with working hittest

This commit is contained in:
2025-07-01 03:49:08 +00:00
parent 6d0ef792db
commit 4535894dc4
+25 -50
View File
@@ -9,60 +9,35 @@ class App extends StatefulWidget {
} }
class _AppState extends State<App> { class _AppState extends State<App> {
Offset _dragStartFocalPoint = Offset.zero;
Offset _lastFocalPoint = Offset.zero;
Offset _offset = Offset.zero;
double _scale = 1.0;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: CanvasView( body: SizedBox.expand(
children: [ child: CanvasView(
Container(width: 100, height: 100, color: Colors.red), ssPositions: [Offset(100, 100), Offset(200, 200), Offset(300, 300)],
Container(width: 100, height: 100, color: Colors.green), canvasBackground: SingleColorBackround(Colors.white),
Container(width: 100, height: 100, color: Colors.blue), children: [
], InfoContainer(color: Colors.red),
positions: [ InfoContainer(color: Colors.green),
Offset(0, 0), // Position for red container InfoContainer(color: Colors.blue),
Offset(200, 0), // Position for green container ],
Offset(400, 0), // Position for blue container ),
],
offset: _offset,
scale: _scale,
handleScaleUpdate: (details) {
// double dampeningFactor = 0.1;
// double scaleDelta = (details.scale - 1) * dampeningFactor;
// double newScale = _scale * (1 + scaleDelta);
// newScale = newScale.clamp(0.4, 4.0);
// focal point in the coordinate system of the grid
Offset focalPoint = details.localFocalPoint;
Offset gridFocalPoint = (_offset + focalPoint) / _scale;
// new scale set
// _scale = newScale;
// adjust offset to keep the focal point stationary
_offset = gridFocalPoint * _scale - focalPoint;
// panning
if (_lastFocalPoint != null) {
// right is positive, down is positive
Offset delta = -(details.focalPoint - _lastFocalPoint!); //inverse panning (natural)
const sensitivity = 1.0; // Adjust sensitivity as needed
_offset += delta * sensitivity;
}
_lastFocalPoint = details.focalPoint;
setState(() {});
},
handleScaleStart: (details) {
_lastFocalPoint = details.localFocalPoint;
_dragStartFocalPoint = details.localFocalPoint;
setState(() {});
},
canvasBackground: const SingleColorBackround(Colors.white),
), ),
); );
} }
} }
class InfoContainer extends StatelessWidget {
final Color color;
const InfoContainer({required this.color, super.key});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print("tapped");
},
child: Container(color: color, width: 50, height: 50),
);
}
}