@pixerate/editor-react 0.15.0 → 0.17.0

package/dist/image-editor/index.d.cts

@@ -1,4 +1,4 @@
-import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks } from '@pixerate/editor/image-editor';
+import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, AdjustmentKind, AdjustmentLayerInit, AdjustmentLayerUpdate, ImageHistogram, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ControlSpec, CurvePoint, AdjustmentLayer, SelectionToolOptions, SelectionMask } from '@pixerate/editor/image-editor';
 import React__default from 'react';
 
 interface UseImageEditorReturn {
@@ -18,6 +18,14 @@ interface UseImageEditorReturn {
     resetAdjustments: () => void;
     /** Update to Current Process: re-render the adjustments with the latest process (one undo step). */
     upgradeProcess: () => boolean;
+    /** Adds an adjustment layer (one undo step) and returns its id. */
+    addAdjustmentLayer: (init: AdjustmentKind | AdjustmentLayerInit, index?: number) => string;
+    updateAdjustmentLayer: (id: string, update: AdjustmentLayerUpdate, commitToHistory?: boolean) => boolean;
+    removeAdjustmentLayer: (id: string) => boolean;
+    moveAdjustmentLayer: (id: string, toIndex: number) => boolean;
+    toggleAdjustmentLayer: (id: string, enabled?: boolean) => boolean;
+    /** Histogram of the last rendered preview (after adjustments and layers); null before a render. */
+    histogram: ImageHistogram | null;
     setDepthMask: (partial: Partial<DepthMaskOptions>) => void;
     resetDepthMask: () => void;
     addAnnotation: (annotation: CreateAnnotationPayload) => string;
@@ -66,4 +74,86 @@ interface ImageEditorProps {
 }
 declare const ImageEditor: React__default.FC<ImageEditorProps>;
 
-export { ImageEditor, type ImageEditorProps, type UseImageEditorReturn, useImageEditor };
+interface HistogramProps {
+    histogram: ImageHistogram | null;
+    /** `rgb` overlays the three channels on the luminance; a single channel draws just that one. */
+    channel?: 'rgb' | 'luminance' | 'red' | 'green' | 'blue';
+    height?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/** SVG histogram of an image (see `computeHistogram` / `controller.subscribeHistogram`). */
+declare const Histogram: React__default.FC<HistogramProps>;
+/** The preview histogram of an image editor, updated after every render. */
+declare function useImageHistogram(controller: ImageEditorController): ImageHistogram | null;
+
+interface ControlSliderProps {
+    spec: ControlSpec;
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    /** Overrides `spec.label` (also the accessible name). */
+    label?: string;
+}
+/** A labelled range input described by a control-table entry. */
+declare const ControlSlider: React__default.FC<ControlSliderProps>;
+
+interface CurvesEditorProps {
+    points: CurvePoint[];
+    /** `commit` is true for the first change of a gesture (one undo step), false for the drag moves. */
+    onChange: (points: CurvePoint[], commit: boolean) => void;
+    histogram?: ImageHistogram | null;
+    channel?: 'master' | 'red' | 'green' | 'blue';
+    size?: number;
+}
+/**
+ * Curves editor over the histogram: click to add a point, drag to move it, double-click to
+ * remove it.
+ */
+declare const CurvesEditor: React__default.FC<CurvesEditorProps>;
+
+interface AdjustmentLayersPanelProps {
+    controller: ImageEditorController;
+    /** The current layers (`state.adjustments.layers`), bottom to top. Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    histogram?: ImageHistogram | null;
+}
+/**
+ * Adjustment-layer stack: add, reorder, show / hide and remove layers, and edit the selected
+ * one (curves over the histogram, levels, hue/saturation ranges, colour balance, …).
+ */
+declare const AdjustmentLayersPanel: React__default.FC<AdjustmentLayersPanelProps>;
+
+interface SelectionOptionsBarProps {
+    controller: ImageEditorController;
+    options: SelectionToolOptions;
+    onOptionsChange: (next: SelectionToolOptions) => void;
+    /** The current selection (pass `state.selection` so the bar re-renders with it). */
+    selection?: SelectionMask | null;
+    /** The current Quick Mask view flag (`state.quickMask`). */
+    quickMask?: boolean;
+    className?: string;
+}
+/**
+ * Options bar of the selection tools: tool, mode (new / add / subtract / intersect), magic wand
+ * tolerance and contiguous, anti-alias, sample merged, Select › All / Deselect / Inverse,
+ * Modify (grow, shrink, feather, border, smooth) and the Quick Mask toggle.
+ */
+declare const SelectionOptionsBar: React__default.FC<SelectionOptionsBarProps>;
+
+interface RefineEdgePanelProps {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`), so the panel re-renders with it. */
+    selection?: SelectionMask | null;
+    /** The adjustment layers (`state.adjustments.layers`), for the mask actions. */
+    layers?: AdjustmentLayer[];
+    className?: string;
+}
+/**
+ * Refine Edge (snap the selection, e.g. a coarse AI mask, to the image's edges) and layer masks:
+ * use the selection as an adjustment layer's mask, edit mask density and feather, load a mask
+ * back as a selection.
+ */
+declare const RefineEdgePanel: React__default.FC<RefineEdgePanelProps>;
+
+export { AdjustmentLayersPanel, type AdjustmentLayersPanelProps, ControlSlider, type ControlSliderProps, CurvesEditor, type CurvesEditorProps, Histogram, type HistogramProps, ImageEditor, type ImageEditorProps, RefineEdgePanel, type RefineEdgePanelProps, SelectionOptionsBar, type SelectionOptionsBarProps, type UseImageEditorReturn, useImageEditor, useImageHistogram };

package/dist/image-editor/index.d.ts

@@ -1,4 +1,4 @@
-import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks } from '@pixerate/editor/image-editor';
+import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, AdjustmentKind, AdjustmentLayerInit, AdjustmentLayerUpdate, ImageHistogram, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ControlSpec, CurvePoint, AdjustmentLayer, SelectionToolOptions, SelectionMask } from '@pixerate/editor/image-editor';
 import React__default from 'react';
 
 interface UseImageEditorReturn {
@@ -18,6 +18,14 @@ interface UseImageEditorReturn {
     resetAdjustments: () => void;
     /** Update to Current Process: re-render the adjustments with the latest process (one undo step). */
     upgradeProcess: () => boolean;
+    /** Adds an adjustment layer (one undo step) and returns its id. */
+    addAdjustmentLayer: (init: AdjustmentKind | AdjustmentLayerInit, index?: number) => string;
+    updateAdjustmentLayer: (id: string, update: AdjustmentLayerUpdate, commitToHistory?: boolean) => boolean;
+    removeAdjustmentLayer: (id: string) => boolean;
+    moveAdjustmentLayer: (id: string, toIndex: number) => boolean;
+    toggleAdjustmentLayer: (id: string, enabled?: boolean) => boolean;
+    /** Histogram of the last rendered preview (after adjustments and layers); null before a render. */
+    histogram: ImageHistogram | null;
     setDepthMask: (partial: Partial<DepthMaskOptions>) => void;
     resetDepthMask: () => void;
     addAnnotation: (annotation: CreateAnnotationPayload) => string;
@@ -66,4 +74,86 @@ interface ImageEditorProps {
 }
 declare const ImageEditor: React__default.FC<ImageEditorProps>;
 
-export { ImageEditor, type ImageEditorProps, type UseImageEditorReturn, useImageEditor };
+interface HistogramProps {
+    histogram: ImageHistogram | null;
+    /** `rgb` overlays the three channels on the luminance; a single channel draws just that one. */
+    channel?: 'rgb' | 'luminance' | 'red' | 'green' | 'blue';
+    height?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/** SVG histogram of an image (see `computeHistogram` / `controller.subscribeHistogram`). */
+declare const Histogram: React__default.FC<HistogramProps>;
+/** The preview histogram of an image editor, updated after every render. */
+declare function useImageHistogram(controller: ImageEditorController): ImageHistogram | null;
+
+interface ControlSliderProps {
+    spec: ControlSpec;
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    /** Overrides `spec.label` (also the accessible name). */
+    label?: string;
+}
+/** A labelled range input described by a control-table entry. */
+declare const ControlSlider: React__default.FC<ControlSliderProps>;
+
+interface CurvesEditorProps {
+    points: CurvePoint[];
+    /** `commit` is true for the first change of a gesture (one undo step), false for the drag moves. */
+    onChange: (points: CurvePoint[], commit: boolean) => void;
+    histogram?: ImageHistogram | null;
+    channel?: 'master' | 'red' | 'green' | 'blue';
+    size?: number;
+}
+/**
+ * Curves editor over the histogram: click to add a point, drag to move it, double-click to
+ * remove it.
+ */
+declare const CurvesEditor: React__default.FC<CurvesEditorProps>;
+
+interface AdjustmentLayersPanelProps {
+    controller: ImageEditorController;
+    /** The current layers (`state.adjustments.layers`), bottom to top. Omit to follow the controller. */
+    layers?: AdjustmentLayer[];
+    histogram?: ImageHistogram | null;
+}
+/**
+ * Adjustment-layer stack: add, reorder, show / hide and remove layers, and edit the selected
+ * one (curves over the histogram, levels, hue/saturation ranges, colour balance, …).
+ */
+declare const AdjustmentLayersPanel: React__default.FC<AdjustmentLayersPanelProps>;
+
+interface SelectionOptionsBarProps {
+    controller: ImageEditorController;
+    options: SelectionToolOptions;
+    onOptionsChange: (next: SelectionToolOptions) => void;
+    /** The current selection (pass `state.selection` so the bar re-renders with it). */
+    selection?: SelectionMask | null;
+    /** The current Quick Mask view flag (`state.quickMask`). */
+    quickMask?: boolean;
+    className?: string;
+}
+/**
+ * Options bar of the selection tools: tool, mode (new / add / subtract / intersect), magic wand
+ * tolerance and contiguous, anti-alias, sample merged, Select › All / Deselect / Inverse,
+ * Modify (grow, shrink, feather, border, smooth) and the Quick Mask toggle.
+ */
+declare const SelectionOptionsBar: React__default.FC<SelectionOptionsBarProps>;
+
+interface RefineEdgePanelProps {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`), so the panel re-renders with it. */
+    selection?: SelectionMask | null;
+    /** The adjustment layers (`state.adjustments.layers`), for the mask actions. */
+    layers?: AdjustmentLayer[];
+    className?: string;
+}
+/**
+ * Refine Edge (snap the selection, e.g. a coarse AI mask, to the image's edges) and layer masks:
+ * use the selection as an adjustment layer's mask, edit mask density and feather, load a mask
+ * back as a selection.
+ */
+declare const RefineEdgePanel: React__default.FC<RefineEdgePanelProps>;
+
+export { AdjustmentLayersPanel, type AdjustmentLayersPanelProps, ControlSlider, type ControlSliderProps, CurvesEditor, type CurvesEditorProps, Histogram, type HistogramProps, ImageEditor, type ImageEditorProps, RefineEdgePanel, type RefineEdgePanelProps, SelectionOptionsBar, type SelectionOptionsBarProps, type UseImageEditorReturn, useImageEditor, useImageHistogram };

package/dist/image-editor/index.js

@@ -1,9 +1,23 @@
 import {
+  AdjustmentLayersPanel,
+  ControlSlider,
+  CurvesEditor,
+  Histogram,
   ImageEditor,
-  useImageEditor
-} from "../chunk-LPFZMZ3L.js";
+  RefineEdgePanel,
+  SelectionOptionsBar,
+  useImageEditor,
+  useImageHistogram
+} from "../chunk-ZU54BMDC.js";
 export {
+  AdjustmentLayersPanel,
+  ControlSlider,
+  CurvesEditor,
+  Histogram,
   ImageEditor,
-  useImageEditor
+  RefineEdgePanel,
+  SelectionOptionsBar,
+  useImageEditor,
+  useImageHistogram
 };
 //# sourceMappingURL=index.js.map