@gradio/imageeditor 0.12.14 → 0.14.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 (131) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/Example.svelte +1 -1
  3. package/IMAGE_EDITOR_OVERVIEW.md +224 -0
  4. package/ImageEditor.stories.svelte +13 -5
  5. package/Index.svelte +46 -45
  6. package/{shared/InteractiveImageEditor.svelte → InteractiveImageEditor.svelte} +65 -103
  7. package/README.md +2 -0
  8. package/dist/Example.svelte.d.ts +1 -1
  9. package/dist/Index.svelte +35 -33
  10. package/dist/Index.svelte.d.ts +25 -16
  11. package/dist/{shared/InteractiveImageEditor.svelte → InteractiveImageEditor.svelte} +54 -88
  12. package/dist/{shared/InteractiveImageEditor.svelte.d.ts → InteractiveImageEditor.svelte.d.ts} +17 -15
  13. package/dist/shared/Anchor.svelte +311 -0
  14. package/dist/shared/Anchor.svelte.d.ts +18 -0
  15. package/dist/shared/Controls.svelte +169 -18
  16. package/dist/shared/Controls.svelte.d.ts +9 -2
  17. package/dist/shared/{tools/IconButton.svelte → IconButton.svelte} +19 -3
  18. package/dist/shared/{tools/IconButton.svelte.d.ts → IconButton.svelte.d.ts} +4 -1
  19. package/dist/shared/ImageEditor.svelte +572 -289
  20. package/dist/shared/ImageEditor.svelte.d.ts +54 -56
  21. package/dist/shared/Layers.svelte +260 -0
  22. package/dist/shared/Layers.svelte.d.ts +37 -0
  23. package/dist/shared/Resize.svelte +218 -0
  24. package/dist/shared/Resize.svelte.d.ts +29 -0
  25. package/dist/shared/SecondaryToolbar.svelte +55 -0
  26. package/dist/shared/SecondaryToolbar.svelte.d.ts +37 -0
  27. package/dist/shared/Toolbar.svelte +337 -0
  28. package/dist/shared/Toolbar.svelte.d.ts +42 -0
  29. package/dist/shared/{tools → brush}/BrushOptions.svelte +68 -64
  30. package/dist/shared/{tools → brush}/BrushOptions.svelte.d.ts +9 -9
  31. package/dist/shared/{tools → brush}/BrushSize.svelte +2 -27
  32. package/dist/shared/{tools → brush}/ColorField.svelte +2 -1
  33. package/dist/shared/{tools → brush}/ColorField.svelte.d.ts +1 -0
  34. package/dist/shared/{tools → brush}/ColorPicker.svelte +81 -9
  35. package/dist/shared/{tools → brush}/ColorPicker.svelte.d.ts +1 -0
  36. package/dist/shared/{tools → brush}/ColorSwatch.svelte +78 -38
  37. package/dist/shared/{tools → brush}/ColorSwatch.svelte.d.ts +6 -2
  38. package/dist/shared/brush/brush-cursor.d.ts +101 -0
  39. package/dist/shared/brush/brush-cursor.js +327 -0
  40. package/dist/shared/brush/brush-textures.d.ts +65 -0
  41. package/dist/shared/brush/brush-textures.js +385 -0
  42. package/dist/shared/brush/brush-utils.d.ts +32 -0
  43. package/dist/shared/brush/brush-utils.js +59 -0
  44. package/dist/shared/brush/brush.d.ts +152 -0
  45. package/dist/shared/brush/brush.js +397 -0
  46. package/dist/shared/brush/types.d.ts +37 -0
  47. package/dist/shared/brush/types.js +1 -0
  48. package/dist/shared/core/editor.d.ts +261 -0
  49. package/dist/shared/core/editor.js +1264 -0
  50. package/dist/shared/crop/crop.d.ts +201 -0
  51. package/dist/shared/crop/crop.js +727 -0
  52. package/dist/shared/image/image.d.ts +89 -0
  53. package/dist/shared/image/image.js +183 -0
  54. package/dist/shared/resize/resize.d.ts +270 -0
  55. package/dist/shared/resize/resize.js +1413 -0
  56. package/dist/shared/types.d.ts +16 -0
  57. package/dist/shared/utils/pixi.d.ts +16 -57
  58. package/dist/shared/utils/pixi.js +15 -113
  59. package/dist/shared/zoom/zoom.d.ts +136 -0
  60. package/dist/shared/zoom/zoom.js +548 -0
  61. package/package.json +8 -7
  62. package/shared/Anchor.svelte +384 -0
  63. package/shared/Controls.svelte +178 -37
  64. package/shared/{tools/IconButton.svelte → IconButton.svelte} +21 -4
  65. package/shared/ImageEditor.svelte +712 -350
  66. package/shared/Layers.svelte +282 -0
  67. package/shared/Resize.svelte +239 -0
  68. package/shared/SecondaryToolbar.svelte +67 -0
  69. package/shared/Toolbar.svelte +386 -0
  70. package/shared/brush/BRUSH_TOOL.md +134 -0
  71. package/shared/brush/BrushOptions.svelte +200 -0
  72. package/shared/{tools → brush}/BrushSize.svelte +2 -30
  73. package/shared/{tools → brush}/ColorField.svelte +3 -1
  74. package/shared/{tools → brush}/ColorPicker.svelte +86 -9
  75. package/shared/{tools → brush}/ColorSwatch.svelte +95 -42
  76. package/shared/brush/brush-cursor.ts +408 -0
  77. package/shared/brush/brush-textures.ts +485 -0
  78. package/shared/brush/brush-utils.ts +76 -0
  79. package/shared/brush/brush.ts +510 -0
  80. package/shared/brush/types.ts +41 -0
  81. package/shared/core/EDITOR.md +182 -0
  82. package/shared/core/editor.ts +1788 -0
  83. package/shared/crop/CROP.md +139 -0
  84. package/shared/crop/crop.ts +1027 -0
  85. package/shared/image/IMAGE.md +135 -0
  86. package/shared/image/image.ts +298 -0
  87. package/shared/resize/resize.ts +1894 -0
  88. package/shared/types.ts +19 -0
  89. package/shared/utils/pixi.ts +19 -246
  90. package/shared/zoom/zoom.ts +729 -0
  91. package/dist/shared/layers/Layers.svelte +0 -231
  92. package/dist/shared/layers/Layers.svelte.d.ts +0 -18
  93. package/dist/shared/layers/utils.d.ts +0 -73
  94. package/dist/shared/layers/utils.js +0 -156
  95. package/dist/shared/tools/Brush.svelte +0 -215
  96. package/dist/shared/tools/Brush.svelte.d.ts +0 -29
  97. package/dist/shared/tools/Crop.svelte +0 -155
  98. package/dist/shared/tools/Crop.svelte.d.ts +0 -16
  99. package/dist/shared/tools/Cropper.svelte +0 -271
  100. package/dist/shared/tools/Cropper.svelte.d.ts +0 -41
  101. package/dist/shared/tools/Handle.svelte +0 -260
  102. package/dist/shared/tools/Handle.svelte.d.ts +0 -29
  103. package/dist/shared/tools/Sources.svelte +0 -257
  104. package/dist/shared/tools/Sources.svelte.d.ts +0 -34
  105. package/dist/shared/tools/Tools.svelte +0 -102
  106. package/dist/shared/tools/Tools.svelte.d.ts +0 -48
  107. package/dist/shared/tools/brush.d.ts +0 -62
  108. package/dist/shared/tools/brush.js +0 -133
  109. package/dist/shared/tools/crop.d.ts +0 -15
  110. package/dist/shared/tools/crop.js +0 -154
  111. package/dist/shared/tools/index.d.ts +0 -5
  112. package/dist/shared/tools/index.js +0 -5
  113. package/dist/shared/tools/sources.d.ts +0 -46
  114. package/dist/shared/tools/sources.js +0 -121
  115. package/dist/shared/tools/types.d.ts +0 -1
  116. package/shared/layers/Layers.svelte +0 -250
  117. package/shared/layers/utils.ts +0 -294
  118. package/shared/tools/Brush.svelte +0 -280
  119. package/shared/tools/BrushOptions.svelte +0 -180
  120. package/shared/tools/Crop.svelte +0 -189
  121. package/shared/tools/Cropper.svelte +0 -346
  122. package/shared/tools/Handle.svelte +0 -289
  123. package/shared/tools/Sources.svelte +0 -283
  124. package/shared/tools/Tools.svelte +0 -162
  125. package/shared/tools/brush.ts +0 -247
  126. package/shared/tools/crop.ts +0 -213
  127. package/shared/tools/index.ts +0 -5
  128. package/shared/tools/sources.ts +0 -195
  129. package/shared/tools/types.ts +0 -1
  130. /package/dist/shared/{tools → brush}/BrushSize.svelte.d.ts +0 -0
  131. /package/dist/shared/{tools/types.js → types.js} +0 -0
@@ -0,0 +1,201 @@
1
+ import { type ImageEditorContext, type Tool } from "../core/editor";
2
+ import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
3
+ /**
4
+ * @interface CropBounds
5
+ * @description Defines the bounds of a crop area
6
+ * @property {number} x - The x-coordinate of the crop area
7
+ * @property {number} y - The y-coordinate of the crop area
8
+ * @property {number} width - The width of the crop area
9
+ * @property {number} height - The height of the crop area
10
+ */
11
+ interface CropBounds {
12
+ x: number;
13
+ y: number;
14
+ width: number;
15
+ height: number;
16
+ }
17
+ /**
18
+ * @class CropTool
19
+ * @implements {Tool}
20
+ * @description Implements the crop tool functionality for the image editor
21
+ */
22
+ export declare class CropTool implements Tool {
23
+ name: "crop";
24
+ private image_editor_context;
25
+ current_tool: ToolbarTool;
26
+ current_subtool: Subtool;
27
+ private readonly CORNER_SIZE;
28
+ private readonly LINE_THICKNESS;
29
+ private readonly HANDLE_COLOR;
30
+ private readonly HIT_AREA_SIZE;
31
+ private is_dragging;
32
+ private selected_handle;
33
+ private active_corner_index;
34
+ private active_edge_index;
35
+ private last_pointer_position;
36
+ crop_bounds: CropBounds;
37
+ private crop_ui_container;
38
+ private crop_mask;
39
+ private dimensions;
40
+ private position;
41
+ private scale;
42
+ private is_dragging_window;
43
+ private drag_start_position;
44
+ private drag_start_bounds;
45
+ private background_image_watcher;
46
+ private has_been_manually_changed;
47
+ private event_callbacks;
48
+ /**
49
+ * @method setup
50
+ * @async
51
+ * @description Sets up the crop tool with the given context and state
52
+ * @param {ImageEditorContext} context - The image editor context
53
+ * @param {ToolbarTool} tool - The current tool
54
+ * @param {Subtool} subtool - The current subtool
55
+ * @returns {Promise<void>}
56
+ */
57
+ setup(context: ImageEditorContext, tool: ToolbarTool, subtool: Subtool): Promise<void>;
58
+ /**
59
+ * @method cleanup
60
+ * @description Cleans up the crop tool resources and removes event listeners
61
+ * @returns {void}
62
+ */
63
+ cleanup(): void;
64
+ /**
65
+ * @method set_tool
66
+ * @description Sets the current tool and subtool, updating UI visibility
67
+ * @param {ToolbarTool} tool - The tool to set
68
+ * @param {Subtool} subtool - The subtool to set
69
+ * @returns {void}
70
+ */
71
+ set_tool(tool: ToolbarTool, subtool: Subtool): void;
72
+ /**
73
+ * @method set_crop_mask
74
+ * @private
75
+ * @description Sets up the crop mask for the image
76
+ * @returns {void}
77
+ */
78
+ private set_crop_mask;
79
+ /**
80
+ * @method init_crop_ui
81
+ * @private
82
+ * @async
83
+ * @description Initializes the crop UI elements and sets up the update loop
84
+ * @returns {Promise<void>}
85
+ */
86
+ private init_crop_ui;
87
+ /**
88
+ * @method make_crop_ui
89
+ * @private
90
+ * @description Creates the crop UI with the specified dimensions
91
+ * @param {number} width - Width of the crop area
92
+ * @param {number} height - Height of the crop area
93
+ * @returns {Container} The created crop UI container
94
+ */
95
+ private make_crop_ui;
96
+ /**
97
+ * @method create_handle
98
+ * @private
99
+ * @description Creates a handle for the crop UI
100
+ * @param {boolean} [is_edge=false] - Whether the handle is an edge handle
101
+ * @returns {Container} The created handle container
102
+ */
103
+ private create_handle;
104
+ /**
105
+ * @method create_edge_handles
106
+ * @private
107
+ * @description Creates edge handles for the crop UI
108
+ * @param {Container} container - The container to add handles to
109
+ * @param {number} width - Width of the crop area
110
+ * @param {number} height - Height of the crop area
111
+ * @returns {void}
112
+ */
113
+ private create_edge_handles;
114
+ /**
115
+ * @method create_corner_handles
116
+ * @private
117
+ * @description Creates corner handles for the crop UI
118
+ * @param {Container} container - The container to add handles to
119
+ * @param {number} width - Width of the crop area
120
+ * @param {number} height - Height of the crop area
121
+ * @returns {void}
122
+ */
123
+ private create_corner_handles;
124
+ /**
125
+ * @method handle_pointer_down
126
+ * @private
127
+ * @description Handles pointer down events on handles
128
+ * @param {FederatedPointerEvent} event - The pointer event
129
+ * @param {Container} handle - The handle that was clicked
130
+ * @param {number} corner_index - Index of the corner (-1 if not a corner)
131
+ * @param {number} edge_index - Index of the edge (-1 if not an edge)
132
+ * @returns {void}
133
+ */
134
+ private handle_pointer_down;
135
+ /**
136
+ * updates the crop bounds based on pointer movement
137
+ * @param delta - the change in position
138
+ */
139
+ private update_crop_bounds;
140
+ /**
141
+ * constrains the crop bounds to the image dimensions
142
+ */
143
+ private constrain_crop_bounds;
144
+ /**
145
+ * updates the crop mask graphics
146
+ */
147
+ private update_crop_mask;
148
+ /**
149
+ * updates the crop ui position and dimensions
150
+ */
151
+ private update_crop_ui;
152
+ /**
153
+ * updates the positions of all handles
154
+ * @param width - width of the crop area
155
+ * @param height - height of the crop area
156
+ */
157
+ private update_handle_positions;
158
+ /**
159
+ * sets up event listeners for the crop tool
160
+ */
161
+ private setup_event_listeners;
162
+ /**
163
+ * removes event listeners for the crop tool
164
+ */
165
+ private cleanup_event_listeners;
166
+ /**
167
+ * handles pointer move events
168
+ * @param event - the pointer event
169
+ */
170
+ private handle_pointer_move;
171
+ /**
172
+ * handles pointer up events
173
+ */
174
+ private handle_pointer_up;
175
+ /**
176
+ * handles the start of window dragging
177
+ * @param event - the pointer event
178
+ */
179
+ private handle_window_drag_start;
180
+ /**
181
+ * @returns whether the crop has been manually changed by the user
182
+ */
183
+ get crop_manually_changed(): boolean;
184
+ on<T extends string>(event: T, callback: () => void): void;
185
+ off<T extends string>(event: T, callback: () => void): void;
186
+ private notify;
187
+ get_crop_bounds(): {
188
+ x: number;
189
+ y: number;
190
+ crop_dimensions: {
191
+ width: number;
192
+ height: number;
193
+ };
194
+ image_dimensions: {
195
+ width: number;
196
+ height: number;
197
+ };
198
+ };
199
+ get_image(): Promise<Blob | null>;
200
+ }
201
+ export {};