From 0c2e286ca7bdbda516693ee8e15d097127d5c4e4 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 19 Oct 2022 14:39:28 +0100 Subject: [PATCH] Use a container as the DND placeholder and use approx size when dragging into grids --- .../src/builderStore/store/frontend.js | 7 +- packages/client/manifest.json | 3 +- .../client/src/components/Component.svelte | 94 ++++++++++++++++--- .../components/preview/DNDPlaceholder.svelte | 33 ------- .../preview/DNDPlaceholderOverlay.svelte | 3 +- .../components/preview/GridDNDHandler.svelte | 12 +-- packages/client/src/constants.js | 1 - packages/client/src/stores/components.js | 12 +-- packages/client/src/stores/screens.js | 17 +++- 9 files changed, 108 insertions(+), 74 deletions(-) delete mode 100644 packages/client/src/components/preview/DNDPlaceholder.svelte diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 2b8a5ec701..10ed0c71c5 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -446,12 +446,7 @@ export const getFrontendStore = () => { _id: Helpers.uuid(), _component: definition.component, _styles: { - normal: { - "grid-column-start": 1, - "grid-column-end": 2, - "grid-row-start": 1, - "grid-row-end": 2, - }, + normal: {}, hover: {}, active: {}, }, diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 16f4bc10c6..94b3ac36be 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -87,10 +87,9 @@ "showSettingsBar": true, "size": { "width": 400, - "height": 100 + "height": 200 }, "styles": [ - "grid", "padding", "size", "background", diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 6e5d09646a..d9264f93bf 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -35,6 +35,7 @@ export let isScreen = false export let isBlock = false export let parent = null + export let parentType = null // Get parent contexts const context = getContext("context") @@ -165,23 +166,35 @@ $: pad = pad || (interactive && hasChildren && inDndPath) $: $dndIsDragging, (pad = false) + // We can apply additional styles automatically if required. + // One use case for this is ensuring grid children have proper styles to + // display properly inside a grid. + $: additionalStyles = getAdditionalStyles( + instance._styles?.normal || {}, + parentType, + definition + ) + + // Compute overall styles + $: styles = { + ...instance._styles, + normal: { + ...instance._styles?.normal, + ...additionalStyles, + }, + custom: customCSS, + id, + empty: emptyState, + interactive, + draggable, + editable, + } + // Update component context $: store.set({ id, children: children.length, - styles: { - ...instance._styles, - normal: { - ...instance._styles?.normal, - ...(selected ? $builderStore.gridStyles : null), - }, - custom: customCSS, - id, - empty: emptyState, - interactive, - draggable, - editable, - }, + styles, empty: emptyState, selected, name, @@ -442,6 +455,54 @@ }) } + const getAdditionalStyles = (styles, parentType, definition) => { + let newStyles = {} + + // Ensure grid styles are set + if (parentType?.endsWith("/grid")) { + newStyles = { + ...newStyles, + overflow: "hidden", + width: "auto", + height: "auto", + } + + // Guess rough grid size from definition size + let columns = 6 + let rows = 4 + if (definition.size?.width) { + columns = Math.round(definition.size.width / 100) + } + if (definition.size?.height) { + rows = Math.round(definition.size.height / 100) + } + + // Ensure grid position styles are set + if (!styles["grid-column-start"]) { + newStyles["grid-column-start"] = 1 + } + if (!styles["grid-column-end"]) { + newStyles["grid-column-end"] = columns + 1 + } + if (!styles["grid-row-start"]) { + newStyles["grid-row-start"] = 1 + } + if (!styles["grid-row-end"]) { + newStyles["grid-row-end"] = rows + 1 + } + + // Ensure grid end styles aren't before grid start styles + if (newStyles["grid-column-end"] <= newStyles["grid-column-start"]) { + newStyles["grid-column-end"] = newStyles["grid-column-start"] + 1 + } + if (newStyles["grid-row-end"] <= newStyles["grid-row-start"]) { + newStyles["grid-row-end"] = newStyles["grid-row-start"] + 1 + } + } + + return newStyles + } + onMount(() => { if ( $appStore.isDevApp && @@ -450,6 +511,7 @@ componentStore.actions.registerInstance(id, { component: instance._component, getSettings: () => cachedSettings, + getStyles: () => styles, getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }), getDataContext: () => get(context), reload: () => initialise(instance, true), @@ -490,7 +552,11 @@ {:else if children.length} {#each children as child (child._id)} - + {/each} {:else if emptyState} {#if isScreen} diff --git a/packages/client/src/components/preview/DNDPlaceholder.svelte b/packages/client/src/components/preview/DNDPlaceholder.svelte deleted file mode 100644 index 3725f9e06e..0000000000 --- a/packages/client/src/components/preview/DNDPlaceholder.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - -{#if style} -
-
-
-{/if} - - diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte index 6ed2df6a87..0be7faff1b 100644 --- a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte +++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte @@ -6,7 +6,8 @@ let left, top, height, width const updatePosition = () => { - const node = document.getElementById(DNDPlaceholderID) + const node = + document.getElementsByClassName(DNDPlaceholderID)[0]?.childNodes[0] if (!node) { height = 0 width = 0 diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte index 802a4c9b46..1cb4f92da6 100644 --- a/packages/client/src/components/preview/GridDNDHandler.svelte +++ b/packages/client/src/components/preview/GridDNDHandler.svelte @@ -1,6 +1,6 @@