From 488ec4d988686899650a48b53e6badeac1ecdbfa Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 20 Sep 2021 15:34:51 +0100 Subject: [PATCH] Refactor client app data tags to be classnames and simplify logic --- .../client/src/components/Component.svelte | 69 ++++++++++--------- .../src/components/app/Container.svelte | 4 +- .../src/components/preview/DNDHandler.svelte | 18 ++--- .../components/preview/HoverIndicator.svelte | 2 +- packages/client/src/utils/styleable.js | 4 +- 5 files changed, 51 insertions(+), 46 deletions(-) diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index f590e2aa9f..3d863c276e 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -51,11 +51,11 @@ $: children = instance._children || [] $: id = instance._id $: name = instance._instanceName - $: empty = - !children.length && - definition?.hasChildren && - definition?.showEmptyState !== false && - $builderStore.inBuilder + $: interactive = + $builderStore.inBuilder && + ($builderStore.previewType === "layout" || insideScreenslot) + $: empty = interactive && !children.length && definition?.hasChildren + $: emptyState = empty && definition?.showEmptyState !== false $: rawProps = getRawProps(instance) $: instanceKey = JSON.stringify(rawProps) $: updateComponentProps(rawProps, instanceKey, $context) @@ -63,9 +63,6 @@ $builderStore.inBuilder && $builderStore.selectedComponentId === instance._id $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id) - $: interactive = - $builderStore.inBuilder && - ($builderStore.previewType === "layout" || insideScreenslot) $: evaluateConditions(enrichedSettings?._conditions) $: componentSettings = { ...enrichedSettings, ...conditionalSettings } @@ -73,8 +70,8 @@ $: componentStore.set({ id, children: children.length, - styles: { ...instance._styles, id, empty, interactive }, - empty, + styles: { ...instance._styles, id, empty: emptyState, interactive }, + empty: emptyState, selected, name, }) @@ -177,38 +174,44 @@ // Drag and drop helper tags $: draggable = interactive && !isLayout && !isScreen $: droppable = interactive && !isLayout && !isScreen - $: dropInside = interactive && definition?.hasChildren && !children.length {#key propsHash} - {#if constructor && componentSettings && (visible || inSelectedPath)} -
- - {#if children.length} - {#each children as child (child._id)} - - {/each} - {:else if empty} - - {/if} - -
- {/if} + {#key empty} + {#if constructor && componentSettings && (visible || inSelectedPath)} + + +
+ + {#if children.length} + {#each children as child (child._id)} + + {/each} + {:else if emptyState} + + {/if} + +
+ {/if} + {/key} {/key} diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte index 5b2f951c8d..148179c98f 100644 --- a/packages/client/src/components/app/Container.svelte +++ b/packages/client/src/components/app/Container.svelte @@ -34,7 +34,7 @@ display: flex; max-width: 100%; } - .valid-container :global([data-type="component"] > *) { + .valid-container :global(.component > *) { max-width: 100%; } .direction-row { @@ -46,7 +46,7 @@ /* Grow containers inside a row need 0 width 0 so that they ignore content */ /* The nested selector for data-type is the wrapper around all components */ - .direction-row :global(> [data-type="component"] > .size-grow) { + .direction-row :global(> .component > .size-grow) { width: 0; } diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte index 90e2a55ca4..d7d2d94793 100644 --- a/packages/client/src/components/preview/DNDHandler.svelte +++ b/packages/client/src/components/preview/DNDHandler.svelte @@ -9,16 +9,15 @@ let dropInfo const getDOMNodeForComponent = component => { - const parent = component.closest("[data-type='component']") + const parent = component.closest(".component") const children = Array.from(parent.childNodes) return children?.find(node => node?.nodeType === 1) } // Callback when initially starting a drag on a draggable component const onDragStart = e => { - const parent = e.target.closest("[data-type='component']") - const child = getDOMNodeForComponent(e.target) - if (!parent?.dataset?.id || !child) { + const parent = e.target.closest(".component") + if (!parent?.classList.contains("draggable")) { return } @@ -31,7 +30,10 @@ builderStore.actions.setDragging(true) // Highlight being dragged by setting opacity - child.style.opacity = "0.5" + const child = getDOMNodeForComponent(e.target) + if (child) { + child.style.opacity = "0.5" + } } // Callback when drag stops (whether dropped or not) @@ -102,10 +104,10 @@ return } - const element = e.target.closest("[data-type='component']") + const element = e.target.closest(".component") if ( element && - element.dataset.droppable === "true" && + element.classList.contains("droppable") && element.dataset.id !== dragInfo.target ) { // Do nothing if this is the same target @@ -130,7 +132,7 @@ dropInfo = { target, name: element.dataset.name, - droppableInside: element.dataset.droppableInside === "true", + droppableInside: element.classList.contains("empty"), bounds, } } else { diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte index 28109cb262..1a9e6477ac 100644 --- a/packages/client/src/components/preview/HoverIndicator.svelte +++ b/packages/client/src/components/preview/HoverIndicator.svelte @@ -7,7 +7,7 @@ $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920 const onMouseOver = e => { - const element = e.target.closest("[data-type='component']") + const element = e.target.closest(".interactive.component") const newId = element?.dataset?.id if (newId !== componentId) { componentId = newId diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index 3fce1bcf26..89d983d73b 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -24,8 +24,8 @@ export const styleable = (node, styles = {}) => { let selectComponent // Allow dragging if required - const parent = node.closest("[data-type='component']") - if (parent && parent.dataset.draggable === "true") { + const parent = node.closest(".component") + if (parent && parent.classList.contains("draggable")) { node.setAttribute("draggable", true) }