617 lines
22 KiB
Svelte
617 lines
22 KiB
Svelte
<script lang="ts">
|
|
/*
|
|
* Portions of this code were adapted from multidiffusion-upscaler-for-automatic1111 ver. 2023.3.28
|
|
* which was licensed under GPL-3. Subsequent versions were relicensed as CC BY-NC-SA 4.0
|
|
* https://github.com/pkuliyi2015/multidiffusion-upscaler-for-automatic1111/commit/e116fe946fe44c52d5500ace9ce65d4d685cff46
|
|
*/
|
|
import { onMount } from "svelte";
|
|
import type { ComfyMultiRegionNode } from "$lib/nodes/widgets";
|
|
import type { BoundingBox } from "$lib/nodes/widgets/ComfyMultiRegionNode";
|
|
import type { WidgetLayout } from "$lib/stores/layoutStates";
|
|
import { Block, BlockLabel } from "@gradio/atoms";
|
|
import { Chart as ChartIcon } from "@gradio/icons";
|
|
import { Range } from "@gradio/form";
|
|
import { writable, type Writable } from "svelte/store";
|
|
import { generateBlankCanvas, generateImageCanvas, loadImage } from "./utils";
|
|
import { clamp } from "$lib/utils";
|
|
import Row from "$lib/components/gradio/app/Row.svelte";
|
|
|
|
// ref: https://html-color.codes/
|
|
const COLOR_MAP: [string, string][] = [
|
|
['#ff0000', 'rgba(255, 0, 0, 0.3)'], // red
|
|
['#ff9900', 'rgba(255, 153, 0, 0.3)'], // orange
|
|
['#ffff00', 'rgba(255, 255, 0, 0.3)'], // yellow
|
|
['#33cc33', 'rgba(51, 204, 51, 0.3)'], // green
|
|
['#33cccc', 'rgba(51, 204, 204, 0.3)'], // indigo
|
|
['#0066ff', 'rgba(0, 102, 255, 0.3)'], // blue
|
|
['#6600ff', 'rgba(102, 0, 255, 0.3)'], // purple
|
|
['#cc00cc', 'rgba(204, 0, 204, 0.3)'], // dark pink
|
|
['#ff6666', 'rgba(255, 102, 102, 0.3)'], // light red
|
|
['#ffcc66', 'rgba(255, 204, 102, 0.3)'], // light orange
|
|
['#99cc00', 'rgba(153, 204, 0, 0.3)'], // lime green
|
|
['#00cc99', 'rgba(0, 204, 153, 0.3)'], // teal
|
|
['#0099cc', 'rgba(0, 153, 204, 0.3)'], // steel blue
|
|
['#9933cc', 'rgba(153, 51, 204, 0.3)'], // lavender
|
|
['#ff3399', 'rgba(255, 51, 153, 0.3)'], // hot pink
|
|
['#996633', 'rgba(153, 102, 51, 0.3)'], // brown
|
|
];
|
|
|
|
export let widget: WidgetLayout | null = null;
|
|
export let isMobile: boolean = false;
|
|
|
|
let imageContainer: HTMLDivElement | null;
|
|
let imageElem: HTMLImageElement | null;
|
|
|
|
let node: ComfyMultiRegionNode | null = null;
|
|
let nodeValue: Writable<BoundingBox[]> = writable([]);
|
|
let sizeChanged: Writable<boolean> = writable(false);
|
|
let regionsChanged: Writable<boolean> = writable(false);
|
|
let propsChanged: Writable<number> = writable(0);
|
|
let selectedIndex: number = 0;
|
|
let imageOpacity: number = 1;
|
|
|
|
$: widget && setNodeValue(widget);
|
|
|
|
function setNodeValue(widget: WidgetLayout) {
|
|
if (widget) {
|
|
node = widget.node as ComfyMultiRegionNode
|
|
nodeValue = node.value;
|
|
propsChanged = node.propsChanged;
|
|
sizeChanged = node.sizeChanged;
|
|
regionsChanged = node.regionsChanged;
|
|
|
|
updateImageAndDBoxes();
|
|
}
|
|
};
|
|
|
|
let showWidget: boolean = false;
|
|
|
|
if (sizeChanged && $sizeChanged) {
|
|
console.error("Z@");
|
|
}
|
|
|
|
type DisplayBoundingBox = {
|
|
xPx: number,
|
|
yPx: number,
|
|
widthPx: number,
|
|
heightPx: number,
|
|
warnLargeSize: boolean,
|
|
bgColor: string,
|
|
borderColor: string
|
|
}
|
|
|
|
let displayBoxes = [];
|
|
|
|
async function recreateDisplayBoxes(_node?: ComfyMultiRegionNode, bboxes?: BoundingBox[]): Promise<DisplayBoundingBox[]> {
|
|
_node ||= node;
|
|
bboxes ||= $nodeValue
|
|
|
|
// console.debug("[MultiRegionWidget] Recreate!", bboxes, _node)
|
|
|
|
if (_node != null && imageElem != null && imageContainer != null) {
|
|
selectedIndex = clamp(selectedIndex, 0, bboxes.length - 1);
|
|
await updateImage(_node.properties.canvasWidth, _node.properties.canvasHeight, _node.properties.canvasImageURL);
|
|
return bboxes.map((b, i) => displayBoundingBox(b, i, imageElem))
|
|
}
|
|
else {
|
|
return []
|
|
}
|
|
}
|
|
|
|
async function updateImageAndDBoxes() {
|
|
if (node == null)
|
|
return;
|
|
|
|
return updateImage(node.properties.canvasWidth, node.properties.canvasHeight, node.properties.canvasImageURL)
|
|
.then(() => {
|
|
return recreateDisplayBoxes()
|
|
})
|
|
.then(dbs => {
|
|
displayBoxes = dbs;
|
|
})
|
|
}
|
|
|
|
$: if (node != null && $sizeChanged) {
|
|
updateImageAndDBoxes();
|
|
}
|
|
|
|
onMount(async () => {
|
|
await updateImageAndDBoxes();
|
|
})
|
|
|
|
$: if ($regionsChanged) {
|
|
$regionsChanged = false;
|
|
recreateDisplayBoxes(node, $nodeValue).then(dbs => displayBoxes = dbs);
|
|
}
|
|
|
|
let hasImage = false;
|
|
|
|
async function updateImage(width: number, height: number, imageURL: string | null) {
|
|
showWidget = width > 0 && height > 0;
|
|
hasImage = imageURL != null
|
|
|
|
if (imageURL == null) {
|
|
const blank = generateBlankCanvas(width, height, "transparent");
|
|
imageURL = blank.toDataURL();
|
|
}
|
|
|
|
const newImg = await loadImage(imageURL);
|
|
newImg.classList.add("regions-image");
|
|
if (imageContainer != null) {
|
|
imageContainer.replaceChildren(newImg)
|
|
}
|
|
imageElem = newImg;
|
|
imageElem.style.border = `${BORDER_SIZE_PX}px solid var(--border-color-primary)`;
|
|
|
|
$sizeChanged = false;
|
|
}
|
|
|
|
const BBOX_WARNING_SIZE = 1280;
|
|
|
|
function onBBoxMoved(index: number, newBBox: BoundingBox) {
|
|
$nodeValue[index] = newBBox;
|
|
displayBoxes[index] = displayBoundingBox(newBBox, index, imageElem, displayBoxes[index]);
|
|
}
|
|
|
|
function displayBoundingBox(bbox: BoundingBox, index: number, imageElem: HTMLImageElement, out?: DisplayBoundingBox): DisplayBoundingBox {
|
|
const [x, y, w, h] = bbox;
|
|
|
|
// client: image widget display size
|
|
// natural: content image real size
|
|
const vpScale = Math.min(imageElem.clientWidth / imageElem.naturalWidth, imageElem.clientHeight / imageElem.naturalHeight);
|
|
const imageElemCenterX = (imageElem.clientWidth) / 2;
|
|
const imageElemCenterY = (imageElem.clientHeight) / 2;
|
|
const scaledX = imageElem.naturalWidth * vpScale;
|
|
const scaledY = imageElem.naturalHeight * vpScale;
|
|
const viewRectLeft = imageElemCenterX - scaledX / 2 + BORDER_SIZE_PX;
|
|
const viewRectRight = imageElemCenterX + scaledX / 2 + BORDER_SIZE_PX;
|
|
const viewRectTop = imageElemCenterY - scaledY / 2 + BORDER_SIZE_PX;
|
|
const viewRectDown = imageElemCenterY + scaledY / 2 + BORDER_SIZE_PX;
|
|
|
|
const xDiv = viewRectLeft + scaledX * x;
|
|
const yDiv = viewRectTop + scaledY * y;
|
|
const wDiv = Math.min(scaledX * w, viewRectRight - xDiv);
|
|
const hDiv = Math.min(scaledY * h, viewRectDown - yDiv);
|
|
|
|
// Calculate warning bbox size
|
|
const upscalerFactor = 1.0;
|
|
// if (!is_t2i) {
|
|
// upscalerFactor = getUpscalerFactor();
|
|
// }
|
|
const maxSize = BBOX_WARNING_SIZE / upscalerFactor * vpScale;
|
|
const maxW = maxSize / scaledX;
|
|
const maxH = maxSize / scaledY;
|
|
const warnLargeSize = w > maxW || h > maxH
|
|
|
|
const [borderColor, bgColor] = COLOR_MAP[index % COLOR_MAP.length]
|
|
|
|
out ||= {} as DisplayBoundingBox
|
|
out.xPx = xDiv;
|
|
out.yPx = yDiv;
|
|
out.widthPx = wDiv;
|
|
out.heightPx = hDiv;
|
|
out.warnLargeSize = warnLargeSize;
|
|
out.bgColor = bgColor
|
|
out.borderColor = borderColor
|
|
|
|
return out;
|
|
}
|
|
|
|
const RESIZE_BORDER = 5;
|
|
const MOVE_BORDER = 5;
|
|
const BORDER_SIZE_PX = 3;
|
|
|
|
function updateCursorStyle(e: MouseEvent) {
|
|
// This function changes the cursor style when hovering over the bounding box
|
|
const div = e.target as HTMLDivElement;
|
|
const boxRect = div.getBoundingClientRect();
|
|
const mouseX = e.clientX;
|
|
const mouseY = e.clientY;
|
|
|
|
const resizeLeft = mouseX >= boxRect.left && mouseX <= boxRect.left + RESIZE_BORDER;
|
|
const resizeRight = mouseX >= boxRect.right - RESIZE_BORDER && mouseX <= boxRect.right;
|
|
const resizeTop = mouseY >= boxRect.top && mouseY <= boxRect.top + RESIZE_BORDER;
|
|
const resizeBottom = mouseY >= boxRect.bottom - RESIZE_BORDER && mouseY <= boxRect.bottom;
|
|
|
|
if ((resizeLeft && resizeTop) || (resizeRight && resizeBottom)) {
|
|
div.style.cursor = 'nwse-resize';
|
|
} else if ((resizeLeft && resizeBottom) || (resizeRight && resizeTop)) {
|
|
div.style.cursor = 'nesw-resize';
|
|
} else if (resizeLeft || resizeRight) {
|
|
div.style.cursor = 'ew-resize';
|
|
} else if (resizeTop || resizeBottom) {
|
|
div.style.cursor = 'ns-resize';
|
|
} else {
|
|
div.style.cursor = 'move';
|
|
}
|
|
}
|
|
|
|
function onBoxMouseDown(e: MouseEvent, index: number) {
|
|
if (e.button !== 0)
|
|
return;
|
|
|
|
// Get the bounding box
|
|
let bbox = $nodeValue[index];
|
|
if (!imageElem || !bbox)
|
|
return;
|
|
|
|
selectedIndex = index;
|
|
|
|
// Check if the click is inside the bounding box
|
|
const div = e.target as HTMLDivElement;
|
|
const boxRect = div.getBoundingClientRect();
|
|
let mouseX = e.clientX;
|
|
let mouseY = e.clientY;
|
|
|
|
const resizeLeft = mouseX >= boxRect.left && mouseX <= boxRect.left + RESIZE_BORDER;
|
|
const resizeRight = mouseX >= boxRect.right - RESIZE_BORDER && mouseX <= boxRect.right;
|
|
const resizeTop = mouseY >= boxRect.top && mouseY <= boxRect.top + RESIZE_BORDER;
|
|
const resizeBottom = mouseY >= boxRect.bottom - RESIZE_BORDER && mouseY <= boxRect.bottom;
|
|
|
|
const moveHorizontal = mouseX >= boxRect.left + MOVE_BORDER && mouseX <= boxRect.right - MOVE_BORDER;
|
|
const moveVertical = mouseY >= boxRect.top + MOVE_BORDER && mouseY <= boxRect.bottom - MOVE_BORDER;
|
|
|
|
if (!resizeLeft && !resizeRight && !resizeTop && !resizeBottom && !moveHorizontal && !moveVertical)
|
|
return;
|
|
|
|
const horizontalPivot = resizeLeft ? bbox[0] + bbox[2] : bbox[0];
|
|
const verticalPivot = resizeTop ? bbox[1] + bbox[3] : bbox[1];
|
|
|
|
// Canvas can be regarded as invariant during the drag operation
|
|
// Calculate in advance to reduce overhead
|
|
|
|
// Calculate viewport scale based on the current canvas size and the natural image size
|
|
let vpScale = Math.min(imageElem.clientWidth / imageElem.naturalWidth, imageElem.clientHeight / imageElem.naturalHeight);
|
|
let vpOffset = imageElem.getBoundingClientRect();
|
|
|
|
// Calculate scaled dimensions of the canvas
|
|
let scaledX = imageElem.naturalWidth * vpScale;
|
|
let scaledY = imageElem.naturalHeight * vpScale;
|
|
|
|
// Calculate the canvas center and view rectangle coordinates
|
|
let canvasCenterX = (vpOffset.left + window.scrollX) + imageElem.clientWidth / 2;
|
|
let canvasCenterY = (vpOffset.top + window.scrollY) + imageElem.clientHeight / 2;
|
|
let viewRectLeft = canvasCenterX - scaledX / 2 - window.scrollX;
|
|
let viewRectRight = canvasCenterX + scaledX / 2 - window.scrollX;
|
|
let viewRectTop = canvasCenterY - scaledY / 2 - window.scrollY;
|
|
let viewRectDown = canvasCenterY + scaledY / 2 - window.scrollY;
|
|
|
|
mouseX = Math.min(Math.max(mouseX, viewRectLeft), viewRectRight);
|
|
mouseY = Math.min(Math.max(mouseY, viewRectTop), viewRectDown);
|
|
|
|
// Move or resize the bounding box on mousemove
|
|
function onMouseMove(e) {
|
|
// Prevent selecting anything irrelevant
|
|
e.preventDefault();
|
|
|
|
// Get the new mouse position
|
|
let newMouseX = e.clientX;
|
|
let newMouseY = e.clientY;
|
|
|
|
// clamp the mouse position to the view rectangle
|
|
newMouseX = Math.min(Math.max(newMouseX, viewRectLeft), viewRectRight);
|
|
newMouseY = Math.min(Math.max(newMouseY, viewRectTop), viewRectDown);
|
|
|
|
// Calculate the mouse movement delta
|
|
const dx = (newMouseX - mouseX) / scaledX;
|
|
const dy = (newMouseY - mouseY) / scaledY;
|
|
|
|
// Update the mouse position
|
|
mouseX = newMouseX;
|
|
mouseY = newMouseY;
|
|
|
|
// if no move just return
|
|
if (dx === 0 && dy === 0) { return; }
|
|
|
|
// Update the mouse position
|
|
let [x, y, w, h] = bbox;
|
|
|
|
if (moveHorizontal && moveVertical) {
|
|
// If moving the bounding box
|
|
x = Math.min(Math.max(x + dx, 0), 1 - w);
|
|
y = Math.min(Math.max(y + dy, 0), 1 - h);
|
|
} else {
|
|
// If resizing the bounding box
|
|
if (resizeLeft || resizeRight) {
|
|
if (x < horizontalPivot) {
|
|
if (dx <= w) {
|
|
// If still within the left side of the pivot
|
|
x = x + dx;
|
|
w = w - dx;
|
|
} else {
|
|
// If crossing the pivot
|
|
w = dx - w;
|
|
x = horizontalPivot;
|
|
}
|
|
} else {
|
|
if (w + dx < 0) {
|
|
// If still within the right side of the pivot
|
|
x = horizontalPivot + w + dx;
|
|
w = - dx - w;
|
|
} else {
|
|
// If crossing the pivot
|
|
x = horizontalPivot;
|
|
w = w + dx;
|
|
}
|
|
}
|
|
|
|
// Clamp the bounding box to the image
|
|
if (x < 0) {
|
|
w = w + x;
|
|
x = 0;
|
|
} else if (x + w > 1) {
|
|
w = 1 - x;
|
|
}
|
|
}
|
|
// Same as above, but for the vertical axis
|
|
if (resizeTop || resizeBottom) {
|
|
if (y < verticalPivot) {
|
|
if (dy <= h) {
|
|
y = y + dy;
|
|
h = h - dy;
|
|
} else {
|
|
h = dy - h;
|
|
y = verticalPivot;
|
|
}
|
|
} else {
|
|
if (h + dy < 0) {
|
|
y = verticalPivot + h + dy;
|
|
h = - dy - h;
|
|
} else {
|
|
y = verticalPivot;
|
|
h = h + dy;
|
|
}
|
|
}
|
|
if (y < 0) {
|
|
h = h + y;
|
|
y = 0;
|
|
} else if (y + h > 1) {
|
|
h = 1 - y;
|
|
}
|
|
}
|
|
}
|
|
const [div, old_bbox, _] = $nodeValue[index];
|
|
|
|
// If all the values are the same, just return
|
|
if (old_bbox[0] === x && old_bbox[1] === y && old_bbox[2] === w && old_bbox[3] === h) { return; }
|
|
|
|
// else update the bbox
|
|
bbox[0] = x;
|
|
bbox[1] = y;
|
|
bbox[2] = w;
|
|
bbox[3] = h;
|
|
onBBoxMoved(index, bbox);
|
|
}
|
|
|
|
const onMouseUp = () => {
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
$regionsChanged = true;
|
|
$nodeValue = $nodeValue;
|
|
}
|
|
|
|
// Add the event listeners
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
}
|
|
|
|
async function onResize() {
|
|
displayBoxes = await recreateDisplayBoxes();
|
|
}
|
|
|
|
function updateSelectedIndex(newIndexPlusOne: number) {
|
|
selectedIndex = clamp(newIndexPlusOne - 1, 0, $nodeValue.length - 1);
|
|
}
|
|
|
|
function updateX(newX: number) {
|
|
const bbox = $nodeValue[selectedIndex]
|
|
const dbox = displayBoxes[selectedIndex]
|
|
if (!bbox || !dbox)
|
|
return
|
|
|
|
bbox[0] = newX
|
|
displayBoxes[selectedIndex] = displayBoundingBox(bbox, selectedIndex, imageElem, dbox);
|
|
}
|
|
|
|
function updateY(newY: number) {
|
|
const bbox = $nodeValue[selectedIndex]
|
|
const dbox = displayBoxes[selectedIndex]
|
|
if (!bbox || !dbox)
|
|
return
|
|
|
|
bbox[1] = newY
|
|
displayBoxes[selectedIndex] = displayBoundingBox(bbox, selectedIndex, imageElem, dbox);
|
|
}
|
|
|
|
function updateWidth(newWidth: number) {
|
|
const bbox = $nodeValue[selectedIndex]
|
|
const dbox = displayBoxes[selectedIndex]
|
|
if (!bbox || !dbox)
|
|
return
|
|
|
|
bbox[2] = newWidth
|
|
displayBoxes[selectedIndex] = displayBoundingBox(bbox, selectedIndex, imageElem, dbox);
|
|
}
|
|
|
|
function updateHeight(newHeight: number) {
|
|
const bbox = $nodeValue[selectedIndex]
|
|
const dbox = displayBoxes[selectedIndex]
|
|
if (!bbox || !dbox)
|
|
return
|
|
|
|
bbox[3] = newHeight
|
|
displayBoxes[selectedIndex] = displayBoundingBox(bbox, selectedIndex, imageElem, dbox);
|
|
}
|
|
|
|
async function updateValue() {
|
|
// Clamp regions
|
|
const bbox = $nodeValue[selectedIndex]
|
|
const dbox = displayBoxes[selectedIndex]
|
|
if (bbox && dbox) {
|
|
bbox[2] = clamp(bbox[2], 0, 1)
|
|
bbox[3] = clamp(bbox[3], 0, 1)
|
|
bbox[0] = clamp(bbox[0], 0, 1 - bbox[2])
|
|
bbox[1] = clamp(bbox[1], 0, 1 - bbox[3])
|
|
displayBoxes[selectedIndex] = displayBoundingBox(bbox, selectedIndex, imageElem, dbox);
|
|
}
|
|
|
|
await updateImageAndDBoxes();
|
|
|
|
// Force reactivity after changing a bbox's internal values
|
|
$nodeValue = $nodeValue
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:resize={onResize}/>
|
|
|
|
{#key node?.properties.canvasWidth}
|
|
<Block>
|
|
{#if widget?.attrs.title}
|
|
{@const label = widget.attrs.title}
|
|
<BlockLabel
|
|
label={label}
|
|
show_label={label != ""}
|
|
Icon={ChartIcon}
|
|
float={label != ""}
|
|
/>
|
|
{/if}
|
|
{#if showWidget}
|
|
{@const selectedBBox = $nodeValue[selectedIndex]}
|
|
<div class="regions-container">
|
|
<div bind:this={imageContainer} class="regions-image-container"
|
|
style:opacity="{hasImage ? imageOpacity * 100 : 100}%">
|
|
<img bind:this={imageElem} class="regions-image" />
|
|
</div>
|
|
<div class="regions">
|
|
{#each displayBoxes as dBox, i}
|
|
{@const selected = selectedIndex === i}
|
|
<div class="region"
|
|
style:left="{dBox.xPx}px"
|
|
style:top="{dBox.yPx}px"
|
|
style:width="{dBox.widthPx}px"
|
|
style:height="{dBox.heightPx}px"
|
|
style:background={dBox.bgColor}
|
|
style:border-style={selected ? "solid" : "dotted"}
|
|
style:border-color={dBox.borderColor}
|
|
style:display="block"
|
|
style:opacity={selected ? "100%" : "40%"}
|
|
style:z-index={selected ? "var(--layer-3)" : "var(--layer-2)"}
|
|
on:mousemove={updateCursorStyle}
|
|
on:mousedown={(e) => onBoxMouseDown(e, i)}
|
|
>
|
|
<span class="tip"
|
|
style:display={dBox.warnLargeSize ? "block" : "none"}>
|
|
Warning: Region very large!
|
|
</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{#if selectedBBox}
|
|
<Block>
|
|
<Row>
|
|
<Range label="Region #" value={selectedIndex+1}
|
|
show_label={true} minimum={1} maximum={$nodeValue.length} step={1}
|
|
on:change={(e) => updateSelectedIndex(e.detail)}
|
|
on:release={updateValue}
|
|
/>
|
|
</Row>
|
|
<Row>
|
|
<Range label="X" value={selectedBBox[0]}
|
|
show_label={true} minimum={0.0} maximum={1.0} step={0.01}
|
|
on:change={(e) => updateX(e.detail)}
|
|
on:release={updateValue}
|
|
/>
|
|
<Range label="Width" value={selectedBBox[2]}
|
|
show_label={true} minimum={0.0} maximum={1.0} step={0.01}
|
|
on:change={(e) => updateWidth(e.detail)}
|
|
on:release={updateValue}
|
|
/>
|
|
</Row>
|
|
<Row>
|
|
<Range label="Y" value={selectedBBox[1]}
|
|
show_label={true} minimum={0.0} maximum={1.0} step={0.01}
|
|
on:change={(e) => updateY(e.detail)}
|
|
on:release={updateValue}
|
|
/>
|
|
<Range label="Height" value={selectedBBox[3]}
|
|
show_label={true} minimum={0.0} maximum={1.0} step={0.01}
|
|
on:change={(e) => updateHeight(e.detail)}
|
|
on:release={updateValue}
|
|
/>
|
|
</Row>
|
|
{#if hasImage}
|
|
<Row>
|
|
<Range label="Image Opacity" bind:value={imageOpacity}
|
|
show_label={true} minimum={0.0} maximum={1.0} step={0.01}/>
|
|
</Row>
|
|
{/if}
|
|
</Block>
|
|
{/if}
|
|
{:else}
|
|
<div class="regions-empty">
|
|
<span>(No regions)</span>
|
|
</div>
|
|
{/if}
|
|
</Block>
|
|
{/key}
|
|
|
|
<style lang="scss">
|
|
.regions-container {
|
|
position: relative;
|
|
padding: 0;
|
|
|
|
.regions-image-container {
|
|
display: flex;
|
|
|
|
img {
|
|
height: 100%;
|
|
border: 3px solid var(--input-border-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.regions {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.region {
|
|
position: absolute;
|
|
z-index: var(--layer-3);
|
|
cursor: move;
|
|
border-style: dotted;
|
|
border-width: 2px;
|
|
|
|
.tip {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: red;
|
|
z-index: var(--layer-2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.regions-empty {
|
|
display: flex;
|
|
position: relative;
|
|
height: 10rem;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
font-weight: bolder;
|
|
color: var(--comfy-accent-soft);
|
|
|
|
span {
|
|
margin: auto;
|
|
}
|
|
}
|
|
</style>
|