@domicile-desktop/component-library 0.0.0-alpha-59b63cdb292c → 0.0.0-alpha-452a746292aa

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-59b63cdb292c",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-59b63cdb292c",
+    "@domicile-desktop/sdk": "0.0.0-alpha-452a746292aa",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-452a746292aa",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -115,5 +115,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-59b63cdb292c"
+  "version": "0.0.0-alpha-452a746292aa"
 }

package/src/PortalDialogs/ScreenCastDialog.tsx

@@ -89,6 +89,11 @@ export const ScreenCastDialog = ({
   );
   // An area of the desk shot dragged in place of the picks.
   const [dragged, setDragged] = useState<ShotRect | undefined>(undefined);
+  // A part dragged over the window picked last, drawn alone as it is not on
+  // screen, by the window's index.
+  const [part, setPart] = useState<
+    { index: number; area: ShotRect } | undefined
+  >(undefined);
   const [drawing, setDrawing] = useState(false);
   const screens: Offered[] = body.sources.flatMap((source) =>
     source.kind === CastSourceKind.Monitor
@@ -173,7 +178,13 @@ export const ScreenCastDialog = ({
                   desk !== undefined && dragged !== undefined
                     ? [Source.Region(onDesk(desk, dragged))]
                     : offered.flatMap(({ source }, index) =>
-                        picked.includes(index) ? [source] : [],
+                        picked.includes(index)
+                          ? [
+                              part?.index === index
+                                ? partOf(source, part.area)
+                                : source,
+                            ]
+                          : [],
                       ),
                 ),
               );
@@ -195,9 +206,10 @@ export const ScreenCastDialog = ({
     >
       <p className={askerStyles}>{`${asker} wants to record`}</p>
       <SourcePicker
-        caption={caption(offered, picked, dragged, body.region)}
+        caption={caption(offered, picked, dragged, part, body.region)}
         desk={desk}
         dragged={dragged}
+        draggedPart={part?.area}
         label="What to share"
         multiple={body.multiple}
         onDrag={
@@ -205,12 +217,20 @@ export const ScreenCastDialog = ({
             ? (area) => {
                 setDragged(area);
                 setPicked([]);
+                setPart(undefined);
               }
             : undefined
         }
+        onDragPart={(area) => {
+          const index = picked.at(-1);
+          if (index !== undefined) {
+            setPart({ area, index });
+          }
+        }}
         onPick={(indices) => {
           setPicked(indices);
           setDragged(undefined);
+          setPart(undefined);
         }}
         picked={picked}
         previewWindow={previewWindow}
@@ -241,14 +261,27 @@ const title = (
   }
 };
 
+/** `source`, or `area` of it when it is a window. */
+const partOf = (source: CastSource, area: ShotRect): CastSource => {
+  switch (source.kind) {
+    case CastSourceKind.Window:
+    case CastSourceKind.BrowserWindow:
+      return { ...source, area };
+    case CastSourceKind.Monitor:
+    case CastSourceKind.Region:
+      return source;
+  }
+};
+
 /**
- * What the desk says of the sources `picked` from `offered`, or of the area
- * `dragged`, and whether a `region` may be dragged.
+ * What the desk says of the sources `picked` from `offered`, of the area
+ * `dragged` or of a window's `part`, and whether a `region` may be dragged.
  */
 const caption = (
   offered: readonly Offered[],
   picked: readonly number[],
   dragged: ShotRect | undefined,
+  part: { index: number; area: ShotRect } | undefined,
   region: boolean,
 ): string => {
   if (dragged !== undefined) {
@@ -257,8 +290,10 @@ const caption = (
     return region
       ? "Pick what to share, or drag over the desk for an area."
       : "Pick what to share.";
+  } else if (part !== undefined) {
+    return "A part of the window, shared as it draws itself.";
   } else if (picked.some((index) => offered[index]?.area === undefined)) {
-    return "Not on screen: shared as it draws itself.";
+    return "Not on screen: shared as it draws itself. Drag over it to pick a part.";
   } else {
     return "Shared live, as it changes.";
   }

package/src/PortalDialogs/ScreenshotDialog.tsx

@@ -52,12 +52,20 @@ const Pick = {
    * A browser window from the engine's capture of its page, without what is
    * over it. A hidden one draws while it is captured.
    */
-  BrowserWindow: (id: string) => ({
+  BrowserWindow: (id: string, part?: ShotRect | undefined) => ({
     id,
     kind: PickKind.BrowserWindow as const,
+    part,
+  }),
+  /**
+   * A window from its own last frame, without what is over it, or `part` of
+   * it, in the frame's pixels.
+   */
+  Window: (id: string, part?: ShotRect | undefined) => ({
+    id,
+    kind: PickKind.Window as const,
+    part,
   }),
-  /** A window from its own last frame, without what is over it. */
-  Window: (id: string) => ({ id, kind: PickKind.Window as const }),
 };
 
 type Pick = ReturnType<(typeof Pick)[keyof typeof Pick]>;
@@ -116,9 +124,12 @@ export const ScreenshotDialog = ({
   const choices = [whole, ...screens, ...windows];
   // The index of the choice picked, or the area dragged.
   const [picked, setPicked] = useState<number | ShotRect>(0);
+  // A part dragged over the window picked, drawn alone as it is not on
+  // screen.
+  const [part, setPart] = useState<ShotRect | undefined>(undefined);
   const pick =
     typeof picked === "number"
-      ? pickAt(choices, picked).pick
+      ? partOf(pickAt(choices, picked).pick, part)
       : Pick.Area(picked);
   useEffect(() => {
     const copy = (event: KeyboardEvent) => {
@@ -174,22 +185,27 @@ export const ScreenshotDialog = ({
     >
       {asker !== undefined && <p className={askerStyles}>{`${asker} asks`}</p>}
       <SourcePicker
-        caption={
+        caption={caption(
           typeof picked === "number" &&
-          pickAt(choices, picked).area === undefined
-            ? "Not on screen: saved as it last drew itself."
-            : "Drag over the desk to pick an area."
-        }
+            pickAt(choices, picked).area === undefined,
+          part,
+        )}
         desk={body}
         dragged={typeof picked === "number" ? undefined : picked}
+        draggedPart={part}
         label="What to save"
         multiple={false}
-        onDrag={setPicked}
+        onDrag={(area) => {
+          setPicked(area);
+          setPart(undefined);
+        }}
+        onDragPart={setPart}
         onPick={([index]) => {
           if (index === undefined) {
             throw new Error("a screenshot pick of nothing");
           } else {
             setPicked(index);
+            setPart(undefined);
           }
         }}
         picked={typeof picked === "number" ? [picked] : []}
@@ -216,15 +232,38 @@ const pickAt = (choices: readonly Picked[], index: number): Picked => {
   }
 };
 
+/** `pick`, or `part` of it when it is a window and a part is dragged. */
+const partOf = (pick: Pick, part: ShotRect | undefined): Pick => {
+  switch (pick.kind) {
+    case PickKind.Area:
+      return pick;
+    case PickKind.Window:
+      return Pick.Window(pick.id, part);
+    case PickKind.BrowserWindow:
+      return Pick.BrowserWindow(pick.id, part);
+  }
+};
+
+/** Under the desk, for a window `hidden` from it, with a `part` of it. */
+const caption = (hidden: boolean, part: ShotRect | undefined): string => {
+  if (part !== undefined) {
+    return "A part of the window, as it last drew itself.";
+  } else if (hidden) {
+    return "Not on screen: saved as it last drew itself. Drag over it to pick a part.";
+  } else {
+    return "Drag over the desk to pick an area.";
+  }
+};
+
 /** The answer that saves `pick`, and copies it too when `copy` is set. */
 const answerOf = (pick: Pick, copy: boolean): PortalAnswer => {
   switch (pick.kind) {
     case PickKind.Area:
       return Answer.Screenshot(pick.area, copy);
     case PickKind.Window:
-      return Answer.ScreenshotWindow(pick.id, copy);
+      return Answer.ScreenshotWindow(pick.id, copy, pick.part);
     case PickKind.BrowserWindow:
-      return Answer.ScreenshotBrowserWindow(pick.id, copy);
+      return Answer.ScreenshotBrowserWindow(pick.id, copy, pick.part);
   }
 };
 

package/src/PortalDialogs/SourcePicker.tsx

@@ -50,6 +50,13 @@ type Props = {
   dragged?: ShotRect | undefined;
   /** Called with a dragged area; without it, the desk cannot be dragged. */
   onDrag?: ((area: ShotRect) => void) | undefined;
+  /**
+   * A part dragged over a window drawn alone, in its frame's pixels, outlined
+   * on it.
+   */
+  draggedPart?: ShotRect | undefined;
+  /** Called with a part dragged over a window drawn alone. */
+  onDragPart?: ((area: ShotRect) => void) | undefined;
   onPick: (picked: number[]) => void;
   /** The indexes, across every section, of the choices picked. */
   picked: readonly number[];
@@ -61,16 +68,19 @@ type Props = {
 /**
  * Picks from a list of sources beside one preview of the frozen desk, which
  * outlines each pick with its size. A window picked last that the desk does
- * not show is drawn alone instead. One source is a radio, several are
- * checkboxes. The screenshot and screen cast pickers share it.
+ * not show is drawn alone instead, and a part of it may be dragged over it.
+ * One source is a radio, several are checkboxes. The screenshot and screen
+ * cast pickers share it.
  */
 export const SourcePicker = ({
   caption,
   desk,
   dragged,
+  draggedPart,
   label,
   multiple,
   onDrag,
+  onDragPart,
   onPick,
   picked,
   previewWindow,
@@ -121,9 +131,11 @@ export const SourcePicker = ({
       <figure className={stageStyles}>
         <Stage
           desk={desk}
+          draggedPart={draggedPart}
           frame={frame}
           hidden={hidden}
           onDrag={onDrag}
+          onDragPart={onDragPart}
           outlined={outlined}
         />
         <figcaption className={captionStyles}>{caption}</figcaption>
@@ -138,15 +150,19 @@ export const SourcePicker = ({
  */
 const Stage = ({
   desk,
+  draggedPart,
   frame,
   hidden,
   onDrag,
+  onDragPart,
   outlined,
 }: {
   desk: FrozenDesk | undefined;
+  draggedPart: ShotRect | undefined;
   frame: Result<string, SystemError> | undefined;
   hidden: Choice | undefined;
   onDrag: ((area: ShotRect) => void) | undefined;
+  onDragPart: ((area: ShotRect) => void) | undefined;
   outlined: readonly Outline[];
 }) => {
   if (hidden?.preview !== undefined) {
@@ -157,7 +173,15 @@ const Stage = ({
         frame.match({
           Err: () => <span className={noDeskStyles}>No preview</span>,
           Ok: (src) => (
-            <img alt={hidden.label} className={previewStyles} src={src} />
+            <Preview
+              alt={hidden.label}
+              box={desk}
+              dragged={draggedPart}
+              // Keyed so a part outlined on one window is not kept on the next.
+              key={src}
+              onDrag={onDragPart}
+              src={src}
+            />
           ),
         })
       );
@@ -257,6 +281,57 @@ const Row = ({
   );
 };
 
+/**
+ * A window drawn alone from `src`, fitted in `box`. With `onDrag`, a part of
+ * it may be dragged, in its frame's pixels, and `dragged` is outlined.
+ */
+const Preview = ({
+  alt,
+  box,
+  dragged,
+  onDrag,
+  src,
+}: {
+  alt: string;
+  box: { width: number; height: number } | undefined;
+  dragged: ShotRect | undefined;
+  onDrag: ((area: ShotRect) => void) | undefined;
+  src: string;
+}) => {
+  // The frame's size, which the drag is in, once it loads.
+  const [frame, setFrame] = useState<
+    { width: number; height: number } | undefined
+  >(undefined);
+  return (
+    <>
+      {/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: reads the frame's size as it loads, which is no interaction */}
+      <img
+        alt={alt}
+        className={previewStyles}
+        draggable={false}
+        onLoad={(event) => {
+          setFrame({
+            height: event.currentTarget.naturalHeight,
+            width: event.currentTarget.naturalWidth,
+          });
+        }}
+        src={src}
+      />
+      {frame !== undefined && box !== undefined && onDrag !== undefined && (
+        <Dragged
+          frame={frame}
+          label="Drag to pick a part of the window"
+          onDrag={onDrag}
+          outlined={
+            dragged === undefined ? [] : [{ area: dragged, key: "dragged" }]
+          }
+          style={{ ...contained(frame, box), position: "absolute" }}
+        />
+      )}
+    </>
+  );
+};
+
 /** The frozen desk, outlining `outlined`, and dragged when `onDrag` is set. */
 const Desk = ({
   desk,
@@ -266,45 +341,62 @@ const Desk = ({
   desk: FrozenDesk;
   onDrag: ((area: ShotRect) => void) | undefined;
   outlined: readonly Outline[];
+}) => {
+  const image = (
+    <img
+      alt="The desk"
+      className={frameStyles}
+      draggable={false}
+      src={desk.frame}
+    />
+  );
+  return onDrag === undefined ? (
+    <div className={deskStyles} style={fitted(desk)}>
+      {image}
+      <Outlines frame={desk} outlined={outlined} />
+    </div>
+  ) : (
+    <Dragged
+      frame={desk}
+      label="Drag to pick an area"
+      onDrag={onDrag}
+      outlined={outlined}
+      style={fitted(desk)}
+    >
+      {image}
+    </Dragged>
+  );
+};
+
+/**
+ * A box over a frame of `frame`'s size that an area is dragged on, in the
+ * frame's pixels, outlining `outlined`.
+ */
+const Dragged = ({
+  children,
+  frame,
+  label,
+  onDrag,
+  outlined,
+  style,
+}: {
+  children?: ReactNode;
+  frame: { width: number; height: number };
+  label: string;
+  onDrag: (area: ShotRect) => void;
+  outlined: readonly Outline[];
+  style: CSSProperties;
 }) => {
   const [dragFrom, setDragFrom] = useState<FramePoint | undefined>(undefined);
   const pointAt = (event: PointerEvent<HTMLDivElement>) =>
     framePoint(
       { x: event.clientX, y: event.clientY },
       event.currentTarget.getBoundingClientRect(),
-      desk,
+      frame,
     );
-  const frame = (
-    <>
-      <img
-        alt="The desk"
-        className={frameStyles}
-        draggable={false}
-        src={desk.frame}
-      />
-      {outlined.map(({ area, key }) => (
-        <div
-          className={pickedStyles}
-          // One pick shades the rest of the desk; several would shade each
-          // other.
-          data-shaded={outlined.length === 1 ? "" : undefined}
-          key={key}
-          style={placed(area, desk)}
-        >
-          <span className={sizeStyles}>
-            {`${String(area.width)} × ${String(area.height)}`}
-          </span>
-        </div>
-      ))}
-    </>
-  );
-  return onDrag === undefined ? (
-    <div className={deskStyles} style={fitted(desk)}>
-      {frame}
-    </div>
-  ) : (
+  return (
     <div
-      aria-label="Drag to pick an area"
+      aria-label={label}
       className={deskStyles}
       data-draggable=""
       onPointerDown={(event) => {
@@ -321,13 +413,37 @@ const Desk = ({
         setDragFrom(undefined);
       }}
       role="group"
-      style={fitted(desk)}
+      style={style}
     >
-      {frame}
+      {children}
+      <Outlines frame={frame} outlined={outlined} />
     </div>
   );
 };
 
+/** `outlined` over a frame of `frame`'s size, each with its size. */
+const Outlines = ({
+  frame,
+  outlined,
+}: {
+  frame: { width: number; height: number };
+  outlined: readonly Outline[];
+}) =>
+  outlined.map(({ area, key }) => (
+    <div
+      className={pickedStyles}
+      // One pick shades the rest of the frame; several would shade each
+      // other.
+      data-shaded={outlined.length === 1 ? "" : undefined}
+      key={key}
+      style={placed(area, frame)}
+    >
+      <span className={sizeStyles}>
+        {`${String(area.width)} × ${String(area.height)}`}
+      </span>
+    </div>
+  ));
+
 const layoutStyles = css({
   alignItems: "stretch",
   display: "grid",
@@ -495,6 +611,24 @@ const fitted = (frame: { width: number; height: number }): CSSProperties => {
   };
 };
 
+/**
+ * Where a frame of `frame`'s size is drawn in `box`, scaled to fit and
+ * centered as `object-fit: contain` draws it, in percent of the box.
+ */
+const contained = (
+  frame: { width: number; height: number },
+  box: { width: number; height: number },
+): CSSProperties => {
+  const wider = frame.width / frame.height / (box.width / box.height);
+  const [width, height] = wider > 1 ? [100, 100 / wider] : [100 * wider, 100];
+  return {
+    height: `${String(height)}%`,
+    left: `${String((100 - width) / 2)}%`,
+    top: `${String((100 - height) / 2)}%`,
+    width: `${String(width)}%`,
+  };
+};
+
 /** `area`'s place over the drawn frame, in percent of `frame`. */
 const placed = (
   area: ShotRect,