Prevent dragging the screen or layout components, and prevent dragging any layout components when previewing a screen
This commit is contained in:
parent
d86e5718d5
commit
97800563c4
4 changed files with 15 additions and 5 deletions
|
@ -105,7 +105,10 @@
|
||||||
<div id="app-root">
|
<div id="app-root">
|
||||||
<CustomThemeWrapper>
|
<CustomThemeWrapper>
|
||||||
{#key $screenStore.activeLayout._id}
|
{#key $screenStore.activeLayout._id}
|
||||||
<Component instance={$screenStore.activeLayout.props} />
|
<Component
|
||||||
|
isLayout
|
||||||
|
instance={$screenStore.activeLayout.props}
|
||||||
|
/>
|
||||||
{/key}
|
{/key}
|
||||||
|
|
||||||
<!-- Layers on top of app -->
|
<!-- Layers on top of app -->
|
||||||
|
|
|
@ -11,6 +11,8 @@
|
||||||
import Placeholder from "components/app/Placeholder.svelte"
|
import Placeholder from "components/app/Placeholder.svelte"
|
||||||
|
|
||||||
export let instance = {}
|
export let instance = {}
|
||||||
|
export let isLayout = false
|
||||||
|
export let isScreen = false
|
||||||
|
|
||||||
// The enriched component settings
|
// The enriched component settings
|
||||||
let enrichedSettings
|
let enrichedSettings
|
||||||
|
@ -178,7 +180,8 @@
|
||||||
data-type={interactive ? "component" : ""}
|
data-type={interactive ? "component" : ""}
|
||||||
data-id={id}
|
data-id={id}
|
||||||
data-name={name}
|
data-name={name}
|
||||||
data-droppable={definition?.hasChildren || false}
|
data-draggable={interactive && !isLayout && !isScreen ? "true" : "false"}
|
||||||
|
data-droppable={definition?.hasChildren ? "true" : "false"}
|
||||||
>
|
>
|
||||||
<svelte:component this={constructor} {...componentSettings}>
|
<svelte:component this={constructor} {...componentSettings}>
|
||||||
{#if children.length}
|
{#if children.length}
|
||||||
|
@ -197,7 +200,7 @@
|
||||||
.component {
|
.component {
|
||||||
display: contents;
|
display: contents;
|
||||||
}
|
}
|
||||||
.component > :global(*:hover) {
|
[data-draggable="true"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -22,6 +22,6 @@
|
||||||
<!-- Ensure to fully remount when screen changes -->
|
<!-- Ensure to fully remount when screen changes -->
|
||||||
{#key screenDefinition?._id}
|
{#key screenDefinition?._id}
|
||||||
<Provider key="url" data={params}>
|
<Provider key="url" data={params}>
|
||||||
<Component instance={screenDefinition} />
|
<Component isScreen instance={screenDefinition} />
|
||||||
</Provider>
|
</Provider>
|
||||||
{/key}
|
{/key}
|
||||||
|
|
|
@ -23,7 +23,11 @@ export const styleable = (node, styles = {}) => {
|
||||||
let applyHoverStyles
|
let applyHoverStyles
|
||||||
let selectComponent
|
let selectComponent
|
||||||
|
|
||||||
|
// Allow dragging if required
|
||||||
|
const parent = node.closest("[data-type='component']")
|
||||||
|
if (parent && parent.dataset.draggable === "true") {
|
||||||
node.setAttribute("draggable", true)
|
node.setAttribute("draggable", true)
|
||||||
|
}
|
||||||
|
|
||||||
// Creates event listeners and applies initial styles
|
// Creates event listeners and applies initial styles
|
||||||
const setupStyles = (newStyles = {}) => {
|
const setupStyles = (newStyles = {}) => {
|
||||||
|
|
Loading…
Reference in a new issue