diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 65ffc7f7e1..44e589715d 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -142,10 +142,6 @@
)}
style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
disabled={resolvedConfig.disabled}
- on:pointerdown={(e) => {
- e?.stopPropagation()
- window.dispatchEvent(new Event('pointerup'))
- }}
on:click={handleClick}
size={resolvedConfig.size}
color={resolvedConfig.color}
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index bc17912ba6..748e4037a7 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -65,13 +65,13 @@
debounce(async () => (value = await evalExpr(lastInput)))
async function handleConnection() {
- if (lastInput.type === 'connected') {
+ if (lastInput?.type === 'connected') {
$worldStore?.connect
(lastInput, onValueChange, `${id}-${key}`)
- } else if (lastInput.type === 'static' || lastInput.type == 'template') {
+ } else if (lastInput?.type === 'static' || lastInput?.type == 'template') {
value = await getValue(lastInput)
- } else if (lastInput.type == 'eval') {
+ } else if (lastInput?.type == 'eval') {
value = await evalExpr(lastInput as EvalAppInput)
- } else if (lastInput.type == 'upload') {
+ } else if (lastInput?.type == 'upload') {
value = (lastInput as UploadAppInput).value
} else {
value = undefined
diff --git a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
index 1ed7cc7330..f3a2bb90a4 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
@@ -46,7 +46,6 @@
($selectedComponent = id)}
class={twMerge(
'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
index f304775b13..6ff9844185 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -50,7 +50,6 @@
css?.input?.class ?? ''
)}
style={css?.input?.style ?? ''}
- on:pointerdown|stopPropagation
on:focus={() => ($selectedComponent = id)}
type="password"
bind:value
@@ -63,7 +62,6 @@
css?.input?.class ?? ''
)}
style={css?.input?.style ?? ''}
- on:pointerdown|stopPropagation
on:focus={() => ($selectedComponent = id)}
type="text"
bind:value
@@ -76,7 +74,6 @@
css?.input?.class ?? ''
)}
style={css?.input?.style ?? ''}
- on:pointerdown|stopPropagation
on:focus={() => ($selectedComponent = id)}
type="email"
bind:value
diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index ca892bdc8d..cc3401bb05 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -35,7 +35,7 @@
{id}
class={css?.container?.class}
style={css?.container?.style}
- bind:subGrid={$app.subgrids[`${id}-0`]}
+ subGridId={`${id}-0`}
containerHeight={componentContainerHeight}
on:focus={() => {
$selectedComponent = id
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index 188686e278..1a4763066e 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -86,7 +86,7 @@
{id}
class={css?.container?.class}
style={css?.container?.style}
- bind:subGrid={$app.subgrids[`${id}-0`]}
+ subGridId={`${id}-0`}
containerHeight={1200}
on:focus={() => {
$selectedComponent = id
diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index af5c63f39b..3454fbe3cc 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -66,28 +66,39 @@
}
-
+
{#each sumedup as paneSize, index (index)}
- {#if $app.subgrids?.[`${id}-${index}`]}
- {
- $selectedComponent = id
- $focusedGrid = {
- parentComponentId: id,
- subGridIndex: index
- }
- }}
- />
- {/if}
+ {
+ $selectedComponent = id
+ $focusedGrid = {
+ parentComponentId: id,
+ subGridIndex: index
+ }
+ }}
+ >
+ {#if $app.subgrids?.[`${id}-${index}`]}
+ {
+ $selectedComponent = id
+ $focusedGrid = {
+ parentComponentId: id,
+ subGridIndex: index
+ }
+ }}
+ />
+ {/if}
+
{/each}
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index a5585b113d..298230d404 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -46,8 +46,11 @@
$: $selectedComponent === id && focusGrid()
function focusGrid() {
+ console.log('focusGrid', id)
const selectedIndex = tabs?.indexOf(selected)
if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
+ console.log('set', id)
+
$focusedGrid = {
parentComponentId: id,
subGridIndex: selectedIndex
@@ -80,8 +83,6 @@
$: selected && handleTabSelection()
$: selectedIndex = tabs?.indexOf(selected) ?? -1
$: css = concatCustomCss($app.css?.tabscomponent, customCss)
-
- let subgridWidth: number | undefined = undefined
{/if}
-
+
{#if $app.subgrids}
{#each tabs ?? [] as res, i}
($selectedComponent = dataItem.data.id)}
+ on:pointerdown={() => ($selectedComponent = dataItem.id)}
>
-
+
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 04a40eb246..67981eb0ef 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -11,7 +11,6 @@
export let component: AppComponent
export let selected: boolean
export let locked: boolean = false
- export let pointerdown: boolean = false
export let hover: boolean = false
const dispatch = createEventDispatcher()
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 2e2dba452f..3169534c61 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -9,7 +9,6 @@
import type { Policy } from '$lib/gen'
import HiddenComponent from '../components/helpers/HiddenComponent.svelte'
import Component from './component/Component.svelte'
- import { deepEqual } from 'fast-equals'
import { push } from '$lib/history'
import { expandGriditem, findGridItem } from './appUtils'
import Grid from '../svelte-grid/Grid.svelte'
@@ -66,44 +65,12 @@
function selectComponent(id: string) {
if (!$connectingInput.opened) {
- if ($selectedComponent !== id) {
- $selectedComponent = id
- }
-
- $focusedGrid = undefined
- }
- }
-
- let pointerdown = false
- let lastapp: App | undefined = undefined
- const onpointerdown = () => {
- if (history) {
- lastapp = JSON.parse(JSON.stringify($app))
- pointerdown = true
- }
- }
- const onpointerup = () => {
- if (history) {
- pointerdown = false
- if (!deepEqual(lastapp, $app)) {
- push(history, lastapp, false, true)
+ $selectedComponent = id
+ if ($focusedGrid?.parentComponentId != id) {
+ $focusedGrid = undefined
}
}
}
-
- afterUpdate(() => {
- if ($selectedComponent) {
- const parents = document.querySelectorAll
('.svlt-grid-item')
- parents.forEach((parent) => {
- const hasActiveChild = !!parent.querySelector('.active-grid-item')
- if (hasActiveChild) {
- parent.style.setProperty('z-index', '100')
- } else {
- parent.style.removeProperty('z-index')
- }
- })
- }
- })
@@ -126,9 +93,6 @@
{
$selectedComponent = undefined
$focusedGrid = undefined
@@ -140,6 +104,7 @@
onTopId={$selectedComponent}
items={$app.grid}
on:redraw={(e) => {
+ console.log('redraw')
push(history, $app)
$app.grid = e.detail
}}
@@ -160,27 +125,25 @@
style="transform: translate(-50%, -50%);"
class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
>
- {dataItem.data.id}
+ {dataItem.id}
{/if}
selectComponent(dataItem.data.id)}
+ on:pointerdown={() => selectComponent(dataItem.id)}
class={classNames(
'h-full w-full center-center',
- $selectedComponent === dataItem.data.id ? 'active-grid-item' : ''
+ $selectedComponent === dataItem.id ? 'active-grid-item' : ''
)}
>
removeGridElement(dataItem.data)}
on:lock={() => {
- const gridItem = findGridItem($app, dataItem.data.id)
+ const gridItem = findGridItem($app, dataItem.id)
if (gridItem) {
toggleFixed(gridItem)
}
@@ -188,8 +151,9 @@
}}
on:expand={() => {
push(history, $app)
- $selectedComponent = dataItem.data.id
- expandGriditem($app.grid, dataItem, $breakpoint)
+ $selectedComponent = dataItem.id
+ expandGriditem($app.grid, dataItem.id, $breakpoint)
+ console.log('expand')
$app = $app
}}
/>
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 486804f769..078d0fab34 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -17,7 +17,7 @@
export let style = ''
export let noPadding = false
export let noYPadding = false
- export let subGrid: GridItem[] = []
+ export let subGridId: string
export let visible: boolean = true
export let id: string
export let shouldHighlight: boolean = true
@@ -31,41 +31,26 @@
$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight
- let pointerdown = false
- let onComponent: string | undefined = undefined
-
const onpointerdown = (e) => {
- if (onComponent === undefined) {
- dispatch('focus')
- } else {
- onComponent = undefined
- }
- pointerdown = true
- }
-
- const onpointerup = () => {
- pointerdown = false
+ dispatch('focus')
}
function selectComponent(id: string) {
- onComponent = id
if (!$connectingInput.opened) {
- if (id !== $selectedComponent) {
- $selectedComponent = id
- }
+ dispatch('focus')
+ $selectedComponent = id
}
}
function lock(dataItem: GridItem) {
- let fComponent = findGridItem($app, dataItem.data.id)
+ let fComponent = findGridItem($app, dataItem.id)
if (fComponent) {
fComponent = toggleFixed(fComponent)
}
$app = $app
}
- // @ts-ignore
- let container
+ let container: HTMLElement | undefined = undefined
{#if $mode !== 'preview'}
{
push(history, $app)
- subGrid = e.detail
+ if ($app.subgrids) {
+ $app.subgrids[subGridId] = e.detail
+ }
}}
let:dataItem
rowHeight={36}
@@ -106,7 +91,7 @@
{#if $connectingInput.opened}
($connectingInput.hoveredComponent = dataItem.data.id)}
+ on:pointerenter={() => ($connectingInput.hoveredComponent = dataItem.id)}
on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
/>
@@ -114,24 +99,23 @@
style="transform: translate(-50%, -50%);"
class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
>
- {dataItem.data.id}
+ {dataItem.id}
{/if}
selectComponent(dataItem.data.id)}
+ on:pointerdown={() => selectComponent(dataItem.id)}
class={classNames(
'h-full w-full center-center',
- $selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+ $selectedComponent === dataItem.id ? 'active-grid-item' : '',
'top-0'
)}
>
lock(dataItem)}
on:expand={() => {
@@ -140,10 +124,15 @@
if (!parentGridItem) {
return
}
- $selectedComponent = dataItem.data.id
+ $selectedComponent = dataItem.id
push(history, $app)
- expandGriditem(subGrid, dataItem, $breakpoint, parentGridItem)
+ expandGriditem(
+ $app.subgrids?.[subGridId] ?? [],
+ dataItem.id,
+ $breakpoint,
+ parentGridItem
+ )
$app = $app
}}
/>
@@ -152,7 +141,7 @@
{:else}
selectComponent(dataItem.data.id)}
+ on:pointerdown={() => selectComponent(dataItem.id)}
class={classNames('h-full w-full center-center', 'top-0')}
>
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 6ddd17d896..5b7b9def6b 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -38,13 +38,13 @@ function findGridItemById(
export function findGridItemParentGrid(app: App, id: string): string | undefined {
const gridItem = app.grid.find((x) => x.id === id)
- if (gridItem) {
+ if (gridItem || app.subgrids === undefined) {
return undefined
} else {
- for (const key in app.subgrids) {
+ for (const key of Object.keys(app.subgrids ?? {})) {
const subGrid = app.subgrids[key]
- const gridItem = subGrid.find((x) => x.id === id)
- if (gridItem) {
+ const gridItemIdx = subGrid.findIndex((x) => x.id === id)
+ if (gridItemIdx > -1) {
return key
}
}
@@ -88,6 +88,8 @@ export function getAllRecomputeIdsForComponent(app: App, id: string) {
}
export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem {
+ console.log('INSERT X')
+
const newComponent = {
fixed: false,
x: 0,
@@ -165,7 +167,7 @@ export function insertNewGridItem(
builddata: (id: string) => AppComponent,
focusedGrid: FocusedGrid | undefined,
keepId?: string
-) {
+): string {
const id = keepId ?? getNextGridItemId(app)
const data = builddata(id)
@@ -188,9 +190,6 @@ export function insertNewGridItem(
const newItem = createNewGridItem(grid, id, data)
grid.push(newItem)
- if (focusedGrid) {
- app.subgrids[key!] = grid
- }
return id
}
@@ -229,19 +228,12 @@ export function deleteGridItem(
delete app.subgrids![id]
})
}
- if (!parent) {
- let index = app.grid.findIndex((x) => x.id == component.id)
- if (index > -1) {
- app.grid.splice(index, 1)
- }
+ if (parent) {
+ app.subgrids &&
+ (app.subgrids[parent] = app.subgrids[parent].filter((item) => item.id !== component?.id))
} else {
- let grid = app.subgrids![parent]
- let index = grid.findIndex((x) => x.id == component.id)
- if (index > -1) {
- grid.splice(index, 1)
- }
+ app.grid = app.grid.filter((item) => item.id !== component?.id)
}
-
return components
}
@@ -383,12 +375,13 @@ export function initConfig item.id === id)
+ if (!gridComponent) return
const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem)
-
if (!availableSpace) {
return
}
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index f13c7aaec7..ea12a16e8b 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -44,7 +44,6 @@
export let component: AppComponent
export let selected: boolean
export let locked: boolean = false
- export let pointerdown: boolean = false
export let render: boolean
const { mode, app, errorByComponent, hoverStore } =
@@ -73,7 +72,6 @@
{#if $mode !== 'preview'}
- {:else if component.type === 'tabscomponent'}
+ {:else if component.type === 'tabscomponent' && component.tabs}
{
- return item.id == tempGridItem!.data.id
- })
- if (idx > -1) {
- grid.splice(idx, 1)
+ let parentGrid = findGridItemParentGrid($app, tempGridItem.id)
+ if (parentGrid) {
+ $app.subgrids &&
+ ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter(
+ (item) => item.id !== tempGridItem?.id
+ ))
+ } else {
+ $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id)
}
const gridItem = tempGridItem
insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, tempGridItem.id)
+
copiedGridItem = tempGridItem
+ $selectedComponent = tempGridItem.id
+
tempGridItem = undefined
} else if (copiedGridItem) {
const gridItem = copiedGridItem
- insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid)
+ $selectedComponent = insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid)
}
$worldStore = $worldStore
diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
index 45707ed714..fde8289f98 100644
--- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
@@ -21,7 +21,7 @@
export let onTopId: string | undefined = undefined
export let containerWidth: number | undefined = undefined
- export let scroller = undefined
+ export let scroller: HTMLElement | undefined = undefined
export let sensor = 20
export let parentWidth: number | undefined = undefined
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
index 85d08a87cc..2431d84bbb 100644
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -143,6 +143,7 @@
}
}
+ let startDrag: NodeJS.Timeout | undefined = undefined
const pointerdown = ({ clientX, clientY, target }) => {
initX = clientX
initY = clientY
@@ -158,8 +159,10 @@
computeRect(target)
- active = true
- trans = false
+ startDrag = setTimeout(() => {
+ active = true
+ trans = false
+ }, 200)
_scrollTop = scrollElement.scrollTop
window.addEventListener('pointermove', pointermove)
@@ -298,9 +301,13 @@
}
+
{
+ startDrag && clearTimeout(startDrag)
+ }}
+ on:pointerdown|stopPropagation={pointerdown}
class="svlt-grid-item"
class:svlt-grid-active={active || (trans && rect)}
style="width: {active ? newSize.width : width}px; height:{active