various minor fixes

This commit is contained in:
Ruben Fiszel
2023-03-15 23:31:35 +01:00
parent 9bfd471439
commit 99ec12e10c
11 changed files with 72 additions and 131 deletions
+3 -2
View File
@@ -384,8 +384,9 @@ async fn update_variable(
path,
w_id
)
.fetch_one(&mut tx)
.await?;
.fetch_optional(&mut tx)
.await?
.flatten();
if let Some(old_v) = v {
v = Some(replace_path(
@@ -57,7 +57,8 @@
decryptSecret: false
})
can_write =
getV.workspace_id == $workspaceStore && canWrite(path, getV.extra_perms ?? {}, $userStore)
getV.workspace_id == $workspaceStore &&
canWrite(edit_path, getV.extra_perms ?? {}, $userStore)
variable = {
value: getV.value ?? '',
@@ -65,12 +65,11 @@
}
function selectComponent(id: string) {
// Component selection is handled manually in the Map component (pointerdown
// event propagation is stopped to enable paning).
// Update the 'selectComponent()' function as well when this is updated.
if (!$connectingInput.opened) {
$selectedComponent = id
if ($selectedComponent !== id) {
$selectedComponent = id
}
$focusedGrid = undefined
}
}
@@ -2,7 +2,6 @@
import { onMount, createEventDispatcher } from 'svelte'
import type { FilledItem } from '../svelte-grid/types'
import GridViewerComponent from './GridViewerComponent.svelte'
import { getColumn, throttle } from '../svelte-grid/utils/other'
import { getContainerHeight } from '../svelte-grid/utils/container'
import { specifyUndefinedColumns } from '../svelte-grid/utils/item'
@@ -79,19 +78,23 @@
<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
{#if xPerPx}
{#each items as item (item.id)}
<GridViewerComponent
onTop={item.id == onTopId}
width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) *
xPerPx -
gapX * 2}
height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
{@const onTop = item.id == onTopId}
{@const width =
Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
gapX * 2}
{@const height = (item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
{@const top = (item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
<div
class="svlt-grid-item"
style="width: {width}px; height:{height}px; {onTop
? 'z-index: 1000;'
: ''} top: {top}px; left: {left}px;"
>
{#if item[getComputedCols]}
<slot dataItem={item} item={item[getComputedCols]} />
{/if}
</GridViewerComponent>
</div>
{/each}
{/if}
</div>
@@ -101,4 +104,11 @@
position: relative;
width: 100%;
}
.svlt-grid-item {
touch-action: none;
position: absolute;
will-change: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
</style>
@@ -1,26 +0,0 @@
<script lang="ts">
export let width: number
export let height: number
export let left: number
export let top: number
export let onTop: boolean
</script>
<div
class="svlt-grid-item"
style="width: {width}px; height:{height}px; {onTop ? 'z-index: 100;' : ''}
{`transition: transform 0.1s, opacity 0.1s; transform: translate(${left}px, ${top}px); `}"
>
<slot />
</div>
<style>
.svlt-grid-item {
touch-action: none;
position: absolute;
will-change: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
</style>
@@ -50,13 +50,9 @@
function selectComponent(id: string) {
onComponent = id
if (!$connectingInput.opened) {
$selectedComponent = id
/*
$focusedGrid = {
parentComponentId: parentId,
subGridIndex: index
if (id !== $selectedComponent) {
$selectedComponent = id
}
*/
}
}
@@ -128,7 +124,6 @@
class={classNames(
'h-full w-full center-center',
$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
dataItem.data.card ? 'border border-gray-100' : '',
'top-0'
)}
>
@@ -76,18 +76,10 @@
{/if}
<div
on:pointerdown={(e) => {
// Removed in https://github.com/windmill-labs/windmill/pull/1171
// In case of a bug, try stopping propagation on the native event
// and dispatch a custom event: `e?.stopPropagation(); dispatch('select');`
// if ($mode === 'preview') {
// e?.stopPropagation()
// }
}}
class={twMerge(
'h-full bg-white/40',
selected && $mode !== 'preview' ? 'border border-blue-500' : '',
!selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '',
!selected && $mode !== 'preview' ? 'border-gray-100' : '',
$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
component.softWrap || hasError ? '' : 'overflow-auto',
$mode != 'preview' ? 'cursor-pointer' : '',
@@ -180,8 +180,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
customCss: {
header: { class: '', style: '' },
container: { class: '', style: '' }
} as const,
card: false
} as const
}
},
containercomponent: {
@@ -197,7 +196,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
container: { class: '', style: '' }
} as const,
componentInput: undefined,
card: false,
numberOfSubgrids: 1
}
},
@@ -239,8 +238,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
},
customCss: {
text: { class: '', style: '' }
} as const,
card: false
} as const
}
},
buttoncomponent: {
@@ -323,8 +321,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
},
customCss: {
button: { style: '', class: '' }
} as const,
card: false
} as const
}
},
formcomponent: {
@@ -372,8 +369,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
customCss: {
container: { class: '', style: '' },
button: { class: '', style: '' }
} as const,
card: true
} as const
}
},
formbuttoncomponent: {
@@ -416,8 +412,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
customCss: {
button: { class: '', style: '' },
popup: { class: '', style: '' }
} as const,
card: true
} as const
}
},
piechartcomponent: {
@@ -449,8 +444,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
},
customCss: {
container: { class: '', style: '' }
} as const,
card: true
} as const
}
},
barchartcomponent: {
@@ -482,8 +476,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
},
customCss: {
container: { class: '', style: '' }
} as const,
card: true
} as const
}
},
htmlcomponent: {
@@ -507,8 +500,7 @@ Hello \${ctx.username}
configuration: {},
customCss: {
container: { class: '', style: '' }
} as const,
card: false
} as const
}
},
vegalitecomponent: {
@@ -547,8 +539,7 @@ Hello \${ctx.username}
tooltip: 'Use the canvas renderer instead of the svg one for more interactive plots'
}
},
customCss: {},
card: false
customCss: {}
}
},
plotlycomponent: {
@@ -575,8 +566,7 @@ Hello \${ctx.username}
}
},
configuration: {},
customCss: {},
card: false
customCss: {}
}
},
timeseriescomponent: {
@@ -651,8 +641,7 @@ Hello \${ctx.username}
},
customCss: {
container: { class: '', style: '' }
} as const,
card: true
} as const
}
},
scatterchartcomponent: {
@@ -703,8 +692,7 @@ Hello \${ctx.username}
},
customCss: {
container: { class: '', style: '' }
} as const,
card: true
} as const
}
},
tablecomponent: {
@@ -746,7 +734,7 @@ Hello \${ctx.username}
tableBody: { class: '', style: '' },
tableFooter: { class: '', style: '' }
} as const,
card: true,
actionButtons: []
}
},
@@ -802,8 +790,7 @@ Hello \${ctx.username}
}
]
},
customCss: {},
card: true
customCss: {}
}
},
checkboxcomponent: {
@@ -830,8 +817,7 @@ Hello \${ctx.username}
},
customCss: {
text: { class: '', style: '' }
} as const,
card: false
} as const
}
},
textinputcomponent: {
@@ -859,8 +845,7 @@ Hello \${ctx.username}
},
customCss: {
input: { class: '', style: '' }
} as const,
card: false
} as const
}
},
selectcomponent: {
@@ -904,7 +889,7 @@ Hello \${ctx.username}
customCss: {
input: { style: '' }
} as const,
card: false,
softWrap: true
}
},
@@ -934,7 +919,7 @@ Hello \${ctx.username}
customCss: {
input: { style: '' }
} as const,
card: false,
softWrap: true
}
},
@@ -964,7 +949,7 @@ Hello \${ctx.username}
customCss: {
input: { style: '' }
} as const,
card: false,
softWrap: true
}
},
@@ -1009,8 +994,7 @@ Hello \${ctx.username}
},
customCss: {
input: { class: '', style: '' }
} as const,
card: false
} as const
}
},
currencycomponent: {
@@ -1053,8 +1037,7 @@ Hello \${ctx.username}
},
customCss: {
input: { class: '', style: '' }
} as const,
card: false
} as const
}
},
slidercomponent: {
@@ -1096,8 +1079,7 @@ Hello \${ctx.username}
handle: { style: '' },
limits: { class: '', style: '' },
value: { class: '', style: '' }
} as const,
card: false
} as const
}
},
rangecomponent: {
@@ -1143,8 +1125,7 @@ Hello \${ctx.username}
bar: { style: '' },
limits: { class: '', style: '' },
values: { class: '', style: '' }
} as const,
card: false
} as const
}
},
passwordinputcomponent: {
@@ -1167,8 +1148,7 @@ Hello \${ctx.username}
},
customCss: {
input: { class: '', style: '' }
} as const,
card: false
} as const
}
},
emailinputcomponent: {
@@ -1196,8 +1176,7 @@ Hello \${ctx.username}
},
customCss: {
input: { class: '', style: '' }
} as const,
card: false
} as const
}
},
dateinputcomponent: {
@@ -1229,8 +1208,7 @@ Hello \${ctx.username}
},
customCss: {
input: { class: '', style: '' }
} as const,
card: false
} as const
}
},
tabscomponent: {
@@ -1257,7 +1235,7 @@ Hello \${ctx.username}
container: { class: '', style: '' }
} as const,
componentInput: undefined,
card: false,
numberOfSubgrids: 2,
tabs: ['First tab', 'Second tab']
}
@@ -1300,8 +1278,7 @@ Hello \${ctx.username}
customCss: {
container: { class: '', style: '' },
icon: { class: '', style: '' }
} as const,
card: false
} as const
}
},
horizontaldividercomponent: {
@@ -1330,8 +1307,7 @@ Hello \${ctx.username}
customCss: {
container: { class: '', style: '' },
divider: { class: '', style: '' }
} as const,
card: false
} as const
}
},
verticaldividercomponent: {
@@ -1360,8 +1336,7 @@ Hello \${ctx.username}
customCss: {
container: { class: '', style: '' },
divider: { class: '', style: '' }
} as const,
card: false
} as const
}
},
fileinputcomponent: {
@@ -1395,8 +1370,7 @@ Hello \${ctx.username}
},
customCss: {
container: { class: '', style: '' }
} as const,
card: false
} as const
}
},
imagecomponent: {
@@ -1434,8 +1408,7 @@ Hello \${ctx.username}
},
customCss: {
image: { class: '', style: '' }
} as const,
card: false
} as const
}
},
drawercomponent: {
@@ -1487,7 +1460,7 @@ Hello \${ctx.username}
}
},
componentInput: undefined,
card: false,
numberOfSubgrids: 1
}
},
@@ -1543,8 +1516,7 @@ Hello \${ctx.username}
},
customCss: {
map: { class: '', style: '' }
} as const,
card: false
} as const
}
},
verticalsplitpanescomponent: {
@@ -1560,7 +1532,7 @@ Hello \${ctx.username}
container: { class: '', style: '' }
} as const,
componentInput: undefined,
card: false,
panes: [50, 50],
numberOfSubgrids: 2
}
@@ -1578,7 +1550,7 @@ Hello \${ctx.username}
container: { class: '', style: '' }
} as const,
componentInput: undefined,
card: false,
panes: [50, 50],
numberOfSubgrids: 2
}
@@ -1609,8 +1581,7 @@ Hello \${ctx.username}
},
customCss: {
container: { class: '', style: '' }
} as const,
card: false
} as const
}
}
}
@@ -81,8 +81,7 @@
recomputeIds: undefined,
customCss: {
button: { style: '', class: '' }
} as const,
card: false
} as const
}
components = [...components, newComponent]
@@ -321,7 +321,7 @@
class:svlt-grid-active={active || (trans && rect)}
style="width: {active ? newSize.width : width}px; height:{active
? newSize.height
: height}px; {onTop ? 'z-index: 100;' : ''}
: height}px; {onTop ? 'z-index: 1000;' : ''}
{active
? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
: trans
@@ -53,7 +53,6 @@ export interface BaseAppComponent extends Partial<Aligned> {
| UploadAppInput
)
>
card: boolean | undefined
customCss?: ComponentCustomCSS
/**
* If `true` then the wrapper will allow items to flow outside of it's borders.