diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte index 66157da4b..3b82b5b03 100644 --- a/packages/web/src/designer/Designer.svelte +++ b/packages/web/src/designer/Designer.svelte @@ -503,6 +503,45 @@ updateFromDbInfo(); }; + function forEachSelected(op: Function) { + for (const tbl of _.values(tableRefs)) { + const table = tbl as any; + if (!table.isSelected()) continue; + op(table); + } + } + + const tableMoveStart = () => { + forEachSelected(t => t.moveStart()); + }; + const tableMove = (x, y) => { + forEachSelected(t => t.move(x, y)); + tick().then(recomputeReferencePositions); + }; + const tableMoveEnd = () => { + const moves = {}; + forEachSelected(t => { + moves[t.getDesignerId()] = t.moveEnd(); + }); + callChange(current => { + return { + ...current, + tables: (current?.tables || []).map(table => { + const position = moves[table.designerId]; + return position + ? { + ...table, + left: position.left, + top: position.top, + } + : table; + }), + }; + }); + + tick().then(recomputeReferencePositions); + }; + function recomputeReferencePositions() { for (const ref of Object.values(referenceRefs) as any[]) { if (ref) ref.recomputePosition(); @@ -650,6 +689,9 @@ onBringToFront={bringToFront} onSelectTable={selectTable} onRemoveTable={removeTable} + onMoveStart={tableMoveStart} + onMove={tableMove} + onMoveEnd={tableMoveEnd} {domCanvas} designer={value} {sourceDragColumn$} diff --git a/packages/web/src/designer/DesignerTable.svelte b/packages/web/src/designer/DesignerTable.svelte index 898ccdc65..5da1c193c 100644 --- a/packages/web/src/designer/DesignerTable.svelte +++ b/packages/web/src/designer/DesignerTable.svelte @@ -20,6 +20,10 @@ export let onSelectColumn; export let onChangeColumn; + export let onMoveStart; + export let onMove; + export let onMoveEnd; + // export let sourceDragColumn; // export let setSourceDragColumn; // export let targetDragColumn; @@ -48,22 +52,56 @@ $: left = table?.left; $: top = table?.top; - function handleMoveStart() { + export function isSelected() { + return table?.isSelectedTable; + } + + export function getDesignerId() { + return designerId; + } + + export function moveStart() { movingPosition = { left, top }; } - function handleMove(x, y) { + + export function move(x, y) { movingPosition.left += x; movingPosition.top += y; - tick().then(onMoveReferences); + } + + export function moveEnd() { + const res = movingPosition; + movingPosition = null; + return res; + } + + function handleMoveStart() { + if (settings?.canSelectTables) { + onMoveStart(); + } else { + moveStart(); + } + } + function handleMove(x, y) { + if (settings?.canSelectTables) { + onMove(x, y); + } else { + move(x, y); + tick().then(onMoveReferences); + } } function handleMoveEnd() { - onChangeTable({ - ...table, - left: movingPosition.left, - top: movingPosition.top, - }); - movingPosition = null; - tick().then(onMoveReferences); + if (settings?.canSelectTables) { + onMoveEnd(); + } else { + const position = moveEnd(); + onChangeTable({ + ...table, + left: position.left, + top: position.top, + }); + tick().then(onMoveReferences); + } } export function getDomTable() { @@ -157,10 +195,10 @@ {/each} {#if table?.isSelectedTable} -
-
-
-
+
+
+
+
{/if}