react-cheminfo 0.16.0 → 0.18.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/parallel/core/index.d.ts +7 -5
- package/lib/parallel/core/index.d.ts.map +1 -1
- package/lib/parallel/core/index.js +5 -3
- package/lib/parallel/core/index.js.map +1 -1
- package/lib/parallel/core/parallelBrush.d.ts +22 -1
- package/lib/parallel/core/parallelBrush.d.ts.map +1 -1
- package/lib/parallel/core/parallelBrush.js +53 -3
- package/lib/parallel/core/parallelBrush.js.map +1 -1
- package/lib/parallel/core/parallelFilter.d.ts +14 -1
- package/lib/parallel/core/parallelFilter.d.ts.map +1 -1
- package/lib/parallel/core/parallelFilter.js +44 -11
- package/lib/parallel/core/parallelFilter.js.map +1 -1
- package/lib/parallel/core/parallelOrder.d.ts +36 -0
- package/lib/parallel/core/parallelOrder.d.ts.map +1 -0
- package/lib/parallel/core/parallelOrder.js +65 -0
- package/lib/parallel/core/parallelOrder.js.map +1 -0
- package/lib/parallel/core/parallelPaint.d.ts +4 -0
- package/lib/parallel/core/parallelPaint.d.ts.map +1 -1
- package/lib/parallel/core/parallelPaint.js +15 -6
- package/lib/parallel/core/parallelPaint.js.map +1 -1
- package/lib/parallel/core/parallelPalette.d.ts +10 -1
- package/lib/parallel/core/parallelPalette.d.ts.map +1 -1
- package/lib/parallel/core/parallelPalette.js +14 -1
- package/lib/parallel/core/parallelPalette.js.map +1 -1
- package/lib/parallel/core/parallelSelection.d.ts +43 -0
- package/lib/parallel/core/parallelSelection.d.ts.map +1 -0
- package/lib/parallel/core/parallelSelection.js +87 -0
- package/lib/parallel/core/parallelSelection.js.map +1 -0
- package/lib/parallel/core/parallelTicks.d.ts.map +1 -1
- package/lib/parallel/core/parallelTicks.js +7 -4
- package/lib/parallel/core/parallelTicks.js.map +1 -1
- package/lib/parallel/core/parallelTypes.d.ts +12 -1
- package/lib/parallel/core/parallelTypes.d.ts.map +1 -1
- package/lib/parallel/core/parallelTypes.js.map +1 -1
- package/lib/parallel/ui/ParallelAxesLayer.d.ts +2 -2
- package/lib/parallel/ui/ParallelAxesLayer.d.ts.map +1 -1
- package/lib/parallel/ui/ParallelAxesLayer.js +2 -2
- package/lib/parallel/ui/ParallelAxesLayer.js.map +1 -1
- package/lib/parallel/ui/ParallelCoordinates.d.ts.map +1 -1
- package/lib/parallel/ui/ParallelCoordinates.js +10 -5
- package/lib/parallel/ui/ParallelCoordinates.js.map +1 -1
- package/lib/parallel/ui/ParallelLabels.d.ts +6 -0
- package/lib/parallel/ui/ParallelLabels.d.ts.map +1 -1
- package/lib/parallel/ui/ParallelLabels.js +14 -2
- package/lib/parallel/ui/ParallelLabels.js.map +1 -1
- package/lib/parallel/ui/index.d.ts +4 -0
- package/lib/parallel/ui/index.d.ts.map +1 -1
- package/lib/parallel/ui/index.js +2 -0
- package/lib/parallel/ui/index.js.map +1 -1
- package/lib/parallel/ui/parallelCoordinatesProps.d.ts +26 -8
- package/lib/parallel/ui/parallelCoordinatesProps.d.ts.map +1 -1
- package/lib/parallel/ui/parallelGestureModel.d.ts +37 -6
- package/lib/parallel/ui/parallelGestureModel.d.ts.map +1 -1
- package/lib/parallel/ui/parallelGestureModel.js +42 -12
- package/lib/parallel/ui/parallelGestureModel.js.map +1 -1
- package/lib/parallel/ui/parallelPlotModel.d.ts +1 -1
- package/lib/parallel/ui/parallelPlotModel.d.ts.map +1 -1
- package/lib/parallel/ui/parallelPlotModel.js +3 -3
- package/lib/parallel/ui/parallelPlotModel.js.map +1 -1
- package/lib/parallel/ui/parallelStyles.d.ts +26 -3
- package/lib/parallel/ui/parallelStyles.d.ts.map +1 -1
- package/lib/parallel/ui/parallelStyles.js +26 -4
- package/lib/parallel/ui/parallelStyles.js.map +1 -1
- package/lib/parallel/ui/useParallelAxisDrag.d.ts +60 -0
- package/lib/parallel/ui/useParallelAxisDrag.d.ts.map +1 -0
- package/lib/parallel/ui/useParallelAxisDrag.js +96 -0
- package/lib/parallel/ui/useParallelAxisDrag.js.map +1 -0
- package/lib/parallel/ui/useParallelGesture.d.ts +10 -5
- package/lib/parallel/ui/useParallelGesture.d.ts.map +1 -1
- package/lib/parallel/ui/useParallelGesture.js +46 -21
- package/lib/parallel/ui/useParallelGesture.js.map +1 -1
- package/lib/structure/core/editorGuide.d.ts +69 -0
- package/lib/structure/core/editorGuide.d.ts.map +1 -0
- package/lib/structure/core/editorGuide.js +162 -0
- package/lib/structure/core/editorGuide.js.map +1 -0
- package/lib/structure/core/editorToolbar.d.ts +45 -0
- package/lib/structure/core/editorToolbar.d.ts.map +1 -0
- package/lib/structure/core/editorToolbar.js +132 -0
- package/lib/structure/core/editorToolbar.js.map +1 -0
- package/lib/structure/core/editorToolbarGeometry.d.ts +36 -0
- package/lib/structure/core/editorToolbarGeometry.d.ts.map +1 -0
- package/lib/structure/core/editorToolbarGeometry.js +61 -0
- package/lib/structure/core/editorToolbarGeometry.js.map +1 -0
- package/lib/structure/core/index.d.ts +6 -0
- package/lib/structure/core/index.d.ts.map +1 -1
- package/lib/structure/core/index.js +3 -0
- package/lib/structure/core/index.js.map +1 -1
- package/lib/structure/core/pendingCall.d.ts +21 -0
- package/lib/structure/core/pendingCall.d.ts.map +1 -0
- package/lib/structure/core/pendingCall.js +37 -0
- package/lib/structure/core/pendingCall.js.map +1 -0
- package/lib/structure/ui/EditorCanvas.d.ts +1 -16
- package/lib/structure/ui/EditorCanvas.d.ts.map +1 -1
- package/lib/structure/ui/EditorCanvas.js +5 -18
- package/lib/structure/ui/EditorCanvas.js.map +1 -1
- package/lib/structure/ui/EditorHelpButton.d.ts +22 -0
- package/lib/structure/ui/EditorHelpButton.d.ts.map +1 -0
- package/lib/structure/ui/EditorHelpButton.js +38 -0
- package/lib/structure/ui/EditorHelpButton.js.map +1 -0
- package/lib/structure/ui/KeyCaps.d.ts +12 -0
- package/lib/structure/ui/KeyCaps.d.ts.map +1 -0
- package/lib/structure/ui/KeyCaps.js +29 -0
- package/lib/structure/ui/KeyCaps.js.map +1 -0
- package/lib/structure/ui/StructureEditor.d.ts +9 -2
- package/lib/structure/ui/StructureEditor.d.ts.map +1 -1
- package/lib/structure/ui/StructureEditor.js +17 -24
- package/lib/structure/ui/StructureEditor.js.map +1 -1
- package/lib/structure/ui/StructureEditorHelp.d.ts +18 -0
- package/lib/structure/ui/StructureEditorHelp.d.ts.map +1 -0
- package/lib/structure/ui/StructureEditorHelp.js +68 -0
- package/lib/structure/ui/StructureEditorHelp.js.map +1 -0
- package/lib/structure/ui/ToolbarTooltip.d.ts +20 -0
- package/lib/structure/ui/ToolbarTooltip.d.ts.map +1 -0
- package/lib/structure/ui/ToolbarTooltip.js +49 -0
- package/lib/structure/ui/ToolbarTooltip.js.map +1 -0
- package/lib/structure/ui/editorChange.d.ts +52 -0
- package/lib/structure/ui/editorChange.d.ts.map +1 -0
- package/lib/structure/ui/editorChange.js +34 -0
- package/lib/structure/ui/editorChange.js.map +1 -0
- package/lib/structure/ui/index.d.ts +3 -1
- package/lib/structure/ui/index.d.ts.map +1 -1
- package/lib/structure/ui/index.js +1 -0
- package/lib/structure/ui/index.js.map +1 -1
- package/lib/structure/ui/useToolbarFloor.d.ts.map +1 -1
- package/lib/structure/ui/useToolbarFloor.js +6 -45
- package/lib/structure/ui/useToolbarFloor.js.map +1 -1
- package/lib/structure/ui/useToolbarHover.d.ts +28 -0
- package/lib/structure/ui/useToolbarHover.d.ts.map +1 -0
- package/lib/structure/ui/useToolbarHover.js +96 -0
- package/lib/structure/ui/useToolbarHover.js.map +1 -0
- package/lib/structure/ui/watchToolbar.d.ts +17 -0
- package/lib/structure/ui/watchToolbar.d.ts.map +1 -0
- package/lib/structure/ui/watchToolbar.js +56 -0
- package/lib/structure/ui/watchToolbar.js.map +1 -0
- package/package.json +1 -1
- package/src/parallel/core/index.ts +16 -0
- package/src/parallel/core/parallelBrush.ts +69 -3
- package/src/parallel/core/parallelFilter.ts +52 -15
- package/src/parallel/core/parallelOrder.ts +73 -0
- package/src/parallel/core/parallelPaint.ts +16 -5
- package/src/parallel/core/parallelPalette.ts +14 -1
- package/src/parallel/core/parallelSelection.ts +99 -0
- package/src/parallel/core/parallelTicks.ts +7 -3
- package/src/parallel/core/parallelTypes.ts +13 -1
- package/src/parallel/ui/ParallelAxesLayer.tsx +10 -4
- package/src/parallel/ui/ParallelCoordinates.tsx +22 -3
- package/src/parallel/ui/ParallelLabels.tsx +23 -2
- package/src/parallel/ui/index.ts +15 -0
- package/src/parallel/ui/parallelCoordinatesProps.ts +26 -8
- package/src/parallel/ui/parallelGestureModel.ts +63 -13
- package/src/parallel/ui/parallelPlotModel.ts +3 -3
- package/src/parallel/ui/parallelStyles.ts +46 -4
- package/src/parallel/ui/useParallelAxisDrag.ts +147 -0
- package/src/parallel/ui/useParallelGesture.ts +61 -28
- package/src/structure/core/editorGuide.ts +221 -0
- package/src/structure/core/editorToolbar.ts +175 -0
- package/src/structure/core/editorToolbarGeometry.ts +80 -0
- package/src/structure/core/index.ts +29 -0
- package/src/structure/core/pendingCall.ts +59 -0
- package/src/structure/ui/EditorCanvas.tsx +9 -35
- package/src/structure/ui/EditorHelpButton.tsx +70 -0
- package/src/structure/ui/KeyCaps.tsx +40 -0
- package/src/structure/ui/StructureEditor.tsx +39 -21
- package/src/structure/ui/StructureEditorHelp.tsx +136 -0
- package/src/structure/ui/ToolbarTooltip.tsx +95 -0
- package/src/structure/ui/editorChange.ts +81 -0
- package/src/structure/ui/index.ts +5 -1
- package/src/structure/ui/useToolbarFloor.ts +7 -46
- package/src/structure/ui/useToolbarHover.ts +134 -0
- package/src/structure/ui/watchToolbar.ts +59 -0
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Where the openchemlib editor draws each toolbar button.
|
|
3
|
+
*
|
|
4
|
+
* The toolbar is two columns of seventeen square buttons inside a thin border,
|
|
5
|
+
* numbered down the first column and then down the second, as
|
|
6
|
+
* `EDITOR_TOOLBAR_BUTTONS` lists them. Every length here is in CSS pixels at
|
|
7
|
+
* the size openchemlib draws the toolbar, and is scaled by the height the
|
|
8
|
+
* toolbar is measured at, so a toolbar drawn larger still maps correctly.
|
|
9
|
+
*/
|
|
10
|
+
/** Buttons in one column of the toolbar. */
|
|
11
|
+
export const EDITOR_TOOLBAR_ROWS = 17;
|
|
12
|
+
/** Columns of the toolbar. */
|
|
13
|
+
export const EDITOR_TOOLBAR_COLUMNS = 2;
|
|
14
|
+
/** Side of one button, in CSS pixels. */
|
|
15
|
+
const BUTTON_SIZE = 21;
|
|
16
|
+
/** Border around the buttons, in CSS pixels. */
|
|
17
|
+
const BORDER = 2;
|
|
18
|
+
/** Height of the toolbar as openchemlib draws it, in CSS pixels. */
|
|
19
|
+
const DRAWN_HEIGHT = EDITOR_TOOLBAR_ROWS * BUTTON_SIZE + 2 * BORDER;
|
|
20
|
+
/**
|
|
21
|
+
* The button under a point of the toolbar.
|
|
22
|
+
* @param x - Distance from the toolbar's left edge, in CSS pixels.
|
|
23
|
+
* @param y - Distance from the toolbar's top edge, in CSS pixels.
|
|
24
|
+
* @param toolbarHeight - Height the toolbar is measured at, in CSS pixels.
|
|
25
|
+
* @returns The button's index, or -1 when the point is on no button.
|
|
26
|
+
*/
|
|
27
|
+
export function editorToolbarButtonAt(x, y, toolbarHeight) {
|
|
28
|
+
const scale = scaleOf(toolbarHeight);
|
|
29
|
+
if (scale === 0)
|
|
30
|
+
return -1;
|
|
31
|
+
const column = Math.floor((x / scale - BORDER) / BUTTON_SIZE);
|
|
32
|
+
const row = Math.floor((y / scale - BORDER) / BUTTON_SIZE);
|
|
33
|
+
if (column < 0 || column >= EDITOR_TOOLBAR_COLUMNS)
|
|
34
|
+
return -1;
|
|
35
|
+
if (row < 0 || row >= EDITOR_TOOLBAR_ROWS)
|
|
36
|
+
return -1;
|
|
37
|
+
return column * EDITOR_TOOLBAR_ROWS + row;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Where a button is drawn.
|
|
41
|
+
* @param button - The button's index.
|
|
42
|
+
* @param toolbarHeight - Height the toolbar is measured at, in CSS pixels.
|
|
43
|
+
* @returns The button's box, relative to the toolbar.
|
|
44
|
+
*/
|
|
45
|
+
export function editorToolbarButtonBox(button, toolbarHeight) {
|
|
46
|
+
const scale = scaleOf(toolbarHeight);
|
|
47
|
+
const column = Math.floor(button / EDITOR_TOOLBAR_ROWS);
|
|
48
|
+
const row = button % EDITOR_TOOLBAR_ROWS;
|
|
49
|
+
return {
|
|
50
|
+
left: (BORDER + column * BUTTON_SIZE) * scale,
|
|
51
|
+
top: (BORDER + row * BUTTON_SIZE) * scale,
|
|
52
|
+
width: BUTTON_SIZE * scale,
|
|
53
|
+
height: BUTTON_SIZE * scale,
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
function scaleOf(toolbarHeight) {
|
|
57
|
+
return Number.isFinite(toolbarHeight) && toolbarHeight > 0
|
|
58
|
+
? toolbarHeight / DRAWN_HEIGHT
|
|
59
|
+
: 0;
|
|
60
|
+
}
|
|
61
|
+
//# sourceMappingURL=editorToolbarGeometry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editorToolbarGeometry.js","sourceRoot":"","sources":["../../../src/structure/core/editorToolbarGeometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,4CAA4C;AAC5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAEtC,8BAA8B;AAC9B,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC;AAExC,yCAAyC;AACzC,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,gDAAgD;AAChD,MAAM,MAAM,GAAG,CAAC,CAAC;AAEjB,oEAAoE;AACpE,MAAM,YAAY,GAAG,mBAAmB,GAAG,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC;AAUpE;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CACnC,CAAS,EACT,CAAS,EACT,aAAqB;IAErB,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IACrC,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,CAAC,CAAC,CAAC;IAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC;IAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC;IAC3D,IAAI,MAAM,GAAG,CAAC,IAAI,MAAM,IAAI,sBAAsB;QAAE,OAAO,CAAC,CAAC,CAAC;IAC9D,IAAI,GAAG,GAAG,CAAC,IAAI,GAAG,IAAI,mBAAmB;QAAE,OAAO,CAAC,CAAC,CAAC;IACrD,OAAO,MAAM,GAAG,mBAAmB,GAAG,GAAG,CAAC;AAC5C,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CACpC,MAAc,EACd,aAAqB;IAErB,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC,CAAC;IACxD,MAAM,GAAG,GAAG,MAAM,GAAG,mBAAmB,CAAC;IACzC,OAAO;QACL,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC,GAAG,KAAK;QAC7C,GAAG,EAAE,CAAC,MAAM,GAAG,GAAG,GAAG,WAAW,CAAC,GAAG,KAAK;QACzC,KAAK,EAAE,WAAW,GAAG,KAAK;QAC1B,MAAM,EAAE,WAAW,GAAG,KAAK;KAC5B,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,aAAqB;IACpC,OAAO,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,aAAa,GAAG,CAAC;QACxD,CAAC,CAAC,aAAa,GAAG,YAAY;QAC9B,CAAC,CAAC,CAAC,CAAC;AACR,CAAC"}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
export type { AtomLabelPlacement, LabelledMolecule } from './atomLabels.ts';
|
|
2
2
|
export { applyAtomLabels, customAtomLabel } from './atomLabels.ts';
|
|
3
|
+
export type { EditorGesture, EditorGuideKey, EditorGuideLink, EditorGuideOptions, EditorGuideScope, EditorGuideSection, } from './editorGuide.ts';
|
|
4
|
+
export { STRUCTURE_EDITOR_DOCS, STRUCTURE_EDITOR_GUIDE, editorGuideSections, editorKeyLabel, } from './editorGuide.ts';
|
|
5
|
+
export type { EditorToolbarAvailability, EditorToolbarButton, } from './editorToolbar.ts';
|
|
6
|
+
export { EDITOR_TOOLBAR_BUTTONS, isEditorToolbarButtonAvailable, } from './editorToolbar.ts';
|
|
7
|
+
export type { EditorToolbarButtonBox } from './editorToolbarGeometry.ts';
|
|
8
|
+
export { EDITOR_TOOLBAR_COLUMNS, EDITOR_TOOLBAR_ROWS, editorToolbarButtonAt, editorToolbarButtonBox, } from './editorToolbarGeometry.ts';
|
|
3
9
|
export type { EditorLine, EditorValue } from './editorValue.ts';
|
|
4
10
|
export type { IdCodeValue } from './editorValue.ts';
|
|
5
11
|
export { isEmptyIdCode, splitEditorValue, splitIdCode } from './editorValue.ts';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,YAAY,EACV,aAAa,EACb,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,sBAAsB,EACtB,8BAA8B,GAC/B,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChF,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
export { applyAtomLabels, customAtomLabel } from "./atomLabels.js";
|
|
2
|
+
export { STRUCTURE_EDITOR_DOCS, STRUCTURE_EDITOR_GUIDE, editorGuideSections, editorKeyLabel, } from "./editorGuide.js";
|
|
3
|
+
export { EDITOR_TOOLBAR_BUTTONS, isEditorToolbarButtonAvailable, } from "./editorToolbar.js";
|
|
4
|
+
export { EDITOR_TOOLBAR_COLUMNS, EDITOR_TOOLBAR_ROWS, editorToolbarButtonAt, editorToolbarButtonBox, } from "./editorToolbarGeometry.js";
|
|
2
5
|
export { isEmptyIdCode, splitEditorValue, splitIdCode } from "./editorValue.js";
|
|
3
6
|
export { fragmentQuery, sameFragmentQuery } from "./fragmentQuery.js";
|
|
4
7
|
export { classifyMolfile, looksLikeMolfile, molfileAtomCount, } from "./molfile.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/structure/core/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AASnE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAK1B,OAAO,EACL,sBAAsB,EACtB,8BAA8B,GAC/B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,sBAAsB,EACtB,mBAAmB,EACnB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEtE,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/** A call held back until its value has been still, which can be cut short. */
|
|
2
|
+
export interface PendingCall<TValue> {
|
|
3
|
+
/**
|
|
4
|
+
* Hold a value back, replacing whichever one was waiting.
|
|
5
|
+
* @param value - The value to deliver.
|
|
6
|
+
* @param delay - How long to wait, in milliseconds; `0` or less delivers now.
|
|
7
|
+
* @param deliver - What the value is handed to.
|
|
8
|
+
*/
|
|
9
|
+
push: (value: TValue, delay: number, deliver: (value: TValue) => void) => void;
|
|
10
|
+
/** Forget the value waiting, which is then never delivered. */
|
|
11
|
+
drop: () => void;
|
|
12
|
+
/** Deliver the value waiting now rather than when its delay runs out. */
|
|
13
|
+
flush: () => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* A trailing debounce for one value at a time, whose waiting value can be
|
|
17
|
+
* delivered early or thrown away.
|
|
18
|
+
* @returns The pending call, holding nothing.
|
|
19
|
+
*/
|
|
20
|
+
export declare function createPendingCall<TValue>(): PendingCall<TValue>;
|
|
21
|
+
//# sourceMappingURL=pendingCall.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pendingCall.d.ts","sourceRoot":"","sources":["../../../src/structure/core/pendingCall.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,WAAW,WAAW,CAAC,MAAM;IACjC;;;;;OAKG;IACH,IAAI,EAAE,CACJ,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAC7B,IAAI,CAAC;IACV,+DAA+D;IAC/D,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,yEAAyE;IACzE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,CAAC,CAkC/D"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A trailing debounce for one value at a time, whose waiting value can be
|
|
3
|
+
* delivered early or thrown away.
|
|
4
|
+
* @returns The pending call, holding nothing.
|
|
5
|
+
*/
|
|
6
|
+
export function createPendingCall() {
|
|
7
|
+
let pending = null;
|
|
8
|
+
function drop() {
|
|
9
|
+
if (pending === null)
|
|
10
|
+
return;
|
|
11
|
+
clearTimeout(pending.timer);
|
|
12
|
+
pending = null;
|
|
13
|
+
}
|
|
14
|
+
return {
|
|
15
|
+
push(value, delay, deliver) {
|
|
16
|
+
drop();
|
|
17
|
+
if (delay <= 0) {
|
|
18
|
+
deliver(value);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const timer = setTimeout(() => {
|
|
22
|
+
pending = null;
|
|
23
|
+
deliver(value);
|
|
24
|
+
}, delay);
|
|
25
|
+
pending = { value, deliver, timer };
|
|
26
|
+
},
|
|
27
|
+
drop,
|
|
28
|
+
flush() {
|
|
29
|
+
if (pending === null)
|
|
30
|
+
return;
|
|
31
|
+
const { value, deliver } = pending;
|
|
32
|
+
drop();
|
|
33
|
+
deliver(value);
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=pendingCall.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pendingCall.js","sourceRoot":"","sources":["../../../src/structure/core/pendingCall.ts"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,MAAM,UAAU,iBAAiB;IAC/B,IAAI,OAAO,GAIA,IAAI,CAAC;IAEhB,SAAS,IAAI;QACX,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,OAAO,GAAG,IAAI,CAAC;IACjB,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO;YACxB,IAAI,EAAE,CAAC;YACP,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5B,OAAO,GAAG,IAAI,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,EAAE,KAAK,CAAC,CAAC;YACV,OAAO,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACtC,CAAC;QACD,IAAI;QACJ,KAAK;YACH,IAAI,OAAO,KAAK,IAAI;gBAAE,OAAO;YAC7B,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;YACnC,IAAI,EAAE,CAAC;YACP,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC"}
|
|
@@ -1,21 +1,6 @@
|
|
|
1
1
|
import type { ReactElement } from 'react';
|
|
2
2
|
import type { CanvasEditorInputFormat } from 'react-ocl';
|
|
3
|
-
|
|
4
|
-
export type StructureEditorMode = 'molecule' | 'reaction';
|
|
5
|
-
/** Everything the editor holds at the moment it changed. */
|
|
6
|
-
export interface StructureEditorChange {
|
|
7
|
-
/** Which kind of editor produced it. */
|
|
8
|
-
mode: StructureEditorMode;
|
|
9
|
-
/**
|
|
10
|
-
* The idCode, with the coordinates the editor laid out written after a
|
|
11
|
-
* space. `splitIdCode` takes the two apart.
|
|
12
|
-
*/
|
|
13
|
-
idCode: string;
|
|
14
|
-
/** The V2000 molfile of a molecule, or the RXN file of a reaction. */
|
|
15
|
-
molfile: string;
|
|
16
|
-
/** The SMILES of a molecule, or the reaction SMILES. */
|
|
17
|
-
smiles: string;
|
|
18
|
-
}
|
|
3
|
+
import type { StructureEditorChange, StructureEditorMode } from './editorChange.ts';
|
|
19
4
|
interface EditorCanvasProps {
|
|
20
5
|
/** Called on every stroke, with the editor read out synchronously. */
|
|
21
6
|
onChange: (change: StructureEditorChange) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,uBAAuB,EAGxB,MAAM,WAAW,CAAC;AAGnB,
|
|
1
|
+
{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,uBAAuB,EAGxB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAG3B,UAAU,iBAAiB;IACzB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA6CnE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useState } from 'react';
|
|
3
3
|
import { CanvasMoleculeEditor, CanvasReactionEditor } from 'react-ocl';
|
|
4
|
+
import { moleculeChange, reactionChange } from "./editorChange.js";
|
|
4
5
|
/**
|
|
5
6
|
* The react-ocl canvas, filling whatever box it is put in.
|
|
6
7
|
*
|
|
@@ -12,24 +13,10 @@ import { CanvasMoleculeEditor, CanvasReactionEditor } from 'react-ocl';
|
|
|
12
13
|
export function EditorCanvas(props) {
|
|
13
14
|
const { onChange, fragment = false, inputFormat = 'idcode', value = '', mode = 'molecule', } = props;
|
|
14
15
|
const [initialValue] = useState(value);
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
mode: 'molecule',
|
|
20
|
-
idCode: event.getIdcode(),
|
|
21
|
-
molfile: event.getMolfile(),
|
|
22
|
-
smiles: event.getSmiles(),
|
|
23
|
-
});
|
|
24
|
-
}, [onChange]);
|
|
25
|
-
const handleReaction = useCallback((event) => {
|
|
26
|
-
onChange({
|
|
27
|
-
mode: 'reaction',
|
|
28
|
-
idCode: event.getIdcode(),
|
|
29
|
-
molfile: event.getRxn(),
|
|
30
|
-
smiles: event.getSmiles(),
|
|
31
|
-
});
|
|
32
|
-
}, [onChange]);
|
|
16
|
+
// The event describes the editor only while the callback runs, so it is read
|
|
17
|
+
// out now and whatever waiting there is happens afterwards.
|
|
18
|
+
const handleMolecule = useCallback((event) => onChange(moleculeChange(event)), [onChange]);
|
|
19
|
+
const handleReaction = useCallback((event) => onChange(reactionChange(event)), [onChange]);
|
|
33
20
|
return (_jsx("div", { style: CANVAS_STYLE, children: mode === 'reaction' ? (_jsx(CanvasReactionEditor, { width: "100%", height: "100%", fragment: fragment, inputFormat: inputFormat, inputValue: initialValue, onChange: handleReaction })) : (_jsx(CanvasMoleculeEditor, { width: "100%", height: "100%", fragment: fragment, inputFormat: inputFormat, inputValue: initialValue, onChange: handleMolecule })) }));
|
|
34
21
|
}
|
|
35
22
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorCanvas.js","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM9C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorCanvas.js","sourceRoot":"","sources":["../../../src/structure/ui/EditorCanvas.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAM9C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAMvE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA8BnE;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,QAAQ,EACtB,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,UAAU,GAClB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEvC,6EAA6E;IAC7E,4DAA4D;IAC5D,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACxE,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACxE,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,YAAY,YACrB,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACrB,KAAC,oBAAoB,IACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,YAAY,EACxB,QAAQ,EAAE,cAAc,GACxB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IACnB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,YAAY,EACxB,QAAQ,EAAE,cAAc,GACxB,CACH,GACG,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { ReactElement, RefObject } from 'react';
|
|
2
|
+
import type { StructureEditorMode } from './editorChange.ts';
|
|
3
|
+
/** What {@link EditorHelpButton} needs. */
|
|
4
|
+
export interface EditorHelpButtonProps {
|
|
5
|
+
/** The element wrapping the editor, which F1 is listened for on. */
|
|
6
|
+
containerRef: RefObject<HTMLElement | null>;
|
|
7
|
+
/** Which editor the guide is written for. */
|
|
8
|
+
mode: StructureEditorMode;
|
|
9
|
+
/** Whether the editor draws a query fragment. */
|
|
10
|
+
fragment: boolean;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* The editor's help button, in the corner of the drawing, opening the guide to
|
|
14
|
+
* the mouse and the keyboard.
|
|
15
|
+
*
|
|
16
|
+
* F1 opens it too: openchemlib binds that key to a help dialog it does not
|
|
17
|
+
* implement on the web.
|
|
18
|
+
* @param props - See {@link EditorHelpButtonProps}.
|
|
19
|
+
* @returns The button and its popover.
|
|
20
|
+
*/
|
|
21
|
+
export declare function EditorHelpButton(props: EditorHelpButtonProps): ReactElement;
|
|
22
|
+
//# sourceMappingURL=EditorHelpButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorHelpButton.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/EditorHelpButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC,oEAAoE;IACpE,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,6CAA6C;IAC7C,IAAI,EAAE,mBAAmB,CAAC;IAC1B,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAmC3E"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button, PopoverNext, Tooltip } from '@blueprintjs/core';
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { StructureEditorHelp } from "./StructureEditorHelp.js";
|
|
5
|
+
/**
|
|
6
|
+
* The editor's help button, in the corner of the drawing, opening the guide to
|
|
7
|
+
* the mouse and the keyboard.
|
|
8
|
+
*
|
|
9
|
+
* F1 opens it too: openchemlib binds that key to a help dialog it does not
|
|
10
|
+
* implement on the web.
|
|
11
|
+
* @param props - See {@link EditorHelpButtonProps}.
|
|
12
|
+
* @returns The button and its popover.
|
|
13
|
+
*/
|
|
14
|
+
export function EditorHelpButton(props) {
|
|
15
|
+
const { containerRef, mode, fragment } = props;
|
|
16
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const container = containerRef.current;
|
|
19
|
+
if (container === null)
|
|
20
|
+
return;
|
|
21
|
+
const onKeyDown = (event) => {
|
|
22
|
+
if (event.key !== 'F1')
|
|
23
|
+
return;
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
setIsOpen(true);
|
|
26
|
+
};
|
|
27
|
+
container.addEventListener('keydown', onKeyDown);
|
|
28
|
+
return () => container.removeEventListener('keydown', onKeyDown);
|
|
29
|
+
}, [containerRef]);
|
|
30
|
+
return (_jsx("div", { style: CORNER_STYLE, children: _jsx(PopoverNext, { isOpen: isOpen, onInteraction: setIsOpen, placement: "left-start", content: _jsx(StructureEditorHelp, { mode: mode, fragment: fragment }), children: _jsx(Tooltip, { content: LABEL, placement: "left", disabled: isOpen, children: _jsx(Button, { variant: "minimal", size: "small", icon: "help", "aria-label": LABEL }) }) }) }));
|
|
31
|
+
}
|
|
32
|
+
const LABEL = 'Mouse and keyboard';
|
|
33
|
+
const CORNER_STYLE = {
|
|
34
|
+
position: 'absolute',
|
|
35
|
+
top: 4,
|
|
36
|
+
right: 4,
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=EditorHelpButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorHelpButton.js","sourceRoot":"","sources":["../../../src/structure/ui/EditorHelpButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAahE;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,SAAS,KAAK,IAAI;YAAE,OAAO;QAC/B,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI;gBAAE,OAAO;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,CAAC;QACF,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,cAAK,KAAK,EAAE,YAAY,YACtB,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,SAAS,EACxB,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,KAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,YAEhE,KAAC,OAAO,IAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM,EAAC,QAAQ,EAAE,MAAM,YACxD,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,MAAM,gBACC,KAAK,GACjB,GACM,GACE,GACV,CACP,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,oBAAoB,CAAC;AAEnC,MAAM,YAAY,GAAkB;IAClC,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;CACT,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Keys pressed together, each drawn as a key cap, `Mod` as the modifier the
|
|
4
|
+
* editor listens to on this platform.
|
|
5
|
+
* @param props - The keys.
|
|
6
|
+
* @param props.keys - The keys, unique within the list.
|
|
7
|
+
* @returns The key caps.
|
|
8
|
+
*/
|
|
9
|
+
export declare function KeyCaps(props: {
|
|
10
|
+
keys: readonly string[];
|
|
11
|
+
}): ReactElement;
|
|
12
|
+
//# sourceMappingURL=KeyCaps.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyCaps.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/KeyCaps.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,GAAG,YAAY,CAWxE"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Classes } from '@blueprintjs/core';
|
|
3
|
+
import { editorKeyLabel } from "../core/editorGuide.js";
|
|
4
|
+
/**
|
|
5
|
+
* Keys pressed together, each drawn as a key cap, `Mod` as the modifier the
|
|
6
|
+
* editor listens to on this platform.
|
|
7
|
+
* @param props - The keys.
|
|
8
|
+
* @param props.keys - The keys, unique within the list.
|
|
9
|
+
* @returns The key caps.
|
|
10
|
+
*/
|
|
11
|
+
export function KeyCaps(props) {
|
|
12
|
+
const isMac = isMacPlatform();
|
|
13
|
+
return (_jsx("span", { style: KEYS_STYLE, children: props.keys.map((key) => (_jsx("kbd", { className: Classes.KEY, children: editorKeyLabel(key, isMac) }, key))) }));
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Whether the page runs on a Mac, decided as openchemlib decides it, so the
|
|
17
|
+
* cap shown is the modifier the editor actually reads: ⌘ there, Ctrl elsewhere.
|
|
18
|
+
* @returns True on a Mac.
|
|
19
|
+
*/
|
|
20
|
+
function isMacPlatform() {
|
|
21
|
+
return typeof navigator !== 'undefined' && navigator.platform === 'MacIntel';
|
|
22
|
+
}
|
|
23
|
+
const KEYS_STYLE = {
|
|
24
|
+
display: 'inline-flex',
|
|
25
|
+
alignItems: 'center',
|
|
26
|
+
gap: 3,
|
|
27
|
+
whiteSpace: 'nowrap',
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=KeyCaps.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyCaps.js","sourceRoot":"","sources":["../../../src/structure/ui/KeyCaps.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,KAAkC;IACxD,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,OAAO,CACL,eAAM,KAAK,EAAE,UAAU,YACpB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACvB,cAAe,SAAS,EAAE,OAAO,CAAC,GAAG,YAClC,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IADnB,GAAG,CAEP,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,aAAa;IACpB,OAAO,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,CAAC,QAAQ,KAAK,UAAU,CAAC;AAC/E,CAAC;AAED,MAAM,UAAU,GAAkB;IAChC,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;IACN,UAAU,EAAE,QAAQ;CACrB,CAAC"}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import type { CSSProperties, ReactElement } from 'react';
|
|
10
10
|
import type { CanvasEditorInputFormat } from 'react-ocl';
|
|
11
|
-
import type { StructureEditorChange, StructureEditorMode } from './
|
|
11
|
+
import type { StructureEditorChange, StructureEditorMode } from './editorChange.ts';
|
|
12
12
|
/** What {@link StructureEditor} needs. */
|
|
13
13
|
export interface StructureEditorProps {
|
|
14
14
|
/**
|
|
@@ -61,6 +61,12 @@ export interface StructureEditorProps {
|
|
|
61
61
|
* @default 'molecule'
|
|
62
62
|
*/
|
|
63
63
|
mode?: StructureEditorMode;
|
|
64
|
+
/**
|
|
65
|
+
* Explain each toolbar button in a tooltip, and put a button in the corner
|
|
66
|
+
* that opens a guide to the mouse and the keyboard, which F1 opens too.
|
|
67
|
+
* @default true
|
|
68
|
+
*/
|
|
69
|
+
help?: boolean;
|
|
64
70
|
/**
|
|
65
71
|
* Class the container carries, so a site can reach it from its stylesheet.
|
|
66
72
|
* @default undefined
|
|
@@ -74,7 +80,8 @@ export interface StructureEditorProps {
|
|
|
74
80
|
}
|
|
75
81
|
/**
|
|
76
82
|
* The canvas structure editor, sized to fill its container and never to hide
|
|
77
|
-
* part of its toolbar
|
|
83
|
+
* part of its toolbar, with a tooltip on every toolbar button and a guide to
|
|
84
|
+
* the keys.
|
|
78
85
|
* @param props - What to draw, when to reload it, and where to send it.
|
|
79
86
|
* @returns The editor.
|
|
80
87
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StructureEditor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"StructureEditor.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AASzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAOzD,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAQ3B,0CAA0C;AAC1C,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8CzE"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Suspense, lazy, useCallback, useEffect, useRef } from 'react';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Suspense, lazy, useCallback, useEffect, useRef, useState, } from 'react';
|
|
3
3
|
import { TOKEN } from "../../tokens/core/familyTokens.js";
|
|
4
|
+
import { createPendingCall } from "../core/pendingCall.js";
|
|
5
|
+
import { EditorHelpButton } from "./EditorHelpButton.js";
|
|
6
|
+
import { ToolbarTooltip } from "./ToolbarTooltip.js";
|
|
4
7
|
import { useToolbarFloor } from "./useToolbarFloor.js";
|
|
5
8
|
const EditorCanvas = lazy(async () => {
|
|
6
9
|
const module = await import("./EditorCanvas.js");
|
|
@@ -8,21 +11,24 @@ const EditorCanvas = lazy(async () => {
|
|
|
8
11
|
});
|
|
9
12
|
/**
|
|
10
13
|
* The canvas structure editor, sized to fill its container and never to hide
|
|
11
|
-
* part of its toolbar
|
|
14
|
+
* part of its toolbar, with a tooltip on every toolbar button and a guide to
|
|
15
|
+
* the keys.
|
|
12
16
|
* @param props - What to draw, when to reload it, and where to send it.
|
|
13
17
|
* @returns The editor.
|
|
14
18
|
*/
|
|
15
19
|
export function StructureEditor(props) {
|
|
16
|
-
const { onChange, fragment = false, inputFormat = 'idcode', value = '', revision = 0, debounce = 300, minHeight = 320, mode = 'molecule', className, style, } = props;
|
|
20
|
+
const { onChange, fragment = false, inputFormat = 'idcode', value = '', revision = 0, debounce = 300, minHeight = 320, mode = 'molecule', help = true, className, style, } = props;
|
|
17
21
|
const containerRef = useToolbarFloor({ minHeight, revision });
|
|
18
22
|
const handleChange = useDebounced(onChange, debounce, revision);
|
|
19
|
-
return (_jsx("div", { ref: containerRef, className: className, style: { ...ROOT_STYLE, minHeight, ...style }, children:
|
|
23
|
+
return (_jsx("div", { ref: containerRef, className: className, style: { ...ROOT_STYLE, minHeight, ...style }, children: _jsxs(Suspense, { fallback: _jsx("div", { style: LOADING_STYLE, children: "Loading the editor\u2026" }), children: [_jsx(EditorCanvas, { onChange: handleChange, fragment: fragment, inputFormat: inputFormat, value: value, mode: mode }, revision), help ? (_jsxs(_Fragment, { children: [_jsx(ToolbarTooltip, { containerRef: containerRef, mode: mode }), _jsx(EditorHelpButton, { containerRef: containerRef, mode: mode, fragment: fragment })] })) : null] }) }));
|
|
20
24
|
}
|
|
21
25
|
/**
|
|
22
26
|
* Report the last edit of a burst rather than every one of them.
|
|
23
27
|
*
|
|
24
28
|
* The editor's own event is read out before the wait starts, so what arrives
|
|
25
29
|
* late is a plain object rather than a handle on an editor that has moved on.
|
|
30
|
+
* An editor removed mid-burst — a tab switched, a card folded — still reports
|
|
31
|
+
* its last edit, which would otherwise be lost with the timer.
|
|
26
32
|
* @param onChange - What the caller wants told.
|
|
27
33
|
* @param delay - How long the drawing has to be still, in milliseconds.
|
|
28
34
|
* @param resetKey - Dropped edits: a burst still waiting when the caller
|
|
@@ -30,31 +36,18 @@ export function StructureEditor(props) {
|
|
|
30
36
|
* @returns The handler to give the canvas.
|
|
31
37
|
*/
|
|
32
38
|
function useDebounced(onChange, delay, resetKey) {
|
|
33
|
-
const
|
|
39
|
+
const [pending] = useState((createPendingCall));
|
|
34
40
|
const onChangeRef = useRef(onChange);
|
|
35
41
|
useEffect(() => {
|
|
36
42
|
onChangeRef.current = onChange;
|
|
37
43
|
});
|
|
38
44
|
useEffect(() => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
timerRef.current = null;
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
}, [resetKey]);
|
|
45
|
+
pending.drop();
|
|
46
|
+
}, [pending, resetKey]);
|
|
47
|
+
useEffect(() => () => pending.flush(), [pending]);
|
|
46
48
|
return useCallback((change) => {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (delay <= 0) {
|
|
50
|
-
onChangeRef.current(change);
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
timerRef.current = setTimeout(() => {
|
|
54
|
-
timerRef.current = null;
|
|
55
|
-
onChangeRef.current(change);
|
|
56
|
-
}, delay);
|
|
57
|
-
}, [delay]);
|
|
49
|
+
pending.push(change, delay, (value) => onChangeRef.current(value));
|
|
50
|
+
}, [pending, delay]);
|
|
58
51
|
}
|
|
59
52
|
/**
|
|
60
53
|
* The canvas is positioned out of the height computation, so the container's
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StructureEditor.js","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditor.tsx"],"names":[],"mappings":";AAUA,OAAO,
|
|
1
|
+
{"version":3,"file":"StructureEditor.js","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* What the keyboard and the mouse do in the structure editor, shown in the
|
|
3
|
+
* editor's help popover, and usable by a site on a page of its own.
|
|
4
|
+
*/
|
|
5
|
+
import type { ReactElement } from 'react';
|
|
6
|
+
import type { EditorGuideOptions } from '../core/editorGuide.ts';
|
|
7
|
+
/** What {@link StructureEditorHelp} is written for. */
|
|
8
|
+
export type StructureEditorHelpProps = EditorGuideOptions;
|
|
9
|
+
/**
|
|
10
|
+
* The guide to the structure editor: the keys that change the atom or bond
|
|
11
|
+
* under the pointer, the selection gestures, the stereo conventions, and links
|
|
12
|
+
* to the full documentation. Gestures that do nothing in the given editor are
|
|
13
|
+
* left out.
|
|
14
|
+
* @param props - See {@link StructureEditorHelpProps}.
|
|
15
|
+
* @returns The guide.
|
|
16
|
+
*/
|
|
17
|
+
export declare function StructureEditorHelp(props: StructureEditorHelpProps): ReactElement;
|
|
18
|
+
//# sourceMappingURL=StructureEditorHelp.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StructureEditorHelp.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditorHelp.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAiB,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQhF,uDAAuD;AACvD,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,CAAC;AAE1D;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAwCd"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* What the keyboard and the mouse do in the structure editor, shown in the
|
|
4
|
+
* editor's help popover, and usable by a site on a page of its own.
|
|
5
|
+
*/
|
|
6
|
+
import { Classes } from '@blueprintjs/core';
|
|
7
|
+
import { TOKEN } from "../../tokens/core/familyTokens.js";
|
|
8
|
+
import { STRUCTURE_EDITOR_DOCS, editorGuideSections, } from "../core/editorGuide.js";
|
|
9
|
+
import { KeyCaps } from "./KeyCaps.js";
|
|
10
|
+
/**
|
|
11
|
+
* The guide to the structure editor: the keys that change the atom or bond
|
|
12
|
+
* under the pointer, the selection gestures, the stereo conventions, and links
|
|
13
|
+
* to the full documentation. Gestures that do nothing in the given editor are
|
|
14
|
+
* left out.
|
|
15
|
+
* @param props - See {@link StructureEditorHelpProps}.
|
|
16
|
+
* @returns The guide.
|
|
17
|
+
*/
|
|
18
|
+
export function StructureEditorHelp(props) {
|
|
19
|
+
const sections = editorGuideSections(props);
|
|
20
|
+
return (_jsxs("div", { style: PANEL_STYLE, "data-testid": "structure-editor-help", children: [_jsx("p", { className: Classes.TEXT_MUTED, style: PARAGRAPH_STYLE, children: "Hover a toolbar button to see what it does and its key." }), _jsx("div", { style: GRID_STYLE, children: sections.map((section) => (_jsxs("section", { style: ROW_STYLE, children: [_jsx("h4", { style: HEADING_STYLE, children: section.title }), section.gestures.map((gesture) => (_jsxs("div", { style: ROW_STYLE, children: [_jsx(GestureInput, { input: gesture.input }), _jsx("span", { children: gesture.action })] }, gestureKey(gesture)))), section.note === undefined ? null : (_jsx("p", { className: Classes.TEXT_MUTED, style: NOTE_STYLE, children: section.note }))] }, section.title))) }), _jsxs("p", { style: PARAGRAPH_STYLE, children: ["Learn more:", ' ', STRUCTURE_EDITOR_DOCS.map((link, index) => (_jsxs("span", { children: [index === 0 ? null : ' · ', _jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title })] }, link.url)))] })] }));
|
|
21
|
+
}
|
|
22
|
+
function GestureInput(props) {
|
|
23
|
+
return (_jsx("span", { style: INPUT_STYLE, children: props.input.map((part) => typeof part === 'string' ? (_jsx("span", { children: part }, part)) : (_jsx(KeyCaps, { keys: [part.key] }, part.key))) }));
|
|
24
|
+
}
|
|
25
|
+
function gestureKey(gesture) {
|
|
26
|
+
const input = gesture.input
|
|
27
|
+
.map((part) => (typeof part === 'string' ? part : part.key))
|
|
28
|
+
.join(' ');
|
|
29
|
+
return `${input} ${gesture.action}`;
|
|
30
|
+
}
|
|
31
|
+
const PANEL_STYLE = {
|
|
32
|
+
display: 'flex',
|
|
33
|
+
flexDirection: 'column',
|
|
34
|
+
gap: 10,
|
|
35
|
+
width: 400,
|
|
36
|
+
maxHeight: 'min(70vh, 36rem)',
|
|
37
|
+
overflowY: 'auto',
|
|
38
|
+
padding: 12,
|
|
39
|
+
fontSize: 12,
|
|
40
|
+
};
|
|
41
|
+
const GRID_STYLE = {
|
|
42
|
+
display: 'grid',
|
|
43
|
+
gridTemplateColumns: 'max-content minmax(0, 1fr)',
|
|
44
|
+
alignItems: 'center',
|
|
45
|
+
columnGap: 12,
|
|
46
|
+
rowGap: 6,
|
|
47
|
+
};
|
|
48
|
+
const ROW_STYLE = { display: 'contents' };
|
|
49
|
+
const HEADING_STYLE = {
|
|
50
|
+
gridColumn: '1 / -1',
|
|
51
|
+
margin: '8px 0 0',
|
|
52
|
+
paddingBottom: 3,
|
|
53
|
+
borderBottom: `1px solid ${TOKEN.border}`,
|
|
54
|
+
color: TOKEN.textMuted,
|
|
55
|
+
fontSize: 11,
|
|
56
|
+
fontWeight: 700,
|
|
57
|
+
letterSpacing: '0.04em',
|
|
58
|
+
textTransform: 'uppercase',
|
|
59
|
+
};
|
|
60
|
+
const INPUT_STYLE = {
|
|
61
|
+
display: 'flex',
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
gap: 4,
|
|
64
|
+
whiteSpace: 'nowrap',
|
|
65
|
+
};
|
|
66
|
+
const PARAGRAPH_STYLE = { margin: 0, lineHeight: 1.45 };
|
|
67
|
+
const NOTE_STYLE = { ...PARAGRAPH_STYLE, gridColumn: '1 / -1' };
|
|
68
|
+
//# sourceMappingURL=StructureEditorHelp.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StructureEditorHelp.js","sourceRoot":"","sources":["../../../src/structure/ui/StructureEditorHelp.tsx"],"names":[],"mappings":"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"}
|