@pixerate/editor-react 0.35.1 → 0.37.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.
@@ -1,5 +1,7 @@
1
- import { ChartController, ChartState, ChartSelection, ChartSpecPatch, ChartActionResult, ChartType, ChartCommandOptions, ChartControllerOptions, ChartTheme, ChartTextMeasure } from '@pixerate/editor/chart';
1
+ import * as React from 'react';
2
2
  import React__default from 'react';
3
+ import { ToolRegistry } from '@pixerate/editor/tools';
4
+ import { ChartController, ChartState, ChartSelection, ChartSpecPatch, ChartActionResult, ChartType, ChartCommandOptions, ChartControllerOptions, ChartScene, ChartPresence, ChartDirector, ChartToolProviderOptions, ChartTheme, ChartTextMeasure, ChartMark, ChartSparklineOptions, ChartValue, ChartStreamFormat } from '@pixerate/editor/chart';
3
5
 
4
6
  /** A `ChartController` created once for the component's lifetime. */
5
7
  declare function useChartController(options?: ChartControllerOptions): ChartController;
@@ -31,6 +33,27 @@ interface ChartCommandTarget {
31
33
  * `chart.setValues`, …) in `registry` while mounted.
32
34
  */
33
35
  declare function useChartCommands(registry: ChartCommandTarget | null | undefined, controller: ChartController, options?: ChartCommandOptions): void;
36
+ /**
37
+ * Registers the chart's agent tools (`createChartToolProvider`) with a `ToolRegistry` while
38
+ * mounted. Options are read when the controller or registry changes.
39
+ */
40
+ declare function useChartToolProvider(registry: ToolRegistry | null | undefined, controller: ChartController, options?: ChartToolProviderOptions): void;
41
+ /**
42
+ * A `ChartPresence` and `ChartDirector` for a chart: pass `presence` and `sceneRef` to
43
+ * `ChartCanvas`, and `director` to `useChartToolProvider` so agent edits are acted out with a
44
+ * cursor.
45
+ */
46
+ declare function useChartDirector(controller: ChartController, options?: {
47
+ speed?: number;
48
+ size?: {
49
+ width: number;
50
+ height: number;
51
+ };
52
+ }): {
53
+ sceneRef: React.RefObject<ChartScene | null>;
54
+ presence: ChartPresence;
55
+ director: ChartDirector;
56
+ };
34
57
 
35
58
  declare const chartInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
36
59
  declare const chartButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
@@ -56,13 +79,32 @@ interface ChartCanvasProps {
56
79
  measureText?: ChartTextMeasure;
57
80
  emptyMessage?: string;
58
81
  className?: string;
82
+ /** Agent cursors to draw over the chart (see `ChartDirector`). */
83
+ presence?: ChartPresence;
84
+ /** Receives the scene as drawn (e.g. for `ChartDirector`'s `scene`). */
85
+ sceneRef?: {
86
+ current: ChartScene | null;
87
+ };
59
88
  }
89
+ /** SVG attributes for one mark (colours go in `style` so CSS variables work). */
90
+ declare function renderChartMark(mark: ChartMark, fontFamily: string, interactive: boolean): React__default.ReactNode;
91
+ /** Agent cursors and notes, drawn in scene coordinates inside the chart's SVG. */
92
+ declare function ChartPresenceLayer({ presence }: {
93
+ presence: ChartPresence;
94
+ }): React__default.JSX.Element;
95
+ /** A laid-out scene as an SVG (no interaction): for read-only views, streaming and exports. */
96
+ declare function ChartSceneSvg({ scene, label, className }: {
97
+ scene: ChartScene;
98
+ label?: string;
99
+ className?: string;
100
+ }): React__default.JSX.Element;
60
101
  /**
61
102
  * Draws a chart controller's spec as SVG. Click a mark to select it, drag a bar or point to
62
- * change its value (one undo step), and with the chart focused use ← → ↑ ↓, Delete and
63
- * Escape (see `handleChartKey`).
103
+ * change its value (one undo step; Alt for fine steps, Shift to keep one axis on scatter
104
+ * charts, Ctrl / ⌘ to skip snapping, Escape to cancel), and with the chart focused use
105
+ * ← → ↑ ↓, Delete and Escape (see `handleChartKey`).
64
106
  */
65
- declare function ChartCanvas({ controller, width, height, responsive, theme, editable, measureText, emptyMessage, className }: ChartCanvasProps): React__default.JSX.Element;
107
+ declare function ChartCanvas({ controller, width, height, responsive, theme, editable, measureText, emptyMessage, className, presence, sceneRef }: ChartCanvasProps): React__default.JSX.Element;
66
108
 
67
109
  type CommitInputProps = {
68
110
  value: string;
@@ -92,7 +134,7 @@ interface ChartInspectorProps {
92
134
  sections?: readonly ChartInspectorSection[];
93
135
  className?: string;
94
136
  }
95
- type ChartInspectorSection = 'type' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
137
+ type ChartInspectorSection = 'type' | 'style' | 'titles' | 'options' | 'legend' | 'axes' | 'series';
96
138
  /**
97
139
  * Settings for a chart controller: type, titles, stacking and line options, legend, both
98
140
  * axes and the selected series. Every change is one undo step.
@@ -115,4 +157,43 @@ interface ChartEditorProps {
115
157
  /** Toolbar, chart, settings sidebar and data grid for a `ChartController`. */
116
158
  declare function ChartEditor({ controller, showInspector, showDataGrid, showToolbar, height, canvasProps, className }: ChartEditorProps): React__default.JSX.Element;
117
159
 
118
- export { ChartCanvas, type ChartCanvasProps, type ChartCommandTarget, ChartCommitInput, ChartDataGrid, type ChartDataGridProps, ChartEditor, type ChartEditorProps, ChartInspector, type ChartInspectorProps, type ChartInspectorSection, type UseChartEditorResult, chartButtonClass, chartCellClass, chartIconButtonClass, chartInputClass, chartLabelClass, chartSectionClass, chartSegmentClass, useChartCommands, useChartController, useChartEditor, useChartState };
160
+ interface ChartStreamingViewProps {
161
+ /** Mermaid (xychart-beta, pie, radar-beta) or a JSON chart spec, as far as it has arrived. */
162
+ source: string;
163
+ /** Nothing more will arrive: the final chart is drawn at once and problems are reported. */
164
+ complete?: boolean;
165
+ format?: ChartStreamFormat;
166
+ width?: number;
167
+ height?: number;
168
+ theme?: Partial<ChartTheme>;
169
+ /** How often a new layout is adopted while streaming (ms, default 300). */
170
+ adoptInterval?: number;
171
+ /** Tween length between layouts (ms, default 450; 0 to switch at once). */
172
+ tween?: number;
173
+ /** Shown before anything can be drawn. */
174
+ placeholder?: React__default.ReactNode;
175
+ /** Called with the parse problems once `complete`. */
176
+ onIssues?: (issues: {
177
+ message: string;
178
+ line?: number;
179
+ }[]) => void;
180
+ className?: string;
181
+ }
182
+ /**
183
+ * Draws a chart whose source is still arriving (e.g. from a model): series appear as their
184
+ * values come in, the value axis only grows so it does not jump, and each new layout tweens
185
+ * from the last. Read-only; load the final spec into a `ChartController` to edit it.
186
+ */
187
+ declare function ChartStreamingView({ source, complete, format, width, height, theme, adoptInterval, tween, placeholder, onIssues, className }: ChartStreamingViewProps): React__default.JSX.Element;
188
+ interface ChartSparklineProps extends Omit<ChartSparklineOptions, 'width' | 'height'> {
189
+ values: readonly ChartValue[];
190
+ width?: number;
191
+ height?: number;
192
+ /** Accessible label (default: first and last value). */
193
+ label?: string;
194
+ className?: string;
195
+ }
196
+ /** A word-sized chart: line, column or win/loss. */
197
+ declare function ChartSparkline({ values, width, height, label, className, ...options }: ChartSparklineProps): React__default.JSX.Element;
198
+
199
+ export { ChartCanvas, type ChartCanvasProps, type ChartCommandTarget, ChartCommitInput, ChartDataGrid, type ChartDataGridProps, ChartEditor, type ChartEditorProps, ChartInspector, type ChartInspectorProps, type ChartInspectorSection, ChartPresenceLayer, ChartSceneSvg, ChartSparkline, type ChartSparklineProps, ChartStreamingView, type ChartStreamingViewProps, type UseChartEditorResult, chartButtonClass, chartCellClass, chartIconButtonClass, chartInputClass, chartLabelClass, chartSectionClass, chartSegmentClass, renderChartMark, useChartCommands, useChartController, useChartDirector, useChartEditor, useChartState, useChartToolProvider };