react-cheminfo 0.46.0 → 0.48.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/README.md +69 -0
- 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/core.d.ts +1 -0
- package/lib/core.d.ts.map +1 -1
- package/lib/core.js +1 -0
- package/lib/core.js.map +1 -1
- package/lib/download/core/cssPaint.d.ts +27 -0
- package/lib/download/core/cssPaint.d.ts.map +1 -0
- package/lib/download/core/cssPaint.js +63 -0
- package/lib/download/core/cssPaint.js.map +1 -0
- package/lib/download/core/drawingMarkup.d.ts +11 -0
- package/lib/download/core/drawingMarkup.d.ts.map +1 -0
- package/lib/download/core/drawingMarkup.js +32 -0
- package/lib/download/core/drawingMarkup.js.map +1 -0
- package/lib/download/core/figureHtml.d.ts +25 -0
- package/lib/download/core/figureHtml.d.ts.map +1 -0
- package/lib/download/core/figureHtml.js +174 -0
- package/lib/download/core/figureHtml.js.map +1 -0
- package/lib/download/core/figureHtmlMarkup.d.ts +107 -0
- package/lib/download/core/figureHtmlMarkup.d.ts.map +1 -0
- package/lib/download/core/figureHtmlMarkup.js +75 -0
- package/lib/download/core/figureHtmlMarkup.js.map +1 -0
- package/lib/download/core/figureSvg.d.ts.map +1 -1
- package/lib/download/core/figureSvg.js +16 -35
- package/lib/download/core/figureSvg.js.map +1 -1
- package/lib/download/core/figureSvgDocument.d.ts +3 -3
- package/lib/download/core/figureSvgDocument.d.ts.map +1 -1
- package/lib/download/core/figureTarget.d.ts +14 -3
- package/lib/download/core/figureTarget.d.ts.map +1 -1
- package/lib/download/core/figureTarget.js +42 -3
- package/lib/download/core/figureTarget.js.map +1 -1
- package/lib/download/core/index.d.ts +1 -1
- package/lib/download/core/index.d.ts.map +1 -1
- package/lib/download/core/index.js +1 -1
- package/lib/download/core/index.js.map +1 -1
- package/lib/download/core/textLines.d.ts +27 -0
- package/lib/download/core/textLines.d.ts.map +1 -0
- package/lib/download/core/textLines.js +51 -0
- package/lib/download/core/textLines.js.map +1 -0
- package/lib/ecosystem/core/lookup.d.ts +2 -1
- package/lib/ecosystem/core/lookup.d.ts.map +1 -1
- package/lib/ecosystem/core/lookup.js +10 -3
- package/lib/ecosystem/core/lookup.js.map +1 -1
- package/lib/ecosystem/core/types.d.ts +2 -2
- package/lib/ecosystem/core/types.d.ts.map +1 -1
- package/lib/ecosystem/core/unlistedSites.d.ts +9 -0
- package/lib/ecosystem/core/unlistedSites.d.ts.map +1 -0
- package/lib/ecosystem/core/unlistedSites.js +35 -0
- package/lib/ecosystem/core/unlistedSites.js.map +1 -0
- package/lib/ecosystem/ui/glyphs.d.ts.map +1 -1
- package/lib/ecosystem/ui/glyphs.js +7 -0
- package/lib/ecosystem/ui/glyphs.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 +56 -1
- package/lib/locales/en.json +56 -1
- package/lib/locales/es.json +56 -1
- package/lib/locales/fr.json +56 -1
- package/lib/locales/it.json +56 -1
- 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 +3 -98
- package/lib/periodic/ui/PeriodicTable.d.ts.map +1 -1
- package/lib/periodic/ui/PeriodicTable.js +9 -84
- 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 +10 -20
- package/lib/periodic/ui/PeriodicTableChrome.js.map +1 -1
- package/lib/periodic/ui/SelectAllCorner.d.ts +23 -0
- package/lib/periodic/ui/SelectAllCorner.d.ts.map +1 -0
- package/lib/periodic/ui/SelectAllCorner.js +40 -0
- package/lib/periodic/ui/SelectAllCorner.js.map +1 -0
- package/lib/periodic/ui/headerStyles.d.ts +17 -0
- package/lib/periodic/ui/headerStyles.d.ts.map +1 -0
- package/lib/periodic/ui/headerStyles.js +19 -0
- package/lib/periodic/ui/headerStyles.js.map +1 -0
- package/lib/periodic/ui/periodicTableProps.d.ts +115 -0
- package/lib/periodic/ui/periodicTableProps.d.ts.map +1 -0
- package/lib/periodic/ui/periodicTableProps.js +8 -0
- package/lib/periodic/ui/periodicTableProps.js.map +1 -0
- package/lib/periodic/ui/tableLayout.d.ts +26 -0
- package/lib/periodic/ui/tableLayout.d.ts.map +1 -0
- package/lib/periodic/ui/tableLayout.js +86 -0
- package/lib/periodic/ui/tableLayout.js.map +1 -0
- package/lib/split/ui/SplitColumn.d.ts +29 -0
- package/lib/split/ui/SplitColumn.d.ts.map +1 -0
- package/lib/split/ui/SplitColumn.js +19 -0
- package/lib/split/ui/SplitColumn.js.map +1 -0
- package/lib/split/ui/SplitRow.d.ts +14 -53
- package/lib/split/ui/SplitRow.d.ts.map +1 -1
- package/lib/split/ui/SplitRow.js +8 -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 +84 -0
- package/lib/split/ui/splitPanes.d.ts.map +1 -0
- package/lib/split/ui/splitPanes.js +125 -0
- package/lib/split/ui/splitPanes.js.map +1 -0
- package/lib/taxonomy/core/index.d.ts +8 -0
- package/lib/taxonomy/core/index.d.ts.map +1 -0
- package/lib/taxonomy/core/index.js +5 -0
- package/lib/taxonomy/core/index.js.map +1 -0
- package/lib/taxonomy/core/lineage.d.ts +83 -0
- package/lib/taxonomy/core/lineage.d.ts.map +1 -0
- package/lib/taxonomy/core/lineage.js +126 -0
- package/lib/taxonomy/core/lineage.js.map +1 -0
- package/lib/taxonomy/core/ncbi.d.ts +8 -0
- package/lib/taxonomy/core/ncbi.d.ts.map +1 -0
- package/lib/taxonomy/core/ncbi.js +10 -0
- package/lib/taxonomy/core/ncbi.js.map +1 -0
- package/lib/taxonomy/core/organismName.d.ts +28 -0
- package/lib/taxonomy/core/organismName.d.ts.map +1 -0
- package/lib/taxonomy/core/organismName.js +188 -0
- package/lib/taxonomy/core/organismName.js.map +1 -0
- package/lib/taxonomy/core/organismWords.d.ts +20 -0
- package/lib/taxonomy/core/organismWords.d.ts.map +1 -0
- package/lib/taxonomy/core/organismWords.js +86 -0
- package/lib/taxonomy/core/organismWords.js.map +1 -0
- package/lib/taxonomy/core/ranks.d.ts +51 -0
- package/lib/taxonomy/core/ranks.d.ts.map +1 -0
- package/lib/taxonomy/core/ranks.js +123 -0
- package/lib/taxonomy/core/ranks.js.map +1 -0
- package/lib/taxonomy/ui/OrganismName.d.ts +28 -0
- package/lib/taxonomy/ui/OrganismName.d.ts.map +1 -0
- package/lib/taxonomy/ui/OrganismName.js +28 -0
- package/lib/taxonomy/ui/OrganismName.js.map +1 -0
- package/lib/taxonomy/ui/TaxonLineage.d.ts +67 -0
- package/lib/taxonomy/ui/TaxonLineage.d.ts.map +1 -0
- package/lib/taxonomy/ui/TaxonLineage.js +45 -0
- package/lib/taxonomy/ui/TaxonLineage.js.map +1 -0
- package/lib/taxonomy/ui/index.d.ts +6 -0
- package/lib/taxonomy/ui/index.d.ts.map +1 -0
- package/lib/taxonomy/ui/index.js +4 -0
- package/lib/taxonomy/ui/index.js.map +1 -0
- package/lib/taxonomy/ui/rankLabel.d.ts +17 -0
- package/lib/taxonomy/ui/rankLabel.d.ts.map +1 -0
- package/lib/taxonomy/ui/rankLabel.js +77 -0
- package/lib/taxonomy/ui/rankLabel.js.map +1 -0
- package/lib/ui.d.ts +1 -0
- package/lib/ui.d.ts.map +1 -1
- package/lib/ui.js +1 -0
- package/lib/ui.js.map +1 -1
- 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/core.ts +1 -0
- package/src/download/core/cssPaint.ts +71 -0
- package/src/download/core/drawingMarkup.ts +35 -0
- package/src/download/core/figureHtml.ts +214 -0
- package/src/download/core/figureHtmlMarkup.ts +187 -0
- package/src/download/core/figureSvg.ts +17 -38
- package/src/download/core/figureSvgDocument.ts +3 -3
- package/src/download/core/figureTarget.ts +41 -8
- package/src/download/core/index.ts +1 -0
- package/src/download/core/textLines.ts +67 -0
- package/src/ecosystem/core/lookup.ts +11 -3
- package/src/ecosystem/core/types.ts +4 -2
- package/src/ecosystem/core/unlistedSites.ts +37 -0
- package/src/ecosystem/ui/glyphs.tsx +44 -0
- package/src/ir/core/irMode.ts +6 -1
- package/src/locales/de.json +56 -1
- package/src/locales/en.json +56 -1
- package/src/locales/es.json +56 -1
- package/src/locales/fr.json +56 -1
- package/src/locales/it.json +56 -1
- 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 +27 -197
- package/src/periodic/ui/PeriodicTableChrome.tsx +23 -20
- package/src/periodic/ui/SelectAllCorner.tsx +65 -0
- package/src/periodic/ui/headerStyles.ts +23 -0
- package/src/periodic/ui/periodicTableProps.ts +117 -0
- package/src/periodic/ui/tableLayout.ts +96 -0
- package/src/split/ui/SplitColumn.tsx +35 -0
- package/src/split/ui/SplitRow.tsx +16 -208
- package/src/split/ui/index.ts +3 -0
- package/src/split/ui/splitPanes.tsx +283 -0
- package/src/taxonomy/core/index.ts +20 -0
- package/src/taxonomy/core/lineage.ts +161 -0
- package/src/taxonomy/core/ncbi.ts +9 -0
- package/src/taxonomy/core/organismName.ts +217 -0
- package/src/taxonomy/core/organismWords.ts +86 -0
- package/src/taxonomy/core/ranks.ts +134 -0
- package/src/taxonomy/ui/OrganismName.tsx +59 -0
- package/src/taxonomy/ui/TaxonLineage.tsx +183 -0
- package/src/taxonomy/ui/index.ts +5 -0
- package/src/taxonomy/ui/rankLabel.ts +81 -0
- package/src/ui.ts +1 -0
- package/styles/chrome.css +135 -6
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How the table is laid out: the box it measures, the grid its cells sit on,
|
|
3
|
+
* and the block a caller may write in.
|
|
4
|
+
*/
|
|
5
|
+
import type { CSSProperties } from 'react';
|
|
6
|
+
/**
|
|
7
|
+
* Where what the caller writes in the empty block is placed.
|
|
8
|
+
* @param offset - 1 when the table draws its header strips, 0 otherwise.
|
|
9
|
+
* @returns The style of the slot.
|
|
10
|
+
*/
|
|
11
|
+
export declare function insetStyle(offset: number): CSSProperties;
|
|
12
|
+
export declare const rootStyle: {
|
|
13
|
+
readonly display: "flex";
|
|
14
|
+
readonly flexDirection: "column";
|
|
15
|
+
readonly gap: 8;
|
|
16
|
+
readonly minWidth: 280;
|
|
17
|
+
readonly containerType: "inline-size";
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* The grid the cells are placed on.
|
|
21
|
+
* @param headers - Whether a leading column and row hold the period and group
|
|
22
|
+
* numbers.
|
|
23
|
+
* @returns The style of the grid.
|
|
24
|
+
*/
|
|
25
|
+
export declare function gridStyle(headers: boolean): CSSProperties;
|
|
26
|
+
//# sourceMappingURL=tableLayout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tableLayout.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/tableLayout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAO3C;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAiBxD;AAmBD,eAAO,MAAM,SAAS;;;;;;CAYY,CAAC;AASnC;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,aAAa,CAezD"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How the table is laid out: the box it measures, the grid its cells sit on,
|
|
3
|
+
* and the block a caller may write in.
|
|
4
|
+
*/
|
|
5
|
+
import { COLUMN_COUNT, EMPTY_BLOCK } from "../core/layout.js";
|
|
6
|
+
import { ROW_SHARE } from "./cellType.js";
|
|
7
|
+
import { ofWidth } from "./unit.js";
|
|
8
|
+
/**
|
|
9
|
+
* Where what the caller writes in the empty block is placed.
|
|
10
|
+
* @param offset - 1 when the table draws its header strips, 0 otherwise.
|
|
11
|
+
* @returns The style of the slot.
|
|
12
|
+
*/
|
|
13
|
+
export function insetStyle(offset) {
|
|
14
|
+
return {
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
display: 'flex',
|
|
17
|
+
// A column of air on each side, so the writing reads as sitting in the
|
|
18
|
+
// block rather than as running into the cells beside it.
|
|
19
|
+
padding: `0 ${ofWidth(2.4)}`,
|
|
20
|
+
gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
|
|
21
|
+
gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
|
|
22
|
+
// A share of the table, with a floor, exactly as a cell sizes its symbol:
|
|
23
|
+
// the block holds the same three rows at every width, so what is written
|
|
24
|
+
// in it has to shrink with them.
|
|
25
|
+
fontSize: `max(0.6rem, ${ofWidth(1.8)})`,
|
|
26
|
+
lineHeight: 1.35,
|
|
27
|
+
minWidth: 0,
|
|
28
|
+
overflow: 'hidden',
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
/** Narrowest the table is ever drawn; under it the type stops being readable. */
|
|
32
|
+
const MIN_WIDTH = 280;
|
|
33
|
+
/**
|
|
34
|
+
* How tall one row of elements is, as a share of the table's width.
|
|
35
|
+
*
|
|
36
|
+
* A column is about 5.2% of that width, so a cell is a third taller than it is
|
|
37
|
+
* wide — the proportion of a wall chart, and the room the three bands of a
|
|
38
|
+
* cell need to be read from the back of a room. It is the same height in every
|
|
39
|
+
* table: a cell keeps the band it writes a value in whether or not that table
|
|
40
|
+
* writes one.
|
|
41
|
+
*/
|
|
42
|
+
const ROW_HEIGHT = ofWidth(ROW_SHARE);
|
|
43
|
+
/** The band the two inner-transition series were lifted out across. */
|
|
44
|
+
const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;
|
|
45
|
+
export const rootStyle = {
|
|
46
|
+
display: 'flex',
|
|
47
|
+
flexDirection: 'column',
|
|
48
|
+
gap: 8,
|
|
49
|
+
minWidth: MIN_WIDTH,
|
|
50
|
+
// Everything inside — the height of a row as much as the type in a cell — is
|
|
51
|
+
// a share of this box rather than of the page, so the same table reads at
|
|
52
|
+
// 280px beside a chart and fills a lecture-hall screen at twice that. The
|
|
53
|
+
// share is measured (see `unit.ts`); the container is what the `1cqw`
|
|
54
|
+
// fallback and a site's own `@container` rules are answered by, and it keeps
|
|
55
|
+
// this box's width independent of what is written inside it.
|
|
56
|
+
containerType: 'inline-size',
|
|
57
|
+
};
|
|
58
|
+
const baseGridStyle = {
|
|
59
|
+
display: 'grid',
|
|
60
|
+
gap: 2,
|
|
61
|
+
minWidth: MIN_WIDTH,
|
|
62
|
+
width: '100%',
|
|
63
|
+
};
|
|
64
|
+
/**
|
|
65
|
+
* The grid the cells are placed on.
|
|
66
|
+
* @param headers - Whether a leading column and row hold the period and group
|
|
67
|
+
* numbers.
|
|
68
|
+
* @returns The style of the grid.
|
|
69
|
+
*/
|
|
70
|
+
export function gridStyle(headers) {
|
|
71
|
+
// The eighth row is the gap the inner-transition series are lifted out into.
|
|
72
|
+
const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
|
|
73
|
+
if (!headers) {
|
|
74
|
+
return {
|
|
75
|
+
...baseGridStyle,
|
|
76
|
+
gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
|
|
77
|
+
gridTemplateRows: rows,
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
return {
|
|
81
|
+
...baseGridStyle,
|
|
82
|
+
gridTemplateColumns: `max(14px, ${ofWidth(2.4)}) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
|
|
83
|
+
gridTemplateRows: `max(12px, ${ofWidth(2)}) ${rows}`,
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
//# sourceMappingURL=tableLayout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tableLayout.js","sourceRoot":"","sources":["../../../src/periodic/ui/tableLayout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc;IACvC,OAAO;QACL,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,MAAM;QACf,uEAAuE;QACvE,yDAAyD;QACzD,OAAO,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,EAAE;QAC5B,UAAU,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE;QAC7F,OAAO,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE;QACpF,0EAA0E;QAC1E,yEAAyE;QACzE,iCAAiC;QACjC,QAAQ,EAAE,eAAe,OAAO,CAAC,GAAG,CAAC,GAAG;QACxC,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,CAAC;AAED,iFAAiF;AACjF,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEtC,uEAAuE;AACvE,MAAM,UAAU,GAAG,YAAY,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;IACN,QAAQ,EAAE,SAAS;IACnB,6EAA6E;IAC7E,0EAA0E;IAC1E,0EAA0E;IAC1E,sEAAsE;IACtE,6EAA6E;IAC7E,6DAA6D;IAC7D,aAAa,EAAE,aAAa;CACI,CAAC;AAEnC,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,CAAC;IACN,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,MAAM;CACmB,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,OAAgB;IACxC,6EAA6E;IAC7E,MAAM,IAAI,GAAG,aAAa,UAAU,KAAK,UAAU,cAAc,UAAU,GAAG,CAAC;IAC/E,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO;YACL,GAAG,aAAa;YAChB,mBAAmB,EAAE,UAAU,MAAM,CAAC,YAAY,CAAC,mBAAmB;YACtE,gBAAgB,EAAE,IAAI;SACvB,CAAC;IACJ,CAAC;IACD,OAAO;QACL,GAAG,aAAa;QAChB,mBAAmB,EAAE,aAAa,OAAO,CAAC,GAAG,CAAC,YAAY,MAAM,CAAC,YAAY,CAAC,mBAAmB;QACjG,gBAAgB,EAAE,aAAa,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE;KACrD,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
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
|
+
* @param props - See {@link SplitColumnProps}.
|
|
25
|
+
* @returns The two panes with the splitter between them, the two stacked where
|
|
26
|
+
* there is no height to divide, or whichever one a link left, alone.
|
|
27
|
+
*/
|
|
28
|
+
export declare function SplitColumn(props: SplitColumnProps): ReactElement | null;
|
|
29
|
+
//# 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;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAExE"}
|
|
@@ -0,0 +1,19 @@
|
|
|
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
|
+
* @param props - See {@link SplitColumnProps}.
|
|
13
|
+
* @returns The two panes with the splitter between them, the two stacked where
|
|
14
|
+
* there is no height to divide, or whichever one a link left, alone.
|
|
15
|
+
*/
|
|
16
|
+
export function SplitColumn(props) {
|
|
17
|
+
return _jsx(SplitPanes, { direction: "vertical", ...props });
|
|
18
|
+
}
|
|
19
|
+
//# 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;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,KAAC,UAAU,IAAC,SAAS,EAAC,UAAU,KAAK,KAAK,GAAI,CAAC;AACxD,CAAC"}
|
|
@@ -2,62 +2,23 @@
|
|
|
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
|
-
* teaching off the picker wants the picker nearly whole, and both want the
|
|
8
|
-
* link they hand out to open the way they left it. So the splitter is dragged,
|
|
9
|
-
* the share it comes to rest at goes into `?split=`, and the address is the
|
|
10
|
-
* figure.
|
|
11
|
-
*
|
|
12
|
-
* Two things it cannot do, and must not pretend to: on a narrow screen there
|
|
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.
|
|
21
7
|
*/
|
|
22
|
-
import type { ReactElement
|
|
23
|
-
import type {
|
|
24
|
-
/**
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
}
|
|
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.
|
|
13
|
+
*/
|
|
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.
|
|
61
22
|
* @param props - See {@link SplitRowProps}.
|
|
62
23
|
* @returns The two panes with the splitter between them, the two stacked on a
|
|
63
24
|
* 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;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CAElE"}
|
package/lib/split/ui/SplitRow.js
CHANGED
|
@@ -1,99 +1,17 @@
|
|
|
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.
|
|
8
10
|
* @param props - See {@link SplitRowProps}.
|
|
9
11
|
* @returns The two panes with the splitter between them, the two stacked on a
|
|
10
12
|
* narrow screen, or whichever one a link left on the page, alone.
|
|
11
13
|
*/
|
|
12
14
|
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
|
-
};
|
|
15
|
+
return _jsx(SplitPanes, { direction: "horizontal", ...props });
|
|
98
16
|
}
|
|
99
17
|
//# sourceMappingURL=SplitRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitRow.js","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SplitRow.js","sourceRoot":"","sources":["../../../src/split/ui/SplitRow.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAQ9C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,OAAO,KAAC,UAAU,IAAC,SAAS,EAAC,YAAY,KAAK,KAAK,GAAI,CAAC;AAC1D,CAAC"}
|
package/lib/split/ui/index.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export type { SplitColumnProps } from './SplitColumn.tsx';
|
|
2
|
+
export { SplitColumn } from './SplitColumn.tsx';
|
|
1
3
|
export type { SplitRowProps } from './SplitRow.tsx';
|
|
2
4
|
export { SplitRow } from './SplitRow.tsx';
|
|
5
|
+
export type { SplitPanesProps } from './splitPanes.tsx';
|
|
3
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}
|
package/lib/split/ui/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Two figures with a splitter between them, and the share each takes written
|
|
3
|
+
* into the address. The body of `<SplitRow>` and `<SplitColumn>` both.
|
|
4
|
+
*
|
|
5
|
+
* How much room one half deserves beside the other is not ours to decide:
|
|
6
|
+
* somebody embedding the chart wants it nearly whole, somebody teaching off the
|
|
7
|
+
* picker wants the picker nearly whole, and both want the link they hand out to
|
|
8
|
+
* open the way they left it. So the splitter is dragged, the share it comes to
|
|
9
|
+
* rest at goes into `?split=`, and the address is the figure.
|
|
10
|
+
*
|
|
11
|
+
* Two things it cannot do, and must not pretend to: on a screen with no room
|
|
12
|
+
* for two the panes stack and no splitter is drawn; and a link that hid
|
|
13
|
+
* everything one pane holds leaves the other the whole of it rather than a
|
|
14
|
+
* share.
|
|
15
|
+
*
|
|
16
|
+
* **Several bars on one page make a grid, and a grid has to read as one.** Three
|
|
17
|
+
* panes are one of these nested inside the other, and the shares are numbered in
|
|
18
|
+
* reading order — `split` for the first bar a reader meets going left to right
|
|
19
|
+
* and then down, `split2` for the next. Two rules keep that from coming apart:
|
|
20
|
+
* **at most two bars on a page**, because a third is a window manager rather
|
|
21
|
+
* than a tool and every bar is one more thing to understand before the page can
|
|
22
|
+
* be used; and **never a bar across two columns of the same row**, because two
|
|
23
|
+
* of them at independent heights do not read as a grid, they read as a page that
|
|
24
|
+
* has come apart. Divide the column that holds the figures and leave its
|
|
25
|
+
* neighbours whole — or, where both genuinely want the same line, give them one
|
|
26
|
+
* share and one parameter so it runs straight across.
|
|
27
|
+
*
|
|
28
|
+
* The bar itself is react-science's `SplitPane`, and it keeps react-science's
|
|
29
|
+
* look — barely visible on purpose, found by the pointer that changes over it
|
|
30
|
+
* rather than by the eye. All `chrome.css` says about it is that eleven pixels
|
|
31
|
+
* is more gutter than two figures need.
|
|
32
|
+
*/
|
|
33
|
+
import type { ReactElement, ReactNode } from 'react';
|
|
34
|
+
import type { SplitRange } from '../core/split.ts';
|
|
35
|
+
/** What both splitters take. */
|
|
36
|
+
export interface SplitPanesProps extends SplitRange {
|
|
37
|
+
/**
|
|
38
|
+
* Share of the box the first pane takes, as a whole percentage, or `null`
|
|
39
|
+
* while the page sits at {@link SplitPanesProps.defaultRatio}.
|
|
40
|
+
*/
|
|
41
|
+
ratio: number | null;
|
|
42
|
+
/** The share it opens at when the address names none. */
|
|
43
|
+
defaultRatio: number;
|
|
44
|
+
/**
|
|
45
|
+
* Take the share a drag came to rest at, or `null` when the splitter was
|
|
46
|
+
* double-clicked back to the default.
|
|
47
|
+
*/
|
|
48
|
+
onRatio: (ratio: number | null) => void;
|
|
49
|
+
/** The first pane — left, or top — or `null` when a link left nothing in it. */
|
|
50
|
+
start: ReactNode;
|
|
51
|
+
/** The second pane, or `null` when a link left nothing in it. */
|
|
52
|
+
end: ReactNode;
|
|
53
|
+
/**
|
|
54
|
+
* The smallest box that is still split, in pixels — a width for a row, a
|
|
55
|
+
* height for a column. Under it the two panes stack and no splitter is drawn.
|
|
56
|
+
* @default 860 across, 420 down
|
|
57
|
+
*/
|
|
58
|
+
stackBelow?: number;
|
|
59
|
+
/**
|
|
60
|
+
* The gutter each pane keeps beside the splitter, in pixels, so neither
|
|
61
|
+
* figure is read against its edge.
|
|
62
|
+
* @default 6
|
|
63
|
+
*/
|
|
64
|
+
gutter?: number;
|
|
65
|
+
/**
|
|
66
|
+
* The gap between the two panes once they have stacked, in pixels.
|
|
67
|
+
* @default 16
|
|
68
|
+
*/
|
|
69
|
+
stackedGap?: number;
|
|
70
|
+
}
|
|
71
|
+
/** What {@link SplitPanes} takes on top of the public props. */
|
|
72
|
+
interface InternalProps extends SplitPanesProps {
|
|
73
|
+
/** Across the box, or down it. */
|
|
74
|
+
direction: 'horizontal' | 'vertical';
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* The two panes, divided where the address says.
|
|
78
|
+
* @param props - See {@link SplitPanesProps}.
|
|
79
|
+
* @returns The panes with the splitter between them, the two stacked where
|
|
80
|
+
* there is no room for both, or whichever one a link left, alone.
|
|
81
|
+
*/
|
|
82
|
+
export declare function SplitPanes(props: InternalProps): ReactElement | null;
|
|
83
|
+
export {};
|
|
84
|
+
//# sourceMappingURL=splitPanes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"splitPanes.d.ts","sourceRoot":"","sources":["../../../src/split/ui/splitPanes.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,gCAAgC;AAChC,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,GAAG,EAAE,SAAS,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,gEAAgE;AAChE,UAAU,aAAc,SAAQ,eAAe;IAC7C,kCAAkC;IAClC,SAAS,EAAE,YAAY,GAAG,UAAU,CAAC;CACtC;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CAoGpE"}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState } from 'react';
|
|
3
|
+
import { SplitPane } from 'react-science/ui';
|
|
4
|
+
import { useResizeObserver } from "../../hooks/ui/useResizeObserver.js";
|
|
5
|
+
import { clampSplit } from "../core/split.js";
|
|
6
|
+
/**
|
|
7
|
+
* The two panes, divided where the address says.
|
|
8
|
+
* @param props - See {@link SplitPanesProps}.
|
|
9
|
+
* @returns The panes with the splitter between them, the two stacked where
|
|
10
|
+
* there is no room for both, or whichever one a link left, alone.
|
|
11
|
+
*/
|
|
12
|
+
export function SplitPanes(props) {
|
|
13
|
+
const { direction, ratio, defaultRatio, onRatio, start, end, min, max, stackBelow = direction === 'horizontal' ? STACK_ACROSS : STACK_DOWN, gutter = GUTTER, stackedGap = STACKED_GAP, } = props;
|
|
14
|
+
const across = direction === 'horizontal';
|
|
15
|
+
const box = useRef(null);
|
|
16
|
+
const [size, setSize] = useState(() => viewportSize(across, stackBelow));
|
|
17
|
+
// The share under the pointer, which is not the one in the address: a drag
|
|
18
|
+
// reports every pixel it crosses, and the address is rewritten once, where
|
|
19
|
+
// the splitter is let go.
|
|
20
|
+
const [dragged, setDragged] = useState(null);
|
|
21
|
+
useResizeObserver(box, (measured) => {
|
|
22
|
+
setSize(across ? measured.width : measured.height);
|
|
23
|
+
});
|
|
24
|
+
if (start === null && end === null)
|
|
25
|
+
return null;
|
|
26
|
+
// A column divided by a share needs a box of a definite height to take a
|
|
27
|
+
// share of; in an ordinary page-height one it would measure zero and both
|
|
28
|
+
// panes would collapse, so it stacks instead and says nothing about it.
|
|
29
|
+
const stacked = start === null || end === null || size < stackBelow;
|
|
30
|
+
const startPane = start === null ? null : (_jsx("div", { "data-testid": "split-start", style: stacked ? STACKED_PANE : paneStyle(across, 'start', gutter), children: start }));
|
|
31
|
+
const endPane = end === null ? null : (_jsx("div", { "data-testid": "split-end", style: stacked ? STACKED_PANE : paneStyle(across, 'end', gutter), children: end }));
|
|
32
|
+
if (stacked) {
|
|
33
|
+
return (_jsxs("div", { ref: box, style: { ...STACK, gap: stackedGap }, children: [startPane, endPane] }));
|
|
34
|
+
}
|
|
35
|
+
const share = clampSplit(dragged ?? ratio ?? defaultRatio, { min, max });
|
|
36
|
+
return (_jsx("div", { ref: box, className: across ? 'split-row' : 'split-row split-row--down', style: across ? undefined : FILL, children: _jsxs(SplitPane, { direction: direction, controlledSide: "start", size: `${share}%`,
|
|
37
|
+
// Held open, so the only layout a visitor can reach is one the address
|
|
38
|
+
// describes: left to itself a double click collapses a pane, and a link
|
|
39
|
+
// shared from there would open with the pane back. The double click is
|
|
40
|
+
// answered here instead, by returning to the page's own share.
|
|
41
|
+
open: true, onOpenChange: () => {
|
|
42
|
+
setDragged(null);
|
|
43
|
+
onRatio(null);
|
|
44
|
+
}, onSizeChange: (asked) => {
|
|
45
|
+
setDragged(shareOf(asked, share, { min, max }));
|
|
46
|
+
}, onResize: (asked) => {
|
|
47
|
+
const rested = shareOf(asked, share, { min, max });
|
|
48
|
+
setDragged(null);
|
|
49
|
+
onRatio(rested);
|
|
50
|
+
}, children: [startPane, endPane] }) }));
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* The share a splitter asked for.
|
|
54
|
+
* @param asked - What it reported, a percentage because that is what it was
|
|
55
|
+
* given.
|
|
56
|
+
* @param current - The share in force, kept when the report is not a number.
|
|
57
|
+
* @param range - The range this box is divided in.
|
|
58
|
+
* @returns A whole percentage inside it.
|
|
59
|
+
*/
|
|
60
|
+
function shareOf(asked, current, range) {
|
|
61
|
+
const value = Number.parseFloat(asked);
|
|
62
|
+
return Number.isFinite(value) ? clampSplit(value, range) : current;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* How big the window is, which is what the box is taken to be until it has been
|
|
66
|
+
* measured. Reading it rather than starting at zero is what keeps a wide page
|
|
67
|
+
* from laying itself out stacked and splitting a frame later, which would build
|
|
68
|
+
* both figures twice on every load.
|
|
69
|
+
* @param across - Whether the box is divided across or down.
|
|
70
|
+
* @param fallback - What to answer where there is no window to read — a test,
|
|
71
|
+
* or a page rendered to a string.
|
|
72
|
+
* @returns The size in pixels.
|
|
73
|
+
*/
|
|
74
|
+
function viewportSize(across, fallback) {
|
|
75
|
+
const measure = across ? globalThis.innerWidth : globalThis.innerHeight;
|
|
76
|
+
return typeof measure === 'number' && measure > 0 ? measure : fallback;
|
|
77
|
+
}
|
|
78
|
+
/** The narrowest box still divided across, in pixels. */
|
|
79
|
+
const STACK_ACROSS = 860;
|
|
80
|
+
/**
|
|
81
|
+
* The shortest box still divided down, in pixels. Two figures sharing less than
|
|
82
|
+
* this have about two hundred pixels each, which is under what any of them
|
|
83
|
+
* reads at.
|
|
84
|
+
*/
|
|
85
|
+
const STACK_DOWN = 420;
|
|
86
|
+
/** The gutter a pane keeps beside the splitter, in pixels. */
|
|
87
|
+
const GUTTER = 6;
|
|
88
|
+
/** The gap between the panes once they have stacked, in pixels. */
|
|
89
|
+
const STACKED_GAP = 16;
|
|
90
|
+
const STACK = {
|
|
91
|
+
display: 'flex',
|
|
92
|
+
flexDirection: 'column',
|
|
93
|
+
minHeight: 0,
|
|
94
|
+
};
|
|
95
|
+
const STACKED_PANE = {
|
|
96
|
+
display: 'flex',
|
|
97
|
+
flexDirection: 'column',
|
|
98
|
+
minWidth: 0,
|
|
99
|
+
minHeight: 0,
|
|
100
|
+
};
|
|
101
|
+
/** A column takes the height it is given, so its share has something to divide. */
|
|
102
|
+
const FILL = {
|
|
103
|
+
display: 'flex',
|
|
104
|
+
flex: '1 1 0%',
|
|
105
|
+
flexDirection: 'column',
|
|
106
|
+
minHeight: 0,
|
|
107
|
+
};
|
|
108
|
+
function paneStyle(across, side, gutter) {
|
|
109
|
+
const edge = across
|
|
110
|
+
? side === 'start'
|
|
111
|
+
? 'paddingRight'
|
|
112
|
+
: 'paddingLeft'
|
|
113
|
+
: side === 'start'
|
|
114
|
+
? 'paddingBottom'
|
|
115
|
+
: 'paddingTop';
|
|
116
|
+
return {
|
|
117
|
+
display: 'flex',
|
|
118
|
+
flex: '1 1 0%',
|
|
119
|
+
flexDirection: 'column',
|
|
120
|
+
minWidth: 0,
|
|
121
|
+
minHeight: 0,
|
|
122
|
+
[edge]: gutter,
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
//# sourceMappingURL=splitPanes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"splitPanes.js","sourceRoot":"","sources":["../../../src/split/ui/splitPanes.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type { Taxon, TaxonLineage, TaxonNode } from './lineage.ts';
|
|
2
|
+
export { genusOrBelow, isPlaceholderTaxon, lineageFromNodes, lineageFromRanks, principalLineage, } from './lineage.ts';
|
|
3
|
+
export { ncbiTaxonomyUrl } from './ncbi.ts';
|
|
4
|
+
export type { OrganismNamePart } from './organismName.ts';
|
|
5
|
+
export { splitOrganismName } from './organismName.ts';
|
|
6
|
+
export type { TaxonRank } from './ranks.ts';
|
|
7
|
+
export { PRINCIPAL_RANKS, TAXON_RANKS, isAboveGenus, isGenusOrBelow, isPrincipalRank, rankOrder, } from './ranks.ts';
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/taxonomy/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EACL,eAAe,EACf,WAAW,EACX,YAAY,EACZ,cAAc,EACd,eAAe,EACf,SAAS,GACV,MAAM,YAAY,CAAC"}
|