maobo/cup_edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial work to split into dart_filament and flutter_filament

Browse Source
This commit is contained in:
Nick Fisher
2024-04-30 12:07:26 +08:00
parent b81f34cd29
commit 8f9e309c34
1624 changed files with 165260 additions and 6619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
flutter_filament/lib/filament/widgets/camera/gestures/filament_gesture_detector.dart Normal file
View File

@@ -0,0 +1,93 @@
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_filament/filament/flutter_filament_plugin.dart';
import 'package:flutter_filament/filament/widgets/camera/gestures/filament_gesture_detector_desktop.dart';
import 'package:flutter_filament/filament/widgets/camera/gestures/filament_gesture_detector_mobile.dart';
enum GestureType { rotateCamera, panCamera, panBackground }
///
/// A widget that translates finger/mouse gestures to zoom/pan/rotate actions.
///
class FilamentGestureDetector extends StatelessWidget {
///
/// The content to display below the gesture detector/listener widget.
/// This will usually be a FilamentWidget (so you can navigate by directly interacting with the viewport), but this is not necessary.
/// It is equally possible to render the viewport/gesture controls elsewhere in the widget hierarchy. The only requirement is that they share the same [FilamentController].
///
final Widget? child;
///
/// The [controller] attached to the [FilamentWidget] you wish to control.
///
final FlutterFilamentPlugin controller;
///
/// If true, an overlay will be shown with buttons to toggle whether pointer movements are interpreted as:
/// 1) rotate or a pan (mobile only),
/// 2) moving the camera or the background image (TODO).
///
final bool showControlOverlay;
///
/// If false, gestures will not manipulate the active camera.
///
final bool enableCamera;
///
/// If false, pointer down events will not trigger hit-testing (picking).
///
final bool enablePicking;
final void Function(ScaleStartDetails)? onScaleStart;
final void Function(ScaleUpdateDetails)? onScaleUpdate;
final void Function(ScaleEndDetails)? onScaleEnd;
const FilamentGestureDetector(
{Key? key,
required this.controller,
this.child,
this.showControlOverlay = false,
this.enableCamera = true,
this.enablePicking = true,
this.onScaleStart,
this.onScaleUpdate,
this.onScaleEnd})
: super(key: key);
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: controller.initialized,
builder: (_, initialized) {
if (initialized.data != true) {
return Container();
}
if (kIsWeb) {
throw Exception("TODO");
} else if (Platform.isLinux ||
Platform.isWindows ||
Platform.isMacOS) {
return FilamentGestureDetectorDesktop(
controller: controller,
child: child,
showControlOverlay: showControlOverlay,
enableCamera: enableCamera,
enablePicking: enablePicking,
);
} else {
return FilamentGestureDetectorMobile(
controller: controller,
child: child,
showControlOverlay: showControlOverlay,
enableCamera: enableCamera,
enablePicking: enablePicking,
onScaleStart: onScaleStart,
onScaleUpdate: onScaleUpdate,
onScaleEnd: onScaleEnd);
}
});
}
}

192
flutter_filament/lib/filament/widgets/camera/gestures/filament_gesture_detector_desktop.dart Normal file
View File

@@ -0,0 +1,192 @@
import 'dart:async';
import 'package:dart_filament/dart_filament/entities/gizmo.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_filament/filament/flutter_filament_plugin.dart';
///
/// A widget that translates finger/mouse gestures to zoom/pan/rotate actions.
///
class FilamentGestureDetectorDesktop extends StatefulWidget {
///
/// The content to display below the gesture detector/listener widget.
/// This will usually be a FilamentWidget (so you can navigate by directly interacting with the viewport), but this is not necessary.
/// It is equally possible to render the viewport/gesture controls elsewhere in the widget hierarchy. The only requirement is that they share the same [FilamentController].
///
final Widget? child;
///
/// The [controller] attached to the [FilamentWidget] you wish to control.
///
final FlutterFilamentPlugin controller;
///
/// If true, an overlay will be shown with buttons to toggle whether pointer movements are interpreted as:
/// 1) rotate or a pan (mobile only),
/// 2) moving the camera or the background image (TODO).
///
final bool showControlOverlay;
///
/// If false, gestures will not manipulate the active camera.
///
final bool enableCamera;
///
/// If false, pointer down events will not trigger hit-testing (picking).
///
final bool enablePicking;
const FilamentGestureDetectorDesktop(
{Key? key,
required this.controller,
this.child,
this.showControlOverlay = false,
this.enableCamera = true,
this.enablePicking = true})
: super(key: key);
@override
State<StatefulWidget> createState() => _FilamentGestureDetectorDesktopState();
}
class _FilamentGestureDetectorDesktopState
extends State<FilamentGestureDetectorDesktop> {
///
///
///
// ignore: unused_field
final bool _scaling = false;
bool _pointerMoving = false;
Gizmo? _gizmo;
@override
void initState() {
super.initState();
widget.controller.scene.gizmo.then((g) {
_gizmo = g;
setState(() {});
});
}
@override
void didUpdateWidget(FilamentGestureDetectorDesktop oldWidget) {
if (widget.showControlOverlay != oldWidget.showControlOverlay ||
widget.enableCamera != oldWidget.enableCamera ||
widget.enablePicking != oldWidget.enablePicking) {
setState(() {});
}
super.didUpdateWidget(oldWidget);
}
Timer? _scrollTimer;
///
/// Scroll-wheel on desktop, interpreted as zoom
///
void _zoom(PointerScrollEvent pointerSignal) async {
_scrollTimer?.cancel();
await widget.controller.zoomBegin();
await widget.controller.zoomUpdate(
pointerSignal.localPosition.dx,
pointerSignal.localPosition.dy,
pointerSignal.scrollDelta.dy > 0 ? 1 : -1);
// we don't want to end the zoom in the same frame, because this will destroy the camera manipulator (and cancel the zoom update).
// here, we just defer calling [zoomEnd] for 100ms to ensure the update is propagated through.
_scrollTimer = Timer(const Duration(milliseconds: 100), () async {
await widget.controller.zoomEnd();
});
}
Timer? _pickTimer;
@override
Widget build(BuildContext context) {
if (_gizmo == null) {
return Container();
}
return Listener(
// onPointerHover: (event) async {
// if (_gizmo.isActive) {
// return;
// }
// _pickTimer?.cancel();
// _pickTimer = Timer(const Duration(milliseconds: 100), () async {
// widget.controller
// .pick(event.position.dx.toInt(), event.position.dy.toInt());
// });
// },
onPointerSignal: (PointerSignalEvent pointerSignal) async {
if (pointerSignal is PointerScrollEvent) {
if (widget.enableCamera) {
_zoom(pointerSignal);
}
} else {
throw Exception("TODO");
}
},
onPointerPanZoomStart: (pzs) {
throw Exception("TODO - is this a pinch zoom on laptop trackpad?");
},
onPointerDown: (d) async {
if (_gizmo!.isActive) {
return;
}
if (d.buttons != kTertiaryButton && widget.enablePicking) {
widget.controller
.pick(d.localPosition.dx.toInt(), d.localPosition.dy.toInt());
}
_pointerMoving = false;
},
// holding/moving the left mouse button is interpreted as a pan, middle mouse button as a rotate
onPointerMove: (PointerMoveEvent d) async {
if (_gizmo!.isActive) {
_gizmo!.translate(d.delta.dx, d.delta.dy);
return;
}
// if this is the first move event, we need to call rotateStart/panStart to set the first coordinates
if (!_pointerMoving) {
if (d.buttons == kTertiaryButton && widget.enableCamera) {
widget.controller
.rotateStart(d.localPosition.dx, d.localPosition.dy);
} else if (widget.enableCamera) {
widget.controller
.panStart(d.localPosition.dx, d.localPosition.dy);
}
}
// set the _pointerMoving flag so we don't call rotateStart/panStart on future move events
_pointerMoving = true;
if (d.buttons == kTertiaryButton && widget.enableCamera) {
widget.controller
.rotateUpdate(d.localPosition.dx, d.localPosition.dy);
} else if (widget.enableCamera) {
widget.controller.panUpdate(d.localPosition.dx, d.localPosition.dy);
}
},
// when the left mouse button is released:
// 1) if _pointerMoving is true, this completes the pan
// 2) if _pointerMoving is false, this is interpreted as a pick
// same applies to middle mouse button, but this is ignored as a pick
onPointerUp: (PointerUpEvent d) async {
if (_gizmo!.isActive) {
_gizmo!.reset();
return;
}
if (d.buttons == kTertiaryButton && widget.enableCamera) {
widget.controller.rotateEnd();
} else {
if (_pointerMoving && widget.enableCamera) {
widget.controller.panEnd();
}
}
_pointerMoving = false;
},
child: widget.child);
}
}

234
flutter_filament/lib/filament/widgets/camera/gestures/filament_gesture_detector_mobile.dart Normal file
View File

@@ -0,0 +1,234 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_filament/filament/flutter_filament_plugin.dart';
enum GestureType { rotateCamera, panCamera, panBackground }
///
/// A widget that translates finger/mouse gestures to zoom/pan/rotate actions.
///
class FilamentGestureDetectorMobile extends StatefulWidget {
///
/// The content to display below the gesture detector/listener widget.
/// This will usually be a FilamentWidget (so you can navigate by directly interacting with the viewport), but this is not necessary.
/// It is equally possible to render the viewport/gesture controls elsewhere in the widget hierarchy. The only requirement is that they share the same [FilamentController].
///
final Widget? child;
///
/// The [controller] attached to the [FilamentWidget] you wish to control.
///
final FlutterFilamentPlugin controller;
///
/// If true, an overlay will be shown with buttons to toggle whether pointer movements are interpreted as:
/// 1) rotate or a pan (mobile only),
/// 2) moving the camera or the background image (TODO).
///
final bool showControlOverlay;
///
/// If false, gestures will not manipulate the active camera.
///
final bool enableCamera;
///
/// If false, pointer down events will not trigger hit-testing (picking).
///
final bool enablePicking;
final double zoomDelta;
final void Function(ScaleStartDetails)? onScaleStart;
final void Function(ScaleUpdateDetails)? onScaleUpdate;
final void Function(ScaleEndDetails)? onScaleEnd;
const FilamentGestureDetectorMobile(
{Key? key,
required this.controller,
this.child,
this.showControlOverlay = false,
this.enableCamera = true,
this.enablePicking = true,
this.onScaleStart,
this.onScaleUpdate,
this.onScaleEnd,
this.zoomDelta = 1})
: super(key: key);
@override
State<StatefulWidget> createState() => _FilamentGestureDetectorMobileState();
}
class _FilamentGestureDetectorMobileState
extends State<FilamentGestureDetectorMobile> {
GestureType gestureType = GestureType.panCamera;
final _icons = {
GestureType.panBackground: Icons.image,
GestureType.panCamera: Icons.pan_tool,
GestureType.rotateCamera: Icons.rotate_90_degrees_ccw
};
// on mobile, we can't differentiate between pointer down events like we do on desktop with primary/secondary/tertiary buttons
// we allow the user to toggle between panning and rotating by double-tapping the widget
bool _rotateOnPointerMove = false;
//
//
//
bool _scaling = false;
// to avoid duplicating code for pan/rotate (panStart, panUpdate, panEnd, rotateStart, rotateUpdate etc)
// we have only a single function for start/update/end.
// when the gesture type is changed, these properties are updated to point to the correct function.
// ignore: unused_field
late Function(double x, double y) _functionStart;
// ignore: unused_field
late Function(double x, double y) _functionUpdate;
// ignore: unused_field
late Function() _functionEnd;
@override
void initState() {
_setFunction();
super.initState();
}
void _setFunction() {
switch (gestureType) {
case GestureType.rotateCamera:
_functionStart = widget.controller.rotateStart;
_functionUpdate = widget.controller.rotateUpdate;
_functionEnd = widget.controller.rotateEnd;
break;
case GestureType.panCamera:
_functionStart = widget.controller.panStart;
_functionUpdate = widget.controller.panUpdate;
_functionEnd = widget.controller.panEnd;
break;
// TODO
case GestureType.panBackground:
_functionStart = (x, y) async {};
_functionUpdate = (x, y) async {};
_functionEnd = () async {};
}
}
@override
void didUpdateWidget(FilamentGestureDetectorMobile oldWidget) {
if (widget.showControlOverlay != oldWidget.showControlOverlay ||
widget.enableCamera != oldWidget.enableCamera ||
widget.enablePicking != oldWidget.enablePicking) {
setState(() {});
}
super.didUpdateWidget(oldWidget);
}
// ignore: unused_field
Timer? _scrollTimer;
double _lastScale = 0;
// pinch zoom on mobile
// couldn't find any equivalent for pointerCount in Listener (?) so we use a GestureDetector
@override
Widget build(BuildContext context) {
return Stack(children: [
Positioned.fill(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTapDown: (d) {
if (!widget.enablePicking) {
return;
}
widget.controller.pick(
d.globalPosition.dx.toInt(), d.globalPosition.dy.toInt());
},
onDoubleTap: () {
setState(() {
_rotateOnPointerMove = !_rotateOnPointerMove;
});
},
onScaleStart: (d) async {
if (widget.onScaleStart != null) {
widget.onScaleStart!.call(d);
return;
}
if (d.pointerCount == 2 && widget.enableCamera) {
_scaling = true;
await widget.controller.zoomBegin();
} else if (!_scaling && widget.enableCamera) {
if (_rotateOnPointerMove) {
widget.controller.rotateStart(
d.localFocalPoint.dx, d.localFocalPoint.dy);
} else {
widget.controller
.panStart(d.localFocalPoint.dx, d.localFocalPoint.dy);
}
}
},
onScaleUpdate: (ScaleUpdateDetails d) async {
if (widget.onScaleUpdate != null) {
widget.onScaleUpdate!.call(d);
return;
}
if (d.pointerCount == 2 && widget.enableCamera) {
if (d.horizontalScale != _lastScale) {
widget.controller.zoomUpdate(
d.localFocalPoint.dx,
d.localFocalPoint.dy,
d.horizontalScale > _lastScale ? 0.1 : -0.1);
_lastScale = d.horizontalScale;
}
} else if (!_scaling && widget.enableCamera) {
if (_rotateOnPointerMove) {
widget.controller
.rotateUpdate(d.focalPoint.dx, d.focalPoint.dy);
} else {
widget.controller
.panUpdate(d.focalPoint.dx, d.focalPoint.dy);
}
}
},
onScaleEnd: (d) async {
if (widget.onScaleEnd != null) {
widget.onScaleEnd!.call(d);
return;
}
if (d.pointerCount == 2 && widget.enableCamera) {
widget.controller.zoomEnd();
} else if (!_scaling && widget.enableCamera) {
if (_rotateOnPointerMove) {
widget.controller.rotateEnd();
} else {
widget.controller.panEnd();
}
}
_scaling = false;
},
child: widget.child)),
widget.showControlOverlay
? Align(
alignment: Alignment.bottomRight,
child: GestureDetector(
onTap: () {
setState(() {
var curIdx = GestureType.values.indexOf(gestureType);
var nextIdx = curIdx == GestureType.values.length - 1
? 0
: curIdx + 1;
gestureType = GestureType.values[nextIdx];
_setFunction();
});
},
child: Container(
padding: const EdgeInsets.all(50),
child: Icon(_icons[gestureType], color: Colors.green)),
))
: Container()
]);
}
}