react-cheminfo 0.46.0 → 0.47.0
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/lib/chart/core/chartDomain.d.ts +14 -0
- package/lib/chart/core/chartDomain.d.ts.map +1 -1
- package/lib/chart/core/chartDomain.js +1 -0
- package/lib/chart/core/chartDomain.js.map +1 -1
- package/lib/chart/core/selectionGeometry.d.ts +4 -2
- package/lib/chart/core/selectionGeometry.d.ts.map +1 -1
- package/lib/chart/core/selectionGeometry.js +4 -2
- package/lib/chart/core/selectionGeometry.js.map +1 -1
- package/lib/chart/core/zoomDomain.d.ts +11 -1
- package/lib/chart/core/zoomDomain.d.ts.map +1 -1
- package/lib/chart/core/zoomDomain.js +25 -5
- package/lib/chart/core/zoomDomain.js.map +1 -1
- package/lib/chart/ui/chartGestures.d.ts +26 -1
- package/lib/chart/ui/chartGestures.d.ts.map +1 -1
- package/lib/chart/ui/chartGestures.js +21 -0
- package/lib/chart/ui/chartGestures.js.map +1 -1
- package/lib/chart/ui/index.d.ts +1 -1
- package/lib/chart/ui/index.d.ts.map +1 -1
- package/lib/chart/ui/index.js +1 -1
- package/lib/chart/ui/index.js.map +1 -1
- package/lib/chart/ui/useChartZoom.d.ts.map +1 -1
- package/lib/chart/ui/useChartZoom.js +17 -1
- package/lib/chart/ui/useChartZoom.js.map +1 -1
- package/lib/i18n/core/chromeCatalog.d.ts +1 -1
- package/lib/i18n/core/chromeCatalog.d.ts.map +1 -1
- package/lib/ir/core/irMode.d.ts.map +1 -1
- package/lib/ir/core/irMode.js +6 -1
- package/lib/ir/core/irMode.js.map +1 -1
- package/lib/locales/de.json +1 -0
- package/lib/locales/en.json +1 -0
- package/lib/locales/es.json +1 -0
- package/lib/locales/fr.json +1 -0
- package/lib/locales/it.json +1 -0
- package/lib/periodic/core/index.d.ts +1 -1
- package/lib/periodic/core/index.d.ts.map +1 -1
- package/lib/periodic/core/layout.d.ts +11 -0
- package/lib/periodic/core/layout.d.ts.map +1 -1
- package/lib/periodic/core/layout.js.map +1 -1
- package/lib/periodic/ui/ElementCell.d.ts +6 -2
- package/lib/periodic/ui/ElementCell.d.ts.map +1 -1
- package/lib/periodic/ui/ElementCell.js +2 -2
- package/lib/periodic/ui/ElementCell.js.map +1 -1
- package/lib/periodic/ui/PeriodicTable.d.ts +12 -3
- package/lib/periodic/ui/PeriodicTable.d.ts.map +1 -1
- package/lib/periodic/ui/PeriodicTable.js +5 -3
- package/lib/periodic/ui/PeriodicTable.js.map +1 -1
- package/lib/periodic/ui/PeriodicTableChrome.d.ts +13 -3
- package/lib/periodic/ui/PeriodicTableChrome.d.ts.map +1 -1
- package/lib/periodic/ui/PeriodicTableChrome.js +18 -6
- package/lib/periodic/ui/PeriodicTableChrome.js.map +1 -1
- package/lib/split/ui/SplitColumn.d.ts +30 -0
- package/lib/split/ui/SplitColumn.d.ts.map +1 -0
- package/lib/split/ui/SplitColumn.js +20 -0
- package/lib/split/ui/SplitColumn.js.map +1 -0
- package/lib/split/ui/SplitRow.d.ts +15 -53
- package/lib/split/ui/SplitRow.d.ts.map +1 -1
- package/lib/split/ui/SplitRow.js +9 -90
- package/lib/split/ui/SplitRow.js.map +1 -1
- package/lib/split/ui/index.d.ts +3 -0
- package/lib/split/ui/index.d.ts.map +1 -1
- package/lib/split/ui/index.js +1 -0
- package/lib/split/ui/index.js.map +1 -1
- package/lib/split/ui/splitPanes.d.ts +73 -0
- package/lib/split/ui/splitPanes.d.ts.map +1 -0
- package/lib/split/ui/splitPanes.js +128 -0
- package/lib/split/ui/splitPanes.js.map +1 -0
- package/package.json +1 -1
- package/src/chart/core/chartDomain.ts +15 -0
- package/src/chart/core/selectionGeometry.ts +4 -2
- package/src/chart/core/zoomDomain.ts +37 -5
- package/src/chart/ui/chartGestures.ts +41 -1
- package/src/chart/ui/index.ts +1 -1
- package/src/chart/ui/useChartZoom.ts +25 -1
- package/src/ir/core/irMode.ts +6 -1
- package/src/locales/de.json +1 -0
- package/src/locales/en.json +1 -0
- package/src/locales/es.json +1 -0
- package/src/locales/fr.json +1 -0
- package/src/locales/it.json +1 -0
- package/src/periodic/core/index.ts +1 -1
- package/src/periodic/core/layout.ts +12 -0
- package/src/periodic/ui/ElementCell.tsx +8 -4
- package/src/periodic/ui/PeriodicTable.tsx +23 -5
- package/src/periodic/ui/PeriodicTableChrome.tsx +28 -4
- package/src/split/ui/SplitColumn.tsx +36 -0
- package/src/split/ui/SplitRow.tsx +17 -208
- package/src/split/ui/index.ts +3 -0
- package/src/split/ui/splitPanes.tsx +267 -0
package/lib/locales/fr.json
CHANGED
|
@@ -266,6 +266,7 @@
|
|
|
266
266
|
"periodic.table": "Tableau périodique",
|
|
267
267
|
"periodic.group": "Groupe {group}",
|
|
268
268
|
"periodic.period": "Période {period}",
|
|
269
|
+
"periodic.allElements": "Tous les éléments",
|
|
269
270
|
"periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
|
|
270
271
|
"periodic.category.alkali-metal": "Métal alcalin",
|
|
271
272
|
"periodic.category.alkaline-earth-metal": "Alcalino-terreux",
|
package/lib/locales/it.json
CHANGED
|
@@ -412,6 +412,7 @@
|
|
|
412
412
|
"periodic.table": "Tavola periodica",
|
|
413
413
|
"periodic.group": "Gruppo {group}",
|
|
414
414
|
"periodic.period": "Periodo {period}",
|
|
415
|
+
"periodic.allElements": "Tutti gli elementi",
|
|
415
416
|
"periodic.cellLabel": "{name} ({symbol}, Z = {atomicNumber})",
|
|
416
417
|
"periodic.category.alkali-metal": "Metallo alcalino",
|
|
417
418
|
"periodic.category.alkaline-earth-metal": "Alcalino terroso",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export type { ElementBlock, ElementCategory, PeriodicElement, } from './elements.ts';
|
|
2
2
|
export { PERIODIC_ELEMENTS, elementByAtomicNumber, elementBySymbol, } from './elements.ts';
|
|
3
3
|
export { CATEGORY_LABELS, CATEGORY_ORDER, CATEGORY_SWATCHES, UNKNOWN_SWATCH, categorySwatch, } from './categories.ts';
|
|
4
|
-
export type { Cell, ElementRange } from './layout.ts';
|
|
4
|
+
export type { Cell, ElementPick, ElementRange } from './layout.ts';
|
|
5
5
|
export { COLUMN_COUNT, EMPTY_BLOCK, INNER_TRANSITION_MARKERS, INNER_TRANSITION_ROWS, ROW_COUNT, cellOf, elementByArrowKey, placedElements, } from './layout.ts';
|
|
6
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/periodic/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/periodic/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,eAAe,EACf,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EACL,YAAY,EACZ,WAAW,EACX,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EACT,MAAM,EACN,iBAAiB,EACjB,cAAc,GACf,MAAM,aAAa,CAAC"}
|
|
@@ -24,6 +24,17 @@ export interface ElementRange {
|
|
|
24
24
|
*/
|
|
25
25
|
additive: boolean;
|
|
26
26
|
}
|
|
27
|
+
/** One element, and what the click that picked it asked for. */
|
|
28
|
+
export interface ElementPick {
|
|
29
|
+
/**
|
|
30
|
+
* Whether the click asked for this element on top of what was already
|
|
31
|
+
* chosen — Cmd on a Mac, Ctrl elsewhere — rather than in place of it. A tool
|
|
32
|
+
* whose plain click already means something of its own — reading one element
|
|
33
|
+
* into a card — tells the two apart by it, so one table both reads an
|
|
34
|
+
* element and builds a set of them.
|
|
35
|
+
*/
|
|
36
|
+
additive: boolean;
|
|
37
|
+
}
|
|
27
38
|
/** A cell of the grid, one-based as CSS grid lines are. */
|
|
28
39
|
export interface Cell {
|
|
29
40
|
/** Grid column, one-based. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGtE,0DAA0D;AAC1D,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,2DAA2D;AAC3D,MAAM,WAAW,IAAI;IACnB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,4BAA4B;AAC5B,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,uEAAuE;AACvE,eAAO,MAAM,SAAS,KAAK,CAAC;AAc5B;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAAC;IAC9C,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC,CAUD;AAOD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE;IACxB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;CACmC,CAAC;AAEtD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,EAAE,aAAa,CAAC;IACnD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAGA,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAGA,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,eAAe,GAAG,IAAI,CAgBxB"}
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGtE,0DAA0D;AAC1D,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,gEAAgE;AAChE,MAAM,WAAW,WAAW;IAC1B;;;;;;OAMG;IACH,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,2DAA2D;AAC3D,MAAM,WAAW,IAAI;IACnB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,4BAA4B;AAC5B,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,uEAAuE;AACvE,eAAO,MAAM,SAAS,KAAK,CAAC;AAc5B;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAAC;IAC9C,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC,CAUD;AAOD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE;IACxB,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;CACmC,CAAC;AAEtD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,EAAE,aAAa,CAAC;IACnD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAGA,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAGA,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,eAAe,GAAG,IAAI,CAgBxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"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"}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
*/
|
|
13
13
|
import type { ReactElement } from 'react';
|
|
14
14
|
import type { Swatch } from '../../color/core/interpolate.ts';
|
|
15
|
+
import type { ElementPick } from '../core/layout.ts';
|
|
15
16
|
import type { DetailType } from './cellType.ts';
|
|
16
17
|
/** What {@link ElementCell} needs to draw one element. */
|
|
17
18
|
export interface ElementCellProps {
|
|
@@ -27,8 +28,11 @@ export interface ElementCellProps {
|
|
|
27
28
|
column: number;
|
|
28
29
|
/** Row of the grid, one-based. */
|
|
29
30
|
row: number;
|
|
30
|
-
/**
|
|
31
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Called with the symbol when the cell is chosen, and with what the click
|
|
33
|
+
* asked for: a plain one, or an additive one — Cmd or Ctrl held.
|
|
34
|
+
*/
|
|
35
|
+
onSelect: (symbol: string, pick: ElementPick) => void;
|
|
32
36
|
/**
|
|
33
37
|
* Third line, under the symbol: the value the tool is showing.
|
|
34
38
|
* @default '' — nothing is written
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementCell.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"ElementCell.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAahD,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAqGjE"}
|
|
@@ -21,8 +21,8 @@ export function ElementCell(props) {
|
|
|
21
21
|
name,
|
|
22
22
|
symbol,
|
|
23
23
|
atomicNumber,
|
|
24
|
-
}), "aria-pressed": isSelected, onClick: () => {
|
|
25
|
-
onSelect(symbol);
|
|
24
|
+
}), "aria-pressed": isSelected, onClick: (event) => {
|
|
25
|
+
onSelect(symbol, { additive: event.metaKey || event.ctrlKey });
|
|
26
26
|
}, onPointerEnter: () => {
|
|
27
27
|
setIsHovered(true);
|
|
28
28
|
onHover?.(symbol);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
import type { ReactElement, ReactNode } from 'react';
|
|
13
13
|
import type { Swatch } from '../../color/core/interpolate.ts';
|
|
14
14
|
import type { PeriodicElement } from '../core/elements.ts';
|
|
15
|
-
import type { ElementRange } from '../core/layout.ts';
|
|
15
|
+
import type { ElementPick, ElementRange } from '../core/layout.ts';
|
|
16
16
|
/** What {@link PeriodicTable} needs. */
|
|
17
17
|
export interface PeriodicTableProps {
|
|
18
18
|
/**
|
|
@@ -22,10 +22,12 @@ export interface PeriodicTableProps {
|
|
|
22
22
|
selected?: string;
|
|
23
23
|
/**
|
|
24
24
|
* Called with the symbol of the element that was clicked, and by the arrow
|
|
25
|
-
* keys.
|
|
25
|
+
* keys. The pick says whether the click was additive — Cmd or Ctrl held — so
|
|
26
|
+
* a tool whose plain click already reads one element into a card can let the
|
|
27
|
+
* same table build a set of them.
|
|
26
28
|
* @default undefined — the table is a figure rather than a control
|
|
27
29
|
*/
|
|
28
|
-
onSelect?: (symbol: string) => void;
|
|
30
|
+
onSelect?: (symbol: string, pick: ElementPick) => void;
|
|
29
31
|
/**
|
|
30
32
|
* The colour each cell takes.
|
|
31
33
|
* @default the family colour
|
|
@@ -79,6 +81,13 @@ export interface PeriodicTableProps {
|
|
|
79
81
|
* @default undefined
|
|
80
82
|
*/
|
|
81
83
|
onSelectRange?: (range: ElementRange) => void;
|
|
84
|
+
/**
|
|
85
|
+
* Called when the corner where the two header strips meet is clicked, which
|
|
86
|
+
* is how a reader takes the whole table back. Without it the corner stays
|
|
87
|
+
* empty.
|
|
88
|
+
* @default undefined
|
|
89
|
+
*/
|
|
90
|
+
onSelectAll?: () => void;
|
|
82
91
|
/**
|
|
83
92
|
* Whether to draw the family legend under the grid.
|
|
84
93
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAI9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAGV,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAI9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAuBnE,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvE;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAoHrE"}
|
|
@@ -15,7 +15,7 @@ import { UNIT_PROPERTY, ofWidth, unitValue } from "./unit.js";
|
|
|
15
15
|
* @returns The grid, its optional chrome, and its optional legend.
|
|
16
16
|
*/
|
|
17
17
|
export function PeriodicTable(props) {
|
|
18
|
-
const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, shellsOf, isIncluded, inset, headers = false, onSelectRange, legend = false, markers = true, keyboard = true, onHover, className, } = props;
|
|
18
|
+
const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, shellsOf, isIncluded, inset, headers = false, onSelectRange, onSelectAll, legend = false, markers = true, keyboard = true, onHover, className, } = props;
|
|
19
19
|
const t = useChromeT();
|
|
20
20
|
const rootRef = useRef(null);
|
|
21
21
|
const gridRef = useRef(null);
|
|
@@ -48,7 +48,7 @@ export function PeriodicTable(props) {
|
|
|
48
48
|
return;
|
|
49
49
|
event.preventDefault();
|
|
50
50
|
cameFromKeyRef.current = true;
|
|
51
|
-
onSelect(next.symbol);
|
|
51
|
+
onSelect(next.symbol, PLAIN_PICK);
|
|
52
52
|
}
|
|
53
53
|
// One size for the whole table rather than one per cell: a column of values
|
|
54
54
|
// written at eleven sizes is read as eleven things, and a name shrunk to a
|
|
@@ -67,7 +67,7 @@ export function PeriodicTable(props) {
|
|
|
67
67
|
const reserved = deepest === 0 ? 0 : SHELLS_RESERVED;
|
|
68
68
|
const type = detailType(widths, reserved);
|
|
69
69
|
const shellSize = shellFontSize(deepest);
|
|
70
|
-
return (_jsxs("div", { ref: rootRef, className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers), onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, inset === undefined ? null : (_jsx("div", { style: insetStyle(offset), children: inset })), markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placed.map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), detailType: type, shells: shellsOf?.(element), shellSize: shellSize, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
|
|
70
|
+
return (_jsxs("div", { ref: rootRef, className: className, style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": t('periodic.table'), "data-testid": "periodic-table", style: gridStyle(headers), onKeyDown: handleKeyDown, children: [headers ? (_jsx(HeaderStrips, { onSelectRange: onSelectRange, onSelectAll: onSelectAll })) : null, inset === undefined ? null : (_jsx("div", { style: insetStyle(offset), children: inset })), markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placed.map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), detailType: type, shells: shellsOf?.(element), shellSize: shellSize, swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
|
|
71
71
|
}
|
|
72
72
|
/**
|
|
73
73
|
* Where what the caller writes in the empty block is placed.
|
|
@@ -98,6 +98,8 @@ function defaultSwatchOf(element) {
|
|
|
98
98
|
function defaultNameOf(element) {
|
|
99
99
|
return element.name;
|
|
100
100
|
}
|
|
101
|
+
/** The arrow keys walk the table to read it; they never add to a set. */
|
|
102
|
+
const PLAIN_PICK = { additive: false };
|
|
101
103
|
function noop() {
|
|
102
104
|
// A table with no `onSelect` is a figure; its cells stay buttons so the
|
|
103
105
|
// keyboard and a screen reader still reach every element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodicTable.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EACL,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,cAAc,GACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAChD,OAAO,EACL,YAAY,EACZ,sBAAsB,GACvB,MAAM,0BAA2B,CAAC;AACnC,OAAO,EACL,SAAS,EACT,eAAe,EACf,UAAU,EACV,aAAa,EACb,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"PeriodicTable.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,14 +12,24 @@ interface HeaderStripsProps {
|
|
|
12
12
|
* @default undefined
|
|
13
13
|
*/
|
|
14
14
|
onSelectRange?: (range: ElementRange) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Called when the corner where the two strips meet is clicked. The corner of
|
|
17
|
+
* a spreadsheet takes everything, and a table whose rows and columns are one
|
|
18
|
+
* click each owes the same for the whole of it. Without it the corner stays
|
|
19
|
+
* empty.
|
|
20
|
+
* @default undefined
|
|
21
|
+
*/
|
|
22
|
+
onSelectAll?: () => void;
|
|
15
23
|
}
|
|
16
24
|
/**
|
|
17
|
-
* The 1–18 strip along the top
|
|
25
|
+
* The 1–18 strip along the top, the 1–7 strip down the left, and the corner
|
|
26
|
+
* where they meet.
|
|
18
27
|
*
|
|
19
28
|
* They are buttons when the table takes a range: "plot period 3" is one click
|
|
20
|
-
* there and eight on the cells.
|
|
29
|
+
* there and eight on the cells. The corner takes the whole table, which is the
|
|
30
|
+
* gesture a spreadsheet has taught everybody.
|
|
21
31
|
* @param props - See {@link HeaderStripsProps}.
|
|
22
|
-
* @returns The two strips,
|
|
32
|
+
* @returns The two strips, the corner, and the inner-transition period numbers.
|
|
23
33
|
*/
|
|
24
34
|
export declare function HeaderStrips(props: HeaderStripsProps): ReactElement;
|
|
25
35
|
/** What {@link InnerTransitionMarkers} needs. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodicTableChrome.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAStD,uCAAuC;AACvC,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"PeriodicTableChrome.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAStD,uCAAuC;AACvC,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2EnE;AAED,iDAAiD;AACjD,UAAU,2BAA2B;IACnC,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,YAAY,CAmBd"}
|
|
@@ -4,15 +4,17 @@ import { TOKEN } from "../../tokens/core/familyTokens.js";
|
|
|
4
4
|
import { COLUMN_COUNT, INNER_TRANSITION_MARKERS, INNER_TRANSITION_ROWS, } from "../core/layout.js";
|
|
5
5
|
import { ofWidth } from "./unit.js";
|
|
6
6
|
/**
|
|
7
|
-
* The 1–18 strip along the top
|
|
7
|
+
* The 1–18 strip along the top, the 1–7 strip down the left, and the corner
|
|
8
|
+
* where they meet.
|
|
8
9
|
*
|
|
9
10
|
* They are buttons when the table takes a range: "plot period 3" is one click
|
|
10
|
-
* there and eight on the cells.
|
|
11
|
+
* there and eight on the cells. The corner takes the whole table, which is the
|
|
12
|
+
* gesture a spreadsheet has taught everybody.
|
|
11
13
|
* @param props - See {@link HeaderStripsProps}.
|
|
12
|
-
* @returns The two strips,
|
|
14
|
+
* @returns The two strips, the corner, and the inner-transition period numbers.
|
|
13
15
|
*/
|
|
14
16
|
export function HeaderStrips(props) {
|
|
15
|
-
const { onSelectRange } = props;
|
|
17
|
+
const { onSelectRange, onSelectAll } = props;
|
|
16
18
|
const t = useChromeT();
|
|
17
19
|
const groups = [];
|
|
18
20
|
for (let group = 1; group <= COLUMN_COUNT; group++) {
|
|
@@ -36,7 +38,17 @@ export function HeaderStrips(props) {
|
|
|
36
38
|
});
|
|
37
39
|
}) }, `period-${String(period)}`));
|
|
38
40
|
}
|
|
39
|
-
return (_jsxs(_Fragment, { children: [
|
|
41
|
+
return (_jsxs(_Fragment, { children: [onSelectAll === undefined ? null : (_jsx(HeaderCell
|
|
42
|
+
// The glyph points into the grid it takes, as a spreadsheet's does.
|
|
43
|
+
// It is a mark rather than a word because the corner is a
|
|
44
|
+
// seventeenth of the table's width, and the word differs in every
|
|
45
|
+
// language the chrome speaks.
|
|
46
|
+
, {
|
|
47
|
+
// The glyph points into the grid it takes, as a spreadsheet's does.
|
|
48
|
+
// It is a mark rather than a word because the corner is a
|
|
49
|
+
// seventeenth of the table's width, and the word differs in every
|
|
50
|
+
// language the chrome speaks.
|
|
51
|
+
label: "\u25E2", title: t('periodic.allElements'), column: 1, row: 1, onClick: onSelectAll })), groups, periods, INNER_TRANSITION_ROWS.map(({ row, period }) => (_jsx("div", { style: { ...headerStyle, gridColumn: 1, gridRow: row + 1 }, children: period }, `inner-${String(row)}`)))] }));
|
|
40
52
|
}
|
|
41
53
|
/**
|
|
42
54
|
* The two cells the lanthanoids and the actinoids were lifted out of.
|
|
@@ -66,7 +78,7 @@ function HeaderCell(props) {
|
|
|
66
78
|
const style = { ...headerStyle, gridColumn: column, gridRow: row };
|
|
67
79
|
if (onClick === undefined)
|
|
68
80
|
return _jsx("div", { style: style, children: label });
|
|
69
|
-
return (_jsx("button", { type: "button", "aria-label": title, onClick: onClick, style: { ...style, ...headerButtonStyle }, children: label }));
|
|
81
|
+
return (_jsx("button", { type: "button", "aria-label": title, title: title, onClick: onClick, style: { ...style, ...headerButtonStyle }, children: label }));
|
|
70
82
|
}
|
|
71
83
|
const headerStyle = {
|
|
72
84
|
alignItems: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodicTableChrome.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EACL,YAAY,EACZ,wBAAwB,EACxB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"PeriodicTableChrome.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Two figures one above the other, with a splitter between them and the share
|
|
3
|
+
* each takes written into the address.
|
|
4
|
+
*
|
|
5
|
+
* The body is `splitPanes.tsx`, which `<SplitRow>` shares; its header is where
|
|
6
|
+
* the design is written down.
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactElement } from 'react';
|
|
9
|
+
import type { SplitPanesProps } from './splitPanes.tsx';
|
|
10
|
+
/**
|
|
11
|
+
* Props of {@link SplitColumn}. `start` is the top pane, `end` the bottom one,
|
|
12
|
+
* and `stackBelow` a height.
|
|
13
|
+
*/
|
|
14
|
+
export type SplitColumnProps = SplitPanesProps;
|
|
15
|
+
/**
|
|
16
|
+
* Two panes sharing a column, divided where the address says.
|
|
17
|
+
*
|
|
18
|
+
* **A share needs a height to be a share of.** Put this inside a box that has
|
|
19
|
+
* one — a workbench pane, a page that fills the viewport — not inside an
|
|
20
|
+
* ordinary page column, whose height is whatever its content comes to. Given
|
|
21
|
+
* no height to divide, it measures nothing, says nothing about it, and simply
|
|
22
|
+
* stacks the two panes with no splitter, which is what an ordinary page wanted
|
|
23
|
+
* anyway.
|
|
24
|
+
*
|
|
25
|
+
* @param props - See {@link SplitColumnProps}.
|
|
26
|
+
* @returns The two panes with the splitter between them, the two stacked where
|
|
27
|
+
* there is no height to divide, or whichever one a link left, alone.
|
|
28
|
+
*/
|
|
29
|
+
export declare function SplitColumn(props: SplitColumnProps): ReactElement | null;
|
|
30
|
+
//# sourceMappingURL=SplitColumn.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SplitColumn.d.ts","sourceRoot":"","sources":["../../../src/split/ui/SplitColumn.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAExE"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { SplitPanes } from "./splitPanes.js";
|
|
3
|
+
/**
|
|
4
|
+
* Two panes sharing a column, divided where the address says.
|
|
5
|
+
*
|
|
6
|
+
* **A share needs a height to be a share of.** Put this inside a box that has
|
|
7
|
+
* one — a workbench pane, a page that fills the viewport — not inside an
|
|
8
|
+
* ordinary page column, whose height is whatever its content comes to. Given
|
|
9
|
+
* no height to divide, it measures nothing, says nothing about it, and simply
|
|
10
|
+
* stacks the two panes with no splitter, which is what an ordinary page wanted
|
|
11
|
+
* anyway.
|
|
12
|
+
*
|
|
13
|
+
* @param props - See {@link SplitColumnProps}.
|
|
14
|
+
* @returns The two panes with the splitter between them, the two stacked where
|
|
15
|
+
* there is no height to divide, or whichever one a link left, alone.
|
|
16
|
+
*/
|
|
17
|
+
export function SplitColumn(props) {
|
|
18
|
+
return _jsx(SplitPanes, { direction: "vertical", ...props });
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=SplitColumn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SplitColumn.js","sourceRoot":"","sources":["../../../src/split/ui/SplitColumn.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAQ9C;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,KAAC,UAAU,IAAC,SAAS,EAAC,UAAU,KAAK,KAAK,GAAI,CAAC;AACxD,CAAC"}
|
|
@@ -2,62 +2,24 @@
|
|
|
2
2
|
* Two figures side by side, with a splitter between them and the share each
|
|
3
3
|
* takes written into the address.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* is no room for two columns at all, so the panes stack and no splitter is
|
|
14
|
-
* drawn; and a link that hid everything one pane holds leaves the other the
|
|
15
|
-
* whole width rather than a share of it.
|
|
16
|
-
*
|
|
17
|
-
* The bar itself is react-science's `SplitPane`, and it keeps react-science's
|
|
18
|
-
* look — barely visible on purpose, found by the pointer that changes over it
|
|
19
|
-
* rather than by the eye. All `chrome.css` says about it is that eleven pixels
|
|
20
|
-
* is more gutter than two figures need.
|
|
5
|
+
* The body is `splitPanes.tsx`, which `<SplitColumn>` shares; its header is
|
|
6
|
+
* where the design is written down.
|
|
7
|
+
*/
|
|
8
|
+
import type { ReactElement } from 'react';
|
|
9
|
+
import type { SplitPanesProps } from './splitPanes.tsx';
|
|
10
|
+
/**
|
|
11
|
+
* Props of {@link SplitRow}. `start` is the left-hand pane, `end` the
|
|
12
|
+
* right-hand one, and `stackBelow` a width.
|
|
21
13
|
*/
|
|
22
|
-
|
|
23
|
-
import type { SplitRange } from '../core/split.ts';
|
|
24
|
-
/** Props of {@link SplitRow}. */
|
|
25
|
-
export interface SplitRowProps extends SplitRange {
|
|
26
|
-
/**
|
|
27
|
-
* Share of the row the first pane takes, as a whole percentage, or `null`
|
|
28
|
-
* while the page sits at {@link SplitRowProps.defaultRatio}.
|
|
29
|
-
*/
|
|
30
|
-
ratio: number | null;
|
|
31
|
-
/** The share the row opens at when the address names none. */
|
|
32
|
-
defaultRatio: number;
|
|
33
|
-
/**
|
|
34
|
-
* Take the share a drag came to rest at, or `null` when the splitter was
|
|
35
|
-
* double-clicked back to the default.
|
|
36
|
-
*/
|
|
37
|
-
onRatio: (ratio: number | null) => void;
|
|
38
|
-
/** The left-hand pane, or `null` when a link left nothing in it. */
|
|
39
|
-
start: ReactNode;
|
|
40
|
-
/** The right-hand pane, or `null` when a link left nothing in it. */
|
|
41
|
-
end: ReactNode;
|
|
42
|
-
/**
|
|
43
|
-
* The narrowest row that is still split; under it the two panes stack.
|
|
44
|
-
* @default 860
|
|
45
|
-
*/
|
|
46
|
-
stackBelow?: number;
|
|
47
|
-
/**
|
|
48
|
-
* The gutter each pane keeps beside the splitter, in pixels, so neither
|
|
49
|
-
* figure is read against its edge.
|
|
50
|
-
* @default 6
|
|
51
|
-
*/
|
|
52
|
-
gutter?: number;
|
|
53
|
-
/**
|
|
54
|
-
* The gap between the two panes once they have stacked, in pixels.
|
|
55
|
-
* @default 16
|
|
56
|
-
*/
|
|
57
|
-
stackedGap?: number;
|
|
58
|
-
}
|
|
14
|
+
export type SplitRowProps = SplitPanesProps;
|
|
59
15
|
/**
|
|
60
16
|
* Two panes sharing a row, divided where the address says.
|
|
17
|
+
*
|
|
18
|
+
* **Set `max` where the first pane stops being able to use the room.** A pane
|
|
19
|
+
* of forms dragged past about half the row does not grow: the labels stay put
|
|
20
|
+
* and the fields stretch to a width nobody types into, so the room becomes
|
|
21
|
+
* empty card. The figure beside it is what the drag exists to enlarge.
|
|
22
|
+
*
|
|
61
23
|
* @param props - See {@link SplitRowProps}.
|
|
62
24
|
* @returns The two panes with the splitter between them, the two stacked on a
|
|
63
25
|
* narrow screen, or whichever one a link left on the page, alone.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitRow.d.ts","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"SplitRow.d.ts","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,eAAe,CAAC;AAE5C;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CAElE"}
|
package/lib/split/ui/SplitRow.js
CHANGED
|
@@ -1,99 +1,18 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import {
|
|
3
|
-
import { SplitPane } from 'react-science/ui';
|
|
4
|
-
import { useResizeObserver } from "../../hooks/ui/useResizeObserver.js";
|
|
5
|
-
import { clampSplit } from "../core/split.js";
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { SplitPanes } from "./splitPanes.js";
|
|
6
3
|
/**
|
|
7
4
|
* Two panes sharing a row, divided where the address says.
|
|
5
|
+
*
|
|
6
|
+
* **Set `max` where the first pane stops being able to use the room.** A pane
|
|
7
|
+
* of forms dragged past about half the row does not grow: the labels stay put
|
|
8
|
+
* and the fields stretch to a width nobody types into, so the room becomes
|
|
9
|
+
* empty card. The figure beside it is what the drag exists to enlarge.
|
|
10
|
+
*
|
|
8
11
|
* @param props - See {@link SplitRowProps}.
|
|
9
12
|
* @returns The two panes with the splitter between them, the two stacked on a
|
|
10
13
|
* narrow screen, or whichever one a link left on the page, alone.
|
|
11
14
|
*/
|
|
12
15
|
export function SplitRow(props) {
|
|
13
|
-
|
|
14
|
-
const row = useRef(null);
|
|
15
|
-
const [width, setWidth] = useState(windowWidth);
|
|
16
|
-
// The share under the pointer, which is not the one in the address: a drag
|
|
17
|
-
// reports every pixel it crosses, and the address is rewritten once, where
|
|
18
|
-
// the splitter is let go.
|
|
19
|
-
const [dragged, setDragged] = useState(null);
|
|
20
|
-
useResizeObserver(row, (size) => {
|
|
21
|
-
setWidth(size.width);
|
|
22
|
-
});
|
|
23
|
-
if (start === null && end === null)
|
|
24
|
-
return null;
|
|
25
|
-
const stacked = start === null || end === null || width < stackBelow;
|
|
26
|
-
const startPane = start === null ? null : (_jsx("div", { "data-testid": "split-start", style: stacked ? STACKED_PANE : paneStyle('start', gutter), children: start }));
|
|
27
|
-
const endPane = end === null ? null : (_jsx("div", { "data-testid": "split-end", style: stacked ? STACKED_PANE : paneStyle('end', gutter), children: end }));
|
|
28
|
-
if (stacked) {
|
|
29
|
-
return (_jsxs("div", { ref: row, style: { ...STACK, gap: stackedGap }, children: [startPane, endPane] }));
|
|
30
|
-
}
|
|
31
|
-
const share = clampSplit(dragged ?? ratio ?? defaultRatio, { min, max });
|
|
32
|
-
return (_jsx("div", { ref: row, className: "split-row", children: _jsxs(SplitPane, { direction: "horizontal", controlledSide: "start", size: `${share}%`,
|
|
33
|
-
// Held open, so the only layout a visitor can reach is one the address
|
|
34
|
-
// describes: left to itself a double click collapses a pane, and a link
|
|
35
|
-
// shared from there would open with the pane back. The double click is
|
|
36
|
-
// answered here instead, by returning to the page's own share.
|
|
37
|
-
open: true, onOpenChange: () => {
|
|
38
|
-
setDragged(null);
|
|
39
|
-
onRatio(null);
|
|
40
|
-
}, onSizeChange: (asked) => {
|
|
41
|
-
setDragged(shareOf(asked, share, { min, max }));
|
|
42
|
-
}, onResize: (asked) => {
|
|
43
|
-
const rested = shareOf(asked, share, { min, max });
|
|
44
|
-
setDragged(null);
|
|
45
|
-
onRatio(rested);
|
|
46
|
-
}, children: [startPane, endPane] }) }));
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* The share a splitter asked for.
|
|
50
|
-
* @param asked - What it reported, a percentage because that is what it was
|
|
51
|
-
* given.
|
|
52
|
-
* @param current - The share in force, kept when the report is not a number.
|
|
53
|
-
* @param range - The range this row is divided in.
|
|
54
|
-
* @returns A whole percentage inside it.
|
|
55
|
-
*/
|
|
56
|
-
function shareOf(asked, current, range) {
|
|
57
|
-
const value = Number.parseFloat(asked);
|
|
58
|
-
return Number.isFinite(value) ? clampSplit(value, range) : current;
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* How wide the window is, which is what the row is taken to be until it has
|
|
62
|
-
* been measured. Reading it rather than starting at zero is what keeps a wide
|
|
63
|
-
* page from laying itself out stacked and splitting a frame later, which would
|
|
64
|
-
* build both figures twice on every load.
|
|
65
|
-
* @returns The width in pixels, or the threshold itself where there is no
|
|
66
|
-
* window to read — a test, or a page rendered to a string — which is the
|
|
67
|
-
* narrowest a row is still split at.
|
|
68
|
-
*/
|
|
69
|
-
function windowWidth() {
|
|
70
|
-
const { innerWidth } = globalThis;
|
|
71
|
-
return typeof innerWidth === 'number' && innerWidth > 0
|
|
72
|
-
? innerWidth
|
|
73
|
-
: STACK_BELOW;
|
|
74
|
-
}
|
|
75
|
-
/** The narrowest row that is still split, in pixels. */
|
|
76
|
-
const STACK_BELOW = 860;
|
|
77
|
-
/** The gutter a pane keeps beside the splitter, in pixels. */
|
|
78
|
-
const GUTTER = 6;
|
|
79
|
-
/** The gap between the panes once they have stacked, in pixels. */
|
|
80
|
-
const STACKED_GAP = 16;
|
|
81
|
-
const STACK = {
|
|
82
|
-
display: 'flex',
|
|
83
|
-
flexDirection: 'column',
|
|
84
|
-
};
|
|
85
|
-
const STACKED_PANE = {
|
|
86
|
-
display: 'flex',
|
|
87
|
-
flexDirection: 'column',
|
|
88
|
-
minWidth: 0,
|
|
89
|
-
};
|
|
90
|
-
function paneStyle(side, gutter) {
|
|
91
|
-
return {
|
|
92
|
-
display: 'flex',
|
|
93
|
-
flex: '1 1 0%',
|
|
94
|
-
flexDirection: 'column',
|
|
95
|
-
minWidth: 0,
|
|
96
|
-
[side === 'start' ? 'paddingRight' : 'paddingLeft']: gutter,
|
|
97
|
-
};
|
|
16
|
+
return _jsx(SplitPanes, { direction: "horizontal", ...props });
|
|
98
17
|
}
|
|
99
18
|
//# sourceMappingURL=SplitRow.js.map
|