Spaces:
Running
Running
File size: 2,246 Bytes
5ddc4d5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<script lang="ts">
import Moveable from "svelte-moveable";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
let data: HTMLDivElement;
let componentElements = [];
$: {
if (data) {
componentElements = Array.from(
data.querySelectorAll('[id^="component-"]')
);
}
}
const draggable = true;
const throttleDrag = 1;
const edgeDraggable = true;
const startDragRotate = 0;
const throttleDragRotate = 0;
const scalable = true;
const keepRatio = false;
const throttleScale = 0;
const renderDirections = ["nw", "n", "ne", "w", "e", "sw", "s", "se"];
const rotatable = true;
const throttleRotate = 0;
const rotationPosition = "top";
let editing = false;
</script>
<div
id={elem_id}
class="gr-group {elem_classes.join(' ')}"
class:hide={!visible}
>
<button class="edit-button" on:click={() => (editing = !editing)}
>{editing ? "Done" : "Edit"}</button
>
<div bind:this={data} class="hide">
<slot />
</div>
{#each componentElements as elmt, id}
<div class={"target target" + id}>
{@html elmt.outerHTML}
</div>
{/each}
{#if componentElements.length > 0 && editing}
<Moveable
target={".target"}
individualGroupable={true}
{draggable}
{throttleDrag}
{edgeDraggable}
{startDragRotate}
{throttleDragRotate}
{scalable}
{keepRatio}
{throttleScale}
{renderDirections}
{rotatable}
{throttleRotate}
{rotationPosition}
on:drag={({ detail: e }) => {
e.target.style.transform = e.transform;
}}
on:scale={({ detail: e }) => {
e.target.style.transform = e.drag.transform;
}}
on:rotate={({ detail: e }) => {
e.target.style.transform = e.drag.transform;
}}
/>
{/if}
</div>
<style>
.edit-button {
position: absolute;
top: 0;
right: 0;
left: 100%;
}
:global(.moveable-line) {
opacity: 0.1;
}
:global(.moveable-control) {
opacity: 0.2;
}
:global(.moveable-origin) {
opacity: 0;
}
:global(.gradio-container) {
overflow: visible;
}
.hide {
display: none;
}
.target {
margin: 30px;
}
</style>
|