@pixerate/editor-react 0.15.0 → 0.16.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 } 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,54 @@ 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>;
+
+export { AdjustmentLayersPanel, type AdjustmentLayersPanelProps, ControlSlider, type ControlSliderProps, CurvesEditor, type CurvesEditorProps, Histogram, type HistogramProps, ImageEditor, type ImageEditorProps, 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 } 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,54 @@ 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>;
+
+export { AdjustmentLayersPanel, type AdjustmentLayersPanelProps, ControlSlider, type ControlSliderProps, CurvesEditor, type CurvesEditorProps, Histogram, type HistogramProps, ImageEditor, type ImageEditorProps, type UseImageEditorReturn, useImageEditor, useImageHistogram };

package/dist/image-editor/index.js

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