Use patch when creating new components
This commit is contained in:
parent
fc92732989
commit
6368a2aaac
1 changed files with 48 additions and 34 deletions
|
@ -1,6 +1,6 @@
|
||||||
import { get, writable } from "svelte/store"
|
import { get, writable } from "svelte/store"
|
||||||
import { cloneDeep } from "lodash/fp"
|
import { cloneDeep } from "lodash/fp"
|
||||||
import { currentAsset, mainLayout, selectedComponent } from "builderStore"
|
import { currentAsset, selectedScreen, selectedComponent } from "builderStore"
|
||||||
import {
|
import {
|
||||||
datasources,
|
datasources,
|
||||||
integrations,
|
integrations,
|
||||||
|
@ -183,7 +183,6 @@ export const getFrontendStore = () => {
|
||||||
// Check this screen exists
|
// Check this screen exists
|
||||||
const state = get(store)
|
const state = get(store)
|
||||||
const screen = state.screens.find(screen => screen._id === screenId)
|
const screen = state.screens.find(screen => screen._id === screenId)
|
||||||
console.log(screen)
|
|
||||||
if (!screen) {
|
if (!screen) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -236,7 +235,10 @@ export const getFrontendStore = () => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let clone = cloneDeep(screen)
|
let clone = cloneDeep(screen)
|
||||||
patchFn(clone)
|
const result = patchFn(clone)
|
||||||
|
if (result === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
return await store.actions.screens.save(clone)
|
return await store.actions.screens.save(clone)
|
||||||
}),
|
}),
|
||||||
delete: async screens => {
|
delete: async screens => {
|
||||||
|
@ -420,48 +422,60 @@ export const getFrontendStore = () => {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
create: async (componentName, presetProps) => {
|
create: async (componentName, presetProps) => {
|
||||||
const selected = get(selectedComponent)
|
const state = get(store)
|
||||||
const asset = get(currentAsset)
|
|
||||||
|
|
||||||
// Create new component
|
|
||||||
const componentInstance = store.actions.components.createInstance(
|
const componentInstance = store.actions.components.createInstance(
|
||||||
componentName,
|
componentName,
|
||||||
presetProps
|
presetProps
|
||||||
)
|
)
|
||||||
if (!componentInstance || !asset) {
|
if (!componentInstance) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Find parent node to attach this component to
|
// Create screen patch function
|
||||||
let parentComponent
|
const patch = screen => {
|
||||||
if (selected) {
|
// Find the selected component
|
||||||
// Use current screen or layout as parent if no component is selected
|
const currentComponent = findComponent(
|
||||||
const definition = store.actions.components.getDefinition(
|
screen.props,
|
||||||
selected._component
|
state.selectedComponentId
|
||||||
)
|
)
|
||||||
if (definition?.hasChildren) {
|
if (!currentComponent) {
|
||||||
// Use selected component if it allows children
|
return false
|
||||||
parentComponent = selected
|
|
||||||
} else {
|
|
||||||
// Otherwise we need to use the parent of this component
|
|
||||||
parentComponent = findComponentParent(asset?.props, selected._id)
|
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
// Use screen or layout if no component is selected
|
|
||||||
parentComponent = asset?.props
|
|
||||||
}
|
|
||||||
|
|
||||||
// Attach component
|
// Find parent node to attach this component to
|
||||||
if (!parentComponent) {
|
let parentComponent
|
||||||
return
|
if (currentComponent) {
|
||||||
}
|
// Use selected component as parent if one is selected
|
||||||
if (!parentComponent._children) {
|
const definition = store.actions.components.getDefinition(
|
||||||
parentComponent._children = []
|
currentComponent._component
|
||||||
}
|
)
|
||||||
parentComponent._children.push(componentInstance)
|
if (definition?.hasChildren) {
|
||||||
|
// Use selected component if it allows children
|
||||||
|
parentComponent = currentComponent
|
||||||
|
} else {
|
||||||
|
// Otherwise we need to use the parent of this component
|
||||||
|
parentComponent = findComponentParent(
|
||||||
|
screen.props,
|
||||||
|
currentComponent._id
|
||||||
|
)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Use screen or layout if no component is selected
|
||||||
|
parentComponent = screen.props
|
||||||
|
}
|
||||||
|
|
||||||
// Save components and update UI
|
// Attach new component
|
||||||
await store.actions.preview.saveSelected()
|
if (!parentComponent) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (!parentComponent._children) {
|
||||||
|
parentComponent._children = []
|
||||||
|
}
|
||||||
|
parentComponent._children.push(componentInstance)
|
||||||
|
}
|
||||||
|
await store.actions.screens.patch(state.selectedScreenId, patch)
|
||||||
|
|
||||||
|
// Select new component
|
||||||
store.update(state => {
|
store.update(state => {
|
||||||
state.selectedComponentId = componentInstance._id
|
state.selectedComponentId = componentInstance._id
|
||||||
return state
|
return state
|
||||||
|
|
Loading…
Reference in a new issue