From a05dc7e29506d046853d3bfeb39ae51bf03def84 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 16 Sep 2021 14:28:44 +0100 Subject: [PATCH] Add above/below dnd and support for dropping above/below components which also allow dropping inside --- .../client/src/components/Component.svelte | 3 +- .../src/components/preview/DNDHandler.svelte | 106 ++++++++++++++++-- .../preview/DNDPositionIndicator.svelte | 33 ++++++ .../components/preview/HoverIndicator.svelte | 2 +- .../components/preview/IndicatorSet.svelte | 4 + packages/client/src/stores/builder.js | 8 ++ packages/client/src/utils/styleable.js | 3 +- 7 files changed, 144 insertions(+), 15 deletions(-) diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 414d87a0aa..a7ac7b0cd0 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -181,7 +181,8 @@ data-id={id} data-name={name} data-draggable={interactive && !isLayout && !isScreen ? "true" : "false"} - data-droppable={definition?.hasChildren ? "true" : "false"} + data-droppable={interactive ? "true" : "false"} + data-droppable-inside={definition?.hasChildren ? "true" : "false"} > {#if children.length} diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte index 88b9176efb..c3630051ee 100644 --- a/packages/client/src/components/preview/DNDHandler.svelte +++ b/packages/client/src/components/preview/DNDHandler.svelte @@ -1,36 +1,116 @@ + +{#if dropMode !== "inside" && dropInfo} + +{/if} diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte index e69de29bb2..d86b79b88f 100644 --- a/packages/client/src/components/preview/DNDPositionIndicator.svelte +++ b/packages/client/src/components/preview/DNDPositionIndicator.svelte @@ -0,0 +1,33 @@ + + +{#if valid} +
+{/if} + + diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte index 9518c6d101..3cae1e4c85 100644 --- a/packages/client/src/components/preview/HoverIndicator.svelte +++ b/packages/client/src/components/preview/HoverIndicator.svelte @@ -30,7 +30,7 @@ { theme: null, customTheme: null, previewDevice: "desktop", + showHoverIndicator: true, } const writableStore = writable(initialState) const derivedStore = derived(writableStore, $state => { @@ -76,9 +77,16 @@ const createBuilderStore = () => { mode, }) }, + showHoverIndicator: show => { + writableStore.update(state => { + state.showHoverIndicator = show + return state + }) + }, } return { ...writableStore, + set: state => writableStore.set({ ...initialState, ...state }), subscribe: derivedStore.subscribe, actions, } diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index 27f6c6a0f6..899854ecc9 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -33,6 +33,7 @@ export const styleable = (node, styles = {}) => { const setupStyles = (newStyles = {}) => { // Use empty state styles as base styles if required, but let them, get // overridden by any user specified styles + const baseString = node.style.cssText let baseStyles = {} if (newStyles.empty) { baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)" @@ -50,7 +51,7 @@ export const styleable = (node, styles = {}) => { // Applies a style string to a DOM node const applyStyles = styleString => { - node.style = styleString + node.style = `${baseString}${styleString}` node.dataset.componentId = componentId }