feat(app): Workspace-Umbau Schritt 4 — zoombarer Canvas + Fokus/Uebersicht
Der Chat-Tab hostet ab jetzt den Workspace-Canvas (eine ChatScreen-Instanz,
kein Doppel-Mount). Zwei Ebenen:
- Welt-Ebene (reanimated scale/translate): leichte Thumbnail-Kacheln, 2-Finger
Pinch-Zoom + 2-Finger-Pan nur in der Uebersicht (gesture-handler).
- Identity-Content-Ebene (Scale 1): schwere Inhalte (ChatScreen + kommende
WebViews) immer gemountet, nur die fokussierte per display sichtbar → Touch/
Keyboard bleiben korrekt, nichts remountet beim Fokuswechsel.
Tap auf Kachel = Fokus (voll interaktiv), "⤢ Uebersicht"/Hardware-Back = zurueck
zur Landkarte. Bei nur einer Kachel (reiner Chat) ist diese dauerhaft fokussiert
→ verhaelt sich exakt wie der bisherige Vollbild-Chat.
Neue Dateien unter android/src/workspace/: layout.ts (Kamera-Mathe, Center-
Origin fuer RN 0.73), WorkspaceCanvas.tsx, WorkspaceScreen.tsx, Tile.tsx,
tiles/{ChatTile,CodeEditorTile,VncTile,PreviewTile}.tsx. Editor/VNC sind noch
Platzhalter (Commit 5/7). tsc clean.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* WorkspaceCanvas — die zoom-/verschiebbare "Landkarte" plus Fokus-Modus.
|
||||
*
|
||||
* Zwei Ebenen uebereinander:
|
||||
* 1. Welt-Ebene (skaliert/verschoben): nur leichte Thumbnail-Kacheln. Hier
|
||||
* wirken 2-Finger-Pinch-Zoom + 2-Finger-Pan (nur in der Uebersicht).
|
||||
* 2. Identity-Content-Ebene (Scale 1, nie transformiert): die schweren,
|
||||
* interaktiven Inhalte (ChatScreen + WebViews). Alle sichtbaren Kacheln
|
||||
* sind hier IMMER gemountet; nur die fokussierte ist per display sichtbar.
|
||||
* Dadurch bleiben Touch-Koordinaten/Keyboard korrekt und nichts remountet
|
||||
* beim Fokuswechsel.
|
||||
*
|
||||
* Tap auf eine Thumbnail-Kachel → Fokus (voll aufgezoomt + interaktiv). Der
|
||||
* "⤢ Übersicht"-Button bzw. der Hardware-Back fuehren zurueck zur Landkarte.
|
||||
* Bei nur einer Kachel (reiner Chat) ist diese dauerhaft fokussiert und der
|
||||
* Canvas verhaelt sich exakt wie der bisherige Vollbild-Chat.
|
||||
*/
|
||||
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { BackHandler, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
|
||||
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
||||
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||||
|
||||
import {
|
||||
boundsOf, Camera, focusCamera, overviewCamera, TileId, TILE_RECTS, toLocal,
|
||||
} from './layout';
|
||||
import Tile from './Tile';
|
||||
import ChatTile from './tiles/ChatTile';
|
||||
import CodeEditorTile from './tiles/CodeEditorTile';
|
||||
import VncTile from './tiles/VncTile';
|
||||
import PreviewTile from './tiles/PreviewTile';
|
||||
|
||||
interface Props {
|
||||
projectId: string;
|
||||
visibleTiles: TileId[];
|
||||
subtitles?: Partial<Record<TileId, string>>;
|
||||
}
|
||||
|
||||
const ANIM = { duration: 260 };
|
||||
const MIN_SCALE = 0.15;
|
||||
const MAX_SCALE = 4;
|
||||
|
||||
const WorkspaceCanvas: React.FC<Props> = ({ projectId, visibleTiles, subtitles }) => {
|
||||
const { width: vw, height: vh } = useWindowDimensions();
|
||||
const [focusedTileId, setFocusedTileId] = useState<TileId | null>('chat');
|
||||
|
||||
const visibleKey = visibleTiles.join(',');
|
||||
const bounds = useMemo(() => boundsOf(visibleTiles), [visibleKey]);
|
||||
const worldW = bounds.w;
|
||||
const worldH = bounds.h;
|
||||
const single = visibleTiles.length <= 1;
|
||||
|
||||
// Kamera (shared values fuer 60fps auf dem UI-Thread).
|
||||
const scale = useSharedValue(1);
|
||||
const tx = useSharedValue(0);
|
||||
const ty = useSharedValue(0);
|
||||
const savedScale = useSharedValue(1);
|
||||
const savedTx = useSharedValue(0);
|
||||
const savedTy = useSharedValue(0);
|
||||
|
||||
// Bei nur einer Kachel: immer fokussiert. Verschwindet die fokussierte
|
||||
// Kachel aus der Sichtbarkeit, auf Chat zurueckfallen.
|
||||
useEffect(() => {
|
||||
if (single) {
|
||||
setFocusedTileId(visibleTiles[0] || 'chat');
|
||||
} else if (focusedTileId && !visibleTiles.includes(focusedTileId)) {
|
||||
setFocusedTileId('chat');
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [visibleKey]);
|
||||
|
||||
// Kamera auf das Ziel fahren (Fokus-Rect oder Uebersicht).
|
||||
useEffect(() => {
|
||||
const cam: Camera = focusedTileId
|
||||
? focusCamera(toLocal(TILE_RECTS[focusedTileId], bounds), worldW, worldH, vw, vh)
|
||||
: overviewCamera(worldW, worldH, vw, vh);
|
||||
scale.value = withTiming(cam.scale, ANIM);
|
||||
tx.value = withTiming(cam.tx, ANIM);
|
||||
ty.value = withTiming(cam.ty, ANIM);
|
||||
savedScale.value = cam.scale;
|
||||
savedTx.value = cam.tx;
|
||||
savedTy.value = cam.ty;
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [focusedTileId, visibleKey, vw, vh]);
|
||||
|
||||
// Hardware-Back: im Fokus (und mehr als eine Kachel) → zurueck zur Uebersicht.
|
||||
useEffect(() => {
|
||||
const onBack = () => {
|
||||
if (focusedTileId && !single) {
|
||||
setFocusedTileId(null);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const sub = BackHandler.addEventListener('hardwareBackPress', onBack);
|
||||
return () => sub.remove();
|
||||
}, [focusedTileId, single]);
|
||||
|
||||
// Gesten nur in der Uebersicht (Fokus-Modus: Touches fallen an die Kachel).
|
||||
const gesturesEnabled = !focusedTileId && !single;
|
||||
const canvasGesture = useMemo(() => {
|
||||
const pinch = Gesture.Pinch()
|
||||
.enabled(gesturesEnabled)
|
||||
.onUpdate((e) => {
|
||||
'worklet';
|
||||
scale.value = Math.max(MIN_SCALE, Math.min(MAX_SCALE, savedScale.value * e.scale));
|
||||
})
|
||||
.onEnd(() => {
|
||||
'worklet';
|
||||
savedScale.value = scale.value;
|
||||
});
|
||||
const pan = Gesture.Pan()
|
||||
.enabled(gesturesEnabled)
|
||||
.minPointers(2)
|
||||
.onUpdate((e) => {
|
||||
'worklet';
|
||||
tx.value = savedTx.value + e.translationX;
|
||||
ty.value = savedTy.value + e.translationY;
|
||||
})
|
||||
.onEnd(() => {
|
||||
'worklet';
|
||||
savedTx.value = tx.value;
|
||||
savedTy.value = ty.value;
|
||||
});
|
||||
return Gesture.Simultaneous(pinch, pan);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [gesturesEnabled]);
|
||||
|
||||
const worldStyle = useAnimatedStyle(() => ({
|
||||
transform: [
|
||||
{ translateX: tx.value },
|
||||
{ translateY: ty.value },
|
||||
{ scale: scale.value },
|
||||
],
|
||||
}));
|
||||
|
||||
const renderContent = (id: TileId) => {
|
||||
switch (id) {
|
||||
case 'chat': return <ChatTile />;
|
||||
case 'editor': return <CodeEditorTile projectId={projectId} />;
|
||||
case 'vnc': return <VncTile projectId={projectId} focused={focusedTileId === 'vnc'} />;
|
||||
case 'preview': return <PreviewTile />;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.root}>
|
||||
{/* Ebene 1 — skalierte Landkarte mit Thumbnails */}
|
||||
<View style={StyleSheet.absoluteFill} pointerEvents={focusedTileId ? 'none' : 'auto'}>
|
||||
<GestureDetector gesture={canvasGesture}>
|
||||
<Animated.View style={[styles.world, { width: worldW, height: worldH }, worldStyle]}>
|
||||
{visibleTiles.map((id) => (
|
||||
<Tile
|
||||
key={id}
|
||||
id={id}
|
||||
rect={toLocal(TILE_RECTS[id], bounds)}
|
||||
subtitle={subtitles?.[id]}
|
||||
onFocus={setFocusedTileId}
|
||||
/>
|
||||
))}
|
||||
</Animated.View>
|
||||
</GestureDetector>
|
||||
</View>
|
||||
|
||||
{/* Ebene 2 — Identity-Content, immer gemountet, nur fokussierte sichtbar */}
|
||||
<View style={StyleSheet.absoluteFill} pointerEvents={focusedTileId ? 'box-none' : 'none'}>
|
||||
{visibleTiles.map((id) => (
|
||||
<View
|
||||
key={id}
|
||||
style={[StyleSheet.absoluteFill, { display: focusedTileId === id ? 'flex' : 'none' }]}
|
||||
>
|
||||
{renderContent(id)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Steuerung */}
|
||||
{focusedTileId && !single && (
|
||||
<TouchableOpacity style={styles.overviewBtn} onPress={() => setFocusedTileId(null)} activeOpacity={0.8}>
|
||||
<Text style={styles.overviewBtnText}>⤢ Übersicht</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{!focusedTileId && (
|
||||
<View style={styles.hintBar} pointerEvents="none">
|
||||
<Text style={styles.hintText}>Kachel antippen zum Öffnen · 2 Finger: zoomen & schieben</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: { flex: 1, backgroundColor: '#0D0D1A' },
|
||||
world: { position: 'absolute', left: 0, top: 0 },
|
||||
overviewBtn: {
|
||||
position: 'absolute',
|
||||
top: 10,
|
||||
right: 12,
|
||||
backgroundColor: 'rgba(18,18,42,0.92)',
|
||||
borderColor: '#1E1E2E',
|
||||
borderWidth: 1,
|
||||
borderRadius: 18,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
overviewBtnText: { color: '#0096FF', fontSize: 14, fontWeight: '700' },
|
||||
hintBar: {
|
||||
position: 'absolute',
|
||||
bottom: 16,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
},
|
||||
hintText: {
|
||||
color: '#9090B0',
|
||||
fontSize: 12,
|
||||
backgroundColor: 'rgba(18,18,42,0.85)',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 14,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
});
|
||||
|
||||
export default WorkspaceCanvas;
|
||||
Reference in New Issue
Block a user