From fc06811b2c5b562518d463a8976d490f3bc8454e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 22 Feb 2023 15:48:17 +0000 Subject: [PATCH] Rename reordering to reorder --- ...older.svelte => ReorderPlaceholder.svelte} | 6 +-- .../app/spreadsheet/Spreadsheet.svelte | 39 +++++++++---------- .../stores/{reordering.js => reorder.js} | 31 +++++++-------- .../app/spreadsheet/stores/resize.js | 0 4 files changed, 37 insertions(+), 39 deletions(-) rename packages/client/src/components/app/spreadsheet/{ReorderingPlaceholder.svelte => ReorderPlaceholder.svelte} (76%) rename packages/client/src/components/app/spreadsheet/stores/{reordering.js => reorder.js} (83%) create mode 100644 packages/client/src/components/app/spreadsheet/stores/resize.js diff --git a/packages/client/src/components/app/spreadsheet/ReorderingPlaceholder.svelte b/packages/client/src/components/app/spreadsheet/ReorderPlaceholder.svelte similarity index 76% rename from packages/client/src/components/app/spreadsheet/ReorderingPlaceholder.svelte rename to packages/client/src/components/app/spreadsheet/ReorderPlaceholder.svelte index d57a299f7f..b3cd754cd8 100644 --- a/packages/client/src/components/app/spreadsheet/ReorderingPlaceholder.svelte +++ b/packages/client/src/components/app/spreadsheet/ReorderPlaceholder.svelte @@ -1,9 +1,9 @@ -{#if $reorderingPlaceholder.x != null} +{#if $reorderPlaceholder.x != null}
{/if} diff --git a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte index ddf71b3b57..2419c65564 100644 --- a/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte +++ b/packages/client/src/components/app/spreadsheet/Spreadsheet.svelte @@ -10,8 +10,8 @@ import NumberCell from "./cells/NumberCell.svelte" import RelationshipCell from "./cells/RelationshipCell.svelte" import { getColor } from "./utils.js" - import { createReorderingStores } from "./stores/reordering" - import ReorderingPlaceholder from "./ReorderingPlaceholder.svelte" + import { createReorderStores } from "./stores/reorder" + import ReorderPlaceholder from "./ReorderPlaceholder.svelte" export let table export let filter @@ -43,11 +43,11 @@ selectedCellId, selectedRows, } - const { reordering, reorderingPlaceholder } = createReorderingStores(context) + const { reorder, reorderPlaceholder } = createReorderStores(context) setContext("spreadsheet", { ...context, - reordering, - reorderingPlaceholder, + reorder, + reorderPlaceholder, }) let horizontallyScrolled = false @@ -301,9 +301,9 @@ class="header cell" class:sticky={fieldIdx === 0} class:shadow={horizontallyScrolled} - class:reordering-source={$reordering.columnIdx === fieldIdx} - class:reordering-target={$reordering.swapColumnIdx === fieldIdx} - on:mousedown={e => reordering.actions.startReordering(fieldIdx, e)} + class:reorder-source={$reorder.columnIdx === fieldIdx} + class:reorder-target={$reorder.swapColumnIdx === fieldIdx} + on:mousedown={e => reorder.actions.startReordering(fieldIdx, e)} id={`sheet-${rand}-header-${fieldIdx}`} >
@@ -354,8 +354,8 @@ class:hovered={rowHovered} class:selected={$selectedCellId === cellIdx} class:shadow={horizontallyScrolled} - class:reordering-source={$reordering.columnIdx === fieldIdx} - class:reordering-target={$reordering.swapColumnIdx === fieldIdx} + class:reorder-source={$reorder.columnIdx === fieldIdx} + class:reorder-target={$reorder.swapColumnIdx === fieldIdx} on:focus on:mouseover={() => ($hoveredRowId = row._id)} on:click={() => ($selectedCellId = cellIdx)} @@ -374,8 +374,7 @@
{/each} @@ -395,8 +394,8 @@ class:sticky={fieldIdx === 0} class:shadow={horizontallyScrolled} class:hovered={$hoveredRowId === "new"} - class:reordering-source={$reordering.columnIdx === fieldIdx} - class:reordering-target={$reordering.swapColumnIdx === fieldIdx} + class:reorder-source={$reorder.columnIdx === fieldIdx} + class:reorder-target={$reorder.swapColumnIdx === fieldIdx} on:click={() => addRow(field)} on:focus on:mouseover={() => ($hoveredRowId = "new")} @@ -405,7 +404,7 @@
@@ -413,7 +412,7 @@
- +
@@ -573,11 +572,11 @@ background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent); } - /* Reordering styles */ - .cell.reordering-source { + /* Reorder styles */ + .cell.reorder-source { background: var(--spectrum-global-color-gray-200); } - .cell.reordering-target { + .cell.reorder-target { border-left-color: var(--spectrum-global-color-blue-400); } diff --git a/packages/client/src/components/app/spreadsheet/stores/reordering.js b/packages/client/src/components/app/spreadsheet/stores/reorder.js similarity index 83% rename from packages/client/src/components/app/spreadsheet/stores/reordering.js rename to packages/client/src/components/app/spreadsheet/stores/reorder.js index 71cbeaa151..972db3a6ce 100644 --- a/packages/client/src/components/app/spreadsheet/stores/reordering.js +++ b/packages/client/src/components/app/spreadsheet/stores/reorder.js @@ -1,14 +1,14 @@ import { get, writable } from "svelte/store" -export const createReorderingStores = context => { +export const createReorderStores = context => { const { columns, rand, rows } = context - const reorderingInitialState = { + const reorderInitialState = { columnIdx: null, swapColumnIdx: null, breakpoints: [], initialMouseX: null, } - const reordering = writable(reorderingInitialState) + const reorder = writable(reorderInitialState) // This is broken into its own store as it is rapidly updated, and we want to // ensure good performance by avoiding updating other components which depend @@ -26,7 +26,6 @@ export const createReorderingStores = context => { // Generate new breakpoints for the current columns let breakpoints = [] const cols = get(columns) - console.log(cols) cols.forEach((col, idx) => { const header = document.getElementById(`sheet-${rand}-header-${idx}`) const bounds = header.getBoundingClientRect() @@ -43,7 +42,7 @@ export const createReorderingStores = context => { const bodyBounds = body.getBoundingClientRect() // Update state - reordering.set({ + reorder.set({ columnIdx, breakpoints, swapColumnIdx: null, @@ -66,20 +65,20 @@ export const createReorderingStores = context => { // Callback when moving the mouse when reordering columns const onReorderMouseMove = e => { - const $reordering = get(reordering) - if ($reordering.columnIdx == null) { + const $reorder = get(reorder) + if ($reorder.columnIdx == null) { return } // Compute new placeholder position const $placeholder = get(placeholder) - let newX = e.clientX - $reordering.initialMouseX + $placeholder.initialX + let newX = e.clientX - $reorder.initialMouseX + $placeholder.initialX newX = Math.max(0, newX) // Compute the closest breakpoint to the current position let swapColumnIdx let minDistance = Number.MAX_SAFE_INTEGER - $reordering.breakpoints.forEach((point, idx) => { + $reorder.breakpoints.forEach((point, idx) => { const distance = Math.abs(point - e.clientX) if (distance < minDistance) { minDistance = distance @@ -92,8 +91,8 @@ export const createReorderingStores = context => { state.x = newX return state }) - if (swapColumnIdx !== $reordering.swapColumnIdx) { - reordering.update(state => { + if (swapColumnIdx !== $reorder.swapColumnIdx) { + reorder.update(state => { state.swapColumnIdx = swapColumnIdx return state }) @@ -103,7 +102,7 @@ export const createReorderingStores = context => { // Callback when stopping reordering columns const stopReordering = () => { // Swap position of columns - let { columnIdx, swapColumnIdx } = get(reordering) + let { columnIdx, swapColumnIdx } = get(reorder) const newColumns = get(columns).slice() const removed = newColumns.splice(columnIdx, 1) if (--swapColumnIdx < columnIdx) { @@ -113,7 +112,7 @@ export const createReorderingStores = context => { columns.set(newColumns) // Reset state - reordering.set(reorderingInitialState) + reorder.set(reorderInitialState) placeholder.set(placeholderInitialState) // Remove event handlers @@ -122,13 +121,13 @@ export const createReorderingStores = context => { } return { - reordering: { - ...reordering, + reorder: { + ...reorder, actions: { startReordering, stopReordering, }, }, - reorderingPlaceholder: placeholder, + reorderPlaceholder: placeholder, } } diff --git a/packages/client/src/components/app/spreadsheet/stores/resize.js b/packages/client/src/components/app/spreadsheet/stores/resize.js new file mode 100644 index 0000000000..e69de29bb2