add ClideLightbox — click image cards to enlarge (T-252)
The inline image cards (T-249) are often too small to read. Clicking one now opens a full-screen lightbox: zoom (scroll wheel / pinch), pan when zoomed, double-click to reset to fit, Esc / close button / backdrop click to dismiss. ClideLightbox is a reusable primitive (lib/widgets/) over Flutter's InteractiveViewer with clide-owned zoom gestures, shown via the DialogRouter (dimmed backdrop, single modal at a time, D-78). The card stays display-only; the click is a navigation gesture, not an inline control. CLI parity (D-6): `clide image show <path> --fullscreen` opens straight into the lightbox instead of injecting a card. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,176 @@
|
||||
/// Full-screen zoom + pan overlay (T-252 / D-78). A reusable primitive: it
|
||||
/// takes any [child] and shows it over the [DialogRouter]'s dimmed backdrop
|
||||
/// (the host supplies the backdrop + outside-click dismiss). The image card is
|
||||
/// its first consumer; canvas / graph / diff previews can adopt it later.
|
||||
///
|
||||
/// Open: content fits the viewport. Scroll wheel / pinch zooms; drag pans when
|
||||
/// zoomed in; double-click resets to fit; Esc (or the close button, or a
|
||||
/// backdrop click) dismisses. Min/max scale clamp. Own-the-rendering-stack:
|
||||
/// Flutter's [InteractiveViewer] is the SDK-first base, with the zoom gestures
|
||||
/// kept here so the UX is ours.
|
||||
library;
|
||||
|
||||
import 'package:clide/kernel/src/theme/controller.dart';
|
||||
import 'package:clide/kernel/src/theme/tokens.dart';
|
||||
import 'package:clide/widgets/src/clide_icon.dart';
|
||||
import 'package:clide/widgets/src/clide_text.dart';
|
||||
import 'package:clide/widgets/src/icons/phosphor.dart';
|
||||
import 'package:clide/widgets/src/typography.dart';
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class ClideLightbox extends StatefulWidget {
|
||||
const ClideLightbox({
|
||||
super.key,
|
||||
required this.child,
|
||||
required this.onDismiss,
|
||||
this.minScale = 0.5,
|
||||
this.maxScale = 8.0,
|
||||
});
|
||||
|
||||
/// The content to zoom — constrained to the viewport on open (pass an image
|
||||
/// with `fit: BoxFit.contain` so it fits, then scales on zoom).
|
||||
final Widget child;
|
||||
final VoidCallback onDismiss;
|
||||
final double minScale;
|
||||
final double maxScale;
|
||||
|
||||
@override
|
||||
State<ClideLightbox> createState() => _ClideLightboxState();
|
||||
}
|
||||
|
||||
class _ClideLightboxState extends State<ClideLightbox> {
|
||||
final TransformationController _tc = TransformationController();
|
||||
final FocusNode _focus = FocusNode(debugLabel: 'ClideLightbox');
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted) _focus.requestFocus();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_tc.dispose();
|
||||
_focus.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _reset() => _tc.value = Matrix4.identity();
|
||||
|
||||
void _onScroll(PointerSignalEvent e) {
|
||||
if (e is! PointerScrollEvent) return;
|
||||
final current = _tc.value.getMaxScaleOnAxis();
|
||||
final factor = e.scrollDelta.dy < 0 ? 1.12 : 1 / 1.12;
|
||||
final applied = (current * factor).clamp(widget.minScale, widget.maxScale) / current;
|
||||
if (applied == 1.0) return;
|
||||
final box = context.findRenderObject() as RenderBox?;
|
||||
final p = box == null ? Offset.zero : box.globalToLocal(e.position);
|
||||
_tc.value = _tc.value.clone()
|
||||
..translateByDouble(p.dx, p.dy, 0, 1)
|
||||
..scaleByDouble(applied, applied, applied, 1)
|
||||
..translateByDouble(-p.dx, -p.dy, 0, 1);
|
||||
}
|
||||
|
||||
KeyEventResult _onKey(FocusNode node, KeyEvent e) {
|
||||
if (e is KeyDownEvent && e.logicalKey == LogicalKeyboardKey.escape) {
|
||||
widget.onDismiss();
|
||||
return KeyEventResult.handled;
|
||||
}
|
||||
return KeyEventResult.ignored;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final tokens = ClideTheme.of(context).surface;
|
||||
final size = MediaQuery.of(context).size;
|
||||
return Focus(
|
||||
focusNode: _focus,
|
||||
onKeyEvent: _onKey,
|
||||
child: SizedBox(
|
||||
// Leave a margin so the host backdrop is clickable to dismiss.
|
||||
width: size.width * 0.94,
|
||||
height: size.height * 0.94,
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: Listener(
|
||||
onPointerSignal: _onScroll,
|
||||
child: GestureDetector(
|
||||
onDoubleTap: _reset,
|
||||
child: InteractiveViewer(
|
||||
transformationController: _tc,
|
||||
minScale: widget.minScale,
|
||||
maxScale: widget.maxScale,
|
||||
boundaryMargin: const EdgeInsets.all(double.infinity),
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 8,
|
||||
right: 8,
|
||||
child: _IconChip(icon: PhosphorIcons.xMark, label: 'close', onTap: widget.onDismiss, tokens: tokens),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 8,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Center(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: tokens.panelHeader,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
child: ClideText(
|
||||
'scroll to zoom · double-click to reset · Esc to close',
|
||||
fontSize: clideFontMeta,
|
||||
color: tokens.globalTextMuted,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _IconChip extends StatelessWidget {
|
||||
const _IconChip({required this.icon, required this.label, required this.onTap, required this.tokens});
|
||||
final ClideIconPainter icon;
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
final SurfaceTokens tokens;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Semantics(
|
||||
button: true,
|
||||
label: label,
|
||||
child: GestureDetector(
|
||||
onTap: onTap,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(6),
|
||||
decoration: BoxDecoration(
|
||||
color: tokens.panelHeader,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
border: Border.all(color: tokens.panelBorder),
|
||||
),
|
||||
child: ClideIcon(icon, size: 16, color: tokens.globalForeground),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user