react-cheminfo 0.50.0 → 0.52.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 +71 -16
- package/bin/check-seo.mjs +0 -0
- package/lib/clipboard/core/index.d.ts +0 -1
- package/lib/clipboard/core/index.d.ts.map +1 -1
- package/lib/clipboard/core/index.js +0 -1
- package/lib/clipboard/core/index.js.map +1 -1
- package/lib/clipboard/ui/CopyButton.d.ts +6 -0
- package/lib/clipboard/ui/CopyButton.d.ts.map +1 -1
- package/lib/clipboard/ui/CopyButton.js +5 -2
- package/lib/clipboard/ui/CopyButton.js.map +1 -1
- package/lib/color/core/index.d.ts +3 -0
- package/lib/color/core/index.d.ts.map +1 -1
- package/lib/color/core/index.js +2 -0
- package/lib/color/core/index.js.map +1 -1
- package/lib/color/core/interpolate.d.ts +4 -2
- package/lib/color/core/interpolate.d.ts.map +1 -1
- package/lib/color/core/interpolate.js +34 -12
- package/lib/color/core/interpolate.js.map +1 -1
- package/lib/color/core/stops.d.ts +43 -0
- package/lib/color/core/stops.d.ts.map +1 -0
- package/lib/color/core/stops.js +66 -0
- package/lib/color/core/stops.js.map +1 -0
- package/lib/color/core/tone.d.ts +25 -0
- package/lib/color/core/tone.d.ts.map +1 -0
- package/lib/color/core/tone.js +67 -0
- package/lib/color/core/tone.js.map +1 -0
- package/lib/color/core/uniform.d.ts +36 -0
- package/lib/color/core/uniform.d.ts.map +1 -0
- package/lib/color/core/uniform.js +61 -0
- package/lib/color/core/uniform.js.map +1 -0
- package/lib/color/ui/ColorScaleEditor.d.ts +5 -6
- package/lib/color/ui/ColorScaleEditor.d.ts.map +1 -1
- package/lib/color/ui/ColorScaleEditor.js +74 -84
- package/lib/color/ui/ColorScaleEditor.js.map +1 -1
- package/lib/color/ui/ColorScaleSelect.d.ts +16 -0
- package/lib/color/ui/ColorScaleSelect.d.ts.map +1 -1
- package/lib/color/ui/ColorScaleSelect.js +69 -17
- package/lib/color/ui/ColorScaleSelect.js.map +1 -1
- package/lib/color/ui/ColorScaleTone.d.ts +17 -0
- package/lib/color/ui/ColorScaleTone.d.ts.map +1 -0
- package/lib/color/ui/ColorScaleTone.js +55 -0
- package/lib/color/ui/ColorScaleTone.js.map +1 -0
- package/lib/color/ui/ColorScaleTrack.d.ts +29 -0
- package/lib/color/ui/ColorScaleTrack.d.ts.map +1 -0
- package/lib/color/ui/ColorScaleTrack.js +143 -0
- package/lib/color/ui/ColorScaleTrack.js.map +1 -0
- package/lib/download/core/copyFigure.d.ts +14 -0
- package/lib/download/core/copyFigure.d.ts.map +1 -0
- package/lib/download/core/copyFigure.js +18 -0
- package/lib/download/core/copyFigure.js.map +1 -0
- package/lib/download/core/figureHtml.js +1 -0
- package/lib/download/core/figureHtml.js.map +1 -1
- package/lib/download/core/figureHtmlMarkup.d.ts +10 -0
- package/lib/download/core/figureHtmlMarkup.d.ts.map +1 -1
- package/lib/download/core/figureHtmlMarkup.js +7 -1
- package/lib/download/core/figureHtmlMarkup.js.map +1 -1
- package/lib/download/core/index.d.ts +2 -0
- package/lib/download/core/index.d.ts.map +1 -1
- package/lib/download/core/index.js +1 -0
- package/lib/download/core/index.js.map +1 -1
- package/lib/download/ui/FigureDownloadPanel.d.ts +2 -3
- package/lib/download/ui/FigureDownloadPanel.d.ts.map +1 -1
- package/lib/download/ui/FigureDownloadPanel.js +1 -1
- package/lib/download/ui/FigureDownloadPanel.js.map +1 -1
- package/lib/download/ui/figureDownloadHint.d.ts +1 -1
- package/lib/download/ui/figureDownloadHint.d.ts.map +1 -1
- package/lib/download/ui/figureDownloadHint.js.map +1 -1
- package/lib/download/ui/index.d.ts +0 -1
- package/lib/download/ui/index.d.ts.map +1 -1
- package/lib/download/ui/useFigureActions.d.ts +2 -11
- package/lib/download/ui/useFigureActions.d.ts.map +1 -1
- package/lib/download/ui/useFigureActions.js +4 -23
- package/lib/download/ui/useFigureActions.js.map +1 -1
- package/lib/download/ui/useFigureTask.d.ts +21 -0
- package/lib/download/ui/useFigureTask.d.ts.map +1 -0
- package/lib/download/ui/useFigureTask.js +27 -0
- package/lib/download/ui/useFigureTask.js.map +1 -0
- package/lib/host/core/connectHost.d.ts +75 -0
- package/lib/host/core/connectHost.d.ts.map +1 -0
- package/lib/host/core/connectHost.js +171 -0
- package/lib/host/core/connectHost.js.map +1 -0
- package/lib/host/core/hostStructure.d.ts +52 -0
- package/lib/host/core/hostStructure.d.ts.map +1 -0
- package/lib/host/core/hostStructure.js +106 -0
- package/lib/host/core/hostStructure.js.map +1 -0
- package/lib/host/core/index.d.ts +9 -0
- package/lib/host/core/index.d.ts.map +1 -0
- package/lib/host/core/index.js +5 -0
- package/lib/host/core/index.js.map +1 -0
- package/lib/host/core/kinds.d.ts +73 -0
- package/lib/host/core/kinds.d.ts.map +1 -0
- package/lib/host/core/kinds.js +88 -0
- package/lib/host/core/kinds.js.map +1 -0
- package/lib/host/core/protocol.d.ts +134 -0
- package/lib/host/core/protocol.d.ts.map +1 -0
- package/lib/host/core/protocol.js +92 -0
- package/lib/host/core/protocol.js.map +1 -0
- package/lib/host/testing/sciPeaks.d.ts +21 -0
- package/lib/host/testing/sciPeaks.d.ts.map +1 -0
- package/lib/host/testing/sciPeaks.js +62 -0
- package/lib/host/testing/sciPeaks.js.map +1 -0
- package/lib/host/testing/standInHost.d.ts +47 -0
- package/lib/host/testing/standInHost.d.ts.map +1 -0
- package/lib/host/testing/standInHost.js +85 -0
- package/lib/host/testing/standInHost.js.map +1 -0
- package/lib/host/ui/index.d.ts +3 -0
- package/lib/host/ui/index.d.ts.map +1 -0
- package/lib/host/ui/index.js +2 -0
- package/lib/host/ui/index.js.map +1 -0
- package/lib/host/ui/useHostConnection.d.ts +36 -0
- package/lib/host/ui/useHostConnection.d.ts.map +1 -0
- package/lib/host/ui/useHostConnection.js +62 -0
- package/lib/host/ui/useHostConnection.js.map +1 -0
- package/lib/host-testing.d.ts +8 -0
- package/lib/host-testing.d.ts.map +1 -0
- package/lib/host-testing.js +7 -0
- package/lib/host-testing.js.map +1 -0
- package/lib/host.d.ts +11 -0
- package/lib/host.d.ts.map +1 -0
- package/lib/host.js +11 -0
- package/lib/host.js.map +1 -0
- package/lib/i18n/core/chromeCatalog.d.ts +1 -1
- package/lib/i18n/core/chromeCatalog.d.ts.map +1 -1
- package/lib/locales/de.json +28 -2
- package/lib/locales/en.json +28 -2
- package/lib/locales/es.json +28 -2
- package/lib/locales/fr.json +28 -2
- package/lib/locales/it.json +28 -2
- package/lib/molecule3d/core/index.d.ts +1 -1
- package/lib/molecule3d/core/index.d.ts.map +1 -1
- package/lib/molecule3d/core/index.js +1 -1
- package/lib/molecule3d/core/index.js.map +1 -1
- package/lib/molecule3d/core/settings.d.ts +15 -0
- package/lib/molecule3d/core/settings.d.ts.map +1 -1
- package/lib/molecule3d/core/settings.js +25 -0
- package/lib/molecule3d/core/settings.js.map +1 -1
- package/lib/molecule3d/ui/Molecule3DExport.d.ts +3 -0
- package/lib/molecule3d/ui/Molecule3DExport.d.ts.map +1 -1
- package/lib/molecule3d/ui/Molecule3DExport.js +10 -16
- package/lib/molecule3d/ui/Molecule3DExport.js.map +1 -1
- package/lib/molecule3d/ui/Molecule3DOptions.d.ts +3 -1
- package/lib/molecule3d/ui/Molecule3DOptions.d.ts.map +1 -1
- package/lib/molecule3d/ui/Molecule3DOptions.js +22 -6
- package/lib/molecule3d/ui/Molecule3DOptions.js.map +1 -1
- package/lib/molecule3d/ui/MoleculeCanvas3D.d.ts.map +1 -1
- package/lib/molecule3d/ui/MoleculeCanvas3D.js +4 -3
- package/lib/molecule3d/ui/MoleculeCanvas3D.js.map +1 -1
- package/lib/molecule3d/ui/exportMoleculeImage.d.ts +9 -0
- package/lib/molecule3d/ui/exportMoleculeImage.d.ts.map +1 -1
- package/lib/molecule3d/ui/exportMoleculeImage.js +15 -0
- package/lib/molecule3d/ui/exportMoleculeImage.js.map +1 -1
- package/lib/molecule3d/ui/moleculeViewer3DProps.d.ts +2 -1
- package/lib/molecule3d/ui/moleculeViewer3DProps.d.ts.map +1 -1
- package/lib/molecule3d/ui/useImageExport.d.ts +7 -1
- package/lib/molecule3d/ui/useImageExport.d.ts.map +1 -1
- package/lib/molecule3d/ui/useImageExport.js +12 -3
- package/lib/molecule3d/ui/useImageExport.js.map +1 -1
- package/lib/overlay/ui/FigureBar.d.ts +41 -0
- package/lib/overlay/ui/FigureBar.d.ts.map +1 -0
- package/lib/overlay/ui/FigureBar.js +43 -0
- package/lib/overlay/ui/FigureBar.js.map +1 -0
- package/lib/overlay/ui/OverlayBar.d.ts +13 -4
- package/lib/overlay/ui/OverlayBar.d.ts.map +1 -1
- package/lib/overlay/ui/OverlayBar.js +2 -2
- package/lib/overlay/ui/OverlayBar.js.map +1 -1
- package/lib/overlay/ui/OverlayBarStrip.d.ts +2 -1
- package/lib/overlay/ui/OverlayBarStrip.d.ts.map +1 -1
- package/lib/overlay/ui/OverlayBarStrip.js +9 -5
- package/lib/overlay/ui/OverlayBarStrip.js.map +1 -1
- package/lib/overlay/ui/OverlayIconButton.d.ts +8 -2
- package/lib/overlay/ui/OverlayIconButton.d.ts.map +1 -1
- package/lib/overlay/ui/OverlayIconButton.js +2 -1
- package/lib/overlay/ui/OverlayIconButton.js.map +1 -1
- package/lib/overlay/ui/index.d.ts +4 -0
- package/lib/overlay/ui/index.d.ts.map +1 -1
- package/lib/overlay/ui/index.js +2 -0
- package/lib/overlay/ui/index.js.map +1 -1
- package/lib/overlay/ui/overlayBarShape.d.ts +18 -0
- package/lib/overlay/ui/overlayBarShape.d.ts.map +1 -1
- package/lib/overlay/ui/overlayStyles.d.ts +30 -0
- package/lib/overlay/ui/overlayStyles.d.ts.map +1 -1
- package/lib/overlay/ui/overlayStyles.js +52 -0
- package/lib/overlay/ui/overlayStyles.js.map +1 -1
- package/lib/overlay/ui/useFigureBarAwake.d.ts +12 -0
- package/lib/overlay/ui/useFigureBarAwake.d.ts.map +1 -0
- package/lib/overlay/ui/useFigureBarAwake.js +51 -0
- package/lib/overlay/ui/useFigureBarAwake.js.map +1 -0
- package/lib/periodic/core/elements.d.ts +6 -3
- package/lib/periodic/core/elements.d.ts.map +1 -1
- package/lib/periodic/core/elements.js +9 -3
- package/lib/periodic/core/elements.js.map +1 -1
- package/lib/periodic/core/index.d.ts +2 -2
- package/lib/periodic/core/index.d.ts.map +1 -1
- package/lib/periodic/core/index.js +1 -1
- package/lib/periodic/core/index.js.map +1 -1
- package/lib/periodic/core/layout.d.ts +33 -3
- package/lib/periodic/core/layout.d.ts.map +1 -1
- package/lib/periodic/core/layout.js +14 -0
- package/lib/periodic/core/layout.js.map +1 -1
- package/lib/periodic/ui/BlockStrip.d.ts +20 -0
- package/lib/periodic/ui/BlockStrip.d.ts.map +1 -0
- package/lib/periodic/ui/BlockStrip.js +48 -0
- package/lib/periodic/ui/BlockStrip.js.map +1 -0
- package/lib/periodic/ui/ElementCell.d.ts.map +1 -1
- package/lib/periodic/ui/ElementCell.js +9 -8
- package/lib/periodic/ui/ElementCell.js.map +1 -1
- package/lib/periodic/ui/PeriodicTable.d.ts.map +1 -1
- package/lib/periodic/ui/PeriodicTable.js +3 -1
- package/lib/periodic/ui/PeriodicTable.js.map +1 -1
- package/lib/periodic/ui/PeriodicTableHelp.d.ts +33 -0
- package/lib/periodic/ui/PeriodicTableHelp.d.ts.map +1 -0
- package/lib/periodic/ui/PeriodicTableHelp.js +107 -0
- package/lib/periodic/ui/PeriodicTableHelp.js.map +1 -0
- package/lib/periodic/ui/cellStyles.d.ts +3 -2
- package/lib/periodic/ui/cellStyles.d.ts.map +1 -1
- package/lib/periodic/ui/cellStyles.js +3 -2
- package/lib/periodic/ui/cellStyles.js.map +1 -1
- package/lib/periodic/ui/index.d.ts +2 -0
- package/lib/periodic/ui/index.d.ts.map +1 -1
- package/lib/periodic/ui/index.js +1 -0
- package/lib/periodic/ui/index.js.map +1 -1
- package/lib/periodic/ui/periodicTableProps.d.ts +5 -4
- package/lib/periodic/ui/periodicTableProps.d.ts.map +1 -1
- package/lib/periodic/ui/tableLayout.d.ts +3 -1
- package/lib/periodic/ui/tableLayout.d.ts.map +1 -1
- package/lib/periodic/ui/tableLayout.js +8 -3
- package/lib/periodic/ui/tableLayout.js.map +1 -1
- package/lib/share/ui/ShareDialogContent.d.ts +3 -2
- package/lib/share/ui/ShareDialogContent.d.ts.map +1 -1
- package/lib/share/ui/ShareDialogContent.js +5 -6
- package/lib/share/ui/ShareDialogContent.js.map +1 -1
- package/lib/share/ui/ShareLinkBar.d.ts +8 -2
- package/lib/share/ui/ShareLinkBar.d.ts.map +1 -1
- package/lib/share/ui/ShareLinkBar.js +6 -5
- package/lib/share/ui/ShareLinkBar.js.map +1 -1
- package/lib/share/ui/SharePreview.d.ts.map +1 -1
- package/lib/share/ui/SharePreview.js +2 -2
- package/lib/share/ui/SharePreview.js.map +1 -1
- package/lib/structure/ui/StructurePicturePane.js +3 -3
- package/lib/structure/ui/StructurePicturePane.js.map +1 -1
- package/package.json +4 -1
- package/src/clipboard/core/index.ts +0 -1
- package/src/clipboard/ui/CopyButton.tsx +12 -1
- package/src/color/core/index.ts +9 -0
- package/src/color/core/interpolate.ts +51 -22
- package/src/color/core/stops.ts +98 -0
- package/src/color/core/tone.ts +79 -0
- package/src/color/core/uniform.ts +67 -0
- package/src/color/ui/ColorScaleEditor.tsx +115 -141
- package/src/color/ui/ColorScaleSelect.tsx +160 -36
- package/src/color/ui/ColorScaleTone.tsx +103 -0
- package/src/color/ui/ColorScaleTrack.tsx +239 -0
- package/src/download/core/copyFigure.ts +20 -0
- package/src/download/core/figureHtml.ts +1 -0
- package/src/download/core/figureHtmlMarkup.ts +14 -1
- package/src/download/core/index.ts +2 -0
- package/src/download/ui/FigureDownloadPanel.tsx +8 -11
- package/src/download/ui/figureDownloadHint.ts +1 -2
- package/src/download/ui/index.ts +0 -1
- package/src/download/ui/useFigureActions.ts +6 -42
- package/src/download/ui/useFigureTask.ts +46 -0
- package/src/host/core/connectHost.ts +240 -0
- package/src/host/core/hostStructure.ts +129 -0
- package/src/host/core/index.ts +46 -0
- package/src/host/core/kinds.ts +128 -0
- package/src/host/core/protocol.ts +197 -0
- package/src/host/testing/sciPeaks.ts +66 -0
- package/src/host/testing/standInHost.ts +116 -0
- package/src/host/ui/index.ts +2 -0
- package/src/host/ui/useHostConnection.ts +85 -0
- package/src/host-testing.ts +18 -0
- package/src/host.ts +11 -0
- package/src/locales/de.json +28 -2
- package/src/locales/en.json +28 -2
- package/src/locales/es.json +28 -2
- package/src/locales/fr.json +28 -2
- package/src/locales/it.json +28 -2
- package/src/molecule3d/core/index.ts +2 -0
- package/src/molecule3d/core/settings.ts +35 -0
- package/src/molecule3d/ui/Molecule3DExport.tsx +18 -17
- package/src/molecule3d/ui/Molecule3DOptions.tsx +51 -3
- package/src/molecule3d/ui/MoleculeCanvas3D.tsx +11 -3
- package/src/molecule3d/ui/exportMoleculeImage.ts +20 -0
- package/src/molecule3d/ui/moleculeViewer3DProps.ts +2 -1
- package/src/molecule3d/ui/useImageExport.ts +25 -3
- package/src/overlay/ui/FigureBar.tsx +96 -0
- package/src/overlay/ui/OverlayBar.tsx +15 -5
- package/src/overlay/ui/OverlayBarStrip.tsx +34 -22
- package/src/overlay/ui/OverlayIconButton.tsx +10 -2
- package/src/overlay/ui/index.ts +4 -0
- package/src/overlay/ui/overlayBarShape.ts +19 -0
- package/src/overlay/ui/overlayStyles.ts +61 -0
- package/src/overlay/ui/useFigureBarAwake.ts +56 -0
- package/src/periodic/core/elements.ts +8 -3
- package/src/periodic/core/index.ts +8 -1
- package/src/periodic/core/layout.ts +45 -3
- package/src/periodic/ui/BlockStrip.tsx +81 -0
- package/src/periodic/ui/ElementCell.tsx +9 -8
- package/src/periodic/ui/PeriodicTable.tsx +4 -1
- package/src/periodic/ui/PeriodicTableHelp.tsx +205 -0
- package/src/periodic/ui/cellStyles.ts +3 -2
- package/src/periodic/ui/index.ts +5 -0
- package/src/periodic/ui/periodicTableProps.ts +5 -4
- package/src/periodic/ui/tableLayout.ts +9 -3
- package/src/share/ui/ShareDialogContent.tsx +9 -13
- package/src/share/ui/ShareLinkBar.tsx +16 -4
- package/src/share/ui/SharePreview.tsx +6 -2
- package/src/structure/ui/StructurePicturePane.tsx +3 -3
- package/styles/chrome.css +43 -32
- package/lib/clipboard/core/copyPng.d.ts +0 -13
- package/lib/clipboard/core/copyPng.d.ts.map +0 -1
- package/lib/clipboard/core/copyPng.js +0 -19
- package/lib/clipboard/core/copyPng.js.map +0 -1
- package/src/clipboard/core/copyPng.ts +0 -20
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"uniform.d.ts","sourceRoot":"","sources":["../../../src/color/core/uniform.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,YAAY,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,MAG5B,CAAC;AAIF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAGrE;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAI9D;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAK7D"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { TOKEN } from "../../tokens/core/familyTokens.js";
|
|
2
|
+
import { readableInk } from "./contrast.js";
|
|
3
|
+
import { normalizeHexColor } from "./hex.js";
|
|
4
|
+
/**
|
|
5
|
+
* What a colour-scale picker offering one colour writes for it, and a link
|
|
6
|
+
* carries: every value the same colour, so the figure needs no key. Followed by
|
|
7
|
+
* `-` and a hex colour, e.g. `uniform-1c6e42`, it names that colour.
|
|
8
|
+
*/
|
|
9
|
+
export const UNIFORM_COLOR_SCALE_ID = 'uniform';
|
|
10
|
+
/**
|
|
11
|
+
* The one colour of a uniform scale that names none: the family's border grey
|
|
12
|
+
* rather than white, so a cell still stands out from a white page and from the
|
|
13
|
+
* white ground of a saved figure.
|
|
14
|
+
*/
|
|
15
|
+
export const UNIFORM_SWATCH = {
|
|
16
|
+
background: TOKEN.border,
|
|
17
|
+
foreground: TOKEN.text,
|
|
18
|
+
};
|
|
19
|
+
const PREFIX = `${UNIFORM_COLOR_SCALE_ID}-`;
|
|
20
|
+
/**
|
|
21
|
+
* Whether a scale text asks for one colour.
|
|
22
|
+
* @param text - A scale id or a custom scale, as a link carries it.
|
|
23
|
+
* @returns `true` for {@link UNIFORM_COLOR_SCALE_ID}, with or without a colour.
|
|
24
|
+
*/
|
|
25
|
+
export function isUniformColorScale(text) {
|
|
26
|
+
const wanted = (text ?? '').trim().toLowerCase();
|
|
27
|
+
return wanted === UNIFORM_COLOR_SCALE_ID || wanted.startsWith(PREFIX);
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* The colour a uniform scale text names, and the ink to write on it.
|
|
31
|
+
*
|
|
32
|
+
* A colour with a typo in it falls back to the grey rather than failing, so a
|
|
33
|
+
* link written by hand still opens the figure.
|
|
34
|
+
* @param text - A scale text, e.g. `uniform` or `uniform-1c6e42`.
|
|
35
|
+
* @returns The swatch it names, or {@link UNIFORM_SWATCH}.
|
|
36
|
+
*/
|
|
37
|
+
export function uniformSwatch(text) {
|
|
38
|
+
const color = uniformColor(text);
|
|
39
|
+
if (color === null)
|
|
40
|
+
return UNIFORM_SWATCH;
|
|
41
|
+
return { background: color, foreground: readableInk(color) };
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Write one colour as the scale text a link carries; the `#` is dropped, since
|
|
45
|
+
* a query string is cut in two at the first one.
|
|
46
|
+
* @param color - The colour, as `#rgb` or `#rrggbb`.
|
|
47
|
+
* @returns E.g. `uniform-1c6e42`, or {@link UNIFORM_COLOR_SCALE_ID} when the colour is not a hex colour.
|
|
48
|
+
*/
|
|
49
|
+
export function formatUniformColorScale(color) {
|
|
50
|
+
const normalized = normalizeHexColor(color);
|
|
51
|
+
return normalized === null
|
|
52
|
+
? UNIFORM_COLOR_SCALE_ID
|
|
53
|
+
: `${PREFIX}${normalized.slice(1)}`;
|
|
54
|
+
}
|
|
55
|
+
function uniformColor(text) {
|
|
56
|
+
const wanted = (text ?? '').trim().toLowerCase();
|
|
57
|
+
if (!wanted.startsWith(PREFIX))
|
|
58
|
+
return null;
|
|
59
|
+
return normalizeHexColor(`#${wanted.slice(PREFIX.length)}`);
|
|
60
|
+
}
|
|
61
|
+
//# sourceMappingURL=uniform.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"uniform.js","sourceRoot":"","sources":["../../../src/color/core/uniform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,SAAS,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,UAAU,EAAE,KAAK,CAAC,MAAM;IACxB,UAAU,EAAE,KAAK,CAAC,IAAI;CACvB,CAAC;AAEF,MAAM,MAAM,GAAG,GAAG,sBAAsB,GAAG,CAAC;AAE5C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAwB;IAC1D,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IACjD,OAAO,MAAM,KAAK,sBAAsB,IAAI,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AACxE,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,IAAwB;IACpD,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACjC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,cAAc,CAAC;IAC1C,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;AAC/D,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAa;IACnD,MAAM,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,UAAU,KAAK,IAAI;QACxB,CAAC,CAAC,sBAAsB;QACxB,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;AACxC,CAAC;AAED,SAAS,YAAY,CAAC,IAAwB;IAC5C,MAAM,MAAM,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IACjD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;QAAE,OAAO,IAAI,CAAC;IAC5C,OAAO,iBAAiB,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAC9D,CAAC"}
|
|
@@ -13,14 +13,13 @@ export interface ColorScaleEditorProps {
|
|
|
13
13
|
className?: string;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
|
-
* A colour scale of the reader's own
|
|
17
|
-
* each one sits, and the path it takes between them.
|
|
16
|
+
* A colour scale of the reader's own, edited on the strip it draws.
|
|
18
17
|
*
|
|
19
|
-
* A
|
|
20
|
-
*
|
|
21
|
-
*
|
|
18
|
+
* A click on the strip adds an anchor in the colour already there, an anchor
|
|
19
|
+
* is dragged along it, and an anchor pointed at goes with Backspace. The
|
|
20
|
+
* anchor last touched shows its colour and position below, to set exactly.
|
|
22
21
|
* @param props - See {@link ColorScaleEditorProps}.
|
|
23
|
-
* @returns The
|
|
22
|
+
* @returns The strip, the selected anchor, and the picker of the path between anchors.
|
|
24
23
|
*/
|
|
25
24
|
export declare function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement;
|
|
26
25
|
//# sourceMappingURL=ColorScaleEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorScaleEditor.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorScaleEditor.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAMzD,OAAO,KAAK,EAEV,UAAU,EAEX,MAAM,wBAAwB,CAAC;AAuBhC,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC,4EAA4E;IAC5E,KAAK,EAAE,UAAU,CAAC;IAClB,oDAAoD;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAmH3E"}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button, HTMLSelect } from '@blueprintjs/core';
|
|
3
|
-
import {
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
4
|
import { useChromeT } from "../../i18n/ui/useT.js";
|
|
5
|
+
import { NumberInput } from "../../number/ui/NumberInput.js";
|
|
5
6
|
import { normalizeHexColor } from "../core/hex.js";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
const MINIMUM_STOPS = 2;
|
|
7
|
+
import { MINIMUM_CUSTOM_STOPS, moveColorStop, recolorColorStop, removeColorStop, } from "../core/stops.js";
|
|
8
|
+
import { ColorScaleTone } from "./ColorScaleTone.js";
|
|
9
|
+
import { ColorScaleTrack } from "./ColorScaleTrack.js";
|
|
10
10
|
const POSITION_STEP = 0.01;
|
|
11
|
-
const PREVIEW_HEIGHT = 16;
|
|
12
|
-
const PREVIEW_SAMPLES = 48;
|
|
13
|
-
const POSITION_DECIMALS = 2;
|
|
14
11
|
// A `type="color"` input only takes six hex digits; an anchor that is not a
|
|
15
12
|
// hex colour is shown as black until it is picked again.
|
|
16
13
|
const UNREADABLE_COLOR = '#000000';
|
|
@@ -21,33 +18,67 @@ const INTERPOLATIONS = [
|
|
|
21
18
|
'hsv-long',
|
|
22
19
|
];
|
|
23
20
|
/**
|
|
24
|
-
* A colour scale of the reader's own
|
|
25
|
-
* each one sits, and the path it takes between them.
|
|
21
|
+
* A colour scale of the reader's own, edited on the strip it draws.
|
|
26
22
|
*
|
|
27
|
-
* A
|
|
28
|
-
*
|
|
29
|
-
*
|
|
23
|
+
* A click on the strip adds an anchor in the colour already there, an anchor
|
|
24
|
+
* is dragged along it, and an anchor pointed at goes with Backspace. The
|
|
25
|
+
* anchor last touched shows its colour and position below, to set exactly.
|
|
30
26
|
* @param props - See {@link ColorScaleEditorProps}.
|
|
31
|
-
* @returns The
|
|
27
|
+
* @returns The strip, the selected anchor, and the picker of the path between anchors.
|
|
32
28
|
*/
|
|
33
29
|
export function ColorScaleEditor(props) {
|
|
34
30
|
const { className, value, onChange } = props;
|
|
35
31
|
const t = useChromeT();
|
|
36
32
|
const stops = value.stops;
|
|
33
|
+
const [picked, setPicked] = useState(0);
|
|
34
|
+
const [hovered, setHovered] = useState(null);
|
|
35
|
+
const colorInput = useRef(null);
|
|
36
|
+
const selected = Math.min(picked, stops.length - 1);
|
|
37
|
+
const stop = stops[selected];
|
|
38
|
+
const removable = stops.length > MINIMUM_CUSTOM_STOPS;
|
|
37
39
|
function write(next) {
|
|
38
40
|
onChange({ stops: next, interpolation: value.interpolation });
|
|
39
41
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
function remove(index) {
|
|
43
|
+
if (!removable)
|
|
44
|
+
return;
|
|
45
|
+
write(removeColorStop(stops, index));
|
|
46
|
+
setHovered(null);
|
|
47
|
+
setPicked(Math.max(0, index - 1));
|
|
48
|
+
}
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (hovered === null || !removable)
|
|
51
|
+
return;
|
|
52
|
+
const index = hovered;
|
|
53
|
+
function onKeyDown(event) {
|
|
54
|
+
if (event.key !== 'Backspace' && event.key !== 'Delete')
|
|
55
|
+
return;
|
|
56
|
+
if (isEditable(event.target))
|
|
57
|
+
return;
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
onChange({
|
|
60
|
+
stops: removeColorStop(stops, index),
|
|
61
|
+
interpolation: value.interpolation,
|
|
62
|
+
});
|
|
63
|
+
setHovered(null);
|
|
64
|
+
setPicked(Math.max(0, index - 1));
|
|
65
|
+
}
|
|
66
|
+
globalThis.addEventListener('keydown', onKeyDown);
|
|
67
|
+
return () => {
|
|
68
|
+
globalThis.removeEventListener('keydown', onKeyDown);
|
|
69
|
+
};
|
|
70
|
+
}, [hovered, removable, stops, value.interpolation, onChange]);
|
|
71
|
+
return (_jsxs("div", { className: className, style: PANEL_STYLE, children: [_jsx(ColorScaleTrack, { scale: value, selected: selected, hovered: hovered, onSelect: setPicked, onHover: setHovered, onChange: write, onRemove: remove, onPick: () => {
|
|
72
|
+
colorInput.current?.showPicker();
|
|
73
|
+
} }), _jsxs("div", { style: ROW_STYLE, children: [_jsx("input", { ref: colorInput, type: "color", "aria-label": t('color.anchorColour', { index: selected + 1 }), value: normalizeHexColor(stop?.color ?? '') ?? UNREADABLE_COLOR, style: SWATCH_STYLE, onChange: (event) => {
|
|
74
|
+
write(recolorColorStop(stops, selected, event.target.value));
|
|
75
|
+
} }), _jsx(NumberInput, { ariaLabel: t('color.anchorPosition', { index: selected + 1 }), value: stop?.position ?? 0, min: 0, max: 1, step: POSITION_STEP, size: "small", buttons: false, style: POSITION_STYLE, onChange: (position) => {
|
|
76
|
+
const moved = moveColorStop(stops, selected, position);
|
|
77
|
+
write(moved.stops);
|
|
78
|
+
setPicked(moved.index);
|
|
79
|
+
} }), _jsx(Button, { icon: "trash", variant: "minimal", size: "small", "aria-label": t('color.removeAnchor', { index: selected + 1 }), disabled: !removable, onClick: () => {
|
|
80
|
+
remove(selected);
|
|
81
|
+
} }), _jsx("span", { style: SPACER_STYLE }), _jsx(HTMLSelect, { "aria-label": t('color.path'), value: value.interpolation, options: INTERPOLATIONS.map((interpolation) => ({
|
|
51
82
|
value: interpolation,
|
|
52
83
|
label: t(`color.interpolation.${interpolation}`),
|
|
53
84
|
})), onChange: (event) => {
|
|
@@ -55,62 +86,27 @@ export function ColorScaleEditor(props) {
|
|
|
55
86
|
stops,
|
|
56
87
|
interpolation: event.currentTarget.value,
|
|
57
88
|
});
|
|
58
|
-
} })] })] }));
|
|
59
|
-
}
|
|
60
|
-
function replace(stops, index, patch) {
|
|
61
|
-
return stops.map((stop, at) => (at === index ? { ...stop, ...patch } : stop));
|
|
89
|
+
} })] }), _jsx(ColorScaleTone, { stops: stops, onChange: write }), _jsx("p", { style: HINT_STYLE, children: t('color.editorHint') })] }));
|
|
62
90
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
*/
|
|
71
|
-
function hold(stops, index, position) {
|
|
72
|
-
if (!Number.isFinite(position))
|
|
73
|
-
return stops[index]?.position ?? 0;
|
|
74
|
-
const low = stops[index - 1]?.position ?? 0;
|
|
75
|
-
const high = stops[index + 1]?.position ?? 1;
|
|
76
|
-
return Math.min(high, Math.max(low, position));
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* The anchors with one more, dropped in the widest gap and taking the colour
|
|
80
|
-
* the scale already has there — so adding one changes nothing until it is moved.
|
|
81
|
-
* @param scale - The scale being edited.
|
|
82
|
-
* @returns Its anchors, with the new one among them.
|
|
83
|
-
*/
|
|
84
|
-
function withAddedStop(scale) {
|
|
85
|
-
const stops = [...scale.stops];
|
|
86
|
-
let widest = 0;
|
|
87
|
-
let at = 1;
|
|
88
|
-
for (let index = 1; index < stops.length; index++) {
|
|
89
|
-
const span = (stops[index]?.position ?? 0) - (stops[index - 1]?.position ?? 0);
|
|
90
|
-
if (span > widest) {
|
|
91
|
-
widest = span;
|
|
92
|
-
at = index;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
const position = ((stops[at]?.position ?? 1) + (stops[at - 1]?.position ?? 0)) / 2;
|
|
96
|
-
stops.splice(at, 0, { position, color: colorAt(scale, position) });
|
|
97
|
-
return stops;
|
|
91
|
+
function isEditable(target) {
|
|
92
|
+
if (!(target instanceof HTMLElement))
|
|
93
|
+
return false;
|
|
94
|
+
return (target.isContentEditable ||
|
|
95
|
+
target instanceof HTMLInputElement ||
|
|
96
|
+
target instanceof HTMLTextAreaElement ||
|
|
97
|
+
target instanceof HTMLSelectElement);
|
|
98
98
|
}
|
|
99
99
|
const PANEL_STYLE = {
|
|
100
100
|
display: 'flex',
|
|
101
101
|
flexDirection: 'column',
|
|
102
102
|
gap: 10,
|
|
103
103
|
padding: 12,
|
|
104
|
-
minWidth:
|
|
105
|
-
};
|
|
106
|
-
const ROWS_STYLE = {
|
|
107
|
-
display: 'flex',
|
|
108
|
-
flexDirection: 'column',
|
|
109
|
-
gap: 4,
|
|
104
|
+
minWidth: 320,
|
|
110
105
|
};
|
|
111
106
|
const ROW_STYLE = {
|
|
112
107
|
display: 'flex',
|
|
113
108
|
alignItems: 'center',
|
|
109
|
+
flexWrap: 'wrap',
|
|
114
110
|
gap: 8,
|
|
115
111
|
};
|
|
116
112
|
const SWATCH_STYLE = {
|
|
@@ -121,22 +117,16 @@ const SWATCH_STYLE = {
|
|
|
121
117
|
background: 'none',
|
|
122
118
|
cursor: 'pointer',
|
|
123
119
|
};
|
|
124
|
-
const
|
|
120
|
+
const POSITION_STYLE = {
|
|
121
|
+
width: 64,
|
|
122
|
+
};
|
|
123
|
+
const SPACER_STYLE = {
|
|
125
124
|
flex: '1 1 auto',
|
|
126
|
-
minWidth: 90,
|
|
127
|
-
accentColor: 'var(--accent, currentColor)',
|
|
128
125
|
};
|
|
129
|
-
const
|
|
126
|
+
const HINT_STYLE = {
|
|
127
|
+
margin: 0,
|
|
128
|
+
color: 'var(--text-muted)',
|
|
130
129
|
fontSize: 12,
|
|
131
|
-
|
|
132
|
-
width: 30,
|
|
133
|
-
textAlign: 'right',
|
|
134
|
-
};
|
|
135
|
-
const FOOTER_STYLE = {
|
|
136
|
-
display: 'flex',
|
|
137
|
-
alignItems: 'center',
|
|
138
|
-
flexWrap: 'wrap',
|
|
139
|
-
gap: 8,
|
|
140
|
-
justifyContent: 'space-between',
|
|
130
|
+
lineHeight: 1.4,
|
|
141
131
|
};
|
|
142
132
|
//# sourceMappingURL=ColorScaleEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorScaleEditor.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorScaleEditor.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,6 +18,22 @@ export interface ColorScaleSelectProps {
|
|
|
18
18
|
* @default true
|
|
19
19
|
*/
|
|
20
20
|
allowCustom?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Whether the menu opens on one colour for every value, which a figure that
|
|
23
|
+
* needs no key — a plain table to print — is drawn with. Chosen, it writes
|
|
24
|
+
* {@link UNIFORM_COLOR_SCALE_ID}; its swatch picks the colour, written as
|
|
25
|
+
* `formatUniformColorScale` does.
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
allowUniform?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Whether it is a form field — a caption over a full-width button — or a
|
|
31
|
+
* setting on a figure's bar, writing its name and its scale on one compact
|
|
32
|
+
* line as `OverlayValueButton` does. The bar form needs an `OverlayLayer` or
|
|
33
|
+
* a `FigureBar` above it for its measurements.
|
|
34
|
+
* @default 'field'
|
|
35
|
+
*/
|
|
36
|
+
appearance?: 'field' | 'bar';
|
|
21
37
|
/**
|
|
22
38
|
* Value of the `data-testid` attribute of the button, for the end-to-end tests.
|
|
23
39
|
* @default undefined
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorScaleSelect.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorScaleSelect.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AA2BzD,6CAA6C;AAC7C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAwL3E"}
|
|
@@ -2,13 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { Button, Menu, MenuDivider, MenuItem, PopoverNext, } from '@blueprintjs/core';
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { useChromeT } from "../../i18n/ui/useT.js";
|
|
5
|
+
import { OverlayValueButton } from "../../overlay/ui/OverlayValueButton.js";
|
|
5
6
|
import { TOKEN } from "../../tokens/core/familyTokens.js";
|
|
7
|
+
import { normalizeHexColor } from "../core/hex.js";
|
|
8
|
+
import { sampleScale } from "../core/interpolate.js";
|
|
6
9
|
import { formatColorScale, resolveColorScale } from "../core/scaleText.js";
|
|
7
10
|
import { COLOR_SCALES } from "../core/scales.js";
|
|
11
|
+
import { UNIFORM_COLOR_SCALE_ID, formatUniformColorScale, isUniformColorScale, uniformSwatch, } from "../core/uniform.js";
|
|
8
12
|
import { ColorScaleBar } from "./ColorScaleBar.js";
|
|
9
13
|
import { ColorScaleEditor } from "./ColorScaleEditor.js";
|
|
10
14
|
import { ColorScaleEntry } from "./ColorScaleEntry.js";
|
|
11
15
|
const BUTTON_BAR_WIDTH = 72;
|
|
16
|
+
// Its two ends and its middle: the most dots `OverlaySwatchIcon` draws.
|
|
17
|
+
const BAR_SWATCHES = 3;
|
|
18
|
+
// A `type="color"` input only takes six hex digits.
|
|
19
|
+
const UNREADABLE_COLOR = '#000000';
|
|
12
20
|
/**
|
|
13
21
|
* The picker a quantity's colours are chosen with: every scale drawn as itself,
|
|
14
22
|
* and a way to build one.
|
|
@@ -20,10 +28,12 @@ const BUTTON_BAR_WIDTH = 72;
|
|
|
20
28
|
* @returns The button, and the menu it opens.
|
|
21
29
|
*/
|
|
22
30
|
export function ColorScaleSelect(props) {
|
|
23
|
-
const { className, value, onChange, label = '', allowCustom = true, testId, } = props;
|
|
31
|
+
const { className, value, onChange, label = '', allowCustom = true, allowUniform = false, appearance = 'field', testId, } = props;
|
|
24
32
|
const t = useChromeT();
|
|
25
33
|
const [isOpen, setOpen] = useState(false);
|
|
26
34
|
const [isEditing, setEditing] = useState(false);
|
|
35
|
+
const uniform = allowUniform && isUniformColorScale(value);
|
|
36
|
+
const oneColor = uniformSwatch(uniform ? value : undefined).background;
|
|
27
37
|
const resolved = resolveColorScale(value);
|
|
28
38
|
const content = isEditing ? (_jsxs("div", { children: [_jsxs("div", { style: EDITOR_HEADER_STYLE, children: [_jsx(Button, { icon: "chevron-left", variant: "minimal", size: "small", text: t('color.scales'), onClick: () => {
|
|
29
39
|
setEditing(false);
|
|
@@ -32,24 +42,45 @@ export function ColorScaleSelect(props) {
|
|
|
32
42
|
setOpen(false);
|
|
33
43
|
} })] }), _jsx(ColorScaleEditor, { value: resolved.scale, onChange: (scale) => {
|
|
34
44
|
onChange(formatColorScale(scale));
|
|
35
|
-
} })] })) : (_jsxs(Menu, { style: MENU_STYLE, children: [
|
|
45
|
+
} })] })) : (_jsxs(Menu, { style: MENU_STYLE, children: [allowUniform ? (_jsx(MenuItem, { roleStructure: "listoption", selected: uniform, htmlTitle: t('color.uniformDescription'), text: _jsxs("span", { style: UNIFORM_ITEM_STYLE, children: [_jsx("span", { children: t('color.uniform') }), _jsx("input", { type: "color", "aria-label": t('color.uniformColour'), title: t('color.uniformColour'), value: normalizeHexColor(oneColor) ?? UNREADABLE_COLOR, style: UNIFORM_INPUT_STYLE,
|
|
46
|
+
// The swatch picks the colour; the rest of the row chooses
|
|
47
|
+
// one colour and closes the menu.
|
|
48
|
+
onClick: (event) => {
|
|
49
|
+
event.stopPropagation();
|
|
50
|
+
}, onChange: (event) => {
|
|
51
|
+
onChange(formatUniformColorScale(event.target.value));
|
|
52
|
+
} })] }), onClick: () => {
|
|
53
|
+
onChange(uniform ? value : UNIFORM_COLOR_SCALE_ID);
|
|
54
|
+
} })) : null, COLOR_SCALES.map((entry, index) => (_jsx(ColorScaleEntry, { id: entry.id, label: entry.label, kind: entry.kind, description: entry.description, previous: COLOR_SCALES[index - 1]?.kind, selected: !uniform && entry.id === resolved.id, onChange: onChange }, entry.id))), allowCustom ? (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuItem, { icon: "edit", text: t('color.customEllipsis'), label: resolved.id === null && !uniform ? t('color.inUse') : undefined, shouldDismissPopover: false, onClick: () => {
|
|
36
55
|
setEditing(true);
|
|
37
56
|
} })] })) : null] }));
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
57
|
+
const scaleName = uniform
|
|
58
|
+
? t('color.uniform')
|
|
59
|
+
: resolved.id === null
|
|
60
|
+
? t('color.custom')
|
|
61
|
+
: t.or(`color.scale.${resolved.id}.label`, resolved.label);
|
|
62
|
+
const name = label === '' ? t('color.colourScale') : label;
|
|
63
|
+
const target = appearance === 'bar' ? (_jsx(OverlayValueButton, { label: name, value: scaleName, swatches: uniform ? [oneColor] : sampleScale(resolved.scale, BAR_SWATCHES), active: isOpen, opensMenu: true, testId: testId })) : (_jsx(Button, { alignText: "start", "aria-label": name, "data-testid": testId, endIcon: "caret-down", fill: true, text: _jsxs("span", { style: BUTTON_TEXT_STYLE, children: [_jsx("span", { children: scaleName }), uniform ? (_jsx("span", { style: {
|
|
64
|
+
...UNIFORM_BAR_STYLE,
|
|
65
|
+
width: BUTTON_BAR_WIDTH,
|
|
66
|
+
background: oneColor,
|
|
67
|
+
} })) : (_jsx(ColorScaleBar, { scale: resolved.scale, style: { width: BUTTON_BAR_WIDTH } }))] }) }));
|
|
68
|
+
const popover = (_jsx(PopoverNext
|
|
69
|
+
// A fade, like the pickers a site puts beside this one: the default
|
|
70
|
+
// grows the panel from a third of its size over about a second, which
|
|
71
|
+
// reads as the row behaving differently control by control.
|
|
72
|
+
, {
|
|
73
|
+
// A fade, like the pickers a site puts beside this one: the default
|
|
74
|
+
// grows the panel from a third of its size over about a second, which
|
|
75
|
+
// reads as the row behaving differently control by control.
|
|
76
|
+
animation: "minimal", arrow: false, placement: "bottom-start", isOpen: isOpen, content: content, onInteraction: (next) => {
|
|
77
|
+
setOpen(next);
|
|
78
|
+
if (!next)
|
|
79
|
+
setEditing(false);
|
|
80
|
+
}, children: target }));
|
|
81
|
+
if (appearance === 'bar')
|
|
82
|
+
return popover;
|
|
83
|
+
return (_jsxs("label", { className: className, style: FIELD_STYLE, children: [label === '' ? null : _jsx("span", { style: CAPTION_STYLE, children: label }), popover] }));
|
|
53
84
|
}
|
|
54
85
|
const FIELD_STYLE = {
|
|
55
86
|
display: 'flex',
|
|
@@ -70,6 +101,27 @@ const BUTTON_TEXT_STYLE = {
|
|
|
70
101
|
gap: 10,
|
|
71
102
|
width: '100%',
|
|
72
103
|
};
|
|
104
|
+
// The lines of the menu, so one colour reads as one more choice among them.
|
|
105
|
+
const UNIFORM_ITEM_STYLE = {
|
|
106
|
+
display: 'grid',
|
|
107
|
+
gridTemplateColumns: '7rem 1fr',
|
|
108
|
+
alignItems: 'center',
|
|
109
|
+
gap: 10,
|
|
110
|
+
minWidth: 220,
|
|
111
|
+
};
|
|
112
|
+
const UNIFORM_BAR_STYLE = {
|
|
113
|
+
display: 'inline-block',
|
|
114
|
+
height: 12,
|
|
115
|
+
borderRadius: 2,
|
|
116
|
+
};
|
|
117
|
+
const UNIFORM_INPUT_STYLE = {
|
|
118
|
+
width: '100%',
|
|
119
|
+
height: 18,
|
|
120
|
+
padding: 0,
|
|
121
|
+
border: 0,
|
|
122
|
+
background: 'none',
|
|
123
|
+
cursor: 'pointer',
|
|
124
|
+
};
|
|
73
125
|
const MENU_STYLE = {
|
|
74
126
|
maxHeight: '60vh',
|
|
75
127
|
overflowY: 'auto',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorScaleSelect.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorScaleSelect.js","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { ColorStop } from '../core/interpolate.ts';
|
|
3
|
+
/** What {@link ColorScaleTone} edits. */
|
|
4
|
+
export interface ColorScaleToneProps {
|
|
5
|
+
/** The anchors of the scale being edited. */
|
|
6
|
+
stops: readonly ColorStop[];
|
|
7
|
+
/** Called with the recoloured anchors on every move of either slider. */
|
|
8
|
+
onChange: (stops: ColorStop[]) => void;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Two sliders setting the saturation and the brightness of every anchor at
|
|
12
|
+
* once, each anchor keeping its hue.
|
|
13
|
+
* @param props - See {@link ColorScaleToneProps}.
|
|
14
|
+
* @returns The two sliders, each with its value.
|
|
15
|
+
*/
|
|
16
|
+
export declare function ColorScaleTone(props: ColorScaleToneProps): ReactElement;
|
|
17
|
+
//# sourceMappingURL=ColorScaleTone.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorScaleTone.d.ts","sourceRoot":"","sources":["../../../src/color/ui/ColorScaleTone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AASxD,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CACxC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAmDvE"}
|