From 752a1c958dfc3129807c77cd45c1b849136aa53f Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Thu, 21 Aug 2025 17:32:47 +0000 Subject: [PATCH] fix(app): fix ctrl drag for insertion into subgrids --- .../components/apps/editor/GridEditor.svelte | 8 +-- .../apps/editor/SubGridEditor.svelte | 11 ++- .../components/apps/svelte-grid/Grid.svelte | 67 ++++++++++++------- .../apps/svelte-grid/MoveResize.svelte | 41 +++++++----- 4 files changed, 74 insertions(+), 53 deletions(-) diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte index 4b541cf2ef..14482470d7 100644 --- a/frontend/src/lib/components/apps/editor/GridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte @@ -200,14 +200,12 @@ allIdsInPath={$allIdsInPath} selectedIds={$selectedComponent} items={$app.grid} - on:redraw={(e) => { + onRedraw={(grid) => { push(history, $app) - $app.grid = e.detail + $app.grid = grid }} root - on:dropped={(e) => { - const { id, overlapped, x, y } = e.detail - + onDropped={({ id, overlapped, x, y }) => { const overlappedComponent = findGridItem($app, overlapped) if (overlappedComponent && !isContainer(overlappedComponent.data.type)) { diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte index f0947dd213..7d361fee29 100644 --- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte +++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte @@ -218,7 +218,7 @@ {#if $mode !== 'preview'}
{ + onRedraw={(grid) => { push(editorContext?.history, $app) if ($app.subgrids) { - $app.subgrids[subGridId] = e.detail + $app.subgrids[subGridId] = grid } }} selectedIds={$selectedComponent} scroller={container} parentWidth={$parentWidth - 17} {containerWidth} - on:dropped={(e) => { - const { id, overlapped, x, y } = e.detail - + onDropped={({ id, overlapped, x, y }) => { if (!overlapped) { moveToRoot(id, { x, y }) } else { @@ -257,7 +255,6 @@ if (id === overlapped) { return } - moveComponentBetweenSubgrids( id, overlapped, diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte index 87232c1029..f20ee9baf1 100644 --- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte +++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte @@ -16,7 +16,7 @@ import { getContainerHeight } from './utils/container' import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item' - import { onMount, createEventDispatcher, getContext } from 'svelte' + import { onMount, getContext } from 'svelte' import { getColumn, throttle } from './utils/other' import MoveResize from './MoveResize.svelte' import type { FilledItem } from './types' @@ -34,8 +34,6 @@ type GridShadow } from '../editor/appUtils' - const dispatch = createEventDispatcher() - type T = $$Generic const { app, worldStore } = getContext('AppViewerContext') @@ -55,6 +53,20 @@ parentWidth?: number | undefined disableMove?: boolean children?: import('svelte').Snippet<[any]> + onDropped?: (e: { id: string; overlapped: string; x: number; y: number }) => void + onRedraw?: (grid: FilledItem[]) => void + onResize?: (e: { + cols: number + xPerPx: number + yPerPx: number + width: number | undefined + }) => void + onMounted?: (e: { + cols: number + xPerPx: number + yPerPx: number + width: number | undefined + }) => void } let { @@ -71,7 +83,11 @@ root = false, parentWidth = undefined, disableMove = false, - children + children, + onDropped, + onRedraw, + onResize, + onMounted }: Props = $props() const cols = columnConfiguration @@ -83,10 +99,10 @@ let xPerPx = $state(0) let yPerPx = rowHeight - const onResize = throttle(() => { + const onResizeThrottled = throttle(() => { if (!getComputedCols) return sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols) - dispatch('resize', { + onResize?.({ cols: getComputedCols, xPerPx, yPerPx, @@ -116,13 +132,14 @@ if (!containerWidth && getComputedCols) { sortedItems = specifyUndefinedColumns(sortedItems, getComputedCols, cols) - dispatch('mount', { + onMounted?.({ cols: getComputedCols, xPerPx, - yPerPx // same as rowHeight + yPerPx, + width }) } else { - onResize() + onResizeThrottled() } containerWidth = width @@ -162,8 +179,7 @@ }) : [] } - const updateMatrix = ({ detail }) => { - let isPointerUp = detail.isPointerUp + const updateMatrix = ({ isPointerUp, id, activate }) => { let citems: FilledItem[] if (isPointerUp) { if (initItems == undefined) { @@ -179,8 +195,8 @@ citems = smartCopy(initItems) } let nselectedIds = selectedIds ?? [] - if (detail.id && !selectedIds?.includes(detail.id)) { - nselectedIds = [detail.id, ...(selectedIds ?? [])] + if (id && !selectedIds?.includes(id)) { + nselectedIds = [id, ...(selectedIds ?? [])] } for (let id of nselectedIds) { let activeItem = getItemById(id, citems) @@ -235,13 +251,13 @@ } for (let id of nselectedIds ?? []) { - if (detail.activate) { + if (activate) { moveResizes?.[id]?.inActivate() } } if (isPointerUp && getComputedCols) { - dispatch('redraw', sortGridItemsPosition(smartCopy(sortedItems), getComputedCols)) + onRedraw?.(sortGridItemsPosition(smartCopy(sortedItems), getComputedCols)) } } @@ -259,11 +275,11 @@ } | undefined = $state(undefined) - const handleRepaint = ({ detail }) => { - if (!detail.isPointerUp) { - throttleMatrix({ detail }) + const handleRepaint = ({ isPointerUp, id, activate }) => { + if (!isPointerUp) { + throttleMatrix({ isPointerUp, id, activate }) } else { - updateMatrix({ detail }) + updateMatrix({ isPointerUp, id, activate }) } /** @@ -488,19 +504,19 @@ {/if} handleInitMove(item.id)} + onInitMove={() => handleInitMove(item.id)} onMove={handleMove} bind:shadow={shadows[item.id]} bind:this={moveResizes[item.id]} - on:repaint={handleRepaint} - on:resizeStart={() => (resizing = true)} - on:resizeEnd={() => (resizing = false)} + onRepaint={handleRepaint} + onResizeStart={() => (resizing = true)} + onResizeEnd={() => (resizing = false)} onTop={Boolean(allIdsInPath?.includes(item.id))} id={item.id} {xPerPx} {yPerPx} fakeShadow={$fakeShadowStore} - on:dropped={(e) => { + onDropped={({ id, overlapped, x, y }) => { $componentDraggedIdStore = undefined $componentDraggedParentIdStore = undefined $overlappedStore = undefined @@ -510,8 +526,7 @@ if ($moveMode === 'move') { return } - - dispatch('dropped', e.detail) + onDropped?.({ id, overlapped, x, y }) }} width={xPerPx == 0 ? 0 diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte index 6a558d396d..d7d6420b79 100644 --- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte +++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte @@ -1,5 +1,5 @@