From 353c9c81951a72d8b0a7737615f10b66936d53ee Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 10:18:45 +0100 Subject: [PATCH 1/5] component nav dropdown menu --- .../builder/src/builderStore/store/index.js | 78 ++++++++++-- .../src/components/common/Icons/More.svelte | 8 ++ .../src/components/common/Icons/index.js | 1 + .../ComponentDropdownMenu.svelte | 116 ++++++++++++++++++ .../ComponentsHierarchyChildren.svelte | 54 +------- .../[application]/frontend/_layout.svelte | 1 + 6 files changed, 197 insertions(+), 61 deletions(-) create mode 100644 packages/builder/src/components/common/Icons/More.svelte create mode 100644 packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index f4d47064be..6755bc0a7c 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -64,11 +64,16 @@ export const getStore = () => { store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) + store.storeComponentForCopy = storeComponentForCopy(store) + store.pasteComponent = pasteComponent(store) return store } export default getStore +export const getComponentDefinition = (state, name) => + name.startsWith("##") ? getBuiltin(name) : state.components[name] + const setPackage = (store, initial) => async pkg => { const [main_screens, unauth_screens] = await Promise.all([ api @@ -317,8 +322,6 @@ const setCurrentPage = store => pageName => { }) } -// const getComponentDefinition = (components, name) => components.find(c => c.name === name) - /** * @param {string} componentToAdd - name of the component to add to the application * @param {string} presetName - name of the component preset if defined @@ -344,9 +347,7 @@ const addChildComponent = store => (componentToAdd, presetName) => { return state } - const component = componentToAdd.startsWith("##") - ? getBuiltin(componentToAdd) - : state.components[componentToAdd] + const component = getComponentDefinition(componentToAdd) const presetProps = presetName ? component.presets[presetName] : {} @@ -398,14 +399,18 @@ const addTemplatedComponent = store => props => { }) } +const _selectComponent = (state, component) => { + const componentDef = component._component.startsWith("##") + ? component + : state.components[component._component] + state.currentComponentInfo = makePropsSafe(componentDef, component) + state.currentView = "component" + return state +} + const selectComponent = store => component => { store.update(state => { - const componentDef = component._component.startsWith("##") - ? component - : state.components[component._component] - state.currentComponentInfo = makePropsSafe(componentDef, component) - state.currentView = "component" - return state + return _selectComponent(state, component) }) } @@ -534,7 +539,6 @@ const copyComponent = store => component => { p._id = uuid() }) parent._children = [...parent._children, copiedComponent] - s.curren _saveCurrentPreviewItem(s) s.currentComponentInfo = copiedComponent return s @@ -572,10 +576,58 @@ const getPathToComponent = store => component => { return path } +const generateNewIdsForComponent = component => + walkProps(component, p => { + p._id = uuid() + }) + +const storeComponentForCopy = store => (component, cut = false) => { + store.update(s => { + const copiedComponent = cloneDeep(component) + s.componentToPaste = copiedComponent + if (cut) { + const parent = getParent(s.currentPreviewItem.props, component._id) + parent._children = parent._children.filter(c => c._id !== component._id) + _selectComponent(s, parent) + } + + return s + }) +} + +const pasteComponent = store => (targetComponent, mode) => { + store.update(s => { + if (!s.componentToPaste) return s + + const componentToPaste = cloneDeep(s.componentToPaste) + generateNewIdsForComponent(componentToPaste) + delete componentToPaste._cutId + + if (mode === "inside") { + targetComponent._children.push(componentToPaste) + return s + } + + const parent = getParent(s.currentPreviewItem.props, targetComponent) + + const targetIndex = parent._children.indexOf(targetComponent) + const index = mode === "above" ? targetIndex : targetIndex + 1 + parent._children.splice(index, 0, cloneDeep(componentToPaste)) + + _saveCurrentPreviewItem(s) + _selectComponent(s, componentToPaste) + + return s + }) +} + const getParent = (rootProps, child) => { let parent walkProps(rootProps, (p, breakWalk) => { - if (p._children && p._children.includes(child)) { + if ( + p._children && + (p._children.includes(child) || p._children.some(c => c._id === child)) + ) { parent = p breakWalk() } diff --git a/packages/builder/src/components/common/Icons/More.svelte b/packages/builder/src/components/common/Icons/More.svelte new file mode 100644 index 0000000000..f072c48976 --- /dev/null +++ b/packages/builder/src/components/common/Icons/More.svelte @@ -0,0 +1,8 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js index 69b78421da..4e4b41082d 100644 --- a/packages/builder/src/components/common/Icons/index.js +++ b/packages/builder/src/components/common/Icons/index.js @@ -31,3 +31,4 @@ export { default as EmailIcon } from "./Email.svelte" export { default as TwitterIcon } from "./Twitter.svelte" export { default as InfoIcon } from "./Info.svelte" export { default as CloseIcon } from "./Close.svelte" +export { default as MoreIcon } from "./More.svelte" diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte new file mode 100644 index 0000000000..5a485f9680 --- /dev/null +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -0,0 +1,116 @@ + + +
{}}> + + +
+ + + + store.deleteComponent(component)} /> + + \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index eafc1834d0..a61d6960f2 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -3,6 +3,7 @@ import { store } from "builderStore" import { last } from "lodash/fp" import { pipe } from "components/common/core" + import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte" import { XCircleIcon, ChevronUpIcon, @@ -51,30 +52,9 @@ class:selected={currentComponent === component} style="padding-left: {level * 20 + 53}px">
{get_capitalised_name(component._component)}
-
- {#if index > 0} - - {/if} - {#if index < components.length - 1} - - {/if} +
+
- -
{#if component._children} @@ -111,7 +91,7 @@ font-size: 13px; } - .item button { + .actions { display: none; height: 20px; width: 28px; @@ -120,37 +100,15 @@ border-style: none; background: rgba(0, 0, 0, 0); cursor: pointer; - } - - .item button.copy { - width: 26px; + position: relative; } .item:hover { background: #fafafa; cursor: pointer; } - .item:hover button { + .item:hover .actions { display: block; } - .item:hover button:hover { - color: var(--button-text); - } - - .reorder-buttons { - display: flex; - flex-direction: column; - height: 100%; - } - - .reorder-buttons > button { - flex: 1 1 auto; - width: 30px; - height: 15px; - } - - .reorder-buttons > button.solo { - padding-top: 2px; - } diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 536da887d6..9b38d64f5d 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -103,6 +103,7 @@ overflow: scroll; display: flex; flex-direction: column; + z-index: 5; } .preview-pane { From b29d39d525873c1a5d987274db868f1df0bfdf85 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 10:25:12 +0100 Subject: [PATCH 2/5] removing old component actions --- .../ComponentDropdownMenu.svelte | 20 ++----------------- .../userInterface/ComponentsHierarchy.svelte | 6 +----- .../ComponentsHierarchyChildren.svelte | 18 ++--------------- .../userInterface/PageLayout.svelte | 6 +----- 4 files changed, 6 insertions(+), 44 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 5a485f9680..e2f8943d9e 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -20,23 +20,6 @@ const showDropdown = () => { dropdown.show() } -/* -{#if index > 0} - - {/if} - {#if index < components.length - 1} - - {/if} -*/ -
{}}> @@ -77,8 +60,9 @@ const showDropdown = () => { border-style: none; border-radius: 2px; padding: 5px; - background: var(--grey); + background: transparent; cursor: pointer; + color: var(--button-text) } .menu { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 26929fcdce..e02874c0dd 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -72,11 +72,7 @@ {#if $store.currentPreviewItem.name === screen.title && screen.component.props._children} + currentComponent={$store.currentComponentInfo} /> {/if} {/each} diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index a61d6960f2..16aab64576 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -15,23 +15,13 @@ export let currentComponent export let onSelect = () => {} export let level = 0 - export let onDeleteComponent - export let onMoveUpComponent - export let onMoveDownComponent - export let onCopyComponent + const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) const get_name = s => (!s ? "" : last(s.split("/"))) const get_capitalised_name = name => pipe(name, [get_name, capitalise]) - const moveDownComponent = component => { - const c = component - return () => { - return onMoveDownComponent(c) - } - } - const selectComponent = component => { // Set current component store.selectComponent(component) @@ -62,11 +52,7 @@ components={component._children} {currentComponent} {onSelect} - level={level + 1} - {onDeleteComponent} - {onMoveUpComponent} - {onMoveDownComponent} - {onCopyComponent} /> + level={level + 1} /> {/if} {/each} diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte index 2a532f9624..c4b786c5b2 100644 --- a/packages/builder/src/components/userInterface/PageLayout.svelte +++ b/packages/builder/src/components/userInterface/PageLayout.svelte @@ -68,11 +68,7 @@ + currentComponent={$store.currentComponentInfo} /> {/if}
From 50ecfba39535bd1728db8edcb86dea295e8c6d75 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 11:04:32 +0100 Subject: [PATCH 3/5] few bugfixes --- .../builder/src/builderStore/store/index.js | 2 +- .../userInterface/ComponentDropdownMenu.svelte | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 6755bc0a7c..a034114b02 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -347,7 +347,7 @@ const addChildComponent = store => (componentToAdd, presetName) => { return state } - const component = getComponentDefinition(componentToAdd) + const component = getComponentDefinition(state, componentToAdd) const presetProps = presetName ? component.presets[presetName] : {} diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index e2f8943d9e..5672ea6f4c 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -11,13 +11,15 @@ export let component let confirmDeleteDialog let dropdownEl -$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right" }); +$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right", "delay-hide": 0, animation: false }); +$: dropdown && UIkit.util.on(dropdown, "shown", () => hidden = false) $: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false $: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id const lastPartOfName = c => (c ? last(c._component.split("/")) : "") -const showDropdown = () => { - dropdown.show() + +const hideDropdown = () => { + dropdown.hide() } @@ -26,7 +28,7 @@ const showDropdown = () => { -
    dropdown.hide()} on:click={() => dropdown.hide()}> +
    • confirmDeleteDialog.show()}>Delete
    • store.moveUpComponent(component)}>Move up
    • store.moveDownComponent(component)}>Move down
      • @@ -56,13 +58,18 @@ const showDropdown = () => { z-index:9; } +.hidden { + display: none; +} + .root button { border-style: none; border-radius: 2px; padding: 5px; background: transparent; cursor: pointer; - color: var(--button-text) + color: var(--button-text); + outline: none; } .menu { From 0db37061090bb38aa013b107391f92e32930f264 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Mon, 1 Jun 2020 12:12:25 +0100 Subject: [PATCH 4/5] refactor component menu actions inside control --- .../builder/src/builderStore/store/index.js | 186 +----------------- .../builder/src/builderStore/storeUtils.js | 59 ++++++ .../ComponentDropdownMenu.svelte | 139 +++++++++++-- .../userInterface/ComponentsHierarchy.svelte | 12 -- .../userInterface/PageLayout.svelte | 12 -- .../userInterface/UserInterfaceRoot.svelte | 12 -- .../[application]/frontend/_layout.svelte | 12 -- 7 files changed, 193 insertions(+), 239 deletions(-) create mode 100644 packages/builder/src/builderStore/storeUtils.js diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index a034114b02..f94cea2399 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -1,4 +1,4 @@ -import { cloneDeep, values } from "lodash/fp" +import { values } from "lodash/fp" import { backendUiStore } from "builderStore" import * as backendStoreActions from "./backend" import { writable, get } from "svelte/store" @@ -16,6 +16,14 @@ import { buildCodeForScreens } from "../buildCodeForScreens" import { generate_screen_css } from "../generate_css" import { insertCodeMetadata } from "../insertCodeMetadata" import { uuid } from "../uuid" +import { + selectComponent as _selectComponent, + getParent, + walkProps, + savePage as _savePage, + saveCurrentPreviewItem as _saveCurrentPreviewItem, + saveScreenApi as _saveScreenApi, +} from "../storeUtils" export const getStore = () => { const initial = { @@ -57,15 +65,9 @@ export const getStore = () => { store.setComponentStyle = setComponentStyle(store) store.setComponentCode = setComponentCode(store) store.setScreenType = setScreenType(store) - store.deleteComponent = deleteComponent(store) - store.moveUpComponent = moveUpComponent(store) - store.moveDownComponent = moveDownComponent(store) - store.copyComponent = copyComponent(store) store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) - store.storeComponentForCopy = storeComponentForCopy(store) - store.pasteComponent = pasteComponent(store) return store } @@ -145,12 +147,6 @@ const _saveScreen = async (store, s, screen) => { return s } -const _saveScreenApi = (screen, s) => { - api - .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) - .then(() => _savePage(s)) -} - const createScreen = store => (screenName, route, layoutComponentName) => { store.update(state => { const rootComponent = state.components[layoutComponentName] @@ -282,15 +278,6 @@ const removeStylesheet = store => stylesheet => { }) } -const _savePage = async s => { - const page = s.pages[s.currentPageName] - await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { - page: { componentLibraries: s.pages.componentLibraries, ...page }, - uiFunctions: s.currentPageFunctions, - screens: page._screens, - }) -} - const setCurrentPage = store => pageName => { store.update(state => { const current_screens = state.pages[pageName]._screens @@ -399,15 +386,6 @@ const addTemplatedComponent = store => props => { }) } -const _selectComponent = (state, component) => { - const componentDef = component._component.startsWith("##") - ? component - : state.components[component._component] - state.currentComponentInfo = makePropsSafe(componentDef, component) - state.currentView = "component" - return state -} - const selectComponent = store => component => { store.update(state => { return _selectComponent(state, component) @@ -477,74 +455,6 @@ const setScreenType = store => type => { }) } -const deleteComponent = store => componentName => { - store.update(state => { - const parent = getParent(state.currentPreviewItem.props, componentName) - - if (parent) { - parent._children = parent._children.filter( - component => component !== componentName - ) - } - - _saveCurrentPreviewItem(state) - - return state - }) -} - -const moveUpComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === 0) return s - - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex - 1, 0, component) - parent._children = newChildren - } - s.currentComponentInfo = component - _saveCurrentPreviewItem(s) - - return s - }) -} - -const moveDownComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === parent._children.length - 1) return s - - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex + 1, 0, component) - parent._children = newChildren - } - s.currentComponentInfo = component - _saveCurrentPreviewItem(s) - - return s - }) -} - -const copyComponent = store => component => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - const copiedComponent = cloneDeep(component) - walkProps(copiedComponent, p => { - p._id = uuid() - }) - parent._children = [...parent._children, copiedComponent] - _saveCurrentPreviewItem(s) - s.currentComponentInfo = copiedComponent - return s - }) -} - const getPathToComponent = store => component => { // Gets all the components to needed to construct a path. const tempStore = get(store) @@ -576,87 +486,9 @@ const getPathToComponent = store => component => { return path } -const generateNewIdsForComponent = component => - walkProps(component, p => { - p._id = uuid() - }) - -const storeComponentForCopy = store => (component, cut = false) => { - store.update(s => { - const copiedComponent = cloneDeep(component) - s.componentToPaste = copiedComponent - if (cut) { - const parent = getParent(s.currentPreviewItem.props, component._id) - parent._children = parent._children.filter(c => c._id !== component._id) - _selectComponent(s, parent) - } - - return s - }) -} - -const pasteComponent = store => (targetComponent, mode) => { - store.update(s => { - if (!s.componentToPaste) return s - - const componentToPaste = cloneDeep(s.componentToPaste) - generateNewIdsForComponent(componentToPaste) - delete componentToPaste._cutId - - if (mode === "inside") { - targetComponent._children.push(componentToPaste) - return s - } - - const parent = getParent(s.currentPreviewItem.props, targetComponent) - - const targetIndex = parent._children.indexOf(targetComponent) - const index = mode === "above" ? targetIndex : targetIndex + 1 - parent._children.splice(index, 0, cloneDeep(componentToPaste)) - - _saveCurrentPreviewItem(s) - _selectComponent(s, componentToPaste) - - return s - }) -} - -const getParent = (rootProps, child) => { - let parent - walkProps(rootProps, (p, breakWalk) => { - if ( - p._children && - (p._children.includes(child) || p._children.some(c => c._id === child)) - ) { - parent = p - breakWalk() - } - }) - return parent -} - -const walkProps = (props, action, cancelToken = null) => { - cancelToken = cancelToken || { cancelled: false } - action(props, () => { - cancelToken.cancelled = true - }) - - if (props._children) { - for (let child of props._children) { - if (cancelToken.cancelled) return - walkProps(child, action, cancelToken) - } - } -} - const setMetadataProp = store => (name, prop) => { store.update(s => { s.currentPreviewItem[name] = prop return s }) } - -const _saveCurrentPreviewItem = s => - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js new file mode 100644 index 0000000000..c8c0c7211a --- /dev/null +++ b/packages/builder/src/builderStore/storeUtils.js @@ -0,0 +1,59 @@ +import { makePropsSafe } from "components/userInterface/pagesParsing/createProps" +import api from "./api" + +export const selectComponent = (state, component) => { + const componentDef = component._component.startsWith("##") + ? component + : state.components[component._component] + state.currentComponentInfo = makePropsSafe(componentDef, component) + state.currentView = "component" + return state +} + +export const getParent = (rootProps, child) => { + let parent + walkProps(rootProps, (p, breakWalk) => { + if ( + p._children && + (p._children.includes(child) || p._children.some(c => c._id === child)) + ) { + parent = p + breakWalk() + } + }) + return parent +} + +export const saveCurrentPreviewItem = s => + s.currentFrontEndType === "page" + ? savePage(s) + : saveScreenApi(s.currentPreviewItem, s) + +export const savePage = async s => { + const page = s.pages[s.currentPageName] + await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { + page: { componentLibraries: s.pages.componentLibraries, ...page }, + uiFunctions: s.currentPageFunctions, + screens: page._screens, + }) +} + +export const saveScreenApi = (screen, s) => { + api + .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) + .then(() => savePage(s)) +} + +export const walkProps = (props, action, cancelToken = null) => { + cancelToken = cancelToken || { cancelled: false } + action(props, () => { + cancelToken.cancelled = true + }) + + if (props._children) { + for (let child of props._children) { + if (cancelToken.cancelled) return + walkProps(child, action, cancelToken) + } + } +} \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 5672ea6f4c..21ef4b2ab3 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -3,8 +3,10 @@ import { MoreIcon } from "components/common/Icons" import { store } from "builderStore" import { getComponentDefinition } from "builderStore/store" import ConfirmDialog from "components/common/ConfirmDialog.svelte" -import { last } from "lodash/fp" +import { last, cloneDeep } from "lodash/fp" import UIkit from "uikit" +import { selectComponent, getParent, walkProps, saveCurrentPreviewItem } from "builderStore/storeUtils" +import { uuid } from "builderStore/uuid" export let component @@ -22,6 +24,119 @@ const hideDropdown = () => { dropdown.hide() } +const moveUpComponent = () => { + store.update(s => { + const parent = getParent(s.currentPreviewItem.props, component) + + if (parent) { + const currentIndex = parent._children.indexOf(component) + if (currentIndex === 0) return s + + const newChildren = parent._children.filter(c => c !== component) + newChildren.splice(currentIndex - 1, 0, component) + parent._children = newChildren + } + s.currentComponentInfo = component + saveCurrentPreviewItem(s) + + return s + }) +} + +const moveDownComponent = () => { + store.update(s => { + const parent = getParent(s.currentPreviewItem.props, component) + + if (parent) { + const currentIndex = parent._children.indexOf(component) + if (currentIndex === parent._children.length - 1) return s + + const newChildren = parent._children.filter(c => c !== component) + newChildren.splice(currentIndex + 1, 0, component) + parent._children = newChildren + } + s.currentComponentInfo = component + saveCurrentPreviewItem(s) + + return s + }) +} + +const copyComponent = () => { + store.update(s => { + const parent = getParent(s.currentPreviewItem.props, component) + const copiedComponent = cloneDeep(component) + walkProps(copiedComponent, p => { + p._id = uuid() + }) + parent._children = [...parent._children, copiedComponent] + saveCurrentPreviewItem(s) + s.currentComponentInfo = copiedComponent + return s + }) +} + +const deleteComponent = () => { + store.update(state => { + const parent = getParent(state.currentPreviewItem.props, component) + + if (parent) { + parent._children = parent._children.filter( + c => c !== component + ) + } + + saveCurrentPreviewItem(state) + + return state + }) +} + +const generateNewIdsForComponent = c => + walkProps(c, p => { + p._id = uuid() + }) + +const storeComponentForCopy = (cut = false) => { + store.update(s => { + const copiedComponent = cloneDeep(component) + s.componentToPaste = copiedComponent + if (cut) { + const parent = getParent(s.currentPreviewItem.props, component._id) + parent._children = parent._children.filter(c => c._id !== component._id) + selectComponent(s, parent) + } + + return s + }) +} + +const pasteComponent = mode => { + store.update(s => { + if (!s.componentToPaste) return s + + const componentToPaste = cloneDeep(s.componentToPaste) + generateNewIdsForComponent(componentToPaste) + delete componentToPaste._cutId + + if (mode === "inside") { + component._children.push(componentToPaste) + return s + } + + const parent = getParent(s.currentPreviewItem.props, component) + + const targetIndex = parent._children.indexOf(component) + const index = mode === "above" ? targetIndex : targetIndex + 1 + parent._children.splice(index, 0, cloneDeep(componentToPaste)) + + saveCurrentPreviewItem(s) + selectComponent(s, componentToPaste) + + return s + }) +} +
      {}}> @@ -30,15 +145,15 @@ const hideDropdown = () => {
      • confirmDeleteDialog.show()}>Delete
        • -
      • store.moveUpComponent(component)}>Move up
        • -
      • store.moveDownComponent(component)}>Move down
        • -
      • store.copyComponent(component)}>Duplicate
        • -
      • store.storeComponentForCopy(component, true)}>Cut
        • -
      • store.storeComponentForCopy(component)}>Copy
        • +
      • Move up
        • +
      • Move down
        • +
      • Duplicate
        • +
      • storeComponentForCopy(true)}>Cut
        • +
      • storeComponentForCopy(false)}>Copy
        • -
      • store.pasteComponent(component, "above")}>Paste above
        • -
      • store.pasteComponent(component, "below")}>Paste below
        • -
      • store.pasteComponent(component, "inside")}>Paste inside
        • +
      • pasteComponent("above")}>Paste above
        • +
      • pasteComponent("below")}>Paste below
        • +
      • pasteComponent("inside")}>Paste inside
      @@ -49,7 +164,7 @@ const hideDropdown = () => { title="Confirm Delete" body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`} okText="Delete Component" - onOk={() => store.deleteComponent(component)} /> + onOk={deleteComponent} /> \ No newline at end of file + .disabled { + color: var(--grey-dark); + cursor: default; + } + diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index 16aab64576..344e02d127 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -16,7 +16,6 @@ export let onSelect = () => {} export let level = 0 - const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) const get_name = s => (!s ? "" : last(s.split("/"))) @@ -43,7 +42,7 @@ style="padding-left: {level * 20 + 53}px">
      {get_capitalised_name(component._component)}
      - +
      @@ -96,5 +95,4 @@ .item:hover .actions { display: block; } - diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index cee63c4cbb..86804885ff 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -45,5 +45,4 @@ .newscreen:hover { background: var(--grey-light); } -