@pixerate/editor-svelte 0.148.3 → 0.150.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
AdjustmentLayer,
|
|
6
6
|
ImageEditorController,
|
|
7
7
|
RefineEdgeParams,
|
|
8
|
+
RefineOutput,
|
|
8
9
|
SelectionMask,
|
|
9
10
|
} from '@pixerate/editor/image-editor';
|
|
10
11
|
import {
|
|
11
12
|
ADJUSTMENT_KINDS,
|
|
12
13
|
REFINE_EDGE_CONTROLS,
|
|
14
|
+
REFINE_OUTPUTS,
|
|
13
15
|
adjustmentKindLabel,
|
|
14
16
|
layerMaskFromSelection,
|
|
15
17
|
} from '@pixerate/editor/image-editor';
|
|
@@ -46,13 +48,24 @@
|
|
|
46
48
|
let error = $state<string | null>(null);
|
|
47
49
|
let layerId = $state('');
|
|
48
50
|
let newKind = $state<AdjustmentKind>('hueSaturation');
|
|
51
|
+
let output = $state<RefineOutput>('selection');
|
|
52
|
+
let decontaminate = $state(0);
|
|
53
|
+
let objectAware = $state(false);
|
|
54
|
+
const canObject = $derived.by(() => {
|
|
55
|
+
void tick;
|
|
56
|
+
return Boolean(controller.segmentationProvider);
|
|
57
|
+
});
|
|
58
|
+
const toLayer = $derived(output === 'new-layer' || output === 'new-layer-with-mask');
|
|
49
59
|
const target = $derived(list.find((l) => l.id === layerId) ?? list[list.length - 1]);
|
|
50
60
|
|
|
51
61
|
async function refine() {
|
|
52
62
|
busy = true;
|
|
53
63
|
error = null;
|
|
54
64
|
try {
|
|
55
|
-
await controller.
|
|
65
|
+
await controller.refineSelectionTo({ ...params }, output, {
|
|
66
|
+
decontaminate: toLayer ? decontaminate : 0,
|
|
67
|
+
refineMode: canObject && objectAware ? 'object' : 'color',
|
|
68
|
+
});
|
|
56
69
|
} catch (err) {
|
|
57
70
|
error = err instanceof Error ? err.message : String(err);
|
|
58
71
|
} finally {
|
|
@@ -97,6 +110,42 @@
|
|
|
97
110
|
/>
|
|
98
111
|
Smart Radius
|
|
99
112
|
</label>
|
|
113
|
+
{#if canObject}
|
|
114
|
+
<label class="flex items-center gap-2 text-foreground">
|
|
115
|
+
<input type="checkbox" aria-label="Object aware" checked={objectAware} onchange={(e) => (objectAware = (e.currentTarget as HTMLInputElement).checked)} />
|
|
116
|
+
Object aware (segmentation model)
|
|
117
|
+
</label>
|
|
118
|
+
{/if}
|
|
119
|
+
<label class="flex items-center gap-2 text-muted-foreground">
|
|
120
|
+
Output to
|
|
121
|
+
<select
|
|
122
|
+
aria-label="Refine output"
|
|
123
|
+
value={output}
|
|
124
|
+
onchange={(e) => (output = (e.currentTarget as HTMLSelectElement).value as RefineOutput)}
|
|
125
|
+
class="flex-1 bg-background border border-border rounded px-1 py-1 text-foreground"
|
|
126
|
+
>
|
|
127
|
+
{#each REFINE_OUTPUTS as o (o.id)}
|
|
128
|
+
<option value={o.id}>{o.label}</option>
|
|
129
|
+
{/each}
|
|
130
|
+
</select>
|
|
131
|
+
</label>
|
|
132
|
+
<label class="flex flex-col gap-1">
|
|
133
|
+
<span class="flex justify-between text-muted-foreground">
|
|
134
|
+
<span>Decontaminate colors{toLayer ? '' : ' (new layer outputs)'}</span>
|
|
135
|
+
<span class="font-mono">{decontaminate}%</span>
|
|
136
|
+
</span>
|
|
137
|
+
<input
|
|
138
|
+
type="range"
|
|
139
|
+
min="0"
|
|
140
|
+
max="100"
|
|
141
|
+
step="1"
|
|
142
|
+
aria-label="Decontaminate amount"
|
|
143
|
+
disabled={!toLayer}
|
|
144
|
+
value={decontaminate}
|
|
145
|
+
oninput={(e) => (decontaminate = Number((e.currentTarget as HTMLInputElement).value))}
|
|
146
|
+
class={imageRangeClass}
|
|
147
|
+
/>
|
|
148
|
+
</label>
|
|
100
149
|
<div class="flex gap-1">
|
|
101
150
|
<button type="button" class={button} disabled={!sel || busy} onclick={refine}>Refine Edge</button>
|
|
102
151
|
<button type="button" class={button} onclick={() => (params = { ...DEFAULT_PARAMS })}>Reset</button>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixerate/editor-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.150.0",
|
|
4
4
|
"description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
|
|
5
5
|
"author": "Pixerate",
|
|
6
6
|
"license": "MIT",
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
"**/*.css"
|
|
166
166
|
],
|
|
167
167
|
"dependencies": {
|
|
168
|
-
"@pixerate/editor": "0.
|
|
168
|
+
"@pixerate/editor": "0.206.0"
|
|
169
169
|
},
|
|
170
170
|
"peerDependencies": {
|
|
171
171
|
"@dagrejs/dagre": "^1.1.4",
|