officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

workspace panel drag commented

Browse Source
This commit is contained in:
pastilhas
2026-02-19 12:34:05 +00:00
parent ebe2321f8f
commit 4dde3aec66
2 changed files with 24 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/components/Workspace/PanelSlot.tsx
+21 -32
View File
@@ -1,5 +1,4 @@
import { useCallback } from 'react';
import { ArrowLeftRight, GripVertical } from 'lucide-react';
import { ArrowLeftRight } from 'lucide-react';
import type { LayoutPanel, AppRegistry, PanelComponents } from './types';
import { useWorkspace } from './WorkspaceContext';
import { Card } from '../Card';
@@ -98,34 +97,23 @@ const SwapSourceIndicator = ({ panelId }: { panelId: string }) => {
);
};
const DragHandle = ({ panelId }: { panelId: string }) => {
const { setDragSourceId, dragSourceId } = useWorkspace();
const onPointerDown = useCallback(
(ev: React.PointerEvent) => {
ev.preventDefault();
setDragSourceId(panelId);
},
[panelId, setDragSourceId],
);
if (dragSourceId) return null;
return (
<div
className="absolute top-2 right-2 z-10 p-1.5 rounded-md bg-duck-dark/5 text-duck-dark/30 opacity-0 group-hover/panel:opacity-100 hover:!bg-duck-dark/10 hover:!text-duck-dark/60 transition-all cursor-grab"
onPointerDown={onPointerDown}
>
<GripVertical className="h-5 w-5" />
</div>
);
};
const DragSourceDimmer = ({ panelId }: { panelId: string }) => {
const { dragSourceId } = useWorkspace();
if (dragSourceId !== panelId) return null;
return <div className="absolute inset-0 z-20 rounded-lg bg-duck-dark/10 pointer-events-none" />;
};
// TODO: drag-to-reposition needs work (visual feedback, edge cases)
// const DragHandle = ({ panelId }: { panelId: string }) => {
// const { setDragSourceId, dragSourceId } = useWorkspace();
// const onPointerDown = useCallback((ev: React.PointerEvent) => { ev.preventDefault(); setDragSourceId(panelId); }, [panelId, setDragSourceId]);
// if (dragSourceId) return null;
// return (
// <div className="absolute top-2 right-2 z-10 p-1.5 rounded-md bg-duck-dark/5 text-duck-dark/30 opacity-0 group-hover/panel:opacity-100 hover:!bg-duck-dark/10 hover:!text-duck-dark/60 transition-all cursor-grab" onPointerDown={onPointerDown}>
// <GripVertical className="h-5 w-5" />
// </div>
// );
// };
//
// const DragSourceDimmer = ({ panelId }: { panelId: string }) => {
// const { dragSourceId } = useWorkspace();
// if (dragSourceId !== panelId) return null;
// return <div className="absolute inset-0 z-20 rounded-lg bg-duck-dark/10 pointer-events-none" />;
// };
export const PanelSlot = ({ panel, registry, components, interactive, isLastPanel, onSetApp, onSplit, onRemove }: PanelSlotProps) => {
const PanelComponent = components?.[panel.id];
@@ -144,8 +132,9 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
<>
<SwapOverlay panelId={panel.id} />
<SwapSourceIndicator panelId={panel.id} />
<DragHandle panelId={panel.id} />
<DragSourceDimmer panelId={panel.id} />
{/* TODO: re-enable when drag-to-reposition is polished */}
{/* <DragHandle panelId={panel.id} /> */}
{/* <DragSourceDimmer panelId={panel.id} /> */}
</>
) : null;
src/workspaces/components/Workspace/WorkspaceView.tsx
+3 -2
View File
@@ -4,7 +4,8 @@ import type { DropPosition } from './layout-utils';
import { splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, countPanels } from './layout-utils';
import { WorkspaceProvider } from './WorkspaceContext';
import { WorkspaceRenderer } from './WorkspaceRenderer';
import { DragOverlay } from './DragOverlay';
// TODO: re-enable when drag-to-reposition is polished
// import { DragOverlay } from './DragOverlay';
type WorkspaceViewProps = {
workspace: WorkspaceDefinition | null;
@@ -104,7 +105,7 @@ export const WorkspaceView = ({ workspace, layout, onLayoutChange, registry }: W
onRemove={handleRemove}
onResized={handleResized}
/>
<DragOverlay />
{/* <DragOverlay /> */}
</WorkspaceProvider>
);
};