@pixerate/editor-react 0.32.0 → 0.34.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.
Files changed (7) hide show
  1. package/dist/vector/index.cjs +469 -113
  2. package/dist/vector/index.cjs.map +1 -1
  3. package/dist/vector/index.d.cts +39 -6
  4. package/dist/vector/index.d.ts +39 -6
  5. package/dist/vector/index.js +465 -101
  6. package/dist/vector/index.js.map +1 -1
  7. package/package.json +3 -3
package/dist/vector/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, SvgGradientDef, VectorRenderNode, VectorWidthPointEdit } from '@pixerate/editor/vector';
1
+ import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderNode, VectorWidthPointEdit } from '@pixerate/editor/vector';
2
2
  import React__default from 'react';
3
3
 
4
4
  /** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */
@@ -44,10 +44,18 @@ interface VectorCanvasProps {
44
44
  /** Accessible label (default "Vector canvas"). */
45
45
  'aria-label'?: string;
46
46
  }
47
- /** Renders `<linearGradient>` / `<radialGradient>` descriptors. */
47
+ /**
48
+ * Renders paint servers: `<linearGradient>` / `<radialGradient>` descriptors and patterns of
49
+ * gradient tiles (conic, diamond and stroke-mode gradients).
50
+ */
48
51
  declare function VectorGradientDefs({ defs }: {
49
- defs: readonly SvgGradientDef[];
52
+ defs: readonly VectorPaintDef[];
50
53
  }): React__default.JSX.Element | null;
54
+ /** The gradient tool's annotator (screen space): extent, bar, handles, stop chips and midpoints. */
55
+ declare function VectorGradientAnnotator({ annotator: g, accentColor }: {
56
+ annotator: VectorRenderGradientAnnotator;
57
+ accentColor?: string;
58
+ }): React__default.JSX.Element;
51
59
  /** Renders scene nodes (paths and groups) from `getVectorSceneRenderData`. */
52
60
  declare function VectorSceneNodes({ nodes }: {
53
61
  nodes: readonly VectorRenderNode[];
@@ -96,16 +104,18 @@ interface VectorToolbarProps {
96
104
  * spine, Replace Spine, Expand and Release (default `true`).
97
105
  */
98
106
  showBlend?: boolean;
107
+ /** The Free Distort toggle of the selection box (default `true`). */
108
+ showDistort?: boolean;
99
109
  className?: string;
100
110
  }
101
111
  /** Tool picker plus undo, snapping, boolean operations, grouping, stacking and alignment. */
102
- declare function VectorToolbar({ controller, tools, showHistory, showArrange, showSnap, showPathEdit, showBlend, className, }: VectorToolbarProps): React__default.JSX.Element;
112
+ declare function VectorToolbar({ controller, tools, showHistory, showArrange, showSnap, showPathEdit, showBlend, showDistort, className, }: VectorToolbarProps): React__default.JSX.Element;
103
113
  interface VectorStylePanelProps {
104
114
  controller: VectorEditorController;
105
115
  className?: string;
106
116
  }
107
117
  /**
108
- * Fill, stroke, stroke width, alignment and width profile, arrowheads, live corner radius, opacity and path effects (`VectorEffectsPanel`) of the
118
+ * Fill, stroke and their gradients (`VectorGradientEditor`), stroke width, alignment and width profile, arrowheads, live corner radius, opacity, path effects (`VectorEffectsPanel`) and envelope (`VectorEnvelopePanel`) of the
109
119
  * selection (corners of the selected points with the direct tool); with nothing selected it
110
120
  * edits the defaults for new shapes.
111
121
  */
@@ -123,6 +133,18 @@ interface VectorEffectsPanelProps {
123
133
  */
124
134
  declare function VectorEffectsPanel({ controller, className }: VectorEffectsPanelProps): React__default.JSX.Element | null;
125
135
 
136
+ interface VectorEnvelopePanelProps {
137
+ controller: VectorEditorController;
138
+ className?: string;
139
+ }
140
+ /**
141
+ * Envelope distortion of the selection: Make with Warp, Mesh or Top Object, and for one selected
142
+ * object with an envelope its warp preset, bend, horizontal and vertical distortion, orientation and
143
+ * mesh rows and columns, plus Release and Expand. Edit the mesh on the canvas with the Envelope
144
+ * tool. Slider drags are one undo step each.
145
+ */
146
+ declare function VectorEnvelopePanel({ controller, className }: VectorEnvelopePanelProps): React__default.JSX.Element | null;
147
+
126
148
  interface VectorEditorProps {
127
149
  controller: VectorEditorController;
128
150
  /** Tools in the toolbar (default: all). */
@@ -137,4 +159,15 @@ interface VectorEditorProps {
137
159
  /** Toolbar, canvas and style panel for a `VectorEditorController`. */
138
160
  declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, className }: VectorEditorProps): React__default.JSX.Element;
139
161
 
140
- export { type UseVectorEditorResult, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorGradientDefs, VectorSceneNodes, VectorStylePanel, type VectorStylePanelProps, VectorToolbar, type VectorToolbarProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState };
162
+ interface VectorGradientEditorProps {
163
+ controller: VectorEditorController;
164
+ className?: string;
165
+ }
166
+ /**
167
+ * Gradient editor for the selection's fill or stroke: style (or solid), the stop ramp (click it
168
+ * to add a stop, pick a stop to edit its colour, opacity, position and midpoint), interpolation
169
+ * space, smoothness, spread, how it lies on a stroke, and reverse.
170
+ */
171
+ declare function VectorGradientEditor({ controller, className }: VectorGradientEditorProps): React__default.JSX.Element | null;
172
+
173
+ export { type UseVectorEditorResult, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorEnvelopePanel, type VectorEnvelopePanelProps, VectorGradientAnnotator, VectorGradientDefs, VectorGradientEditor, type VectorGradientEditorProps, VectorSceneNodes, VectorStylePanel, type VectorStylePanelProps, VectorToolbar, type VectorToolbarProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState };
package/dist/vector/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, SvgGradientDef, VectorRenderNode, VectorWidthPointEdit } from '@pixerate/editor/vector';
1
+ import { VectorEditorController, VectorEditorState, VectorTool, VectorCommandOptions, VectorEditorOptions, VectorRenderGradientAnnotator, VectorPaintDef, VectorRenderNode, VectorWidthPointEdit } from '@pixerate/editor/vector';
2
2
  import React__default from 'react';
3
3
 
4
4
  /** A `VectorEditorController` created once for the component's lifetime (destroyed on unmount). */
@@ -44,10 +44,18 @@ interface VectorCanvasProps {
44
44
  /** Accessible label (default "Vector canvas"). */
45
45
  'aria-label'?: string;
46
46
  }
47
- /** Renders `<linearGradient>` / `<radialGradient>` descriptors. */
47
+ /**
48
+ * Renders paint servers: `<linearGradient>` / `<radialGradient>` descriptors and patterns of
49
+ * gradient tiles (conic, diamond and stroke-mode gradients).
50
+ */
48
51
  declare function VectorGradientDefs({ defs }: {
49
- defs: readonly SvgGradientDef[];
52
+ defs: readonly VectorPaintDef[];
50
53
  }): React__default.JSX.Element | null;
54
+ /** The gradient tool's annotator (screen space): extent, bar, handles, stop chips and midpoints. */
55
+ declare function VectorGradientAnnotator({ annotator: g, accentColor }: {
56
+ annotator: VectorRenderGradientAnnotator;
57
+ accentColor?: string;
58
+ }): React__default.JSX.Element;
51
59
  /** Renders scene nodes (paths and groups) from `getVectorSceneRenderData`. */
52
60
  declare function VectorSceneNodes({ nodes }: {
53
61
  nodes: readonly VectorRenderNode[];
@@ -96,16 +104,18 @@ interface VectorToolbarProps {
96
104
  * spine, Replace Spine, Expand and Release (default `true`).
97
105
  */
98
106
  showBlend?: boolean;
107
+ /** The Free Distort toggle of the selection box (default `true`). */
108
+ showDistort?: boolean;
99
109
  className?: string;
100
110
  }
101
111
  /** Tool picker plus undo, snapping, boolean operations, grouping, stacking and alignment. */
102
- declare function VectorToolbar({ controller, tools, showHistory, showArrange, showSnap, showPathEdit, showBlend, className, }: VectorToolbarProps): React__default.JSX.Element;
112
+ declare function VectorToolbar({ controller, tools, showHistory, showArrange, showSnap, showPathEdit, showBlend, showDistort, className, }: VectorToolbarProps): React__default.JSX.Element;
103
113
  interface VectorStylePanelProps {
104
114
  controller: VectorEditorController;
105
115
  className?: string;
106
116
  }
107
117
  /**
108
- * Fill, stroke, stroke width, alignment and width profile, arrowheads, live corner radius, opacity and path effects (`VectorEffectsPanel`) of the
118
+ * Fill, stroke and their gradients (`VectorGradientEditor`), stroke width, alignment and width profile, arrowheads, live corner radius, opacity, path effects (`VectorEffectsPanel`) and envelope (`VectorEnvelopePanel`) of the
109
119
  * selection (corners of the selected points with the direct tool); with nothing selected it
110
120
  * edits the defaults for new shapes.
111
121
  */
@@ -123,6 +133,18 @@ interface VectorEffectsPanelProps {
123
133
  */
124
134
  declare function VectorEffectsPanel({ controller, className }: VectorEffectsPanelProps): React__default.JSX.Element | null;
125
135
 
136
+ interface VectorEnvelopePanelProps {
137
+ controller: VectorEditorController;
138
+ className?: string;
139
+ }
140
+ /**
141
+ * Envelope distortion of the selection: Make with Warp, Mesh or Top Object, and for one selected
142
+ * object with an envelope its warp preset, bend, horizontal and vertical distortion, orientation and
143
+ * mesh rows and columns, plus Release and Expand. Edit the mesh on the canvas with the Envelope
144
+ * tool. Slider drags are one undo step each.
145
+ */
146
+ declare function VectorEnvelopePanel({ controller, className }: VectorEnvelopePanelProps): React__default.JSX.Element | null;
147
+
126
148
  interface VectorEditorProps {
127
149
  controller: VectorEditorController;
128
150
  /** Tools in the toolbar (default: all). */
@@ -137,4 +159,15 @@ interface VectorEditorProps {
137
159
  /** Toolbar, canvas and style panel for a `VectorEditorController`. */
138
160
  declare function VectorEditor({ controller, tools, showStylePanel, height, canvasProps, className }: VectorEditorProps): React__default.JSX.Element;
139
161
 
140
- export { type UseVectorEditorResult, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorGradientDefs, VectorSceneNodes, VectorStylePanel, type VectorStylePanelProps, VectorToolbar, type VectorToolbarProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState };
162
+ interface VectorGradientEditorProps {
163
+ controller: VectorEditorController;
164
+ className?: string;
165
+ }
166
+ /**
167
+ * Gradient editor for the selection's fill or stroke: style (or solid), the stop ramp (click it
168
+ * to add a stop, pick a stop to edit its colour, opacity, position and midpoint), interpolation
169
+ * space, smoothness, spread, how it lies on a stroke, and reverse.
170
+ */
171
+ declare function VectorGradientEditor({ controller, className }: VectorGradientEditorProps): React__default.JSX.Element | null;
172
+
173
+ export { type UseVectorEditorResult, VectorCanvas, type VectorCanvasProps, type VectorCommandTarget, VectorEditor, type VectorEditorProps, VectorEffectsPanel, type VectorEffectsPanelProps, VectorEnvelopePanel, type VectorEnvelopePanelProps, VectorGradientAnnotator, VectorGradientDefs, VectorGradientEditor, type VectorGradientEditorProps, VectorSceneNodes, VectorStylePanel, type VectorStylePanelProps, VectorToolbar, type VectorToolbarProps, VectorWidthPointEditor, type VectorWidthPointEditorProps, useVectorCommands, useVectorEditor, useVectorEditorController, useVectorEditorState };