simple view layer: static screenspace widgets with working hittest
This commit is contained in:
+25
-50
@@ -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),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user