@pixerate/editor-svelte 0.13.0 → 0.15.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.
- package/dist/chunk-HEOI4UNF.js +1191 -0
- package/dist/chunk-HEOI4UNF.js.map +1 -0
- package/dist/image-editor/index.d.ts +16 -0
- package/dist/image-editor/index.js +9 -0
- package/dist/image-editor/index.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +7 -0
- package/dist/index.js.map +1 -1
- package/package.json +12 -3
- package/src/image-editor/ImageEditor.svelte +1345 -0
- package/src/image-editor/imageEditorState.svelte.ts +151 -0
- package/src/image-editor/index.d.ts +16 -0
- package/src/image-editor/index.ts +2 -0
- package/src/index.d.ts +2 -0
- package/src/index.ts +1 -0
|
@@ -0,0 +1,1191 @@
|
|
|
1
|
+
// src/image-editor/ImageEditor.svelte
|
|
2
|
+
import "svelte/internal/disclose-version";
|
|
3
|
+
import * as $2 from "svelte/internal/client";
|
|
4
|
+
import {
|
|
5
|
+
canvasToImagePoint,
|
|
6
|
+
hitTestCrop,
|
|
7
|
+
getCropCursor,
|
|
8
|
+
calculateCropDrag,
|
|
9
|
+
hitTestAnnotation
|
|
10
|
+
} from "@pixerate/editor";
|
|
11
|
+
|
|
12
|
+
// src/image-editor/imageEditorState.svelte.ts
|
|
13
|
+
import * as $ from "svelte/internal/client";
|
|
14
|
+
import { ImageEditorController } from "@pixerate/editor";
|
|
15
|
+
function createReactiveImageEditor(options = {}) {
|
|
16
|
+
const controller = new ImageEditorController(options);
|
|
17
|
+
let state3 = $.state($.proxy(controller.getState()));
|
|
18
|
+
let historyTicks = $.state(0);
|
|
19
|
+
controller.subscribe((updated) => {
|
|
20
|
+
$.set(state3, { ...updated }, true);
|
|
21
|
+
$.update(historyTicks);
|
|
22
|
+
});
|
|
23
|
+
return {
|
|
24
|
+
get controller() {
|
|
25
|
+
return controller;
|
|
26
|
+
},
|
|
27
|
+
get state() {
|
|
28
|
+
return $.get(state3);
|
|
29
|
+
},
|
|
30
|
+
get canUndo() {
|
|
31
|
+
void $.get(historyTicks);
|
|
32
|
+
return controller.canUndo;
|
|
33
|
+
},
|
|
34
|
+
get canRedo() {
|
|
35
|
+
void $.get(historyTicks);
|
|
36
|
+
return controller.canRedo;
|
|
37
|
+
},
|
|
38
|
+
setTool(tool) {
|
|
39
|
+
controller.setTool(tool);
|
|
40
|
+
},
|
|
41
|
+
setCrop(crop, addToHistory = true) {
|
|
42
|
+
controller.setCrop(crop, addToHistory);
|
|
43
|
+
},
|
|
44
|
+
applyCropPreset(ratio) {
|
|
45
|
+
controller.applyCropPreset(ratio);
|
|
46
|
+
},
|
|
47
|
+
resetCrop() {
|
|
48
|
+
controller.resetCrop();
|
|
49
|
+
},
|
|
50
|
+
rotate(degrees) {
|
|
51
|
+
controller.rotate(degrees);
|
|
52
|
+
},
|
|
53
|
+
setRotation(degrees) {
|
|
54
|
+
controller.setRotation(degrees);
|
|
55
|
+
},
|
|
56
|
+
flipHorizontal() {
|
|
57
|
+
controller.flipHorizontal();
|
|
58
|
+
},
|
|
59
|
+
flipVertical() {
|
|
60
|
+
controller.flipVertical();
|
|
61
|
+
},
|
|
62
|
+
setAdjustments(partial, commitToHistory = true) {
|
|
63
|
+
controller.setAdjustments(partial, commitToHistory);
|
|
64
|
+
},
|
|
65
|
+
resetAdjustments() {
|
|
66
|
+
controller.resetAdjustments();
|
|
67
|
+
},
|
|
68
|
+
setDepthMask(partial) {
|
|
69
|
+
controller.setDepthMask(partial);
|
|
70
|
+
},
|
|
71
|
+
resetDepthMask() {
|
|
72
|
+
controller.resetDepthMask();
|
|
73
|
+
},
|
|
74
|
+
addAnnotation(ann) {
|
|
75
|
+
return controller.addAnnotation(ann);
|
|
76
|
+
},
|
|
77
|
+
updateAnnotation(id, partial, commitToHistory = true) {
|
|
78
|
+
controller.updateAnnotation(id, partial, commitToHistory);
|
|
79
|
+
},
|
|
80
|
+
removeAnnotation(id) {
|
|
81
|
+
controller.removeAnnotation(id);
|
|
82
|
+
},
|
|
83
|
+
clearAnnotations() {
|
|
84
|
+
controller.clearAnnotations();
|
|
85
|
+
},
|
|
86
|
+
selectAnnotation(id) {
|
|
87
|
+
controller.selectAnnotation(id);
|
|
88
|
+
},
|
|
89
|
+
undo() {
|
|
90
|
+
return controller.undo();
|
|
91
|
+
},
|
|
92
|
+
redo() {
|
|
93
|
+
return controller.redo();
|
|
94
|
+
},
|
|
95
|
+
reset() {
|
|
96
|
+
controller.reset();
|
|
97
|
+
},
|
|
98
|
+
zoomIn(factor) {
|
|
99
|
+
controller.zoomIn(factor);
|
|
100
|
+
},
|
|
101
|
+
zoomOut(factor) {
|
|
102
|
+
controller.zoomOut(factor);
|
|
103
|
+
},
|
|
104
|
+
resetZoom() {
|
|
105
|
+
controller.resetZoom();
|
|
106
|
+
},
|
|
107
|
+
setZoom(zoom) {
|
|
108
|
+
controller.setZoom(zoom);
|
|
109
|
+
},
|
|
110
|
+
setPan(pan) {
|
|
111
|
+
controller.setPan(pan);
|
|
112
|
+
},
|
|
113
|
+
setComparing(comparing) {
|
|
114
|
+
controller.setComparing(comparing);
|
|
115
|
+
},
|
|
116
|
+
loadImage(src) {
|
|
117
|
+
return controller.loadImage(src);
|
|
118
|
+
},
|
|
119
|
+
toDataURL(opts) {
|
|
120
|
+
return controller.toDataURL(opts);
|
|
121
|
+
},
|
|
122
|
+
toBlob(opts) {
|
|
123
|
+
return controller.toBlob(opts);
|
|
124
|
+
},
|
|
125
|
+
toJSON() {
|
|
126
|
+
return controller.toJSON();
|
|
127
|
+
},
|
|
128
|
+
loadJSON(data) {
|
|
129
|
+
controller.loadJSON(data);
|
|
130
|
+
},
|
|
131
|
+
renderMask(opts) {
|
|
132
|
+
return controller.renderMask(opts);
|
|
133
|
+
},
|
|
134
|
+
toMaskDataURL(opts) {
|
|
135
|
+
return controller.toMaskDataURL(opts);
|
|
136
|
+
},
|
|
137
|
+
applyInpaintedImage(newDataUrl) {
|
|
138
|
+
return controller.applyInpaintedImage(newDataUrl);
|
|
139
|
+
},
|
|
140
|
+
applyBackgroundRemovedImage(newDataUrl) {
|
|
141
|
+
return controller.applyBackgroundRemovedImage(newDataUrl);
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// src/image-editor/ImageEditor.svelte
|
|
147
|
+
var root = $2.from_html(`<div class="flex flex-col gap-4 text-xs"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Aspect Ratio Presets</span> <div class="grid grid-cols-3 gap-2"><button type="button">Freeform</button> <button type="button">1:1 Square</button> <button type="button">4:3 Standard</button> <button type="button">16:9 Wide</button> <button type="button">3:2 Photo</button> <button type="button" class="px-2.5 py-2 rounded-lg bg-rose-950/40 hover:bg-rose-900/60 text-rose-300 border border-rose-800/40 font-medium">Clear Crop</button></div> <div class="h-px bg-slate-800 my-1"></div> <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Orientation & Flips</span> <div class="grid grid-cols-2 gap-2"><button type="button" class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700">Rotate -90\xB0</button> <button type="button" class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700">Rotate +90\xB0</button> <button type="button">Flip Horizontal</button> <button type="button">Flip Vertical</button></div></div>`);
|
|
148
|
+
var root_1 = $2.from_html(`<div class="flex flex-col gap-3 text-xs"><div class="flex items-center justify-between"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Color Adjustments</span> <button type="button" class="text-[10px] text-rose-400 hover:underline">Reset Sliders</button></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Brightness</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Contrast</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Saturation</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Exposure</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Warmth / Temperature</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Blur</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="30" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Opacity</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="1" step="0.05" class="w-full accent-indigo-500"/></div></div>`);
|
|
149
|
+
var root_2 = $2.from_html(`<button type="button"> </button>`);
|
|
150
|
+
var root_3 = $2.from_html(`<button type="button" class="text-rose-400 hover:underline text-[11px]">Delete Selected</button>`);
|
|
151
|
+
var root_4 = $2.from_html(`<button type="button" class="text-slate-400 hover:text-slate-200 text-[11px]">Clear All</button>`);
|
|
152
|
+
var root_5 = $2.from_html(`<div class="flex flex-col gap-3 text-xs"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Draw & Annotate</span> <div class="grid grid-cols-3 gap-1.5"></div> <div class="flex items-center gap-2 mt-2"><span class="text-slate-400">Color:</span> <input type="color" class="w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"/> <div class="flex-1 ml-2"><div class="flex justify-between text-slate-400 mb-0.5"><span>Width:</span> <span class="font-mono"> </span></div> <input type="range" min="1" max="20" class="w-full accent-indigo-500"/></div></div> <div class="h-px bg-slate-800 my-1"></div> <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Add Text</span> <div class="flex gap-2"><input type="text" placeholder="Type watermark or label..." class="flex-1 bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500"/> <button type="button" class="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium shadow">Add</button></div> <div class="flex items-center justify-between text-slate-400"><span>Font Size:</span> <span class="font-mono"> </span></div> <input type="range" min="12" max="72" class="w-full accent-indigo-500"/> <div class="h-px bg-slate-800 my-1"></div> <div class="flex items-center justify-between"><span class="text-slate-400"> </span> <!> <!></div></div>`);
|
|
153
|
+
var root_6 = $2.from_html(`<div><span class="text-slate-400 block mb-1">Mask Image URL:</span> <input type="text" placeholder="https://.../depthmap.png" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500"/></div> <div class="flex gap-2"><button type="button">Threshold Mode</button> <button type="button">Brightness Mode</button></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Depth Start (Lower):</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="255" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Depth Stop (Upper):</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="255" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Softness:</span> <span class="font-mono"> </span></div> <input type="range" min="1" max="50" class="w-full accent-indigo-500"/></div> <label class="flex items-center gap-2 cursor-pointer text-slate-300 mt-1"><input type="checkbox" class="rounded accent-indigo-500"/> <span>Invert Mask</span></label>`, 1);
|
|
154
|
+
var root_7 = $2.from_html(`<div class="flex flex-col gap-3 text-xs"><div class="flex items-center justify-between"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Depth Masking</span> <button type="button" class="text-[10px] text-rose-400 hover:underline">Reset Mask</button></div> <label class="flex items-center gap-2 cursor-pointer text-slate-300"><input type="checkbox" class="rounded accent-indigo-500"/> <span>Enable Depth / Alpha Mask</span></label> <!></div>`);
|
|
155
|
+
var root_8 = $2.from_html(`<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse">Removing...</span>`);
|
|
156
|
+
var root_9 = $2.from_html(`<div class="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div> Removing Background...`, 1);
|
|
157
|
+
var root_10 = $2.from_svg(`<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path></svg> Remove Background`, 1);
|
|
158
|
+
var root_11 = $2.from_html(`<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse">Inpainting...</span>`);
|
|
159
|
+
var root_12 = $2.from_html(`<div class="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div> Generating Inpaint...`, 1);
|
|
160
|
+
var root_13 = $2.from_svg(`<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path></svg> Apply Inpainting`, 1);
|
|
161
|
+
var root_14 = $2.from_html(`<div class="p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]"> </div>`);
|
|
162
|
+
var root_15 = $2.from_html(`<div class="p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]"> </div>`);
|
|
163
|
+
var root_16 = $2.from_html(`<div class="flex flex-col gap-4 text-xs"><div class="p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5"><div class="flex items-center justify-between"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-indigo-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path></svg> Background Removal</span> <!></div> <p class="text-slate-400 text-[11px] leading-relaxed">Isolate foreground subject with AI alpha transparency segmentation.</p> <button type="button" class="mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2"><!></button></div> <div class="p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5"><div class="flex items-center justify-between"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z"></path><path d="m14 7 3 3"></path></svg> Generative Inpainting</span> <!></div> <p class="text-slate-400 text-[11px] leading-relaxed">Replace, modify, or fill selected regions using prompt-guided generative inpainting.</p> <div class="flex flex-col gap-1"><label for="ai-inpaint-prompt" class="text-slate-300 text-[11px] font-medium">Prompt</label> <textarea id="ai-inpaint-prompt" placeholder="e.g. replace sunglasses with steampunk goggles, remove person in background..." rows="3" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none"></textarea></div> <div class="flex flex-col gap-1"><span class="text-slate-300 text-[11px] font-medium">Target Mask Region</span> <div class="grid grid-cols-2 gap-1.5"><button type="button"> </button> <button type="button"> </button></div></div> <button type="button" class="mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2"><!></button></div> <!> <!></div>`);
|
|
164
|
+
var root_17 = $2.from_html(`<div><div class="flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3"><div class="flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs"><button type="button">Transform & Crop</button> <button type="button">Adjustments</button> <button type="button">Annotations</button> <button type="button">Depth Mask</button> <button type="button"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path></svg> AI Tools</button></div> <div class="flex items-center gap-2 text-xs"><button type="button" class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800" title="Undo">\u21A9</button> <button type="button" class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800" title="Redo">\u21AA</button> <button type="button" class="px-2 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-400 hover:text-slate-200 hover:bg-slate-800">Reset</button> <div class="h-4 w-px bg-slate-800 mx-1"></div> <button type="button" class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800" title="Zoom Out">-</button> <span class="font-mono text-slate-400 w-10 text-center"> </span> <button type="button" class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800" title="Zoom In">+</button> <div class="h-4 w-px bg-slate-800 mx-1"></div> <button type="button" class="px-2.5 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-amber-400 hover:bg-slate-800 select-none active:bg-amber-950/40">Hold Compare</button> <button type="button" class="px-4 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium shadow-md shadow-emerald-900/30 transition-colors">Export Image</button></div></div> <div class="flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]"><div class="relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none"><canvas class="absolute inset-0 w-full h-full block"></canvas></div> <div class="w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]"><!> <!> <!> <!> <!></div></div></div>`);
|
|
165
|
+
function ImageEditor($$anchor, $$props) {
|
|
166
|
+
$2.push($$props, true);
|
|
167
|
+
let src = $2.prop($$props, "src", 3, ""), className = $2.prop($$props, "class", 3, ""), style = $2.prop($$props, "style", 3, "");
|
|
168
|
+
const internalEditor = createReactiveImageEditor();
|
|
169
|
+
const editor = $2.derived(() => $$props.editor || internalEditor);
|
|
170
|
+
let canvasEl = $2.state(null);
|
|
171
|
+
let containerEl = $2.state(null);
|
|
172
|
+
let activeTab = $2.state("crop");
|
|
173
|
+
let activeCropRatio = $2.state(null);
|
|
174
|
+
let inpaintPrompt = $2.state("");
|
|
175
|
+
let inpaintMaskMode = $2.state("annotations");
|
|
176
|
+
let isRemovingBg = $2.state(false);
|
|
177
|
+
let isInpainting = $2.state(false);
|
|
178
|
+
let aiError = $2.state(null);
|
|
179
|
+
let aiSuccess = $2.state(null);
|
|
180
|
+
const effectiveOnInpaint = $2.derived(() => $$props.onInpaint || $$props.aiHooks?.onInpaint);
|
|
181
|
+
const effectiveOnRemoveBg = $2.derived(() => $$props.onRemoveBackground || $$props.aiHooks?.onRemoveBackground);
|
|
182
|
+
async function handleRemoveBackground() {
|
|
183
|
+
if (!$2.get(effectiveOnRemoveBg)) {
|
|
184
|
+
$2.set(aiError, "No background removal hook is configured.");
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
$2.set(aiError, null);
|
|
188
|
+
$2.set(aiSuccess, null);
|
|
189
|
+
$2.set(isRemovingBg, true);
|
|
190
|
+
try {
|
|
191
|
+
const imageDataUrl = await $2.get(editor).toDataURL($$props.exportOptions);
|
|
192
|
+
const result = await $2.get(effectiveOnRemoveBg)({ imageDataUrl });
|
|
193
|
+
if (typeof result === "string") {
|
|
194
|
+
await $2.get(editor).applyBackgroundRemovedImage(result);
|
|
195
|
+
$2.set(aiSuccess, "Background removed successfully!");
|
|
196
|
+
} else {
|
|
197
|
+
$2.set(aiSuccess, "Background removal complete.");
|
|
198
|
+
}
|
|
199
|
+
} catch (err) {
|
|
200
|
+
$2.set(aiError, err?.message || "Failed to remove background.", true);
|
|
201
|
+
} finally {
|
|
202
|
+
$2.set(isRemovingBg, false);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
async function handleInpaint() {
|
|
206
|
+
if (!$2.get(effectiveOnInpaint)) {
|
|
207
|
+
$2.set(aiError, "No inpainting hook is configured.");
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
210
|
+
if (!$2.get(inpaintPrompt).trim()) {
|
|
211
|
+
$2.set(aiError, "Please enter an inpainting prompt.");
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
$2.set(aiError, null);
|
|
215
|
+
$2.set(aiSuccess, null);
|
|
216
|
+
$2.set(isInpainting, true);
|
|
217
|
+
try {
|
|
218
|
+
const imageDataUrl = await $2.get(editor).toDataURL($$props.exportOptions);
|
|
219
|
+
const maskDataUrl = await $2.get(editor).toMaskDataURL({
|
|
220
|
+
useAnnotations: $2.get(inpaintMaskMode) === "annotations",
|
|
221
|
+
useCrop: $2.get(inpaintMaskMode) === "crop"
|
|
222
|
+
});
|
|
223
|
+
const result = await $2.get(effectiveOnInpaint)({
|
|
224
|
+
prompt: $2.get(inpaintPrompt).trim(),
|
|
225
|
+
imageDataUrl,
|
|
226
|
+
maskDataUrl,
|
|
227
|
+
cropBox: $2.get(inpaintMaskMode) === "crop" ? $2.get(editor).state.crop : null
|
|
228
|
+
});
|
|
229
|
+
if (typeof result === "string") {
|
|
230
|
+
await $2.get(editor).applyInpaintedImage(result);
|
|
231
|
+
$2.set(aiSuccess, "Inpainting applied successfully!");
|
|
232
|
+
} else {
|
|
233
|
+
$2.set(aiSuccess, "Inpainting complete.");
|
|
234
|
+
}
|
|
235
|
+
} catch (err) {
|
|
236
|
+
$2.set(aiError, err?.message || "Failed to apply inpainting.", true);
|
|
237
|
+
} finally {
|
|
238
|
+
$2.set(isInpainting, false);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
let activeColor = $2.state("#ef4444");
|
|
242
|
+
let strokeWidth = $2.state(3);
|
|
243
|
+
let fontSize = $2.state(24);
|
|
244
|
+
let textInput = $2.state("");
|
|
245
|
+
let draftAnnotation = $2.state(null);
|
|
246
|
+
let draftCrop = $2.state(null);
|
|
247
|
+
let cropDragInfo = null;
|
|
248
|
+
let annotationDragInfo = null;
|
|
249
|
+
let isDrawing = false;
|
|
250
|
+
let currentPath = [];
|
|
251
|
+
let dragStartPoint = null;
|
|
252
|
+
$2.user_effect(() => {
|
|
253
|
+
if (src() && src() !== $2.get(editor).state.sourceUrl) {
|
|
254
|
+
$2.get(editor).loadImage(src());
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
|
+
async function renderCanvas(overrideAnnotation, overrideCrop) {
|
|
258
|
+
if (!$2.get(canvasEl) || !$2.get(containerEl)) return;
|
|
259
|
+
const vpWidth = $2.get(containerEl).clientWidth || 800;
|
|
260
|
+
const vpHeight = $2.get(containerEl).clientHeight || 500;
|
|
261
|
+
await $2.get(editor).controller.render($2.get(canvasEl), {
|
|
262
|
+
viewportWidth: vpWidth,
|
|
263
|
+
viewportHeight: vpHeight,
|
|
264
|
+
showCropOverlay: $2.get(activeTab) === "crop",
|
|
265
|
+
showSelectionOverlay: true,
|
|
266
|
+
interactive: true,
|
|
267
|
+
draftAnnotation: overrideAnnotation !== void 0 ? overrideAnnotation : $2.get(draftAnnotation),
|
|
268
|
+
draftCrop: overrideCrop !== void 0 ? overrideCrop : $2.get(draftCrop)
|
|
269
|
+
});
|
|
270
|
+
}
|
|
271
|
+
$2.user_effect(() => {
|
|
272
|
+
void $2.get(editor).state;
|
|
273
|
+
void $2.get(activeTab);
|
|
274
|
+
const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
|
|
275
|
+
const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
|
|
276
|
+
const animId = raf(() => {
|
|
277
|
+
renderCanvas();
|
|
278
|
+
});
|
|
279
|
+
return () => caf(animId);
|
|
280
|
+
});
|
|
281
|
+
$2.user_effect(() => {
|
|
282
|
+
if ($2.get(activeTab) === "crop" && $2.get(editor).state.activeTool !== "crop") {
|
|
283
|
+
$2.get(editor).setTool("crop");
|
|
284
|
+
}
|
|
285
|
+
});
|
|
286
|
+
$2.user_effect(() => {
|
|
287
|
+
if (!$2.get(containerEl)) return;
|
|
288
|
+
if (typeof ResizeObserver !== "undefined") {
|
|
289
|
+
const observer = new ResizeObserver(() => {
|
|
290
|
+
renderCanvas();
|
|
291
|
+
});
|
|
292
|
+
observer.observe($2.get(containerEl));
|
|
293
|
+
return () => observer.disconnect();
|
|
294
|
+
} else {
|
|
295
|
+
const handleResize = () => renderCanvas();
|
|
296
|
+
window.addEventListener("resize", handleResize);
|
|
297
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
298
|
+
}
|
|
299
|
+
});
|
|
300
|
+
function getCanvasEventPoint(e) {
|
|
301
|
+
if (!$2.get(canvasEl)) return { x: 0, y: 0 };
|
|
302
|
+
const rect = $2.get(canvasEl).getBoundingClientRect();
|
|
303
|
+
const scaleX = rect.width > 0 ? $2.get(canvasEl).width / rect.width : 1;
|
|
304
|
+
const scaleY = rect.height > 0 ? $2.get(canvasEl).height / rect.height : 1;
|
|
305
|
+
return {
|
|
306
|
+
x: (e.clientX - rect.left) * scaleX,
|
|
307
|
+
y: (e.clientY - rect.top) * scaleY
|
|
308
|
+
};
|
|
309
|
+
}
|
|
310
|
+
function handleMouseDown(e) {
|
|
311
|
+
if (!$2.get(canvasEl)) return;
|
|
312
|
+
const canvasPt = getCanvasEventPoint(e);
|
|
313
|
+
if ($2.get(activeTab) === "crop") {
|
|
314
|
+
const activeCrop = $2.get(draftCrop) || $2.get(editor).state.crop || {
|
|
315
|
+
x: 0,
|
|
316
|
+
y: 0,
|
|
317
|
+
width: $2.get(editor).state.imageDimensions.width,
|
|
318
|
+
height: $2.get(editor).state.imageDimensions.height
|
|
319
|
+
};
|
|
320
|
+
const handle = hitTestCrop(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, 14, activeCrop);
|
|
321
|
+
const startImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, true);
|
|
322
|
+
if (handle) {
|
|
323
|
+
cropDragInfo = {
|
|
324
|
+
handle,
|
|
325
|
+
startCanvasPt: canvasPt,
|
|
326
|
+
startImgPt,
|
|
327
|
+
startCrop: activeCrop
|
|
328
|
+
};
|
|
329
|
+
} else {
|
|
330
|
+
cropDragInfo = {
|
|
331
|
+
handle: "new",
|
|
332
|
+
startCanvasPt: canvasPt,
|
|
333
|
+
startImgPt,
|
|
334
|
+
startCrop: { x: startImgPt.x, y: startImgPt.y, width: 0, height: 0 }
|
|
335
|
+
};
|
|
336
|
+
}
|
|
337
|
+
return;
|
|
338
|
+
}
|
|
339
|
+
if ($2.get(activeTab) === "annotate") {
|
|
340
|
+
const imgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
|
|
341
|
+
dragStartPoint = imgPt;
|
|
342
|
+
if ($2.get(editor).state.activeTool === "select") {
|
|
343
|
+
for (let i = $2.get(editor).state.annotations.length - 1; i >= 0; i--) {
|
|
344
|
+
const ann = $2.get(editor).state.annotations[i];
|
|
345
|
+
if (hitTestAnnotation(imgPt, ann)) {
|
|
346
|
+
$2.get(editor).selectAnnotation(ann.id);
|
|
347
|
+
annotationDragInfo = { annId: ann.id, startImgPt: imgPt, initialAnn: { ...ann } };
|
|
348
|
+
return;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
$2.get(editor).selectAnnotation(null);
|
|
352
|
+
return;
|
|
353
|
+
}
|
|
354
|
+
if ($2.get(editor).state.activeTool === "pen") {
|
|
355
|
+
isDrawing = true;
|
|
356
|
+
currentPath = [imgPt];
|
|
357
|
+
const draft = {
|
|
358
|
+
id: "draft",
|
|
359
|
+
type: "pen",
|
|
360
|
+
x: 0,
|
|
361
|
+
y: 0,
|
|
362
|
+
points: [imgPt],
|
|
363
|
+
strokeColor: $2.get(activeColor),
|
|
364
|
+
strokeWidth: $2.get(strokeWidth)
|
|
365
|
+
};
|
|
366
|
+
$2.set(draftAnnotation, draft, true);
|
|
367
|
+
renderCanvas(draft);
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
function handleMouseMove(e) {
|
|
372
|
+
if (!$2.get(canvasEl)) return;
|
|
373
|
+
const canvasPt = getCanvasEventPoint(e);
|
|
374
|
+
if ($2.get(activeTab) === "crop") {
|
|
375
|
+
if (cropDragInfo) {
|
|
376
|
+
const currentImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, true);
|
|
377
|
+
let newCrop;
|
|
378
|
+
if (cropDragInfo.handle === "new") {
|
|
379
|
+
const minX = Math.max(0, Math.min(cropDragInfo.startImgPt.x, currentImgPt.x));
|
|
380
|
+
const minY = Math.max(0, Math.min(cropDragInfo.startImgPt.y, currentImgPt.y));
|
|
381
|
+
const maxX = Math.min($2.get(editor).state.imageDimensions.width, Math.max(cropDragInfo.startImgPt.x, currentImgPt.x));
|
|
382
|
+
const maxY = Math.min($2.get(editor).state.imageDimensions.height, Math.max(cropDragInfo.startImgPt.y, currentImgPt.y));
|
|
383
|
+
newCrop = {
|
|
384
|
+
x: Math.round(minX),
|
|
385
|
+
y: Math.round(minY),
|
|
386
|
+
width: Math.round(Math.max(20, maxX - minX)),
|
|
387
|
+
height: Math.round(Math.max(20, maxY - minY))
|
|
388
|
+
};
|
|
389
|
+
} else {
|
|
390
|
+
newCrop = calculateCropDrag(cropDragInfo.startCrop, cropDragInfo.handle, cropDragInfo.startImgPt, currentImgPt, $2.get(editor).state.imageDimensions.width, $2.get(editor).state.imageDimensions.height, $2.get(activeCropRatio));
|
|
391
|
+
}
|
|
392
|
+
$2.set(draftCrop, newCrop, true);
|
|
393
|
+
renderCanvas(null, newCrop);
|
|
394
|
+
} else {
|
|
395
|
+
const activeCrop = $2.get(draftCrop) || $2.get(editor).state.crop || {
|
|
396
|
+
x: 0,
|
|
397
|
+
y: 0,
|
|
398
|
+
width: $2.get(editor).state.imageDimensions.width,
|
|
399
|
+
height: $2.get(editor).state.imageDimensions.height
|
|
400
|
+
};
|
|
401
|
+
const handle = hitTestCrop(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, 14, activeCrop);
|
|
402
|
+
$2.get(canvasEl).style.cursor = getCropCursor(handle);
|
|
403
|
+
}
|
|
404
|
+
return;
|
|
405
|
+
}
|
|
406
|
+
if ($2.get(activeTab) === "annotate") {
|
|
407
|
+
if (annotationDragInfo) {
|
|
408
|
+
const currentImgPt2 = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
|
|
409
|
+
const dx = currentImgPt2.x - annotationDragInfo.startImgPt.x;
|
|
410
|
+
const dy = currentImgPt2.y - annotationDragInfo.startImgPt.y;
|
|
411
|
+
$2.get(editor).updateAnnotation(annotationDragInfo.annId, {
|
|
412
|
+
x: Math.round(annotationDragInfo.initialAnn.x + dx),
|
|
413
|
+
y: Math.round(annotationDragInfo.initialAnn.y + dy)
|
|
414
|
+
});
|
|
415
|
+
return;
|
|
416
|
+
}
|
|
417
|
+
if (!dragStartPoint) {
|
|
418
|
+
if ($2.get(editor).state.activeTool === "select") {
|
|
419
|
+
const imgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
|
|
420
|
+
let hovered = false;
|
|
421
|
+
for (let i = $2.get(editor).state.annotations.length - 1; i >= 0; i--) {
|
|
422
|
+
if (hitTestAnnotation(imgPt, $2.get(editor).state.annotations[i])) {
|
|
423
|
+
hovered = true;
|
|
424
|
+
break;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
$2.get(canvasEl).style.cursor = hovered ? "move" : "default";
|
|
428
|
+
} else {
|
|
429
|
+
$2.get(canvasEl).style.cursor = "crosshair";
|
|
430
|
+
}
|
|
431
|
+
return;
|
|
432
|
+
}
|
|
433
|
+
const currentImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
|
|
434
|
+
if ($2.get(editor).state.activeTool === "pen" && isDrawing) {
|
|
435
|
+
currentPath.push(currentImgPt);
|
|
436
|
+
const draft = {
|
|
437
|
+
id: "draft",
|
|
438
|
+
type: "pen",
|
|
439
|
+
x: 0,
|
|
440
|
+
y: 0,
|
|
441
|
+
points: [...currentPath],
|
|
442
|
+
strokeColor: $2.get(activeColor),
|
|
443
|
+
strokeWidth: $2.get(strokeWidth)
|
|
444
|
+
};
|
|
445
|
+
$2.set(draftAnnotation, draft, true);
|
|
446
|
+
renderCanvas(draft);
|
|
447
|
+
} else if ($2.get(editor).state.activeTool === "rect") {
|
|
448
|
+
const w = currentImgPt.x - dragStartPoint.x;
|
|
449
|
+
const h = currentImgPt.y - dragStartPoint.y;
|
|
450
|
+
const draft = {
|
|
451
|
+
id: "draft",
|
|
452
|
+
type: "rect",
|
|
453
|
+
x: Math.min(dragStartPoint.x, currentImgPt.x),
|
|
454
|
+
y: Math.min(dragStartPoint.y, currentImgPt.y),
|
|
455
|
+
width: Math.abs(w),
|
|
456
|
+
height: Math.abs(h),
|
|
457
|
+
strokeColor: $2.get(activeColor),
|
|
458
|
+
strokeWidth: $2.get(strokeWidth)
|
|
459
|
+
};
|
|
460
|
+
$2.set(draftAnnotation, draft, true);
|
|
461
|
+
renderCanvas(draft);
|
|
462
|
+
} else if ($2.get(editor).state.activeTool === "circle") {
|
|
463
|
+
const rx = Math.abs(currentImgPt.x - dragStartPoint.x) / 2;
|
|
464
|
+
const ry = Math.abs(currentImgPt.y - dragStartPoint.y) / 2;
|
|
465
|
+
const draft = {
|
|
466
|
+
id: "draft",
|
|
467
|
+
type: "circle",
|
|
468
|
+
x: Math.min(dragStartPoint.x, currentImgPt.x) + rx,
|
|
469
|
+
y: Math.min(dragStartPoint.y, currentImgPt.y) + ry,
|
|
470
|
+
radiusX: rx,
|
|
471
|
+
radiusY: ry,
|
|
472
|
+
strokeColor: $2.get(activeColor),
|
|
473
|
+
strokeWidth: $2.get(strokeWidth)
|
|
474
|
+
};
|
|
475
|
+
$2.set(draftAnnotation, draft, true);
|
|
476
|
+
renderCanvas(draft);
|
|
477
|
+
} else if ($2.get(editor).state.activeTool === "arrow") {
|
|
478
|
+
const draft = {
|
|
479
|
+
id: "draft",
|
|
480
|
+
type: "arrow",
|
|
481
|
+
x: dragStartPoint.x,
|
|
482
|
+
y: dragStartPoint.y,
|
|
483
|
+
endX: currentImgPt.x,
|
|
484
|
+
endY: currentImgPt.y,
|
|
485
|
+
strokeColor: $2.get(activeColor),
|
|
486
|
+
strokeWidth: $2.get(strokeWidth)
|
|
487
|
+
};
|
|
488
|
+
$2.set(draftAnnotation, draft, true);
|
|
489
|
+
renderCanvas(draft);
|
|
490
|
+
} else if ($2.get(editor).state.activeTool === "line") {
|
|
491
|
+
const draft = {
|
|
492
|
+
id: "draft",
|
|
493
|
+
type: "line",
|
|
494
|
+
x: dragStartPoint.x,
|
|
495
|
+
y: dragStartPoint.y,
|
|
496
|
+
endX: currentImgPt.x,
|
|
497
|
+
endY: currentImgPt.y,
|
|
498
|
+
strokeColor: $2.get(activeColor),
|
|
499
|
+
strokeWidth: $2.get(strokeWidth)
|
|
500
|
+
};
|
|
501
|
+
$2.set(draftAnnotation, draft, true);
|
|
502
|
+
renderCanvas(draft);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
function handleMouseUp(e) {
|
|
507
|
+
if (!$2.get(canvasEl)) return;
|
|
508
|
+
const canvasPt = getCanvasEventPoint(e);
|
|
509
|
+
if ($2.get(activeTab) === "crop") {
|
|
510
|
+
if (cropDragInfo) {
|
|
511
|
+
if ($2.get(draftCrop) && $2.get(draftCrop).width >= 20 && $2.get(draftCrop).height >= 20) {
|
|
512
|
+
$2.get(editor).setCrop($2.get(draftCrop), true);
|
|
513
|
+
}
|
|
514
|
+
cropDragInfo = null;
|
|
515
|
+
$2.set(draftCrop, null);
|
|
516
|
+
renderCanvas();
|
|
517
|
+
}
|
|
518
|
+
return;
|
|
519
|
+
}
|
|
520
|
+
if ($2.get(activeTab) === "annotate") {
|
|
521
|
+
if (annotationDragInfo) {
|
|
522
|
+
annotationDragInfo = null;
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
525
|
+
if (dragStartPoint) {
|
|
526
|
+
const currentImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
|
|
527
|
+
if ($2.get(editor).state.activeTool === "pen" && isDrawing) {
|
|
528
|
+
if (currentPath.length > 1) {
|
|
529
|
+
$2.get(editor).addAnnotation({
|
|
530
|
+
type: "pen",
|
|
531
|
+
x: 0,
|
|
532
|
+
y: 0,
|
|
533
|
+
points: [...currentPath],
|
|
534
|
+
strokeColor: $2.get(activeColor),
|
|
535
|
+
strokeWidth: $2.get(strokeWidth)
|
|
536
|
+
});
|
|
537
|
+
}
|
|
538
|
+
isDrawing = false;
|
|
539
|
+
currentPath = [];
|
|
540
|
+
} else if ($2.get(editor).state.activeTool === "rect") {
|
|
541
|
+
const w = Math.abs(currentImgPt.x - dragStartPoint.x);
|
|
542
|
+
const h = Math.abs(currentImgPt.y - dragStartPoint.y);
|
|
543
|
+
if (w > 4 && h > 4) {
|
|
544
|
+
$2.get(editor).addAnnotation({
|
|
545
|
+
type: "rect",
|
|
546
|
+
x: Math.min(dragStartPoint.x, currentImgPt.x),
|
|
547
|
+
y: Math.min(dragStartPoint.y, currentImgPt.y),
|
|
548
|
+
width: w,
|
|
549
|
+
height: h,
|
|
550
|
+
strokeColor: $2.get(activeColor),
|
|
551
|
+
strokeWidth: $2.get(strokeWidth)
|
|
552
|
+
});
|
|
553
|
+
}
|
|
554
|
+
} else if ($2.get(editor).state.activeTool === "circle") {
|
|
555
|
+
const rx = Math.abs(currentImgPt.x - dragStartPoint.x) / 2;
|
|
556
|
+
const ry = Math.abs(currentImgPt.y - dragStartPoint.y) / 2;
|
|
557
|
+
if (rx > 4 && ry > 4) {
|
|
558
|
+
$2.get(editor).addAnnotation({
|
|
559
|
+
type: "circle",
|
|
560
|
+
x: Math.min(dragStartPoint.x, currentImgPt.x) + rx,
|
|
561
|
+
y: Math.min(dragStartPoint.y, currentImgPt.y) + ry,
|
|
562
|
+
radiusX: rx,
|
|
563
|
+
radiusY: ry,
|
|
564
|
+
strokeColor: $2.get(activeColor),
|
|
565
|
+
strokeWidth: $2.get(strokeWidth)
|
|
566
|
+
});
|
|
567
|
+
}
|
|
568
|
+
} else if ($2.get(editor).state.activeTool === "arrow") {
|
|
569
|
+
if (Math.hypot(currentImgPt.x - dragStartPoint.x, currentImgPt.y - dragStartPoint.y) > 4) {
|
|
570
|
+
$2.get(editor).addAnnotation({
|
|
571
|
+
type: "arrow",
|
|
572
|
+
x: dragStartPoint.x,
|
|
573
|
+
y: dragStartPoint.y,
|
|
574
|
+
endX: currentImgPt.x,
|
|
575
|
+
endY: currentImgPt.y,
|
|
576
|
+
strokeColor: $2.get(activeColor),
|
|
577
|
+
strokeWidth: $2.get(strokeWidth)
|
|
578
|
+
});
|
|
579
|
+
}
|
|
580
|
+
} else if ($2.get(editor).state.activeTool === "line") {
|
|
581
|
+
if (Math.hypot(currentImgPt.x - dragStartPoint.x, currentImgPt.y - dragStartPoint.y) > 4) {
|
|
582
|
+
$2.get(editor).addAnnotation({
|
|
583
|
+
type: "line",
|
|
584
|
+
x: dragStartPoint.x,
|
|
585
|
+
y: dragStartPoint.y,
|
|
586
|
+
endX: currentImgPt.x,
|
|
587
|
+
endY: currentImgPt.y,
|
|
588
|
+
strokeColor: $2.get(activeColor),
|
|
589
|
+
strokeWidth: $2.get(strokeWidth)
|
|
590
|
+
});
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
$2.set(draftAnnotation, null);
|
|
594
|
+
dragStartPoint = null;
|
|
595
|
+
renderCanvas();
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
function handleAddText() {
|
|
600
|
+
if (!$2.get(textInput).trim()) return;
|
|
601
|
+
$2.get(editor).addAnnotation({
|
|
602
|
+
type: "text",
|
|
603
|
+
x: 50,
|
|
604
|
+
y: 50,
|
|
605
|
+
text: $2.get(textInput).trim(),
|
|
606
|
+
fontSize: $2.get(fontSize),
|
|
607
|
+
color: $2.get(activeColor)
|
|
608
|
+
});
|
|
609
|
+
$2.set(textInput, "");
|
|
610
|
+
}
|
|
611
|
+
async function handleExport() {
|
|
612
|
+
const dataUrl = await $2.get(editor).toDataURL($$props.exportOptions);
|
|
613
|
+
if ($$props.onSave) {
|
|
614
|
+
$$props.onSave(dataUrl);
|
|
615
|
+
} else {
|
|
616
|
+
const link = document.createElement("a");
|
|
617
|
+
link.download = `edited-image-${Date.now()}.png`;
|
|
618
|
+
link.href = dataUrl;
|
|
619
|
+
link.click();
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
var div = root_17();
|
|
623
|
+
var div_1 = $2.child(div);
|
|
624
|
+
var div_2 = $2.child(div_1);
|
|
625
|
+
var button = $2.child(div_2);
|
|
626
|
+
var button_1 = $2.sibling(button, 2);
|
|
627
|
+
var button_2 = $2.sibling(button_1, 2);
|
|
628
|
+
var button_3 = $2.sibling(button_2, 2);
|
|
629
|
+
var button_4 = $2.sibling(button_3, 2);
|
|
630
|
+
$2.reset(div_2);
|
|
631
|
+
var div_3 = $2.sibling(div_2, 2);
|
|
632
|
+
var button_5 = $2.child(div_3);
|
|
633
|
+
var button_6 = $2.sibling(button_5, 2);
|
|
634
|
+
var button_7 = $2.sibling(button_6, 2);
|
|
635
|
+
var button_8 = $2.sibling(button_7, 4);
|
|
636
|
+
var span = $2.sibling(button_8, 2);
|
|
637
|
+
var text = $2.only_child(span);
|
|
638
|
+
var button_9 = $2.sibling(span, 2);
|
|
639
|
+
var button_10 = $2.sibling(button_9, 4);
|
|
640
|
+
var button_11 = $2.sibling(button_10, 2);
|
|
641
|
+
$2.reset(div_3);
|
|
642
|
+
$2.reset(div_1);
|
|
643
|
+
var div_4 = $2.sibling(div_1, 2);
|
|
644
|
+
var div_5 = $2.child(div_4);
|
|
645
|
+
var canvas = $2.child(div_5);
|
|
646
|
+
$2.bind_this(canvas, ($$value) => $2.set(canvasEl, $$value), () => $2.get(canvasEl));
|
|
647
|
+
$2.reset(div_5);
|
|
648
|
+
$2.bind_this(div_5, ($$value) => $2.set(containerEl, $$value), () => $2.get(containerEl));
|
|
649
|
+
var div_6 = $2.sibling(div_5, 2);
|
|
650
|
+
var node = $2.child(div_6);
|
|
651
|
+
{
|
|
652
|
+
var consequent = ($$anchor2) => {
|
|
653
|
+
var div_7 = root();
|
|
654
|
+
var div_8 = $2.sibling($2.child(div_7), 2);
|
|
655
|
+
var button_12 = $2.child(div_8);
|
|
656
|
+
var button_13 = $2.sibling(button_12, 2);
|
|
657
|
+
var button_14 = $2.sibling(button_13, 2);
|
|
658
|
+
var button_15 = $2.sibling(button_14, 2);
|
|
659
|
+
var button_16 = $2.sibling(button_15, 2);
|
|
660
|
+
var button_17 = $2.sibling(button_16, 2);
|
|
661
|
+
$2.reset(div_8);
|
|
662
|
+
var div_9 = $2.sibling(div_8, 6);
|
|
663
|
+
var button_18 = $2.child(div_9);
|
|
664
|
+
var button_19 = $2.sibling(button_18, 2);
|
|
665
|
+
var button_20 = $2.sibling(button_19, 2);
|
|
666
|
+
var button_21 = $2.sibling(button_20, 2);
|
|
667
|
+
$2.reset(div_9);
|
|
668
|
+
$2.reset(div_7);
|
|
669
|
+
$2.template_effect(() => {
|
|
670
|
+
$2.set_class(button_12, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === null && $2.get(editor).state.crop ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
|
|
671
|
+
$2.set_class(button_13, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 1 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
|
|
672
|
+
$2.set_class(button_14, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 4 / 3 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
|
|
673
|
+
$2.set_class(button_15, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 16 / 9 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
|
|
674
|
+
$2.set_class(button_16, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 3 / 2 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
|
|
675
|
+
$2.set_class(button_20, 1, `px-3 py-2 rounded-lg border transition-colors ${$2.get(editor).state.transform.flipH ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700"}`);
|
|
676
|
+
$2.set_class(button_21, 1, `px-3 py-2 rounded-lg border transition-colors ${$2.get(editor).state.transform.flipV ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700"}`);
|
|
677
|
+
});
|
|
678
|
+
$2.delegated("click", button_12, () => {
|
|
679
|
+
$2.set(activeCropRatio, null);
|
|
680
|
+
$2.get(editor).applyCropPreset(null);
|
|
681
|
+
});
|
|
682
|
+
$2.delegated("click", button_13, () => {
|
|
683
|
+
$2.set(activeCropRatio, 1);
|
|
684
|
+
$2.get(editor).applyCropPreset(1);
|
|
685
|
+
});
|
|
686
|
+
$2.delegated("click", button_14, () => {
|
|
687
|
+
$2.set(activeCropRatio, 4 / 3);
|
|
688
|
+
$2.get(editor).applyCropPreset(4 / 3);
|
|
689
|
+
});
|
|
690
|
+
$2.delegated("click", button_15, () => {
|
|
691
|
+
$2.set(activeCropRatio, 16 / 9);
|
|
692
|
+
$2.get(editor).applyCropPreset(16 / 9);
|
|
693
|
+
});
|
|
694
|
+
$2.delegated("click", button_16, () => {
|
|
695
|
+
$2.set(activeCropRatio, 3 / 2);
|
|
696
|
+
$2.get(editor).applyCropPreset(3 / 2);
|
|
697
|
+
});
|
|
698
|
+
$2.delegated("click", button_17, () => {
|
|
699
|
+
$2.set(activeCropRatio, null);
|
|
700
|
+
$2.get(editor).resetCrop();
|
|
701
|
+
});
|
|
702
|
+
$2.delegated("click", button_18, () => $2.get(editor).rotate(-90));
|
|
703
|
+
$2.delegated("click", button_19, () => $2.get(editor).rotate(90));
|
|
704
|
+
$2.delegated("click", button_20, () => $2.get(editor).flipHorizontal());
|
|
705
|
+
$2.delegated("click", button_21, () => $2.get(editor).flipVertical());
|
|
706
|
+
$2.append($$anchor2, div_7);
|
|
707
|
+
};
|
|
708
|
+
$2.if(node, ($$render) => {
|
|
709
|
+
if ($2.get(activeTab) === "crop") $$render(consequent);
|
|
710
|
+
});
|
|
711
|
+
}
|
|
712
|
+
var node_1 = $2.sibling(node, 2);
|
|
713
|
+
{
|
|
714
|
+
var consequent_1 = ($$anchor2) => {
|
|
715
|
+
var div_10 = root_1();
|
|
716
|
+
var div_11 = $2.child(div_10);
|
|
717
|
+
var button_22 = $2.sibling($2.child(div_11), 2);
|
|
718
|
+
$2.reset(div_11);
|
|
719
|
+
var div_12 = $2.sibling(div_11, 2);
|
|
720
|
+
var div_13 = $2.child(div_12);
|
|
721
|
+
var span_1 = $2.sibling($2.child(div_13), 2);
|
|
722
|
+
var text_1 = $2.only_child(span_1, true);
|
|
723
|
+
$2.reset(div_13);
|
|
724
|
+
var input = $2.sibling(div_13, 2);
|
|
725
|
+
$2.remove_input_defaults(input);
|
|
726
|
+
$2.reset(div_12);
|
|
727
|
+
var div_14 = $2.sibling(div_12, 2);
|
|
728
|
+
var div_15 = $2.child(div_14);
|
|
729
|
+
var span_2 = $2.sibling($2.child(div_15), 2);
|
|
730
|
+
var text_2 = $2.only_child(span_2, true);
|
|
731
|
+
$2.reset(div_15);
|
|
732
|
+
var input_1 = $2.sibling(div_15, 2);
|
|
733
|
+
$2.remove_input_defaults(input_1);
|
|
734
|
+
$2.reset(div_14);
|
|
735
|
+
var div_16 = $2.sibling(div_14, 2);
|
|
736
|
+
var div_17 = $2.child(div_16);
|
|
737
|
+
var span_3 = $2.sibling($2.child(div_17), 2);
|
|
738
|
+
var text_3 = $2.only_child(span_3, true);
|
|
739
|
+
$2.reset(div_17);
|
|
740
|
+
var input_2 = $2.sibling(div_17, 2);
|
|
741
|
+
$2.remove_input_defaults(input_2);
|
|
742
|
+
$2.reset(div_16);
|
|
743
|
+
var div_18 = $2.sibling(div_16, 2);
|
|
744
|
+
var div_19 = $2.child(div_18);
|
|
745
|
+
var span_4 = $2.sibling($2.child(div_19), 2);
|
|
746
|
+
var text_4 = $2.only_child(span_4, true);
|
|
747
|
+
$2.reset(div_19);
|
|
748
|
+
var input_3 = $2.sibling(div_19, 2);
|
|
749
|
+
$2.remove_input_defaults(input_3);
|
|
750
|
+
$2.reset(div_18);
|
|
751
|
+
var div_20 = $2.sibling(div_18, 2);
|
|
752
|
+
var div_21 = $2.child(div_20);
|
|
753
|
+
var span_5 = $2.sibling($2.child(div_21), 2);
|
|
754
|
+
var text_5 = $2.only_child(span_5, true);
|
|
755
|
+
$2.reset(div_21);
|
|
756
|
+
var input_4 = $2.sibling(div_21, 2);
|
|
757
|
+
$2.remove_input_defaults(input_4);
|
|
758
|
+
$2.reset(div_20);
|
|
759
|
+
var div_22 = $2.sibling(div_20, 2);
|
|
760
|
+
var div_23 = $2.child(div_22);
|
|
761
|
+
var span_6 = $2.sibling($2.child(div_23), 2);
|
|
762
|
+
var text_6 = $2.only_child(span_6);
|
|
763
|
+
$2.reset(div_23);
|
|
764
|
+
var input_5 = $2.sibling(div_23, 2);
|
|
765
|
+
$2.remove_input_defaults(input_5);
|
|
766
|
+
$2.reset(div_22);
|
|
767
|
+
var div_24 = $2.sibling(div_22, 2);
|
|
768
|
+
var div_25 = $2.child(div_24);
|
|
769
|
+
var span_7 = $2.sibling($2.child(div_25), 2);
|
|
770
|
+
var text_7 = $2.only_child(span_7);
|
|
771
|
+
$2.reset(div_25);
|
|
772
|
+
var input_6 = $2.sibling(div_25, 2);
|
|
773
|
+
$2.remove_input_defaults(input_6);
|
|
774
|
+
$2.reset(div_24);
|
|
775
|
+
$2.reset(div_10);
|
|
776
|
+
$2.template_effect(
|
|
777
|
+
($0) => {
|
|
778
|
+
$2.set_text(text_1, $2.get(editor).state.adjustments.brightness);
|
|
779
|
+
$2.set_value(input, $2.get(editor).state.adjustments.brightness);
|
|
780
|
+
$2.set_text(text_2, $2.get(editor).state.adjustments.contrast);
|
|
781
|
+
$2.set_value(input_1, $2.get(editor).state.adjustments.contrast);
|
|
782
|
+
$2.set_text(text_3, $2.get(editor).state.adjustments.saturation);
|
|
783
|
+
$2.set_value(input_2, $2.get(editor).state.adjustments.saturation);
|
|
784
|
+
$2.set_text(text_4, $2.get(editor).state.adjustments.exposure);
|
|
785
|
+
$2.set_value(input_3, $2.get(editor).state.adjustments.exposure);
|
|
786
|
+
$2.set_text(text_5, $2.get(editor).state.adjustments.temperature);
|
|
787
|
+
$2.set_value(input_4, $2.get(editor).state.adjustments.temperature);
|
|
788
|
+
$2.set_text(text_6, `${$2.get(editor).state.adjustments.blur ?? ""}px`);
|
|
789
|
+
$2.set_value(input_5, $2.get(editor).state.adjustments.blur);
|
|
790
|
+
$2.set_text(text_7, `${$0 ?? ""}%`);
|
|
791
|
+
$2.set_value(input_6, $2.get(editor).state.adjustments.opacity);
|
|
792
|
+
},
|
|
793
|
+
[
|
|
794
|
+
() => Math.round($2.get(editor).state.adjustments.opacity * 100)
|
|
795
|
+
]
|
|
796
|
+
);
|
|
797
|
+
$2.delegated("click", button_22, () => $2.get(editor).resetAdjustments());
|
|
798
|
+
$2.delegated("input", input, (e) => $2.get(editor).setAdjustments({ brightness: Number(e.target.value) }));
|
|
799
|
+
$2.delegated("input", input_1, (e) => $2.get(editor).setAdjustments({ contrast: Number(e.target.value) }));
|
|
800
|
+
$2.delegated("input", input_2, (e) => $2.get(editor).setAdjustments({ saturation: Number(e.target.value) }));
|
|
801
|
+
$2.delegated("input", input_3, (e) => $2.get(editor).setAdjustments({ exposure: Number(e.target.value) }));
|
|
802
|
+
$2.delegated("input", input_4, (e) => $2.get(editor).setAdjustments({ temperature: Number(e.target.value) }));
|
|
803
|
+
$2.delegated("input", input_5, (e) => $2.get(editor).setAdjustments({ blur: Number(e.target.value) }));
|
|
804
|
+
$2.delegated("input", input_6, (e) => $2.get(editor).setAdjustments({ opacity: Number(e.target.value) }));
|
|
805
|
+
$2.append($$anchor2, div_10);
|
|
806
|
+
};
|
|
807
|
+
$2.if(node_1, ($$render) => {
|
|
808
|
+
if ($2.get(activeTab) === "adjust") $$render(consequent_1);
|
|
809
|
+
});
|
|
810
|
+
}
|
|
811
|
+
var node_2 = $2.sibling(node_1, 2);
|
|
812
|
+
{
|
|
813
|
+
var consequent_4 = ($$anchor2) => {
|
|
814
|
+
var div_26 = root_5();
|
|
815
|
+
var div_27 = $2.sibling($2.child(div_26), 2);
|
|
816
|
+
$2.each(div_27, 20, () => ["pen", "rect", "circle", "arrow", "line"], $2.index, ($$anchor3, t) => {
|
|
817
|
+
var button_23 = root_2();
|
|
818
|
+
var text_8 = $2.only_child(button_23, true);
|
|
819
|
+
$2.template_effect(() => {
|
|
820
|
+
$2.set_class(button_23, 1, `py-1.5 px-2 rounded-lg font-medium capitalize border transition-colors ${$2.get(editor).state.activeTool === t ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"}`);
|
|
821
|
+
$2.set_text(text_8, t);
|
|
822
|
+
});
|
|
823
|
+
$2.delegated("click", button_23, () => $2.get(editor).setTool(t));
|
|
824
|
+
$2.append($$anchor3, button_23);
|
|
825
|
+
});
|
|
826
|
+
$2.reset(div_27);
|
|
827
|
+
var div_28 = $2.sibling(div_27, 2);
|
|
828
|
+
var input_7 = $2.sibling($2.child(div_28), 2);
|
|
829
|
+
$2.remove_input_defaults(input_7);
|
|
830
|
+
var div_29 = $2.sibling(input_7, 2);
|
|
831
|
+
var div_30 = $2.child(div_29);
|
|
832
|
+
var span_8 = $2.sibling($2.child(div_30), 2);
|
|
833
|
+
var text_9 = $2.only_child(span_8);
|
|
834
|
+
$2.reset(div_30);
|
|
835
|
+
var input_8 = $2.sibling(div_30, 2);
|
|
836
|
+
$2.remove_input_defaults(input_8);
|
|
837
|
+
$2.reset(div_29);
|
|
838
|
+
$2.reset(div_28);
|
|
839
|
+
var div_31 = $2.sibling(div_28, 6);
|
|
840
|
+
var input_9 = $2.child(div_31);
|
|
841
|
+
$2.remove_input_defaults(input_9);
|
|
842
|
+
var button_24 = $2.sibling(input_9, 2);
|
|
843
|
+
$2.reset(div_31);
|
|
844
|
+
var div_32 = $2.sibling(div_31, 2);
|
|
845
|
+
var span_9 = $2.sibling($2.child(div_32), 2);
|
|
846
|
+
var text_10 = $2.only_child(span_9);
|
|
847
|
+
$2.reset(div_32);
|
|
848
|
+
var input_10 = $2.sibling(div_32, 2);
|
|
849
|
+
$2.remove_input_defaults(input_10);
|
|
850
|
+
var div_33 = $2.sibling(input_10, 4);
|
|
851
|
+
var span_10 = $2.child(div_33);
|
|
852
|
+
var text_11 = $2.only_child(span_10);
|
|
853
|
+
var node_3 = $2.sibling(span_10, 2);
|
|
854
|
+
{
|
|
855
|
+
var consequent_2 = ($$anchor3) => {
|
|
856
|
+
var button_25 = root_3();
|
|
857
|
+
$2.delegated("click", button_25, () => $2.get(editor).removeAnnotation($2.get(editor).state.selectedAnnotationId));
|
|
858
|
+
$2.append($$anchor3, button_25);
|
|
859
|
+
};
|
|
860
|
+
$2.if(node_3, ($$render) => {
|
|
861
|
+
if ($2.get(editor).state.selectedAnnotationId) $$render(consequent_2);
|
|
862
|
+
});
|
|
863
|
+
}
|
|
864
|
+
var node_4 = $2.sibling(node_3, 2);
|
|
865
|
+
{
|
|
866
|
+
var consequent_3 = ($$anchor3) => {
|
|
867
|
+
var button_26 = root_4();
|
|
868
|
+
$2.delegated("click", button_26, () => $2.get(editor).clearAnnotations());
|
|
869
|
+
$2.append($$anchor3, button_26);
|
|
870
|
+
};
|
|
871
|
+
$2.if(node_4, ($$render) => {
|
|
872
|
+
if ($2.get(editor).state.annotations.length > 0) $$render(consequent_3);
|
|
873
|
+
});
|
|
874
|
+
}
|
|
875
|
+
$2.reset(div_33);
|
|
876
|
+
$2.reset(div_26);
|
|
877
|
+
$2.template_effect(() => {
|
|
878
|
+
$2.set_text(text_9, `${$2.get(strokeWidth) ?? ""}px`);
|
|
879
|
+
$2.set_text(text_10, `${$2.get(fontSize) ?? ""}px`);
|
|
880
|
+
$2.set_text(text_11, `Layers (${$2.get(editor).state.annotations.length ?? ""})`);
|
|
881
|
+
});
|
|
882
|
+
$2.bind_value(input_7, () => $2.get(activeColor), ($$value) => $2.set(activeColor, $$value));
|
|
883
|
+
$2.bind_value(input_8, () => $2.get(strokeWidth), ($$value) => $2.set(strokeWidth, $$value));
|
|
884
|
+
$2.delegated("keydown", input_9, (e) => e.key === "Enter" && handleAddText());
|
|
885
|
+
$2.bind_value(input_9, () => $2.get(textInput), ($$value) => $2.set(textInput, $$value));
|
|
886
|
+
$2.delegated("click", button_24, handleAddText);
|
|
887
|
+
$2.bind_value(input_10, () => $2.get(fontSize), ($$value) => $2.set(fontSize, $$value));
|
|
888
|
+
$2.append($$anchor2, div_26);
|
|
889
|
+
};
|
|
890
|
+
$2.if(node_2, ($$render) => {
|
|
891
|
+
if ($2.get(activeTab) === "annotate") $$render(consequent_4);
|
|
892
|
+
});
|
|
893
|
+
}
|
|
894
|
+
var node_5 = $2.sibling(node_2, 2);
|
|
895
|
+
{
|
|
896
|
+
var consequent_6 = ($$anchor2) => {
|
|
897
|
+
var div_34 = root_7();
|
|
898
|
+
var div_35 = $2.child(div_34);
|
|
899
|
+
var button_27 = $2.sibling($2.child(div_35), 2);
|
|
900
|
+
$2.reset(div_35);
|
|
901
|
+
var label = $2.sibling(div_35, 2);
|
|
902
|
+
var input_11 = $2.child(label);
|
|
903
|
+
$2.remove_input_defaults(input_11);
|
|
904
|
+
$2.next(2);
|
|
905
|
+
$2.reset(label);
|
|
906
|
+
var node_6 = $2.sibling(label, 2);
|
|
907
|
+
{
|
|
908
|
+
var consequent_5 = ($$anchor3) => {
|
|
909
|
+
var fragment = root_6();
|
|
910
|
+
var div_36 = $2.first_child(fragment);
|
|
911
|
+
var input_12 = $2.sibling($2.child(div_36), 2);
|
|
912
|
+
$2.remove_input_defaults(input_12);
|
|
913
|
+
$2.reset(div_36);
|
|
914
|
+
var div_37 = $2.sibling(div_36, 2);
|
|
915
|
+
var button_28 = $2.child(div_37);
|
|
916
|
+
var button_29 = $2.sibling(button_28, 2);
|
|
917
|
+
$2.reset(div_37);
|
|
918
|
+
var div_38 = $2.sibling(div_37, 2);
|
|
919
|
+
var div_39 = $2.child(div_38);
|
|
920
|
+
var span_11 = $2.sibling($2.child(div_39), 2);
|
|
921
|
+
var text_12 = $2.only_child(span_11, true);
|
|
922
|
+
$2.reset(div_39);
|
|
923
|
+
var input_13 = $2.sibling(div_39, 2);
|
|
924
|
+
$2.remove_input_defaults(input_13);
|
|
925
|
+
$2.reset(div_38);
|
|
926
|
+
var div_40 = $2.sibling(div_38, 2);
|
|
927
|
+
var div_41 = $2.child(div_40);
|
|
928
|
+
var span_12 = $2.sibling($2.child(div_41), 2);
|
|
929
|
+
var text_13 = $2.only_child(span_12, true);
|
|
930
|
+
$2.reset(div_41);
|
|
931
|
+
var input_14 = $2.sibling(div_41, 2);
|
|
932
|
+
$2.remove_input_defaults(input_14);
|
|
933
|
+
$2.reset(div_40);
|
|
934
|
+
var div_42 = $2.sibling(div_40, 2);
|
|
935
|
+
var div_43 = $2.child(div_42);
|
|
936
|
+
var span_13 = $2.sibling($2.child(div_43), 2);
|
|
937
|
+
var text_14 = $2.only_child(span_13, true);
|
|
938
|
+
$2.reset(div_43);
|
|
939
|
+
var input_15 = $2.sibling(div_43, 2);
|
|
940
|
+
$2.remove_input_defaults(input_15);
|
|
941
|
+
$2.reset(div_42);
|
|
942
|
+
var label_1 = $2.sibling(div_42, 2);
|
|
943
|
+
var input_16 = $2.child(label_1);
|
|
944
|
+
$2.remove_input_defaults(input_16);
|
|
945
|
+
$2.next(2);
|
|
946
|
+
$2.reset(label_1);
|
|
947
|
+
$2.template_effect(() => {
|
|
948
|
+
$2.set_value(input_12, $2.get(editor).state.depthMask.maskSource || "");
|
|
949
|
+
$2.set_class(button_28, 1, `flex-1 py-1.5 rounded-lg border text-xs font-medium ${$2.get(editor).state.depthMask.mode === "threshold" ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300"}`);
|
|
950
|
+
$2.set_class(button_29, 1, `flex-1 py-1.5 rounded-lg border text-xs font-medium ${$2.get(editor).state.depthMask.mode === "brightness" ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300"}`);
|
|
951
|
+
$2.set_text(text_12, $2.get(editor).state.depthMask.depthRange[0]);
|
|
952
|
+
$2.set_value(input_13, $2.get(editor).state.depthMask.depthRange[0]);
|
|
953
|
+
$2.set_text(text_13, $2.get(editor).state.depthMask.depthRange[1]);
|
|
954
|
+
$2.set_value(input_14, $2.get(editor).state.depthMask.depthRange[1]);
|
|
955
|
+
$2.set_text(text_14, $2.get(editor).state.depthMask.softness);
|
|
956
|
+
$2.set_value(input_15, $2.get(editor).state.depthMask.softness);
|
|
957
|
+
$2.set_checked(input_16, $2.get(editor).state.depthMask.invert);
|
|
958
|
+
});
|
|
959
|
+
$2.delegated("input", input_12, (e) => $2.get(editor).setDepthMask({ maskSource: e.target.value || null }));
|
|
960
|
+
$2.delegated("click", button_28, () => $2.get(editor).setDepthMask({ mode: "threshold" }));
|
|
961
|
+
$2.delegated("click", button_29, () => $2.get(editor).setDepthMask({ mode: "brightness" }));
|
|
962
|
+
$2.delegated("input", input_13, (e) => $2.get(editor).setDepthMask({
|
|
963
|
+
depthRange: [
|
|
964
|
+
Number(e.target.value),
|
|
965
|
+
$2.get(editor).state.depthMask.depthRange[1]
|
|
966
|
+
]
|
|
967
|
+
}));
|
|
968
|
+
$2.delegated("input", input_14, (e) => $2.get(editor).setDepthMask({
|
|
969
|
+
depthRange: [
|
|
970
|
+
$2.get(editor).state.depthMask.depthRange[0],
|
|
971
|
+
Number(e.target.value)
|
|
972
|
+
]
|
|
973
|
+
}));
|
|
974
|
+
$2.delegated("input", input_15, (e) => $2.get(editor).setDepthMask({ softness: Number(e.target.value) }));
|
|
975
|
+
$2.delegated("change", input_16, (e) => $2.get(editor).setDepthMask({ invert: e.target.checked }));
|
|
976
|
+
$2.append($$anchor3, fragment);
|
|
977
|
+
};
|
|
978
|
+
$2.if(node_6, ($$render) => {
|
|
979
|
+
if ($2.get(editor).state.depthMask.enabled) $$render(consequent_5);
|
|
980
|
+
});
|
|
981
|
+
}
|
|
982
|
+
$2.reset(div_34);
|
|
983
|
+
$2.template_effect(() => $2.set_checked(input_11, $2.get(editor).state.depthMask.enabled));
|
|
984
|
+
$2.delegated("click", button_27, () => $2.get(editor).resetDepthMask());
|
|
985
|
+
$2.delegated("change", input_11, (e) => $2.get(editor).setDepthMask({ enabled: e.target.checked }));
|
|
986
|
+
$2.append($$anchor2, div_34);
|
|
987
|
+
};
|
|
988
|
+
$2.if(node_5, ($$render) => {
|
|
989
|
+
if ($2.get(activeTab) === "depth") $$render(consequent_6);
|
|
990
|
+
});
|
|
991
|
+
}
|
|
992
|
+
var node_7 = $2.sibling(node_5, 2);
|
|
993
|
+
{
|
|
994
|
+
var consequent_13 = ($$anchor2) => {
|
|
995
|
+
var div_44 = root_16();
|
|
996
|
+
var div_45 = $2.child(div_44);
|
|
997
|
+
var div_46 = $2.child(div_45);
|
|
998
|
+
var node_8 = $2.sibling($2.child(div_46), 2);
|
|
999
|
+
{
|
|
1000
|
+
var consequent_7 = ($$anchor3) => {
|
|
1001
|
+
var span_14 = root_8();
|
|
1002
|
+
$2.append($$anchor3, span_14);
|
|
1003
|
+
};
|
|
1004
|
+
$2.if(node_8, ($$render) => {
|
|
1005
|
+
if ($2.get(isRemovingBg)) $$render(consequent_7);
|
|
1006
|
+
});
|
|
1007
|
+
}
|
|
1008
|
+
$2.reset(div_46);
|
|
1009
|
+
var button_30 = $2.sibling(div_46, 4);
|
|
1010
|
+
var node_9 = $2.child(button_30);
|
|
1011
|
+
{
|
|
1012
|
+
var consequent_8 = ($$anchor3) => {
|
|
1013
|
+
var fragment_1 = root_9();
|
|
1014
|
+
$2.next();
|
|
1015
|
+
$2.append($$anchor3, fragment_1);
|
|
1016
|
+
};
|
|
1017
|
+
var alternate = ($$anchor3) => {
|
|
1018
|
+
var fragment_2 = root_10();
|
|
1019
|
+
$2.next();
|
|
1020
|
+
$2.append($$anchor3, fragment_2);
|
|
1021
|
+
};
|
|
1022
|
+
$2.if(node_9, ($$render) => {
|
|
1023
|
+
if ($2.get(isRemovingBg)) $$render(consequent_8);
|
|
1024
|
+
else $$render(alternate, -1);
|
|
1025
|
+
});
|
|
1026
|
+
}
|
|
1027
|
+
$2.reset(button_30);
|
|
1028
|
+
$2.reset(div_45);
|
|
1029
|
+
var div_47 = $2.sibling(div_45, 2);
|
|
1030
|
+
var div_48 = $2.child(div_47);
|
|
1031
|
+
var node_10 = $2.sibling($2.child(div_48), 2);
|
|
1032
|
+
{
|
|
1033
|
+
var consequent_9 = ($$anchor3) => {
|
|
1034
|
+
var span_15 = root_11();
|
|
1035
|
+
$2.append($$anchor3, span_15);
|
|
1036
|
+
};
|
|
1037
|
+
$2.if(node_10, ($$render) => {
|
|
1038
|
+
if ($2.get(isInpainting)) $$render(consequent_9);
|
|
1039
|
+
});
|
|
1040
|
+
}
|
|
1041
|
+
$2.reset(div_48);
|
|
1042
|
+
var div_49 = $2.sibling(div_48, 4);
|
|
1043
|
+
var textarea = $2.sibling($2.child(div_49), 2);
|
|
1044
|
+
$2.remove_textarea_child(textarea);
|
|
1045
|
+
$2.reset(div_49);
|
|
1046
|
+
var div_50 = $2.sibling(div_49, 2);
|
|
1047
|
+
var div_51 = $2.sibling($2.child(div_50), 2);
|
|
1048
|
+
var button_31 = $2.child(div_51);
|
|
1049
|
+
var text_15 = $2.only_child(button_31);
|
|
1050
|
+
var button_32 = $2.sibling(button_31, 2);
|
|
1051
|
+
var text_16 = $2.only_child(button_32);
|
|
1052
|
+
$2.reset(div_51);
|
|
1053
|
+
$2.reset(div_50);
|
|
1054
|
+
var button_33 = $2.sibling(div_50, 2);
|
|
1055
|
+
var node_11 = $2.child(button_33);
|
|
1056
|
+
{
|
|
1057
|
+
var consequent_10 = ($$anchor3) => {
|
|
1058
|
+
var fragment_3 = root_12();
|
|
1059
|
+
$2.next();
|
|
1060
|
+
$2.append($$anchor3, fragment_3);
|
|
1061
|
+
};
|
|
1062
|
+
var alternate_1 = ($$anchor3) => {
|
|
1063
|
+
var fragment_4 = root_13();
|
|
1064
|
+
$2.next();
|
|
1065
|
+
$2.append($$anchor3, fragment_4);
|
|
1066
|
+
};
|
|
1067
|
+
$2.if(node_11, ($$render) => {
|
|
1068
|
+
if ($2.get(isInpainting)) $$render(consequent_10);
|
|
1069
|
+
else $$render(alternate_1, -1);
|
|
1070
|
+
});
|
|
1071
|
+
}
|
|
1072
|
+
$2.reset(button_33);
|
|
1073
|
+
$2.reset(div_47);
|
|
1074
|
+
var node_12 = $2.sibling(div_47, 2);
|
|
1075
|
+
{
|
|
1076
|
+
var consequent_11 = ($$anchor3) => {
|
|
1077
|
+
var div_52 = root_14();
|
|
1078
|
+
var text_17 = $2.only_child(div_52, true);
|
|
1079
|
+
$2.template_effect(() => $2.set_text(text_17, $2.get(aiError)));
|
|
1080
|
+
$2.append($$anchor3, div_52);
|
|
1081
|
+
};
|
|
1082
|
+
$2.if(node_12, ($$render) => {
|
|
1083
|
+
if ($2.get(aiError)) $$render(consequent_11);
|
|
1084
|
+
});
|
|
1085
|
+
}
|
|
1086
|
+
var node_13 = $2.sibling(node_12, 2);
|
|
1087
|
+
{
|
|
1088
|
+
var consequent_12 = ($$anchor3) => {
|
|
1089
|
+
var div_53 = root_15();
|
|
1090
|
+
var text_18 = $2.only_child(div_53, true);
|
|
1091
|
+
$2.template_effect(() => $2.set_text(text_18, $2.get(aiSuccess)));
|
|
1092
|
+
$2.append($$anchor3, div_53);
|
|
1093
|
+
};
|
|
1094
|
+
$2.if(node_13, ($$render) => {
|
|
1095
|
+
if ($2.get(aiSuccess)) $$render(consequent_12);
|
|
1096
|
+
});
|
|
1097
|
+
}
|
|
1098
|
+
$2.reset(div_44);
|
|
1099
|
+
$2.template_effect(
|
|
1100
|
+
($0) => {
|
|
1101
|
+
button_30.disabled = $2.get(isRemovingBg) || $2.get(isInpainting);
|
|
1102
|
+
$2.set_class(button_31, 1, `px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${$2.get(inpaintMaskMode) === "annotations" ? "bg-purple-600/30 border-purple-500 text-purple-200" : "bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200"}`);
|
|
1103
|
+
$2.set_text(text_15, `Drawn Shapes (${$2.get(editor).state.annotations.length ?? ""})`);
|
|
1104
|
+
$2.set_class(button_32, 1, `px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${$2.get(inpaintMaskMode) === "crop" ? "bg-purple-600/30 border-purple-500 text-purple-200" : "bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200"}`);
|
|
1105
|
+
$2.set_text(text_16, `Crop Box (${$2.get(editor).state.crop ? "Selected" : "Full"})`);
|
|
1106
|
+
button_33.disabled = $0;
|
|
1107
|
+
},
|
|
1108
|
+
[
|
|
1109
|
+
() => $2.get(isInpainting) || $2.get(isRemovingBg) || !$2.get(inpaintPrompt).trim()
|
|
1110
|
+
]
|
|
1111
|
+
);
|
|
1112
|
+
$2.delegated("click", button_30, handleRemoveBackground);
|
|
1113
|
+
$2.bind_value(textarea, () => $2.get(inpaintPrompt), ($$value) => $2.set(inpaintPrompt, $$value));
|
|
1114
|
+
$2.delegated("click", button_31, () => $2.set(inpaintMaskMode, "annotations"));
|
|
1115
|
+
$2.delegated("click", button_32, () => $2.set(inpaintMaskMode, "crop"));
|
|
1116
|
+
$2.delegated("click", button_33, handleInpaint);
|
|
1117
|
+
$2.append($$anchor2, div_44);
|
|
1118
|
+
};
|
|
1119
|
+
$2.if(node_7, ($$render) => {
|
|
1120
|
+
if ($2.get(activeTab) === "ai") $$render(consequent_13);
|
|
1121
|
+
});
|
|
1122
|
+
}
|
|
1123
|
+
$2.reset(div_6);
|
|
1124
|
+
$2.reset(div_4);
|
|
1125
|
+
$2.reset(div);
|
|
1126
|
+
$2.template_effect(
|
|
1127
|
+
($0) => {
|
|
1128
|
+
$2.set_class(div, 1, `flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className() ?? ""}`);
|
|
1129
|
+
$2.set_style(div, style());
|
|
1130
|
+
$2.set_class(button, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "crop" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
|
|
1131
|
+
$2.set_class(button_1, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "adjust" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
|
|
1132
|
+
$2.set_class(button_2, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "annotate" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
|
|
1133
|
+
$2.set_class(button_3, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "depth" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
|
|
1134
|
+
$2.set_class(button_4, 1, `px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 ${$2.get(activeTab) === "ai" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
|
|
1135
|
+
button_5.disabled = !$2.get(editor).canUndo;
|
|
1136
|
+
button_6.disabled = !$2.get(editor).canRedo;
|
|
1137
|
+
$2.set_text(text, `${$0 ?? ""}%`);
|
|
1138
|
+
},
|
|
1139
|
+
[() => Math.round($2.get(editor).state.zoom * 100)]
|
|
1140
|
+
);
|
|
1141
|
+
$2.delegated("click", button, () => {
|
|
1142
|
+
$2.set(activeTab, "crop");
|
|
1143
|
+
$2.get(editor).setTool("crop");
|
|
1144
|
+
});
|
|
1145
|
+
$2.delegated("click", button_1, () => {
|
|
1146
|
+
$2.set(activeTab, "adjust");
|
|
1147
|
+
$2.get(editor).setTool("select");
|
|
1148
|
+
});
|
|
1149
|
+
$2.delegated("click", button_2, () => {
|
|
1150
|
+
$2.set(activeTab, "annotate");
|
|
1151
|
+
$2.get(editor).setTool("pen");
|
|
1152
|
+
});
|
|
1153
|
+
$2.delegated("click", button_3, () => {
|
|
1154
|
+
$2.set(activeTab, "depth");
|
|
1155
|
+
$2.get(editor).setTool("select");
|
|
1156
|
+
});
|
|
1157
|
+
$2.delegated("click", button_4, () => {
|
|
1158
|
+
$2.set(activeTab, "ai");
|
|
1159
|
+
$2.get(editor).setTool("select");
|
|
1160
|
+
});
|
|
1161
|
+
$2.delegated("click", button_5, () => $2.get(editor).undo());
|
|
1162
|
+
$2.delegated("click", button_6, () => $2.get(editor).redo());
|
|
1163
|
+
$2.delegated("click", button_7, () => $2.get(editor).reset());
|
|
1164
|
+
$2.delegated("click", button_8, () => $2.get(editor).zoomOut());
|
|
1165
|
+
$2.delegated("click", button_9, () => $2.get(editor).zoomIn());
|
|
1166
|
+
$2.delegated("mousedown", button_10, () => $2.get(editor).setComparing(true));
|
|
1167
|
+
$2.delegated("mouseup", button_10, () => $2.get(editor).setComparing(false));
|
|
1168
|
+
$2.event("mouseleave", button_10, () => $2.get(editor).setComparing(false));
|
|
1169
|
+
$2.delegated("click", button_11, handleExport);
|
|
1170
|
+
$2.delegated("mousedown", canvas, handleMouseDown);
|
|
1171
|
+
$2.delegated("mousemove", canvas, handleMouseMove);
|
|
1172
|
+
$2.delegated("mouseup", canvas, handleMouseUp);
|
|
1173
|
+
$2.event("mouseleave", canvas, handleMouseUp);
|
|
1174
|
+
$2.append($$anchor, div);
|
|
1175
|
+
$2.pop();
|
|
1176
|
+
}
|
|
1177
|
+
$2.delegate([
|
|
1178
|
+
"click",
|
|
1179
|
+
"mousedown",
|
|
1180
|
+
"mouseup",
|
|
1181
|
+
"mousemove",
|
|
1182
|
+
"input",
|
|
1183
|
+
"keydown",
|
|
1184
|
+
"change"
|
|
1185
|
+
]);
|
|
1186
|
+
|
|
1187
|
+
export {
|
|
1188
|
+
createReactiveImageEditor,
|
|
1189
|
+
ImageEditor
|
|
1190
|
+
};
|
|
1191
|
+
//# sourceMappingURL=chunk-HEOI4UNF.js.map
|