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