WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-09-12 12:47:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] tiles: dragging an edge of a tiled browser/app exits the tile and resizes from its exact spot (macOS-style)

Browse Source
This commit is contained in:
ciregenz
2026-07-28 21:17:31 -07:00
parent 96a3e51c83
commit 7a74443b07
2 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+17 -3
View File
@@ -1,4 +1,5 @@
import React, { useState, useRef, useCallback, useEffect } from 'react';
import { store } from '@/shared/state/store';
import { createPortal } from 'react-dom';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
@@ -44,7 +45,7 @@ import {
type BrowserTab,
} from '@/shared/state/dashboardLayoutSlice';
import WindowControls from './WindowControls';
import { useTiledStyle } from './tileZones';
import { useTiledStyle, computeTiledStyle } from './tileZones';
import { saveMinimizedShot } from '../desktop/minimizedShots';
import { removeBrowserCardCleanly } from '@/shared/browserTeardown';
import { createSelector } from '@reduxjs/toolkit';
@@ -890,14 +891,27 @@ const BrowserCard: React.FC<Props> = ({
if (e.button !== 0) return;
e.preventDefault();
e.stopPropagation();
// Grabbing an edge of a TILED card exits the tile and resizes from exactly where it sat,
// macOS-style; without this the handles resized the stale free-position geometry.
let origX = cardX, origY = cardY, origW = cardWidth, origH = cardHeight;
const zone = store.getState().dashboardLayout.tiledCards[browserId];
if (zone) {
const cam = getCanvasState();
const ts = computeTiledStyle(zone, cam.panX, cam.panY, cam.zoom);
if (ts) {
origX = ts.left; origY = ts.top; origW = ts.width / cam.zoom; origH = ts.height / cam.zoom;
setLocalResize({ x: origX, y: origY, w: origW, h: origH });
dispatch(clearTiledCard(browserId));
}
}
resizeRef.current = {
dir, startX: e.clientX, startY: e.clientY,
origX: cardX, origY: cardY, origW: cardWidth, origH: cardHeight,
origX, origY, origW, origH,
};
setIsResizing(true);
(e.target as HTMLElement).setPointerCapture(e.pointerId);
},
[cardX, cardY, cardWidth, cardHeight],
[cardX, cardY, cardWidth, cardHeight, getCanvasState, dispatch],
);
const computeResize = useCallback(
frontend/src/app/pages/Dashboard/cards/DashboardViewCard.tsx
+17 -3
View File
@@ -1,4 +1,5 @@
import React, { useState, useRef, useCallback, useEffect } from 'react';
import { store } from '@/shared/state/store';
import { createPortal } from 'react-dom';
import Box from '@mui/material/Box';
import Fade from '@mui/material/Fade';
@@ -21,7 +22,7 @@ import { expandSession } from '@/shared/state/agentsSlice';
import WindowControls from './WindowControls';
import { openCardContextMenu } from '../desktop/CardContextMenu';
import { useDragEndBackstops } from '../hooks/interaction/useDragEndBackstops';
import { useTiledStyle } from './tileZones';
import { useTiledStyle, computeTiledStyle } from './tileZones';
import { useAppDispatch, useAppSelector } from '@/shared/hooks';
import { API_BASE, getAuthToken } from '@/shared/config';
import { useClaudeTokens } from '@/shared/styles/ThemeContext';
@@ -478,14 +479,27 @@ const DashboardViewCard: React.FC<Props> = ({
if (e.button !== 0) return;
e.preventDefault();
e.stopPropagation();
// Grabbing an edge of a TILED card exits the tile and resizes from exactly where it sat,
// macOS-style; without this the handles resized the stale free-position geometry.
let origX = cardX, origY = cardY, origW = cardWidth, origH = cardHeight;
const zone = store.getState().dashboardLayout.tiledCards[cardKey];
if (zone) {
const cam = getCanvasState();
const ts = computeTiledStyle(zone, cam.panX, cam.panY, cam.zoom);
if (ts) {
origX = ts.left; origY = ts.top; origW = ts.width / cam.zoom; origH = ts.height / cam.zoom;
setLocalResize({ x: origX, y: origY, w: origW, h: origH });
dispatch(clearTiledCard(cardKey));
}
}
resizeRef.current = {
dir, startX: e.clientX, startY: e.clientY,
origX: cardX, origY: cardY, origW: cardWidth, origH: cardHeight,
origX, origY, origW, origH,
};
setIsResizing(true);
(e.target as HTMLElement).setPointerCapture(e.pointerId);
},
[cardX, cardY, cardWidth, cardHeight],
[cardX, cardY, cardWidth, cardHeight, getCanvasState, dispatch],
);
const computeResize = useCallback(