@widgetic/editor 4.0.2 → 4.0.3
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/components/MockWidget.svelte +1 -1
- package/dist/components/WidgetPreview.svelte +34 -50
- package/dist/components/editors/EmbedEditor.svelte +1 -1
- package/dist/components/editors/PropsEditor.svelte +173 -148
- package/dist/components/ic/BrowserInputController.svelte +14 -14
- package/dist/components/ic/CheckboxInputController.svelte +1 -1
- package/dist/components/ic/ColorPickerInputController.svelte +37 -37
- package/dist/components/ic/DatePickerInputController.svelte +6 -6
- package/dist/components/ic/DropdownInputController.svelte +1 -1
- package/dist/components/ic/FontInputController.svelte +136 -63
- package/dist/components/ic/FontInputController.svelte.d.ts +3 -1
- package/dist/components/ic/NumberInputController.svelte +37 -37
- package/dist/components/ic/RadioGroupInputController.svelte +1 -1
- package/dist/components/ic/SliderRangeInputController.svelte +1 -1
- package/dist/components/ic/SwitchInputController.svelte +1 -1
- package/dist/components/ic/TextAreaInputController.svelte +23 -23
- package/dist/components/ic/TextAreaPreviewInputController.svelte +2 -2
- package/dist/components/ic/VectorInputController.svelte +34 -34
- package/dist/components/ic/shared/CategoryTabs.svelte +1 -0
- package/dist/components/ic/shared/RecentItemsSection.svelte +21 -6
- package/dist/components/ic/shared/RecentItemsSection.svelte.d.ts +1 -0
- package/dist/stores/userSession.d.ts +1 -1
- package/dist/stores/userSession.js +17 -2
- package/dist/utils/FontManager.d.ts +1 -1
- package/dist/utils/FontManager.js +75 -102
- package/dist/utils/VectorManager.d.ts +3 -1
- package/dist/utils/VectorManager.js +30 -70
- package/dist/utils/colorTransparency.js +3 -3
- package/dist/utils/fontUtils.js +1 -1
- package/dist/utils/passiveEvents.d.ts +5 -0
- package/dist/utils/passiveEvents.js +9 -18
- package/dist/utils/recentColors.js +15 -15
- package/dist/utils/vectorUtils.js +1 -1
- package/package.json +1 -1
|
@@ -188,11 +188,11 @@
|
|
|
188
188
|
async function openFileBrowser() {
|
|
189
189
|
try {
|
|
190
190
|
syncFileBrowserUploadConfigIfEmbedded();
|
|
191
|
-
console.log('BrowserInputController: opening file browser', {
|
|
192
|
-
fileTypes,
|
|
193
|
-
id: typeof value === 'object' ? value.id : undefined,
|
|
194
|
-
batch: 1
|
|
195
|
-
});
|
|
191
|
+
// console.log('BrowserInputController: opening file browser', {
|
|
192
|
+
// fileTypes,
|
|
193
|
+
// id: typeof value === 'object' ? value.id : undefined,
|
|
194
|
+
// batch: 1
|
|
195
|
+
// });
|
|
196
196
|
isFileBrowserOpen = true;
|
|
197
197
|
await tick();
|
|
198
198
|
syncFileBrowserInitialSelection();
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
try {
|
|
212
212
|
const selectedFile = event.detail?.files?.[0];
|
|
213
213
|
if (!selectedFile) {
|
|
214
|
-
console.log('BrowserInputController: file browser selection skipped, no file selected');
|
|
214
|
+
// console.log('BrowserInputController: file browser selection skipped, no file selected');
|
|
215
215
|
return;
|
|
216
216
|
}
|
|
217
217
|
|
|
@@ -222,11 +222,11 @@
|
|
|
222
222
|
hash: selectedFile.hash
|
|
223
223
|
};
|
|
224
224
|
|
|
225
|
-
console.log('BrowserInputController: selected file', {
|
|
226
|
-
id: nextValue.id,
|
|
227
|
-
file: nextValue.file,
|
|
228
|
-
url: nextValue.url
|
|
229
|
-
});
|
|
225
|
+
// console.log('BrowserInputController: selected file', {
|
|
226
|
+
// id: nextValue.id,
|
|
227
|
+
// file: nextValue.file,
|
|
228
|
+
// url: nextValue.url
|
|
229
|
+
// });
|
|
230
230
|
|
|
231
231
|
value = nextValue;
|
|
232
232
|
onChange(nextValue);
|
|
@@ -337,17 +337,17 @@
|
|
|
337
337
|
if (!element) return;
|
|
338
338
|
|
|
339
339
|
element.addEventListener('play', () => {
|
|
340
|
-
console.log('Media started playing');
|
|
340
|
+
// console.log('Media started playing');
|
|
341
341
|
isPlaying = true;
|
|
342
342
|
});
|
|
343
343
|
|
|
344
344
|
element.addEventListener('pause', () => {
|
|
345
|
-
console.log('Media paused');
|
|
345
|
+
// console.log('Media paused');
|
|
346
346
|
isPlaying = false;
|
|
347
347
|
});
|
|
348
348
|
|
|
349
349
|
element.addEventListener('ended', () => {
|
|
350
|
-
console.log('Media ended');
|
|
350
|
+
// console.log('Media ended');
|
|
351
351
|
isPlaying = false;
|
|
352
352
|
});
|
|
353
353
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
* @param checked - Whether the checkbox is checked or not
|
|
55
55
|
*/
|
|
56
56
|
function handleValueChange(optionValue: string, checked: boolean) {
|
|
57
|
-
console.log('CheckboxInputController: handleValueChange', optionValue, checked);
|
|
57
|
+
// console.log('CheckboxInputController: handleValueChange', optionValue, checked);
|
|
58
58
|
|
|
59
59
|
if (checked) {
|
|
60
60
|
// Add value if not already in array
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
|
|
350
350
|
// if newValue is empty or contains invalid characters, clear the suggestions
|
|
351
351
|
if (!newValue || /[^a-z\s]/.test(newValue)) {
|
|
352
|
-
console.log('Clearing suggestions due to invalid input');
|
|
352
|
+
// console.log('Clearing suggestions due to invalid input');
|
|
353
353
|
suggestionVisible = false;
|
|
354
354
|
currentSuggestion = null;
|
|
355
355
|
return;
|
|
@@ -357,7 +357,7 @@
|
|
|
357
357
|
|
|
358
358
|
// if newValue is a valid color name, get the suggestions and show them
|
|
359
359
|
const suggestions = getColorSuggestions(newValue, colorNames);
|
|
360
|
-
console.log('Color suggestions:', { input: newValue, suggestions });
|
|
360
|
+
// console.log('Color suggestions:', { input: newValue, suggestions });
|
|
361
361
|
if (suggestions) {
|
|
362
362
|
currentSuggestion = suggestions;
|
|
363
363
|
suggestionVisible = true;
|
|
@@ -373,11 +373,11 @@
|
|
|
373
373
|
* @param isShiftPressed - Indicates if the shift key was held during selection
|
|
374
374
|
*/
|
|
375
375
|
function handleColorSelection(colorName: string, isShiftPressed: boolean) {
|
|
376
|
-
console.log('Handling color selection:', {
|
|
377
|
-
colorName,
|
|
378
|
-
isShiftPressed,
|
|
379
|
-
currentOpacity: lastKnownOpacity
|
|
380
|
-
});
|
|
376
|
+
// console.log('Handling color selection:', {
|
|
377
|
+
// colorName,
|
|
378
|
+
// isShiftPressed,
|
|
379
|
+
// currentOpacity: lastKnownOpacity
|
|
380
|
+
// });
|
|
381
381
|
|
|
382
382
|
const colorValue = colorNames[colorName];
|
|
383
383
|
value = colorValue;
|
|
@@ -385,7 +385,7 @@
|
|
|
385
385
|
|
|
386
386
|
// If Shift is pressed, set opacity to 100%
|
|
387
387
|
if (isShiftPressed) {
|
|
388
|
-
console.log('Shift pressed: Setting opacity to 100%');
|
|
388
|
+
// console.log('Shift pressed: Setting opacity to 100%');
|
|
389
389
|
lastKnownOpacity = 1;
|
|
390
390
|
rgb = { ...newRgb, a: 1 };
|
|
391
391
|
opacityPercentage = 100;
|
|
@@ -701,16 +701,16 @@
|
|
|
701
701
|
*/
|
|
702
702
|
function onColorEvent(event: CustomEvent) {
|
|
703
703
|
// Safe logging that won't throw errors
|
|
704
|
-
console.log('Color event received:', {
|
|
705
|
-
type: event.type,
|
|
706
|
-
rgb: event.detail?.rgb || rgb,
|
|
707
|
-
mode: event.detail?.mode,
|
|
708
|
-
rawEvent: {
|
|
709
|
-
detail: event.detail,
|
|
710
|
-
target: event.target ? 'exists' : 'null',
|
|
711
|
-
currentTarget: event.currentTarget ? 'exists' : 'null'
|
|
712
|
-
}
|
|
713
|
-
});
|
|
704
|
+
// console.log('Color event received:', {
|
|
705
|
+
// type: event.type,
|
|
706
|
+
// rgb: event.detail?.rgb || rgb,
|
|
707
|
+
// mode: event.detail?.mode,
|
|
708
|
+
// rawEvent: {
|
|
709
|
+
// detail: event.detail,
|
|
710
|
+
// target: event.target ? 'exists' : 'null',
|
|
711
|
+
// currentTarget: event.currentTarget ? 'exists' : 'null'
|
|
712
|
+
// }
|
|
713
|
+
// });
|
|
714
714
|
}
|
|
715
715
|
|
|
716
716
|
/**
|
|
@@ -718,7 +718,7 @@
|
|
|
718
718
|
* @param event - Custom event containing hue information
|
|
719
719
|
*/
|
|
720
720
|
function handleHueChange(event: CustomEvent) {
|
|
721
|
-
console.log('Hue change event:', event.detail);
|
|
721
|
+
// console.log('Hue change event:', event.detail);
|
|
722
722
|
try {
|
|
723
723
|
isInternalUpdate = true;
|
|
724
724
|
lastKnownHue = event.detail.h;
|
|
@@ -733,11 +733,11 @@
|
|
|
733
733
|
rgb = newRgb;
|
|
734
734
|
handleColorChange();
|
|
735
735
|
|
|
736
|
-
console.log('After hue change:', {
|
|
737
|
-
hue: lastKnownHue,
|
|
738
|
-
rgb: newRgb,
|
|
739
|
-
hexValue: rgbaToHex(newRgb.r, newRgb.g, newRgb.b, lastKnownOpacity)
|
|
740
|
-
});
|
|
736
|
+
// console.log('After hue change:', {
|
|
737
|
+
// hue: lastKnownHue,
|
|
738
|
+
// rgb: newRgb,
|
|
739
|
+
// hexValue: rgbaToHex(newRgb.r, newRgb.g, newRgb.b, lastKnownOpacity)
|
|
740
|
+
// });
|
|
741
741
|
} finally {
|
|
742
742
|
isInternalUpdate = false;
|
|
743
743
|
}
|
|
@@ -812,10 +812,10 @@
|
|
|
812
812
|
if (rect.width === 31 && rect.height === 256) {
|
|
813
813
|
if (top < 50) { // Hue slider is typically at the top
|
|
814
814
|
dragState.isHueDragging = true;
|
|
815
|
-
console.log('Hue drag started (top slider)');
|
|
815
|
+
// console.log('Hue drag started (top slider)');
|
|
816
816
|
} else { // Opacity slider is typically at the bottom
|
|
817
817
|
dragState.isOpacityDragging = true;
|
|
818
|
-
console.log('Opacity drag started (bottom slider)');
|
|
818
|
+
// console.log('Opacity drag started (bottom slider)');
|
|
819
819
|
}
|
|
820
820
|
} else {
|
|
821
821
|
dragState.isColorDragging = true;
|
|
@@ -977,7 +977,7 @@
|
|
|
977
977
|
*/
|
|
978
978
|
function saveToRecentColors(color: string, alpha: number) {
|
|
979
979
|
if (!saveRecentColors) {
|
|
980
|
-
console.log('Recent colors saving is disabled');
|
|
980
|
+
// console.log('Recent colors saving is disabled');
|
|
981
981
|
return;
|
|
982
982
|
}
|
|
983
983
|
|
|
@@ -990,7 +990,7 @@
|
|
|
990
990
|
if (mostRecent &&
|
|
991
991
|
mostRecent.color.toLowerCase() === color.toLowerCase() &&
|
|
992
992
|
mostRecent.alpha === alpha) {
|
|
993
|
-
console.log('Color already most recent, skipping save:', { color, alpha });
|
|
993
|
+
// console.log('Color already most recent, skipping save:', { color, alpha });
|
|
994
994
|
return;
|
|
995
995
|
}
|
|
996
996
|
|
|
@@ -1022,10 +1022,10 @@
|
|
|
1022
1022
|
* @param match - The matched color name clicked by the user
|
|
1023
1023
|
*/
|
|
1024
1024
|
function handleSuggestionClick(match: string) {
|
|
1025
|
-
console.log('Color name selected:', match);
|
|
1025
|
+
// console.log('Color name selected:', match);
|
|
1026
1026
|
hexInput = match;
|
|
1027
1027
|
const colorValue = colorNames[match];
|
|
1028
|
-
console.log('Converting color name to hex:', { name: match, hex: colorValue });
|
|
1028
|
+
// console.log('Converting color name to hex:', { name: match, hex: colorValue });
|
|
1029
1029
|
|
|
1030
1030
|
value = colorValue;
|
|
1031
1031
|
const newRgb = hexToRgba(colorValue);
|
|
@@ -1072,11 +1072,11 @@
|
|
|
1072
1072
|
* - Forces the input field to update and regain focus
|
|
1073
1073
|
*/
|
|
1074
1074
|
function restoreCurrentColor() {
|
|
1075
|
-
console.log('Restoring current color:', {
|
|
1076
|
-
currentValue: value,
|
|
1077
|
-
hexToRestore: value.slice(0, 7),
|
|
1078
|
-
currentHexInput: hexInput
|
|
1079
|
-
});
|
|
1075
|
+
// console.log('Restoring current color:', {
|
|
1076
|
+
// currentValue: value,
|
|
1077
|
+
// hexToRestore: value.slice(0, 7),
|
|
1078
|
+
// currentHexInput: hexInput
|
|
1079
|
+
// });
|
|
1080
1080
|
|
|
1081
1081
|
if (value && value.startsWith('#')) {
|
|
1082
1082
|
const colorToRestore = value.slice(0, 7);
|
|
@@ -1104,7 +1104,7 @@
|
|
|
1104
1104
|
onMount(() => {
|
|
1105
1105
|
if (autofocus && inputRef) {
|
|
1106
1106
|
inputRef.focus();
|
|
1107
|
-
console.log('ColorPickerInputController focused');
|
|
1107
|
+
// console.log('ColorPickerInputController focused');
|
|
1108
1108
|
}
|
|
1109
1109
|
});
|
|
1110
1110
|
|
|
@@ -1114,7 +1114,7 @@
|
|
|
1114
1114
|
export function focus() {
|
|
1115
1115
|
if (inputRef) {
|
|
1116
1116
|
inputRef.focus();
|
|
1117
|
-
console.log('ColorPickerInputController focus method called');
|
|
1117
|
+
// console.log('ColorPickerInputController focus method called');
|
|
1118
1118
|
}
|
|
1119
1119
|
}
|
|
1120
1120
|
|
|
@@ -76,22 +76,22 @@
|
|
|
76
76
|
* Creates a new CalendarDate instance to prevent reference issues
|
|
77
77
|
*/
|
|
78
78
|
function updateCurrentValue() {
|
|
79
|
-
console.log('🔄 [DatePicker] updateCurrentValue called with:', { value, type: typeof value });
|
|
79
|
+
// console.log('🔄 [DatePicker] updateCurrentValue called with:', { value, type: typeof value });
|
|
80
80
|
|
|
81
81
|
if (!value) {
|
|
82
82
|
currentValue = undefined;
|
|
83
83
|
placeholder = today(getLocalTimeZone());
|
|
84
|
-
console.log('✅ [DatePicker] Set to undefined, placeholder:', placeholder);
|
|
84
|
+
// console.log('✅ [DatePicker] Set to undefined, placeholder:', placeholder);
|
|
85
85
|
return;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
if (value instanceof CalendarDate) {
|
|
89
89
|
currentValue = value;
|
|
90
|
-
console.log('✅ [DatePicker] Already CalendarDate:', currentValue);
|
|
90
|
+
// console.log('✅ [DatePicker] Already CalendarDate:', currentValue);
|
|
91
91
|
} else if (typeof value === 'object' && value !== null && 'year' in value && 'month' in value && 'day' in value) {
|
|
92
92
|
try {
|
|
93
93
|
currentValue = new CalendarDate(value.year, value.month, value.day);
|
|
94
|
-
console.log('✅ [DatePicker] Created CalendarDate from object:', { original: value, created: currentValue });
|
|
94
|
+
// console.log('✅ [DatePicker] Created CalendarDate from object:', { original: value, created: currentValue });
|
|
95
95
|
} catch (error) {
|
|
96
96
|
console.error('❌ [DatePicker] Failed to create CalendarDate from object:', { value, error });
|
|
97
97
|
currentValue = undefined;
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
placeholder = currentValue ?? today(getLocalTimeZone());
|
|
105
|
-
console.log('🎯 [DatePicker] Final state:', { currentValue, placeholder });
|
|
105
|
+
// console.log('🎯 [DatePicker] Final state:', { currentValue, placeholder });
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
// Watch for value changes and update internal state
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
<Calendar
|
|
309
309
|
mode="single"
|
|
310
310
|
onValueChange={(date: DateValue | undefined) => {
|
|
311
|
-
console.log('📅 [DatePicker] Calendar onValueChange:', { date, isCalendarDate: date instanceof CalendarDate });
|
|
311
|
+
// console.log('📅 [DatePicker] Calendar onValueChange:', { date, isCalendarDate: date instanceof CalendarDate });
|
|
312
312
|
if (date instanceof CalendarDate) {
|
|
313
313
|
currentValue = date;
|
|
314
314
|
placeholder = date;
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
* @param newValue - The newly selected value
|
|
89
89
|
*/
|
|
90
90
|
function handleValueChange(newValue: string) {
|
|
91
|
-
console.log('DropdownInputController: handleValueChange', newValue);
|
|
91
|
+
// console.log('DropdownInputController: handleValueChange', newValue);
|
|
92
92
|
onChange(newValue);
|
|
93
93
|
closeDropdown();
|
|
94
94
|
}
|