2021-06-08 09:00:54 +02:00
|
|
|
import { writable, derived } from "svelte/store"
|
2021-06-11 09:05:49 +02:00
|
|
|
import Manifest from "@budibase/standard-components/manifest.json"
|
2021-06-08 09:00:54 +02:00
|
|
|
|
2021-06-30 20:37:03 +02:00
|
|
|
const dispatchEvent = (type, data = {}) => {
|
2021-06-08 09:00:54 +02:00
|
|
|
window.dispatchEvent(
|
|
|
|
new CustomEvent("bb-event", {
|
|
|
|
detail: { type, data },
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const findComponentById = (component, componentId) => {
|
|
|
|
if (!component || !componentId) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
if (component._id === componentId) {
|
|
|
|
return component
|
|
|
|
}
|
|
|
|
if (!component._children?.length) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
for (let child of component._children) {
|
|
|
|
const result = findComponentById(child, componentId)
|
|
|
|
if (result) {
|
|
|
|
return result
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return null
|
|
|
|
}
|
2020-11-24 10:31:54 +01:00
|
|
|
|
2021-08-19 15:53:13 +02:00
|
|
|
const findComponentIdPath = (component, componentId, path = []) => {
|
|
|
|
if (!component || !componentId) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
path = [...path, component._id]
|
|
|
|
if (component._id === componentId) {
|
|
|
|
return path
|
|
|
|
}
|
|
|
|
if (!component._children?.length) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
for (let child of component._children) {
|
|
|
|
const result = findComponentIdPath(child, componentId, path)
|
|
|
|
if (result) {
|
|
|
|
return result
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2020-11-24 10:31:54 +01:00
|
|
|
const createBuilderStore = () => {
|
|
|
|
const initialState = {
|
|
|
|
inBuilder: false,
|
2021-01-07 15:53:56 +01:00
|
|
|
appId: null,
|
2020-11-27 17:36:31 +01:00
|
|
|
layout: null,
|
2020-11-24 10:31:54 +01:00
|
|
|
screen: null,
|
2020-11-30 13:11:50 +01:00
|
|
|
selectedComponentId: null,
|
|
|
|
previewId: null,
|
2021-01-06 11:11:56 +01:00
|
|
|
previewType: null,
|
2021-08-19 15:53:13 +02:00
|
|
|
selectedPath: [],
|
2021-01-06 11:11:56 +01:00
|
|
|
}
|
2021-06-08 09:00:54 +02:00
|
|
|
const writableStore = writable(initialState)
|
|
|
|
const derivedStore = derived(writableStore, $state => {
|
2021-08-19 17:04:15 +02:00
|
|
|
// Avoid any of this logic if we aren't in the builder preview
|
|
|
|
if (!writableStore.inBuilder) {
|
|
|
|
return $state
|
|
|
|
}
|
|
|
|
|
2021-06-08 09:00:54 +02:00
|
|
|
// Derive the selected component instance and definition
|
|
|
|
const { layout, screen, previewType, selectedComponentId } = $state
|
|
|
|
const asset = previewType === "layout" ? layout : screen
|
|
|
|
const component = findComponentById(asset?.props, selectedComponentId)
|
|
|
|
const prefix = "@budibase/standard-components/"
|
|
|
|
const type = component?._component?.replace(prefix, "")
|
2021-06-11 09:05:49 +02:00
|
|
|
const definition = type ? Manifest[type] : null
|
2021-08-19 15:53:13 +02:00
|
|
|
|
|
|
|
// Derive the selected component path
|
|
|
|
const path = findComponentIdPath(asset.props, selectedComponentId) || []
|
|
|
|
|
2021-06-08 09:00:54 +02:00
|
|
|
return {
|
|
|
|
...$state,
|
|
|
|
selectedComponent: component,
|
|
|
|
selectedComponentDefinition: definition,
|
2021-08-19 15:53:13 +02:00
|
|
|
selectedComponentPath: path,
|
2021-06-08 09:00:54 +02:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-01-06 11:11:56 +01:00
|
|
|
const actions = {
|
2021-05-04 12:32:22 +02:00
|
|
|
selectComponent: id => {
|
2021-06-23 15:21:37 +02:00
|
|
|
dispatchEvent("select-component", { id })
|
2021-01-06 11:11:56 +01:00
|
|
|
},
|
2021-06-08 09:00:54 +02:00
|
|
|
updateProp: (prop, value) => {
|
|
|
|
dispatchEvent("update-prop", { prop, value })
|
|
|
|
},
|
2021-06-23 15:21:37 +02:00
|
|
|
deleteComponent: id => {
|
|
|
|
dispatchEvent("delete-component", { id })
|
|
|
|
},
|
2021-06-30 20:37:03 +02:00
|
|
|
notifyLoaded: () => {
|
|
|
|
dispatchEvent("preview-loaded")
|
|
|
|
},
|
2021-08-19 15:53:13 +02:00
|
|
|
setSelectedPath: path => {
|
|
|
|
console.log("set to ")
|
|
|
|
console.log(path)
|
|
|
|
writableStore.update(state => {
|
|
|
|
state.selectedPath = path
|
|
|
|
return state
|
|
|
|
})
|
|
|
|
},
|
2021-01-06 11:11:56 +01:00
|
|
|
}
|
|
|
|
return {
|
2021-06-08 09:00:54 +02:00
|
|
|
...writableStore,
|
|
|
|
subscribe: derivedStore.subscribe,
|
2021-01-06 11:11:56 +01:00
|
|
|
actions,
|
2020-11-24 10:31:54 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export const builderStore = createBuilderStore()
|