1import { S as SvelteComponent, i as init, s as safe_not_equal, a as svg_element, b as attr, c as insert, d as append, n as noop, e as detach, f as element, H as src_url_equal, A as createEventDispatcher, a9 as onMount, D as binding_callbacks, aa as add_render_callback, af as create_bidirectional_transition, Y as set_style, l as listen, r as run_all, m as space, ad as add_resize_listener, v as transition_in, y as group_outros, w as transition_out, z as check_outros, o as destroy_each, E as onDestroy, q as create_component, u as mount_component, x as destroy_component, t as toggle_class, a6 as tick, k as empty, J as bind, G as add_flush_callback, h as text, j as set_data, K as component_subscribe, X, L as assign, M as StatusTracker, N as get_spread_update, O as get_spread_object, F as bubble } from './index.230aa104.js'; 2import { B as BlockLabel } from './BlockLabel.2822bd72.js'; 3import { I as Image } from './Image.aa1cc774.js'; 4import { C as Cropper, i as index, U as Undo, W as Webcam } from './Webcam.3a377a04.js'; 5import { f as fade } from './index.3e3205d3.js'; 6import { I as IconButton, C as Clear, M as ModifyUpload } from './ModifyUpload.8f26a05d.js'; 7import { U as Upload } from './Upload.f4af15c4.js'; 8import { B as Block } from './Block.67caaa62.js'; 9export { E as ExampleComponent } from './Image.a2b3c088.js'; 10import './styles.db46e346.js'; 11 12/* home/runner/work/gradio/gradio/ui/packages/icons/src/Sketch.svelte generated by Svelte v3.49.0 */ 13 14function create_fragment$6(ctx) { 15 let svg; 16 let path; 17 18 return { 19 c() { 20 svg = svg_element("svg"); 21 path = svg_element("path"); 22 attr(path, "d", "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"); 23 attr(svg, "xmlns", "http://www.w3.org/2000/svg"); 24 attr(svg, "width", "100%"); 25 attr(svg, "height", "100%"); 26 attr(svg, "viewBox", "0 0 24 24"); 27 attr(svg, "fill", "none"); 28 attr(svg, "stroke", "currentColor"); 29 attr(svg, "stroke-width", "1.5"); 30 attr(svg, "stroke-linecap", "round"); 31 attr(svg, "stroke-linejoin", "round"); 32 attr(svg, "class", "feather feather-edit-2"); 33 }, 34 m(target, anchor) { 35 insert(target, svg, anchor); 36 append(svg, path); 37 }, 38 p: noop, 39 i: noop, 40 o: noop, 41 d(detaching) { 42 if (detaching) detach(svg); 43 } 44 }; 45} 46 47class Sketch$1 extends SvelteComponent { 48 constructor(options) { 49 super(); 50 init(this, options, null, create_fragment$6, safe_not_equal, {}); 51 } 52} 53 54/* home/runner/work/gradio/gradio/ui/packages/image/src/Cropper.svelte generated by Svelte v3.49.0 */ 55 56function create_fragment$5(ctx) { 57 let img; 58 let img_src_value; 59 60 return { 61 c() { 62 img = element("img"); 63 if (!src_url_equal(img.src, img_src_value = /*image*/ ctx[0])) attr(img, "src", img_src_value); 64 attr(img, "alt", ""); 65 }, 66 m(target, anchor) { 67 insert(target, img, anchor); 68 /*img_binding*/ ctx[2](img); 69 }, 70 p(ctx, [dirty]) { 71 if (dirty & /*image*/ 1 && !src_url_equal(img.src, img_src_value = /*image*/ ctx[0])) { 72 attr(img, "src", img_src_value); 73 } 74 }, 75 i: noop, 76 o: noop, 77 d(detaching) { 78 if (detaching) detach(img); 79 /*img_binding*/ ctx[2](null); 80 } 81 }; 82} 83 84function instance$5($$self, $$props, $$invalidate) { 85 let { image } = $$props; 86 let el; 87 const dispatch = createEventDispatcher(); 88 89 onMount(() => { 90 const cropper = new Cropper(el, 91 { 92 autoCropArea: 1, 93 cropend() { 94 const image_data = cropper.getCroppedCanvas().toDataURL(); 95 dispatch("crop", image_data); 96 } 97 }); 98 99 dispatch("crop", image); 100 101 return () => { 102 cropper.destroy(); 103 }; 104 }); 105 106 function img_binding($$value) { 107 binding_callbacks[$$value ? 'unshift' : 'push'](() => { 108 el = $$value; 109 $$invalidate(1, el); 110 }); 111 } 112 113 $$self.$$set = $$props => {
114 if ('image' in $$props) $$invalidate(0, image = $$props.image); 115 }; 116 117 return [image, el, img_binding]; 118} 119 120class Cropper_1 extends SvelteComponent { 121 constructor(options) { 122 super(); 123 init(this, options, instance$5, create_fragment$5, safe_not_equal, { image: 0 }); 124 } 125} 126 127class Point { 128 /** 129 * 130 * @param {number} x 131 * @param {number} y 132 */ 133 constructor(x, y) { 134 this.x = x; 135 this.y = y; 136 } 137} 138 139class LazyPoint extends Point { 140 /** 141 * Update the x and y values 142 * 143 * @param {Point} point 144 */ 145 update (point) { 146 this.x = point.x; 147 this.y = point.y; 148 } 149 150 /** 151 * Move the point to another position using an angle and distance 152 * 153 * @param {number} angle The angle in radians 154 * @param {number} distance How much the point should be moved 155 */ 156 moveByAngle (angle, distance) { 157 // Rotate the angle based on the browser coordinate system ([0,0] in the top left) 158 const angleRotated = angle + (Math.PI / 2); 159 160 this.x = this.x + (Math.sin(angleRotated) * distance), 161 this.y = this.y - (Math.cos(angleRotated) * distance); 162 } 163 164 /** 165 * Check if this point is the same as another point 166 * 167 * @param {Point} point 168 * @returns {boolean} 169 */ 170 equalsTo (point) { 171 return this.x === point.x && this.y === point.y 172 } 173 174 /** 175 * Get the difference for x and y axis to another point 176 * 177 * @param {Point} point 178 * @returns {Point} 179 */ 180 getDifferenceTo (point) { 181 return new Point(this.x - point.x, this.y - point.y) 182 } 183 184 /** 185 * Calculate distance to another point 186 * 187 * @param {Point} point 188 * @returns {Point} 189 */ 190 getDistanceTo (point) { 191 const diff = this.getDifferenceTo(point); 192 193 return Math.sqrt(Math.pow(diff.x, 2) + Math.pow(diff.y, 2)) 194 } 195 196 /** 197 * Calculate the angle to another point 198 * 199 * @param {Point} point 200 * @returns {Point} 201 */ 202 getAngleTo (point) { 203 const diff = this.getDifferenceTo(point); 204 205 return Math.atan2(diff.y, diff.x) 206 } 207 208 /** 209 * Return a simple object with x and y properties 210 * 211 * @returns {object} 212 */ 213 toObject () { 214 return { 215 x: this.x, 216 y: this.y 217 } 218 } 219} 220 221const RADIUS_DEFAULT = 30; 222 223class LazyBrush { 224 /** 225 * constructor 226 * 227 * @param {object} settings 228 * @param {number} settings.radius The radius for the lazy area 229 * @param {boolean} settings.enabled 230 */ 231 constructor ({ radius = RADIUS_DEFAULT, enabled = true, initialPoint = { x: 0, y: 0 }} = {}) { 232 this.radius = radius; 233 this._isEnabled = enabled; 234 235 this.pointer = new LazyPoint(initialPoint.x, initialPoint.y); 236 this.brush = new LazyPoint(initialPoint.x, initialPoint.y); 237 238 this.angle = 0; 239 this.distance = 0; 240 this._hasMoved = false; 241 } 242 243 /** 244 * Enable lazy brush calculations. 245 * 246 */ 247 enable () { 248 this._isEnabled = true; 249 } 250 251 /** 252 * Disable lazy brush calculations. 253 * 254 */ 255 disable () { 256 this._isEnabled = false; 257 } 258 259 /** 260 * @returns {boolean} 261 */ 262 isEnabled () { 263 return this._isEnabled 264 } 265 266 /** 267 * Update the radius 268 * 269 * @param {number} radius 270 */ 271 setRadius (radius) { 272 this.radius = radius; 273 } 274 275 /** 276 * Return the current radius 277 * 278 * @returns {number} 279 */ 280 getRadius () { 281 return this.radius 282 } 283 284 /** 285 * Return the brush coordinates as a simple object 286 * 287 * @returns {object} 288 */ 289 getBrushCoordinates () { 290 return this.brush.toObject() 291 } 292 293 /** 294 * Return the pointer coordinates as a simple object 295 * 296 * @returns {object} 297 */ 298 getPointerCoordinates () { 299 return this.pointer.toObject() 300 } 301 302 /** 303 * Return the brush as a LazyPoint 304 * 305 * @returns {LazyPoint} 306 */ 307 getBrush () { 308 return this.brush 309 } 310 311 /** 312 * Return the pointer as a LazyPoint 313 * 314 * @returns {LazyPoint} 315 */ 316 getPointer () { 317 return this.pointer 318 } 319 320 /** 321 * Return the angle between pointer and brush 322 * 323 * @returns {number} Angle in radians 324 */ 325 getAngle () { 326 return this.angle 327 } 328 329 /** 330 * Return the distance between pointer and brush 331 * 332 * @returns {number} Distance in pixels 333 */ 334 getDistance () { 335 return this.distance 336 } 337 338 /** 339 * Return if the previous update has moved the brush. 340 * 341 * @returns {boolean} Whether the brush moved previously. 342 */ 343 brushHasMoved () { 344 return this._hasMoved 345 } 346 347 /** 348 * Updates the pointer point and calculates the new brush point. 349 * 350 * @param {Point} newPointerPoint 351 * @param {Object} options 352 * @param {Boolean} options.both Force update pointer and brush 353 * @returns {Boolean} Whether any of the two points changed 354 */ 355 update (newPointerPoint, { both = false } = {}) { 356 this._hasMoved = false;
357 if (this.pointer.equalsTo(newPointerPoint) && !both) { 358 return false 359 } 360 361 this.pointer.update(newPointerPoint); 362 363 if (both) { 364 this._hasMoved = true; 365 this.brush.update(newPointerPoint); 366 return true 367 } 368 369 if (this._isEnabled) { 370 this.distance = this.pointer.getDistanceTo(this.brush); 371 this.angle = this.pointer.getAngleTo(this.brush); 372 373 if (this.distance > this.radius) { 374 this.brush.moveByAngle(this.angle, this.distance - this.radius); 375 this._hasMoved = true; 376 } 377 } else { 378 this.distance = 0; 379 this.angle = 0; 380 this.brush.update(newPointerPoint); 381 this._hasMoved = true; 382 } 383 384 return true 385 } 386} 387 388/* home/runner/work/gradio/gradio/ui/packages/image/src/Sketch.svelte generated by Svelte v3.49.0 */ 389 390function get_each_context(ctx, list, i) { 391 const child_ctx = ctx.slice(); 392 child_ctx[49] = list[i].name; 393 child_ctx[50] = list[i].zIndex; 394 child_ctx[51] = list; 395 child_ctx[52] = i; 396 return child_ctx; 397} 398 399// (466:1) {#if line_count === 0} 400function create_if_block$3(ctx) { 401 let div; 402 let div_transition; 403 let current; 404 405 return { 406 c() { 407 div = element("div"); 408 div.textContent = "Start drawing"; 409 attr(div, "class", "absolute inset-0 flex items-center justify-center z-40 pointer-events-none touch-none text-gray-400 md:text-xl"); 410 }, 411 m(target, anchor) { 412 insert(target, div, anchor); 413 current = true; 414 }, 415 i(local) { 416 if (current) return; 417 418 add_render_callback(() => { 419 if (!div_transition) div_transition = create_bidirectional_transition(div, fade, { duration: 50 }, true); 420 div_transition.run(1); 421 }); 422 423 current = true; 424 }, 425 o(local) { 426 if (!div_transition) div_transition = create_bidirectional_transition(div, fade, { duration: 50 }, false); 427 div_transition.run(0); 428 current = false; 429 }, 430 d(detaching) { 431 if (detaching) detach(div); 432 if (detaching && div_transition) div_transition.end(); 433 } 434 }; 435} 436 437// (474:1) {#each canvas_types as { name, zIndex }} 438function create_each_block(ctx) { 439 let canvas_1; 440 let canvas_1_key_value; 441 let name = /*name*/ ctx[49]; 442 let mounted; 443 let dispose; 444 const assign_canvas_1 = () => /*canvas_1_binding*/ ctx[19](canvas_1, name); 445 const unassign_canvas_1 = () => /*canvas_1_binding*/ ctx[19](null, name); 446 447 return { 448 c() { 449 canvas_1 = element("canvas"); 450 attr(canvas_1, "key", canvas_1_key_value = /*name*/ ctx[49]); 451 attr(canvas_1, "class", "inset-0 m-auto"); 452 set_style(canvas_1, "display", "block"); 453 set_style(canvas_1, "position", "absolute"); 454 set_style(canvas_1, "z-index", /*zIndex*/ ctx[50]); 455 456 set_style(canvas_1, "width", (/*mode*/ ctx[0] === 'sketch' 457 ? /*canvas_width*/ ctx[3] 458 : /*width*/ ctx[1]) + "px"); 459 460 set_style(canvas_1, "height", (/*mode*/ ctx[0] === 'sketch' 461 ? /*canvas_height*/ ctx[4] 462 : /*height*/ ctx[2]) + "px"); 463 }, 464 m(target, anchor) { 465 insert(target, canvas_1, anchor); 466 assign_canvas_1(); 467 468 if (!mounted) { 469 dispose = [ 470 listen(canvas_1, "mousedown", /*name*/ ctx[49] === "interface" 471 ? /*handle_draw_start*/ ctx[9] 472 : undefined), 473 listen(canvas_1, "mousemove", /*name*/ ctx[49] === "interface" 474 ? /*handle_draw_move*/ ctx[10] 475 : undefined), 476 listen(canvas_1, "mouseup", /*name*/ ctx[49] === "interface" 477 ? /*handle_draw_end*/ ctx[11] 478 : undefined), 479 listen(canvas_1, "mouseout", /*name*/ ctx[49] === "interface" 480 ? /*handle_draw_end*/ ctx[11] 481 : undefined), 482 listen(canvas_1, "blur", /*name*/ ctx[49] === "interface" 483 ? /*handle_draw_end*/ ctx[11] 484 : undefined), 485 listen(canvas_1, "touchstart", /*name*/ ctx[49] === "interface" 486 ? /*handle_draw_start*/ ctx[9] 487 : undefined), 488 listen(canvas_1, "touchmove", /*name*/ ctx[49] === "interface" 489 ? /*handle_draw_move*/ ctx[10] 490 : undefined), 491 listen(canvas_1, "touchend", /*name*/ ctx[49] === "interface" 492 ? /*handle_draw_end*/ ctx[11] 493 : undefined), 494 listen(canvas_1, "touchcancel", /*name*/ ctx[49] === "interface" 495 ? /*handle_draw_end*/ ctx[11] 496 : undefined) 497 ]; 498 499 mounted = true; 500 } 501 }, 502 p(new_ctx, dirty) { 503 ctx = new_ctx; 504
505 if (dirty[0] & /*mode, canvas_width, width*/ 11) { 506 set_style(canvas_1, "width", (/*mode*/ ctx[0] === 'sketch' 507 ? /*canvas_width*/ ctx[3] 508 : /*width*/ ctx[1]) + "px"); 509 } 510 511 if (dirty[0] & /*mode, canvas_height, height*/ 21) { 512 set_style(canvas_1, "height", (/*mode*/ ctx[0] === 'sketch' 513 ? /*canvas_height*/ ctx[4] 514 : /*height*/ ctx[2]) + "px"); 515 } 516 517 if (name !== /*name*/ ctx[49]) { 518 unassign_canvas_1(); 519 name = /*name*/ ctx[49]; 520 assign_canvas_1(); 521 } 522 }, 523 d(detaching) { 524 if (detaching) detach(canvas_1); 525 unassign_canvas_1(); 526 mounted = false; 527 run_all(dispose); 528 } 529 }; 530} 531 532function create_fragment$4(ctx) { 533 let div; 534 let t; 535 let div_resize_listener; 536 let current; 537 let if_block = /*line_count*/ ctx[7] === 0 && create_if_block$3(); 538 let each_value = /*canvas_types*/ ctx[8]; 539 let each_blocks = []; 540 541 for (let i = 0; i < each_value.length; i += 1) { 542 each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); 543 } 544 545 return { 546 c() { 547 div = element("div"); 548 if (if_block) if_block.c(); 549 t = space(); 550 551 for (let i = 0; i < each_blocks.length; i += 1) { 552 each_blocks[i].c(); 553 } 554 555 attr(div, "class", "touch-none relative h-full w-full"); 556 add_render_callback(() => /*div_elementresize_handler*/ ctx[21].call(div)); 557 }, 558 m(target, anchor) { 559 insert(target, div, anchor); 560 if (if_block) if_block.m(div, null); 561 append(div, t); 562 563 for (let i = 0; i < each_blocks.length; i += 1) { 564 each_blocks[i].m(div, null); 565 } 566 567 /*div_binding*/ ctx[20](div); 568 div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[21].bind(div)); 569 current = true; 570 }, 571 p(ctx, dirty) { 572 if (/*line_count*/ ctx[7] === 0) { 573 if (if_block) { 574 if (dirty[0] & /*line_count*/ 128) { 575 transition_in(if_block, 1); 576 } 577 } else { 578 if_block = create_if_block$3(); 579 if_block.c(); 580 transition_in(if_block, 1); 581 if_block.m(div, t); 582 } 583 } else if (if_block) { 584 group_outros(); 585 586 transition_out(if_block, 1, 1, () => { 587 if_block = null; 588 }); 589 590 check_outros(); 591 } 592 593 if (dirty[0] & /*canvas_types, mode, canvas_width, width, canvas_height, height, canvas, handle_draw_start, handle_draw_move, handle_draw_end*/ 3903) { 594 each_value = /*canvas_types*/ ctx[8]; 595 let i; 596 597 for (i = 0; i < each_value.length; i += 1) { 598 const child_ctx = get_each_context(ctx, each_value, i); 599 600 if (each_blocks[i]) { 601 each_blocks[i].p(child_ctx, dirty); 602 } else { 603 each_blocks[i] = create_each_block(child_ctx); 604 each_blocks[i].c(); 605 each_blocks[i].m(div, null); 606 } 607 } 608 609 for (; i < each_blocks.length; i += 1) { 610 each_blocks[i].d(1); 611 } 612 613 each_blocks.length = each_value.length; 614 } 615 }, 616 i(local) { 617 if (current) return; 618 transition_in(if_block); 619 current = true; 620 }, 621 o(local) { 622 transition_out(if_block); 623 current = false; 624 }, 625 d(detaching) { 626 if (detaching) detach(div); 627 if (if_block) if_block.d(); 628 destroy_each(each_blocks, detaching); 629 /*div_binding*/ ctx[20](null); 630 div_resize_listener(); 631 } 632 }; 633} 634 635let catenary_color = "#aaa"; 636 637function mid_point(p1, p2) { 638 return { 639 x: p1.x + (p2.x - p1.x) / 2, 640 y: p1.y + (p2.y - p1.y) / 2 641 }; 642} 643 644function instance$4($$self, $$props, $$invalidate) { 645 const dispatch = createEventDispatcher(); 646 let { value } = $$props; 647 let { mode = "sketch" } = $$props; 648 let { brush_color = "#0b0f19" } = $$props; 649 let { brush_radius = 50 } = $$props; 650 let { width = undefined } = $$props; 651 let { height = undefined } = $$props; 652 let mounted; 653 let canvas_width = width || 400; 654 let canvas_height = height || 400; 655 656 const canvas_types = [ 657 { name: "interface", zIndex: 15 }, 658 { name: "drawing", zIndex: 11 }, 659 { name: "temp", zIndex: 12 }, 660 { name: "mask", zIndex: -1 }, 661 { name: "temp_fake", zIndex: -2 } 662 ]; 663 664 let canvas = {}; 665 let ctx = {}; 666 let points = []; 667 let lines = []; 668 let mouse_has_moved = true; 669 let values_changed = true; 670 let is_drawing = false; 671 let is_pressing = false; 672 let lazy = null; 673 let chain_length = null; 674 let canvas_container = null; 675 let canvas_observer = null; 676 let line_count = 0; 677 let display_natural_ratio = 1; 678 679 function calculate_ratio() { 680 const x = canvas.interface.getBoundingClientRect(); 681 display_natural_ratio = width / x.width; 682 } 683 684 onMount(() => {
685 Object.keys(canvas).forEach(key => { 686 ctx[key] = canvas[key].getContext("2d"); 687 }); 688 689 lazy = new LazyBrush({ 690 radius: brush_radius / 1.5, 691 enabled: true, 692 initialPoint: { 693 x: window.innerWidth / 2, 694 y: window.innerHeight / 2 695 } 696 }); 697 698 chain_length = brush_radius; 699 700 canvas_observer = new index((entries, observer) => { 701 handle_canvas_resize(entries, observer); 702 calculate_ratio(); 703 }); 704 705 canvas_observer.observe(canvas_container); 706 loop(); 707 $$invalidate(18, mounted = true); 708 709 window.setTimeout( 710 () => { 711 const initX = window.innerWidth / 2; 712 const initY = window.innerHeight / 2; 713 lazy.update({ x: initX - chain_length / 4, y: initY }, { both: true }); 714 lazy.update({ x: initX + chain_length / 4, y: initY }, { both: false }); 715 mouse_has_moved = true; 716 values_changed = true; 717 clear(); 718 }, 719 100 720 ); 721 722 calculate_ratio(); 723 }); 724 725 onDestroy(() => { 726 $$invalidate(18, mounted = false); 727 canvas_observer.unobserve(canvas_container); 728 }); 729 730 function undo() { 731 const _lines = lines.slice(0, -1); 732 clear(); 733 draw_lines({ lines: _lines }); 734 $$invalidate(7, line_count = lines.length); 735 trigger_on_change(); 736 } 737 738 let get_save_data = () => { 739 return JSON.stringify({ 740 lines, 741 width: canvas_width, 742 height: canvas_height 743 }); 744 }; 745 746 let load_save_data = save_data => { 747 if (typeof save_data !== "string") { 748 throw new Error("save_data needs to be of type string!"); 749 } 750 751 const { lines, width, height } = JSON.parse(save_data); 752 753 if (!lines || typeof lines.push !== "function") { 754 throw new Error("save_data.lines needs to be an array!"); 755 } 756 757 clear(); 758 759 if (width === canvas_width && height === canvas_height) { 760 draw_lines({ lines }); 761 } else { 762 const scaleX = canvas_width / width; 763 const scaleY = canvas_height / height; 764 765 draw_lines({ 766 lines: lines.map(line => ({ 767 ...line, 768 points: line.points.map(p => ({ x: p.x * scaleX, y: p.y * scaleY })), 769 brush_radius: line.brush_radius 770 })) 771 }); 772 } 773 }; 774 775 let draw_lines = ({ lines }) => { 776 lines.forEach(line => { 777 const { points: _points, brush_color, brush_radius } = line; 778 779 draw_points({ 780 points: _points, 781 brush_color, 782 brush_radius 783 }); 784 785 if (mode === "mask") { 786 draw_fake_points({ points, brush_color, brush_radius }); 787 } 788 789 points = _points; 790 saveLine(); 791 792 if (mode === "mask") { 793 save_mask_line(); 794 } 795 796 return; 797 }); 798 }; 799 800 let handle_draw_start = e => { 801 e.preventDefault(); 802 is_pressing = true; 803 const { x, y } = get_pointer_pos(e); 804 805 if (e.touches && e.touches.length > 0) { 806 lazy.update({ x, y }, { both: true }); 807 } 808 809 handle_pointer_move(x, y); 810 $$invalidate(7, line_count += 1); 811 }; 812 813 let handle_draw_move = e => { 814 e.preventDefault(); 815 const { x, y } = get_pointer_pos(e); 816 handle_pointer_move(x, y); 817 }; 818 819 let handle_draw_end = e => { 820 e.preventDefault(); 821 handle_draw_move(e); 822 is_drawing = false; 823 is_pressing = false; 824 saveLine(); 825 826 if (mode === "mask") { 827 save_mask_line(); 828 } 829 }; 830 831 let handle_canvas_resize = entries => { 832 const save_data = get_save_data(); 833 834 for (const entry of entries) { 835 const { width, height } = entry.contentRect; 836 set_canvas_size(canvas.interface, width, height); 837 set_canvas_size(canvas.drawing, width, height); 838 set_canvas_size(canvas.temp, width, height); 839 set_canvas_size(canvas.temp_fake, width, height); 840 set_canvas_size(canvas.mask, width, height); 841 loop({ once: true }); 842 } 843 844 load_save_data(save_data); 845 }; 846 847 let set_canvas_size = (canvas, _width, _height) => { 848 canvas.width = width || _width * 3; 849 canvas.height = height || _height * 3; 850 851 canvas.style.width = mode === "mask" ? "auto" : _width; 852 canvas.style.height = mode === "mask" ? "100%" : _height; 853 }; 854 855 let get_pointer_pos = e => { 856 const rect = canvas.interface.getBoundingClientRect(); 857 let clientX = e.clientX; 858 let clientY = e.clientY; 859 860 if (e.changedTouches && e.changedTouches.length > 0) { 861 clientX = e.changedTouches[0].clientX; 862 clientY = e.changedTouches[0].clientY; 863 } 864 865 return { 866 x: clientX - rect.left, 867 y: clientY - rect.top 868 }; 869 }; 870 871 let handle_pointer_move = (x, y) => { 872 lazy.update(mode === "sketch" 873 ? { x: x * 3, y: y * 3 } 874 : { 875 x: x * display_natural_ratio, 876 y: y * display_natural_ratio 877 }); 878 879 const is_disabled = !lazy.isEnabled(); 880 881 if (is_pressing && !is_drawing || is_disabled && is_pressing) { 882 is_drawing = true; 883 points.push(lazy.brush.toObject()); 884 } 885 886 if (is_drawing) { 887 points.push(lazy.brush.toObject()); 888 draw_points({ points, brush_color, brush_radius }); 889 890 if (mode === "mask") { 891 draw_fake_points({ points, brush_color, brush_radius }); 892 } 893 } 894 895 mouse_has_moved = true; 896 }; 897 898 let draw_points = ({ points, brush_color, brush_radius }) => { 899 ctx.temp.lineJoin = "round"; 900 ctx.temp.lineCap = "round"; 901 ctx.temp.strokeStyle = brush_color; 902 ctx.temp.clearRect(0, 0, ctx.temp.canvas.width, ctx.temp.canvas.height); 903 ctx.temp.lineWidth = brush_radius; 904 let p1 = points[0]; 905 let p2 = points[1]; 906 ctx.temp.moveTo(p2.x, p2.y); 907 ctx.temp.beginPath(); 908 909 for (var i = 1, len = points.length; i < len; i++) { 910 var midPoint = mid_point(p1, p2); 911 ctx.temp.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); 912 p1 = points[i]; 913 p2 = points[i + 1]; 914 } 915 916 ctx.temp.lineTo(p1.x, p1.y); 917 ctx.temp.stroke(); 918 }; 919 920 let draw_fake_points = ({ points, brush_color, brush_radius }) => { 921 ctx.temp_fake.lineJoin = "round"; 922 ctx.temp_fake.lineCap = "round"; 923 ctx.temp_fake.strokeStyle = "#fff"; 924 ctx.temp_fake.clearRect(0, 0, ctx.temp.canvas.width, ctx.temp.canvas.height); 925 ctx.temp_fake.lineWidth = brush_radius; 926 let p1 = points[0]; 927 let p2 = points[1]; 928 ctx.temp_fake.moveTo(p2.x, p2.y); 929 ctx.temp_fake.beginPath(); 930 931 for (var i = 1, len = points.length; i < len; i++) { 932 var midPoint = mid_point(p1, p2); 933 ctx.temp_fake.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); 934 p1 = points[i]; 935 p2 = points[i + 1]; 936 } 937 938 ctx.temp_fake.lineTo(p1.x, p1.y); 939 ctx.temp_fake.stroke(); 940 }; 941 942 let save_mask_line = () => { 943 // if (points.length < 2) return; 944 lines.push({ 945 points: [...points], 946 brush_color: "#fff", 947 brush_radius 948 }); 949 950 points.length = 0; 951 const width = canvas.temp_fake.width;
952 const height = canvas.temp_fake.height; 953 ctx.mask.drawImage(canvas.temp_fake, 0, 0, width, height); 954 ctx.temp_fake.clearRect(0, 0, width, height); 955 trigger_on_change(); 956 }; 957 958 let saveLine = () => { 959 if (points.length < 2) return; 960 961 lines.push({ 962 points: [...points], 963 brush_color, 964 brush_radius 965 }); 966 967 points.length = 0; 968 const width = canvas.temp.width; 969 const height = canvas.temp.height; 970 ctx.drawing.drawImage(canvas.temp, 0, 0, width, height); 971 ctx.temp.clearRect(0, 0, width, height); 972 trigger_on_change(); 973 }; 974 975 let trigger_on_change = () => { 976 dispatch("change", get_image_data()); 977 }; 978 979 function clear() { 980 lines = []; 981 values_changed = true; 982 ctx.drawing.clearRect(0, 0, canvas.drawing.width, canvas.drawing.height); 983 ctx.temp.clearRect(0, 0, canvas.temp.width, canvas.temp.height); 984 ctx.drawing.fillStyle = mode === "sketch" ? "#FFFFFF" : "transparent"; 985 ctx.drawing.fillRect(0, 0, canvas.drawing.width, canvas.drawing.height); 986 987 if (mode === "mask") { 988 ctx.temp_fake.clearRect(0, 0, canvas.temp_fake.width, canvas.temp_fake.height); 989 ctx.mask.clearRect(0, 0, canvas.temp_fake.width, canvas.temp_fake.height); 990 ctx.mask.fillStyle = "#000"; 991 ctx.mask.fillRect(0, 0, canvas.mask.width, canvas.mask.height); 992 } 993 994 $$invalidate(7, line_count = 0); 995 } 996 997 let loop = ({ once = false } = {}) => { 998 if (mouse_has_moved || values_changed) { 999 const pointer = lazy.getPointerCoordinates(); 1000 const brush = lazy.getBrushCoordinates(); 1001 draw_interface(ctx.interface, pointer, brush); 1002 mouse_has_moved = false; 1003 values_changed = false; 1004 } 1005 1006 if (!once) { 1007 window.requestAnimationFrame(() => { 1008 loop(); 1009 }); 1010 } 1011 }; 1012 1013 let draw_interface = (ctx, pointer, brush) => { 1014 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 1015 1016 // brush preview 1017 ctx.beginPath(); 1018 1019 ctx.fillStyle = brush_color; 1020 ctx.arc(brush.x, brush.y, brush_radius / 2, 0, Math.PI * 2, true); 1021 ctx.fill(); 1022 1023 // mouse point dangler 1024 ctx.beginPath(); 1025 1026 ctx.fillStyle = catenary_color; 1027 ctx.arc(pointer.x, pointer.y, 4, 0, Math.PI * 2, true); 1028 ctx.fill(); 1029 1030 // catenary 1031 if (lazy.isEnabled()) { 1032 ctx.beginPath(); 1033 ctx.lineWidth = 2; 1034 ctx.lineCap = "round"; 1035 ctx.setLineDash([2, 4]); 1036 ctx.strokeStyle = catenary_color; 1037 ctx.stroke(); 1038 } 1039 1040 // tiny brush point dot 1041 ctx.beginPath(); 1042 1043 ctx.fillStyle = catenary_color; 1044 ctx.arc(brush.x, brush.y, 2, 0, Math.PI * 2, true); 1045 ctx.fill(); 1046 }; 1047 1048 function get_image_data() { 1049 return mode === "mask" 1050 ? canvas.mask.toDataURL("image/png") 1051 : canvas.drawing.toDataURL("image/png"); 1052 } 1053 1054 function canvas_1_binding($$value, name) { 1055 binding_callbacks[$$value ? 'unshift' : 'push'](() => { 1056 canvas[name] = $$value; 1057 $$invalidate(5, canvas); 1058 }); 1059 } 1060 1061 function div_binding($$value) { 1062 binding_callbacks[$$value ? 'unshift' : 'push'](() => { 1063 canvas_container = $$value; 1064 $$invalidate(6, canvas_container); 1065 }); 1066 } 1067 1068 function div_elementresize_handler() { 1069 canvas_width = this.offsetWidth; 1070 canvas_height = this.offsetHeight; 1071 $$invalidate(3, canvas_width); 1072 $$invalidate(4, canvas_height); 1073 } 1074 1075 $$self.$$set = $$props => {
1076 if ('value' in $$props) $$invalidate(12, value = $$props.value); 1077 if ('mode' in $$props) $$invalidate(0, mode = $$props.mode); 1078 if ('brush_color' in $$props) $$invalidate(13, brush_color = $$props.brush_color); 1079 if ('brush_radius' in $$props) $$invalidate(14, brush_radius = $$props.brush_radius); 1080 if ('width' in $$props) $$invalidate(1, width = $$props.width); 1081 if ('height' in $$props) $$invalidate(2, height = $$props.height); 1082 }; 1083 1084 $$self.$$.update = () => { 1085 if ($$self.$$.dirty[0] & /*mounted, value*/ 266240) { 1086 mounted && !value && clear(); 1087 } 1088 }; 1089 1090 return [ 1091 mode, 1092 width, 1093 height, 1094 canvas_width, 1095 canvas_height, 1096 canvas, 1097 canvas_container, 1098 line_count, 1099 canvas_types, 1100 handle_draw_start, 1101 handle_draw_move, 1102 handle_draw_end, 1103 value, 1104 brush_color, 1105 brush_radius, 1106 undo, 1107 clear, 1108 get_image_data, 1109 mounted, 1110 canvas_1_binding, 1111 div_binding, 1112 div_elementresize_handler 1113 ]; 1114} 1115 1116class Sketch extends SvelteComponent { 1117 constructor(options) { 1118 super(); 1119 1120 init( 1121 this, 1122 options, 1123 instance$4, 1124 create_fragment$4, 1125 safe_not_equal, 1126 { 1127 value: 12, 1128 mode: 0, 1129 brush_color: 13, 1130 brush_radius: 14, 1131 width: 1, 1132 height: 2, 1133 undo: 15, 1134 clear: 16, 1135 get_image_data: 17 1136 }, 1137 null, 1138 [-1, -1] 1139 ); 1140 } 1141 1142 get undo() { 1143 return this.$$.ctx[15]; 1144 } 1145 1146 get clear() { 1147 return this.$$.ctx[16]; 1148 } 1149 1150 get get_image_data() { 1151 return this.$$.ctx[17]; 1152 } 1153} 1154 1155/* home/runner/work/gradio/gradio/ui/packages/image/src/ModifySketch.svelte generated by Svelte v3.49.0 */ 1156 1157function create_fragment$3(ctx) { 1158 let div; 1159 let iconbutton0; 1160 let t; 1161 let iconbutton1; 1162 let current; 1163 iconbutton0 = new IconButton({ props: { Icon: Undo } }); 1164 iconbutton0.$on("click", /*click_handler*/ ctx[1]); 1165 iconbutton1 = new IconButton({ props: { Icon: Clear } }); 1166 iconbutton1.$on("click", /*click_handler_1*/ ctx[2]); 1167 1168 return { 1169 c() { 1170 div = element("div"); 1171 create_component(iconbutton0.$$.fragment); 1172 t = space(); 1173 create_component(iconbutton1.$$.fragment); 1174 attr(div, "class", "z-50 top-2 right-2 justify-end flex gap-1 absolute"); 1175 }, 1176 m(target, anchor) { 1177 insert(target, div, anchor); 1178 mount_component(iconbutton0, div, null); 1179 append(div, t); 1180 mount_component(iconbutton1, div, null); 1181 current = true; 1182 }, 1183 p: noop, 1184 i(local) { 1185 if (current) return; 1186 transition_in(iconbutton0.$$.fragment, local); 1187 transition_in(iconbutton1.$$.fragment, local); 1188 current = true; 1189 }, 1190 o(local) { 1191 transition_out(iconbutton0.$$.fragment, local); 1192 transition_out(iconbutton1.$$.fragment, local); 1193 current = false; 1194 }, 1195 d(detaching) { 1196 if (detaching) detach(div); 1197 destroy_component(iconbutton0); 1198 destroy_component(iconbutton1); 1199 } 1200 }; 1201} 1202 1203function instance$3($$self) { 1204 const dispatch = createEventDispatcher(); 1205 const click_handler = () => dispatch("undo"); 1206 const click_handler_1 = () => dispatch("clear"); 1207 return [dispatch, click_handler, click_handler_1]; 1208} 1209 1210class ModifySketch extends SvelteComponent { 1211 constructor(options) { 1212 super(); 1213 init(this, options, instance$3, create_fragment$3, safe_not_equal, {}); 1214 } 1215} 1216 1217/* home/runner/work/gradio/gradio/ui/packages/image/src/Image.svelte generated by Svelte v3.49.0 */ 1218 1219function create_else_block$2(ctx) { 1220 let img; 1221 let img_src_value; 1222 1223 return { 1224 c() { 1225 img = element("img"); 1226 attr(img, "class", "w-full h-full object-contain"); 1227 if (!src_url_equal(img.src, img_src_value = /*value*/ ctx[0])) attr(img, "src", img_src_value); 1228 attr(img, "alt", ""); 1229 toggle_class(img, "scale-x-[-1]", /*source*/ ctx[4] === "webcam" && /*mirror_webcam*/ ctx[10]); 1230 }, 1231 m(target, anchor) { 1232 insert(target, img, anchor); 1233 }, 1234 p(ctx, dirty) { 1235 if (dirty & /*value*/ 1 && !src_url_equal(img.src, img_src_value = /*value*/ ctx[0])) { 1236 attr(img, "src", img_src_value); 1237 } 1238 1239 if (dirty & /*source, mirror_webcam*/ 1040) { 1240 toggle_class(img, "scale-x-[-1]", /*source*/ ctx[4] === "webcam" && /*mirror_webcam*/ ctx[10]); 1241 } 1242 }, 1243 i: noop, 1244 o: noop, 1245 d(detaching) { 1246 if (detaching) detach(img); 1247 } 1248 }; 1249} 1250 1251// (125:47) 1252function create_if_block_6(ctx) { 1253 let img; 1254 let img_src_value; 1255 let t; 1256 let if_block_anchor; 1257 let current; 1258 let mounted; 1259 let dispose; 1260 let if_block = /*img_width*/ ctx[14] > 0 && create_if_block_7(ctx); 1261 1262 return { 1263 c() { 1264 img = element("img"); 1265 t = space(); 1266 if (if_block) if_block.c(); 1267 if_block_anchor = empty(); 1268 attr(img, "class", "absolute w-full h-full object-contain"); 1269 if (!src_url_equal(img.src, img_src_value = /*value*/ ctx[0].image)) attr(img, "src", img_src_value); 1270 attr(img, "alt", ""); 1271 toggle_class(img, "scale-x-[-1]", /*source*/ ctx[4] === "webcam" && /*mirror_webcam*/ ctx[10]); 1272 }, 1273 m(target, anchor) { 1274 insert(target, img, anchor); 1275 insert(target, t, anchor); 1276 if (if_block) if_block.m(target, anchor); 1277 insert(target, if_block_anchor, anchor); 1278 current = true; 1279 1280 if (!mounted) { 1281 dispose = listen(img, "load", /*handle_image_load*/ ctx[18]); 1282 mounted = true; 1283 } 1284 }, 1285 p(ctx, dirty) { 1286 if (!current || dirty & /*value*/ 1 && !src_url_equal(img.src, img_src_value = /*value*/ ctx[0].image)) { 1287 attr(img, "src", img_src_value); 1288 } 1289
1290 if (dirty & /*source, mirror_webcam*/ 1040) { 1291 toggle_class(img, "scale-x-[-1]", /*source*/ ctx[4] === "webcam" && /*mirror_webcam*/ ctx[10]); 1292 } 1293 1294 if (/*img_width*/ ctx[14] > 0) { 1295 if (if_block) { 1296 if_block.p(ctx, dirty); 1297 1298 if (dirty & /*img_width*/ 16384) { 1299 transition_in(if_block, 1); 1300 } 1301 } else { 1302 if_block = create_if_block_7(ctx); 1303 if_block.c(); 1304 transition_in(if_block, 1); 1305 if_block.m(if_block_anchor.parentNode, if_block_anchor); 1306 } 1307 } else if (if_block) { 1308 group_outros(); 1309 1310 transition_out(if_block, 1, 1, () => { 1311 if_block = null; 1312 }); 1313 1314 check_outros(); 1315 } 1316 }, 1317 i(local) { 1318 if (current) return; 1319 transition_in(if_block); 1320 current = true; 1321 }, 1322 o(local) { 1323 transition_out(if_block); 1324 current = false; 1325 }, 1326 d(detaching) { 1327 if (detaching) detach(img); 1328 if (detaching) detach(t); 1329 if (if_block) if_block.d(detaching); 1330 if (detaching) detach(if_block_anchor); 1331 mounted = false; 1332 dispose(); 1333 } 1334 }; 1335} 1336 1337// (112:29) 1338function create_if_block_5(ctx) { 1339 let modifyupload; 1340 let t; 1341 let img; 1342 let img_src_value; 1343 let current; 1344 modifyupload = new ModifyUpload({ props: { editable: true } }); 1345 modifyupload.$on("edit", /*edit_handler*/ ctx[26]); 1346 modifyupload.$on("clear", /*handle_clear*/ ctx[16]); 1347 1348 return { 1349 c() { 1350 create_component(modifyupload.$$.fragment); 1351 t = space(); 1352 img = element("img"); 1353 attr(img, "class", "w-full h-full object-contain"); 1354 if (!src_url_equal(img.src, img_src_value = /*value*/ ctx[0])) attr(img, "src", img_src_value); 1355 attr(img, "alt", ""); 1356 toggle_class(img, "scale-x-[-1]", /*source*/ ctx[4] === "webcam" && /*mirror_webcam*/ ctx[10]); 1357 }, 1358 m(target, anchor) { 1359 mount_component(modifyupload, target, anchor); 1360 insert(target, t, anchor); 1361 insert(target, img, anchor); 1362 current = true; 1363 }, 1364 p(ctx, dirty) { 1365 if (!current || dirty & /*value*/ 1 && !src_url_equal(img.src, img_src_value = /*value*/ ctx[0])) { 1366 attr(img, "src", img_src_value); 1367 } 1368 1369 if (dirty & /*source, mirror_webcam*/ 1040) { 1370 toggle_class(img, "scale-x-[-1]", /*source*/ ctx[4] === "webcam" && /*mirror_webcam*/ ctx[10]); 1371 } 1372 }, 1373 i(local) { 1374 if (current) return; 1375 transition_in(modifyupload.$$.fragment, local); 1376 current = true; 1377 }, 1378 o(local) { 1379 transition_out(modifyupload.$$.fragment, local); 1380 current = false; 1381 }, 1382 d(detaching) { 1383 destroy_component(modifyupload, detaching); 1384 if (detaching) detach(t); 1385 if (detaching) detach(img); 1386 } 1387 }; 1388} 1389 1390// (109:29) 1391function create_if_block_4(ctx) { 1392 let cropper; 1393 let t; 1394 let modifyupload; 1395 let current; 1396 cropper = new Cropper_1({ props: { image: /*value*/ ctx[0] } }); 1397 cropper.$on("crop", /*handle_save*/ ctx[17]); 1398 modifyupload = new ModifyUpload({}); 1399 modifyupload.$on("clear", /*clear_handler_1*/ ctx[25]); 1400 1401 return { 1402 c() { 1403 create_component(cropper.$$.fragment); 1404 t = space(); 1405 create_component(modifyupload.$$.fragment); 1406 }, 1407 m(target, anchor) { 1408 mount_component(cropper, target, anchor); 1409 insert(target, t, anchor); 1410 mount_component(modifyupload, target, anchor); 1411 current = true; 1412 }, 1413 p(ctx, dirty) { 1414 const cropper_changes = {}; 1415 if (dirty & /*value*/ 1) cropper_changes.image = /*value*/ ctx[0]; 1416 cropper.$set(cropper_changes); 1417 }, 1418 i(local) { 1419 if (current) return; 1420 transition_in(cropper.$$.fragment, local); 1421 transition_in(modifyupload.$$.fragment, local); 1422 current = true; 1423 }, 1424 o(local) { 1425 transition_out(cropper.$$.fragment, local); 1426 transition_out(modifyupload.$$.fragment, local); 1427 current = false; 1428 }, 1429 d(detaching) { 1430 destroy_component(cropper, detaching); 1431 if (detaching) detach(t); 1432 destroy_component(modifyupload, detaching); 1433 } 1434 }; 1435} 1436 1437// (86:39) 1438function create_if_block_1(ctx) { 1439 let current_block_type_index; 1440 let if_block; 1441 let if_block_anchor; 1442 let current; 1443 const if_block_creators = [create_if_block_2, create_if_block_3]; 1444 const if_blocks = []; 1445 1446 function select_block_type_1(ctx, dirty) { 1447 if (/*source*/ ctx[4] === "upload") return 0; 1448 if (/*source*/ ctx[4] === "webcam") return 1; 1449 return -1; 1450 } 1451 1452 if (~(current_block_type_index = select_block_type_1(ctx))) { 1453 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 1454 } 1455 1456 return { 1457 c() { 1458 if (if_block) if_block.c(); 1459 if_block_anchor = empty(); 1460 }, 1461 m(target, anchor) { 1462 if (~current_block_type_index) { 1463 if_blocks[current_block_type_index].m(target, anchor); 1464 } 1465 1466 insert(target, if_block_anchor, anchor); 1467 current = true; 1468 }, 1469 p(ctx, dirty) { 1470 let previous_block_index = current_block_type_index; 1471 current_block_type_index = select_block_type_1(ctx); 1472 1473 if (current_block_type_index === previous_block_index) { 1474 if (~current_block_type_index) { 1475 if_blocks[current_block_type_index].p(ctx, dirty); 1476 } 1477 } else { 1478 if (if_block) { 1479 group_outros(); 1480 1481 transition_out(if_blocks[previous_block_index], 1, 1, () => { 1482 if_blocks[previous_block_index] = null; 1483 }); 1484 1485 check_outros(); 1486 } 1487 1488 if (~current_block_type_index) { 1489 if_block = if_blocks[current_block_type_index]; 1490 1491 if (!if_block) { 1492 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 1493 if_block.c(); 1494 } else { 1495 if_block.p(ctx, dirty); 1496 } 1497 1498 transition_in(if_block, 1); 1499 if_block.m(if_block_anchor.parentNode, if_block_anchor); 1500 } else { 1501 if_block = null; 1502 } 1503 } 1504 }, 1505 i(local) { 1506 if (current) return; 1507 transition_in(if_block); 1508 current = true; 1509 }, 1510 o(local) { 1511 transition_out(if_block); 1512 current = false;
1513 }, 1514 d(detaching) { 1515 if (~current_block_type_index) { 1516 if_blocks[current_block_type_index].d(detaching); 1517 } 1518 1519 if (detaching) detach(if_block_anchor); 1520 } 1521 }; 1522} 1523 1524// (80:1) {#if source === "canvas"} 1525function create_if_block$2(ctx) { 1526 let modifysketch; 1527 let t; 1528 let sketch_1; 1529 let current; 1530 modifysketch = new ModifySketch({}); 1531 modifysketch.$on("undo", /*undo_handler*/ ctx[21]); 1532 modifysketch.$on("clear", /*clear_handler*/ ctx[22]); 1533 let sketch_1_props = { value: /*value*/ ctx[0] }; 1534 sketch_1 = new Sketch({ props: sketch_1_props }); 1535 /*sketch_1_binding*/ ctx[23](sketch_1); 1536 sketch_1.$on("change", /*handle_save*/ ctx[17]); 1537 1538 return { 1539 c() { 1540 create_component(modifysketch.$$.fragment); 1541 t = space(); 1542 create_component(sketch_1.$$.fragment); 1543 }, 1544 m(target, anchor) { 1545 mount_component(modifysketch, target, anchor); 1546 insert(target, t, anchor); 1547 mount_component(sketch_1, target, anchor); 1548 current = true; 1549 }, 1550 p(ctx, dirty) { 1551 const sketch_1_changes = {}; 1552 if (dirty & /*value*/ 1) sketch_1_changes.value = /*value*/ ctx[0]; 1553 sketch_1.$set(sketch_1_changes); 1554 }, 1555 i(local) { 1556 if (current) return; 1557 transition_in(modifysketch.$$.fragment, local); 1558 transition_in(sketch_1.$$.fragment, local); 1559 current = true; 1560 }, 1561 o(local) { 1562 transition_out(modifysketch.$$.fragment, local); 1563 transition_out(sketch_1.$$.fragment, local); 1564 current = false; 1565 }, 1566 d(detaching) { 1567 destroy_component(modifysketch, detaching); 1568 if (detaching) detach(t); 1569 /*sketch_1_binding*/ ctx[23](null); 1570 destroy_component(sketch_1, detaching); 1571 } 1572 }; 1573} 1574 1575// (133:2) {#if img_width > 0} 1576function create_if_block_7(ctx) { 1577 let sketch_1; 1578 let t; 1579 let modifysketch; 1580 let current; 1581 1582 let sketch_1_props = { 1583 value: /*value*/ ctx[0], 1584 brush_radius: 25, 1585 brush_color: "rgba(255, 255, 255, 0.65)", 1586 mode: "mask", 1587 width: /*img_width*/ ctx[14], 1588 height: /*img_height*/ ctx[13] 1589 }; 1590 1591 sketch_1 = new Sketch({ props: sketch_1_props }); 1592 /*sketch_1_binding_1*/ ctx[27](sketch_1); 1593 sketch_1.$on("change", /*handle_mask_save*/ ctx[19]); 1594 modifysketch = new ModifySketch({});
1595 modifysketch.$on("undo", /*undo_handler_1*/ ctx[28]); 1596 modifysketch.$on("clear", /*handle_mask_clear*/ ctx[20]); 1597 1598 return { 1599 c() { 1600 create_component(sketch_1.$$.fragment); 1601 t = space(); 1602 create_component(modifysketch.$$.fragment); 1603 }, 1604 m(target, anchor) { 1605 mount_component(sketch_1, target, anchor); 1606 insert(target, t, anchor); 1607 mount_component(modifysketch, target, anchor); 1608 current = true; 1609 }, 1610 p(ctx, dirty) { 1611 const sketch_1_changes = {}; 1612 if (dirty & /*value*/ 1) sketch_1_changes.value = /*value*/ ctx[0]; 1613 if (dirty & /*img_width*/ 16384) sketch_1_changes.width = /*img_width*/ ctx[14]; 1614 if (dirty & /*img_height*/ 8192) sketch_1_changes.height = /*img_height*/ ctx[13]; 1615 sketch_1.$set(sketch_1_changes); 1616 }, 1617 i(local) { 1618 if (current) return; 1619 transition_in(sketch_1.$$.fragment, local); 1620 transition_in(modifysketch.$$.fragment, local); 1621 current = true; 1622 }, 1623 o(local) { 1624 transition_out(sketch_1.$$.fragment, local); 1625 transition_out(modifysketch.$$.fragment, local); 1626 current = false; 1627 }, 1628 d(detaching) { 1629 /*sketch_1_binding_1*/ ctx[27](null); 1630 destroy_component(sketch_1, detaching); 1631 if (detaching) detach(t); 1632 destroy_component(modifysketch, detaching); 1633 } 1634 }; 1635} 1636 1637// (100:32) 1638function create_if_block_3(ctx) { 1639 let webcam; 1640 let current; 1641 1642 webcam = new Webcam({ 1643 props: { 1644 streaming: /*streaming*/ ctx[8], 1645 pending: /*pending*/ ctx[9], 1646 mirror_webcam: /*mirror_webcam*/ ctx[10] 1647 } 1648 }); 1649 1650 webcam.$on("capture", /*handle_save*/ ctx[17]); 1651 webcam.$on("stream", /*handle_save*/ ctx[17]); 1652 1653 return { 1654 c() { 1655 create_component(webcam.$$.fragment); 1656 }, 1657 m(target, anchor) { 1658 mount_component(webcam, target, anchor); 1659 current = true; 1660 }, 1661 p(ctx, dirty) { 1662 const webcam_changes = {}; 1663 if (dirty & /*streaming*/ 256) webcam_changes.streaming = /*streaming*/ ctx[8]; 1664 if (dirty & /*pending*/ 512) webcam_changes.pending = /*pending*/ ctx[9]; 1665 if (dirty & /*mirror_webcam*/ 1024) webcam_changes.mirror_webcam = /*mirror_webcam*/ ctx[10]; 1666 webcam.$set(webcam_changes); 1667 }, 1668 i(local) { 1669 if (current) return; 1670 transition_in(webcam.$$.fragment, local); 1671 current = true; 1672 }, 1673 o(local) { 1674 transition_out(webcam.$$.fragment, local); 1675 current = false; 1676 }, 1677 d(detaching) { 1678 destroy_component(webcam, detaching); 1679 } 1680 }; 1681} 1682 1683// (87:2) {#if source === "upload"} 1684function create_if_block_2(ctx) { 1685 let upload; 1686 let updating_dragging; 1687 let current; 1688 1689 function upload_dragging_binding(value) { 1690 /*upload_dragging_binding*/ ctx[24](value); 1691 } 1692 1693 let upload_props = { 1694 filetype: "image/x-png,image/gif,image/jpeg", 1695 include_file_metadata: false, 1696 $$slots: { default: [create_default_slot$1] }, 1697 $$scope: { ctx } 1698 }; 1699 1700 if (/*dragging*/ ctx[11] !== void 0) { 1701 upload_props.dragging = /*dragging*/ ctx[11]; 1702 } 1703 1704 upload = new Upload({ props: upload_props }); 1705 binding_callbacks.push(() => bind(upload, 'dragging', upload_dragging_binding)); 1706 upload.$on("load", /*handle_upload*/ ctx[15]); 1707 1708 return { 1709 c() { 1710 create_component(upload.$$.fragment); 1711 }, 1712 m(target, anchor) { 1713 mount_component(upload, target, anchor); 1714 current = true; 1715 }, 1716 p(ctx, dirty) { 1717 const upload_changes = {}; 1718 1719 if (dirty & /*$$scope, upload_text, or_text, drop_text*/ 1073742048) { 1720 upload_changes.$$scope = { dirty, ctx }; 1721 } 1722 1723 if (!updating_dragging && dirty & /*dragging*/ 2048) { 1724 updating_dragging = true; 1725 upload_changes.dragging = /*dragging*/ ctx[11]; 1726 add_flush_callback(() => updating_dragging = false); 1727 } 1728 1729 upload.$set(upload_changes); 1730 }, 1731 i(local) { 1732 if (current) return; 1733 transition_in(upload.$$.fragment, local); 1734 current = true; 1735 }, 1736 o(local) { 1737 transition_out(upload.$$.fragment, local); 1738 current = false; 1739 }, 1740 d(detaching) { 1741 destroy_component(upload, detaching); 1742 } 1743 }; 1744} 1745 1746// (88:3) <Upload bind:dragging filetype="image/x-png,image/gif,image/jpeg" on:load={handle_upload} include_file_metadata={false} > 1747function create_default_slot$1(ctx) { 1748 let div; 1749 let t0; 1750 let t1; 1751 let span; 1752 let t2; 1753 let t3; 1754 let t4; 1755 let t5; 1756 let t6; 1757 1758 return { 1759 c() { 1760 div = element("div"); 1761 t0 = text(/*drop_text*/ ctx[5]); 1762 t1 = space(); 1763 span = element("span"); 1764 t2 = text("- "); 1765 t3 = text(/*or_text*/ ctx[6]); 1766 t4 = text(" -"); 1767 t5 = space(); 1768 t6 = text(/*upload_text*/ ctx[7]); 1769 attr(span, "class", "text-gray-300"); 1770 attr(div, "class", "flex flex-col"); 1771 }, 1772 m(target, anchor) { 1773 insert(target, div, anchor); 1774 append(div, t0); 1775 append(div, t1); 1776 append(div, span); 1777 append(span, t2); 1778 append(span, t3); 1779 append(span, t4); 1780 append(div, t5); 1781 append(div, t6); 1782 }, 1783 p(ctx, dirty) {
1784 if (dirty & /*drop_text*/ 32) set_data(t0, /*drop_text*/ ctx[5]); 1785 if (dirty & /*or_text*/ 64) set_data(t3, /*or_text*/ ctx[6]); 1786 if (dirty & /*upload_text*/ 128) set_data(t6, /*upload_text*/ ctx[7]); 1787 }, 1788 d(detaching) { 1789 if (detaching) detach(div); 1790 } 1791 }; 1792} 1793 1794function create_fragment$2(ctx) { 1795 let blocklabel; 1796 let t; 1797 let div; 1798 let current_block_type_index; 1799 let if_block; 1800 let current; 1801 1802 blocklabel = new BlockLabel({ 1803 props: { 1804 show_label: /*show_label*/ ctx[3], 1805 Icon: /*source*/ ctx[4] === "canvas" ? Sketch$1 : Image, 1806 label: /*label*/ ctx[2] || (/*source*/ ctx[4] === "canvas" ? "Sketch" : "Image") 1807 } 1808 }); 1809 1810 const if_block_creators = [ 1811 create_if_block$2, 1812 create_if_block_1, 1813 create_if_block_4, 1814 create_if_block_5, 1815 create_if_block_6, 1816 create_else_block$2 1817 ]; 1818 1819 const if_blocks = []; 1820 1821 function select_block_type(ctx, dirty) { 1822 if (/*source*/ ctx[4] === "canvas") return 0; 1823 if (/*value*/ ctx[0] === null || /*streaming*/ ctx[8]) return 1; 1824 if (/*tool*/ ctx[1] === "select") return 2; 1825 if (/*tool*/ ctx[1] === "editor") return 3; 1826 if (/*tool*/ ctx[1] === "sketch" && /*value*/ ctx[0] !== null) return 4; 1827 return 5; 1828 } 1829 1830 current_block_type_index = select_block_type(ctx); 1831 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 1832 1833 return { 1834 c() { 1835 create_component(blocklabel.$$.fragment); 1836 t = space(); 1837 div = element("div"); 1838 if_block.c(); 1839 attr(div, "data-testid", "image"); 1840 toggle_class(div, "bg-gray-200", /*value*/ ctx[0]); 1841 toggle_class(div, "h-60", /*source*/ ctx[4] !== "webcam" || /*tool*/ ctx[1] === "sketch"); 1842 }, 1843 m(target, anchor) { 1844 mount_component(blocklabel, target, anchor); 1845 insert(target, t, anchor); 1846 insert(target, div, anchor); 1847 if_blocks[current_block_type_index].m(div, null); 1848 current = true; 1849 }, 1850 p(ctx, [dirty]) { 1851 const blocklabel_changes = {}; 1852 if (dirty & /*show_label*/ 8) blocklabel_changes.show_label = /*show_label*/ ctx[3]; 1853 if (dirty & /*source*/ 16) blocklabel_changes.Icon = /*source*/ ctx[4] === "canvas" ? Sketch$1 : Image; 1854 if (dirty & /*label, source*/ 20) blocklabel_changes.label = /*label*/ ctx[2] || (/*source*/ ctx[4] === "canvas" ? "Sketch" : "Image"); 1855 blocklabel.$set(blocklabel_changes); 1856 let previous_block_index = current_block_type_index; 1857 current_block_type_index = select_block_type(ctx); 1858 1859 if (current_block_type_index === previous_block_index) { 1860 if_blocks[current_block_type_index].p(ctx, dirty); 1861 } else { 1862 group_outros(); 1863 1864 transition_out(if_blocks[previous_block_index], 1, 1, () => { 1865 if_blocks[previous_block_index] = null; 1866 }); 1867 1868 check_outros(); 1869 if_block = if_blocks[current_block_type_index]; 1870 1871 if (!if_block) { 1872 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 1873 if_block.c(); 1874 } else { 1875 if_block.p(ctx, dirty); 1876 } 1877 1878 transition_in(if_block, 1); 1879 if_block.m(div, null); 1880 } 1881 1882 if (dirty & /*value*/ 1) { 1883 toggle_class(div, "bg-gray-200", /*value*/ ctx[0]); 1884 } 1885 1886 if (dirty & /*source, tool*/ 18) { 1887 toggle_class(div, "h-60", /*source*/ ctx[4] !== "webcam" || /*tool*/ ctx[1] === "sketch"); 1888 } 1889 }, 1890 i(local) { 1891 if (current) return; 1892 transition_in(blocklabel.$$.fragment, local); 1893 transition_in(if_block); 1894 current = true; 1895 }, 1896 o(local) { 1897 transition_out(blocklabel.$$.fragment, local); 1898 transition_out(if_block); 1899 current = false; 1900 }, 1901 d(detaching) { 1902 destroy_component(blocklabel, detaching); 1903 if (detaching) detach(t); 1904 if (detaching) detach(div); 1905 if_blocks[current_block_type_index].d(); 1906 } 1907 }; 1908} 1909 1910function instance$2($$self, $$props, $$invalidate) { 1911 let { value } = $$props; 1912 let { label = undefined } = $$props; 1913 let { show_label } = $$props; 1914 let { source = "upload" } = $$props; 1915 let { tool = "editor" } = $$props; 1916 let { drop_text = "Drop an image file" } = $$props; 1917 let { or_text = "or" } = $$props; 1918 let { upload_text = "click to upload" } = $$props; 1919 let { streaming = false } = $$props; 1920 let { pending = false } = $$props; 1921 let { mirror_webcam } = $$props; 1922 let sketch; 1923 1924 if (value && (source === "upload" || source === "webcam") && tool === "sketch") { 1925 value = { image: value, mask: null }; 1926 } 1927 1928 function handle_upload({ detail }) {
1929 $$invalidate(0, value = (source === "upload" || source === "webcam") && tool === "sketch" 1930 ? { image: detail, mask: null } 1931 : detail); 1932 } 1933 1934 function handle_clear({ detail }) { 1935 $$invalidate(0, value = null); 1936 dispatch("clear"); 1937 } 1938 1939 async function handle_save({ detail }) { 1940 $$invalidate(0, value = (source === "upload" || source === "webcam") && tool === "sketch" 1941 ? { image: detail, mask: null } 1942 : detail); 1943 1944 await tick(); 1945 dispatch(streaming ? "stream" : "edit"); 1946 } 1947 1948 const dispatch = createEventDispatcher(); 1949 let dragging = false; 1950 1951 function handle_image_load(event) { 1952 const element = event.composedPath()[0]; 1953 $$invalidate(14, img_width = element.naturalWidth); 1954 $$invalidate(13, img_height = element.naturalHeight); 1955 } 1956 1957 function handle_mask_save({ detail }) { 1958 $$invalidate(0, value = { 1959 image: typeof value === "string" ? value : value?.image || null, 1960 mask: detail 1961 }); 1962 } 1963 1964 async function handle_mask_clear() { 1965 sketch.clear(); 1966 await tick(); 1967 $$invalidate(0, value = null); 1968 } 1969 1970 let img_height = 0; 1971 let img_width = 0; 1972 const undo_handler = () => sketch.undo(); 1973 const clear_handler = () => sketch.clear(); 1974 1975 function sketch_1_binding($$value) { 1976 binding_callbacks[$$value ? 'unshift' : 'push'](() => { 1977 sketch = $$value; 1978 $$invalidate(12, sketch); 1979 }); 1980 } 1981 1982 function upload_dragging_binding(value) { 1983 dragging = value; 1984 $$invalidate(11, dragging); 1985 } 1986 1987 const clear_handler_1 = e => (handle_clear(e), $$invalidate(1, tool = "editor")); 1988 const edit_handler = () =>
1988 $$invalidate(1, tool = "select"); 1989 1990 function sketch_1_binding_1($$value) { 1991 binding_callbacks[$$value ? 'unshift' : 'push'](() => { 1992 sketch = $$value; 1993 $$invalidate(12, sketch); 1994 }); 1995 } 1996 1997 const undo_handler_1 = () => sketch.undo(); 1998 1999 $$self.$$set = $$props => { 2000 if ('value' in $$props) $$invalidate(0, value = $$props.value); 2001 if ('label' in $$props) $$invalidate(2, label = $$props.label); 2002 if ('show_label' in $$props) $$invalidate(3, show_label = $$props.show_label); 2003 if ('source' in $$props) $$invalidate(4, source = $$props.source); 2004 if ('tool' in $$props) $$invalidate(1, tool = $$props.tool); 2005 if ('drop_text' in $$props) $$invalidate(5, drop_text = $$props.drop_text); 2006 if ('or_text' in $$props) $$invalidate(6, or_text = $$props.or_text); 2007 if ('upload_text' in $$props) $$invalidate(7, upload_text = $$props.upload_text); 2008 if ('streaming' in $$props) $$invalidate(8, streaming = $$props.streaming); 2009 if ('pending' in $$props) $$invalidate(9, pending = $$props.pending); 2010 if ('mirror_webcam' in $$props) $$invali
2010date(10, mirror_webcam = $$props.mirror_webcam); 2011 }; 2012 2013 $$self.$$.update = () => { 2014 if ($$self.$$.dirty & /*value*/ 1) { 2015 dispatch("change", value); 2016 } 2017 2018 if ($$self.$$.dirty & /*dragging*/ 2048) { 2019 dispatch("drag", dragging); 2020 } 2021 }; 2022 2023 return [ 2024 value, 2025 tool, 2026 label, 2027 show_label, 2028 source, 2029 drop_text, 2030 or_text, 2031 upload_text, 2032 streaming, 2033 pending, 2034 mirror_webcam, 2035 dragging, 2036 sketch, 2037 img_height, 2038 img_width, 2039 handle_upload, 2040 handle_clear, 2041 handle_save, 2042 handle_image_load, 2043 handle_mask_save, 2044 handle_mask_clear, 2045 undo_handler, 2046 clear_handler, 2047 sketch_1_binding, 2048 upload_dragging_binding, 2049 clear_handler_1, 2050 edit_handler, 2051 sketch_1_binding_1, 2052 undo_handler_1 2053 ]; 2054} 2055 2056class Image_1$2 extends SvelteComponent { 2057 constructor(options) { 2058 super(); 2059 2060 init(this, options, instance$2, create_fragment$2, safe_not_equal, { 2061 value: 0, 2062 label: 2, 2063 show_label: 3, 2064 source: 4, 2065 tool: 1, 2066 drop_text: 5, 2067 or_text: 6, 2068 upload_text: 7, 2069 streaming: 8, 2070 pending: 9, 2071 mirror_webcam: 10 2072 }); 2073 } 2074} 2075 2076/* home/runner/work/gradio/gradio/ui/packages/image/src/StaticImage.svelte generated by Svelte v3.49.0 */ 2077 2078function create_else_block$1(ctx) { 2079 let img; 2080 let img_src_value; 2081 2082 return { 2083 c() { 2084 img = element("img"); 2085 attr(img, "class", "w-full h-full object-contain"); 2086 if (!src_url_equal(img.src, img_src_value = /*value*/ ctx[0])) attr(img, "src", img_src_value); 2087 attr(img, "alt", ""); 2088 }, 2089 m(target, anchor) { 2090 insert(target, img, anchor); 2091 }, 2092 p(ctx, dirty) { 2093 if (dirty & /*value*/ 1 && !src_url_equal(img.src, img_src_value = /*value*/ ctx[0])) { 2094 attr(img, "src", img_src_value); 2095 } 2096 }, 2097 i: noop, 2098 o: noop, 2099 d(detaching) { 2100 if (detaching) detach(img); 2101 } 2102 }; 2103} 2104 2105// (12:0) {#if value === null} 2106function create_if_block$1(ctx) { 2107 let div1; 2108 let div0; 2109 let image; 2110 let current; 2111 image = new Image({}); 2112 2113 return { 2114 c() { 2115 div1 = element("div"); 2116 div0 = element("div"); 2117 create_component(image.$$.fragment); 2118 attr(div0, "class", "h-5 dark:text-white opacity-50"); 2119 attr(div1, "class", "h-full min-h-[15rem] flex justify-center items-center"); 2120 }, 2121 m(target, anchor) { 2122 insert(target, div1, anchor); 2123 append(div1, div0); 2124 mount_component(image, div0, null); 2125 current = true; 2126 }, 2127 p: noop, 2128 i(local) { 2129 if (current) return; 2130 transition_in(image.$$.fragment, local); 2131 current = true; 2132 }, 2133 o(local) { 2134 transition_out(image.$$.fragment, local); 2135 current = false; 2136 }, 2137 d(detaching) { 2138 if (detaching) detach(div1); 2139 destroy_component(image); 2140 } 2141 }; 2142} 2143 2144function create_fragment$1(ctx) { 2145 let blocklabel; 2146 let t; 2147 let current_block_type_index; 2148 let if_block; 2149 let if_block_anchor; 2150 let current; 2151 2152 blocklabel = new BlockLabel({ 2153 props: { 2154 show_label: /*show_label*/ ctx[2], 2155 Icon: Image, 2156 label: /*label*/ ctx[1] || "Image" 2157 } 2158 }); 2159 2160 const if_block_creators = [create_if_block$1, create_else_block$1]; 2161 const if_blocks = []; 2162 2163 function select_block_type(ctx, dirty) { 2164 if (/*value*/ ctx[0] === null) return 0; 2165 return 1; 2166 } 2167 2168 current_block_type_index = select_block_type(ctx); 2169 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2170 2171 return { 2172 c() { 2173 create_component(blocklabel.$$.fragment); 2174 t = space(); 2175 if_block.c(); 2176 if_block_anchor = empty(); 2177 }, 2178 m(target, anchor) { 2179 mount_component(blocklabel, target, anchor); 2180 insert(target, t, anchor); 2181 if_blocks[current_block_type_index].m(target, anchor); 2182 insert(target, if_block_anchor, anchor); 2183 current = true; 2184 }, 2185 p(ctx, [dirty]) { 2186 const blocklabel_changes = {}; 2187 if (dirty & /*show_label*/ 4) blocklabel_changes.show_label = /*show_label*/ ctx[2]; 2188 if (dirty & /*label*/ 2) blocklabel_changes.label = /*label*/ ctx[1] || "Image"; 2189 blocklabel.$set(blocklabel_changes); 2190 let previous_block_index = current_block_type_index; 2191 current_block_type_index = select_block_type(ctx); 2192 2193 if (current_block_type_index === previous_block_index) { 2194 if_blocks[current_block_type_index].p(ctx, dirty); 2195 } else { 2196 group_outros(); 2197 2198 transition_out(if_blocks[previous_block_index], 1, 1, () => { 2199 if_blocks[previous_block_index] = null; 2200 }); 2201 2202 check_outros(); 2203 if_block = if_blocks[current_block_type_index]; 2204 2205 if (!if_block) { 2206 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2207 if_block.c(); 2208 } else { 2209 if_block.p(ctx, dirty); 2210 } 2211 2212 transition_in(if_block, 1); 2213 if_block.m(if_block_anchor.parentNode, if_block_anchor); 2214 } 2215 }, 2216 i(local) { 2217 if (current) return; 2218 transition_in(blocklabel.$$.fragment, local); 2219 transition_in(if_block); 2220 current = true; 2221 }, 2222 o(local) { 2223 transition_out(blocklabel.$$.fragment, local); 2224 transition_out(if_block); 2225 current = false;
2226 }, 2227 d(detaching) { 2228 destroy_component(blocklabel, detaching); 2229 if (detaching) detach(t); 2230 if_blocks[current_block_type_index].d(detaching); 2231 if (detaching) detach(if_block_anchor); 2232 } 2233 }; 2234} 2235 2236function instance$1($$self, $$props, $$invalidate) { 2237 let { value } = $$props; 2238 let { label = undefined } = $$props; 2239 let { show_label } = $$props; 2240 const dispatch = createEventDispatcher(); 2241 2242 $$self.$$set = $$props => { 2243 if ('value' in $$props) $$invalidate(0, value = $$props.value); 2244 if ('label' in $$props) $$invalidate(1, label = $$props.label); 2245 if ('show_label' in $$props) $$invalidate(2, show_label = $$props.show_label); 2246 }; 2247 2248 $$self.$$.update = () => { 2249 if ($$self.$$.dirty & /*value*/ 1) { 2250 value && dispatch("change", value); 2251 } 2252 }; 2253 2254 return [value, label, show_label]; 2255} 2256 2257class StaticImage extends SvelteComponent { 2258 constructor(options) { 2259 super(); 2260 init(this, options, instance$1, create_fragment$1, safe_not_equal, { value: 0, label: 1, show_label: 2 }); 2261 } 2262} 2263 2264/* src/components/Image/Image.svelte generated by Svelte v3.49.0 */ 2265 2266function create_else_block(ctx) { 2267 let image; 2268 let updating_value; 2269 let current; 2270 2271 function image_value_binding(value) { 2272 /*image_value_binding*/ ctx[15](value); 2273 } 2274 2275 let image_props = { 2276 source: /*source*/ ctx[3], 2277 tool: /*tool*/ ctx[4], 2278 label: /*label*/ ctx[5], 2279 show_label: /*show_label*/ ctx[6], 2280 pending: /*pending*/ ctx[8], 2281 streaming: /*streaming*/ ctx[7], 2282 drop_text: /*$_*/ ctx[14]("interface.drop_image"), 2283 or_text: /*$_*/ ctx[14]("or"), 2284 upload_text: /*$_*/ ctx[14]("interface.click_to_upload"), 2285 mirror_webcam: /*mirror_webcam*/ ctx[10] 2286 }; 2287 2288 if (/*value*/ ctx[0] !== void 0) { 2289 image_props.value = /*value*/ ctx[0]; 2290 } 2291 2292 image = new Image_1$2({ props: image_props }); 2293 binding_callbacks.push(() => bind(image, 'value', image_value_binding)); 2294 image.$on("edit", /*edit_handler*/ ctx[16]); 2295 image.$on("clear", /*clear_handler*/ ctx[17]); 2296 image.$on("change", /*change_handler*/ ctx[18]); 2297 image.$on("stream", /*stream_handler*/ ctx[19]); 2298 image.$on("drag", /*drag_handler*/ ctx[20]); 2299 2300 return { 2301 c() { 2302 create_component(image.$$.fragment); 2303 }, 2304 m(target, anchor) { 2305 mount_component(image, target, anchor); 2306 current = true; 2307 }, 2308 p(ctx, dirty) { 2309 const image_changes = {}; 2310 if (dirty & /*source*/ 8) image_changes.source = /*source*/ ctx[3]; 2311 if (dirty & /*tool*/ 16) image_changes.tool = /*tool*/ ctx[4]; 2312 if (dirty & /*label*/ 32) image_changes.label = /*label*/ ctx[5]; 2313 if (dirty & /*show_label*/ 64) image_changes.show_label = /*show_label*/ ctx[6]; 2314 if (dirty & /*pending*/ 256) image_changes.pending = /*pending*/ ctx[8]; 2315 if (dirty & /*streaming*/ 128) image_changes.streaming = /*streaming*/ ctx[7]; 2316 if (dirty & /*$_*/ 16384) image_changes.drop_text = /*$_*/ ctx[14]("interface.drop_image"); 2317 if (dirty & /*$_*/ 16384) image_changes.or_text = /*$_*/ ctx[14]("or"); 2318 if (dirty & /*$_*/ 16384) image_changes.upload_text = /*$_*/ ctx[14]("interface.click_to_upload"); 2319 if (dirty & /*mirror_webcam*/ 1024) image_changes.mirror_webcam = /*mirror_webcam*/ ctx[10]; 2320 2321 if (!updating_value && dirty & /*value*/ 1) { 2322 updating_value = true; 2323 image_changes.value = /*value*/ ctx[0]; 2324 add_flush_callback(() => updating_value = false); 2325 } 2326 2327 image.$set(image_changes); 2328 }, 2329 i(local) { 2330 if (current) return; 2331 transition_in(image.$$.fragment, local); 2332 current = true; 2333 }, 2334 o(local) { 2335 transition_out(image.$$.fragment, local); 2336 current = false; 2337 }, 2338 d(detaching) { 2339 destroy_component(image, detaching); 2340 } 2341 }; 2342} 2343 2344// (36:1) {#if mode === "static"} 2345function create_if_block(ctx) { 2346 let staticimage; 2347 let current; 2348 2349 staticimage = new StaticImage({ 2350 props: { 2351 value: /*value*/ ctx[0], 2352 label: /*label*/ ctx[5], 2353 show_label: /*show_label*/ ctx[6] 2354 } 2355 }); 2356 2357 return { 2358 c() { 2359 create_component(staticimage.$$.fragment); 2360 }, 2361 m(target, anchor) { 2362 mount_component(staticimage, target, anchor); 2363 current = true; 2364 }, 2365 p(ctx, dirty) { 2366 const staticimage_changes = {}; 2367 if (dirty & /*value*/ 1) staticimage_changes.value = /*value*/ ctx[0];
2368 if (dirty & /*label*/ 32) staticimage_changes.label = /*label*/ ctx[5]; 2369 if (dirty & /*show_label*/ 64) staticimage_changes.show_label = /*show_label*/ ctx[6]; 2370 staticimage.$set(staticimage_changes); 2371 }, 2372 i(local) { 2373 if (current) return; 2374 transition_in(staticimage.$$.fragment, local); 2375 current = true; 2376 }, 2377 o(local) { 2378 transition_out(staticimage.$$.fragment, local); 2379 current = false; 2380 }, 2381 d(detaching) { 2382 destroy_component(staticimage, detaching); 2383 } 2384 }; 2385} 2386 2387// (25:0) <Block {visible} variant={mode === "dynamic" && value === null && source === "upload" ? "dashed" : "solid"} color={dragging ? "green" : "grey"} padding={false} {elem_id} style={{ rounded: style.rounded, height: style.height, width: style.width }} > 2388function create_default_slot(ctx) { 2389 let statustracker; 2390 let t; 2391 let current_block_type_index; 2392 let if_block; 2393 let if_block_anchor; 2394 let current; 2395 const statustracker_spread_levels = [/*loading_status*/ ctx[11]]; 2396 let statustracker_props = {}; 2397 2398 for (let i = 0; i < statustracker_spread_levels.length; i += 1) { 2399 statustracker_props = assign(statustracker_props, statustracker_spread_levels[i]); 2400 } 2401 2402 statustracker = new StatusTracker({ props: statustracker_props }); 2403 const if_block_creators = [create_if_block, create_else_block]; 2404 const if_blocks = []; 2405 2406 function select_block_type(ctx, dirty) { 2407 if (/*mode*/ ctx[12] === "static") return 0; 2408 return 1; 2409 } 2410 2411 current_block_type_index = select_block_type(ctx); 2412 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2413 2414 return { 2415 c() { 2416 create_component(statustracker.$$.fragment); 2417 t = space(); 2418 if_block.c(); 2419 if_block_anchor = empty(); 2420 }, 2421 m(target, anchor) { 2422 mount_component(statustracker, target, anchor); 2423 insert(target, t, anchor); 2424 if_blocks[current_block_type_index].m(target, anchor); 2425 insert(target, if_block_anchor, anchor); 2426 current = true; 2427 }, 2428 p(ctx, dirty) { 2429 const statustracker_changes = (dirty & /*loading_status*/ 2048) 2430 ? get_spread_update(statustracker_spread_levels, [get_spread_object(/*loading_status*/ ctx[11])]) 2431 : {}; 2432 2433 statustracker.$set(statustracker_changes); 2434 let previous_block_index = current_block_type_index; 2435 current_block_type_index = select_block_type(ctx); 2436 2437 if (current_block_type_index === previous_block_index) { 2438 if_blocks[current_block_type_index].p(ctx, dirty); 2439 } else { 2440 group_outros(); 2441 2442 transition_out(if_blocks[previous_block_index], 1, 1, () => { 2443 if_blocks[previous_block_index] = null; 2444 }); 2445 2446 check_outros(); 2447 if_block = if_blocks[current_block_type_index]; 2448 2449 if (!if_block) { 2450 if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx); 2451 if_block.c(); 2452 } else { 2453 if_block.p(ctx, dirty); 2454 } 2455 2456 transition_in(if_block, 1); 2457 if_block.m(if_block_anchor.parentNode, if_block_anchor); 2458 } 2459 }, 2460 i(local) { 2461 if (current) return; 2462 transition_in(statustracker.$$.fragment, local); 2463 transition_in(if_block); 2464 current = true; 2465 }, 2466 o(local) { 2467 transition_out(statustracker.$$.fragment, local); 2468 transition_out(if_block); 2469 current = false; 2470 }, 2471 d(detaching) { 2472 destroy_component(statustracker, detaching); 2473 if (detaching) detach(t); 2474 if_blocks[current_block_type_index].d(detaching); 2475 if (detaching) detach(if_block_anchor); 2476 } 2477 }; 2478} 2479 2480function create_fragment(ctx) { 2481 let block; 2482 let current; 2483 2484 block = new Block({ 2485 props: { 2486 visible: /*visible*/ ctx[2], 2487 variant: /*mode*/ ctx[12] === "dynamic" && /*value*/ ctx[0] === null && /*source*/ ctx[3] === "upload" 2488 ? "dashed" 2489 : "solid", 2490 color: /*dragging*/ ctx[13] ? "green" : "grey", 2491 padding: false, 2492 elem_id: /*elem_id*/ ctx[1], 2493 style: { 2494 rounded: /*style*/ ctx[9].rounded, 2495 height: /*style*/ ctx[9].height, 2496 width: /*style*/ ctx[9].width 2497 }, 2498 $$slots: { default: [create_default_slot] }, 2499 $$scope: { ctx } 2500 } 2501 }); 2502 2503 return { 2504 c() { 2505 create_component(block.$$.fragment); 2506 }, 2507 m(target, anchor) { 2508 mount_component(block, target, anchor); 2509 current = true; 2510 }, 2511 p(ctx, [dirty]) { 2512 const block_changes = {};
2513 if (dirty & /*visible*/ 4) block_changes.visible = /*visible*/ ctx[2]; 2514 2515 if (dirty & /*mode, value, source*/ 4105) block_changes.variant = /*mode*/ ctx[12] === "dynamic" && /*value*/ ctx[0] === null && /*source*/ ctx[3] === "upload" 2516 ? "dashed" 2517 : "solid"; 2518 2519 if (dirty & /*dragging*/ 8192) block_changes.color = /*dragging*/ ctx[13] ? "green" : "grey"; 2520 if (dirty & /*elem_id*/ 2) block_changes.elem_id = /*elem_id*/ ctx[1]; 2521 2522 if (dirty & /*style*/ 512) block_changes.style = { 2523 rounded: /*style*/ ctx[9].rounded, 2524 height: /*style*/ ctx[9].height, 2525 width: /*style*/ ctx[9].width 2526 }; 2527 2528 if (dirty & /*$$scope, value, label, show_label, mode, source, tool, pending, streaming, $_, mirror_webcam, dragging, loading_status*/ 4226553) { 2529 block_changes.$$scope = { dirty, ctx }; 2530 } 2531 2532 block.$set(block_changes); 2533 }, 2534 i(local) { 2535 if (current) return; 2536 transition_in(block.$$.fragment, local); 2537 current = true; 2538 }, 2539 o(local) { 2540 transition_out(block.$$.fragment, local); 2541 current = false; 2542 }, 2543 d(detaching) { 2544 destroy_component(block, detaching); 2545 } 2546 }; 2547} 2548 2549function instance($$self, $$props, $$invalidate) { 2550 let $_; 2551 component_subscribe($$self, X, $$value => $$invalidate(14, $_ = $$value)); 2552 let { elem_id = "" } = $$props; 2553 let { visible = true } = $$props; 2554 let { value = null } = $$props; 2555 let { source = "upload" } = $$props; 2556 let { tool = "editor" } = $$props; 2557 let { label } = $$props; 2558 let { show_label } = $$props; 2559 let { streaming } = $$props; 2560 let { pending } = $$props; 2561 let { style = {} } = $$props; 2562 let { mirror_webcam } = $$props; 2563 let { loading_status } = $$props; 2564 let { mode } = $$props; 2565 const dispatch = createEventDispatcher(); 2566 let dragging; 2567 2568 function image_value_binding(value$1) { 2569 value = value$1; 2570 $$invalidate(0, value); 2571 } 2572 2573 function edit_handler(event) { 2574 bubble.call(this, $$self, event); 2575 } 2576 2577 function clear_handler(event) { 2578 bubble.call(this, $$self, event); 2579 } 2580 2581 function change_handler(event) { 2582 bubble.call(this, $$self, event); 2583 } 2584 2585 function stream_handler(event) { 2586 bubble.call(this, $$self, event); 2587 } 2588 2589 const drag_handler = ({ detail }) =>
2589 $$invalidate(13, dragging = detail); 2590 2591 $$self.$$set = $$props => { 2592 if ('elem_id' in $$props) $$invalidate(1, elem_id = $$props.elem_id); 2593 if ('visible' in $$props) $$invalidate(2, visible = $$props.visible); 2594 if ('value' in $$props) $$invalidate(0, value = $$props.value); 2595 if ('source' in $$props) $$invalidate(3, source = $$props.source); 2596 if ('tool' in $$props) $$invalidate(4, tool = $$props.tool); 2597 if ('label' in $$props) $$invalidate(5, label = $$props.label); 2598 if ('show_label' in $$props) $$invalidate(6, show_label = $$props.show_label); 2599 if ('streaming' in $$props) $$invalidate(7, streaming = $$props.streaming); 2600 if ('pending' in $$props) $$invalidate(8, pending = $$props.pending); 2601 if ('style' in $$props) $$invalidate(9, style = $$props.style); 2602 if ('mirror_webcam' in $$props) $$invalidate(10, mirror_webcam = $$props.mirror_webcam); 2603 if ('loading_status' in $$props) $$invalidate(11, loading_status = $$props.loading_status); 2604 if ('mode' in $$props) $$invalidate(12, mode = $$props.mode); 2605 }; 2606 2607 $$self.$$.update = () => { 2608 if ($$self.$$.dirty & /*value*/ 1) { 2609 $$invalidate(0, value = !value ? null : value); 2610 } 2611 2612 if ($$self.$$.dirty & /*value*/ 1) { 2613 (dispatch("change")); 2614 } 2615 }; 2616 2617 return [ 2618 value, 2619 elem_id, 2620 visible, 2621 source, 2622 tool, 2623 label, 2624 show_label, 2625 streaming, 2626 pending, 2627 style, 2628 mirror_webcam, 2629 loading_status, 2630 mode, 2631 dragging, 2632 $_, 2633 image_value_binding, 2634 edit_handler, 2635 clear_handler, 2636 change_handler, 2637 stream_handler, 2638 drag_handler 2639 ]; 2640} 2641 2642class Image_1 extends SvelteComponent { 2643 constructor(options) { 2644 super(); 2645 2646 init(this, options, instance, create_fragment, safe_not_equal, { 2647 elem_id: 1, 2648 visible: 2, 2649 value: 0, 2650 source: 3, 2651 tool: 4, 2652 label: 5, 2653 show_label: 6, 2654 streaming: 7, 2655 pending: 8, 2656 style: 9, 2657 mirror_webcam: 10, 2658 loading_status: 11, 2659 mode: 12 2660 }); 2661 } 2662} 2663 2664var Image_1$1 = Image_1; 2665 2666const modes = ["static", "dynamic"]; 2667 2668export { Image_1$1 as Component, modes };
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.