From 465d10a8bed6ede9c766df945fd2aff59b48e391 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 18 Oct 2022 18:29:21 +0100 Subject: [PATCH] Allow grid DND without selecting components --- .../src/builderStore/store/frontend.js | 14 ++--- .../[screenId]/_components/AppPreview.svelte | 2 +- .../client/src/components/Component.svelte | 3 +- .../src/components/preview/DNDHandler.svelte | 12 +++-- .../components/preview/GridDNDHandler.svelte | 16 +++--- .../components/preview/HoverIndicator.svelte | 26 +++++++-- .../src/components/preview/Indicator.svelte | 53 +++++++++++-------- .../src/components/preview/SettingsBar.svelte | 4 +- packages/client/src/stores/builder.js | 11 +--- packages/client/src/stores/dnd.js | 1 + packages/client/src/stores/index.js | 1 + 11 files changed, 88 insertions(+), 55 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index c8ebf258ca..2b8a5ec701 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -542,12 +542,11 @@ export const getFrontendStore = () => { }, patch: async (patchFn, componentId, screenId) => { // Use selected component by default - if (!componentId && !screenId) { + if (!componentId || !screenId) { const state = get(store) - componentId = state.selectedComponentId - screenId = state.selectedScreenId + componentId = componentId || state.selectedComponentId + screenId = screenId || state.selectedScreenId } - // Invalid if only a screen or component ID provided if (!componentId || !screenId || !patchFn) { return } @@ -902,13 +901,14 @@ export const getFrontendStore = () => { } }) }, - updateStyles: async styles => { - await store.actions.components.patch(component => { + updateStyles: async (styles, id) => { + const patchFn = component => { component._styles.normal = { ...component._styles.normal, ...styles, } - }) + } + await store.actions.components.patch(patchFn, id) }, updateCustomStyle: async style => { await store.actions.components.patch(component => { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 0972a2c8d6..501fbe5b4f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -156,7 +156,7 @@ } else if (type === "update-prop") { await store.actions.components.updateSetting(data.prop, data.value) } else if (type === "update-styles") { - await store.actions.components.updateStyles(data.styles) + await store.actions.components.updateStyles(data.styles, data.id) } else if (type === "delete-component" && data.id) { // Legacy type, can be deleted in future confirmDeleteComponent(data.id) diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index fe99c3e4cd..6e5d09646a 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -22,6 +22,7 @@ componentStore, appStore, dndComponentPath, + dndIsDragging, } from "stores" import { Helpers } from "@budibase/bbui" import { getActiveConditions, reduceConditionActions } from "utils/conditions" @@ -162,7 +163,7 @@ // nested layers. Only reset this when dragging stops. let pad = false $: pad = pad || (interactive && hasChildren && inDndPath) - $: $builderStore.dragging, (pad = false) + $: $dndIsDragging, (pad = false) // Update component context $: store.set({ diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte index a29a1aa522..43d1d52480 100644 --- a/packages/client/src/components/preview/DNDHandler.svelte +++ b/packages/client/src/components/preview/DNDHandler.svelte @@ -2,7 +2,13 @@ import { onMount, onDestroy } from "svelte" import { get } from "svelte/store" import IndicatorSet from "./IndicatorSet.svelte" - import { builderStore, screenStore, dndStore, dndParent } from "stores" + import { + builderStore, + screenStore, + dndStore, + dndParent, + dndIsDragging, + } from "stores" import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte" import { Utils } from "@budibase/frontend-core" import { findComponentById } from "utils/components.js" @@ -49,7 +55,6 @@ // Reset state dndStore.actions.reset() - builderStore.actions.setDragging(false) } // Callback when initially starting a drag on a draggable component @@ -85,7 +90,6 @@ index, }) builderStore.actions.selectComponent(id) - builderStore.actions.setDragging(true) // Set initial drop info to show placeholder exactly where the dragged // component is. @@ -329,6 +333,6 @@ prefix="Inside" /> -{#if $builderStore.dragging} +{#if $dndIsDragging} {/if} diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte index ce2b049fd3..22fecc9d1d 100644 --- a/packages/client/src/components/preview/GridDNDHandler.svelte +++ b/packages/client/src/components/preview/GridDNDHandler.svelte @@ -1,7 +1,8 @@ diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte index f4b6dd457f..04eaa49d6d 100644 --- a/packages/client/src/components/preview/Indicator.svelte +++ b/packages/client/src/components/preview/Indicator.svelte @@ -60,7 +60,9 @@ class="anchor {side}" data-side={side} data-id={componentId} - /> + > +
+
{/each} {/if} @@ -131,52 +133,61 @@ /* Anchor */ .anchor { + --size: 24px; position: absolute; - width: 10px; - height: 10px; - border-radius: 50%; - background-color: var(--color); + width: var(--size); + height: var(--size); pointer-events: all; + display: grid; + place-items: center; + border-radius: 50%; + } + .anchor-inner { + width: 12px; + height: 12px; + background: white; + border: 2px solid var(--color); + pointer-events: none; } .anchor.right { - right: -6px; - top: calc(50% - 5px); + right: calc(var(--size) / -2 - 1px); + top: calc(50% - var(--size) / 2); cursor: e-resize; } .anchor.left { - left: -6px; - top: calc(50% - 5px); + left: calc(var(--size) / -2 - 1px); + top: calc(50% - var(--size) / 2); cursor: w-resize; } .anchor.bottom { - left: calc(50% - 5px); - bottom: -6px; + left: calc(50% - var(--size) / 2 + 1px); + bottom: calc(var(--size) / -2 - 1px); cursor: s-resize; } .anchor.top { - left: calc(50% - 5px); - top: -6px; + left: calc(50% - var(--size) / 2 + 1px); + top: calc(var(--size) / -2 - 1px); cursor: n-resize; } .anchor.bottom-right { - right: -6px; - bottom: -6px; + right: calc(var(--size) / -2 - 1px); + bottom: calc(var(--size) / -2 - 1px); cursor: se-resize; } .anchor.bottom-left { - left: -6px; - bottom: -6px; + left: calc(var(--size) / -2 - 1px); + bottom: calc(var(--size) / -2 - 1px); cursor: sw-resize; } .anchor.top-right { - right: -6px; - top: -6px; + right: calc(var(--size) / -2 - 1px); + top: calc(var(--size) / -2 - 1px); cursor: ne-resize; } .anchor.top-left { - left: -6px; - top: -6px; + left: calc(var(--size) / -2 - 1px); + top: calc(var(--size) / -2 - 1px); cursor: nw-resize; } diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte index 8ef0c81af0..757d8b88db 100644 --- a/packages/client/src/components/preview/SettingsBar.svelte +++ b/packages/client/src/components/preview/SettingsBar.svelte @@ -3,7 +3,7 @@ import SettingsButton from "./SettingsButton.svelte" import SettingsColorPicker from "./SettingsColorPicker.svelte" import SettingsPicker from "./SettingsPicker.svelte" - import { builderStore, componentStore } from "stores" + import { builderStore, componentStore, dndIsDragging } from "stores" import { domDebounce } from "utils/domDebounce" const verticalOffset = 36 @@ -16,7 +16,7 @@ let measured = false $: definition = $componentStore.selectedComponentDefinition - $: showBar = definition?.showSettingsBar && !$builderStore.dragging + $: showBar = definition?.showSettingsBar && !$dndIsDragging $: settings = getBarSettings(definition) const getBarSettings = definition => { diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js index 41fd9bb92d..30fcc39bad 100644 --- a/packages/client/src/stores/builder.js +++ b/packages/client/src/stores/builder.js @@ -19,7 +19,6 @@ const createBuilderStore = () => { navigation: null, hiddenComponentIds: [], usedPlugins: null, - dragging: false, // Legacy - allow the builder to specify a layout layout: null, @@ -41,8 +40,8 @@ const createBuilderStore = () => { updateProp: (prop, value) => { dispatchEvent("update-prop", { prop, value }) }, - updateStyles: styles => { - dispatchEvent("update-styles", { styles }) + updateStyles: (styles, id) => { + dispatchEvent("update-styles", { styles, id }) }, keyDown: (key, ctrlKey) => { dispatchEvent("key-down", { key, ctrlKey }) @@ -112,12 +111,6 @@ const createBuilderStore = () => { // Notify the builder so we can reload component definitions dispatchEvent("reload-plugin") }, - setDragging: dragging => { - store.update(state => { - state.dragging = dragging - return state - }) - }, } return { ...store, diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js index d9363e4725..9f17a5aa90 100644 --- a/packages/client/src/stores/dnd.js +++ b/packages/client/src/stores/dnd.js @@ -87,3 +87,4 @@ export const dndIsNewComponent = derived( dndStore, $dndStore => $dndStore.source?.newComponentType != null ) +export const dndIsDragging = derived(dndStore, $dndStore => !!$dndStore.source) diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js index e28ebf7bc4..c431302d43 100644 --- a/packages/client/src/stores/index.js +++ b/packages/client/src/stores/index.js @@ -21,6 +21,7 @@ export { dndParent, dndBounds, dndIsNewComponent, + dndIsDragging, } from "./dnd" // Context stores are layered and duplicated, so it is not a singleton