diff --git a/src/lib/EditableWebsite.svelte b/src/lib/EditableWebsite.svelte index b7178d3..26f1755 100644 --- a/src/lib/EditableWebsite.svelte +++ b/src/lib/EditableWebsite.svelte @@ -299,8 +299,8 @@ } // Auto-scroll when dragging near top or bottom of viewport - const scrollZone = 150; - const scrollSpeed = 15; + const scrollZone = 100; + const scrollSpeed = 10; const viewportHeight = window.innerHeight; if (e.clientY < scrollZone) { @@ -374,25 +374,6 @@ {/each} - {#if activeDragElement.element && activeDragElement.x >= 0 && activeDragElement.item} - {@const finalPos = simulateFinalPosition( - items, - activeDragElement.item, - activeDragElement.x, - activeDragElement.y, - isMobile - )} -
- {/if} -
diff --git a/src/lib/cards/BaseCard/BaseCard.svelte b/src/lib/cards/BaseCard/BaseCard.svelte index 4214a2f..2cf4806 100644 --- a/src/lib/cards/BaseCard/BaseCard.svelte +++ b/src/lib/cards/BaseCard/BaseCard.svelte @@ -7,9 +7,9 @@ import { getColor } from '..'; const colors = { - base: 'border-base-300 shadow-lg dark:shadow-none inset-shadow-sm inset-shadow-base-500/10 shadow-base-900/5 bg-base-50 dark:border-base-700 dark:bg-base-900 border', + base: 'border-base-300 shadow-lg dark:shadow-none inset-shadow-sm inset-shadow-base-500/10 shadow-base-900/5 bg-base-50 dark:border-base-700 dark:bg-base-900/30 border', accent: - 'border-accent-300 shadow-lg inset-shadow-sm inset-shadow-accent-500/10 shadow-accent-900/10 bg-accent-50 dark:border-accent-900 dark:bg-accent-950/20 border', + 'border-accent-300 shadow-lg inset-shadow-sm inset-shadow-accent-500/10 shadow-accent-900/10 bg-accent-50 dark:border-accent-900 dark:bg-accent-900/10 border dark:inset-shadow-accent-500/20', transparent: '' } as Record; @@ -39,7 +39,7 @@ bind:this={ref} draggable={isEditing} class={[ - 'card group focus-within:outline-accent-500 @container/card absolute z-0 rounded-2xl outline-offset-2 transition-all duration-200 focus-within:outline-2', + 'card group focus-within:outline-accent-500 @container/card absolute z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2 isolate', color ? (colors[color] ?? colors.accent) : colors.base, color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? color : '', showOutline ? 'outline-2' : '' @@ -60,7 +60,7 @@ --columns: ${COLUMNS}`} {...rest} > -
+
{@render children?.()}
{@render controls?.()} diff --git a/src/lib/cards/BaseCard/BaseEditingCard.svelte b/src/lib/cards/BaseCard/BaseEditingCard.svelte index f60000e..52c35b3 100644 --- a/src/lib/cards/BaseCard/BaseEditingCard.svelte +++ b/src/lib/cards/BaseCard/BaseEditingCard.svelte @@ -62,7 +62,7 @@ const minH = $derived(cardDef.minH ?? (isMobile() ? 2 : 2)); const maxW = $derived(cardDef.maxW ?? COLUMNS); - const maxH = $derived(cardDef.maxH ?? 6); + const maxH = $derived(cardDef.maxH ?? (isMobile() ? 12 : 6)); // Resize handle state let isResizing = $state(false); @@ -99,9 +99,6 @@ const deltaX = e.clientX - resizeStartX; const deltaY = e.clientY - resizeStartY; - const refRect = ref.getBoundingClientRect(); - - console.log(Math.round(deltaX / cellSize)); // Convert pixel delta to grid units (2 grid units = 1 visual cell) const gridDeltaW = Math.round(deltaX / cellSize); const gridDeltaH = Math.round(deltaY / cellSize); @@ -135,6 +132,27 @@ document.removeEventListener('pointermove', handleResizeMove); document.removeEventListener('pointerup', handleResizeEnd); } + + + function canSetSize(w: number, h: number) { + if (!cardDef) return false; + + if(isMobile()) { + w *= 2; + h *= 2; + } + + return w >= minW && w <= maxW && h >= minH && h <= maxH; + } + + function setSize(w: number, h: number) { + + if(isMobile()) { + w *= 2; + h *= 2; + } + onsetsize?.(w, h); + } @@ -170,12 +188,12 @@
{#snippet child({ props })} @@ -216,6 +234,56 @@ /> + + {#if canSetSize(2, 2)} + + {/if} + + {#if canSetSize(4, 2)} + + {/if} + {#if canSetSize(2, 4)} + + {/if} + {#if canSetSize(4, 4)} + + {/if} + {#if onshowsettings}