ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-12 23:29:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): remove off-screen element indicators for UX redesign (#1376)

Browse Source
This commit is contained in:
Miguel Ángel
2026-06-12 11:23:18 -04:00
committed by GitHub
parent cee6fd02d6
commit 3ba01129e7
2 changed files with 0 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/DomEditOverlay.tsx
-60
View File
@@ -13,7 +13,6 @@ import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
import { GridOverlay } from "./GridOverlay";
import { useOffScreenIndicators } from "./useOffScreenIndicators";
// Re-exports for external consumers — preserving existing import paths.
export {
@@ -215,7 +214,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
return () => cancelAnimationFrame(frame);
});
const offScreenIndicators = useOffScreenIndicators({ iframeRef, overlayRef, compRect });
const gestures = createDomEditOverlayGestureHandlers({
overlayRef,
@@ -521,64 +519,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
}}
/>
))}
{offScreenIndicators.length > 0 &&
compRect.width > 0 &&
offScreenIndicators.map((ind) => {
const isSelected = selection?.id === ind.elementId;
return (
<div
key={`offscreen-${ind.key}`}
className={`absolute rounded-sm ${isSelected ? "pointer-events-none" : "cursor-grab"}`}
style={{
left: ind.left,
top: ind.top,
width: ind.width,
height: ind.height,
border: `1.5px dashed var(--panel-accent, #34d399)`,
opacity: isSelected ? 0.3 : 0.5,
zIndex: isSelected ? 1 : 5,
}}
onPointerDown={
isSelected
? undefined
: (e) => {
if (e.button !== 0) return;
e.stopPropagation();
e.preventDefault();
const startX = e.clientX;
const startY = e.clientY;
const el = e.currentTarget;
el.setPointerCapture(e.pointerId);
let deltaX = 0;
let deltaY = 0;
let moved = false;
const onMove = (me: PointerEvent) => {
deltaX = me.clientX - startX;
deltaY = me.clientY - startY;
if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) moved = true;
if (moved) {
el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
}
};
const onUp = async (ue: PointerEvent) => {
el.releasePointerCapture(ue.pointerId);
el.removeEventListener("pointermove", onMove);
el.removeEventListener("pointerup", onUp);
el.style.transform = "";
const sel = await onSelectElementById?.(ind.elementId);
if (moved && sel && onPathOffsetCommit) {
const scale = compRect.scaleX || 1;
onPathOffsetCommit(sel, { x: deltaX / scale, y: deltaY / scale });
}
};
el.addEventListener("pointermove", onMove);
el.addEventListener("pointerup", onUp);
}
}
title={isSelected ? undefined : `Drag #${ind.elementId}`}
/>
);
})}
<GridOverlay
visible={gridVisible}
spacing={gridSpacing}