remove old files
This commit is contained in:
Martin McKeaveney
parent
af84518f81
commit
83924f0efa
|
|
@ -11,10 +11,9 @@
|
|||
const dragDropStore = instantiateStore()
|
||||
|
||||
export let route
|
||||
export let path
|
||||
export let indent
|
||||
|
||||
$: console.log(route)
|
||||
$: console.log("preview", $store.currentPreviewItem)
|
||||
$: selectedScreen = $store.currentPreviewItem
|
||||
|
||||
const changeScreen = screenId => {
|
||||
|
|
@ -26,28 +25,28 @@
|
|||
|
||||
<NavItem
|
||||
icon="ri-route-line"
|
||||
text={route.fullpath}
|
||||
text={path}
|
||||
opened={true}
|
||||
withArrow={route.subpaths}
|
||||
on:click={() => console.log(route)} />
|
||||
|
||||
{#each Object.keys(route.screens) as screen}
|
||||
<NavItem
|
||||
icon="ri-artboard-2-line"
|
||||
indentLevel={indent || 1}
|
||||
selected={$store.currentPreviewItem._id === route.screens[screen]}
|
||||
opened={$store.currentPreviewItem._id === route.screens[screen]}
|
||||
text={screen || 'DEFAULT'}
|
||||
withArrow={route.subpaths}
|
||||
on:click={() => changeScreen(route.screens[screen])}>
|
||||
<ScreenDropdownMenu screen={route.screens[screen]} />
|
||||
</NavItem>
|
||||
{#if selectedScreen?._id === route.screens[screen]}
|
||||
<ComponentsTree
|
||||
components={selectedScreen.props._children}
|
||||
currentComponent={$store.currentComponentInfo}
|
||||
{dragDropStore} />
|
||||
{/if}
|
||||
{/each}
|
||||
{#each Object.keys(route.subpaths) as subpath}
|
||||
<svelte:self route={route.subpaths[subpath]} indent={2} />
|
||||
{#each Object.keys(route.subpaths[subpath].screens) as screen}
|
||||
<NavItem
|
||||
icon="ri-artboard-2-line"
|
||||
indentLevel={indent || 1}
|
||||
selected={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
|
||||
opened={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
|
||||
text={subpath}
|
||||
withArrow={route.subpaths}
|
||||
on:click={() => changeScreen(route.subpaths[subpath].screens[screen])}>
|
||||
<ScreenDropdownMenu screen={route.subpaths[subpath].screens[screen]} />
|
||||
</NavItem>
|
||||
{#if selectedScreen?._id === route.subpaths[subpath].screens[screen]}
|
||||
<ComponentsTree
|
||||
components={selectedScreen.props._children}
|
||||
currentComponent={$store.currentComponentInfo}
|
||||
{dragDropStore} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { goto } from "@sveltech/routify"
|
||||
import { store } from "builderStore"
|
||||
import { store, allScreens } from "builderStore"
|
||||
import { notifier } from "builderStore/store/notifications"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import { DropdownMenu } from "@budibase/bbui"
|
||||
|
|
@ -13,12 +13,13 @@
|
|||
let anchor
|
||||
|
||||
const deleteScreen = () => {
|
||||
store.actions.screens.delete(screen, $store.currentPageName)
|
||||
const screenToDelete = $allScreens.find(scr => scr._id === screen)
|
||||
store.actions.screens.delete(screenToDelete)
|
||||
// update the page if required
|
||||
store.update(state => {
|
||||
if (state.currentPreviewItem._id === screen._id) {
|
||||
store.actions.pages.select($store.currentPageName)
|
||||
notifier.success(`Screen ${screen.name} deleted successfully.`)
|
||||
notifier.success(`Screen ${screenToDelete.name} deleted successfully.`)
|
||||
$goto(`./:page/page-layout`)
|
||||
}
|
||||
return state
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@
|
|||
|
||||
<div class="root">
|
||||
{#each Object.keys(routes) as path}
|
||||
<PathTree route={routes[path]} />
|
||||
<PathTree {path} route={routes[path]} />
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
<script>
|
||||
import { goto } from "@sveltech/routify"
|
||||
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
|
||||
import { trimCharsStart, trimChars } from "lodash/fp"
|
||||
import { pipe } from "../../helpers"
|
||||
import { store } from "builderStore"
|
||||
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
|
||||
import { writable } from "svelte/store"
|
||||
import NavItem from "components/common/NavItem.svelte"
|
||||
|
||||
export let screens = []
|
||||
|
||||
$: sortedScreens = screens.sort((s1, s2) => {
|
||||
const name1 = s1.props._instanceName?.toLowerCase() ?? ""
|
||||
const name2 = s2.props._instanceName?.toLowerCase() ?? ""
|
||||
return name1 > name2 ? 1 : -1
|
||||
})
|
||||
/*
|
||||
Using a store here seems odd....
|
||||
have a look in the <ComponentsHierarchyChildren /> code file to find out why.
|
||||
I have commented the dragDropStore parameter
|
||||
*/
|
||||
const dragDropStore = writable({})
|
||||
|
||||
let confirmDeleteDialog
|
||||
let componentToDelete = ""
|
||||
|
||||
const normalizedName = name =>
|
||||
pipe(name, [
|
||||
trimCharsStart("./"),
|
||||
trimCharsStart("~/"),
|
||||
trimCharsStart("../"),
|
||||
trimChars(" "),
|
||||
])
|
||||
|
||||
const changeScreen = screen => {
|
||||
store.actions.screens.select(screen.props._instanceName)
|
||||
$goto(`./:page/${screen.props._instanceName}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
{#each sortedScreens as screen}
|
||||
<NavItem
|
||||
icon="ri-artboard-2-line"
|
||||
text={screen.props._instanceName}
|
||||
withArrow={screen.props._children.length}
|
||||
selected={$store.currentComponentInfo._id === screen.props._id}
|
||||
opened={$store.currentPreviewItem.name === screen.props._id}
|
||||
on:click={() => changeScreen(screen)}>
|
||||
<ScreenDropdownMenu {screen} />
|
||||
</NavItem>
|
||||
|
||||
{#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
|
||||
<ComponentsHierarchyChildren
|
||||
components={screen.props._children}
|
||||
currentComponent={$store.currentComponentInfo}
|
||||
{dragDropStore} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -1,185 +0,0 @@
|
|||
<script>
|
||||
import { goto } from "@sveltech/routify"
|
||||
import { store } from "builderStore"
|
||||
import { last } from "lodash/fp"
|
||||
import { pipe } from "../../helpers"
|
||||
import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
|
||||
import NavItem from "components/common/NavItem.svelte"
|
||||
import { getComponentDefinition } from "builderStore/storeUtils"
|
||||
|
||||
export let components = []
|
||||
export let currentComponent
|
||||
export let onSelect = () => {}
|
||||
export let level = 0
|
||||
|
||||
/*
|
||||
"dragDropStore" is a svelte store.
|
||||
This component is recursive... a tree.
|
||||
Using a single, shared store, all the nodes in the tree can subscribe to state that is changed by other nodes, in the same tree.
|
||||
|
||||
e.g. Say i have the structure
|
||||
- Heading 1
|
||||
- Container
|
||||
- Heading 2
|
||||
- Heading 3
|
||||
- Heading 4
|
||||
|
||||
1. When I dragover "Heading 1", a placeholder drop-slot appears below it
|
||||
2. I drag down a bit so the cursor is INSIDE the container (i.e. now in a child <ComponentsHierarchyChildren />)
|
||||
3. Using store subscribes... the original drop-slot now knows that it should disappear, and a new one is created inside the container.
|
||||
*/
|
||||
export let dragDropStore
|
||||
|
||||
let dropUnderComponent
|
||||
let componentToDrop
|
||||
|
||||
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 isScreenslot = name => name === "##builtin/screenslot"
|
||||
|
||||
const selectComponent = component => {
|
||||
// Set current component
|
||||
store.actions.components.select(component)
|
||||
|
||||
// Get ID path
|
||||
const path = store.actions.components.findRoute(component)
|
||||
|
||||
// Go to correct URL
|
||||
$goto(`./:page/:screen/${path}`)
|
||||
}
|
||||
|
||||
const dragstart = component => e => {
|
||||
e.dataTransfer.dropEffect = "move"
|
||||
dragDropStore.update(s => {
|
||||
s.componentToDrop = component
|
||||
return s
|
||||
})
|
||||
}
|
||||
|
||||
const dragover = (component, index) => e => {
|
||||
const canHaveChildrenButIsEmpty =
|
||||
getComponentDefinition($store, component._component).children &&
|
||||
component._children.length === 0
|
||||
|
||||
e.dataTransfer.dropEffect = "copy"
|
||||
dragDropStore.update(s => {
|
||||
const isBottomHalf = e.offsetY > e.currentTarget.offsetHeight / 2
|
||||
s.targetComponent = component
|
||||
// only allow dropping inside when container type
|
||||
// is empty. If it has children, the user can drag over
|
||||
// it's existing children
|
||||
if (canHaveChildrenButIsEmpty) {
|
||||
if (index === 0) {
|
||||
// when its the first component in the screen,
|
||||
// we divide into 3, so we can paste above, inside or below
|
||||
const pos = e.offsetY / e.currentTarget.offsetHeight
|
||||
if (pos < 0.4) {
|
||||
s.dropPosition = "above"
|
||||
} else if (pos > 0.8) {
|
||||
// purposely giving this the least space as it is often covered
|
||||
// by the component below's "above" space
|
||||
s.dropPosition = "below"
|
||||
} else {
|
||||
s.dropPosition = "inside"
|
||||
}
|
||||
} else {
|
||||
s.dropPosition = isBottomHalf ? "below" : "inside"
|
||||
}
|
||||
} else {
|
||||
s.dropPosition = isBottomHalf ? "below" : "above"
|
||||
}
|
||||
return s
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
const drop = () => {
|
||||
if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
|
||||
store.actions.components.copy($dragDropStore.componentToDrop)
|
||||
store.actions.components.paste(
|
||||
$dragDropStore.targetComponent,
|
||||
$dragDropStore.dropPosition
|
||||
)
|
||||
}
|
||||
dragDropStore.update(s => {
|
||||
s.dropPosition = ""
|
||||
s.targetComponent = null
|
||||
s.componentToDrop = null
|
||||
return s
|
||||
})
|
||||
}
|
||||
|
||||
const dragend = () => {
|
||||
dragDropStore.update(s => {
|
||||
s.dropPosition = ""
|
||||
s.targetComponent = null
|
||||
s.componentToDrop = null
|
||||
return s
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
{#each components as component, index (component._id)}
|
||||
<li on:click|stopPropagation={() => selectComponent(component)}>
|
||||
{#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === 'above'}
|
||||
<div
|
||||
on:drop={drop}
|
||||
ondragover="return false"
|
||||
ondragenter="return false"
|
||||
class="drop-item"
|
||||
style="margin-left: {(level + 1) * 16}px" />
|
||||
{/if}
|
||||
|
||||
<NavItem
|
||||
draggable
|
||||
on:dragend={dragend}
|
||||
on:dragstart={dragstart(component)}
|
||||
on:dragover={dragover(component, index)}
|
||||
on:drop={drop}
|
||||
text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
|
||||
withArrow
|
||||
indentLevel={level + 1}
|
||||
selected={currentComponent === component}>
|
||||
<ComponentDropdownMenu {component} />
|
||||
</NavItem>
|
||||
|
||||
{#if component._children}
|
||||
<svelte:self
|
||||
components={component._children}
|
||||
{currentComponent}
|
||||
{onSelect}
|
||||
{dragDropStore}
|
||||
level={level + 1} />
|
||||
{/if}
|
||||
|
||||
{#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === 'inside' || $dragDropStore.dropPosition === 'below')}
|
||||
<div
|
||||
on:drop={drop}
|
||||
ondragover="return false"
|
||||
ondragenter="return false"
|
||||
class="drop-item"
|
||||
style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 16}px" />
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drop-item {
|
||||
border-radius: var(--border-radius-m);
|
||||
height: 32px;
|
||||
background: var(--grey-3);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
// Get the correct screen children.
|
||||
const screenChildren = $store.pages[$params.page]._screens.find(
|
||||
screen =>
|
||||
screen.props._instanceName === $params.screen ||
|
||||
screen.props._instanceName === decodeURIComponent($params.screen)
|
||||
screen._id === $params.screen ||
|
||||
screen._id === decodeURIComponent($params.screen)
|
||||
).props._children
|
||||
findComponent(componentIds, screenChildren)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue