Improve client grid DND event handling
This commit is contained in:
parent
a11854d957
commit
c111f02e70
5 changed files with 14 additions and 17 deletions
|
@ -30,6 +30,7 @@
|
||||||
import HoverIndicator from "components/preview/HoverIndicator.svelte"
|
import HoverIndicator from "components/preview/HoverIndicator.svelte"
|
||||||
import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
|
import CustomThemeWrapper from "./CustomThemeWrapper.svelte"
|
||||||
import DNDHandler from "components/preview/DNDHandler.svelte"
|
import DNDHandler from "components/preview/DNDHandler.svelte"
|
||||||
|
import GridDNDHandler from "components/preview/GridDNDHandler.svelte"
|
||||||
import KeyboardManager from "components/preview/KeyboardManager.svelte"
|
import KeyboardManager from "components/preview/KeyboardManager.svelte"
|
||||||
import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
|
import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
|
||||||
import DevTools from "components/devtools/DevTools.svelte"
|
import DevTools from "components/devtools/DevTools.svelte"
|
||||||
|
@ -196,6 +197,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if $builderStore.inBuilder}
|
{#if $builderStore.inBuilder}
|
||||||
<DNDHandler />
|
<DNDHandler />
|
||||||
|
<GridDNDHandler />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</QueryParamsProvider>
|
</QueryParamsProvider>
|
||||||
|
|
|
@ -219,7 +219,6 @@
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
lastInstanceKey = instanceKey
|
lastInstanceKey = instanceKey
|
||||||
ephemeralStyles = null
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pull definition and constructor
|
// Pull definition and constructor
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
import GridDNDHandler from "../preview/GridDNDHandler.svelte"
|
|
||||||
|
|
||||||
const component = getContext("component")
|
const component = getContext("component")
|
||||||
const { styleable, builderStore } = getContext("sdk")
|
const { styleable } = getContext("sdk")
|
||||||
|
|
||||||
const cols = 12
|
const cols = 12
|
||||||
|
|
||||||
|
@ -35,10 +34,6 @@
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if $builderStore.inBuilder && node}
|
|
||||||
<GridDNDHandler {node} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.grid {
|
.grid {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -5,15 +5,15 @@
|
||||||
|
|
||||||
let dragInfo
|
let dragInfo
|
||||||
let gridStyles
|
let gridStyles
|
||||||
|
let id
|
||||||
|
|
||||||
$: jsonStyles = JSON.stringify(gridStyles)
|
$: jsonStyles = JSON.stringify(gridStyles)
|
||||||
$: id = dragInfo?.id
|
$: id = dragInfo?.id || id
|
||||||
$: instance = componentStore.actions.getComponentInstance(id)
|
$: instance = componentStore.actions.getComponentInstance(id)
|
||||||
|
$: instance?.setEphemeralStyles({
|
||||||
// We don't clear grid styles because that causes flashing, as the component
|
...gridStyles,
|
||||||
// will revert to its original position until the save completes.
|
...(gridStyles ? { "z-index": 999 } : null),
|
||||||
$: gridStyles &&
|
})
|
||||||
instance?.setEphemeralStyles({ ...gridStyles, "z-index": 999 })
|
|
||||||
|
|
||||||
const isChildOfGrid = e => {
|
const isChildOfGrid = e => {
|
||||||
return (
|
return (
|
||||||
|
@ -192,10 +192,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Callback when drag stops (whether dropped or not)
|
// Callback when drag stops (whether dropped or not)
|
||||||
const stopDragging = () => {
|
const stopDragging = async () => {
|
||||||
|
console.log("STOP")
|
||||||
// Save changes
|
// Save changes
|
||||||
if (gridStyles) {
|
if (gridStyles) {
|
||||||
builderStore.actions.updateStyles(gridStyles, dragInfo.id)
|
await builderStore.actions.updateStyles(gridStyles, dragInfo.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset listener
|
// Reset listener
|
||||||
|
|
|
@ -38,8 +38,8 @@ const createBuilderStore = () => {
|
||||||
updateProp: (prop, value) => {
|
updateProp: (prop, value) => {
|
||||||
eventStore.actions.dispatchEvent("update-prop", { prop, value })
|
eventStore.actions.dispatchEvent("update-prop", { prop, value })
|
||||||
},
|
},
|
||||||
updateStyles: (styles, id) => {
|
updateStyles: async (styles, id) => {
|
||||||
eventStore.actions.dispatchEvent("update-styles", { styles, id })
|
await eventStore.actions.dispatchEvent("update-styles", { styles, id })
|
||||||
},
|
},
|
||||||
keyDown: (key, ctrlKey) => {
|
keyDown: (key, ctrlKey) => {
|
||||||
eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })
|
eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })
|
||||||
|
|
Loading…
Reference in a new issue