@gradio/imageeditor 0.11.0-beta.4 → 0.11.0-beta.6

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 (9) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/ImageEditor.stories.svelte +2 -2
  3. package/Index.svelte +1 -1
  4. package/dist/Index.svelte +1 -1
  5. package/dist/shared/ImageEditor.svelte +29 -22
  6. package/dist/shared/InteractiveImageEditor.svelte +1 -1
  7. package/package.json +9 -9
  8. package/shared/ImageEditor.svelte +30 -22
  9. package/shared/InteractiveImageEditor.svelte +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @gradio/imageeditor
2
2
 
3
+ ## 0.11.0-beta.6
4
+
5
+ ### Features
6
+
7
+ - [#9525](https://github.com/gradio-app/gradio/pull/9525) [`7c367b6`](https://github.com/gradio-app/gradio/commit/7c367b6cf0472d478671b7c7476e892b4c61c812) - Fix cut off in gr.ImageEditor. Thanks @hannahblair!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/statustracker@0.8.0-beta.4
12
+ - @gradio/atoms@0.9.0-beta.4
13
+ - @gradio/client@1.6.0-beta.4
14
+ - @gradio/upload@0.13.0-beta.6
15
+ - @gradio/image@0.16.0-beta.6
16
+
17
+ ## 0.11.0-beta.5
18
+
19
+ ### Dependency updates
20
+
21
+ - @gradio/upload@0.13.0-beta.5
22
+ - @gradio/statustracker@0.8.0-beta.3
23
+ - @gradio/icons@0.8.0-beta.3
24
+ - @gradio/atoms@0.9.0-beta.3
25
+ - @gradio/image@0.16.0-beta.5
26
+
3
27
  ## 0.11.0-beta.4
4
28
 
5
29
  ### Dependency updates
package/ImageEditor.stories.svelte CHANGED
@@ -54,7 +54,7 @@
54
54
  }}
55
55
  />
56
56
 
57
- <Story
57
+ <!-- <Story
58
58
  name="Image Editor Drawing Interactions"
59
59
  args={{
60
60
  value: {
@@ -203,7 +203,7 @@
203
203
 
204
204
  await userEvent.click(canvas.getByLabelText("Clear canvas"));
205
205
  }}
206
- />
206
+ /> -->
207
207
 
208
208
  <Story
209
209
  name="Image Editor Undo/Redo Interactions"
package/Index.svelte CHANGED
@@ -29,7 +29,7 @@
29
29
  export let root: string;
30
30
  export let value_is_output = false;
31
31
 
32
- export let height: number | undefined = 400;
32
+ export let height: number | undefined = 450;
33
33
  export let width: number | undefined;
34
34
 
35
35
  export let _selectable = false;
package/dist/Index.svelte CHANGED
@@ -18,7 +18,7 @@ export let show_label;
18
18
  export let show_download_button;
19
19
  export let root;
20
20
  export let value_is_output = false;
21
- export let height = 400;
21
+ export let height = 450;
22
22
  export let width;
23
23
  export let _selectable = false;
24
24
  export let container = true;
package/dist/shared/ImageEditor.svelte CHANGED
@@ -197,6 +197,8 @@ export function handle_remove() {
197
197
  set_tool("bg");
198
198
  }
199
199
  dispatch("clear");
200
+ let _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
201
+ editor_context.reset(true, _size);
200
202
  }
201
203
  onMount(() => {
202
204
  const _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
@@ -256,36 +258,33 @@ export function set_tool(tool) {
256
258
  on:remove_image={handle_remove}
257
259
  on:save={handle_save}
258
260
  />
259
- <div class="wrap" bind:this={canvas_wrap}>
261
+ <div class="container">
262
+ <div class="wrap" bind:this={canvas_wrap}>
263
+ <div bind:this={pixi_target} class="stage-wrap" class:bg={!bg}></div>
264
+ </div>
265
+ <div class="tools-wrap">
266
+ <slot />
267
+ </div>
260
268
  <div
261
- bind:this={pixi_target}
262
- class="stage-wrap"
263
- class:bg={!bg}
264
- style:transform="translate({$position_spring.x}px, {$position_spring.y}px)"
269
+ class="canvas"
270
+ class:no-border={!bg && $active_tool === "bg" && !history}
271
+ style:width="{$crop[2] * $editor_box.child_width + 1}px"
272
+ style:height="{$crop[3] * $editor_box.child_height + 1}px"
273
+ style:top="{$crop[1] * $editor_box.child_height +
274
+ ($editor_box.child_top - $editor_box.parent_top) -
275
+ 0.5}px"
276
+ style:left="{$crop[0] * $editor_box.child_width +
277
+ ($editor_box.child_left - $editor_box.parent_left) -
278
+ 0.5}px"
265
279
  ></div>
266
280
  </div>
267
- <div class="tools-wrap">
268
- <slot />
269
- </div>
270
- <div
271
- class="canvas"
272
- class:no-border={!bg && $active_tool === "bg" && !history}
273
- style:width="{$crop[2] * $editor_box.child_width + 1}px"
274
- style:height="{$crop[3] * $editor_box.child_height + 1}px"
275
- style:top="{$crop[1] * $editor_box.child_height +
276
- ($editor_box.child_top - $editor_box.parent_top) -
277
- 0.5}px"
278
- style:left="{$crop[0] * $editor_box.child_width +
279
- ($editor_box.child_left - $editor_box.parent_left) -
280
- 0.5}px"
281
- ></div>
282
281
  </div>
283
282
 
284
283
  <style>
285
284
  .wrap {
286
285
  display: flex;
287
286
  width: 100%;
288
- height: 90%;
287
+ height: 100%;
289
288
  position: relative;
290
289
  justify-content: center;
291
290
  }
@@ -296,15 +295,21 @@ export function set_tool(tool) {
296
295
  border-radius: var(--radius-md);
297
296
  }
298
297
 
298
+ .container {
299
+ position: relative;
300
+ margin: var(--spacing-md);
301
+ }
302
+
299
303
  .no-border {
300
304
  border: none;
301
305
  }
302
306
 
303
307
  .stage-wrap {
304
- margin: var(--size-8);
305
308
  margin-bottom: var(--size-1);
306
309
  border-radius: var(--radius-md);
307
310
  overflow: hidden;
311
+ height: fit-content;
312
+ width: auto;
308
313
  }
309
314
 
310
315
  .tools-wrap {
@@ -315,6 +320,8 @@ export function set_tool(tool) {
315
320
  border: 1px solid var(--block-border-color);
316
321
  border-radius: var(--radius-sm);
317
322
  margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
323
+ width: fit-content;
324
+ margin: 0 auto;
318
325
  }
319
326
 
320
327
  .image-container {
package/dist/shared/InteractiveImageEditor.svelte CHANGED
@@ -35,7 +35,7 @@ export let upload;
35
35
  export let stream_handler;
36
36
  export let dragging;
37
37
  export let placeholder = void 0;
38
- export let height = 400;
38
+ export let height = 450;
39
39
  const dispatch = createEventDispatcher();
40
40
  let editor;
41
41
  function is_not_null(o) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/imageeditor",
3
- "version": "0.11.0-beta.4",
3
+ "version": "0.11.0-beta.6",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -10,14 +10,14 @@
10
10
  "@types/tinycolor2": "^1.4.6",
11
11
  "pixi.js": "^7.3.2",
12
12
  "tinycolor2": "^1.6.0",
13
- "@gradio/atoms": "^0.9.0-beta.2",
14
- "@gradio/client": "^1.6.0-beta.3",
15
- "@gradio/icons": "^0.8.0-beta.2",
16
- "@gradio/image": "^0.16.0-beta.4",
17
- "@gradio/statustracker": "^0.8.0-beta.2",
18
- "@gradio/upload": "^0.13.0-beta.4",
19
- "@gradio/wasm": "^0.14.0-beta.3",
20
- "@gradio/utils": "^0.7.0-beta.2"
13
+ "@gradio/client": "^1.6.0-beta.4",
14
+ "@gradio/atoms": "^0.9.0-beta.4",
15
+ "@gradio/icons": "^0.8.0-beta.3",
16
+ "@gradio/image": "^0.16.0-beta.6",
17
+ "@gradio/upload": "^0.13.0-beta.6",
18
+ "@gradio/statustracker": "^0.8.0-beta.4",
19
+ "@gradio/utils": "^0.7.0-beta.2",
20
+ "@gradio/wasm": "^0.14.0-beta.3"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@gradio/preview": "^0.11.2-beta.0"
package/shared/ImageEditor.svelte CHANGED
@@ -279,6 +279,9 @@
279
279
  set_tool("bg");
280
280
  }
281
281
  dispatch("clear");
282
+
283
+ let _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
284
+ editor_context.reset(true, _size);
282
285
  }
283
286
 
284
287
  onMount(() => {
@@ -349,36 +352,33 @@
349
352
  on:remove_image={handle_remove}
350
353
  on:save={handle_save}
351
354
  />
352
- <div class="wrap" bind:this={canvas_wrap}>
355
+ <div class="container">
356
+ <div class="wrap" bind:this={canvas_wrap}>
357
+ <div bind:this={pixi_target} class="stage-wrap" class:bg={!bg}></div>
358
+ </div>
359
+ <div class="tools-wrap">
360
+ <slot />
361
+ </div>
353
362
  <div
354
- bind:this={pixi_target}
355
- class="stage-wrap"
356
- class:bg={!bg}
357
- style:transform="translate({$position_spring.x}px, {$position_spring.y}px)"
363
+ class="canvas"
364
+ class:no-border={!bg && $active_tool === "bg" && !history}
365
+ style:width="{$crop[2] * $editor_box.child_width + 1}px"
366
+ style:height="{$crop[3] * $editor_box.child_height + 1}px"
367
+ style:top="{$crop[1] * $editor_box.child_height +
368
+ ($editor_box.child_top - $editor_box.parent_top) -
369
+ 0.5}px"
370
+ style:left="{$crop[0] * $editor_box.child_width +
371
+ ($editor_box.child_left - $editor_box.parent_left) -
372
+ 0.5}px"
358
373
  ></div>
359
374
  </div>
360
- <div class="tools-wrap">
361
- <slot />
362
- </div>
363
- <div
364
- class="canvas"
365
- class:no-border={!bg && $active_tool === "bg" && !history}
366
- style:width="{$crop[2] * $editor_box.child_width + 1}px"
367
- style:height="{$crop[3] * $editor_box.child_height + 1}px"
368
- style:top="{$crop[1] * $editor_box.child_height +
369
- ($editor_box.child_top - $editor_box.parent_top) -
370
- 0.5}px"
371
- style:left="{$crop[0] * $editor_box.child_width +
372
- ($editor_box.child_left - $editor_box.parent_left) -
373
- 0.5}px"
374
- ></div>
375
375
  </div>
376
376
 
377
377
  <style>
378
378
  .wrap {
379
379
  display: flex;
380
380
  width: 100%;
381
- height: 90%;
381
+ height: 100%;
382
382
  position: relative;
383
383
  justify-content: center;
384
384
  }
@@ -389,15 +389,21 @@
389
389
  border-radius: var(--radius-md);
390
390
  }
391
391
 
392
+ .container {
393
+ position: relative;
394
+ margin: var(--spacing-md);
395
+ }
396
+
392
397
  .no-border {
393
398
  border: none;
394
399
  }
395
400
 
396
401
  .stage-wrap {
397
- margin: var(--size-8);
398
402
  margin-bottom: var(--size-1);
399
403
  border-radius: var(--radius-md);
400
404
  overflow: hidden;
405
+ height: fit-content;
406
+ width: auto;
401
407
  }
402
408
 
403
409
  .tools-wrap {
@@ -408,6 +414,8 @@
408
414
  border: 1px solid var(--block-border-color);
409
415
  border-radius: var(--radius-sm);
410
416
  margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
417
+ width: fit-content;
418
+ margin: 0 auto;
411
419
  }
412
420
 
413
421
  .image-container {
package/shared/InteractiveImageEditor.svelte CHANGED
@@ -56,7 +56,7 @@
56
56
  export let stream_handler: Client["stream"];
57
57
  export let dragging: boolean;
58
58
  export let placeholder: string | undefined = undefined;
59
- export let height = 400;
59
+ export let height = 450;
60
60
 
61
61
  const dispatch = createEventDispatcher<{
62
62
  clear?: never;