@artooi/ag-ui-web-component 0.32.0 → 0.33.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +194 -1
- package/README.md +182 -23
- package/dist/ag-ui-web-component.bundle.js +360 -121
- package/dist/ag-ui-web-component.bundle.js.map +4 -4
- package/dist/constants.d.ts +8 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/core/ag_ui_chat.d.ts.map +1 -1
- package/dist/index.js +1275 -390
- package/dist/index.js.map +4 -4
- package/dist/ui/clamp_launcher.d.ts +15 -0
- package/dist/ui/clamp_launcher.d.ts.map +1 -0
- package/dist/ui/copy_payload.d.ts +30 -0
- package/dist/ui/copy_payload.d.ts.map +1 -0
- package/dist/ui/launcher_drag.d.ts +43 -0
- package/dist/ui/launcher_drag.d.ts.map +1 -0
- package/dist/ui/launcher_placement.d.ts +64 -0
- package/dist/ui/launcher_placement.d.ts.map +1 -0
- package/dist/ui/message_actions.d.ts +30 -2
- package/dist/ui/message_actions.d.ts.map +1 -1
- package/dist/ui/resize_handle.d.ts +32 -26
- package/dist/ui/resize_handle.d.ts.map +1 -1
- package/dist/ui/styles.d.ts +1 -1
- package/dist/ui/styles.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/constants.ts +12 -0
- package/src/core/ag_ui_chat.ts +480 -24
- package/src/ui/clamp_launcher.ts +20 -0
- package/src/ui/copy_payload.ts +156 -0
- package/src/ui/launcher_drag.ts +182 -0
- package/src/ui/launcher_placement.ts +143 -0
- package/src/ui/message_actions.ts +93 -19
- package/src/ui/resize_handle.ts +109 -73
- package/src/ui/styles.ts +299 -82
- package/src/version.ts +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { Extent, LauncherBox } from "./launcher_placement.js";
|
|
2
|
+
/**
|
|
3
|
+
* Keep a launcher fully on screen.
|
|
4
|
+
*
|
|
5
|
+
* Applied to a dragged position and again to a restored one, because the
|
|
6
|
+
* viewport that stored it may since have shrunk. A launcher parked past the
|
|
7
|
+
* edge is unreachable, and it is the only way back to a collapsed
|
|
8
|
+
* conversation -- so this clamps to the viewport itself rather than to the
|
|
9
|
+
* panel's margin, which would refuse the corners users actually want.
|
|
10
|
+
*/
|
|
11
|
+
export declare function clampLauncher(launcher: LauncherBox, viewport: Extent): {
|
|
12
|
+
readonly left: number;
|
|
13
|
+
readonly top: number;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=clamp_launcher.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clamp_launcher.d.ts","sourceRoot":"","sources":["../../src/ui/clamp_launcher.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,MAAM,GACf;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAKjD"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/** What a copied message puts on the clipboard, in both flavours. */
|
|
2
|
+
export interface CopyPayload {
|
|
3
|
+
/** The plain-text flavour, structured so a table survives a paste. */
|
|
4
|
+
readonly text: string;
|
|
5
|
+
/** The rich flavour, so a table pastes as a table. */
|
|
6
|
+
readonly html: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* What to copy from one rendered message, in both clipboard flavours.
|
|
10
|
+
*
|
|
11
|
+
* `textContent` was the obvious answer and the wrong one. It concatenates every
|
|
12
|
+
* descendant with no separator at all, so a markdown table arrives as one run
|
|
13
|
+
* of digits with the headers welded to the first row -- unusable in a
|
|
14
|
+
* spreadsheet, and unreadable anywhere. Lists lose their bullets the same way,
|
|
15
|
+
* and paragraphs run together.
|
|
16
|
+
*
|
|
17
|
+
* So the plain flavour is serialised structurally: table rows become tab
|
|
18
|
+
* separated lines, which is the format spreadsheets parse on paste, and blocks
|
|
19
|
+
* and list items get their own lines. The rich flavour carries the markup, so a
|
|
20
|
+
* target that understands it -- a document, a chat client, a spreadsheet --
|
|
21
|
+
* gets the real table rather than a reconstruction of one.
|
|
22
|
+
*
|
|
23
|
+
* Both are taken from a **clone with the component's own buttons removed**. The
|
|
24
|
+
* code-block copy buttons are appended inside their own `pre`, so they are
|
|
25
|
+
* descendants of the bubble and `textContent` was picking their label up: a
|
|
26
|
+
* message containing a code block copied with the word for Copy sitting in the
|
|
27
|
+
* middle of it.
|
|
28
|
+
*/
|
|
29
|
+
export declare function copyPayload(root: Element): CopyPayload;
|
|
30
|
+
//# sourceMappingURL=copy_payload.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copy_payload.d.ts","sourceRoot":"","sources":["../../src/ui/copy_payload.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,MAAM,WAAW,WAAW;IAC1B,sEAAsE;IACtE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AA+BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,GAAG,WAAW,CAQtD"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { Extent, LauncherBox } from "./launcher_placement.js";
|
|
2
|
+
/** What the drag needs from its host to do its job. */
|
|
3
|
+
export interface LauncherDragOptions {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the current placement lets the launcher move, read per interaction
|
|
6
|
+
* because `placement` is a live attribute. A docked rail and a full-bleed
|
|
7
|
+
* layout have nowhere to move it to.
|
|
8
|
+
*/
|
|
9
|
+
readonly enabled: () => boolean;
|
|
10
|
+
/** The launcher's current box, in viewport coordinates. */
|
|
11
|
+
readonly rect: () => LauncherBox;
|
|
12
|
+
/** The viewport the launcher has to stay inside. */
|
|
13
|
+
readonly viewport: () => Extent;
|
|
14
|
+
/** Put the launcher's top-left at this point. Called per pointer move. */
|
|
15
|
+
readonly apply: (left: number, top: number) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Called once per completed move, for persistence: on `pointerup` for a
|
|
18
|
+
* drag, and when the key comes up (or focus leaves) for a key press. Never
|
|
19
|
+
* per pointer move, and never per key repeat.
|
|
20
|
+
*/
|
|
21
|
+
readonly commit: (left: number, top: number) => void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Let the user drag the collapsed launcher anywhere on screen.
|
|
25
|
+
*
|
|
26
|
+
* The launcher is a button before it is a handle, and that ordering is the
|
|
27
|
+
* whole difficulty: every drag ends in a `click` the browser synthesises, which
|
|
28
|
+
* would expand the panel the user was only repositioning. So a completed drag
|
|
29
|
+
* arms a one-shot capture listener that eats exactly one click.
|
|
30
|
+
*
|
|
31
|
+
* Two things stop that from eating a click it should not have. A drag ending
|
|
32
|
+
* off the launcher never produces the click it armed, so the arming is cleared
|
|
33
|
+
* on the next `pointerdown` -- a pointer click is always preceded by a press,
|
|
34
|
+
* which puts the clearing ahead of any click it could reach.
|
|
35
|
+
*
|
|
36
|
+
* That leaves the clicks with no press in front of them at all: `Enter` and
|
|
37
|
+
* `Space` on the focused button, assistive technology activating it, and a host
|
|
38
|
+
* calling `click()` itself. None of those is the tail of a drag, and all of them
|
|
39
|
+
* are the only way in for someone not using a pointer, so the suppression is
|
|
40
|
+
* narrowed to clicks carrying a click count -- which is the pointer's own.
|
|
41
|
+
*/
|
|
42
|
+
export declare function enableLauncherDrag(launcher: HTMLElement, options: LauncherDragOptions): void;
|
|
43
|
+
//# sourceMappingURL=launcher_drag.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"launcher_drag.d.ts","sourceRoot":"","sources":["../../src/ui/launcher_drag.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,uDAAuD;AACvD,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC;IAChC,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,EAAE,MAAM,WAAW,CAAC;IACjC,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,EAAE,MAAM,MAAM,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAaD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI,CA8H5F"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/** A box in viewport coordinates. */
|
|
2
|
+
export interface LauncherBox {
|
|
3
|
+
readonly left: number;
|
|
4
|
+
readonly top: number;
|
|
5
|
+
readonly width: number;
|
|
6
|
+
readonly height: number;
|
|
7
|
+
}
|
|
8
|
+
/** A width/height pair, in CSS pixels. */
|
|
9
|
+
export interface Extent {
|
|
10
|
+
readonly width: number;
|
|
11
|
+
readonly height: number;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* The corner the panel is pinned by, and therefore grows away from: pinned
|
|
15
|
+
* `top-left` opens down and to the right. It is also the corner the resize grip
|
|
16
|
+
* must stay off, which is why the element stamps it rather than measuring it
|
|
17
|
+
* once the launcher has been moved.
|
|
18
|
+
*/
|
|
19
|
+
export interface ExpandCorner {
|
|
20
|
+
readonly x: "left" | "right";
|
|
21
|
+
readonly y: "top" | "bottom";
|
|
22
|
+
}
|
|
23
|
+
/** Where to put the host box, and where the launcher sits inside it. */
|
|
24
|
+
export interface LauncherPlacement {
|
|
25
|
+
/** The corner the panel opens away from. */
|
|
26
|
+
readonly corner: ExpandCorner;
|
|
27
|
+
/** An `inset` shorthand for the host box. */
|
|
28
|
+
readonly hostInset: string;
|
|
29
|
+
/** An `inset` shorthand for the launcher, relative to the host box. */
|
|
30
|
+
readonly launcherInset: string;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Decide where a panel should open from a launcher the user has dragged.
|
|
34
|
+
*
|
|
35
|
+
* The launcher is the fixed point: wherever it was dropped is where it stays,
|
|
36
|
+
* collapsed and expanded alike. Everything here decides what happens *around*
|
|
37
|
+
* it.
|
|
38
|
+
*
|
|
39
|
+
* Two steps, and they are separate on purpose:
|
|
40
|
+
*
|
|
41
|
+
* 1. **Pick the corner with the most clear space.** For each axis, compare the
|
|
42
|
+
* room a panel would have on either side of the launcher and pin the side
|
|
43
|
+
* with more of it. Pinning `left` means the panel runs rightward from the
|
|
44
|
+
* launcher's left edge, so the room that decides it is the distance from
|
|
45
|
+
* that edge to the far side of the viewport -- not "which half of the screen
|
|
46
|
+
* is the launcher in", which gives a different and worse answer for a
|
|
47
|
+
* launcher near the middle.
|
|
48
|
+
*
|
|
49
|
+
* 2. **Clamp the panel into the viewport, then put the launcher back.** A
|
|
50
|
+
* launcher near the centre of a short viewport has a panel taller than
|
|
51
|
+
* either side, so the winning corner still overflows. Clamping moves the
|
|
52
|
+
* host box -- and the launcher is positioned inside that box, so it would be
|
|
53
|
+
* dragged along with it. The launcher's own inset therefore carries the
|
|
54
|
+
* difference: zero in the ordinary case, and exactly the distance the clamp
|
|
55
|
+
* moved the box in the case that needs it. That the launcher may end up
|
|
56
|
+
* outside its own host box is fine; nothing clips it, and it keeps its own
|
|
57
|
+
* pointer events.
|
|
58
|
+
*
|
|
59
|
+
* Both insets are expressed from the *same* corner, which is what stops a
|
|
60
|
+
* later panel resize from dragging the launcher: the pinned corner is the one
|
|
61
|
+
* edge a resize cannot move.
|
|
62
|
+
*/
|
|
63
|
+
export declare function launcherPlacement(launcher: LauncherBox, panel: Extent, viewport: Extent, margin?: number): LauncherPlacement;
|
|
64
|
+
//# sourceMappingURL=launcher_placement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"launcher_placement.d.ts","sourceRoot":"","sources":["../../src/ui/launcher_placement.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,0CAA0C;AAC1C,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,QAAQ,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B;AAED,wEAAwE;AACxE,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;IAC9B,6CAA6C;IAC7C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;CAChC;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,MAAoB,GAC3B,iBAAiB,CA2CnB"}
|
|
@@ -14,6 +14,17 @@ export interface MessageActionsOptions {
|
|
|
14
14
|
* disagree.
|
|
15
15
|
*/
|
|
16
16
|
text?: () => string;
|
|
17
|
+
/**
|
|
18
|
+
* The rich flavour to copy alongside `text`, as an HTML fragment. Absent
|
|
19
|
+
* means the clipboard gets plain text only, which is what this did before
|
|
20
|
+
* the option existed.
|
|
21
|
+
*
|
|
22
|
+
* It is what makes a copied table paste as a table: a spreadsheet or a chat
|
|
23
|
+
* client reads `text/html` when it is offered and falls back to the plain
|
|
24
|
+
* flavour when it is not, so the two are the same content at two fidelities
|
|
25
|
+
* rather than a choice the caller has to make.
|
|
26
|
+
*/
|
|
27
|
+
html?: () => string;
|
|
17
28
|
/**
|
|
18
29
|
* Report a rating for this message. Absent means no feedback buttons.
|
|
19
30
|
*
|
|
@@ -51,6 +62,23 @@ export declare function attachMessageActions(bubble: HTMLElement, options: Messa
|
|
|
51
62
|
* second thing that looks like one.
|
|
52
63
|
*/
|
|
53
64
|
export declare function messageActionBar(bubble: HTMLElement, strings: UiStrings): HTMLElement;
|
|
54
|
-
/**
|
|
55
|
-
|
|
65
|
+
/**
|
|
66
|
+
* Build one action button, labelled for screen readers rather than by glyph.
|
|
67
|
+
*
|
|
68
|
+
* `icon` is icon markup rather than a text glyph, because the text glyphs these
|
|
69
|
+
* carried are the obscure end of the character set -- the copy mark in
|
|
70
|
+
* particular has no font behind it on most systems, so it rendered as a mark
|
|
71
|
+
* nobody could name on a control small enough that nobody could hit it either.
|
|
72
|
+
*
|
|
73
|
+
* The label is carried three ways, and each has a reader the others miss:
|
|
74
|
+
* `aria-label` for assistive technology, `title` for the browser's own
|
|
75
|
+
* tooltip, and `data-tooltip` for the one this component draws. The last is
|
|
76
|
+
* not redundant with the second -- a `title` never appears on keyboard focus,
|
|
77
|
+
* so without it a keyboard user has no way to see what the control does.
|
|
78
|
+
*
|
|
79
|
+
* The icon sits in its own part, so a host can restyle or replace it. A slot
|
|
80
|
+
* would be the better channel and cannot be used here: these repeat once per
|
|
81
|
+
* message, and a named slot can only be filled once.
|
|
82
|
+
*/
|
|
83
|
+
export declare function messageActionButton(modifier: string, label: string, icon: string): HTMLButtonElement;
|
|
56
84
|
//# sourceMappingURL=message_actions.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message_actions.d.ts","sourceRoot":"","sources":["../../src/ui/message_actions.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"message_actions.d.ts","sourceRoot":"","sources":["../../src/ui/message_actions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAKjD,iDAAiD;AACjD,MAAM,WAAW,qBAAqB;IACpC,yBAAyB;IACzB,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,MAAM,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,qBAAqB,GAAG,IAAI,CAe9F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,GAAG,WAAW,CAmBrF;AAQD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,iBAAiB,CAcnB"}
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Which edges a grip drags. An axis left out is an axis the grip does not
|
|
3
|
+
* move: the left-edge grip is `{ x: "left" }`, the top-right corner is
|
|
4
|
+
* `{ x: "right", y: "top" }`.
|
|
5
|
+
*/
|
|
6
|
+
export interface ResizeGrip {
|
|
7
|
+
readonly x?: "left" | "right";
|
|
8
|
+
readonly y?: "top" | "bottom";
|
|
9
|
+
}
|
|
1
10
|
/** Which edges the layout holds still while the panel changes size. */
|
|
2
11
|
export interface ResizeAnchor {
|
|
3
12
|
/** The horizontal edge that does not move. */
|
|
@@ -7,7 +16,7 @@ export interface ResizeAnchor {
|
|
|
7
16
|
}
|
|
8
17
|
/**
|
|
9
18
|
* What the current placement allows: both axes, width only, or nothing. Which
|
|
10
|
-
*
|
|
19
|
+
* edges a given grip drags is separate, and fixed when the grip is built.
|
|
11
20
|
*/
|
|
12
21
|
export type ResizeAxis = "none" | "width" | "both";
|
|
13
22
|
/** Persisted size, in CSS pixels. Either axis may be absent. */
|
|
@@ -15,7 +24,7 @@ export interface ResizeSize {
|
|
|
15
24
|
readonly width?: number;
|
|
16
25
|
readonly height?: number;
|
|
17
26
|
}
|
|
18
|
-
/** The panel's position on screen
|
|
27
|
+
/** The panel's position on screen, in viewport coordinates. */
|
|
19
28
|
export interface PanelRect {
|
|
20
29
|
readonly left: number;
|
|
21
30
|
readonly top: number;
|
|
@@ -30,43 +39,40 @@ export interface ResizeOptions {
|
|
|
30
39
|
* would survive the host switching to a docked or full-bleed layout.
|
|
31
40
|
*/
|
|
32
41
|
readonly axis: () => ResizeAxis;
|
|
33
|
-
/**
|
|
34
|
-
* Which edges the layout is holding still, measured at the moment of the drag
|
|
35
|
-
* rather than derived from `placement`: a floating panel is pinned
|
|
36
|
-
* bottom-right, while an embedded one goes wherever the host's CSS puts it,
|
|
37
|
-
* so `placement` alone cannot answer the question.
|
|
38
|
-
*/
|
|
39
|
-
readonly anchor: () => ResizeAnchor;
|
|
40
42
|
/** The panel's current bounding box. */
|
|
41
43
|
readonly rect: () => PanelRect;
|
|
42
|
-
/** Apply a
|
|
43
|
-
readonly apply: (
|
|
44
|
+
/** Apply a box (the host decides what that costs in properties). */
|
|
45
|
+
readonly apply: (box: PanelRect) => void;
|
|
44
46
|
/**
|
|
45
47
|
* Called once per completed resize, for persistence: on `pointerup` for a
|
|
46
48
|
* drag, and when the key comes up (or focus leaves the handle) for a key
|
|
47
49
|
* press. Never per pointer move, and never per key repeat.
|
|
48
50
|
*/
|
|
49
|
-
readonly commit: (
|
|
51
|
+
readonly commit: (box: PanelRect) => void;
|
|
50
52
|
/** Accessible label. */
|
|
51
53
|
readonly label: string;
|
|
52
54
|
}
|
|
53
55
|
/**
|
|
54
|
-
* A drag handle that resizes the chat panel.
|
|
56
|
+
* A drag handle that resizes the chat panel from one edge or corner.
|
|
55
57
|
*
|
|
56
|
-
*
|
|
58
|
+
* The rule that keeps it correct is that **the edge a grip does not drag is the
|
|
59
|
+
* one that stays put**. That is the whole model, and it is what lets the same
|
|
60
|
+
* code serve all eight grips: the left-edge grip moves the left edge and holds
|
|
61
|
+
* the right, the right-edge grip does the reverse, a corner does both axes.
|
|
57
62
|
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
* so an inline dimension would outrank and fight them — a sidebar would keep
|
|
65
|
-
* its dragged width after switching to fullscreen. Writing the property
|
|
66
|
-
* leaves placement the final say.
|
|
63
|
+
* Which edge the *layout* pins is a different question and is deliberately not
|
|
64
|
+
* asked here. It matters only to the host, which has to rewrite its own
|
|
65
|
+
* position when a grip drags the very edge the layout was holding still --
|
|
66
|
+
* dragging the pinned edge of a panel is a move as much as a resize. The
|
|
67
|
+
* handle reports the box it wants; what that costs in CSS properties is the
|
|
68
|
+
* host's problem.
|
|
67
69
|
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
+
* An earlier version took the anchor and derived the direction from it, which
|
|
71
|
+
* is where the asymmetries lived: whether an arrow key grew or shrank the
|
|
72
|
+
* panel depended on which corner the single grip had been placed on. With the
|
|
73
|
+
* grip stated outright, an arrow simply moves the edge it names.
|
|
70
74
|
*/
|
|
71
|
-
export declare function createResizeHandle(options: ResizeOptions): HTMLDivElement;
|
|
75
|
+
export declare function createResizeHandle(grip: ResizeGrip, options: ResizeOptions): HTMLDivElement;
|
|
76
|
+
/** The hyphenated name of a grip, for its class and part. */
|
|
77
|
+
export declare function gripName(grip: ResizeGrip): string;
|
|
72
78
|
//# sourceMappingURL=resize_handle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize_handle.d.ts","sourceRoot":"","sources":["../../src/ui/resize_handle.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,4CAA4C;IAC5C,QAAQ,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,gEAAgE;AAChE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED
|
|
1
|
+
{"version":3,"file":"resize_handle.d.ts","sourceRoot":"","sources":["../../src/ui/resize_handle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC/B;AAED,uEAAuE;AACvE,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,4CAA4C;IAC5C,QAAQ,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD,gEAAgE;AAChE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,+DAA+D;AAC/D,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,yDAAyD;AACzD,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,UAAU,CAAC;IAChC,wCAAwC;IACxC,QAAQ,CAAC,IAAI,EAAE,MAAM,SAAS,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,wBAAwB;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAUD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,GAAG,cAAc,CAiG3F;AAUD,6DAA6D;AAC7D,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAEjD"}
|