+
e.stopPropagation()}
+ >
+
+
{
- const animation = el.animate(
- [
- { opacity: 0, transform: "translateY(-8px)" },
- { opacity: 0.65, transform: "translateY(0)" },
- ],
- {
- duration: 100,
- easing: "ease-out",
- },
- );
- animation.finished.then(done);
- }}
- onExit={(el, done) => {
- const animation = el.animate(
- [
- { opacity: 0.65, transform: "translateY(0)" },
- { opacity: 0, transform: "translateY(-8px)" },
- ],
- {
- duration: 100,
- easing: "ease-in",
- },
- );
- animation.finished.then(done);
- }}
+ appear
+ enterClass="opacity-0"
+ enterActiveClass="transition-opacity duration-300"
+ enterToClass="opacity-100"
+ exitClass="opacity-100"
+ exitActiveClass="transition-opacity duration-300"
+ exitToClass="opacity-0"
>
-
-
- {snappedRatio()![0]}:{snappedRatio()![1]}
+
+
-
{
- e.stopPropagation();
- handleResizeStart(e.clientX, e.clientY, handle.direction);
- }}
- onTouchStart={(e) =>
- handleResizeStartTouch(e, handle.direction)
- }
- />
- ) : (
-
+ {(handle) =>
+ handle.isCorner ? (
+
+ ) : (
+
+
+
);
}
+
+type ResizeOptions = {
+ container: Vec2;
+ min: Vec2 | null;
+ max: Vec2 | null;
+ isAltMode: boolean;
+ shiftKey: boolean;
+ ratioValue: number | null;
+ snapToRatioEnabled: boolean;
+};
+
+function computeAspectRatioResize(
+ pointX: number,
+ pointY: number,
+ startBounds: CropBounds,
+ handle: HandleSide,
+ options: ResizeOptions,
+): CropBounds {
+ const { container, min, max, ratioValue } = options;
+ if (ratioValue === null) return startBounds;
+
+ // Determine the stationary anchor point.
+ const anchorX = startBounds.x + (handle.movable.left ? startBounds.width : 0);
+ const anchorY = startBounds.y + (handle.movable.top ? startBounds.height : 0);
+
+ // Calculate raw dimensions from anchor to the clamped mouse position
+ const mX = clamp(pointX, 0, container.x);
+ const mY = clamp(pointY, 0, container.y);
+ const rawWidth = Math.abs(mX - anchorX);
+ const rawHeight = Math.abs(mY - anchorY);
+
+ // Determine the "ideal" size by respecting the aspect ratio based on the dominant mouse movement
+ let targetW: number;
+ let targetH: number;
+
+ if (handle.isCorner) {
+ // For corners, let the dominant mouse direction drive the aspect ratio
+ if (rawWidth / ratioValue > rawHeight) {
+ targetW = rawWidth;
+ targetH = targetW / ratioValue;
+ } else {
+ targetH = rawHeight;
+ targetW = targetH * ratioValue;
+ }
+ } else if (handle.x !== "c") {
+ targetW = rawWidth;
+ targetH = targetW / ratioValue;
+ } else {
+ targetH = rawHeight;
+ targetW = targetH * ratioValue;
+ }
+
+ const newX = mX < anchorX ? anchorX - targetW : anchorX;
+ const newY = mY < anchorY ? anchorY - targetH : anchorY;
+ let finalBounds = { x: newX, y: newY, width: targetW, height: targetH };
+
+ const resizeOrigin = { x: mX < anchorX ? 1 : 0, y: mY < anchorY ? 1 : 0 };
+ finalBounds = constrainBoundsToSize(
+ finalBounds,
+ max,
+ min,
+ resizeOrigin,
+ ratioValue,
+ );
+
+ if (finalBounds.width > container.x) {
+ const scale = container.x / finalBounds.width;
+ finalBounds.width = container.x;
+ finalBounds.height *= scale;
+ }
+ if (finalBounds.height > container.y) {
+ const scale = container.y / finalBounds.height;
+ finalBounds.height = container.y;
+ finalBounds.width *= scale;
+ }
+
+ finalBounds = slideBoundsIntoContainer(finalBounds, container.x, container.y);
+
+ return {
+ x: Math.round(finalBounds.x),
+ y: Math.round(finalBounds.y),
+ width: Math.round(Math.max(1, finalBounds.width)),
+ height: Math.round(Math.max(1, finalBounds.height)),
+ };
+}
+
+function computeFreeResize(
+ pointX: number,
+ pointY: number,
+ startBounds: CropBounds,
+ handle: HandleSide,
+ options: ResizeOptions,
+): { bounds: CropBounds; snappedRatio: Ratio | null } {
+ const { container, min, max, isAltMode, shiftKey, snapToRatioEnabled } =
+ options;
+ let snappedRatio: Ratio | null = null;
+
+ let bounds: CropBounds;
+
+ if (isAltMode) {
+ const center = {
+ x: startBounds.x + startBounds.width / 2,
+ y: startBounds.y + startBounds.height / 2,
+ };
+
+ const distW = Math.abs(pointX - center.x);
+ const distH = Math.abs(pointY - center.y);
+
+ const expLeft = Math.min(distW, center.x);
+ const expRight = Math.min(distW, container.x - center.x);
+ const expTop = Math.min(distH, center.y);
+ const expBottom = Math.min(distH, container.y - center.y);
+
+ let newW = expLeft + expRight;
+ let newH = expTop + expBottom;
+
+ if (min) {
+ newW = Math.max(newW, min.x);
+ newH = Math.max(newH, min.y);
+ }
+ if (max) {
+ newW = Math.min(newW, max.x);
+ newH = Math.min(newH, max.y);
+ }
+
+ if (!shiftKey && handle.isCorner && snapToRatioEnabled) {
+ const closest = findClosestRatio(newW, newH);
+ if (closest) {
+ const r = ratioToValue(closest);
+ if (handle.movable.top || handle.movable.bottom) newW = newH * r;
+ else newH = newW / r;
+ snappedRatio = closest;
+ }
+ }
+
+ bounds = {
+ x: Math.round(center.x - newW / 2),
+ y: Math.round(center.y - newH / 2),
+ width: Math.round(newW),
+ height: Math.round(newH),
+ };
+ } else {
+ const anchor = {
+ x: startBounds.x + (handle.movable.left ? startBounds.width : 0),
+ y: startBounds.y + (handle.movable.top ? startBounds.height : 0),
+ };
+ const clampedX = clamp(pointX, 0, container.x);
+ const clampedY = clamp(pointY, 0, container.y);
+
+ let x1 =
+ handle.movable.left || handle.movable.right ? clampedX : startBounds.x;
+ let y1 =
+ handle.movable.top || handle.movable.bottom ? clampedY : startBounds.y;
+ let x2 = anchor.x;
+ let y2 = anchor.y;
+
+ if (!handle.movable.left && !handle.movable.right) {
+ x1 = startBounds.x;
+ x2 = startBounds.x + startBounds.width;
+ }
+ if (!handle.movable.top && !handle.movable.bottom) {
+ y1 = startBounds.y;
+ y2 = startBounds.y + startBounds.height;
+ }
+
+ let newX = Math.min(x1, x2);
+ let newY = Math.min(y1, y2);
+ let newW = Math.abs(x1 - x2);
+ let newH = Math.abs(y1 - y2);
+
+ if (min) {
+ if (newW < min.x) {
+ const diff = min.x - newW;
+ newW = min.x;
+ if (clampedX < anchor.x) newX -= diff;
+ }
+ if (newH < min.y) {
+ const diff = min.y - newH;
+ newH = min.y;
+ if (clampedY < anchor.y) newY -= diff;
+ }
+ }
+ if (max) {
+ if (newW > max.x) {
+ const diff = newW - max.x;
+ newW = max.x;
+ if (clampedX < anchor.x) newX += diff;
+ }
+ if (newH > max.y) {
+ const diff = newH - max.y;
+ newH = max.y;
+ if (clampedY < anchor.y) newY += diff;
+ }
+ }
+
+ if (!shiftKey && handle.isCorner && snapToRatioEnabled) {
+ const closest = findClosestRatio(newW, newH);
+ if (closest) {
+ const r = ratioToValue(closest);
+ if (handle.movable.top || handle.movable.bottom) newW = newH * r;
+ else newH = newW / r;
+ if (clampedX < anchor.x) newX = anchor.x - newW;
+ if (clampedY < anchor.y) newY = anchor.y - newH;
+ snappedRatio = closest;
+ }
+ }
+
+ bounds = {
+ x: Math.round(newX),
+ y: Math.round(newY),
+ width: Math.round(newW),
+ height: Math.round(newH),
+ };
+ }
+ return { bounds, snappedRatio };
+}
+
+import type {
+ CheckMenuItemOptions,
+ PredefinedMenuItemOptions,
+} from "@tauri-apps/api/menu";
+
+export function createCropOptionsMenuItems(options: {
+ aspect: Ratio | null;
+ snapToRatioEnabled: boolean;
+ onAspectSet: (aspect: Ratio | null) => void;
+ onSnapToRatioSet: (enabled: boolean) => void;
+}) {
+ return [
+ {
+ text: "Free",
+ checked: !options.aspect,
+ action: () => options.onAspectSet(null),
+ } satisfies CheckMenuItemOptions,
+ ...COMMON_RATIOS.map(
+ (ratio) =>
+ ({
+ text: `${ratio[0]}:${ratio[1]}`,
+ checked: options.aspect === ratio,
+ action: () => options.onAspectSet(ratio),
+ }) satisfies CheckMenuItemOptions,
+ ),
+ { item: "Separator" } satisfies PredefinedMenuItemOptions,
+ {
+ text: "Snap to ratios",
+ checked: options.snapToRatioEnabled,
+ action: () => options.onSnapToRatioSet(!options.snapToRatioEnabled),
+ } satisfies CheckMenuItemOptions,
+ ];
+}
diff --git a/apps/desktop/src/routes/(window-chrome)/(main).tsx b/apps/desktop/src/routes/(window-chrome)/(main).tsx
index 5a98956cc4..3fce9f4b55 100644
--- a/apps/desktop/src/routes/(window-chrome)/(main).tsx
+++ b/apps/desktop/src/routes/(window-chrome)/(main).tsx
@@ -665,7 +665,7 @@ function AreaSelectButton(props: {
onMount(async () => {
const unlistenCaptureAreaWindow =
await getCurrentWebviewWindow().listen
(
- "cap-window://capture-area/state/pending",
+ "setCaptureAreaPending",
(event) => setAreaSelection("pending", event.payload),
);
onCleanup(unlistenCaptureAreaWindow);
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index c1b1475165..d707595833 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -407,12 +407,6 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
handleChange("enableNotifications", value);
}}
/>
- handleChange("hapticsEnabled", v)}
- />
)}
diff --git a/apps/desktop/src/routes/capture-area.tsx b/apps/desktop/src/routes/capture-area.tsx
index 5a00adda96..cdf89cb6a5 100644
--- a/apps/desktop/src/routes/capture-area.tsx
+++ b/apps/desktop/src/routes/capture-area.tsx
@@ -1,78 +1,109 @@
-import { Tooltip } from "@kobalte/core";
-import { createEventListenerMap } from "@solid-primitives/event-listener";
+import { createEventListener } from "@solid-primitives/event-listener";
+import { createScheduled, debounce } from "@solid-primitives/scheduled";
import { makePersisted } from "@solid-primitives/storage";
+import { LogicalPosition } from "@tauri-apps/api/dpi";
+import { Menu } from "@tauri-apps/api/menu";
import {
getCurrentWebviewWindow,
WebviewWindow,
} from "@tauri-apps/api/webviewWindow";
-import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { type as ostype } from "@tauri-apps/plugin-os";
+import { createMemo, createSignal, onCleanup, onMount, Show } from "solid-js";
import { createStore, reconcile } from "solid-js/store";
import { Transition } from "solid-transition-group";
-import Cropper from "~/components/Cropper";
+import Cropper, {
+ CROP_ZERO,
+ type CropBounds,
+ type CropperRef,
+ createCropOptionsMenuItems,
+ type Ratio,
+} from "~/components/Cropper";
import { createOptionsQuery } from "~/utils/queries";
-import type { Crop } from "~/utils/tauri";
+import type { DisplayId } from "~/utils/tauri";
+
+const MIN_SIZE = { width: 150, height: 150 };
export default function CaptureArea() {
- const { rawOptions, setOptions } = createOptionsQuery();
const webview = getCurrentWebviewWindow();
- const [state, setState] = makePersisted(
- createStore({
- showGrid: true,
- }),
- { name: "captureArea" },
- );
-
const setPendingState = (pending: boolean) =>
- webview.emitTo("main", "cap-window://capture-area/state/pending", pending);
+ webview.emitTo("main", "setCaptureAreaPending", pending);
- let unlisten: () => void | undefined;
onMount(async () => {
setPendingState(true);
- unlisten = await webview.onCloseRequested(() => setPendingState(false));
+ const unlisten = await webview.onCloseRequested(() =>
+ setPendingState(false),
+ );
+ onCleanup(() => unlisten());
});
- onCleanup(() => unlisten?.());
- const [windowSize, setWindowSize] = createSignal({
- x: window.innerWidth,
- y: window.innerHeight,
- });
+ const [state, setState] = makePersisted(
+ createStore<{
+ snapToRatio: boolean;
+ lastSelectedBounds: { screenId: DisplayId; bounds: CropBounds }[];
+ }>({ snapToRatio: true, lastSelectedBounds: [] }),
+ {
+ name: "capture-area",
+ },
+ );
- onMount(() => {
- createEventListenerMap(window, {
- resize: () =>
- setWindowSize({ x: window.innerWidth, y: window.innerHeight }),
- keydown: (e) => {
- if (e.key === "Escape") close();
- else if (e.key === "Enter") handleConfirm();
- },
- });
+ createEventListener(window, "keydown", (e) => {
+ if (e.key === "Escape") close();
+ else if (e.key === "Enter") handleConfirm();
});
- const [crop, setCrop] = createStore({
- size: { x: 0, y: 0 },
- position: { x: 0, y: 0 },
+ let cropperRef: CropperRef | undefined;
+
+ const [crop, setCrop] = createSignal(CROP_ZERO);
+
+ const scheduled = createScheduled((fn) => debounce(fn, 50));
+
+ const isValid = createMemo((p: boolean = true) => {
+ const b = crop();
+ return scheduled()
+ ? b.width >= MIN_SIZE.width && b.height >= MIN_SIZE.height
+ : p;
});
+ const { rawOptions, setOptions } = createOptionsQuery();
+
async function handleConfirm() {
+ const currentBounds = cropperRef?.bounds();
+ if (!currentBounds) throw new Error("Cropper not initialized");
+ if (
+ currentBounds.width < MIN_SIZE.width ||
+ currentBounds.height < MIN_SIZE.height
+ )
+ return;
+
const target = rawOptions.captureTarget;
if (target.variant !== "display") return;
- setPendingState(false);
+ const existingIndex = state.lastSelectedBounds?.findIndex(
+ (item) => item.screenId === target.id,
+ );
+
+ if (existingIndex >= 0) {
+ setState("lastSelectedBounds", existingIndex, {
+ screenId: target.id,
+ bounds: currentBounds,
+ });
+ } else {
+ setState("lastSelectedBounds", [
+ ...state.lastSelectedBounds,
+ { screenId: target.id, bounds: currentBounds },
+ ]);
+ }
+
+ const b = crop();
setOptions(
"captureTarget",
reconcile({
variant: "area",
screen: target.id,
bounds: {
- position: {
- x: crop.position.x,
- y: crop.position.y,
- },
- size: {
- width: crop.size.x,
- height: crop.size.y,
- },
+ position: { x: b.x, y: b.y },
+ size: { width: b.width, height: b.height },
},
}),
);
@@ -90,55 +121,131 @@ export default function CaptureArea() {
}, 250);
}
+ const [aspect, setAspect] = createSignal(null);
+
+ function reset() {
+ cropperRef?.reset();
+ setAspect(null);
+
+ const target = rawOptions.captureTarget;
+ if (target.variant !== "display") return;
+ setState("lastSelectedBounds", (values) =>
+ values?.filter((v) => v.screenId !== target.id),
+ );
+ }
+
+ async function showCropOptionsMenu(e: UIEvent, positionAtCursor = false) {
+ e.preventDefault();
+ const items = createCropOptionsMenuItems({
+ aspect: aspect(),
+ snapToRatioEnabled: state.snapToRatio,
+ onAspectSet: setAspect,
+ onSnapToRatioSet: (enabled) => setState("snapToRatio", enabled),
+ });
+ const menu = await Menu.new({ items });
+ let pos: LogicalPosition | undefined;
+ if (!positionAtCursor) {
+ const rect = (e.target as HTMLDivElement).getBoundingClientRect();
+ pos = new LogicalPosition(rect.x, rect.y + 50);
+ }
+ await menu.popup(pos);
+ await menu.close();
+ }
+
return (
-
+
-
+
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
- Rule of Thirds
-
-
-
-
-
-
+
-
-
-
+
+
+
}
+ onClick={() => cropperRef?.fill()}
+ disabled={
+ crop().width === display.width &&
+ crop().height === display.height
+ }
+ >
+ Full
+
}
- onClick={() =>
- setCrop({
- position: { x: 0, y: 0 },
- size: {
- x: display.width,
- y: display.height,
- },
- })
+ onClick={() => {
+ cropperRef?.reset();
+ setAspect(null);
+ }}
+ disabled={
+ crop().x === dialog().position.x &&
+ crop().y === dialog().position.y &&
+ crop().width === dialog().size.x &&
+ crop().height === dialog().size.y
}
>
Reset
@@ -426,15 +458,17 @@ function Dialogs() {
-
+
showCropOptionsMenu(e, true)}
>
![]()
{
- setBounds(windowUnderCursor.bounds);
+ setInitialAreaBounds({
+ x: windowUnderCursor.bounds.position.x,
+ y: windowUnderCursor.bounds.position.y,
+ width: windowUnderCursor.bounds.size.width,
+ height: windowUnderCursor.bounds.size.height,
+ });
setOptions({
targetMode: "area",
});
@@ -255,446 +240,135 @@ function Inner() {
- {(_) => (
-
- }
- >
- {(_) => {
- const [dragging, setDragging] = createSignal(false);
- // Track whether the controls should be placed above the selection to avoid window bottom overflow
- const [placeControlsAbove, setPlaceControlsAbove] =
- createSignal(false);
- let controlsEl: HTMLDivElement | undefined;
-
- // Recompute placement when bounds change or window resizes
- createEffect(() => {
- // Read reactive dependencies
- const top = bounds.position.y;
- const height = bounds.size.height;
- // Measure controls height (fallback to 64px if not yet mounted)
- const ctrlH = controlsEl?.offsetHeight ?? 64;
- const margin = 16;
-
- const wouldOverflow =
- top + height + margin + ctrlH > window.innerHeight;
- setPlaceControlsAbove(wouldOverflow);
- });
-
- // Handle window resize to keep placement responsive
- createRoot((dispose) => {
- const onResize = () => {
- const ctrlH = controlsEl?.offsetHeight ?? 64;
- const margin = 16;
- const wouldOverflow =
- bounds.position.y + bounds.size.height + margin + ctrlH >
- window.innerHeight;
- setPlaceControlsAbove(wouldOverflow);
- };
- window.addEventListener("resize", onResize);
- onCleanup(() => {
- window.removeEventListener("resize", onResize);
- dispose();
- });
- });
-
- function createOnMouseDown(
- onDrag: (
- startBounds: typeof bounds,
- delta: { x: number; y: number },
- ) => void,
- ) {
- return (downEvent: MouseEvent) => {
- const startBounds = {
- position: { ...bounds.position },
- size: { ...bounds.size },
- };
-
- let animationFrame: number | null = null;
-
- createRoot((dispose) => {
- createEventListenerMap(window, {
- mouseup: () => {
- if (animationFrame)
- cancelAnimationFrame(animationFrame);
- dispose();
- },
- mousemove: (moveEvent) => {
- if (animationFrame)
- cancelAnimationFrame(animationFrame);
-
- animationFrame = requestAnimationFrame(() => {
- onDrag(startBounds, {
- x: moveEvent.clientX - downEvent.clientX, // Remove Math.max constraint
- y: moveEvent.clientY - downEvent.clientY, // Remove Math.max constraint
- });
- });
- },
- });
- });
- };
- }
+ {(_) => {
+ let controlsEl: HTMLDivElement | undefined;
+ let cropperRef: CropperRef | undefined;
+
+ const [aspect, setAspect] = createSignal(null);
+ const [snapToRatioEnabled, setSnapToRatioEnabled] =
+ createSignal(true);
+
+ async function showCropOptionsMenu(e: UIEvent) {
+ e.preventDefault();
+ const items = [
+ {
+ text: "Reset selection",
+ action: () => {
+ cropperRef?.reset();
+ setAspect(null);
+ },
+ },
+ await PredefinedMenuItem.new({
+ item: "Separator",
+ }),
+ ...createCropOptionsMenuItems({
+ aspect: aspect(),
+ snapToRatioEnabled: snapToRatioEnabled(),
+ onAspectSet: setAspect,
+ onSnapToRatioSet: setSnapToRatioEnabled,
+ }),
+ ];
+ const menu = await Menu.new({ items });
+ await menu.popup();
+ await menu.close();
+ }
- function ResizeHandles() {
- return (
- <>
- {/* Top Left Button */}
- {
- const width = startBounds.size.width - delta.x;
- const limitedWidth = Math.max(width, 150);
-
- const height = startBounds.size.height - delta.y;
- const limitedHeight = Math.max(height, 150);
-
- setBounds({
- position: {
- x:
- startBounds.position.x +
- delta.x -
- (limitedWidth - width),
- y:
- startBounds.position.y +
- delta.y -
- (limitedHeight - height),
- },
- size: {
- width: limitedWidth,
- height: limitedHeight,
- },
- });
- })}
- />
-
- {/* Top Right Button */}
- {
- const width = startBounds.size.width + delta.x;
- const limitedWidth = Math.max(width, 150);
-
- const height = startBounds.size.height - delta.y;
- const limitedHeight = Math.max(height, 150);
-
- setBounds({
- position: {
- x: startBounds.position.x,
- y:
- startBounds.position.y +
- delta.y -
- (limitedHeight - height),
- },
- size: {
- width: limitedWidth,
- height: limitedHeight,
- },
- });
- })}
- />
-
- {/* Bottom Left Button */}
- {
- const width = startBounds.size.width - delta.x;
- const limitedWidth = Math.max(width, 150);
-
- const height = startBounds.size.height + delta.y;
- const limitedHeight = Math.max(height, 150);
-
- setBounds({
- position: {
- x:
- startBounds.position.x +
- delta.x -
- (limitedWidth - width),
- y: startBounds.position.y,
- },
- size: {
- width: limitedWidth,
- height: limitedHeight,
- },
- });
- })}
- />
-
- {/* Bottom Right Button */}
- {
- const width = startBounds.size.width + delta.x;
- const limitedWidth = Math.max(width, 150);
-
- const height = startBounds.size.height + delta.y;
- const limitedHeight = Math.max(height, 150);
-
- setBounds({
- position: {
- x: startBounds.position.x,
- y: startBounds.position.y,
- },
- size: {
- width: limitedWidth,
- height: limitedHeight,
- },
- });
- })}
- />
-
- {/* Top Edge Button */}
- {
- const height = startBounds.size.height - delta.y;
- const limitedHeight = Math.max(height, 150);
-
- setBounds({
- position: {
- x: startBounds.position.x,
- y:
- startBounds.position.y +
- delta.y -
- (limitedHeight - height),
- },
- size: {
- width: startBounds.size.width,
- height: limitedHeight,
- },
- });
- })}
- />
-
- {/* Right Edge Button */}
- {
- setBounds({
- position: {
- x: startBounds.position.x,
- y: startBounds.position.y,
- },
- size: {
- width: Math.max(
- 150,
- startBounds.size.width + delta.x,
- ),
- height: startBounds.size.height,
- },
- });
- })}
- />
-
- {/* Bottom Edge Button */}
- {
- setBounds({
- position: {
- x: startBounds.position.x,
- y: startBounds.position.y,
- },
- size: {
- width: startBounds.size.width,
- height: Math.max(
- 150,
- startBounds.size.height + delta.y,
- ),
- },
- });
- })}
- />
-
- {/* Left Edge Button */}
- {
- const width = startBounds.size.width - delta.x;
- const limitedWidth = Math.max(150, width);
-
- setBounds({
- position: {
- x:
- startBounds.position.x +
- delta.x -
- (limitedWidth - width),
- y: startBounds.position.y,
- },
- size: {
- width: limitedWidth,
- height: startBounds.size.height,
- },
- });
- })}
- />
-
- );
- }
+ const [controlsSize, setControlsSize] = createStore({
+ width: 0,
+ height: 0,
+ });
+ createResizeObserver(
+ () => controlsEl,
+ ({ width, height }) => {
+ setControlsSize({ width, height });
+ },
+ );
+
+ // Spacing rules:
+ // Prefer below the crop (smaller margin)
+ // If no space below, place above the crop (larger top margin)
+ // Otherwise, place inside at the top of the crop (small inner margin)
+ const macos = ostype() === "macos";
+ const SIDE_MARGIN = 16;
+ const MARGIN_BELOW = 16;
+ const MARGIN_TOP_OUTSIDE = 16;
+ const MARGIN_TOP_INSIDE = macos ? 40 : 28;
+ const TOP_SAFE_MARGIN = macos ? 40 : 10; // keep clear of notch on MacBooks
+
+ const controlsStyle = createMemo(() => {
+ const bounds = crop();
+ const size = controlsSize;
+
+ if (size.width === 0 || bounds.width === 0) {
+ return { transform: "translate(-1000px, -1000px)" }; // Hide off-screen initially
+ }
- function Occluders() {
- return (
- <>
- {/* Left */}
-
- {/* Right */}
-
- {/* Top center */}
-
- {/* Bottom center */}
-
-
- );
+ const centerX = bounds.x + bounds.width / 2;
+ let finalY: number;
+
+ // Try below the crop
+ const belowY = bounds.y + bounds.height + MARGIN_BELOW;
+ if (belowY + size.height <= window.innerHeight) {
+ finalY = belowY;
+ } else {
+ // Try above the crop with a larger top margin
+ const aboveY = bounds.y - size.height - MARGIN_TOP_OUTSIDE;
+ if (aboveY >= TOP_SAFE_MARGIN) {
+ finalY = aboveY;
+ } else {
+ // Default to inside
+ finalY = bounds.y + MARGIN_TOP_INSIDE;
}
+ }
- return (
-
-
-
-
{
- setDragging(true);
- const startPosition = { ...bounds.position };
-
- createRoot((dispose) => {
- createEventListenerMap(window, {
- mousemove: (moveEvent) => {
- const newPosition = {
- x:
- startPosition.x +
- moveEvent.clientX -
- downEvent.clientX,
- y:
- startPosition.y +
- moveEvent.clientY -
- downEvent.clientY,
- };
-
- if (newPosition.x < 0) newPosition.x = 0;
- if (newPosition.y < 0) newPosition.y = 0;
- if (
- newPosition.x + bounds.size.width >
- window.innerWidth
- )
- newPosition.x =
- window.innerWidth - bounds.size.width;
- if (
- newPosition.y + bounds.size.height >
- window.innerHeight
- )
- newPosition.y =
- window.innerHeight - bounds.size.height;
-
- _setBounds("position", newPosition);
- },
- mouseup: () => {
- setDragging(false);
- dispose();
- },
- });
- });
- }}
- >
-
-
-
-
-
-
-
+ const finalX = Math.max(
+ SIDE_MARGIN,
+ Math.min(
+ centerX - size.width / 2,
+ window.innerWidth - size.width - SIDE_MARGIN,
+ ),
+ );
+
+ return {
+ transform: `translate(${finalX}px, ${finalY}px)`,
+ };
+ });
+
+ return (
+
+
+
+
+
-
Click and drag area to record
-
- );
- }}
-
- )}
+
showCropOptionsMenu(e)}
+ />
+