bugfix: #284 styles not applied on component copy

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)

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
+}

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,7 +142,7 @@
       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)