MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Finish new component DND experience

This commit is contained in:
Andrew Kingston 2022-05-23 11:50:26 +01:00
parent b9dd1068f2
commit 05d627b846
6 changed files with 109 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/src/components/common/NavItem.svelte
View File

@ -156,6 +156,7 @@
}
.icon.arrow {
flex: 0 0 20px;
pointer-events: all;
}
.icon.arrow.absolute {
position: absolute;

41
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
View File

@ -1,14 +1,15 @@
<script>
import Panel from "components/design/Panel.svelte"
import ComponentTree from "./ComponentTree.svelte"
import createDNDStore from "./dndStore.js"
import { dndStore } from "./dndStore.js"
import { goto } from "@roxi/routify"
import { store, selectedScreen } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
import { setContext } from "svelte"
import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
import { DropPosition } from "./dndStore"
const dndStore = createDNDStore()
let scrollRef
const scrollTo = bounds => {
@ -68,6 +69,13 @@
borderRight
>
<div class="nav-items-container" bind:this={scrollRef}>
<ul>
<li
on:click={() => {
$store.selectedComponentId = $selectedScreen?.props._id
}}
id={`component-${$selectedScreen?.props._id}`}
>
<NavItem
text="Screen"
indentLevel={0}
@ -75,17 +83,29 @@
opened
scrollable
icon="WebPage"
on:click={() => {
$store.selectedComponentId = $selectedScreen?.props._id
}}
>
<ScreenslotDropdownMenu component={$selectedScreen?.props} />
</NavItem>
<ComponentTree
level={0}
components={$selectedScreen?.props._children}
{dndStore}
/>
<!-- Show drop indicators for the target and the parent -->
{#if $dndStore.dragging && $dndStore.valid}
<DNDPositionIndicator
component={$dndStore.target}
position={$dndStore.dropPosition}
/>
{#if $dndStore.dropPosition !== DropPosition.INSIDE}
<DNDPositionIndicator
component={$dndStore.targetParent}
position={DropPosition.INSIDE}
/>
{/if}
{/if}
</li>
</ul>
</div>
</Panel>
@ -95,6 +115,15 @@
flex: 1 1 auto;
overflow: auto;
height: 0;
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
position: relative;
}
ul,
li {
min-width: max-content;
}
</style>

20
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
View File

@ -1,6 +1,5 @@
<script>
import { store } from "builderStore"
import { DropEffect, DropPosition } from "./dndStore"
import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
import NavItem from "components/common/NavItem.svelte"
import { capitalise } from "helpers"
@ -12,17 +11,12 @@
} from "builderStore"
import { findComponentPath } from "builderStore/componentUtils"
import { get } from "svelte/store"
import { dndStore } from "./dndStore"
export let components = []
export let level = 0
export let dndStore
let closedNodes = {}
let ref
const dragstart = component => e => {
dndStore.actions.dragstart(component)
}
const dragover = (component, index) => e => {
const mousePosition = e.offsetY / e.currentTarget.offsetHeight
@ -98,26 +92,24 @@
<ul>
{#each components || [] as component, index (component._id)}
{@const hasChildren = componentHasChildren(component)}
{@const opened = isOpen(component, $selectedComponentPath, closedNodes)}
<li
bind:this={ref}
on:click|stopPropagation={() => {
$store.selectedComponentId = component._id
}}
id={`nav-${component._id}`}
id={`component-${component._id}`}
>
<NavItem
scrollable
draggable
on:dragend={dndStore.actions.reset}
on:dragstart={dragstart(component)}
on:dragstart={() => dndStore.actions.dragstart(component)}
on:dragover={dragover(component, index)}
on:iconClick={() => toggleNodeOpen(component._id)}
on:drop={onDrop}
text={getComponentText(component)}
icon={getComponentIcon(component)}
withArrow={hasChildren}
withArrow={componentHasChildren(component)}
indentLevel={level + 1}
selected={$store.selectedComponentId === component._id}
{opened}
@ -125,7 +117,6 @@
>
<ComponentDropdownMenu {component} />
</NavItem>
{#if opened}
<svelte:self
components={component._children}
@ -154,7 +145,4 @@
li {
min-width: max-content;
}
li {
position: relative;
}
</style>

9
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDParentPositionIndicator.svelte
View File

@ -1,9 +0,0 @@
<script>
</script>
{#if $dndStore.targetParent?._id === component._id && $dndStore.dropPosition !== DropPosition.INSIDE}
<div
class="inside drop-item"
style="--indicatorX: {indicatorX}px; --indicatorY:{indicatorY}px;"
/>
{/if}

62
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte
View File

@ -1,47 +1,65 @@
<script>
import { level } from "./ComponentTree.svelte"
import { DropPosition } from "./dndStore"
export let componentId
export let dndStore
export let component
export let position
const indicatorX = (level + 2) * 14
let indicatorY = 0
let x
let y
let width
let height
$: calculatePosition(component)
const calculatePosition = component => {
// Get root li element
const el = document.getElementById(`component-${component?._id}`)
// Get inner nav item content element
const child = el?.childNodes[0]?.childNodes[0]
if (!el) {
return
}
x = child.offsetLeft
y = child.offsetTop
width = child.clientWidth
height = child.clientHeight
}
</script>
{#if $dndStore.dragging && $dndStore.valid}
{#if $dndStore?.target?._id === componentId}
{#if component && position}
<div
class:above={$dndStore.dropPosition === DropPosition.ABOVE}
class:below={$dndStore.dropPosition === DropPosition.BELOW}
class:inside={$dndStore.dropPosition === DropPosition.INSIDE}
class="drop-item"
style="--indicatorX: {indicatorX}px; --indicatorY:{indicatorY}px;"
class:above={position === DropPosition.ABOVE}
class:below={position === DropPosition.BELOW}
class:inside={position === DropPosition.INSIDE}
class="indicator"
style="--x:{x}px; --y:{y}px; --width:{width}px; --height:{height}px"
/>
{/if}
{/if}
]
<style>
.drop-item {
.indicator {
height: 2px;
background: var(--spectrum-global-color-static-green-500);
z-index: 999;
position: absolute;
left: var(--indicatorX);
width: calc(100% - var(--indicatorX));
left: calc(var(--x) + 18px);
top: var(--y);
width: calc(100% - var(--x) - 18px);
border-radius: 4px;
pointer-events: none;
}
.drop-item.above {
.indicator.above {
}
.drop-item.below {
.indicator.below {
margin-top: 32px;
}
.drop-item.inside {
.indicator.inside {
background: transparent;
border: 2px solid var(--spectrum-global-color-static-green-500);
height: 29px;
pointer-events: none;
width: calc(100% - var(--indicatorX) - 4px);
width: calc(var(--width) - 34px);
height: calc(var(--height) - 9px);
left: calc(var(--x) + 13px);
top: calc(var(--y) + 2px);
}
</style>

24
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js
View File

@ -20,7 +20,7 @@ const initialState = {
valid: false,
}
export default function () {
const createDNDStore = () => {
const store = writable(initialState)
const actions = {
dragstart: component => {
@ -46,17 +46,8 @@ export default function () {
let target
let targetParent
// If the component has children, it cannot be dropped below
if (hasChildren) {
if (mousePosition <= 0.33) {
dropPosition = DropPosition.ABOVE
} else {
dropPosition = DropPosition.INSIDE
}
}
// If it can have children then it can be any position
else if (canHaveChildren) {
if (canHaveChildren) {
if (mousePosition <= 0.33) {
dropPosition = DropPosition.ABOVE
} else if (mousePosition >= 0.66) {
@ -81,6 +72,15 @@ export default function () {
target = component
}
// If drop position and target are the same then we can skip this update
const state = get(store)
if (
dropPosition === state.dropPosition &&
target?._id === state.target?._id
) {
return
}
// Find the parent of the target component
if (target) {
targetParent = findComponentParent(
@ -125,3 +125,5 @@ export default function () {
actions,
}
}
export const dndStore = createDNDStore()