diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index f94cea2399..61d58a2e00 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -23,6 +23,7 @@ import { savePage as _savePage, saveCurrentPreviewItem as _saveCurrentPreviewItem, saveScreenApi as _saveScreenApi, + regenerateCssForCurentScreen, } from "../storeUtils" export const getStore = () => { @@ -174,11 +175,10 @@ const createScreen = store => (screenName, route, layoutComponentName) => { const setCurrentScreen = store => screenName => { store.update(s => { const screen = getExactComponent(s.screens, screenName) - screen._css = generate_screen_css([screen.props]) s.currentPreviewItem = screen s.currentFrontEndType = "screen" s.currentView = "detail" - + regenerateCssForCurentScreen(s) const safeProps = makePropsSafe( s.components[screen.props._component], screen.props @@ -296,9 +296,7 @@ const setCurrentPage = store => pageName => { state.currentComponentInfo = safeProps currentPage.props = safeProps state.currentPreviewItem = state.pages[pageName] - state.currentPreviewItem._css = generate_screen_css([ - state.currentPreviewItem.props, - ]) + regenerateCssForCurentScreen(state) for (let screen of state.screens) { screen._css = generate_screen_css([screen.props]) @@ -375,9 +373,7 @@ const addTemplatedComponent = store => props => { state.currentComponentInfo._children = state.currentComponentInfo._children.concat( props ) - state.currentPreviewItem._css = generate_screen_css([ - state.currentPreviewItem.props, - ]) + regenerateCssForCurentScreen(state) setCurrentPageFunctions(state) _saveCurrentPreviewItem(state) @@ -411,9 +407,7 @@ const setComponentStyle = store => (type, name, value) => { } state.currentComponentInfo._styles[type][name] = value - state.currentPreviewItem._css = generate_screen_css([ - state.currentPreviewItem.props, - ]) + regenerateCssForCurentScreen(state) // save without messing with the store _saveCurrentPreviewItem(state) diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js index 68e20e56b3..1ec9d54063 100644 --- a/packages/builder/src/builderStore/storeUtils.js +++ b/packages/builder/src/builderStore/storeUtils.js @@ -1,5 +1,6 @@ import { makePropsSafe } from "components/userInterface/pagesParsing/createProps" import api from "./api" +import { generate_screen_css } from "./generate_css" export const selectComponent = (state, component) => { const componentDef = component._component.startsWith("##") @@ -57,3 +58,10 @@ export const walkProps = (props, action, cancelToken = null) => { } } } + +export const regenerateCssForCurentScreen = state => { + state.currentPreviewItem._css = generate_screen_css([ + state.currentPreviewItem.props, + ]) + return state +} diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index b7cb74fb3c..94c60fd93d 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -10,6 +10,7 @@ getParent, walkProps, saveCurrentPreviewItem, + regenerateCssForCurentScreen, } from "builderStore/storeUtils" import { uuid } from "builderStore/uuid" @@ -29,8 +30,7 @@ $: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false - $: noPaste = - !$store.componentToPaste || $store.componentToPaste._id === component._id + $: noPaste = !$store.componentToPaste const lastPartOfName = c => (c ? last(c._component.split("/")) : "") @@ -86,6 +86,7 @@ parent._children = [...parent._children, copiedComponent] saveCurrentPreviewItem(s) s.currentComponentInfo = copiedComponent + regenerateCssForCurentScreen(s) return s }) } @@ -141,10 +142,10 @@ const targetIndex = parent._children.indexOf(component) const index = mode === "above" ? targetIndex : targetIndex + 1 parent._children.splice(index, 0, cloneDeep(componentToPaste)) - + regenerateCssForCurentScreen(s) saveCurrentPreviewItem(s) selectComponent(s, componentToPaste) - + return s }) }