Add reactivity to settings bar grid style buttons
This commit is contained in:
parent
8a6d4c0bf6
commit
4bdb408a39
4 changed files with 34 additions and 16 deletions
|
@ -208,6 +208,7 @@
|
||||||
draggable,
|
draggable,
|
||||||
definition,
|
definition,
|
||||||
errored: errorState,
|
errored: errorState,
|
||||||
|
draggable,
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update component context
|
// Update component context
|
||||||
|
|
|
@ -7,22 +7,9 @@
|
||||||
export let icon
|
export let icon
|
||||||
export let title
|
export let title
|
||||||
export let componentId
|
export let componentId
|
||||||
|
export let computedStyles
|
||||||
|
|
||||||
// Needs to update in real time
|
$: active = computedStyles?.getPropertyValue(style) === value
|
||||||
|
|
||||||
let currentValue
|
|
||||||
|
|
||||||
$: fetchCurrentValue(componentId, style)
|
|
||||||
$: active = currentValue === value
|
|
||||||
|
|
||||||
const fetchCurrentValue = (id, style) => {
|
|
||||||
const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
|
|
||||||
if (!node) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
const styles = getComputedStyle(node)
|
|
||||||
currentValue = styles.getPropertyValue(style)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
|
|
@ -17,10 +17,13 @@
|
||||||
let interval
|
let interval
|
||||||
let self
|
let self
|
||||||
let measured = false
|
let measured = false
|
||||||
|
let observer
|
||||||
|
let computedStyles
|
||||||
|
|
||||||
// TODO: respect dependsOn keys
|
// TODO: respect dependsOn keys
|
||||||
|
|
||||||
$: componentId = $builderStore.selectedComponentId
|
$: componentId = $builderStore.selectedComponentId
|
||||||
|
$: measured, observeComputedStyles(componentId)
|
||||||
$: component = $componentStore.selectedComponent
|
$: component = $componentStore.selectedComponent
|
||||||
$: definition = $componentStore.selectedComponentDefinition
|
$: definition = $componentStore.selectedComponentDefinition
|
||||||
$: parent = findComponentParent($builderStore.screen.props, componentId)
|
$: parent = findComponentParent($builderStore.screen.props, componentId)
|
||||||
|
@ -131,6 +134,21 @@
|
||||||
}
|
}
|
||||||
const debouncedUpdate = Utils.domDebounce(updatePosition)
|
const debouncedUpdate = Utils.domDebounce(updatePosition)
|
||||||
|
|
||||||
|
const observeComputedStyles = id => {
|
||||||
|
observer?.disconnect()
|
||||||
|
const node = document.getElementsByClassName(`${id}-dom`)[0]?.parentNode
|
||||||
|
if (node) {
|
||||||
|
observer = new MutationObserver(() => {
|
||||||
|
computedStyles = getComputedStyle(node)
|
||||||
|
})
|
||||||
|
observer.observe(node, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ["style"],
|
||||||
|
})
|
||||||
|
computedStyles = getComputedStyle(node)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
debouncedUpdate()
|
debouncedUpdate()
|
||||||
interval = setInterval(debouncedUpdate, 100)
|
interval = setInterval(debouncedUpdate, 100)
|
||||||
|
@ -140,6 +158,7 @@
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
clearInterval(interval)
|
clearInterval(interval)
|
||||||
document.removeEventListener("scroll", debouncedUpdate, true)
|
document.removeEventListener("scroll", debouncedUpdate, true)
|
||||||
|
observer?.disconnect()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -157,6 +176,7 @@
|
||||||
icon="AlignLeft"
|
icon="AlignLeft"
|
||||||
title="Align left"
|
title="Align left"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<GridStylesButton
|
<GridStylesButton
|
||||||
style={gridHAlignVar}
|
style={gridHAlignVar}
|
||||||
|
@ -164,6 +184,7 @@
|
||||||
icon="AlignCenter"
|
icon="AlignCenter"
|
||||||
title="Align center"
|
title="Align center"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<GridStylesButton
|
<GridStylesButton
|
||||||
style={gridHAlignVar}
|
style={gridHAlignVar}
|
||||||
|
@ -171,6 +192,7 @@
|
||||||
icon="AlignRight"
|
icon="AlignRight"
|
||||||
title="Align right"
|
title="Align right"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<GridStylesButton
|
<GridStylesButton
|
||||||
style={gridHAlignVar}
|
style={gridHAlignVar}
|
||||||
|
@ -178,6 +200,7 @@
|
||||||
icon="MoveLeftRight"
|
icon="MoveLeftRight"
|
||||||
title="Stretch horizontally"
|
title="Stretch horizontally"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<div class="divider" />
|
<div class="divider" />
|
||||||
<GridStylesButton
|
<GridStylesButton
|
||||||
|
@ -186,6 +209,7 @@
|
||||||
icon="AlignTop"
|
icon="AlignTop"
|
||||||
title="Align top"
|
title="Align top"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<GridStylesButton
|
<GridStylesButton
|
||||||
style={gridVAlignVar}
|
style={gridVAlignVar}
|
||||||
|
@ -193,6 +217,7 @@
|
||||||
icon="AlignMiddle"
|
icon="AlignMiddle"
|
||||||
title="Align middle"
|
title="Align middle"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<GridStylesButton
|
<GridStylesButton
|
||||||
style={gridVAlignVar}
|
style={gridVAlignVar}
|
||||||
|
@ -200,6 +225,7 @@
|
||||||
icon="AlignBottom"
|
icon="AlignBottom"
|
||||||
title="Align bottom"
|
title="Align bottom"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<GridStylesButton
|
<GridStylesButton
|
||||||
style={gridVAlignVar}
|
style={gridVAlignVar}
|
||||||
|
@ -207,6 +233,7 @@
|
||||||
icon="MoveUpDown"
|
icon="MoveUpDown"
|
||||||
title="Stretch vertically"
|
title="Stretch vertically"
|
||||||
{componentId}
|
{componentId}
|
||||||
|
{computedStyles}
|
||||||
/>
|
/>
|
||||||
<div class="divider" />
|
<div class="divider" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -71,7 +71,7 @@ export const gridLayout = (node, metadata) => {
|
||||||
|
|
||||||
// Applies the required listeners, CSS and classes to a component DOM node
|
// Applies the required listeners, CSS and classes to a component DOM node
|
||||||
const applyMetadata = metadata => {
|
const applyMetadata = metadata => {
|
||||||
const { id, styles, interactive, errored, definition } = metadata
|
const { id, styles, interactive, errored, definition, draggable } = metadata
|
||||||
|
|
||||||
// Callback to select the component when clicking on the wrapper
|
// Callback to select the component when clicking on the wrapper
|
||||||
selectComponent = e => {
|
selectComponent = e => {
|
||||||
|
@ -116,6 +116,9 @@ export const gridLayout = (node, metadata) => {
|
||||||
if (interactive) {
|
if (interactive) {
|
||||||
node.addEventListener("click", selectComponent, false)
|
node.addEventListener("click", selectComponent, false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add draggable attribute
|
||||||
|
node.setAttribute("draggable", !!draggable)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Removes the previously set up listeners
|
// Removes the previously set up listeners
|
||||||
|
|
Loading…
Reference in a new issue