@jhits/plugin-images 0.0.7 → 0.0.9
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/package.json +8 -9
- package/src/api/fallback/route.ts +0 -69
- package/src/api/index.ts +0 -10
- package/src/api/list/index.ts +0 -96
- package/src/api/resolve/route.ts +0 -241
- package/src/api/router.ts +0 -85
- package/src/api/upload/index.ts +0 -88
- package/src/api/uploads/[filename]/route.ts +0 -93
- package/src/api-server.ts +0 -11
- package/src/assets/noimagefound.jpg +0 -0
- package/src/components/BackgroundImage.d.ts +0 -11
- package/src/components/BackgroundImage.d.ts.map +0 -1
- package/src/components/BackgroundImage.js +0 -35
- package/src/components/BackgroundImage.tsx +0 -92
- package/src/components/GlobalImageEditor/config.d.ts +0 -9
- package/src/components/GlobalImageEditor/config.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/config.js +0 -18
- package/src/components/GlobalImageEditor/config.ts +0 -21
- package/src/components/GlobalImageEditor/eventHandlers.d.ts +0 -20
- package/src/components/GlobalImageEditor/eventHandlers.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/eventHandlers.js +0 -206
- package/src/components/GlobalImageEditor/eventHandlers.ts +0 -267
- package/src/components/GlobalImageEditor/imageDetection.d.ts +0 -16
- package/src/components/GlobalImageEditor/imageDetection.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/imageDetection.js +0 -130
- package/src/components/GlobalImageEditor/imageDetection.ts +0 -160
- package/src/components/GlobalImageEditor/imageSetup.d.ts +0 -9
- package/src/components/GlobalImageEditor/imageSetup.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/imageSetup.js +0 -261
- package/src/components/GlobalImageEditor/imageSetup.ts +0 -306
- package/src/components/GlobalImageEditor/saveLogic.d.ts +0 -26
- package/src/components/GlobalImageEditor/saveLogic.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/saveLogic.js +0 -99
- package/src/components/GlobalImageEditor/saveLogic.ts +0 -133
- package/src/components/GlobalImageEditor/stylingDetection.d.ts +0 -9
- package/src/components/GlobalImageEditor/stylingDetection.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/stylingDetection.js +0 -110
- package/src/components/GlobalImageEditor/stylingDetection.ts +0 -122
- package/src/components/GlobalImageEditor/transformParsing.d.ts +0 -16
- package/src/components/GlobalImageEditor/transformParsing.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/transformParsing.js +0 -68
- package/src/components/GlobalImageEditor/transformParsing.ts +0 -83
- package/src/components/GlobalImageEditor/types.d.ts +0 -36
- package/src/components/GlobalImageEditor/types.d.ts.map +0 -1
- package/src/components/GlobalImageEditor/types.js +0 -4
- package/src/components/GlobalImageEditor/types.ts +0 -39
- package/src/components/GlobalImageEditor.d.ts +0 -8
- package/src/components/GlobalImageEditor.d.ts.map +0 -1
- package/src/components/GlobalImageEditor.js +0 -227
- package/src/components/GlobalImageEditor.tsx +0 -327
- package/src/components/Image.d.ts +0 -22
- package/src/components/Image.d.ts.map +0 -1
- package/src/components/Image.js +0 -229
- package/src/components/Image.tsx +0 -343
- package/src/components/ImageBrowserModal.d.ts +0 -13
- package/src/components/ImageBrowserModal.d.ts.map +0 -1
- package/src/components/ImageBrowserModal.js +0 -504
- package/src/components/ImageBrowserModal.tsx +0 -837
- package/src/components/ImageEditor.d.ts +0 -27
- package/src/components/ImageEditor.d.ts.map +0 -1
- package/src/components/ImageEditor.js +0 -173
- package/src/components/ImageEditor.tsx +0 -323
- package/src/components/ImageEffectsPanel.tsx +0 -116
- package/src/components/ImagePicker.d.ts +0 -3
- package/src/components/ImagePicker.d.ts.map +0 -1
- package/src/components/ImagePicker.js +0 -143
- package/src/components/ImagePicker.tsx +0 -265
- package/src/components/ImagesPluginInit.d.ts +0 -24
- package/src/components/ImagesPluginInit.d.ts.map +0 -1
- package/src/components/ImagesPluginInit.js +0 -28
- package/src/components/ImagesPluginInit.tsx +0 -31
- package/src/components/index.ts +0 -10
- package/src/config.ts +0 -179
- package/src/hooks/useImagePicker.d.ts +0 -20
- package/src/hooks/useImagePicker.d.ts.map +0 -1
- package/src/hooks/useImagePicker.js +0 -322
- package/src/hooks/useImagePicker.ts +0 -344
- package/src/index.d.ts +0 -23
- package/src/index.d.ts.map +0 -1
- package/src/index.js +0 -28
- package/src/index.server.ts +0 -12
- package/src/index.tsx +0 -56
- package/src/init.d.ts +0 -33
- package/src/init.d.ts.map +0 -1
- package/src/init.js +0 -43
- package/src/init.tsx +0 -58
- package/src/types/index.d.ts +0 -80
- package/src/types/index.d.ts.map +0 -1
- package/src/types/index.js +0 -4
- package/src/types/index.ts +0 -84
- package/src/utils/fallback.d.ts +0 -27
- package/src/utils/fallback.d.ts.map +0 -1
- package/src/utils/fallback.js +0 -63
- package/src/utils/fallback.ts +0 -73
- package/src/utils/transforms.d.ts +0 -26
- package/src/utils/transforms.d.ts.map +0 -1
- package/src/utils/transforms.js +0 -38
- package/src/utils/transforms.ts +0 -54
- package/src/views/ImageManager.d.ts +0 -10
- package/src/views/ImageManager.d.ts.map +0 -1
- package/src/views/ImageManager.js +0 -9
- package/src/views/ImageManager.tsx +0 -30
|
@@ -1,261 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Image setup and click handlers
|
|
3
|
-
*/
|
|
4
|
-
import { parseImageData } from './imageDetection';
|
|
5
|
-
/**
|
|
6
|
-
* Setup click handlers and hover effects for all images
|
|
7
|
-
*/
|
|
8
|
-
export function setupImageHandlers(onImageClick) {
|
|
9
|
-
const cleanupFunctions = [];
|
|
10
|
-
const handleImageClick = (e) => {
|
|
11
|
-
var _a, _b, _c, _d;
|
|
12
|
-
const target = e.target;
|
|
13
|
-
// Only handle clicks on images that use the plugin components
|
|
14
|
-
let img = target.closest('img[data-image-id]');
|
|
15
|
-
let isBackground = false;
|
|
16
|
-
let element = null;
|
|
17
|
-
let currentSrc = '';
|
|
18
|
-
if (img) {
|
|
19
|
-
// This is a plugin Image component
|
|
20
|
-
element = img;
|
|
21
|
-
currentSrc = img.src;
|
|
22
|
-
}
|
|
23
|
-
else {
|
|
24
|
-
// Check if it's an element with background-image
|
|
25
|
-
let bgElement = target.closest('[data-background-image-component]');
|
|
26
|
-
if (bgElement) {
|
|
27
|
-
element = bgElement;
|
|
28
|
-
isBackground = true;
|
|
29
|
-
// Try to get image source from nested Image component first
|
|
30
|
-
const imgInside = bgElement.querySelector('img[data-image-id]');
|
|
31
|
-
if (imgInside) {
|
|
32
|
-
currentSrc = imgInside.src;
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
35
|
-
// Fallback to background-image CSS
|
|
36
|
-
const bgImage = window.getComputedStyle(bgElement).backgroundImage;
|
|
37
|
-
const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
|
|
38
|
-
if (urlMatch && urlMatch[1]) {
|
|
39
|
-
currentSrc = urlMatch[1];
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
if (!element || !currentSrc)
|
|
45
|
-
return;
|
|
46
|
-
// Don't handle images in modals or the editor itself
|
|
47
|
-
if (element.closest('[data-image-editor]') || element.closest('[role="dialog"]')) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
e.preventDefault();
|
|
51
|
-
e.stopPropagation();
|
|
52
|
-
// Extract semantic ID from data attribute
|
|
53
|
-
let semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id');
|
|
54
|
-
// If not found, try to extract from the src URL
|
|
55
|
-
if (!semanticId && currentSrc.includes('/api/uploads/')) {
|
|
56
|
-
const urlPart = (_a = currentSrc.split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.split('?')[0];
|
|
57
|
-
// If it looks like a semantic ID (no extension or timestamp), use it
|
|
58
|
-
if (urlPart && !/^\d+-/.test(urlPart) && !/\.(jpg|jpeg|png|webp|gif|svg)$/i.test(urlPart)) {
|
|
59
|
-
semanticId = decodeURIComponent(urlPart);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
// If still not found, generate one
|
|
63
|
-
if (!semanticId) {
|
|
64
|
-
semanticId = ((_b = element.closest('[data-image-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-image-id')) ||
|
|
65
|
-
`image-${Date.now()}`;
|
|
66
|
-
}
|
|
67
|
-
// Parse image data
|
|
68
|
-
const filterStyle = element.style.filter || window.getComputedStyle(element).filter || '';
|
|
69
|
-
const dataBrightness = element.getAttribute('data-brightness');
|
|
70
|
-
const dataBlur = element.getAttribute('data-blur');
|
|
71
|
-
const currentBrightness = dataBrightness
|
|
72
|
-
? parseInt(dataBrightness)
|
|
73
|
-
: parseInt(((_c = filterStyle.match(/brightness\((\d+)%\)/)) === null || _c === void 0 ? void 0 : _c[1]) || '100');
|
|
74
|
-
const currentBlur = dataBlur
|
|
75
|
-
? parseInt(dataBlur)
|
|
76
|
-
: parseInt(((_d = filterStyle.match(/blur\((\d+)px\)/)) === null || _d === void 0 ? void 0 : _d[1]) || '0');
|
|
77
|
-
// Parse image data using the detection utility
|
|
78
|
-
const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
|
|
79
|
-
if (!imageData) {
|
|
80
|
-
console.error('[GlobalImageEditor] Failed to parse image data');
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
// Store semantic ID on element for later use
|
|
84
|
-
if (isBackground && !element.hasAttribute('data-background-image-id')) {
|
|
85
|
-
element.setAttribute('data-background-image-id', semanticId);
|
|
86
|
-
}
|
|
87
|
-
else if (!isBackground && !element.hasAttribute('data-image-id')) {
|
|
88
|
-
element.setAttribute('data-image-id', semanticId);
|
|
89
|
-
}
|
|
90
|
-
onImageClick(imageData);
|
|
91
|
-
};
|
|
92
|
-
// Add click listeners and hover effects to all images
|
|
93
|
-
const images = document.querySelectorAll('img[data-image-id]:not([data-no-edit])');
|
|
94
|
-
// Find elements with BackgroundImage components
|
|
95
|
-
const bgElements = [];
|
|
96
|
-
const backgroundImageComponents = document.querySelectorAll('[data-background-image-component]');
|
|
97
|
-
backgroundImageComponents.forEach(el => {
|
|
98
|
-
bgElements.push(el);
|
|
99
|
-
});
|
|
100
|
-
images.forEach((img, index) => {
|
|
101
|
-
const originalPosition = img.style.position;
|
|
102
|
-
img.style.cursor = 'pointer';
|
|
103
|
-
img.setAttribute('data-editable-image', 'true');
|
|
104
|
-
img.addEventListener('click', handleImageClick);
|
|
105
|
-
// Find the best container for the indicator
|
|
106
|
-
let indicatorContainer = img;
|
|
107
|
-
let parent = img.parentElement;
|
|
108
|
-
if (parent && (parent.tagName === 'SPAN' || parent.tagName === 'DIV')) {
|
|
109
|
-
const parentStyle = window.getComputedStyle(parent);
|
|
110
|
-
if (parentStyle.position !== 'static' ||
|
|
111
|
-
(parentStyle.display !== 'inline' && parentStyle.display !== 'inline-block')) {
|
|
112
|
-
indicatorContainer = parent;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
// Ensure container has relative positioning
|
|
116
|
-
const containerStyle = window.getComputedStyle(indicatorContainer);
|
|
117
|
-
if (containerStyle.position === 'static') {
|
|
118
|
-
indicatorContainer.style.position = 'relative';
|
|
119
|
-
}
|
|
120
|
-
const indicator = document.createElement('div');
|
|
121
|
-
indicator.className = 'image-edit-indicator';
|
|
122
|
-
indicator.setAttribute('data-image-index', index.toString());
|
|
123
|
-
indicator.style.cssText = `
|
|
124
|
-
position: absolute;
|
|
125
|
-
top: 0;
|
|
126
|
-
left: 0;
|
|
127
|
-
width: 100%;
|
|
128
|
-
height: 100%;
|
|
129
|
-
background: rgba(0, 0, 0, 0.4);
|
|
130
|
-
display: flex;
|
|
131
|
-
align-items: center;
|
|
132
|
-
justify-content: center;
|
|
133
|
-
opacity: 0;
|
|
134
|
-
transition: opacity 0.2s ease;
|
|
135
|
-
pointer-events: none;
|
|
136
|
-
z-index: 10000;
|
|
137
|
-
border-radius: inherit;
|
|
138
|
-
box-sizing: border-box;
|
|
139
|
-
`;
|
|
140
|
-
const label = document.createElement('div');
|
|
141
|
-
label.style.cssText = `
|
|
142
|
-
background: rgba(0, 0, 0, 0.9);
|
|
143
|
-
color: white;
|
|
144
|
-
padding: 8px 16px;
|
|
145
|
-
border-radius: 8px;
|
|
146
|
-
font-size: 12px;
|
|
147
|
-
font-weight: bold;
|
|
148
|
-
text-transform: uppercase;
|
|
149
|
-
letter-spacing: 0.5px;
|
|
150
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
151
|
-
`;
|
|
152
|
-
label.textContent = 'Click to Edit';
|
|
153
|
-
indicator.appendChild(label);
|
|
154
|
-
indicatorContainer.appendChild(indicator);
|
|
155
|
-
const addHoverEffect = () => {
|
|
156
|
-
indicator.style.opacity = '1';
|
|
157
|
-
};
|
|
158
|
-
const removeHoverEffect = () => {
|
|
159
|
-
indicator.style.opacity = '0';
|
|
160
|
-
};
|
|
161
|
-
img.addEventListener('mouseenter', addHoverEffect);
|
|
162
|
-
img.addEventListener('mouseleave', removeHoverEffect);
|
|
163
|
-
if (indicatorContainer !== img) {
|
|
164
|
-
indicatorContainer.addEventListener('mouseenter', addHoverEffect);
|
|
165
|
-
indicatorContainer.addEventListener('mouseleave', removeHoverEffect);
|
|
166
|
-
}
|
|
167
|
-
cleanupFunctions.push(() => {
|
|
168
|
-
img.removeEventListener('click', handleImageClick);
|
|
169
|
-
img.removeEventListener('mouseenter', addHoverEffect);
|
|
170
|
-
img.removeEventListener('mouseleave', removeHoverEffect);
|
|
171
|
-
if (indicatorContainer !== img) {
|
|
172
|
-
indicatorContainer.removeEventListener('mouseenter', addHoverEffect);
|
|
173
|
-
indicatorContainer.removeEventListener('mouseleave', removeHoverEffect);
|
|
174
|
-
if (indicatorContainer.style.position === 'relative') {
|
|
175
|
-
indicatorContainer.style.position = '';
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
img.removeAttribute('data-editable-image');
|
|
179
|
-
img.style.cursor = '';
|
|
180
|
-
img.style.position = originalPosition;
|
|
181
|
-
indicator.remove();
|
|
182
|
-
});
|
|
183
|
-
});
|
|
184
|
-
// Process background images - show a button instead of hover overlay
|
|
185
|
-
bgElements.forEach((bgEl, index) => {
|
|
186
|
-
if (bgEl.hasAttribute('data-background-image-component')) {
|
|
187
|
-
return; // Skip BackgroundImage components - they have their own edit button
|
|
188
|
-
}
|
|
189
|
-
const originalPosition = bgEl.style.position;
|
|
190
|
-
if (!bgEl.style.position || bgEl.style.position === 'static') {
|
|
191
|
-
bgEl.style.position = 'relative';
|
|
192
|
-
}
|
|
193
|
-
bgEl.setAttribute('data-editable-background', 'true');
|
|
194
|
-
bgEl.setAttribute('data-background-image', 'true');
|
|
195
|
-
const buttonContainer = document.createElement('div');
|
|
196
|
-
buttonContainer.className = 'background-edit-button-container';
|
|
197
|
-
buttonContainer.setAttribute('data-image-index', `bg-${index}`);
|
|
198
|
-
buttonContainer.style.cssText = `
|
|
199
|
-
position: absolute;
|
|
200
|
-
top: 12px;
|
|
201
|
-
right: 12px;
|
|
202
|
-
z-index: 10000;
|
|
203
|
-
pointer-events: auto;
|
|
204
|
-
`;
|
|
205
|
-
const editButton = document.createElement('button');
|
|
206
|
-
editButton.className = 'background-edit-button';
|
|
207
|
-
editButton.setAttribute('type', 'button');
|
|
208
|
-
editButton.style.cssText = `
|
|
209
|
-
background: rgba(0, 0, 0, 0.8);
|
|
210
|
-
color: white;
|
|
211
|
-
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
212
|
-
padding: 10px 20px;
|
|
213
|
-
border-radius: 8px;
|
|
214
|
-
font-size: 12px;
|
|
215
|
-
font-weight: bold;
|
|
216
|
-
text-transform: uppercase;
|
|
217
|
-
letter-spacing: 0.5px;
|
|
218
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
219
|
-
cursor: pointer;
|
|
220
|
-
transition: all 0.2s ease;
|
|
221
|
-
display: flex;
|
|
222
|
-
align-items: center;
|
|
223
|
-
gap: 8px;
|
|
224
|
-
`;
|
|
225
|
-
editButton.innerHTML = `
|
|
226
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
227
|
-
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
|
228
|
-
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
|
229
|
-
</svg>
|
|
230
|
-
Edit Background
|
|
231
|
-
`;
|
|
232
|
-
editButton.addEventListener('mouseenter', () => {
|
|
233
|
-
editButton.style.background = 'rgba(0, 0, 0, 0.95)';
|
|
234
|
-
editButton.style.borderColor = 'rgba(255, 255, 255, 0.5)';
|
|
235
|
-
editButton.style.transform = 'translateY(-2px)';
|
|
236
|
-
editButton.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.5)';
|
|
237
|
-
});
|
|
238
|
-
editButton.addEventListener('mouseleave', () => {
|
|
239
|
-
editButton.style.background = 'rgba(0, 0, 0, 0.8)';
|
|
240
|
-
editButton.style.borderColor = 'rgba(255, 255, 255, 0.3)';
|
|
241
|
-
editButton.style.transform = 'translateY(0)';
|
|
242
|
-
editButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
|
|
243
|
-
});
|
|
244
|
-
editButton.addEventListener('click', (e) => {
|
|
245
|
-
e.preventDefault();
|
|
246
|
-
e.stopPropagation();
|
|
247
|
-
handleImageClick(e);
|
|
248
|
-
});
|
|
249
|
-
buttonContainer.appendChild(editButton);
|
|
250
|
-
bgEl.appendChild(buttonContainer);
|
|
251
|
-
cleanupFunctions.push(() => {
|
|
252
|
-
bgEl.removeAttribute('data-editable-background');
|
|
253
|
-
bgEl.removeAttribute('data-background-image');
|
|
254
|
-
bgEl.style.position = originalPosition;
|
|
255
|
-
buttonContainer.remove();
|
|
256
|
-
});
|
|
257
|
-
});
|
|
258
|
-
return () => {
|
|
259
|
-
cleanupFunctions.forEach(cleanup => cleanup());
|
|
260
|
-
};
|
|
261
|
-
}
|
|
@@ -1,306 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Image setup and click handlers
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
import type { SelectedImage } from './types';
|
|
6
|
-
import { parseImageData } from './imageDetection';
|
|
7
|
-
import { parseScaleFromTransform, parsePositionFromTransform } from './transformParsing';
|
|
8
|
-
import { detectStyling } from './stylingDetection';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Setup click handlers and hover effects for all images
|
|
12
|
-
*/
|
|
13
|
-
export function setupImageHandlers(
|
|
14
|
-
onImageClick: (image: SelectedImage) => void
|
|
15
|
-
): () => void {
|
|
16
|
-
const cleanupFunctions: Array<() => void> = [];
|
|
17
|
-
|
|
18
|
-
const handleImageClick = (e: MouseEvent) => {
|
|
19
|
-
const target = e.target as HTMLElement;
|
|
20
|
-
|
|
21
|
-
// Only handle clicks on images that use the plugin components
|
|
22
|
-
let img = target.closest('img[data-image-id]') as HTMLImageElement | null;
|
|
23
|
-
let isBackground = false;
|
|
24
|
-
let element: HTMLElement | null = null;
|
|
25
|
-
let currentSrc = '';
|
|
26
|
-
|
|
27
|
-
if (img) {
|
|
28
|
-
// This is a plugin Image component
|
|
29
|
-
element = img;
|
|
30
|
-
currentSrc = img.src;
|
|
31
|
-
} else {
|
|
32
|
-
// Check if it's an element with background-image
|
|
33
|
-
let bgElement = target.closest('[data-background-image-component]') as HTMLElement | null;
|
|
34
|
-
|
|
35
|
-
if (bgElement) {
|
|
36
|
-
element = bgElement;
|
|
37
|
-
isBackground = true;
|
|
38
|
-
|
|
39
|
-
// Try to get image source from nested Image component first
|
|
40
|
-
const imgInside = bgElement.querySelector('img[data-image-id]') as HTMLImageElement | null;
|
|
41
|
-
if (imgInside) {
|
|
42
|
-
currentSrc = imgInside.src;
|
|
43
|
-
} else {
|
|
44
|
-
// Fallback to background-image CSS
|
|
45
|
-
const bgImage = window.getComputedStyle(bgElement).backgroundImage;
|
|
46
|
-
const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
|
|
47
|
-
if (urlMatch && urlMatch[1]) {
|
|
48
|
-
currentSrc = urlMatch[1];
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
if (!element || !currentSrc) return;
|
|
55
|
-
|
|
56
|
-
// Don't handle images in modals or the editor itself
|
|
57
|
-
if (element.closest('[data-image-editor]') || element.closest('[role="dialog"]')) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
e.preventDefault();
|
|
62
|
-
e.stopPropagation();
|
|
63
|
-
|
|
64
|
-
// Extract semantic ID from data attribute
|
|
65
|
-
let semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id');
|
|
66
|
-
|
|
67
|
-
// If not found, try to extract from the src URL
|
|
68
|
-
if (!semanticId && currentSrc.includes('/api/uploads/')) {
|
|
69
|
-
const urlPart = currentSrc.split('/api/uploads/')[1]?.split('?')[0];
|
|
70
|
-
// If it looks like a semantic ID (no extension or timestamp), use it
|
|
71
|
-
if (urlPart && !/^\d+-/.test(urlPart) && !/\.(jpg|jpeg|png|webp|gif|svg)$/i.test(urlPart)) {
|
|
72
|
-
semanticId = decodeURIComponent(urlPart);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
// If still not found, generate one
|
|
77
|
-
if (!semanticId) {
|
|
78
|
-
semanticId = element.closest('[data-image-id]')?.getAttribute('data-image-id') ||
|
|
79
|
-
`image-${Date.now()}`;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
// Parse image data
|
|
83
|
-
const filterStyle = element.style.filter || window.getComputedStyle(element).filter || '';
|
|
84
|
-
const dataBrightness = element.getAttribute('data-brightness');
|
|
85
|
-
const dataBlur = element.getAttribute('data-blur');
|
|
86
|
-
|
|
87
|
-
const currentBrightness = dataBrightness
|
|
88
|
-
? parseInt(dataBrightness)
|
|
89
|
-
: parseInt(filterStyle.match(/brightness\((\d+)%\)/)?.[1] || '100');
|
|
90
|
-
const currentBlur = dataBlur
|
|
91
|
-
? parseInt(dataBlur)
|
|
92
|
-
: parseInt(filterStyle.match(/blur\((\d+)px\)/)?.[1] || '0');
|
|
93
|
-
|
|
94
|
-
// Parse image data using the detection utility
|
|
95
|
-
const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
|
|
96
|
-
|
|
97
|
-
if (!imageData) {
|
|
98
|
-
console.error('[GlobalImageEditor] Failed to parse image data');
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// Store semantic ID on element for later use
|
|
103
|
-
if (isBackground && !element.hasAttribute('data-background-image-id')) {
|
|
104
|
-
element.setAttribute('data-background-image-id', semanticId);
|
|
105
|
-
} else if (!isBackground && !element.hasAttribute('data-image-id')) {
|
|
106
|
-
element.setAttribute('data-image-id', semanticId);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
onImageClick(imageData);
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
// Add click listeners and hover effects to all images
|
|
113
|
-
const images = document.querySelectorAll('img[data-image-id]:not([data-no-edit])') as NodeListOf<HTMLImageElement>;
|
|
114
|
-
|
|
115
|
-
// Find elements with BackgroundImage components
|
|
116
|
-
const bgElements: HTMLElement[] = [];
|
|
117
|
-
const backgroundImageComponents = document.querySelectorAll('[data-background-image-component]');
|
|
118
|
-
backgroundImageComponents.forEach(el => {
|
|
119
|
-
bgElements.push(el as HTMLElement);
|
|
120
|
-
});
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
images.forEach((img, index) => {
|
|
124
|
-
const originalPosition = img.style.position;
|
|
125
|
-
|
|
126
|
-
img.style.cursor = 'pointer';
|
|
127
|
-
img.setAttribute('data-editable-image', 'true');
|
|
128
|
-
img.addEventListener('click', handleImageClick as EventListener);
|
|
129
|
-
|
|
130
|
-
// Find the best container for the indicator
|
|
131
|
-
let indicatorContainer: HTMLElement = img;
|
|
132
|
-
let parent = img.parentElement;
|
|
133
|
-
|
|
134
|
-
if (parent && (parent.tagName === 'SPAN' || parent.tagName === 'DIV')) {
|
|
135
|
-
const parentStyle = window.getComputedStyle(parent);
|
|
136
|
-
if (parentStyle.position !== 'static' ||
|
|
137
|
-
(parentStyle.display !== 'inline' && parentStyle.display !== 'inline-block')) {
|
|
138
|
-
indicatorContainer = parent as HTMLElement;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
// Ensure container has relative positioning
|
|
143
|
-
const containerStyle = window.getComputedStyle(indicatorContainer);
|
|
144
|
-
if (containerStyle.position === 'static') {
|
|
145
|
-
indicatorContainer.style.position = 'relative';
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
const indicator = document.createElement('div');
|
|
149
|
-
indicator.className = 'image-edit-indicator';
|
|
150
|
-
indicator.setAttribute('data-image-index', index.toString());
|
|
151
|
-
indicator.style.cssText = `
|
|
152
|
-
position: absolute;
|
|
153
|
-
top: 0;
|
|
154
|
-
left: 0;
|
|
155
|
-
width: 100%;
|
|
156
|
-
height: 100%;
|
|
157
|
-
background: rgba(0, 0, 0, 0.4);
|
|
158
|
-
display: flex;
|
|
159
|
-
align-items: center;
|
|
160
|
-
justify-content: center;
|
|
161
|
-
opacity: 0;
|
|
162
|
-
transition: opacity 0.2s ease;
|
|
163
|
-
pointer-events: none;
|
|
164
|
-
z-index: 10000;
|
|
165
|
-
border-radius: inherit;
|
|
166
|
-
box-sizing: border-box;
|
|
167
|
-
`;
|
|
168
|
-
|
|
169
|
-
const label = document.createElement('div');
|
|
170
|
-
label.style.cssText = `
|
|
171
|
-
background: rgba(0, 0, 0, 0.9);
|
|
172
|
-
color: white;
|
|
173
|
-
padding: 8px 16px;
|
|
174
|
-
border-radius: 8px;
|
|
175
|
-
font-size: 12px;
|
|
176
|
-
font-weight: bold;
|
|
177
|
-
text-transform: uppercase;
|
|
178
|
-
letter-spacing: 0.5px;
|
|
179
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
180
|
-
`;
|
|
181
|
-
label.textContent = 'Click to Edit';
|
|
182
|
-
indicator.appendChild(label);
|
|
183
|
-
|
|
184
|
-
indicatorContainer.appendChild(indicator);
|
|
185
|
-
|
|
186
|
-
const addHoverEffect = () => {
|
|
187
|
-
indicator.style.opacity = '1';
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
const removeHoverEffect = () => {
|
|
191
|
-
indicator.style.opacity = '0';
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
img.addEventListener('mouseenter', addHoverEffect);
|
|
195
|
-
img.addEventListener('mouseleave', removeHoverEffect);
|
|
196
|
-
if (indicatorContainer !== img) {
|
|
197
|
-
indicatorContainer.addEventListener('mouseenter', addHoverEffect);
|
|
198
|
-
indicatorContainer.addEventListener('mouseleave', removeHoverEffect);
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
cleanupFunctions.push(() => {
|
|
202
|
-
img.removeEventListener('click', handleImageClick as EventListener);
|
|
203
|
-
img.removeEventListener('mouseenter', addHoverEffect);
|
|
204
|
-
img.removeEventListener('mouseleave', removeHoverEffect);
|
|
205
|
-
if (indicatorContainer !== img) {
|
|
206
|
-
indicatorContainer.removeEventListener('mouseenter', addHoverEffect);
|
|
207
|
-
indicatorContainer.removeEventListener('mouseleave', removeHoverEffect);
|
|
208
|
-
if (indicatorContainer.style.position === 'relative') {
|
|
209
|
-
indicatorContainer.style.position = '';
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
img.removeAttribute('data-editable-image');
|
|
213
|
-
img.style.cursor = '';
|
|
214
|
-
img.style.position = originalPosition;
|
|
215
|
-
indicator.remove();
|
|
216
|
-
});
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
// Process background images - show a button instead of hover overlay
|
|
220
|
-
bgElements.forEach((bgEl, index) => {
|
|
221
|
-
if (bgEl.hasAttribute('data-background-image-component')) {
|
|
222
|
-
return; // Skip BackgroundImage components - they have their own edit button
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
const originalPosition = bgEl.style.position;
|
|
226
|
-
if (!bgEl.style.position || bgEl.style.position === 'static') {
|
|
227
|
-
bgEl.style.position = 'relative';
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
bgEl.setAttribute('data-editable-background', 'true');
|
|
231
|
-
bgEl.setAttribute('data-background-image', 'true');
|
|
232
|
-
|
|
233
|
-
const buttonContainer = document.createElement('div');
|
|
234
|
-
buttonContainer.className = 'background-edit-button-container';
|
|
235
|
-
buttonContainer.setAttribute('data-image-index', `bg-${index}`);
|
|
236
|
-
buttonContainer.style.cssText = `
|
|
237
|
-
position: absolute;
|
|
238
|
-
top: 12px;
|
|
239
|
-
right: 12px;
|
|
240
|
-
z-index: 10000;
|
|
241
|
-
pointer-events: auto;
|
|
242
|
-
`;
|
|
243
|
-
|
|
244
|
-
const editButton = document.createElement('button');
|
|
245
|
-
editButton.className = 'background-edit-button';
|
|
246
|
-
editButton.setAttribute('type', 'button');
|
|
247
|
-
editButton.style.cssText = `
|
|
248
|
-
background: rgba(0, 0, 0, 0.8);
|
|
249
|
-
color: white;
|
|
250
|
-
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
251
|
-
padding: 10px 20px;
|
|
252
|
-
border-radius: 8px;
|
|
253
|
-
font-size: 12px;
|
|
254
|
-
font-weight: bold;
|
|
255
|
-
text-transform: uppercase;
|
|
256
|
-
letter-spacing: 0.5px;
|
|
257
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
258
|
-
cursor: pointer;
|
|
259
|
-
transition: all 0.2s ease;
|
|
260
|
-
display: flex;
|
|
261
|
-
align-items: center;
|
|
262
|
-
gap: 8px;
|
|
263
|
-
`;
|
|
264
|
-
editButton.innerHTML = `
|
|
265
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
266
|
-
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
|
267
|
-
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
|
268
|
-
</svg>
|
|
269
|
-
Edit Background
|
|
270
|
-
`;
|
|
271
|
-
|
|
272
|
-
editButton.addEventListener('mouseenter', () => {
|
|
273
|
-
editButton.style.background = 'rgba(0, 0, 0, 0.95)';
|
|
274
|
-
editButton.style.borderColor = 'rgba(255, 255, 255, 0.5)';
|
|
275
|
-
editButton.style.transform = 'translateY(-2px)';
|
|
276
|
-
editButton.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.5)';
|
|
277
|
-
});
|
|
278
|
-
|
|
279
|
-
editButton.addEventListener('mouseleave', () => {
|
|
280
|
-
editButton.style.background = 'rgba(0, 0, 0, 0.8)';
|
|
281
|
-
editButton.style.borderColor = 'rgba(255, 255, 255, 0.3)';
|
|
282
|
-
editButton.style.transform = 'translateY(0)';
|
|
283
|
-
editButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
|
|
284
|
-
});
|
|
285
|
-
|
|
286
|
-
editButton.addEventListener('click', (e) => {
|
|
287
|
-
e.preventDefault();
|
|
288
|
-
e.stopPropagation();
|
|
289
|
-
handleImageClick(e as any);
|
|
290
|
-
});
|
|
291
|
-
|
|
292
|
-
buttonContainer.appendChild(editButton);
|
|
293
|
-
bgEl.appendChild(buttonContainer);
|
|
294
|
-
|
|
295
|
-
cleanupFunctions.push(() => {
|
|
296
|
-
bgEl.removeAttribute('data-editable-background');
|
|
297
|
-
bgEl.removeAttribute('data-background-image');
|
|
298
|
-
bgEl.style.position = originalPosition;
|
|
299
|
-
buttonContainer.remove();
|
|
300
|
-
});
|
|
301
|
-
});
|
|
302
|
-
|
|
303
|
-
return () => {
|
|
304
|
-
cleanupFunctions.forEach(cleanup => cleanup());
|
|
305
|
-
};
|
|
306
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Save logic for image transforms and effects
|
|
3
|
-
*/
|
|
4
|
-
import type { SelectedImage, PendingTransform } from './types';
|
|
5
|
-
/**
|
|
6
|
-
* Normalize position values - convert -50% (centering value) to 0
|
|
7
|
-
*/
|
|
8
|
-
export declare function normalizePosition(position: number): number;
|
|
9
|
-
/**
|
|
10
|
-
* Get filename from element or API
|
|
11
|
-
*/
|
|
12
|
-
export declare function getFilename(semanticId: string, selectedImage: SelectedImage): Promise<string | null>;
|
|
13
|
-
/**
|
|
14
|
-
* Save image transform to API
|
|
15
|
-
*/
|
|
16
|
-
export declare function saveTransformToAPI(semanticId: string, filename: string, scale: number, positionX: number, positionY: number, brightness: number, blur: number): Promise<boolean>;
|
|
17
|
-
/**
|
|
18
|
-
* Flush pending save immediately
|
|
19
|
-
*/
|
|
20
|
-
export declare function flushPendingSave(pending: PendingTransform, selectedImage: SelectedImage): Promise<void>;
|
|
21
|
-
/**
|
|
22
|
-
* Save image transform with debouncing support
|
|
23
|
-
* This is a wrapper that handles the debouncing logic
|
|
24
|
-
*/
|
|
25
|
-
export declare function saveImageTransform(semanticId: string, filename: string, scale: number, positionX: number, positionY: number, brightness: number, blur: number): Promise<void>;
|
|
26
|
-
//# sourceMappingURL=saveLogic.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"saveLogic.d.ts","sourceRoot":"","sources":["saveLogic.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE/D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED;;GAEG;AACH,wBAAsB,WAAW,CAC7B,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,aAAa,GAC7B,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA4BxB;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACpC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACb,OAAO,CAAC,OAAO,CAAC,CAmClB;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CAClC,OAAO,EAAE,gBAAgB,EACzB,aAAa,EAAE,aAAa,GAC7B,OAAO,CAAC,IAAI,CAAC,CAaf;AAED;;;GAGG;AACH,wBAAsB,kBAAkB,CACpC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACb,OAAO,CAAC,IAAI,CAAC,CAEf"}
|