2021-11-08 15:35:58 +01:00
|
|
|
<script context="module">
|
2022-01-31 19:54:04 +01:00
|
|
|
// Cache the definition of settings for each component type
|
2021-11-08 15:35:58 +01:00
|
|
|
let SettingsDefinitionCache = {}
|
2022-03-15 12:16:51 +01:00
|
|
|
let SettingsDefinitionMapCache = {}
|
2022-01-31 19:54:04 +01:00
|
|
|
|
|
|
|
// Cache the settings of each component ID.
|
|
|
|
// This speeds up remounting as well as repeaters.
|
|
|
|
let InstanceSettingsCache = {}
|
2021-11-08 15:35:58 +01:00
|
|
|
</script>
|
|
|
|
|
2020-11-13 16:42:32 +01:00
|
|
|
<script>
|
2021-11-26 14:25:02 +01:00
|
|
|
import { getContext, setContext, onMount, onDestroy } from "svelte"
|
2022-02-01 17:32:37 +01:00
|
|
|
import { writable, get } from "svelte/store"
|
2022-02-24 16:36:21 +01:00
|
|
|
import {
|
|
|
|
enrichProps,
|
|
|
|
propsAreSame,
|
|
|
|
getSettingsDefinition,
|
|
|
|
} from "utils/componentProps"
|
2022-02-24 22:48:54 +01:00
|
|
|
import { builderStore, devToolsStore, componentStore, appStore } from "stores"
|
2022-01-20 11:16:13 +01:00
|
|
|
import { Helpers } from "@budibase/bbui"
|
2021-09-01 12:41:48 +02:00
|
|
|
import { getActiveConditions, reduceConditionActions } from "utils/conditions"
|
|
|
|
import Placeholder from "components/app/Placeholder.svelte"
|
2022-06-07 14:41:17 +02:00
|
|
|
import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
|
2022-06-13 13:09:29 +02:00
|
|
|
import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"
|
2020-11-13 16:42:32 +01:00
|
|
|
|
2021-06-11 09:05:49 +02:00
|
|
|
export let instance = {}
|
2021-09-16 08:52:49 +02:00
|
|
|
export let isLayout = false
|
|
|
|
export let isScreen = false
|
2021-11-12 16:19:25 +01:00
|
|
|
export let isBlock = false
|
2020-11-13 16:42:32 +01:00
|
|
|
|
2022-02-01 17:32:37 +01:00
|
|
|
// Get parent contexts
|
|
|
|
const context = getContext("context")
|
|
|
|
const insideScreenslot = !!getContext("screenslot")
|
|
|
|
|
|
|
|
// Create component context
|
2022-02-24 15:03:29 +01:00
|
|
|
const store = writable({})
|
|
|
|
setContext("component", store)
|
2022-02-01 17:32:37 +01:00
|
|
|
|
2021-12-17 09:22:40 +01:00
|
|
|
// Ref to the svelte component
|
|
|
|
let ref
|
|
|
|
|
2021-12-17 10:18:07 +01:00
|
|
|
// Initial settings are passed in on first render of the component.
|
|
|
|
// When the first instance of cachedSettings are set, this object is set to
|
|
|
|
// reference cachedSettings, so that mutations to cachedSettings also affect
|
|
|
|
// initialSettings, but it does not get caught by svelte invalidation - which
|
|
|
|
// would happen if we spread cachedSettings directly to the component.
|
|
|
|
let initialSettings
|
|
|
|
|
2022-02-01 17:32:37 +01:00
|
|
|
// Dynamic settings contain bindings and need enriched
|
2022-01-29 19:53:21 +01:00
|
|
|
let dynamicSettings
|
2022-02-01 17:32:37 +01:00
|
|
|
|
|
|
|
// Static settings do not contain any bindings and can be passed on down
|
2022-01-29 19:53:21 +01:00
|
|
|
let staticSettings
|
2021-11-16 17:29:31 +01:00
|
|
|
|
2021-07-21 15:03:49 +02:00
|
|
|
// The enriched component settings
|
|
|
|
let enrichedSettings
|
|
|
|
|
2021-11-16 17:29:31 +01:00
|
|
|
// Any setting overrides that need to be applied due to conditional UI
|
2021-07-21 15:03:49 +02:00
|
|
|
let conditionalSettings
|
2020-11-13 16:42:32 +01:00
|
|
|
|
2021-11-16 17:29:31 +01:00
|
|
|
// Resultant cached settings which will be passed to the component instance.
|
|
|
|
// These are a combination of the enriched, nested and conditional settings.
|
|
|
|
let cachedSettings
|
2021-01-27 16:52:12 +01:00
|
|
|
|
2021-01-29 14:22:38 +01:00
|
|
|
// Latest timestamp that we started a props update.
|
|
|
|
// Due to enrichment now being async, we need to avoid overwriting newer
|
2021-11-08 15:35:58 +01:00
|
|
|
// settings with old ones, depending on how long enrichment takes.
|
2021-01-29 14:22:38 +01:00
|
|
|
let latestUpdateTime
|
|
|
|
|
2021-06-25 16:04:27 +02:00
|
|
|
// Keep track of stringified representations of context and instance
|
|
|
|
// to avoid enriching bindings as much as possible
|
|
|
|
let lastContextKey
|
|
|
|
let lastInstanceKey
|
|
|
|
|
2021-07-21 15:03:49 +02:00
|
|
|
// Visibility flag used by conditional UI
|
|
|
|
let visible = true
|
|
|
|
|
2022-02-01 17:32:37 +01:00
|
|
|
// Component information derived during initialisation
|
2022-01-31 19:54:04 +01:00
|
|
|
let constructor
|
|
|
|
let definition
|
2022-03-15 12:16:51 +01:00
|
|
|
let settingsDefinition
|
|
|
|
let settingsDefinitionMap
|
2022-06-13 13:09:29 +02:00
|
|
|
let missingRequiredSettings = false
|
2020-11-18 20:18:18 +01:00
|
|
|
|
2022-02-01 17:32:37 +01:00
|
|
|
// Set up initial state for each new component instance
|
2022-01-31 19:54:04 +01:00
|
|
|
$: initialise(instance)
|
2020-11-17 13:08:24 +01:00
|
|
|
|
2021-06-11 09:05:49 +02:00
|
|
|
// Extract component instance info
|
|
|
|
$: children = instance._children || []
|
|
|
|
$: id = instance._id
|
2022-05-10 15:10:26 +02:00
|
|
|
$: name = isScreen ? "Screen" : instance._instanceName
|
2022-05-23 13:22:42 +02:00
|
|
|
$: icon = definition?.icon
|
2021-11-08 15:35:58 +01:00
|
|
|
|
|
|
|
// Determine if the component is selected or is part of the critical path
|
|
|
|
// leading to the selected component
|
2021-06-08 09:00:54 +02:00
|
|
|
$: selected =
|
2021-10-28 13:43:31 +02:00
|
|
|
$builderStore.inBuilder && $builderStore.selectedComponentId === id
|
2021-11-26 14:25:02 +01:00
|
|
|
$: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
|
2021-11-16 14:17:34 +01:00
|
|
|
$: inDragPath = inSelectedPath && $builderStore.editMode
|
2021-11-08 15:35:58 +01:00
|
|
|
|
2021-11-18 21:32:42 +01:00
|
|
|
// Derive definition properties which can all be optional, so need to be
|
|
|
|
// coerced to booleans
|
|
|
|
$: hasChildren = !!definition?.hasChildren
|
2021-11-18 21:38:55 +01:00
|
|
|
$: showEmptyState = definition?.showEmptyState !== false
|
2022-06-13 13:09:29 +02:00
|
|
|
$: hasMissingRequiredSettings = missingRequiredSettings?.length > 0
|
2022-06-14 16:34:33 +02:00
|
|
|
$: editable = !!definition?.editable && !hasMissingRequiredSettings
|
2021-11-18 21:32:42 +01:00
|
|
|
|
2021-11-08 15:35:58 +01:00
|
|
|
// Interactive components can be selected, dragged and highlighted inside
|
|
|
|
// the builder preview
|
2021-11-26 14:25:02 +01:00
|
|
|
$: builderInteractive =
|
2022-05-12 10:42:25 +02:00
|
|
|
$builderStore.inBuilder && insideScreenslot && !isBlock
|
2021-11-26 14:25:02 +01:00
|
|
|
$: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
|
|
|
|
$: interactive = builderInteractive || devToolsInteractive
|
2021-10-28 13:43:31 +02:00
|
|
|
$: editing = editable && selected && $builderStore.editMode
|
2022-03-08 17:41:21 +01:00
|
|
|
$: draggable =
|
|
|
|
!inDragPath &&
|
|
|
|
interactive &&
|
|
|
|
!isLayout &&
|
|
|
|
!isScreen &&
|
|
|
|
definition?.draggable !== false
|
2021-11-16 12:46:46 +01:00
|
|
|
$: droppable = interactive && !isLayout && !isScreen
|
2022-07-15 11:46:37 +02:00
|
|
|
$: builderHidden =
|
|
|
|
$builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
|
2021-11-08 15:35:58 +01:00
|
|
|
|
|
|
|
// Empty components are those which accept children but do not have any.
|
|
|
|
// Empty states can be shown for these components, but can be disabled
|
|
|
|
// in the component manifest.
|
2022-09-12 09:50:22 +02:00
|
|
|
$: empty =
|
|
|
|
(interactive && !children.length && hasChildren) ||
|
|
|
|
hasMissingRequiredSettings
|
2021-11-18 21:32:42 +01:00
|
|
|
$: emptyState = empty && showEmptyState
|
2021-11-08 15:35:58 +01:00
|
|
|
|
2022-01-29 19:53:21 +01:00
|
|
|
// Enrich component settings
|
2022-03-15 12:16:51 +01:00
|
|
|
$: enrichComponentSettings($context, settingsDefinitionMap)
|
2021-11-08 15:35:58 +01:00
|
|
|
|
|
|
|
// Evaluate conditional UI settings and store any component setting changes
|
2022-02-01 17:32:37 +01:00
|
|
|
// which need to be made. This is broken into 2 lines to avoid svelte
|
|
|
|
// reactivity re-evaluating conditions more often than necessary.
|
|
|
|
$: conditions = enrichedSettings?._conditions
|
|
|
|
$: evaluateConditions(conditions)
|
2021-11-08 15:35:58 +01:00
|
|
|
|
2022-02-01 17:32:37 +01:00
|
|
|
// Determine and apply settings to the component
|
|
|
|
$: applySettings(staticSettings, enrichedSettings, conditionalSettings)
|
2021-11-18 21:32:42 +01:00
|
|
|
|
2022-09-05 17:35:25 +02:00
|
|
|
// Determine custom css.
|
|
|
|
// Broken out as a separate variable to minimize reactivity updates.
|
|
|
|
$: customCSS = cachedSettings?._css
|
|
|
|
|
2022-05-17 15:10:21 +02:00
|
|
|
// Scroll the selected element into view
|
|
|
|
$: selected && scrollIntoView()
|
|
|
|
|
2020-11-24 12:02:10 +01:00
|
|
|
// Update component context
|
2021-11-26 14:25:02 +01:00
|
|
|
$: store.set({
|
2021-01-22 12:08:42 +01:00
|
|
|
id,
|
|
|
|
children: children.length,
|
2021-10-28 13:43:31 +02:00
|
|
|
styles: {
|
|
|
|
...instance._styles,
|
2022-09-05 17:35:25 +02:00
|
|
|
custom: customCSS,
|
2021-10-28 13:43:31 +02:00
|
|
|
id,
|
|
|
|
empty: emptyState,
|
|
|
|
interactive,
|
|
|
|
draggable,
|
|
|
|
editable,
|
|
|
|
},
|
2021-09-20 16:34:51 +02:00
|
|
|
empty: emptyState,
|
2021-06-08 09:00:54 +02:00
|
|
|
selected,
|
2021-06-11 09:05:49 +02:00
|
|
|
name,
|
2021-10-28 13:43:31 +02:00
|
|
|
editing,
|
2022-05-30 13:57:10 +02:00
|
|
|
type: instance._component,
|
2022-06-13 13:09:29 +02:00
|
|
|
missingRequiredSettings,
|
2021-01-22 12:08:42 +01:00
|
|
|
})
|
2020-11-25 10:50:51 +01:00
|
|
|
|
2022-08-11 18:05:42 +02:00
|
|
|
const initialise = (instance, force = false) => {
|
2022-01-31 19:54:04 +01:00
|
|
|
if (instance == null) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
// Ensure we're processing a new instance
|
|
|
|
const instanceKey = Helpers.hashString(JSON.stringify(instance))
|
2022-08-11 18:05:42 +02:00
|
|
|
if (instanceKey === lastInstanceKey && !force) {
|
2022-01-31 19:54:04 +01:00
|
|
|
return
|
|
|
|
} else {
|
|
|
|
lastInstanceKey = instanceKey
|
|
|
|
}
|
|
|
|
|
|
|
|
// Pull definition and constructor
|
2022-05-17 15:33:12 +02:00
|
|
|
const component = instance._component
|
2022-08-10 16:34:00 +02:00
|
|
|
constructor = componentStore.actions.getComponentConstructor(component)
|
2022-05-17 15:33:12 +02:00
|
|
|
definition = componentStore.actions.getComponentDefinition(component)
|
2022-01-31 19:54:04 +01:00
|
|
|
if (!definition) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
// Get the settings definition for this component, and cache it
|
|
|
|
if (SettingsDefinitionCache[definition.name]) {
|
|
|
|
settingsDefinition = SettingsDefinitionCache[definition.name]
|
2022-03-15 12:16:51 +01:00
|
|
|
settingsDefinitionMap = SettingsDefinitionMapCache[definition.name]
|
2022-01-31 19:54:04 +01:00
|
|
|
} else {
|
|
|
|
settingsDefinition = getSettingsDefinition(definition)
|
2022-03-15 12:16:51 +01:00
|
|
|
settingsDefinitionMap = getSettingsDefinitionMap(settingsDefinition)
|
2022-01-31 19:54:04 +01:00
|
|
|
SettingsDefinitionCache[definition.name] = settingsDefinition
|
2022-03-15 12:16:51 +01:00
|
|
|
SettingsDefinitionMapCache[definition.name] = settingsDefinitionMap
|
2022-01-31 19:54:04 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// Parse the instance settings, and cache them
|
|
|
|
let instanceSettings
|
|
|
|
if (InstanceSettingsCache[instanceKey]) {
|
|
|
|
instanceSettings = InstanceSettingsCache[instanceKey]
|
|
|
|
} else {
|
|
|
|
instanceSettings = getInstanceSettings(instance, settingsDefinition)
|
|
|
|
InstanceSettingsCache[instanceKey] = instanceSettings
|
|
|
|
}
|
|
|
|
|
2022-02-01 17:32:37 +01:00
|
|
|
// Update the settings types
|
2022-01-31 19:54:04 +01:00
|
|
|
staticSettings = instanceSettings.staticSettings
|
|
|
|
dynamicSettings = instanceSettings.dynamicSettings
|
2022-02-01 17:32:37 +01:00
|
|
|
|
2022-06-13 13:09:29 +02:00
|
|
|
// Check if we have any missing required settings
|
|
|
|
missingRequiredSettings = settingsDefinition.filter(setting => {
|
2022-06-15 11:17:34 +02:00
|
|
|
let empty = instance[setting.key] == null || instance[setting.key] === ""
|
|
|
|
let missing = setting.required && empty
|
|
|
|
|
|
|
|
// Check if this setting depends on another, as it may not be required
|
|
|
|
if (setting.dependsOn) {
|
|
|
|
const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
|
|
|
|
const dependsOnValue = setting.dependsOn.value
|
|
|
|
const realDependentValue = instance[dependsOnKey]
|
|
|
|
if (dependsOnValue == null && realDependentValue == null) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
if (dependsOnValue !== realDependentValue) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return missing
|
2022-06-13 13:09:29 +02:00
|
|
|
})
|
|
|
|
|
2022-02-01 17:32:37 +01:00
|
|
|
// Force an initial enrichment of the new settings
|
2022-03-15 12:16:51 +01:00
|
|
|
enrichComponentSettings(get(context), settingsDefinitionMap, {
|
|
|
|
force: true,
|
|
|
|
})
|
2021-06-25 16:04:27 +02:00
|
|
|
}
|
|
|
|
|
2022-03-15 12:16:51 +01:00
|
|
|
const getSettingsDefinitionMap = settingsDefinition => {
|
|
|
|
let map = {}
|
|
|
|
settingsDefinition?.forEach(setting => {
|
|
|
|
map[setting.key] = setting
|
|
|
|
})
|
|
|
|
return map
|
|
|
|
}
|
|
|
|
|
2022-01-31 19:54:04 +01:00
|
|
|
const getInstanceSettings = (instance, settingsDefinition) => {
|
|
|
|
// Get raw settings
|
|
|
|
let settings = {}
|
|
|
|
Object.entries(instance)
|
2022-09-05 17:35:25 +02:00
|
|
|
.filter(([name]) => !name.startsWith("_"))
|
2022-01-31 19:54:04 +01:00
|
|
|
.forEach(([key, value]) => {
|
|
|
|
settings[key] = value
|
|
|
|
})
|
2022-01-29 19:53:21 +01:00
|
|
|
let newStaticSettings = { ...settings }
|
|
|
|
let newDynamicSettings = { ...settings }
|
2022-09-05 17:35:25 +02:00
|
|
|
|
|
|
|
// Attach some internal properties
|
|
|
|
newDynamicSettings["_conditions"] = instance._conditions
|
|
|
|
newDynamicSettings["_css"] = instance._styles?.custom
|
|
|
|
|
|
|
|
// Derive static, dynamic and nested settings if the instance changed
|
2021-11-08 15:35:58 +01:00
|
|
|
settingsDefinition?.forEach(setting => {
|
2021-11-16 17:29:31 +01:00
|
|
|
if (setting.nested) {
|
2022-01-29 19:53:21 +01:00
|
|
|
delete newDynamicSettings[setting.key]
|
2021-11-16 17:29:31 +01:00
|
|
|
} else {
|
2022-01-31 19:54:04 +01:00
|
|
|
const value = settings[setting.key]
|
2022-01-29 19:53:21 +01:00
|
|
|
if (value == null) {
|
|
|
|
delete newDynamicSettings[setting.key]
|
|
|
|
} else if (typeof value === "string" && value.includes("{{")) {
|
2022-02-01 17:32:37 +01:00
|
|
|
// Strings can be trivially checked
|
2022-01-29 19:53:21 +01:00
|
|
|
delete newStaticSettings[setting.key]
|
2022-03-15 12:16:51 +01:00
|
|
|
} else if (setting.type === "event") {
|
2022-01-31 19:54:04 +01:00
|
|
|
// Always treat button actions as dynamic
|
|
|
|
delete newStaticSettings[setting.key]
|
2022-01-29 19:53:21 +01:00
|
|
|
} else if (typeof value === "object") {
|
2022-02-01 17:32:37 +01:00
|
|
|
// Stringify and check objects
|
2022-01-29 19:53:21 +01:00
|
|
|
const stringified = JSON.stringify(value)
|
|
|
|
if (stringified.includes("{{")) {
|
|
|
|
delete newStaticSettings[setting.key]
|
|
|
|
} else {
|
|
|
|
delete newDynamicSettings[setting.key]
|
|
|
|
}
|
|
|
|
} else {
|
2022-02-01 17:32:37 +01:00
|
|
|
// For other types, we can safely assume they are static
|
2022-01-29 19:53:21 +01:00
|
|
|
delete newDynamicSettings[setting.key]
|
|
|
|
}
|
2021-11-08 15:35:58 +01:00
|
|
|
}
|
|
|
|
})
|
2022-01-29 19:53:21 +01:00
|
|
|
|
2022-01-31 19:54:04 +01:00
|
|
|
return {
|
|
|
|
staticSettings: newStaticSettings,
|
|
|
|
dynamicSettings: newDynamicSettings,
|
|
|
|
}
|
2021-11-08 15:35:58 +01:00
|
|
|
}
|
|
|
|
|
2021-01-29 14:22:38 +01:00
|
|
|
// Enriches any string component props using handlebars
|
2022-03-15 12:16:51 +01:00
|
|
|
const enrichComponentSettings = (
|
|
|
|
context,
|
|
|
|
settingsDefinitionMap,
|
|
|
|
options = { force: false }
|
|
|
|
) => {
|
2021-11-16 17:29:31 +01:00
|
|
|
const contextChanged = context.key !== lastContextKey
|
2022-02-01 17:32:37 +01:00
|
|
|
if (!contextChanged && !options?.force) {
|
2022-01-29 19:53:21 +01:00
|
|
|
return
|
2021-06-25 16:04:27 +02:00
|
|
|
}
|
2022-02-01 17:32:37 +01:00
|
|
|
lastContextKey = context.key
|
2021-06-25 16:04:27 +02:00
|
|
|
|
2021-01-29 14:22:38 +01:00
|
|
|
// Record the timestamp so we can reference it after enrichment
|
|
|
|
latestUpdateTime = Date.now()
|
|
|
|
const enrichmentTime = latestUpdateTime
|
|
|
|
|
2021-11-08 15:35:58 +01:00
|
|
|
// Enrich settings with context
|
2022-03-15 12:16:51 +01:00
|
|
|
const newEnrichedSettings = enrichProps(
|
|
|
|
dynamicSettings,
|
|
|
|
context,
|
|
|
|
settingsDefinitionMap
|
|
|
|
)
|
2021-01-29 14:22:38 +01:00
|
|
|
|
|
|
|
// Abandon this update if a newer update has started
|
|
|
|
if (enrichmentTime !== latestUpdateTime) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2021-11-16 17:29:31 +01:00
|
|
|
enrichedSettings = newEnrichedSettings
|
2021-07-21 15:03:49 +02:00
|
|
|
}
|
|
|
|
|
2021-11-16 17:29:31 +01:00
|
|
|
// Evaluates the list of conditional UI conditions and determines any setting
|
|
|
|
// or visibility changes required
|
2021-07-21 15:03:49 +02:00
|
|
|
const evaluateConditions = conditions => {
|
|
|
|
if (!conditions?.length) {
|
|
|
|
return
|
2021-01-27 16:52:12 +01:00
|
|
|
}
|
2021-07-21 15:03:49 +02:00
|
|
|
|
|
|
|
// Default visible to false if there is a show condition
|
2021-07-26 14:16:45 +02:00
|
|
|
let nextVisible = !conditions.find(condition => condition.action === "show")
|
2021-07-21 15:03:49 +02:00
|
|
|
|
2021-07-26 14:16:45 +02:00
|
|
|
// Execute conditions and determine settings and visibility changes
|
2021-07-21 15:03:49 +02:00
|
|
|
const activeConditions = getActiveConditions(conditions)
|
|
|
|
const result = reduceConditionActions(activeConditions)
|
|
|
|
if (result.visible != null) {
|
|
|
|
nextVisible = result.visible
|
|
|
|
}
|
|
|
|
|
2021-07-26 14:16:45 +02:00
|
|
|
// Update state from condition results
|
|
|
|
conditionalSettings = result.settingUpdates
|
2021-07-21 15:03:49 +02:00
|
|
|
visible = nextVisible
|
2021-01-21 11:41:30 +01:00
|
|
|
}
|
2021-11-16 17:29:31 +01:00
|
|
|
|
|
|
|
// Combines and caches all settings which will be passed to the component
|
|
|
|
// instance. Settings are aggressively memoized to avoid triggering svelte
|
|
|
|
// reactive statements as much as possible.
|
2022-02-01 17:32:37 +01:00
|
|
|
const applySettings = (
|
|
|
|
staticSettings,
|
|
|
|
enrichedSettings,
|
|
|
|
conditionalSettings
|
|
|
|
) => {
|
2022-01-29 19:53:21 +01:00
|
|
|
const allSettings = {
|
|
|
|
...staticSettings,
|
2022-02-01 17:32:37 +01:00
|
|
|
...enrichedSettings,
|
|
|
|
...conditionalSettings,
|
2022-01-29 19:53:21 +01:00
|
|
|
}
|
2021-11-16 17:29:31 +01:00
|
|
|
if (!cachedSettings) {
|
2021-12-17 09:22:40 +01:00
|
|
|
cachedSettings = { ...allSettings }
|
2021-12-17 10:18:07 +01:00
|
|
|
initialSettings = cachedSettings
|
2021-11-16 17:29:31 +01:00
|
|
|
} else {
|
|
|
|
Object.keys(allSettings).forEach(key => {
|
2021-12-17 09:22:40 +01:00
|
|
|
const same = propsAreSame(allSettings[key], cachedSettings[key])
|
|
|
|
if (!same) {
|
2022-01-21 14:32:56 +01:00
|
|
|
// Updated cachedSettings (which is assigned by reference to
|
|
|
|
// initialSettings) so that if we remount the component then the
|
|
|
|
// initial props are up to date. By setting it this way rather than
|
|
|
|
// setting it on initialSettings directly, we avoid a double render.
|
2021-11-16 17:29:31 +01:00
|
|
|
cachedSettings[key] = allSettings[key]
|
2022-01-21 14:32:56 +01:00
|
|
|
|
2022-09-05 17:35:25 +02:00
|
|
|
// Don't update components for internal properties
|
|
|
|
if (key.startsWith("_")) {
|
|
|
|
return
|
2022-08-22 17:45:59 +02:00
|
|
|
}
|
2022-01-21 14:32:56 +01:00
|
|
|
|
2022-01-25 12:22:26 +01:00
|
|
|
if (ref?.$$set) {
|
|
|
|
// Programmatically set the prop to avoid svelte reactive statements
|
|
|
|
// firing inside components. This circumvents the problems caused by
|
|
|
|
// spreading a props object.
|
|
|
|
ref.$$set({ [key]: allSettings[key] })
|
|
|
|
} else {
|
|
|
|
// Sometimes enrichment can occur multiple times before the
|
|
|
|
// component has mounted and been assigned a ref.
|
|
|
|
// In these cases, for some reason we need to update the
|
|
|
|
// initial settings object, even though it is equivalent by
|
|
|
|
// reference to cached settings. This solves the problem of multiple
|
|
|
|
// initial enrichments, while also not causing wasted renders for
|
|
|
|
// any components not affected by this issue.
|
|
|
|
initialSettings[key] = allSettings[key]
|
|
|
|
}
|
2021-11-16 17:29:31 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2021-11-18 21:32:42 +01:00
|
|
|
|
2022-05-17 15:10:21 +02:00
|
|
|
const scrollIntoView = () => {
|
2022-07-15 14:47:39 +02:00
|
|
|
const node = document.getElementsByClassName(id)?.[0]?.children[0]
|
2022-05-17 15:10:21 +02:00
|
|
|
if (!node) {
|
|
|
|
return
|
|
|
|
}
|
2022-05-17 15:34:54 +02:00
|
|
|
node.style.scrollMargin = "100px"
|
2022-05-17 15:10:21 +02:00
|
|
|
node.scrollIntoView({
|
|
|
|
behavior: "smooth",
|
|
|
|
block: "start",
|
|
|
|
inline: "start",
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2021-11-26 14:25:02 +01:00
|
|
|
onMount(() => {
|
2022-02-24 22:48:54 +01:00
|
|
|
if (
|
|
|
|
$appStore.isDevApp &&
|
|
|
|
!componentStore.actions.isComponentRegistered(id)
|
|
|
|
) {
|
|
|
|
componentStore.actions.registerInstance(id, {
|
2022-08-11 18:05:42 +02:00
|
|
|
component: instance._component,
|
2022-02-24 22:48:54 +01:00
|
|
|
getSettings: () => cachedSettings,
|
|
|
|
getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
|
|
|
|
getDataContext: () => get(context),
|
2022-08-11 18:05:42 +02:00
|
|
|
reload: () => initialise(instance, true),
|
2022-02-24 22:48:54 +01:00
|
|
|
})
|
|
|
|
}
|
2021-11-26 14:25:02 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
onDestroy(() => {
|
2022-02-24 22:48:54 +01:00
|
|
|
if (
|
|
|
|
$appStore.isDevApp &&
|
|
|
|
componentStore.actions.isComponentRegistered(id)
|
|
|
|
) {
|
|
|
|
componentStore.actions.unregisterInstance(id)
|
|
|
|
}
|
2021-11-26 14:25:02 +01:00
|
|
|
})
|
2020-11-13 16:42:32 +01:00
|
|
|
</script>
|
|
|
|
|
2022-07-15 11:46:37 +02:00
|
|
|
{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
|
2022-01-25 12:22:26 +01:00
|
|
|
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
|
|
|
|
<!-- and the performance matters for the selection indicators -->
|
|
|
|
<div
|
2022-02-24 15:14:55 +01:00
|
|
|
class={`component ${id}`}
|
2022-01-25 12:22:26 +01:00
|
|
|
class:draggable
|
|
|
|
class:droppable
|
|
|
|
class:empty
|
|
|
|
class:interactive
|
|
|
|
class:editing
|
|
|
|
class:block={isBlock}
|
2022-09-28 15:16:09 +02:00
|
|
|
class:explode={children.length && !isLayout && $builderStore.isDragging}
|
2022-01-25 12:22:26 +01:00
|
|
|
data-id={id}
|
|
|
|
data-name={name}
|
2022-05-23 13:22:42 +02:00
|
|
|
data-icon={icon}
|
2022-01-25 12:22:26 +01:00
|
|
|
>
|
|
|
|
<svelte:component this={constructor} bind:this={ref} {...initialSettings}>
|
2022-06-15 16:32:33 +02:00
|
|
|
{#if hasMissingRequiredSettings}
|
|
|
|
<ComponentPlaceholder />
|
|
|
|
{:else if children.length}
|
2022-01-25 12:22:26 +01:00
|
|
|
{#each children as child (child._id)}
|
|
|
|
<svelte:self instance={child} />
|
|
|
|
{/each}
|
|
|
|
{:else if emptyState}
|
2022-06-07 14:41:17 +02:00
|
|
|
{#if isScreen}
|
|
|
|
<ScreenPlaceholder />
|
|
|
|
{:else}
|
|
|
|
<Placeholder />
|
|
|
|
{/if}
|
2022-01-25 12:22:26 +01:00
|
|
|
{:else if isBlock}
|
|
|
|
<slot />
|
|
|
|
{/if}
|
|
|
|
</svelte:component>
|
|
|
|
</div>
|
|
|
|
{/if}
|
2021-06-08 09:00:54 +02:00
|
|
|
|
|
|
|
<style>
|
2021-06-11 09:05:49 +02:00
|
|
|
.component {
|
2021-06-08 09:00:54 +02:00
|
|
|
display: contents;
|
|
|
|
}
|
2022-09-28 15:16:09 +02:00
|
|
|
.component :global(> *) {
|
|
|
|
transition: padding 250ms ease, border 250ms ease;
|
|
|
|
}
|
|
|
|
.component.explode :global(> *) {
|
|
|
|
padding: 12px 4px !important;
|
|
|
|
border: 2px dashed var(--spectrum-global-color-gray-400) !important;
|
|
|
|
}
|
2021-09-20 16:34:51 +02:00
|
|
|
.interactive :global(*:hover) {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.draggable :global(*:hover) {
|
2021-09-20 09:26:44 +02:00
|
|
|
cursor: grab;
|
2021-09-16 08:28:59 +02:00
|
|
|
}
|
2021-10-28 13:43:31 +02:00
|
|
|
.editing :global(*:hover) {
|
|
|
|
cursor: auto;
|
|
|
|
}
|
2021-06-08 09:00:54 +02:00
|
|
|
</style>
|