@peteai/presentation-editor 0.0.2 → 0.0.4
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/README.md +2 -2
- package/dist/components/presentation-editor/active-layers-buttons.svelte +53 -0
- package/dist/components/presentation-editor/active-layers-buttons.svelte.d.ts +3 -0
- package/dist/components/presentation-editor/active-layers.svelte +181 -0
- package/dist/components/presentation-editor/active-layers.svelte.d.ts +3 -0
- package/dist/components/presentation-editor/color-indicator/color-indicator-gradient-def.svelte +81 -0
- package/dist/components/presentation-editor/color-indicator/color-indicator-gradient-def.svelte.d.ts +9 -0
- package/dist/components/presentation-editor/color-indicator/color-indicator-gradient.svelte +21 -0
- package/dist/components/presentation-editor/color-indicator/color-indicator-gradient.svelte.d.ts +8 -0
- package/dist/components/presentation-editor/color-indicator/color-indicator.svelte +23 -0
- package/dist/components/presentation-editor/color-indicator/color-indicator.svelte.d.ts +6 -0
- package/dist/components/presentation-editor/color-indicator/index.d.ts +4 -0
- package/dist/components/presentation-editor/color-indicator/index.js +6 -0
- package/dist/components/presentation-editor/cursor-tooltip.svelte +1 -1
- package/dist/components/presentation-editor/dragged.svelte +21 -11
- package/dist/components/presentation-editor/fonts.d.ts +3 -0
- package/dist/components/presentation-editor/fonts.js +1278 -0
- package/dist/components/presentation-editor/header.svelte +21 -33
- package/dist/components/presentation-editor/header.svelte.d.ts +16 -6
- package/dist/components/presentation-editor/hotkeys.svelte +85 -0
- package/dist/components/presentation-editor/{sidebar/layers.svelte.d.ts → hotkeys.svelte.d.ts} +3 -3
- package/dist/components/presentation-editor/layers/active-background-border.svelte +3 -7
- package/dist/components/presentation-editor/layers/active-layer-border.svelte +2 -5
- package/dist/components/presentation-editor/layers/active-layer-border.svelte.d.ts +0 -1
- package/dist/components/presentation-editor/layers/buttons/border-button/border-button.svelte +113 -129
- package/dist/components/presentation-editor/layers/buttons/border-button/border-button.svelte.d.ts +2 -2
- package/dist/components/presentation-editor/layers/buttons/corner-radius-button/corner-radius-button.svelte +51 -32
- package/dist/components/presentation-editor/layers/buttons/corner-radius-button/corner-radius-button.svelte.d.ts +2 -2
- package/dist/components/presentation-editor/layers/buttons/flip-button/flip-button.svelte +30 -7
- package/dist/components/presentation-editor/layers/buttons/flip-button/flip-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/buttons/opacity-button/opacity-button.svelte +76 -33
- package/dist/components/presentation-editor/layers/buttons/opacity-button/opacity-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/controls/corner-scale-control/corner-scale-control.svelte +89 -59
- package/dist/components/presentation-editor/layers/controls/corner-scale-control/corner-scale-control.svelte.d.ts +5 -100
- package/dist/components/presentation-editor/layers/controls/group-resize-control/group-resize-control.svelte +337 -0
- package/dist/components/presentation-editor/layers/controls/group-resize-control/group-resize-control.svelte.d.ts +104 -0
- package/dist/components/presentation-editor/layers/controls/group-resize-control/index.d.ts +2 -0
- package/dist/components/presentation-editor/layers/controls/group-resize-control/index.js +4 -0
- package/dist/components/presentation-editor/layers/controls/rotate-control/rotate-control.svelte +128 -43
- package/dist/components/presentation-editor/layers/controls/rotate-control/rotate-control.svelte.d.ts +1 -5
- package/dist/components/presentation-editor/layers/controls/side-resize-control/side-resize-control.svelte +68 -57
- package/dist/components/presentation-editor/layers/controls/side-resize-control/side-resize-control.svelte.d.ts +2 -110
- package/dist/components/presentation-editor/layers/controls/side-scale-control/side-scale-control.svelte +45 -32
- package/dist/components/presentation-editor/layers/controls/side-scale-control/side-scale-control.svelte.d.ts +2 -54
- package/dist/components/presentation-editor/layers/index.d.ts +4 -5
- package/dist/components/presentation-editor/layers/index.js +7 -8
- package/dist/components/presentation-editor/layers/layer-button.svelte +25 -7
- package/dist/components/presentation-editor/layers/layer-wrapper.svelte +212 -162
- package/dist/components/presentation-editor/layers/layer-wrapper.svelte.d.ts +2 -2
- package/dist/components/presentation-editor/layers/types/background/background-content-image.svelte +41 -0
- package/dist/components/presentation-editor/layers/types/background/background-content-image.svelte.d.ts +8 -0
- package/dist/components/presentation-editor/layers/types/background/background-layer-buttons.svelte +28 -74
- package/dist/components/presentation-editor/layers/types/background/background-layer-buttons.svelte.d.ts +2 -17
- package/dist/components/presentation-editor/layers/types/background/background-layer-content.svelte +19 -0
- package/dist/components/presentation-editor/layers/types/background/background-layer-content.svelte.d.ts +8 -0
- package/dist/components/presentation-editor/layers/types/background/background-layer.svelte +69 -61
- package/dist/components/presentation-editor/layers/types/background/background-layer.svelte.d.ts +2 -3
- package/dist/components/presentation-editor/layers/types/background/index.d.ts +2 -3
- package/dist/components/presentation-editor/layers/types/background/index.js +2 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/alignment-button/alignment-button.svelte +55 -12
- package/dist/components/presentation-editor/layers/types/html/buttons/alignment-button/alignment-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/bold-button/bold-button.svelte +60 -8
- package/dist/components/presentation-editor/layers/types/html/buttons/bold-button/bold-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/case-button/case-button.svelte +59 -24
- package/dist/components/presentation-editor/layers/types/html/buttons/case-button/case-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/color-button/color-button.svelte +27 -76
- package/dist/components/presentation-editor/layers/types/html/buttons/color-button/color-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/font-family-button/font-family-button.svelte +36 -0
- package/dist/components/presentation-editor/layers/types/html/buttons/font-family-button/font-family-button.svelte.d.ts +7 -0
- package/dist/components/presentation-editor/layers/types/html/buttons/font-family-button/index.d.ts +2 -0
- package/dist/components/presentation-editor/layers/types/html/buttons/font-family-button/index.js +2 -0
- package/dist/components/presentation-editor/layers/types/html/buttons/font-size-button/font-size-button.svelte +72 -29
- package/dist/components/presentation-editor/layers/types/html/buttons/font-size-button/font-size-button.svelte.d.ts +3 -5
- package/dist/components/presentation-editor/layers/types/html/buttons/italic-button/italic-button.svelte +60 -8
- package/dist/components/presentation-editor/layers/types/html/buttons/italic-button/italic-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/list-button/list-button.svelte +71 -18
- package/dist/components/presentation-editor/layers/types/html/buttons/list-button/list-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/strikethrough-button/strikethrough-button.svelte +54 -8
- package/dist/components/presentation-editor/layers/types/html/buttons/strikethrough-button/strikethrough-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/buttons/underline-button/underline-button.svelte +54 -9
- package/dist/components/presentation-editor/layers/types/html/buttons/underline-button/underline-button.svelte.d.ts +3 -3
- package/dist/components/presentation-editor/layers/types/html/editor/createEditor.js +2 -2
- package/dist/components/presentation-editor/layers/types/html/editor/utils.d.ts +11 -0
- package/dist/components/presentation-editor/layers/types/html/editor/utils.js +88 -0
- package/dist/components/presentation-editor/layers/types/html/extensions/font-family/font-family.d.ts +27 -0
- package/dist/components/presentation-editor/layers/types/html/extensions/font-family/font-family.js +40 -0
- package/dist/components/presentation-editor/layers/types/html/extensions/font-family/index.d.ts +3 -0
- package/dist/components/presentation-editor/layers/types/html/extensions/font-family/index.js +3 -0
- package/dist/components/presentation-editor/layers/types/html/extensions/font-size/font-size.d.ts +5 -1
- package/dist/components/presentation-editor/layers/types/html/extensions/font-size/font-size.js +3 -7
- package/dist/components/presentation-editor/layers/types/html/extensions.d.ts +1 -0
- package/dist/components/presentation-editor/layers/types/html/extensions.js +56 -0
- package/dist/components/presentation-editor/layers/types/html/html-content.svelte +26 -5
- package/dist/components/presentation-editor/layers/types/html/html-layer-content.svelte +26 -0
- package/dist/components/presentation-editor/layers/types/html/html-layer-content.svelte.d.ts +9 -0
- package/dist/components/presentation-editor/layers/types/html/html-layer-edit.svelte +103 -0
- package/dist/components/presentation-editor/layers/types/html/html-layer-edit.svelte.d.ts +8 -0
- package/dist/components/presentation-editor/layers/types/html/html-layer.svelte +61 -53
- package/dist/components/presentation-editor/layers/types/html/index.d.ts +3 -5
- package/dist/components/presentation-editor/layers/types/html/index.js +3 -56
- package/dist/components/presentation-editor/layers/types/image/{image-content.svelte → image-layer-content.svelte} +11 -3
- package/dist/components/presentation-editor/layers/types/image/image-layer-content.svelte.d.ts +8 -0
- package/dist/components/presentation-editor/layers/types/image/image-layer.svelte +51 -21
- package/dist/components/presentation-editor/layers/types/image/index.d.ts +2 -4
- package/dist/components/presentation-editor/layers/types/image/index.js +2 -4
- package/dist/components/presentation-editor/layers/utils.d.ts +68 -9
- package/dist/components/presentation-editor/layers/utils.js +260 -25
- package/dist/components/presentation-editor/menu/background-menu-content.svelte +80 -0
- package/dist/components/presentation-editor/menu/background-menu-content.svelte.d.ts +9 -0
- package/dist/components/presentation-editor/menu/layer-menu-content.svelte +183 -0
- package/dist/components/presentation-editor/menu/layer-menu-content.svelte.d.ts +3 -0
- package/dist/components/presentation-editor/menu/slide-menu-content.svelte +67 -0
- package/dist/components/presentation-editor/menu/slide-menu-content.svelte.d.ts +9 -0
- package/dist/components/presentation-editor/presentation-editor.svelte +119 -175
- package/dist/components/presentation-editor/presentation-editor.svelte.js +597 -136
- package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-color.svelte +58 -0
- package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-color.svelte.d.ts +10 -0
- package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-gradient-picker.svelte +144 -0
- package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar-gradient-picker.svelte.d.ts +7 -0
- package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar.svelte +404 -0
- package/dist/components/presentation-editor/sidebar/color-sidebar/color-sidebar.svelte.d.ts +3 -0
- package/dist/components/presentation-editor/sidebar/color-sidebar/index.d.ts +2 -0
- package/dist/components/presentation-editor/sidebar/color-sidebar/index.js +2 -0
- package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar-button.svelte +26 -0
- package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar-button.svelte.d.ts +8 -0
- package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar.svelte +216 -0
- package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar.svelte.d.ts +3 -0
- package/dist/components/presentation-editor/sidebar/font-sidebar/index.d.ts +2 -0
- package/dist/components/presentation-editor/sidebar/font-sidebar/index.js +2 -0
- package/dist/components/presentation-editor/sidebar/position-slidebar.svelte +130 -0
- package/dist/components/presentation-editor/sidebar/position-slidebar.svelte.d.ts +18 -0
- package/dist/components/presentation-editor/sidebar/sidebar-text-tab-button.svelte +90 -0
- package/dist/components/presentation-editor/sidebar/sidebar-text-tab-button.svelte.d.ts +7 -0
- package/dist/components/presentation-editor/sidebar/sidebar-text-tab.svelte +82 -0
- package/dist/components/presentation-editor/sidebar/sidebar-text-tab.svelte.d.ts +18 -0
- package/dist/components/presentation-editor/sidebar/{images-library.svelte → sidebar-uploads-tab.svelte} +0 -1
- package/dist/components/presentation-editor/sidebar/sidebar-uploads-tab.svelte.d.ts +3 -0
- package/dist/components/presentation-editor/sidebar/sidebar-wrapper.svelte +25 -0
- package/dist/components/presentation-editor/sidebar/sidebar-wrapper.svelte.d.ts +7 -0
- package/dist/components/presentation-editor/sidebar/sidebar.svelte +71 -15
- package/dist/components/presentation-editor/sidebar/sidebar.svelte.d.ts +16 -5
- package/dist/components/presentation-editor/sidebar/uploads-image.svelte +28 -11
- package/dist/components/presentation-editor/slide-editor.svelte +20 -22
- package/dist/components/presentation-editor/slide-inner.svelte +19 -18
- package/dist/components/presentation-editor/slides-navigation/slide-preview.svelte +61 -52
- package/dist/components/presentation-editor/slides-navigation/slides-navigation.svelte +6 -8
- package/dist/components/presentation-editor/snapping-guides.svelte +3 -3
- package/dist/components/presentation-editor/types.d.ts +67 -27
- package/dist/components/presentation-editor/utils.d.ts +50 -1
- package/dist/components/presentation-editor/utils.js +101 -6
- package/dist/components/ui/button/button.svelte +3 -2
- package/dist/components/ui/button/button.svelte.d.ts +5 -82
- package/dist/components/ui/color-picker/color-picker-alpha-grid.svelte +43 -0
- package/dist/components/ui/color-picker/color-picker-alpha-grid.svelte.d.ts +8 -0
- package/dist/components/ui/color-picker/color-picker.svelte +344 -0
- package/dist/components/ui/color-picker/color-picker.svelte.d.ts +13 -0
- package/dist/components/ui/color-picker/index.d.ts +3 -0
- package/dist/components/ui/color-picker/index.js +5 -0
- package/dist/components/ui/context-menu/context-menu-shortcut.svelte +6 -3
- package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte +1 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte +1 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte +6 -3
- package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +1 -1
- package/dist/components/ui/infinite-loader/index.d.ts +4 -0
- package/dist/components/ui/infinite-loader/index.js +4 -0
- package/dist/components/ui/infinite-loader/infinite-loader-loop-tracker.d.ts +13 -0
- package/dist/components/ui/infinite-loader/infinite-loader-loop-tracker.js +44 -0
- package/dist/components/ui/infinite-loader/infinite-loader-state.svelte.d.ts +15 -0
- package/dist/components/ui/infinite-loader/infinite-loader-state.svelte.js +28 -0
- package/dist/components/ui/infinite-loader/infinite-loader.svelte +149 -0
- package/dist/components/ui/infinite-loader/infinite-loader.svelte.d.ts +17 -0
- package/dist/components/ui/input/input.svelte +1 -1
- package/dist/components/ui/slider/slider.svelte +20 -18
- package/dist/components/ui/tabs/index.d.ts +6 -0
- package/dist/components/ui/tabs/index.js +8 -0
- package/dist/components/ui/tabs/tabs-content.svelte +19 -0
- package/dist/components/ui/tabs/tabs-content.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs-list.svelte +19 -0
- package/dist/components/ui/tabs/tabs-list.svelte.d.ts +4 -0
- package/dist/components/ui/tabs/tabs-trigger.svelte +19 -0
- package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts +4 -0
- package/dist/components/ui/toggle/toggle.svelte +3 -2
- package/dist/components/ui/toggle/toggle.svelte.d.ts +2 -46
- package/dist/plugin.js +3 -2
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +1 -0
- package/package.json +28 -25
- package/dist/components/presentation-editor/app.css +0 -12
- package/dist/components/presentation-editor/layers/hovered-layer.svelte +0 -34
- package/dist/components/presentation-editor/layers/hovered-layer.svelte.d.ts +0 -7
- package/dist/components/presentation-editor/layers/types/background/background-content.svelte +0 -11
- package/dist/components/presentation-editor/layers/types/background/background-content.svelte.d.ts +0 -7
- package/dist/components/presentation-editor/layers/types/background/background-layer-thumb.svelte +0 -12
- package/dist/components/presentation-editor/layers/types/background/background-layer-thumb.svelte.d.ts +0 -7
- package/dist/components/presentation-editor/layers/types/html/html-layer-active.svelte +0 -159
- package/dist/components/presentation-editor/layers/types/html/html-layer-active.svelte.d.ts +0 -8
- package/dist/components/presentation-editor/layers/types/html/html-layer-buttons.svelte +0 -42
- package/dist/components/presentation-editor/layers/types/html/html-layer-buttons.svelte.d.ts +0 -10
- package/dist/components/presentation-editor/layers/types/html/html-layer-thumb.svelte +0 -24
- package/dist/components/presentation-editor/layers/types/html/html-layer-thumb.svelte.d.ts +0 -8
- package/dist/components/presentation-editor/layers/types/image/image-content.svelte.d.ts +0 -8
- package/dist/components/presentation-editor/layers/types/image/image-layer-buttons.svelte +0 -21
- package/dist/components/presentation-editor/layers/types/image/image-layer-buttons.svelte.d.ts +0 -7
- package/dist/components/presentation-editor/layers/types/image/image-layer-thumb.svelte +0 -13
- package/dist/components/presentation-editor/layers/types/image/image-layer-thumb.svelte.d.ts +0 -8
- package/dist/components/presentation-editor/sidebar/images-library.svelte.d.ts +0 -3
- package/dist/components/presentation-editor/sidebar/layers.svelte +0 -94
- package/dist/components/presentation-editor/slides-navigation/buttons/slide-delete-button.svelte +0 -32
- package/dist/components/presentation-editor/slides-navigation/buttons/slide-delete-button.svelte.d.ts +0 -10
- package/dist/components/presentation-editor/slides-navigation/buttons/slide-duplicate-button.svelte +0 -34
- package/dist/components/presentation-editor/slides-navigation/buttons/slide-duplicate-button.svelte.d.ts +0 -10
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount, onDestroy, type Snippet } from 'svelte';
|
|
3
|
+
import { LoaderState, STATUS } from './infinite-loader-state.svelte.js';
|
|
4
|
+
import type { LoopTracker } from './infinite-loader-loop-tracker.js';
|
|
5
|
+
import { Button } from '../button/index.js';
|
|
6
|
+
import { cn } from '../../../utils.js';
|
|
7
|
+
|
|
8
|
+
type InfiniteLoaderProps = {
|
|
9
|
+
triggerLoad: () => Promise<void>;
|
|
10
|
+
intersectionOptions?: Partial<IntersectionObserver>;
|
|
11
|
+
loaderState: LoaderState;
|
|
12
|
+
loopTracker?: LoopTracker;
|
|
13
|
+
class?: string;
|
|
14
|
+
loading?: Snippet;
|
|
15
|
+
noResults?: Snippet;
|
|
16
|
+
noData?: Snippet;
|
|
17
|
+
coolingOff?: Snippet;
|
|
18
|
+
error?: Snippet<[typeof attemptLoad]>;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const {
|
|
22
|
+
triggerLoad,
|
|
23
|
+
intersectionOptions = {},
|
|
24
|
+
loaderState,
|
|
25
|
+
loopTracker,
|
|
26
|
+
class: className,
|
|
27
|
+
loading: loadingSnippet,
|
|
28
|
+
noResults: noResultsSnippet,
|
|
29
|
+
noData: noDataSnippet,
|
|
30
|
+
coolingOff: coolingOffSnippet,
|
|
31
|
+
error: errorSnippet,
|
|
32
|
+
}: InfiniteLoaderProps = $props();
|
|
33
|
+
|
|
34
|
+
let intersectionTarget = $state<HTMLElement>();
|
|
35
|
+
let observer = $state<IntersectionObserver>();
|
|
36
|
+
|
|
37
|
+
let showLoading = $derived(loaderState.status === STATUS.LOADING);
|
|
38
|
+
let showError = $derived(loaderState.status === STATUS.ERROR);
|
|
39
|
+
let showNoResults = $derived(loaderState.status === STATUS.COMPLETE && loaderState.isFirstLoad);
|
|
40
|
+
let showNoData = $derived(loaderState.status === STATUS.COMPLETE && !loaderState.isFirstLoad);
|
|
41
|
+
let showCoolingOff = $derived(loaderState.status !== STATUS.COMPLETE && loopTracker?.coolingOff);
|
|
42
|
+
|
|
43
|
+
async function attemptLoad() {
|
|
44
|
+
// If we're complete, don't attempt to load again
|
|
45
|
+
// If we're not ready (i.e. in the middle of a fetch) don't attempt to load again
|
|
46
|
+
// However, if we're in an error state, allow the user to retry via btn click
|
|
47
|
+
if (
|
|
48
|
+
loaderState.status === STATUS.COMPLETE ||
|
|
49
|
+
(loaderState.status !== STATUS.READY && loaderState.status !== STATUS.ERROR)
|
|
50
|
+
) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
loaderState.status = STATUS.LOADING;
|
|
55
|
+
|
|
56
|
+
// Skip loading if we're in infinite loop cool-off
|
|
57
|
+
if (!loopTracker?.coolingOff) {
|
|
58
|
+
await triggerLoad();
|
|
59
|
+
loopTracker?.track();
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// @ts-expect-error - client can set status to 'COMPLETE' inside the
|
|
63
|
+
// `triggerLoad` fn above via `loaderState.complete()`, TS obviously doesn't know this.
|
|
64
|
+
if (loaderState.status !== STATUS.ERROR && loaderState.status !== STATUS.COMPLETE) {
|
|
65
|
+
if (loaderState.status === STATUS.LOADING) {
|
|
66
|
+
loaderState.isFirstLoad = false;
|
|
67
|
+
loaderState.status = STATUS.READY;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
onMount(() => {
|
|
73
|
+
if (observer || !intersectionTarget) return;
|
|
74
|
+
|
|
75
|
+
const appliedIntersectionOptions = {
|
|
76
|
+
rootMargin: '0px 0px 200px 0px',
|
|
77
|
+
...intersectionOptions,
|
|
78
|
+
};
|
|
79
|
+
observer = new IntersectionObserver(async (entries) => {
|
|
80
|
+
if (entries[0]?.isIntersecting && loaderState.mounted) {
|
|
81
|
+
await attemptLoad();
|
|
82
|
+
}
|
|
83
|
+
}, appliedIntersectionOptions);
|
|
84
|
+
observer.observe(intersectionTarget);
|
|
85
|
+
|
|
86
|
+
loaderState.mounted = true;
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
onDestroy(() => {
|
|
90
|
+
if (loaderState.mounted) {
|
|
91
|
+
if (observer) {
|
|
92
|
+
observer.disconnect();
|
|
93
|
+
}
|
|
94
|
+
if (loopTracker) {
|
|
95
|
+
loopTracker.destroy();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
</script>
|
|
100
|
+
|
|
101
|
+
<div
|
|
102
|
+
bind:this={intersectionTarget}
|
|
103
|
+
class={cn('flex min-h-px w-full flex-col items-center justify-center', className)}
|
|
104
|
+
>
|
|
105
|
+
{#if showLoading}
|
|
106
|
+
{#if loadingSnippet}
|
|
107
|
+
{@render loadingSnippet()}
|
|
108
|
+
{:else}
|
|
109
|
+
Loading...
|
|
110
|
+
{/if}
|
|
111
|
+
{/if}
|
|
112
|
+
|
|
113
|
+
{#if showNoResults}
|
|
114
|
+
{#if noResultsSnippet}
|
|
115
|
+
{@render noResultsSnippet()}
|
|
116
|
+
{:else}
|
|
117
|
+
No results
|
|
118
|
+
{/if}
|
|
119
|
+
{/if}
|
|
120
|
+
|
|
121
|
+
{#if showNoData}
|
|
122
|
+
{#if noDataSnippet}
|
|
123
|
+
{@render noDataSnippet()}
|
|
124
|
+
{:else}
|
|
125
|
+
No more data
|
|
126
|
+
{/if}
|
|
127
|
+
{/if}
|
|
128
|
+
|
|
129
|
+
{#if showCoolingOff}
|
|
130
|
+
{#if coolingOffSnippet}
|
|
131
|
+
{@render coolingOffSnippet()}
|
|
132
|
+
{:else}
|
|
133
|
+
Potential loop detected, please wait and try again..
|
|
134
|
+
{/if}
|
|
135
|
+
{/if}
|
|
136
|
+
|
|
137
|
+
{#if showError}
|
|
138
|
+
{#if errorSnippet}
|
|
139
|
+
{@render errorSnippet(attemptLoad)}
|
|
140
|
+
{:else}
|
|
141
|
+
<div class="flex flex-col gap-1 text-sm">
|
|
142
|
+
<div class="text-destructive-foreground">Oops, something went wrong</div>
|
|
143
|
+
<Button disabled={loaderState.status === STATUS.COMPLETE} onclick={attemptLoad}>
|
|
144
|
+
Retry
|
|
145
|
+
</Button>
|
|
146
|
+
</div>
|
|
147
|
+
{/if}
|
|
148
|
+
{/if}
|
|
149
|
+
</div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type Snippet } from 'svelte';
|
|
2
|
+
import { LoaderState } from './infinite-loader-state.svelte.js';
|
|
3
|
+
import type { LoopTracker } from './infinite-loader-loop-tracker.js';
|
|
4
|
+
declare const InfiniteLoader: import("svelte").Component<{
|
|
5
|
+
triggerLoad: () => Promise<void>;
|
|
6
|
+
intersectionOptions?: Partial<IntersectionObserver>;
|
|
7
|
+
loaderState: LoaderState;
|
|
8
|
+
loopTracker?: LoopTracker;
|
|
9
|
+
class?: string;
|
|
10
|
+
loading?: Snippet;
|
|
11
|
+
noResults?: Snippet;
|
|
12
|
+
noData?: Snippet;
|
|
13
|
+
coolingOff?: Snippet;
|
|
14
|
+
error?: Snippet<[() => Promise<void>]>;
|
|
15
|
+
}, {}, "">;
|
|
16
|
+
type InfiniteLoader = ReturnType<typeof InfiniteLoader>;
|
|
17
|
+
export default InfiniteLoader;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<input
|
|
15
15
|
bind:this={ref}
|
|
16
16
|
class={cn(
|
|
17
|
-
'flex h-10 w-full rounded-md border
|
|
17
|
+
'border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
|
|
18
18
|
className,
|
|
19
19
|
)}
|
|
20
20
|
bind:value
|
|
@@ -14,21 +14,23 @@
|
|
|
14
14
|
Discriminated Unions + Destructing (required for bindable) do not
|
|
15
15
|
get along, so we shut typescript up by casting `value` to `never`.
|
|
16
16
|
-->
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
17
|
+
<div class="mx-2.5">
|
|
18
|
+
<SliderPrimitive.Root
|
|
19
|
+
bind:value={value as never}
|
|
20
|
+
bind:ref
|
|
21
|
+
class={cn('relative flex w-full touch-none select-none items-center', className)}
|
|
22
|
+
{...restProps}
|
|
23
|
+
>
|
|
24
|
+
{#snippet children({ thumbs })}
|
|
25
|
+
<span class="bg-secondary relative -mx-2.5 h-2 w-full grow overflow-hidden rounded-full">
|
|
26
|
+
<SliderPrimitive.Range class="bg-primary absolute h-full" />
|
|
27
|
+
</span>
|
|
28
|
+
{#each thumbs as thumb}
|
|
29
|
+
<SliderPrimitive.Thumb
|
|
30
|
+
index={thumb}
|
|
31
|
+
class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
32
|
+
/>
|
|
33
|
+
{/each}
|
|
34
|
+
{/snippet}
|
|
35
|
+
</SliderPrimitive.Root>
|
|
36
|
+
</div>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Tabs as TabsPrimitive } from "bits-ui";
|
|
2
|
+
import Content from "./tabs-content.svelte";
|
|
3
|
+
import List from "./tabs-list.svelte";
|
|
4
|
+
import Trigger from "./tabs-trigger.svelte";
|
|
5
|
+
declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
|
|
6
|
+
export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Tabs as TabsPrimitive } from "bits-ui";
|
|
2
|
+
import Content from "./tabs-content.svelte";
|
|
3
|
+
import List from "./tabs-list.svelte";
|
|
4
|
+
import Trigger from "./tabs-trigger.svelte";
|
|
5
|
+
const Root = TabsPrimitive.Root;
|
|
6
|
+
export { Root, Content, List, Trigger,
|
|
7
|
+
//
|
|
8
|
+
Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tabs as TabsPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: TabsPrimitive.ContentProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<TabsPrimitive.Content
|
|
13
|
+
bind:ref
|
|
14
|
+
class={cn(
|
|
15
|
+
"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
16
|
+
className
|
|
17
|
+
)}
|
|
18
|
+
{...restProps}
|
|
19
|
+
/>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tabs as TabsPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: TabsPrimitive.ListProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<TabsPrimitive.List
|
|
13
|
+
bind:ref
|
|
14
|
+
class={cn(
|
|
15
|
+
"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
|
|
16
|
+
className
|
|
17
|
+
)}
|
|
18
|
+
{...restProps}
|
|
19
|
+
/>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Tabs as TabsPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: TabsPrimitive.TriggerProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<TabsPrimitive.Trigger
|
|
13
|
+
bind:ref
|
|
14
|
+
class={cn(
|
|
15
|
+
"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
|
|
16
|
+
className
|
|
17
|
+
)}
|
|
18
|
+
{...restProps}
|
|
19
|
+
/>
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import { type VariantProps, tv } from 'tailwind-variants';
|
|
3
3
|
|
|
4
4
|
export const toggleVariants = tv({
|
|
5
|
-
base: 'ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:
|
|
5
|
+
base: 'ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
|
|
6
|
+
// [&_svg]:size-4
|
|
6
7
|
variants: {
|
|
7
8
|
variant: {
|
|
8
9
|
default: 'bg-transparent',
|
|
@@ -46,6 +47,6 @@
|
|
|
46
47
|
<TogglePrimitive.Root
|
|
47
48
|
bind:ref
|
|
48
49
|
bind:pressed
|
|
49
|
-
class={cn(toggleVariants({ variant, size, className
|
|
50
|
+
class={cn(toggleVariants({ variant, size }), className)}
|
|
50
51
|
{...restProps}
|
|
51
52
|
/>
|
|
@@ -10,29 +10,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
sm: string;
|
|
11
11
|
lg: string;
|
|
12
12
|
};
|
|
13
|
-
}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:
|
|
14
|
-
variant: {
|
|
15
|
-
default: string;
|
|
16
|
-
outline: string;
|
|
17
|
-
};
|
|
18
|
-
size: {
|
|
19
|
-
default: string;
|
|
20
|
-
xs: string;
|
|
21
|
-
sm: string;
|
|
22
|
-
lg: string;
|
|
23
|
-
};
|
|
24
|
-
}, {
|
|
25
|
-
variant: {
|
|
26
|
-
default: string;
|
|
27
|
-
outline: string;
|
|
28
|
-
};
|
|
29
|
-
size: {
|
|
30
|
-
default: string;
|
|
31
|
-
xs: string;
|
|
32
|
-
sm: string;
|
|
33
|
-
lg: string;
|
|
34
|
-
};
|
|
35
|
-
}>, {
|
|
13
|
+
}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
36
14
|
variant: {
|
|
37
15
|
default: string;
|
|
38
16
|
outline: string;
|
|
@@ -54,29 +32,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
|
|
|
54
32
|
sm: string;
|
|
55
33
|
lg: string;
|
|
56
34
|
};
|
|
57
|
-
}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:
|
|
58
|
-
variant: {
|
|
59
|
-
default: string;
|
|
60
|
-
outline: string;
|
|
61
|
-
};
|
|
62
|
-
size: {
|
|
63
|
-
default: string;
|
|
64
|
-
xs: string;
|
|
65
|
-
sm: string;
|
|
66
|
-
lg: string;
|
|
67
|
-
};
|
|
68
|
-
}, {
|
|
69
|
-
variant: {
|
|
70
|
-
default: string;
|
|
71
|
-
outline: string;
|
|
72
|
-
};
|
|
73
|
-
size: {
|
|
74
|
-
default: string;
|
|
75
|
-
xs: string;
|
|
76
|
-
sm: string;
|
|
77
|
-
lg: string;
|
|
78
|
-
};
|
|
79
|
-
}>, unknown, unknown, undefined>>;
|
|
35
|
+
}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
|
|
80
36
|
export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
|
|
81
37
|
export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
|
|
82
38
|
export type ToggleVariants = VariantProps<typeof toggleVariants>;
|
package/dist/plugin.js
CHANGED
|
@@ -126,8 +126,9 @@ export default plugin(function ({ addBase }) {
|
|
|
126
126
|
sm: 'calc(var(--radius) - 4px)',
|
|
127
127
|
},
|
|
128
128
|
boxShadow: {
|
|
129
|
-
inner: 'inset 0 0 0 1px hsl(var(--
|
|
130
|
-
|
|
129
|
+
'inner-1': 'inset 0 0 0 1px hsl(var(--muted-foreground))',
|
|
130
|
+
hover: 'inset 0 0 0 2px hsl(var(--muted-foreground)), inset 0px 0px 0px 4px hsl(var(--background))',
|
|
131
|
+
active: 'inset 0 0 0 2px hsl(var(--primary)), inset 0px 0px 0px 4px hsl(var(--background))',
|
|
131
132
|
},
|
|
132
133
|
keyframes: {
|
|
133
134
|
'accordion-down': {
|
package/dist/utils.d.ts
CHANGED
|
@@ -2,5 +2,6 @@ import { type ClassValue } from 'clsx';
|
|
|
2
2
|
export declare function generateId(): string;
|
|
3
3
|
export declare const noop: () => void;
|
|
4
4
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
5
|
+
export declare const checkIfMac: () => boolean;
|
|
5
6
|
export declare function createDebouncedCallback<T extends (...args: any[]) => any>(callback: T, delay: number): (...args: Parameters<T>) => void;
|
|
6
7
|
export declare function createThrottleCallback<T extends (...args: unknown[]) => unknown>(callback: T, limit: number): (...args: Parameters<T>) => void;
|
package/dist/utils.js
CHANGED
|
@@ -10,6 +10,7 @@ export const noop = () => {
|
|
|
10
10
|
export function cn(...inputs) {
|
|
11
11
|
return twMerge(clsx(inputs));
|
|
12
12
|
}
|
|
13
|
+
export const checkIfMac = () => /Mac OS X/.test(navigator.userAgent);
|
|
13
14
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
15
|
export function createDebouncedCallback(callback, delay) {
|
|
15
16
|
let timeout = null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@peteai/presentation-editor",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run package",
|
|
@@ -43,36 +43,34 @@
|
|
|
43
43
|
"svelte": "^5.19.7"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@playwright/test": "^1.
|
|
47
|
-
"@sveltejs/adapter-auto": "^
|
|
48
|
-
"@sveltejs/kit": "^2.
|
|
49
|
-
"@sveltejs/package": "^2.3.
|
|
50
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
46
|
+
"@playwright/test": "^1.52.0",
|
|
47
|
+
"@sveltejs/adapter-auto": "^6.0.0",
|
|
48
|
+
"@sveltejs/kit": "^2.20.8",
|
|
49
|
+
"@sveltejs/package": "^2.3.11",
|
|
50
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
51
|
+
"@tiptap/extension-list-keymap": "^2.12.0",
|
|
51
52
|
"@types/eslint": "^9.6.1",
|
|
52
53
|
"@types/uniqid": "^5.3.4",
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"eslint": "^9.
|
|
56
|
-
"eslint-config-prettier": "^
|
|
57
|
-
"eslint-plugin-svelte": "^
|
|
58
|
-
"globals": "^
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"prettier": "^3.4.2",
|
|
54
|
+
"@types/webfontloader": "^1.6.38",
|
|
55
|
+
"autoprefixer": "^10.4.21",
|
|
56
|
+
"eslint": "^9.26.0",
|
|
57
|
+
"eslint-config-prettier": "^10.1.3",
|
|
58
|
+
"eslint-plugin-svelte": "^3.5.1",
|
|
59
|
+
"globals": "^16.1.0",
|
|
60
|
+
"postcss-cli": "^11.0.1",
|
|
61
|
+
"prettier": "^3.5.3",
|
|
62
62
|
"prettier-plugin-svelte": "^3.3.3",
|
|
63
63
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
64
|
-
"publint": "^0.
|
|
65
|
-
"svelte": "^5.
|
|
66
|
-
"svelte-check": "^4.1.
|
|
64
|
+
"publint": "^0.3.12",
|
|
65
|
+
"svelte": "^5.28.2",
|
|
66
|
+
"svelte-check": "^4.1.7",
|
|
67
67
|
"svelte-kit-sst": "^2.43.5",
|
|
68
|
-
"tailwind-merge": "^2.6.0",
|
|
69
|
-
"tailwind-variants": "^0.2.1",
|
|
70
68
|
"tailwindcss": "^3.4.17",
|
|
71
69
|
"tailwindcss-animate": "^1.0.7",
|
|
72
|
-
"typescript": "^5.
|
|
73
|
-
"typescript-eslint": "^8.
|
|
74
|
-
"vite": "^
|
|
75
|
-
"vitest": "^
|
|
70
|
+
"typescript": "^5.8.3",
|
|
71
|
+
"typescript-eslint": "^8.32.0",
|
|
72
|
+
"vite": "^6.3.5",
|
|
73
|
+
"vitest": "^3.1.3"
|
|
76
74
|
},
|
|
77
75
|
"dependencies": {
|
|
78
76
|
"@tiptap/core": "^2.11.5",
|
|
@@ -90,10 +88,15 @@
|
|
|
90
88
|
"@tiptap/extension-text-style": "^2.11.5",
|
|
91
89
|
"@tiptap/extension-underline": "^2.11.5",
|
|
92
90
|
"@tiptap/pm": "^2.11.5",
|
|
91
|
+
"bits-ui": "^1.4.6",
|
|
93
92
|
"clsx": "^2.1.1",
|
|
94
93
|
"esm-env": "^1.2.2",
|
|
94
|
+
"lucide-svelte": "^0.508.0",
|
|
95
95
|
"svelte-dnd-action": "^0.9.57",
|
|
96
96
|
"svelte-radix": "^2.0.1",
|
|
97
|
-
"
|
|
97
|
+
"tailwind-merge": "^3.2.0",
|
|
98
|
+
"tailwind-variants": "^1.0.0",
|
|
99
|
+
"uniqid": "^5.4.0",
|
|
100
|
+
"webfontloader": "^1.6.28"
|
|
98
101
|
}
|
|
99
102
|
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
|
|
3
|
-
import type { Layer } from '../types.js';
|
|
4
|
-
|
|
5
|
-
interface Props {
|
|
6
|
-
layer: Layer | 'background';
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
let { layer }: Props = $props();
|
|
10
|
-
|
|
11
|
-
const editor = getPresentationEditorContext();
|
|
12
|
-
|
|
13
|
-
let x = $derived(layer === 'background' ? 0 : layer.x * editor.zoom);
|
|
14
|
-
let y = $derived(layer === 'background' ? 0 : layer.y * editor.zoom);
|
|
15
|
-
let width = $derived(
|
|
16
|
-
(layer === 'background' ? editor.width : layer.width * (layer.scale || 1)) * editor.zoom,
|
|
17
|
-
);
|
|
18
|
-
let height = $derived(
|
|
19
|
-
(layer === 'background' ? editor.height : layer.height * (layer.scale || 1)) * editor.zoom,
|
|
20
|
-
);
|
|
21
|
-
let rotate = $derived(layer === 'background' ? 0 : layer.rotate || 0);
|
|
22
|
-
</script>
|
|
23
|
-
|
|
24
|
-
<div
|
|
25
|
-
class="absolute"
|
|
26
|
-
style:width="{width}px"
|
|
27
|
-
style:height="{height}px"
|
|
28
|
-
style:transform={`translate(${x}px, ${y}px) rotate(${rotate}deg)`}
|
|
29
|
-
>
|
|
30
|
-
<div
|
|
31
|
-
class="absolute -inset-px border-2 border-purple-500"
|
|
32
|
-
style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
|
|
33
|
-
></div>
|
|
34
|
-
</div>
|
package/dist/components/presentation-editor/layers/types/background/background-layer-thumb.svelte
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { Slide } from '../../../types.js';
|
|
3
|
-
import BackgroundContent from './background-content.svelte';
|
|
4
|
-
|
|
5
|
-
interface Props {
|
|
6
|
-
slide: Slide;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
let { slide }: Props = $props();
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<BackgroundContent {slide} />
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { Slide } from '../../../types.js';
|
|
2
|
-
interface Props {
|
|
3
|
-
slide: Slide;
|
|
4
|
-
}
|
|
5
|
-
declare const BackgroundLayerThumb: import("svelte").Component<Props, {}, "">;
|
|
6
|
-
type BackgroundLayerThumb = ReturnType<typeof BackgroundLayerThumb>;
|
|
7
|
-
export default BackgroundLayerThumb;
|