pintura.d.ts 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000
  1. /* eslint-disable @typescript-eslint/no-explicit-any */
  2. type ProgressCallback = (event: ProgressEvent) => void;
  3. type Percentage = string;
  4. interface PinturaMetadata {
  5. [key: string]: any;
  6. }
  7. // prettier-ignore
  8. /**
  9. * A matrix of 20 digits based on the SVG <feColorMatrix> filter
  10. *
  11. * @example
  12. * ```
  13. * R G B A W
  14. * R | 1 0 0 0 0
  15. * G | 0 1 0 0 0
  16. * B | 0 0 1 0 0
  17. * A | 0 0 0 1 0
  18. * ```
  19. * @link Utility to generate a color matrix: https://fecolormatrix.com
  20. * @link More information on color matrices: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
  21. */
  22. type ColorMatrix = [
  23. number, number, number, number, number,
  24. number, number, number, number, number,
  25. number, number, number, number, number,
  26. number, number, number, number, number
  27. ];
  28. // prettier-ignore
  29. /**
  30. * A matrix of 9 digits based on the SVG <feConvolveMatrix> filter
  31. *
  32. * @example
  33. * ```
  34. * 1 0 0
  35. * 0 1 0
  36. * 0 0 1
  37. * ```
  38. * @link More information on convolution matrices: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix
  39. */
  40. type ConvolutionMatrix = [
  41. number, number, number,
  42. number, number, number,
  43. number, number, number
  44. ];
  45. type Color = number[];
  46. type TextAlign = 'left' | 'center' | 'right';
  47. type TextLayout = 'auto-width' | 'auto-height' | 'fixed-size';
  48. type SizeCategory =
  49. | 'extraSmall'
  50. | 'small'
  51. | 'mediumSmall'
  52. | 'medium'
  53. | 'mediumLarge'
  54. | 'large'
  55. | 'extraLarge';
  56. type LineEndStyle =
  57. | 'bar'
  58. | 'arrow'
  59. | 'arrowSolid'
  60. | 'circle'
  61. | 'circleSolid'
  62. | 'square'
  63. | 'squareSolid';
  64. interface ColorPalette {
  65. transparent?: Color;
  66. white?: Color;
  67. silver?: Color;
  68. gray?: Color;
  69. black?: Color;
  70. navy?: Color;
  71. blue?: Color;
  72. aqua?: Color;
  73. teal?: Color;
  74. olive?: Color;
  75. green?: Color;
  76. yellow?: Color;
  77. orange?: Color;
  78. red?: Color;
  79. maroon?: Color;
  80. fuchsia?: Color;
  81. purple?: Color;
  82. }
  83. type SizeCategories = Record<SizeCategory, Percentage | number>;
  84. interface LocaleCollection {
  85. [shapeProperty: string]: string;
  86. }
  87. type LocaleString = string | ((locale: LocaleCollection) => string);
  88. interface Vector {
  89. x: number;
  90. y: number;
  91. }
  92. interface Size {
  93. width: number;
  94. height: number;
  95. }
  96. interface Rect {
  97. x: number;
  98. y: number;
  99. width: number;
  100. height: number;
  101. }
  102. interface ShapeToolOptions {
  103. position?: string;
  104. }
  105. interface ShapeRectangle {
  106. x?: number | Percentage;
  107. y?: number | Percentage;
  108. width?: number | Percentage;
  109. height?: number | Percentage;
  110. }
  111. interface Shape {
  112. x?: number | Percentage;
  113. y?: number | Percentage;
  114. width?: number | Percentage;
  115. height?: number | Percentage;
  116. left?: number | Percentage;
  117. top?: number | Percentage;
  118. right?: number | Percentage;
  119. bottom?: number | Percentage;
  120. rx?: number | Percentage;
  121. ry?: number | Percentage;
  122. x1?: number | Percentage;
  123. y1?: number | Percentage;
  124. x2?: number | Percentage;
  125. y2?: number | Percentage;
  126. x3?: number | Percentage;
  127. y3?: number | Percentage;
  128. strokeColor?: Color;
  129. strokeWidth?: number | Percentage;
  130. cornerRadius?: number | Percentage;
  131. fontSize?: number | Percentage;
  132. fontFamily?: string;
  133. lineHeight?: number;
  134. textAlign?: undefined | 'left' | 'center' | 'right';
  135. text?: string;
  136. aspectRatio?: number;
  137. rotation?: number;
  138. points?: Vector[];
  139. color?: Color;
  140. backgroundColor?: Color;
  141. eraseRadius?: number;
  142. lineStart?:
  143. | undefined
  144. | 'bar'
  145. | 'arrow'
  146. | 'arrow-solid'
  147. | 'square'
  148. | 'square-solid'
  149. | 'circle'
  150. | 'circle-solid';
  151. lineEnd?:
  152. | undefined
  153. | 'bar'
  154. | 'arrow'
  155. | 'arrow-solid'
  156. | 'square'
  157. | 'square-solid'
  158. | 'circle'
  159. | 'circle-solid';
  160. isSelected?: boolean;
  161. isEditing?: boolean;
  162. disableStyle?: boolean | string[];
  163. disableErase?: boolean;
  164. disableSelect?: boolean;
  165. disableRemove?: boolean;
  166. disableDuplicate?: boolean;
  167. disableReorder?: boolean;
  168. disableFlip?: boolean;
  169. disableInput?: boolean | ((text: string) => string);
  170. disableManipulate?: boolean;
  171. disableMove?: boolean;
  172. disableResize?: boolean;
  173. disableRotate?: boolean;
  174. disableTextLayout?: boolean | TextLayout[];
  175. // private
  176. readonly _context?: Rect | Size;
  177. readonly _isDraft?: boolean;
  178. readonly _isComplete?: boolean;
  179. readonly _isError?: boolean;
  180. readonly _isLoading?: boolean;
  181. readonly _isFormatted?: boolean;
  182. }
  183. type SvelteComponent = any;
  184. type SvelteComponentProps = any;
  185. type ShapeControl = [
  186. // Component to use
  187. SvelteComponent,
  188. // Component properties to map
  189. {
  190. title?: LocaleString;
  191. label?: LocaleString;
  192. options?: SvelteComponentProps;
  193. optionIconStyle?: LocaleString;
  194. optionLabelStyle?: LocaleString;
  195. }
  196. ];
  197. type ShapeColorOption = [Color, string] | [Color, string, any];
  198. type ShapeSizeOption = [number | Percentage, string] | [number | Percentage, string, any];
  199. type ShapeLineEndOption = [LineEndStyle, string] | [LineEndStyle, string, any];
  200. type ShapeFontFamilyOption = [string, string] | [string, string, any];
  201. type ShapeFontStyleOption = [string, string] | [string, string, any];
  202. interface ShapeControlOptions {
  203. colorOptions?: false | ShapeColorOption[];
  204. strokeWidthOptions?: false | ShapeSizeOption[];
  205. lineEndStyleOptions?: false | ShapeLineEndOption[];
  206. fontFamilyOptions?: false | ShapeFontFamilyOption[];
  207. fontStyleOptions?: false | ShapeFontStyleOption[];
  208. fontSizeOptions?: false | ShapeSizeOption[];
  209. textAlignOptions?: false | [TextAlign, string][];
  210. lineHeightOptions?: false | [number, string][];
  211. }
  212. interface ShapeControlConfiguration {
  213. // A mapping of a shapeProperty to a Component
  214. [shapeProperty: string]: ShapeControl;
  215. }
  216. type StickerSrc = string; // emoji or URL
  217. interface StickerTemplate {
  218. thumb?: StickerSrc;
  219. src?: StickerSrc;
  220. width?: number;
  221. height?: number;
  222. alt?: string;
  223. disabled?: boolean;
  224. shape?: Shape;
  225. mount?: (
  226. element: HTMLElement,
  227. sticker: StickerTemplate
  228. ) => { update?: (sticker: StickerTemplate) => void; destroy?: () => void };
  229. }
  230. type Sticker = StickerSrc | StickerTemplate;
  231. interface StickerGroupOptions {
  232. icon?: string;
  233. hideLabel?: boolean;
  234. disabled?: boolean;
  235. }
  236. type StickerGroup = [string, Sticker[]] | [string, Sticker[], StickerGroupOptions];
  237. type ImageSource = File | Blob | string | HTMLImageElement | HTMLCanvasElement;
  238. interface Store {
  239. subscribe: (value: (value: any) => void) => () => void;
  240. set?: (value: any) => void;
  241. update?: (fn: (value: any) => any) => void;
  242. }
  243. interface StoreCollection {
  244. [shapeProperty: string]: Store;
  245. }
  246. type Filter = () => ColorMatrix;
  247. interface Effect {
  248. base: number;
  249. min: number;
  250. max: number;
  251. getLabel?: (value: number) => number;
  252. getStore: (stores: StoreCollection) => Store;
  253. getValue: (store: Store) => number;
  254. setValue: (store: Store, value: number) => void;
  255. }
  256. interface EditorHistory {
  257. undo: () => number;
  258. redo: () => number;
  259. revert: () => void;
  260. write: (imageState?: any) => void;
  261. get: () => any[];
  262. set: (imageStates: any[]) => void;
  263. readonly length: number;
  264. readonly index: number;
  265. }
  266. interface EditorMethods {
  267. on: (event: string, cb: (detail?: any) => void) => void;
  268. loadImage: (
  269. src: ImageSource,
  270. options: ImageOptions
  271. ) => Promise<PinturaDefaultImageReaderResult>;
  272. editImage: (
  273. src: ImageSource,
  274. options: ImageOptions
  275. ) => Promise<PinturaDefaultImageWriterResult>;
  276. processImage: () => Promise<PinturaDefaultImageWriterResult>;
  277. abortLoadImage: () => void;
  278. abortProcessImage: () => void;
  279. updateImage: (src: ImageSource) => Promise<PinturaDefaultImageReaderResult>;
  280. updateImagePreview: (src: ImageSource) => void;
  281. readonly history: EditorHistory;
  282. close: () => void;
  283. destroy: () => void;
  284. }
  285. type CropOption = [number | undefined, string];
  286. type SizeOption = [[number, number], string];
  287. type CropPresetOption = CropOption | SizeOption;
  288. type OptionGroup = [string, any[]] | [string, any[], any];
  289. interface CropPluginOptions {
  290. cropAutoCenterImageSelectionTimeout?: undefined | number;
  291. cropWillRenderImageSelectionGuides?:
  292. | undefined
  293. | ((
  294. interaction: string,
  295. interactionFraction: number
  296. ) => { rows: number; cols: number; opacity: number });
  297. cropEnableButtonFlipHorizontal?: boolean;
  298. cropEnableButtonFlipVertical?: boolean;
  299. cropEnableButtonRotateLeft?: boolean;
  300. cropEnableButtonRotateRight?: boolean;
  301. cropEnableButtonToggleCropLimit?: boolean;
  302. cropEnableCenterImageSelection?: boolean;
  303. cropEnableImageSelection?: boolean;
  304. cropEnableInfoIndicator?: boolean;
  305. cropEnableLimitWheelInputToCropSelection?: boolean;
  306. cropEnableRotationInput?: boolean;
  307. cropEnableSelectPreset?: boolean;
  308. cropEnableZoomInput?: boolean;
  309. cropEnableZoomMatchImageAspectRatio?: boolean;
  310. cropEnableZoomTowardsWheelPosition?: boolean;
  311. cropEnableZoomAutoHide?: boolean;
  312. cropImageSelectionCornerStyle?: undefined | 'hook' | 'round' | 'invisible';
  313. cropSelectPresetOptions?: OptionGroup[] | CropPresetOption[];
  314. cropEnableRotateMatchImageAspectRatio?: 'never' | 'custom' | 'always';
  315. cropWillRenderTools?: (nodes: PinturaNode[], env: any, redraw: () => void) => PinturaNode[];
  316. }
  317. interface ShapeToolButtonOptions {
  318. icon?: string;
  319. }
  320. type ShapeTool = [string, LocaleString] | [string, LocaleString, ShapeToolButtonOptions];
  321. interface MarkupEditorPropertier {
  322. markupEditorToolbar?: [string, LocaleString, any][];
  323. markupEditorToolStyles?: MarkupEditorToolStyleDefaults;
  324. markupEditorShapeStyleControls?: MarkupEditorShapeStyleControlDefaults;
  325. markupEditorToolSelectRadius?: number;
  326. }
  327. interface AnnotatePluginOptions extends MarkupEditorPropertier {
  328. annotateActiveTool?: string;
  329. annotateEnableButtonFlipVertical?: boolean;
  330. annotatePresets?: Sticker[] | StickerGroup[];
  331. }
  332. interface DecoratePluginOptions extends MarkupEditorPropertier {
  333. decorateActiveTool?: string;
  334. decorateEnableButtonFlipVertical?: boolean;
  335. decoratePresets?: Sticker[] | StickerGroup[];
  336. }
  337. interface FilterPluginOptions {
  338. filterFunctions?: { [key: string]: Filter };
  339. filterOptions?: any;
  340. }
  341. interface FinetunePluginOptions {
  342. finetuneControlConfiguration?: { [key: string]: Effect };
  343. finetuneOptions?: [string | undefined, LocaleString];
  344. }
  345. interface ResizePluginOptions {
  346. resizeMaxSize?: Size;
  347. resizeMinSize?: Size;
  348. resizeSizePresetOptions?: OptionGroup[] | SizeOption[];
  349. resizeWidthPresetOptions?: OptionGroup[] | SizeOption[];
  350. resizeHeightPresetOptions?: OptionGroup[] | SizeOption[];
  351. resizeWillRenderFooter?: (nodes: PinturaNode[], env: any, redraw: () => void) => PinturaNode[];
  352. }
  353. interface FramePluginOptions {
  354. frameStyles?: {
  355. [key: string]: {
  356. shape: {
  357. frameStyle: string;
  358. [key: string]: any;
  359. };
  360. thumb: string;
  361. };
  362. };
  363. frameOptions?: [string | undefined, LocaleString];
  364. }
  365. interface StickerPluginOptions {
  366. stickers?: Sticker[] | StickerGroup[];
  367. stickerStickToImage?: boolean;
  368. stickersEnableButtonFlipVertical?: boolean;
  369. }
  370. interface ImageOptions {
  371. readonly size: Size;
  372. readonly aspectRatio: number;
  373. readonly cropSize: Size;
  374. readonly cropRectAspectRatio: number;
  375. readonly file: File;
  376. readonly loadState: any;
  377. readonly processState: any;
  378. readonly rotationRange: [number, number];
  379. backgroundColor?: Color;
  380. colorMatrix?: ColorMatrix;
  381. convolutionMatrix?: ConvolutionMatrix;
  382. crop?: Rect;
  383. cropAspectRatio?: number | undefined;
  384. cropLimitToImage?: boolean;
  385. cropMaxSize?: Size;
  386. cropMinSize?: Size;
  387. redaction?: ShapeRectangle[];
  388. annotation?: Shape[];
  389. decoration?: Shape[];
  390. flipX?: boolean;
  391. flipY?: boolean;
  392. gamma?: number;
  393. noise?: number;
  394. rotation?: number;
  395. vignette?: number;
  396. targetSize?: Size;
  397. metadata?: PinturaMetadata;
  398. state?: any;
  399. }
  400. interface EditorImageOptionsReadonly {
  401. readonly imageSize: Size;
  402. readonly imageAspectRatio: number;
  403. readonly imageCropSize: Size;
  404. readonly imageCropRectAspectRatio: number;
  405. readonly imageFile: File;
  406. readonly imageLoadState: any;
  407. readonly imageProcessState: any;
  408. readonly imageRotationRange: [number, number];
  409. }
  410. interface EditorImageOptions {
  411. imageBackgroundColor?: Color;
  412. imageColorMatrix?: ColorMatrix;
  413. imageConvolutionMatrix?: ConvolutionMatrix;
  414. imageCrop?: Rect;
  415. imageCropAspectRatio?: number | undefined;
  416. imageCropLimitToImage?: boolean;
  417. imageCropMaxSize?: Size;
  418. imageCropMinSize?: Size;
  419. imageRedaction?: ShapeRectangle[];
  420. imageAnnotation?: Shape[];
  421. imageDecoration?: Shape[];
  422. imageFlipX?: boolean;
  423. imageFlipY?: boolean;
  424. imageGamma?: number;
  425. imageNoise?: number;
  426. imageRotation?: number;
  427. imageVignette?: number;
  428. imageTargetSize?: Size;
  429. imageFrame?:
  430. | string
  431. | {
  432. [key: string]: any;
  433. frameStyle: string;
  434. };
  435. imageMetadata?: PinturaMetadata;
  436. imageState?: any;
  437. }
  438. interface EditorOptionsReadonly {
  439. readonly element?: HTMLElement;
  440. readonly stores?: any[];
  441. readonly images?: any;
  442. }
  443. interface PinturaNodeOptions {
  444. [key: string]: any;
  445. }
  446. type PinturaComponent = 'Button' | 'Dropdown';
  447. type PinturaNodeType = string | SvelteComponent | PinturaComponent;
  448. // ignore for TypeScript 3.x
  449. // @ts-ignore
  450. type PinturaNode =
  451. | [PinturaNodeType, string]
  452. | [PinturaNodeType, string, PinturaNodeOptions]
  453. | [PinturaNodeType, string, PinturaNode[]]
  454. | [PinturaNodeType, string, PinturaNodeOptions, PinturaNode[]];
  455. type PinturaEditorStatus = string | [string] | [string, number] | [string, false] | undefined;
  456. interface EditorOptions {
  457. id?: string;
  458. class?: string;
  459. animations?: boolean;
  460. src?: ImageSource;
  461. util?: string;
  462. utils?: string[];
  463. disabled?: boolean;
  464. status?: PinturaEditorStatus;
  465. elasticityMultiplier?: number;
  466. layoutDirectionPreference?: 'auto' | 'horizontal' | 'vertical';
  467. layoutVerticalUtilsPreference?: 'left' | 'right';
  468. layoutHorizontalUtilsPreference?: 'bottom' | 'top';
  469. imageSourceToImageData?: (src: any) => Promise<ImageData>;
  470. previewImageData: ImageBitmap | ImageData | HTMLCanvasElement;
  471. previewImageDataMaxSize?: Size;
  472. previewUpscale?: boolean;
  473. shapePreprocessor?: any;
  474. enableButtonClose?: boolean;
  475. enableButtonExport?: boolean;
  476. enableButtonResetHistory?: boolean;
  477. enableButtonRevert?: boolean;
  478. enableNavigateHistory?: boolean;
  479. enableToolbar?: boolean;
  480. enableUtils?: boolean;
  481. enableDropImage?: boolean;
  482. enablePasteImage?: boolean;
  483. enableMarkupEditorToolSelectToAddShape?: boolean;
  484. handleEvent?: (type: string, detail: any) => void;
  485. willClose?: () => Promise<boolean>;
  486. willRevert?: () => Promise<boolean>;
  487. willProcessImage?: () => Promise<boolean>;
  488. willRenderCanvas?: (
  489. shapes: {
  490. decorationShapes: Shape[];
  491. annotationShapes: Shape[];
  492. interfaceShapes: Shape[];
  493. },
  494. state: any
  495. ) => {
  496. decorationShapes: Shape[];
  497. annotationShapes: Shape[];
  498. interfaceShapes: Shape[];
  499. };
  500. willSetHistoryInitialState?: (initialState: any) => any;
  501. willRenderToolbar?: (nodes: PinturaNode[], env: any) => PinturaNode[];
  502. beforeSelectShape?: (current: Shape | undefined, target: Shape) => boolean;
  503. beforeDeselectShape?: (current: Shape, target: Shape | undefined) => boolean;
  504. beforeAddShape?: (shape: Shape) => boolean;
  505. beforeRemoveShape?: (shape: Shape) => boolean;
  506. beforeUpdateShape?: (shape: Shape, props: any, context: Rect) => Shape;
  507. willRenderShapeControls?: (nodes: PinturaNode[], shapeId: string) => PinturaNode[];
  508. willRenderShapePresetToolbar?: (
  509. nodes: PinturaNode[],
  510. addPreset: (sticker: Sticker) => void,
  511. env: any
  512. ) => PinturaNode[];
  513. }
  514. interface PinturaEditorOptions
  515. extends EditorOptions,
  516. EditorImageOptions,
  517. AnnotatePluginOptions,
  518. CropPluginOptions,
  519. DecoratePluginOptions,
  520. FilterPluginOptions,
  521. FinetunePluginOptions,
  522. StickerPluginOptions {
  523. locale: any;
  524. imageReader: any[];
  525. imageWriter?: any[];
  526. imageOrienter?: any;
  527. imageScrambler?: any;
  528. }
  529. interface PinturaEditorDefaultOptions
  530. extends EditorOptions,
  531. EditorImageOptions,
  532. AnnotatePluginOptions,
  533. CropPluginOptions,
  534. DecoratePluginOptions,
  535. FilterPluginOptions,
  536. FinetunePluginOptions,
  537. StickerPluginOptions {
  538. locale?: any;
  539. imageReader?: any[];
  540. imageWriter?: any[];
  541. imageOrienter?: any;
  542. }
  543. interface PinturaEditorHeadlessOptions extends EditorImageOptions {
  544. imageReader?: any[];
  545. imageWriter?: any[];
  546. imageScrambler?: any;
  547. shapePreprocessor?: any;
  548. }
  549. interface PinturaEditor
  550. extends EditorMethods,
  551. PinturaEditorOptions,
  552. EditorOptionsReadonly,
  553. EditorImageOptionsReadonly {}
  554. interface PinturaEditorModalOptions {
  555. preventZoomViewport?: boolean;
  556. preventScrollBodyIfNeeded?: boolean;
  557. preventFooterOverlapIfNeeded?: boolean;
  558. enableAutoHide?: boolean;
  559. enableAutoDestroy?: boolean;
  560. readonly modal?: HTMLElement;
  561. }
  562. interface PinturaEditorModal extends PinturaEditor, PinturaEditorModalOptions {
  563. show: () => void;
  564. hide: () => void;
  565. }
  566. // Default image reader and writer
  567. interface PinturaDefaultImageReaderResult {
  568. readonly src: ImageSource;
  569. readonly dest: File;
  570. readonly size: Size;
  571. }
  572. interface PinturaDefaultImageWriterResult {
  573. readonly src: ImageSource;
  574. readonly dest: File;
  575. readonly imageState: any;
  576. readonly store: any;
  577. }
  578. interface PinturaTargetSize {
  579. width?: number;
  580. height?: number;
  581. fit?: 'contain' | 'cover' | 'force';
  582. upscale?: boolean;
  583. }
  584. interface PinturaDefaultImageReaderOptions {
  585. orientImage?: boolean;
  586. outputProps?: string[];
  587. preprocessImageFile?: (file: File, options: any, onprogress: ProgressCallback) => Promise<File>;
  588. }
  589. type PinturaStoreField = [string, string] | [string, Blob | File, string];
  590. interface PinturaDefaultImageWriterOptions {
  591. canvasMemoryLimit?: number;
  592. orientImage?: boolean;
  593. copyImageHead?: boolean;
  594. mimeType?: string;
  595. quality?: number;
  596. format?: 'file' | 'imageData' | 'canvas';
  597. renameFile?: (file: File) => string;
  598. targetSize?: PinturaTargetSize;
  599. store?:
  600. | string
  601. | { url: string; dataset?: (imageState: any) => PinturaStoreField[] }
  602. | ((imageState: any, options: any, onprogress: ProgressCallback) => Promise<any>);
  603. outputProps?: string[];
  604. preprocessImageSource?: (
  605. imageSource: Blob | File,
  606. options: any,
  607. onprogress: ProgressCallback
  608. ) => Promise<Blob | File>;
  609. preprocessImageState?: (
  610. imageState: any,
  611. options: any,
  612. onprogress: ProgressCallback
  613. ) => Promise<any>;
  614. postprocessImageData?: (
  615. imageData: any,
  616. options: any,
  617. onprogress: ProgressCallback
  618. ) => Promise<ImageData>;
  619. postprocessImageBlob?: (
  620. output: {
  621. blob: Blob;
  622. imageData: ImageData;
  623. src: File;
  624. },
  625. options: any,
  626. onprogress: ProgressCallback
  627. ) => Promise<ImageData>;
  628. }
  629. interface PinturaDefaultImageScramblerOptions {
  630. blurAmount: number;
  631. scrambleAmount: number;
  632. // enableSmoothing: boolean;
  633. }
  634. interface PinturaImageOrienter {
  635. read: (file: Blob | File, onprogress?: ProgressCallback) => Promise<number>;
  636. apply: (imageData: ImageData, orientation: number) => ImageData;
  637. }
  638. // exports
  639. export const setPlugins: (...plugins: any[]) => void;
  640. export const getEditorDefaults: (
  641. options?: PinturaEditorDefaultOptions
  642. ) => PinturaEditorDefaultOptions;
  643. export const appendEditor: (
  644. target: HTMLElement | string,
  645. options?: PinturaEditorOptions
  646. ) => PinturaEditor;
  647. export const appendDefaultEditor: (
  648. target: HTMLElement | string,
  649. options?: PinturaEditorDefaultOptions
  650. ) => PinturaEditor;
  651. export const appendEditors: (
  652. target: HTMLElement | string,
  653. options?: PinturaEditorOptions
  654. ) => PinturaEditor[];
  655. export const appendDefaultEditors: (
  656. target: HTMLElement | string,
  657. options?: PinturaEditorDefaultOptions
  658. ) => PinturaEditor[];
  659. export const overlayEditor: (
  660. target: HTMLElement | string,
  661. options?: PinturaEditorOptions
  662. ) => PinturaEditor;
  663. export const overlayDefaultEditor: (
  664. target: HTMLElement | string,
  665. options?: PinturaEditorDefaultOptions
  666. ) => PinturaEditor;
  667. export const openEditor: (options: PinturaEditorOptions) => PinturaEditorModal;
  668. export const openDefaultEditor: (options: PinturaEditorDefaultOptions) => PinturaEditorModal;
  669. export const defineCustomElements: (options?: PinturaEditorOptions) => Promise<PinturaEditor>;
  670. export const defineDefaultCustomElements: (
  671. options?: PinturaEditorDefaultOptions
  672. ) => Promise<PinturaEditor>;
  673. export const processImage: (
  674. src: ImageSource,
  675. options: PinturaEditorHeadlessOptions
  676. ) => Promise<PinturaDefaultImageWriterResult>;
  677. export const processDefaultImage: (
  678. src: ImageSource,
  679. options: PinturaEditorHeadlessOptions
  680. ) => Promise<PinturaDefaultImageWriterResult>;
  681. export const createDefaultImageReader: (options?: PinturaDefaultImageReaderOptions) => any[];
  682. export const createDefaultImageWriter: (options?: PinturaDefaultImageWriterOptions) => any[];
  683. export const createDefaultImageOrienter: () => PinturaImageOrienter;
  684. export const createDefaultImageScrambler: (
  685. options?: PinturaDefaultImageScramblerOptions
  686. ) => (imageData: ImageData | ImageBitmap) => HTMLCanvasElement;
  687. export const createDefaultShapePreprocessor: () => any;
  688. // node tree helpers
  689. export function createNode(
  690. name: PinturaNodeType,
  691. id: string,
  692. props: PinturaNodeOptions | undefined,
  693. children: PinturaNode[]
  694. ): PinturaNode;
  695. export function createNode(name: PinturaNodeType, id: string): PinturaNode;
  696. export function createNode(name: PinturaNodeType, id: string, children: PinturaNode[]): PinturaNode;
  697. export function createNode(
  698. name: PinturaNodeType,
  699. id: string,
  700. props: PinturaNodeOptions
  701. ): PinturaNode;
  702. export function findNode(id: string, haystack: PinturaNode | PinturaNode[]): void;
  703. export function appendNode(node: PinturaNode, haystack: PinturaNode | PinturaNode[]): void;
  704. export function removeNode(id: string): void;
  705. export function insertNodeBefore(
  706. node: PinturaNode,
  707. targetId: string,
  708. haystack: PinturaNode | PinturaNode[]
  709. ): void;
  710. export function insertNodeAfter(
  711. node: PinturaNode,
  712. targetId: string,
  713. haystack: PinturaNode | PinturaNode[]
  714. ): void;
  715. // utils
  716. export const supportsWebGL: () => boolean;
  717. export const degToRad: (deg: number) => number;
  718. export const colorStringToColorArray: (Color: string) => Color;
  719. export const legacyDataToImageState: (data: any) => ImageOptions;
  720. export const dispatchEditorEvents: (
  721. editor: PinturaEditor,
  722. element: HTMLElement,
  723. options?: { prefix?: string }
  724. ) => any[];
  725. export const blobToFile: (blob: Blob) => File;
  726. export const isSupported: () => boolean;
  727. // locale
  728. export const locale_en_gb: LocaleCollection;
  729. //
  730. // markup editor
  731. //
  732. interface MarkupEditorToolStyleDefaults {
  733. sharpie: [Shape, ShapeToolOptions];
  734. line: [Shape, ShapeToolOptions];
  735. arrow: [Shape, ShapeToolOptions];
  736. rectangle: [Shape, ShapeToolOptions];
  737. ellipse: [Shape, ShapeToolOptions];
  738. text: [Shape, ShapeToolOptions];
  739. [custom: string]: [Shape, ShapeToolOptions];
  740. }
  741. interface MarkupEditorShapeStyleControlDefaults {
  742. backgroundColor: undefined | ShapeControl;
  743. strokeColor: undefined | ShapeControl;
  744. strokeWidth: undefined | ShapeControl;
  745. lineStart: undefined | ShapeControl;
  746. lineEnd: undefined | ShapeControl;
  747. color: undefined | ShapeControl;
  748. fontFamily: undefined | ShapeControl;
  749. fontStyle_fontWeight: undefined | ShapeControl;
  750. fontSize: undefined | ShapeControl;
  751. textAlign: undefined | ShapeControl;
  752. // lineHeight: undefined | ShapeControl;
  753. }
  754. type ToolbarItem =
  755. | string
  756. | [string, { disabled?: boolean; icon: string }]
  757. | [string, LocaleString, { disabled?: boolean; icon: string }];
  758. /**
  759. * Create tools available in the markup editor
  760. */
  761. export const createMarkupEditorToolbar: (tools?: ToolbarItem[]) => [string, LocaleString, any][];
  762. /**
  763. * Create default shape styles for each tool, optionally add custom shape styles
  764. */
  765. export const createMarkupEditorToolStyles: (toolStyles?: {
  766. [key: string]: [Shape, ShapeToolOptions];
  767. }) => MarkupEditorToolStyleDefaults;
  768. /**
  769. * Create a custom tool style based on one of the existing types
  770. */
  771. export const createMarkupEditorToolStyle: (
  772. type: 'path' | 'rectangle' | 'ellipse' | 'line' | 'text',
  773. shape?: Shape,
  774. options?: ShapeToolOptions
  775. ) => [Shape, ShapeToolOptions];
  776. /**
  777. * Create default shape style controls
  778. */
  779. export const createMarkupEditorShapeStyleControls: (
  780. shapeControlOptions?: ShapeControlOptions
  781. ) => MarkupEditorShapeStyleControlDefaults;
  782. export const createDefaultColorOptions: () => ColorPalette;
  783. export const createDefaultFontSizeOptions: () => number[];
  784. export const createDefaultFontScaleOptions: () => SizeCategories;
  785. export const createDefaultStrokeWidthOptions: () => number[];
  786. export const createDefaultStrokeScaleOptions: () => SizeCategories;
  787. export const createDefaultLineEndStyleOptions: () => LineEndStyle[];
  788. export const createDefaultFontFamilyOptions: () => [string, string][];
  789. export const createDefaultFontStyleOptions: () => [string, string][];
  790. export const createDefaultTextAlignOptions: () => TextAlign[];
  791. export const createMarkupEditorColorOptions: (colors: ColorPalette) => ShapeColorOption[];
  792. export const createMarkupEditorFontSizeOptions: (sizes: number[]) => ShapeSizeOption[];
  793. export const createMarkupEditorFontScaleOptions: (sizes: SizeCategories) => ShapeSizeOption[];
  794. export const createMarkupEditorStrokeWidthOptions: (widths: number[]) => ShapeSizeOption[];
  795. export const createMarkupEditorStrokeScaleOptions: (sizes: SizeCategories) => ShapeSizeOption[];
  796. export const createMarkupEditorFontFamilyOptions: (
  797. families: [string, string][]
  798. ) => ShapeFontFamilyOption[];
  799. export const createMarkupEditorFontStyleOptions: (
  800. styles: [string, string][]
  801. ) => ShapeFontStyleOption[];
  802. export const createMarkupEditorLineEndStyleOptions: (
  803. styles: LineEndStyle[]
  804. ) => [LineEndStyle, string][];
  805. export const createMarkupEditorBackgroundColorControl: (colors: ShapeColorOption[]) => ShapeControl;
  806. export const createMarkupEditorStrokeColorControl: (
  807. colors: ShapeColorOption[],
  808. options?: { defaultStrokeWidth: number | string }
  809. ) => ShapeControl;
  810. export const createMarkupEditorStrokeWidthControl: (widths: ShapeSizeOption[]) => ShapeControl;
  811. export const createMarkupEditorLineStartStyleControl: (
  812. styles: [LineEndStyle, string][]
  813. ) => ShapeControl;
  814. export const createMarkupEditorLineEndStyleControl: (
  815. styles: [LineEndStyle, string][]
  816. ) => ShapeControl;
  817. export const createMarkupEditorFontColorControl: (colors: ShapeColorOption[]) => ShapeControl;
  818. export const createMarkupEditorFontFamilyControl: (
  819. fontFamilies: [string, string][]
  820. ) => ShapeControl;
  821. export const createMarkupEditorFontStyleControl: (fontStyles: [string, string][]) => ShapeControl;
  822. export const createMarkupEditorFontSizeControl: (sizes: ShapeSizeOption[]) => ShapeControl;
  823. export const createMarkupEditorTextAlignControl: (textAlignments: TextAlign[]) => ShapeControl;
  824. export const createMarkupEditorLineHeightControl: (lineHeights: [number, string][]) => ShapeControl;
  825. export const markup_editor_defaults: {
  826. markupEditorToolbar: [string, LocaleString, any][];
  827. markupEditorToolStyles: MarkupEditorToolStyleDefaults;
  828. markupEditorShapeStyleControls: MarkupEditorShapeStyleControlDefaults;
  829. };
  830. export const markup_editor_locale_en_gb: LocaleCollection;
  831. //
  832. // plugins
  833. //
  834. interface PinturaUtilPlugin {
  835. util: [string, any];
  836. }
  837. export const plugin_annotate: PinturaUtilPlugin;
  838. export const plugin_crop: PinturaUtilPlugin;
  839. export const plugin_decorate: PinturaUtilPlugin;
  840. export const plugin_filter: PinturaUtilPlugin;
  841. export const plugin_finetune: PinturaUtilPlugin;
  842. export const plugin_resize: PinturaUtilPlugin;
  843. export const plugin_sticker: PinturaUtilPlugin;
  844. export const plugin_redact: PinturaUtilPlugin;
  845. export const plugin_annotate_locale_en_gb: LocaleCollection;
  846. export const plugin_crop_locale_en_gb: LocaleCollection;
  847. export const plugin_decorate_locale_en_gb: LocaleCollection;
  848. export const plugin_filter_locale_en_gb: LocaleCollection;
  849. export const plugin_finetune_locale_en_gb: LocaleCollection;
  850. export const plugin_resize_locale_en_gb: LocaleCollection;
  851. export const plugin_sticker_locale_en_gb: LocaleCollection;
  852. export const plugin_redact_locale_en_gb: LocaleCollection;
  853. export const plugin_filter_defaults: FilterPluginOptions;
  854. export const plugin_finetune_defaults: FinetunePluginOptions;
  855. export const effectBrightness: Effect;
  856. export const effectContrast: Effect;
  857. export const effectSaturation: Effect;
  858. export const effectExposure: Effect;
  859. export const effectGamma: Effect;
  860. export const effectVignette: Effect;
  861. export const effectClarity: Effect;
  862. export const effectTemperature: Effect;
  863. export const filterPastel: Filter;
  864. export const filterChrome: Filter;
  865. export const filterFade: Filter;
  866. export const filterWarm: Filter;
  867. export const filterCold: Filter;
  868. export const filterInvert: Filter;
  869. export const filterMonoDefault: Filter;
  870. export const filterMonoNoir: Filter;
  871. export const filterMonoWash: Filter;
  872. export const filterMonoStark: Filter;
  873. export const filterSepiaDefault: Filter;
  874. export const filterSepiaBlues: Filter;
  875. export const filterSepiaRust: Filter;
  876. export const filterSepiaColor: Filter;