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

Merge pull request #14360 from Budibase/grid-layout-expansion 

"Grid" drag and drop layouts
This commit is contained in:
Andrew Kingston 2024-08-20 15:14:52 +01:00 committed by GitHub
parent ae49b0309d d96cd60618
commit 6aedaaee2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
51 changed files with 1717 additions and 804 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bbui/package.json
View File

@ -72,6 +72,7 @@
"@spectrum-css/switch": "1.0.2",
"@spectrum-css/table": "3.0.1",
"@spectrum-css/tabs": "3.2.12",
"@spectrum-css/tag": "3.0.0",
"@spectrum-css/tags": "3.0.2",
"@spectrum-css/textfield": "3.0.1",
"@spectrum-css/toast": "3.0.1",

46
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
View File

@ -1,5 +1,4 @@
<script>
import { helpers } from "@budibase/shared-core"
import { DetailSummary, notifications } from "@budibase/bbui"
import { componentStore, builderStore } from "stores/builder"
import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@ -8,6 +7,7 @@
import { getComponentForSetting } from "components/design/settings/componentSettings"
import InfoDisplay from "./InfoDisplay.svelte"
import analytics, { Events } from "analytics"
import { shouldDisplaySetting } from "@budibase/frontend-core"
export let componentDefinition
export let componentInstance
@ -48,7 +48,7 @@
// Filter out settings which shouldn't be rendered
sections.forEach(section => {
section.visible = shouldDisplay(instance, section)
section.visible = shouldDisplaySetting(instance, section)
if (!section.visible) {
return
}
@ -88,46 +88,6 @@
}
}
const shouldDisplay = (instance, setting) => {
let dependsOn = setting.dependsOn
if (dependsOn && !Array.isArray(dependsOn)) {
dependsOn = [dependsOn]
}
if (!dependsOn?.length) {
return true
}
// Ensure all conditions are met
return dependsOn.every(condition => {
let dependantSetting = condition
let dependantValues = null
let invert = !!condition.invert
if (typeof condition === "object") {
dependantSetting = condition.setting
dependantValues = condition.value
}
if (!dependantSetting) {
return false
}
// Ensure values is an array
if (!Array.isArray(dependantValues)) {
dependantValues = [dependantValues]
}
// If inverting, we want to ensure that we don't have any matches.
// If not inverting, we want to ensure that we do have any matches.
const currentVal = helpers.deepGet(instance, dependantSetting)
const anyMatches = dependantValues.some(dependantVal => {
if (dependantVal == null) {
return currentVal != null && currentVal !== false && currentVal !== ""
}
return dependantVal === currentVal
})
return anyMatches !== invert
})
}
const canRenderControl = (instance, setting, isScreen, includeHidden) => {
// Prevent rendering on click setting for screens
if (setting?.type === "event" && isScreen) {
@ -142,7 +102,7 @@
if (setting.hidden && !includeHidden) {
return false
}
return shouldDisplay(instance, setting)
return shouldDisplaySetting(instance, setting)
}
</script>

135
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
View File

@ -14,11 +14,90 @@
import sanitizeUrl from "helpers/sanitizeUrl"
import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
import { getBindableProperties } from "dataBinding"
import BarButtonList from "components/design/settings/controls/BarButtonList.svelte"
$: bindings = getBindableProperties($selectedScreen, null)
$: screenSettings = getScreenSettings($selectedScreen)
let errors = {}
const getScreenSettings = screen => {
let settings = [
{
key: "routing.homeScreen",
control: Checkbox,
props: {
text: "Set as home screen",
},
},
{
key: "routing.route",
label: "Route",
control: Input,
parser: val => {
if (!val.startsWith("/")) {
val = "/" + val
}
return sanitizeUrl(val)
},
validate: route => {
const existingRoute = screen.routing.route
if (route !== existingRoute && routeTaken(route)) {
return "That URL is already in use for this role"
}
return null
},
},
{
key: "routing.roleId",
label: "Access",
control: RoleSelect,
validate: role => {
const existingRole = screen.routing.roleId
if (role !== existingRole && roleTaken(role)) {
return "That role is already in use for this URL"
}
return null
},
},
{
key: "onLoad",
label: "On screen load",
control: ButtonActionEditor,
},
{
key: "width",
label: "Width",
control: Select,
props: {
options: ["Extra small", "Small", "Medium", "Large", "Max"],
placeholder: "Default",
disabled: !!screen.layoutId,
},
},
{
key: "props.layout",
label: "Layout",
defaultValue: "flex",
control: BarButtonList,
props: {
options: [
{
barIcon: "ModernGridView",
value: "flex",
},
{
barIcon: "ViewGrid",
value: "grid",
},
],
},
},
]
return settings
}
const routeTaken = url => {
const roleId = get(selectedScreen).routing.roleId || "BASIC"
return get(screenStore).screens.some(
@ -71,61 +150,6 @@
}
}
$: screenSettings = [
{
key: "routing.homeScreen",
control: Checkbox,
props: {
text: "Set as home screen",
},
},
{
key: "routing.route",
label: "Route",
control: Input,
parser: val => {
if (!val.startsWith("/")) {
val = "/" + val
}
return sanitizeUrl(val)
},
validate: route => {
const existingRoute = get(selectedScreen).routing.route
if (route !== existingRoute && routeTaken(route)) {
return "That URL is already in use for this role"
}
return null
},
},
{
key: "routing.roleId",
label: "Access",
control: RoleSelect,
validate: role => {
const existingRole = get(selectedScreen).routing.roleId
if (role !== existingRole && roleTaken(role)) {
return "That role is already in use for this URL"
}
return null
},
},
{
key: "onLoad",
label: "On screen load",
control: ButtonActionEditor,
},
{
key: "width",
label: "Width",
control: Select,
props: {
options: ["Extra small", "Small", "Medium", "Large", "Max"],
placeholder: "Default",
disabled: !!$selectedScreen.layoutId,
},
},
]
const removeCustomLayout = async () => {
return screenStore.removeCustomLayout(get(selectedScreen))
}
@ -149,6 +173,7 @@
value={Helpers.deepGet($selectedScreen, setting.key)}
onChange={val => setScreenSetting(setting, val)}
props={{ ...setting.props, error: errors[setting.key] }}
defaultValue={setting.defaultValue}
{bindings}
/>
{/each}

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
View File

@ -33,7 +33,7 @@
{/each}
</div>
</div>
<Layout gap="S" paddingX="L" paddingY="XL">
<Layout gap="XS" paddingX="L" paddingY="XL">
{#if activeTab === "theme"}
<ThemePanel />
{:else}

70
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View File

@ -144,7 +144,12 @@
const rootComponent = get(selectedScreen).props
const component = findComponent(rootComponent, data.id)
componentStore.copy(component)
await componentStore.paste(component)
await componentStore.paste(
component,
data.mode,
null,
data.selectComponent
)
} else if (type === "preview-loaded") {
// Wait for this event to show the client library if intelligent
// loading is supported
@ -246,13 +251,13 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="component-container">
<div
class="component-container"
class:tablet={$previewStore.previewDevice === "tablet"}
class:mobile={$previewStore.previewDevice === "mobile"}
>
{#if loading}
<div
class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}
class:tablet={$previewStore.previewDevice === "tablet"}
class:mobile={$previewStore.previewDevice === "mobile"}
>
<div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
<ClientAppSkeleton
sideNav={$navigationStore?.navigation === "Left"}
hideFooter
@ -275,6 +280,7 @@
src="/app/preview"
class:hidden={loading || error}
/>
<div class="underlay" />
<div
class="add-component"
class:active={isAddingComponent}
@ -293,34 +299,13 @@
/>
<style>
.loading {
position: absolute;
container-type: inline-size;
width: 100%;
height: 100%;
border: 2px solid transparent;
box-sizing: border-box;
}
.loading.tablet {
width: calc(1024px + 6px);
max-height: calc(768px + 6px);
}
.loading.mobile {
width: calc(390px + 6px);
max-height: calc(844px + 6px);
}
.component-container {
grid-row-start: middle;
grid-column-start: middle;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
margin: auto;
height: 100%;
--client-padding: 6px;
}
.component-container iframe {
border: 0;
@ -329,6 +314,33 @@
width: 100%;
background-color: transparent;
}
.loading,
.underlay {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: calc(100% - var(--client-padding) * 2);
height: calc(100% - var(--client-padding) * 2);
}
.tablet .loading,
.tablet .underlay {
max-width: 1024px;
max-height: 768px;
}
.mobile .loading,
.mobile .underlay {
max-width: 390px;
max-height: 844px;
}
.underlay {
background: var(--spectrum-global-color-gray-200);
z-index: -1;
padding: 2px;
}
.center {
position: absolute;
width: 100%;

60
packages/builder/src/stores/builder/components.js
View File

@ -574,15 +574,26 @@ export class ComponentStore extends BudiStore {
return
}
// Determine the next component to select after deletion
// Determine the next component to select, and select it before deletion
// to avoid an intermediate state of no component selection
const state = get(this.store)
let nextSelectedComponentId
let nextId
if (state.selectedComponentId === component._id) {
nextSelectedComponentId = this.getNext()
if (!nextSelectedComponentId) {
nextSelectedComponentId = this.getPrevious()
nextId = this.getNext()
if (!nextId) {
nextId = this.getPrevious()
}
}
if (nextId) {
// If this is the nav, select the screen instead
if (nextId.endsWith("-navigation")) {
nextId = nextId.replace("-navigation", "-screen")
}
this.update(state => {
state.selectedComponentId = nextId
return state
})
}
// Patch screen
await screenStore.patch(screen => {
@ -601,14 +612,6 @@ export class ComponentStore extends BudiStore {
child => child._id !== component._id
)
})
// Update selected component if required
if (nextSelectedComponentId) {
this.update(state => {
state.selectedComponentId = nextSelectedComponentId
return state
})
}
}
copy(component, cut = false, selectParent = true) {
@ -616,6 +619,7 @@ export class ComponentStore extends BudiStore {
this.update(state => {
state.componentToPaste = cloneDeep(component)
state.componentToPaste.isCut = cut
state.componentToPaste.screenId = get(screenStore).selectedScreenId
return state
})
@ -650,7 +654,7 @@ export class ComponentStore extends BudiStore {
* @param {object} targetScreen
* @returns
*/
async paste(targetComponent, mode, targetScreen) {
async paste(targetComponent, mode, targetScreen, selectComponent = true) {
const state = get(this.store)
if (!state.componentToPaste) {
return
@ -674,8 +678,10 @@ export class ComponentStore extends BudiStore {
return false
}
const cut = componentToPaste.isCut
const sourceScreenId = componentToPaste.screenId
const originalId = componentToPaste._id
delete componentToPaste.isCut
delete componentToPaste.screenId
// Make new component unique if copying
if (!cut) {
@ -683,6 +689,19 @@ export class ComponentStore extends BudiStore {
}
newComponentId = componentToPaste._id
// Strip grid position metadata if pasting into a new screen, but keep
// alignment metadata
if (sourceScreenId && sourceScreenId !== screen._id) {
for (let style of Object.keys(componentToPaste._styles?.normal || {})) {
if (
style.startsWith("--grid") &&
(style.endsWith("-start") || style.endsWith("-end"))
) {
delete componentToPaste._styles.normal[style]
}
}
}
// Delete old component if cutting
if (cut) {
const parent = findComponentParent(screen.props, originalId)
@ -725,12 +744,13 @@ export class ComponentStore extends BudiStore {
await screenStore.patch(patch, targetScreenId)
// Select the new component
this.update(state => {
state.selectedScreenId = targetScreenId
state.selectedComponentId = newComponentId
return state
})
if (selectComponent) {
this.update(state => {
state.selectedScreenId = targetScreenId
state.selectedComponentId = newComponentId
return state
})
}
componentTreeNodesStore.makeNodeVisible(newComponentId)
}

24
packages/builder/src/templates/Component.js
View File

@ -54,4 +54,28 @@ export class Component extends BaseStructure {
getId() {
return this._json._id
}
gridDesktopColSpan(start, end) {
this._json._styles.normal["--grid-desktop-col-start"] = start
this._json._styles.normal["--grid-desktop-col-end"] = end
return this
}
gridDesktopRowSpan(start, end) {
this._json._styles.normal["--grid-desktop-row-start"] = start
this._json._styles.normal["--grid-desktop-row-end"] = end
return this
}
gridMobileColSpan(start, end) {
this._json._styles.normal["--grid-mobile-col-start"] = start
this._json._styles.normal["--grid-mobile-col-end"] = end
return this
}
gridMobileRowSpan(start, end) {
this._json._styles.normal["--grid-mobile-row-start"] = start
this._json._styles.normal["--grid-mobile-row-end"] = end
return this
}
}

1
packages/builder/src/templates/screenTemplating/Screen.js
View File

@ -18,6 +18,7 @@ export class Screen extends BaseStructure {
},
_children: [],
_instanceName: "",
layout: "flex",
direction: "column",
hAlign: "stretch",
vAlign: "top",

1
packages/builder/src/templates/screenTemplating/blank.js
View File

@ -8,6 +8,7 @@ const blank = ({ route, screens }) => {
const template = new Screen()
.instanceName("Blank screen")
.customProps({ layout: "grid" })
.role(Roles.BASIC)
.route(validRoute)
.json()

5
packages/builder/src/templates/screenTemplating/table/inline.js
View File

@ -9,16 +9,21 @@ const inline = ({ tableOrView, permissions, screens }) => {
.customProps({
text: tableOrView.name,
})
.gridDesktopColSpan(1, 13)
.gridDesktopRowSpan(1, 3)
const tableBlock = new Component("@budibase/standard-components/gridblock")
.instanceName(`${tableOrView.name} - Table`)
.customProps({
table: tableOrView.datasourceSelectFormat,
})
.gridDesktopColSpan(1, 13)
.gridDesktopRowSpan(3, 21)
const screenTemplate = new Screen()
.route(getValidRoute(screens, tableOrView.name, permissions.write))
.instanceName(`${tableOrView.name} - List`)
.customProps({ layout: "grid" })
.role(permissions.write)
.autoTableId(tableOrView.id)
.addChild(heading)

26
packages/builder/src/templates/screenTemplating/table/modal.js
View File

@ -33,26 +33,22 @@ const modal = ({ tableOrView, permissions, screens }) => {
type: "cta",
})
buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
hAlign: "right",
buttons: [createButton.json()],
})
const tableHeader = new Component("@budibase/standard-components/container")
.instanceName("Heading container")
buttonGroup
.instanceName(`${tableOrView.name} - Create`)
.customProps({
direction: "row",
hAlign: "stretch",
hAlign: "right",
buttons: [createButton.json()],
})
.gridDesktopColSpan(7, 13)
.gridDesktopRowSpan(1, 3)
const heading = new Component("@budibase/standard-components/heading")
.instanceName("Table heading")
.customProps({
text: tableOrView.name,
})
tableHeader.addChild(heading)
tableHeader.addChild(buttonGroup)
.gridDesktopColSpan(1, 7)
.gridDesktopRowSpan(1, 3)
const createFormBlock = new Component(
"@budibase/standard-components/formblock"
@ -134,13 +130,17 @@ const modal = ({ tableOrView, permissions, screens }) => {
],
})
.instanceName(`${tableOrView.name} - Table`)
.gridDesktopColSpan(1, 13)
.gridDesktopRowSpan(3, 21)
const template = new Screen()
.route(getValidRoute(screens, tableOrView.name, permissions.write))
.instanceName(`${tableOrView.name} - List and details`)
.customProps({ layout: "grid" })
.role(permissions.write)
.autoTableId(tableOrView.id)
.addChild(tableHeader)
.addChild(buttonGroup)
.addChild(heading)
.addChild(tableBlock)
.addChild(createRowModal)
.addChild(detailsModal)

56
packages/builder/src/templates/screenTemplating/table/newScreen.js
View File

@ -11,36 +11,41 @@ const getTableScreenTemplate = ({
createScreenRoute,
tableOrView,
permissions,
gridLayout,
}) => {
const newButton = new Component("@budibase/standard-components/button")
.instanceName("New button")
.customProps({
text: "Create row",
onClick: [
{
"##eventHandlerType": "Navigate To",
parameters: {
type: "url",
url: createScreenRoute,
},
const buttonGroup = new Component("@budibase/standard-components/buttongroup")
const createButton = new Component("@budibase/standard-components/button")
createButton.customProps({
onClick: [
{
"##eventHandlerType": "Navigate To",
parameters: {
type: "url",
url: createScreenRoute,
},
],
},
],
text: "Create row",
type: "cta",
})
buttonGroup
.instanceName(`${tableOrView.name} - Create`)
.customProps({
hAlign: "right",
buttons: [createButton.json()],
})
.gridDesktopColSpan(7, 13)
.gridDesktopRowSpan(1, 3)
const heading = new Component("@budibase/standard-components/heading")
.instanceName("Table heading")
.customProps({
text: tableOrView.name,
})
const tableHeader = new Component("@budibase/standard-components/container")
.instanceName("Heading container")
.customProps({
direction: "row",
hAlign: "stretch",
})
.addChild(heading)
.addChild(newButton)
.gridDesktopColSpan(1, 7)
.gridDesktopRowSpan(1, 3)
const updateScreenRouteSegments = updateScreenRoute.split(":id")
if (updateScreenRouteSegments.length !== 2) {
@ -67,14 +72,18 @@ const getTableScreenTemplate = ({
},
],
})
.gridDesktopColSpan(1, 13)
.gridDesktopRowSpan(3, 21)
const template = new Screen()
.route(route)
.instanceName(`${tableOrView.name} - List`)
.customProps({ layout: gridLayout ? "grid" : "flex" })
.role(permissions.write)
.autoTableId(tableOrView.id)
.addChild(tableHeader)
.addChild(tableBlock)
.addChild(heading)
.addChild(buttonGroup)
.json()
return {
@ -300,6 +309,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
createScreenRoute,
permissions,
tableOrView,
gridLayout: true,
})
const updateScreenTemplate = getUpdateScreenTemplate({
@ -307,6 +317,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
tableScreenRoute,
tableOrView,
permissions,
gridLayout: false,
})
const createScreenTemplate = getCreateScreenTemplate({
@ -314,6 +325,7 @@ const newScreen = ({ tableOrView, permissions, screens }) => {
tableScreenRoute,
tableOrView,
permissions,
gridLayout: false,
})
return [tableScreenTemplate, updateScreenTemplate, createScreenTemplate]

26
packages/builder/src/templates/screenTemplating/table/sidePanel.js
View File

@ -31,26 +31,22 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
type: "cta",
})
buttonGroup.instanceName(`${tableOrView.name} - Create`).customProps({
hAlign: "right",
buttons: [createButton.json()],
})
const tableHeader = new Component("@budibase/standard-components/container")
.instanceName("Heading container")
buttonGroup
.instanceName(`${tableOrView.name} - Create`)
.customProps({
direction: "row",
hAlign: "stretch",
hAlign: "right",
buttons: [createButton.json()],
})
.gridDesktopColSpan(7, 13)
.gridDesktopRowSpan(1, 3)
const heading = new Component("@budibase/standard-components/heading")
.instanceName("Table heading")
.customProps({
text: tableOrView.name,
})
tableHeader.addChild(heading)
tableHeader.addChild(buttonGroup)
.gridDesktopColSpan(1, 7)
.gridDesktopRowSpan(1, 3)
const createFormBlock = new Component(
"@budibase/standard-components/formblock"
@ -130,13 +126,17 @@ const sidePanel = ({ tableOrView, permissions, screens }) => {
],
})
.instanceName(`${tableOrView.name} - Table`)
.gridDesktopColSpan(1, 13)
.gridDesktopRowSpan(3, 21)
const template = new Screen()
.route(getValidRoute(screens, tableOrView.name, permissions.write))
.instanceName(`${tableOrView.name} - List and details`)
.customProps({ layout: "grid" })
.role(permissions.write)
.autoTableId(tableOrView.id)
.addChild(tableHeader)
.addChild(heading)
.addChild(buttonGroup)
.addChild(tableBlock)
.addChild(createRowSidePanel)
.addChild(detailsSidePanel)

370
packages/client/manifest.json
View File

@ -18,14 +18,37 @@
"numberLike": {
"supported": ["number", "boolean"],
"partialSupport": [
{ "type": "longform", "message": "stringAsNumber" },
{ "type": "string", "message": "stringAsNumber" },
{ "type": "bigint", "message": "stringAsNumber" },
{ "type": "options", "message": "stringAsNumber" },
{ "type": "formula", "message": "stringAsNumber" },
{ "type": "datetime", "message": "dateAsNumber" }
{
"type": "longform",
"message": "stringAsNumber"
},
{
"type": "string",
"message": "stringAsNumber"
},
{
"type": "bigint",
"message": "stringAsNumber"
},
{
"type": "options",
"message": "stringAsNumber"
},
{
"type": "formula",
"message": "stringAsNumber"
},
{
"type": "datetime",
"message": "dateAsNumber"
}
],
"unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
"unsupported": [
{
"type": "json",
"message": "jsonPrimitivesOnly"
}
]
},
"stringLike": {
"supported": [
@ -37,19 +60,47 @@
"boolean",
"datetime"
],
"unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
"unsupported": [
{
"type": "json",
"message": "jsonPrimitivesOnly"
}
]
},
"datetimeLike": {
"supported": ["datetime"],
"partialSupport": [
{ "type": "longform", "message": "stringAsDate" },
{ "type": "string", "message": "stringAsDate" },
{ "type": "options", "message": "stringAsDate" },
{ "type": "formula", "message": "stringAsDate" },
{ "type": "bigint", "message": "stringAsDate" },
{ "type": "number", "message": "numberAsDate" }
{
"type": "longform",
"message": "stringAsDate"
},
{
"type": "string",
"message": "stringAsDate"
},
{
"type": "options",
"message": "stringAsDate"
},
{
"type": "formula",
"message": "stringAsDate"
},
{
"type": "bigint",
"message": "stringAsDate"
},
{
"type": "number",
"message": "numberAsDate"
}
],
"unsupported": [{ "type": "json", "message": "jsonPrimitivesOnly" }]
"unsupported": [
{
"type": "json",
"message": "jsonPrimitivesOnly"
}
]
}
},
"layout": {
@ -114,11 +165,37 @@
"icon": "Selection",
"hasChildren": true,
"size": {
"width": 400,
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"styles": ["padding", "size", "background", "border", "shadow"],
"settings": [
{
"type": "select",
"label": "Layout",
"key": "layout",
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "Flex",
"value": "flex",
"barIcon": "ModernGridView",
"barTitle": "Flex layout"
},
{
"label": "Grid",
"value": "grid",
"barIcon": "ViewGrid",
"barTitle": "Grid layout"
}
],
"defaultValue": "grid"
},
{
"type": "select",
"label": "Direction",
@ -139,7 +216,12 @@
"barTitle": "Row layout"
}
],
"defaultValue": "column"
"defaultValue": "column",
"dependsOn": {
"setting": "layout",
"value": "grid",
"invert": true
}
},
{
"type": "select",
@ -173,7 +255,12 @@
"barTitle": "Align stretched horizontally"
}
],
"defaultValue": "stretch"
"defaultValue": "stretch",
"dependsOn": {
"setting": "layout",
"value": "grid",
"invert": true
}
},
{
"type": "select",
@ -207,7 +294,12 @@
"barTitle": "Align stretched vertically"
}
],
"defaultValue": "top"
"defaultValue": "top",
"dependsOn": {
"setting": "layout",
"value": "grid",
"invert": true
}
},
{
"type": "select",
@ -229,7 +321,12 @@
"barTitle": "Grow container"
}
],
"defaultValue": "shrink"
"defaultValue": "shrink",
"dependsOn": {
"setting": "layout",
"value": "grid",
"invert": true
}
},
{
"type": "select",
@ -255,7 +352,12 @@
"value": "L"
}
],
"defaultValue": "M"
"defaultValue": "M",
"dependsOn": {
"setting": "layout",
"value": "grid",
"invert": true
}
},
{
"type": "boolean",
@ -263,7 +365,12 @@
"key": "wrap",
"showInBar": true,
"barIcon": "ModernGridView",
"barTitle": "Wrap"
"barTitle": "Wrap",
"dependsOn": {
"setting": "layout",
"value": "grid",
"invert": true
}
},
{
"type": "event",
@ -280,8 +387,12 @@
"illegalChildren": ["section"],
"showEmptyState": false,
"size": {
"width": 400,
"height": 100
"width": 600,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -302,6 +413,14 @@
"name": "Button group",
"icon": "Button",
"hasChildren": false,
"size": {
"width": 200,
"height": 60
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"section": true,
@ -484,9 +603,13 @@
"icon": "Button",
"editable": true,
"size": {
"width": 105,
"width": 120,
"height": 32
},
"grid": {
"hAlign": "center",
"vAlign": "center"
},
"settings": [
{
"type": "text",
@ -648,8 +771,12 @@
"illegalChildren": ["section"],
"hasChildren": true,
"size": {
"width": 400,
"height": 100
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -1143,6 +1270,10 @@
"width": 100,
"height": 25
},
"grid": {
"hAlign": "center",
"vAlign": "center"
},
"settings": [
{
"type": "text",
@ -1220,6 +1351,7 @@
"icon": "Images",
"hasChildren": true,
"styles": ["size"],
"showEmptyState": false,
"size": {
"width": 400,
"height": 300
@ -1285,6 +1417,10 @@
"width": 25,
"height": 25
},
"grid": {
"hAlign": "center",
"vAlign": "center"
},
"settings": [
{
"type": "icon",
@ -1598,6 +1734,10 @@
"width": 260,
"height": 143
},
"grid": {
"hAlign": "center",
"vAlign": "center"
},
"settings": [
{
"type": "text",
@ -1631,6 +1771,10 @@
"width": 400,
"height": 100
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"type": "text",
@ -1647,7 +1791,11 @@
"icon": "GraphBarVertical",
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
@ -1816,7 +1964,11 @@
"icon": "GraphTrend",
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
@ -1980,7 +2132,11 @@
"icon": "GraphAreaStacked",
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
@ -2156,7 +2312,11 @@
"icon": "GraphPie",
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
@ -2296,7 +2456,11 @@
"icon": "GraphDonut",
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
@ -2436,7 +2600,11 @@
"icon": "GraphBarVerticalStacked",
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
@ -2553,7 +2721,11 @@
"icon": "Histogram",
"size": {
"width": 600,
"height": 400
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
@ -2704,11 +2876,15 @@
"UpdateFieldValue",
"ScrollTo"
],
"styles": ["size"],
"styles": ["padding", "size", "background", "border", "shadow"],
"size": {
"width": 400,
"height": 400
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"type": "select",
@ -2864,7 +3040,7 @@
"editable": true,
"size": {
"width": 400,
"height": 32
"height": 60
},
"settings": [
{
@ -2895,7 +3071,7 @@
"editable": true,
"size": {
"width": 400,
"height": 32
"height": 60
},
"settings": [
{
@ -3031,7 +3207,7 @@
"editable": true,
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -3133,7 +3309,7 @@
"editable": true,
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -3219,7 +3395,7 @@
"editable": true,
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -3305,7 +3481,7 @@
"editable": true,
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -3519,7 +3695,7 @@
"editable": true,
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -3725,8 +3901,8 @@
"editable": true,
"requiredAncestors": ["form"],
"size": {
"width": 20,
"height": 20
"width": 400,
"height": 60
},
"settings": [
{
@ -3852,7 +4028,7 @@
"editable": true,
"size": {
"width": 400,
"height": 150
"height": 100
},
"settings": [
{
@ -3976,7 +4152,7 @@
"editable": true,
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -4094,7 +4270,7 @@
"styles": ["size"],
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -4167,7 +4343,10 @@
"label": "High",
"value": 3136
},
{ "label": "Custom", "value": "custom" }
{
"label": "Custom",
"value": "custom"
}
]
},
{
@ -4251,7 +4430,7 @@
"styles": ["size"],
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -4303,6 +4482,10 @@
"width": 400,
"height": 320
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"type": "dataProvider",
@ -4602,7 +4785,7 @@
"editable": true,
"size": {
"width": 400,
"height": 50
"height": 60
},
"settings": [
{
@ -4872,8 +5055,12 @@
"hasChildren": true,
"actions": ["RefreshDatasource"],
"size": {
"width": 400,
"height": 100
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -5126,6 +5313,10 @@
"width": 300,
"height": 120
},
"grid": {
"hAlign": "center",
"vAlign": "center"
},
"settings": [
{
"type": "text",
@ -5190,6 +5381,10 @@
"width": 100,
"height": 35
},
"grid": {
"hAlign": "center",
"vAlign": "center"
},
"settings": [
{
"type": "dataProvider",
@ -5236,6 +5431,14 @@
"name": "Chart Block",
"icon": "GraphPie",
"hasChildren": false,
"size": {
"width": 600,
"height": 420
},
"grid": {
"hAlign": "stretch",
"vAlign": "center"
},
"settings": [
{
"type": "select",
@ -6159,6 +6362,10 @@
"width": 600,
"height": 400
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"type": "text",
@ -6368,8 +6575,12 @@
"illegalChildren": ["section", "rowexplorer"],
"hasChildren": true,
"size": {
"width": 400,
"height": 100
"width": 500,
"height": 200
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -6624,6 +6835,10 @@
"width": 400,
"height": 100
},
"grid": {
"hAlign": "stretch",
"vAlign": "start"
},
"settings": [
{
"type": "text",
@ -6640,10 +6855,14 @@
"hasChildren": false,
"ejectable": false,
"size": {
"width": 400,
"width": 600,
"height": 400
},
"styles": ["size"],
"grid": {
"hAlign": "stretch",
"vAlign": "start"
},
"styles": ["padding", "size", "background", "border", "shadow"],
"settings": [
{
"type": "table",
@ -6827,13 +7046,17 @@
"formblock": {
"name": "Form Block",
"icon": "Form",
"styles": ["size"],
"styles": ["padding", "size", "background", "border", "shadow"],
"block": true,
"info": "Form blocks are only compatible with internal or SQL tables",
"size": {
"width": 400,
"width": 600,
"height": 400
},
"grid": {
"hAlign": "stretch",
"vAlign": "start"
},
"settings": [
{
"type": "table",
@ -6983,6 +7206,7 @@
"name": "Side Panel",
"icon": "RailRight",
"hasChildren": true,
"ignoresLayout": true,
"illegalChildren": ["section", "sidepanel", "modal"],
"showEmptyState": false,
"draggable": false,
@ -7006,6 +7230,7 @@
"icon": "MBox",
"hasChildren": true,
"illegalChildren": ["section", "modal", "sidepanel"],
"ignoresLayout": true,
"showEmptyState": false,
"draggable": false,
"info": "Modals are hidden by default. They will only be revealed when triggered by the 'Open Modal' action.",
@ -7052,8 +7277,12 @@
"name": "Row Explorer Block",
"icon": "PersonalizationField",
"size": {
"width": 600,
"height": 400
"width": 800,
"height": 426
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
@ -7167,23 +7396,6 @@
"scope": "local"
}
},
"grid": {
"name": "Grid",
"icon": "ViewGrid",
"hasChildren": true,
"settings": [
{
"type": "number",
"key": "cols",
"label": "Columns"
},
{
"type": "number",
"key": "rows",
"label": "Rows"
}
]
},
"gridblock": {
"name": "Table",
"icon": "Table",
@ -7192,6 +7404,10 @@
"width": 600,
"height": 400
},
"grid": {
"hAlign": "stretch",
"vAlign": "stretch"
},
"settings": [
{
"type": "dataSource",

26
packages/client/src/components/ClientApp.svelte
View File

@ -235,9 +235,6 @@
/>
{/key}
<!-- Modal container to ensure they sit on top -->
<div class="modal-container" />
<!-- Layers on top of app -->
<NotificationDisplay />
<ConfirmationDisplay />
@ -284,7 +281,7 @@
visibility: hidden;
padding: 0;
margin: 0;
overflow: hidden;
overflow: clip;
width: 100%;
display: flex;
flex-direction: row;
@ -301,7 +298,7 @@
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
overflow: clip;
background-color: transparent;
}
@ -311,7 +308,7 @@
}
#app-root {
overflow: hidden;
overflow: clip;
height: 100%;
width: 100%;
display: flex;
@ -327,6 +324,7 @@
justify-content: flex-start;
align-items: stretch;
overflow: hidden;
position: relative;
}
.error {
@ -356,22 +354,16 @@
}
/* Preview styles */
/* The additional 6px of size is to account for 4px padding and 2px border */
#clip-root.preview {
padding: 2px;
padding: 6px;
}
#clip-root.tablet-preview {
width: calc(1024px + 6px);
height: calc(768px + 6px);
width: calc(1024px + 12px);
height: calc(768px + 12px);
}
#clip-root.mobile-preview {
width: calc(390px + 6px);
height: calc(844px + 6px);
}
.preview #app-root {
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
width: calc(390px + 12px);
height: calc(844px + 12px);
}
/* Print styles */

63
packages/client/src/components/Component.svelte
View File

@ -39,8 +39,10 @@
getActionContextKey,
getActionDependentContextKeys,
} from "../utils/buttonActions.js"
import { gridLayout } from "utils/grid.js"
export let instance = {}
export let parent = null
export let isLayout = false
export let isRoot = false
export let isBlock = false
@ -102,8 +104,8 @@
let settingsDefinitionMap
let missingRequiredSettings = false
// Temporary styles which can be added in the app preview for things like DND.
// We clear these whenever a new instance is received.
// Temporary styles which can be added in the app preview for things like
// DND. We clear these whenever a new instance is received.
let ephemeralStyles
// Single string of all HBS blocks, used to check if we use a certain binding
@ -193,19 +195,37 @@
$: pad = pad || (interactive && hasChildren && inDndPath)
$: $dndIsDragging, (pad = false)
// Themes
$: currentTheme = $context?.device?.theme
$: darkMode = !currentTheme?.includes("light")
// Apply ephemeral styles (such as when resizing grid components)
$: normalStyles = {
...instance._styles?.normal,
...ephemeralStyles,
}
// Metadata to pass into grid action to apply CSS
const insideGrid =
parent?._component.endsWith("/container") && parent?.layout === "grid"
$: gridMetadata = {
insideGrid,
ignoresLayout: definition?.ignoresLayout === true,
id,
interactive,
styles: normalStyles,
draggable,
definition,
errored: errorState,
}
// Update component context
$: store.set({
id,
children: children.length,
styles: {
...instance._styles,
normal: {
...instance._styles?.normal,
...ephemeralStyles,
},
normal: normalStyles,
custom: customCSS,
id,
empty: emptyState,
@ -242,6 +262,9 @@
lastInstanceKey = instanceKey
}
// Reset ephemeral state
ephemeralStyles = null
// Pull definition and constructor
const component = instance._component
constructor = componentStore.actions.getComponentConstructor(component)
@ -561,19 +584,22 @@
}
}
const scrollIntoView = () => {
// Don't scroll into view if we selected this component because we were
// starting dragging on it
if (get(dndIsDragging)) {
return
}
const node = document.getElementsByClassName(id)?.[0]?.children[0]
const scrollIntoView = async () => {
const className = insideGrid ? id : `${id}-dom`
const node = document.getElementsByClassName(className)[0]
if (!node) {
return
}
node.style.scrollMargin = "100px"
// Don't scroll into view if we selected this component because we were
// starting dragging on it
if (
get(dndIsDragging) ||
(insideGrid && node.classList.contains("dragging"))
) {
return
}
node.scrollIntoView({
behavior: "smooth",
behavior: "instant",
block: "nearest",
inline: "start",
})
@ -650,6 +676,7 @@
data-name={name}
data-icon={icon}
data-parent={$component.id}
use:gridLayout={gridMetadata}
>
{#if errorState}
<ComponentErrorState
@ -660,7 +687,7 @@
<svelte:component this={constructor} bind:this={ref} {...initialSettings}>
{#if children.length}
{#each children as child (child._id)}
<svelte:self instance={child} />
<svelte:self instance={child} parent={instance} />
{/each}
{:else if emptyState}
{#if isRoot}
@ -687,7 +714,7 @@
border-radius: 4px !important;
transition: padding 260ms ease-out, border 260ms ease-out;
}
.interactive :global(*) {
cursor: default;
.interactive {
cursor: default !important;
}
</style>

3
packages/client/src/components/Router.svelte
View File

@ -71,4 +71,7 @@
div {
position: relative;
}
div :global(> .component > *) {
flex: 1 1 auto;
}
</style>

5
packages/client/src/components/Screen.svelte
View File

@ -13,8 +13,9 @@
const onLoadActions = memo()
// Get the screen definition for the current route
$: screenDefinition = $screenStore.activeScreen?.props
$: onLoadActions.set($screenStore.activeScreen?.onLoad)
$: screen = $screenStore.activeScreen
$: screenDefinition = { ...screen?.props, addEmptyRows: true }
$: onLoadActions.set(screen?.onLoad)
$: runOnLoadActions($onLoadActions, params)
// Enrich and execute any on load actions.

25
packages/client/src/components/app/BackgroundImage.svelte
View File

@ -1,8 +1,7 @@
<script>
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { styleable, builderStore } = getContext("sdk")
const { styleable } = getContext("sdk")
const component = getContext("component")
export let url
@ -19,20 +18,11 @@
}
</script>
{#if url}
<div class="outer" use:styleable={$component.styles}>
<div class="inner" {style}>
<slot />
</div>
<div class="outer" use:styleable={$component.styles}>
<div class="inner" {style}>
<slot />
</div>
{:else if $builderStore.inBuilder}
<div
class="placeholder"
use:styleable={{ ...$component.styles, empty: true }}
>
<Placeholder />
</div>
{/if}
</div>
<style>
.outer {
@ -49,9 +39,4 @@
background-size: cover;
background-position: center center;
}
.placeholder {
display: grid;
place-items: center;
}
</style>

5
packages/client/src/components/app/ButtonGroup.svelte
View File

@ -19,6 +19,11 @@
gap,
wrap: true,
}}
styles={{
normal: {
height: "100%",
},
}}
>
{#each buttons as { text, type, quiet, disabled, onClick, size, icon, gap }}
<BlockComponent

102
packages/client/src/components/app/Grid.svelte
View File

@ -1,102 +0,0 @@
<script>
import { getContext } from "svelte"
const component = getContext("component")
const { styleable, builderStore } = getContext("sdk")
export let cols = 12
export let rows = 12
// Deliberately non-reactive as we want this fixed whenever the grid renders
const defaultColSpan = Math.ceil((cols + 1) / 2)
const defaultRowSpan = Math.ceil((rows + 1) / 2)
$: coords = generateCoords(rows, cols)
const generateCoords = (rows, cols) => {
let grid = []
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
grid.push({ row, col })
}
}
return grid
}
</script>
<div
class="grid"
use:styleable={{
...$component.styles,
normal: {
...$component.styles?.normal,
"--cols": cols,
"--rows": rows,
"--default-col-span": defaultColSpan,
"--default-row-span": defaultRowSpan,
gap: "0 !important",
},
}}
data-rows={rows}
data-cols={cols}
>
{#if $builderStore.inBuilder}
<div class="underlay">
{#each coords as _}
<div class="placeholder" />
{/each}
</div>
{/if}
<slot />
</div>
<style>
/*
Ensure all children of containers which are top level children of
grids do not overflow
*/
:global(.grid > .component > .valid-container > .component > *) {
max-height: 100%;
max-width: 100%;
}
/* Ensure all top level children have some grid styles set */
:global(.grid > .component > *) {
overflow: hidden;
width: auto;
height: auto;
grid-column-start: 1;
grid-column-end: var(--default-col-span);
grid-row-start: 1;
grid-row-end: var(--default-row-span);
max-height: 100%;
max-width: 100%;
}
.grid {
position: relative;
height: 400px;
}
.grid,
.underlay {
display: grid;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
grid-gap: 2px;
background-color: var(--spectrum-global-color-gray-200);
border: 2px solid var(--spectrum-global-color-gray-200);
}
.underlay {
z-index: -1;
}
.placeholder {
background-color: var(--spectrum-global-color-gray-100);
}
</style>

4
packages/client/src/components/app/GridBlock.svelte
View File

@ -198,7 +198,7 @@
overflow: hidden;
height: 410px;
}
div.in-builder :global(*) {
pointer-events: none;
div.in-builder :global(> *) {
pointer-events: none !important;
}
</style>

18
packages/client/src/components/app/Layout.svelte
View File

@ -36,7 +36,6 @@
export let logoLinkUrl
export let openLogoLinkInNewTab
export let textAlign
export let embedded = false
const NavigationClasses = {
@ -339,6 +338,7 @@
/>
</div>
</div>
<div class="modal-container" />
</div>
<style>
@ -353,6 +353,9 @@
z-index: 1;
overflow: hidden;
position: relative;
/* Deliberately unitless as we need to do unitless calculations in grids */
--grid-spacing: 4;
}
.component {
display: contents;
@ -415,7 +418,6 @@
color: var(--navTextColor);
opacity: 1;
}
.nav :global(h1) {
color: var(--navTextColor);
}
@ -481,9 +483,10 @@
position: relative;
padding: 32px;
}
.main.size--max {
padding: 0;
.main:not(.size--max):has(.screenslot-dom > .component > .grid) {
padding: calc(32px - var(--grid-spacing) * 2px);
}
.layout--none .main {
padding: 0;
}
@ -502,6 +505,9 @@
.size--max {
width: 100%;
}
.main.size--max {
padding: 0;
}
/* Nav components */
.burger {
@ -613,6 +619,10 @@
.mobile:not(.layout--none) .main {
padding: 16px;
}
.mobile:not(.layout--none)
.main:not(.size--max):has(.screenslot-dom > .component > .grid) {
padding: 6px;
}
.mobile .main.size--max {
padding: 0;
}

2
packages/client/src/components/app/Repeater.svelte
View File

@ -1,7 +1,7 @@
<script>
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
import Container from "./Container.svelte"
import Container from "./container/Container.svelte"
const { Provider, ContextScopes } = getContext("sdk")
const component = getContext("component")

3
packages/client/src/components/app/Tag.svelte
View File

@ -57,4 +57,7 @@
.spectrum-Tag--sizeL {
padding: 0 var(--spectrum-global-dimension-size-150);
}
.spectrum-Tag-label {
height: auto;
}
</style>

12
packages/client/src/components/app/container/Container.svelte Normal file
View File

@ -0,0 +1,12 @@
<script>
import GridContainer from "./GridContainer.svelte"
import FlexContainer from "./FlexContainer.svelte"
export let layout = "flex"
$: component = layout === "grid" ? GridContainer : FlexContainer
</script>
<svelte:component this={component} {...$$props}>
<slot />
</svelte:component>

6
packages/client/src/components/app/Container.svelte → packages/client/src/components/app/container/FlexContainer.svelte
View File

@ -12,7 +12,7 @@
export let wrap
export let onClick
$: directionClass = direction ? `valid-container direction-${direction}` : ""
$: directionClass = direction ? `flex-container direction-${direction}` : ""
$: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
$: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
$: sizeClass = size ? `size-${size}` : ""
@ -39,11 +39,11 @@
</div>
<style>
.valid-container {
.flex-container {
display: flex;
max-width: 100%;
}
.valid-container :global(.component > *) {
.flex-container :global(.component > *) {
max-width: 100%;
}
.direction-row {

264
packages/client/src/components/app/container/GridContainer.svelte Normal file
View File

@ -0,0 +1,264 @@
<script>
import { getContext, onMount } from "svelte"
import { writable } from "svelte/store"
import { GridRowHeight, GridColumns } from "constants"
import { memo } from "@budibase/frontend-core"
export let addEmptyRows = false
const component = getContext("component")
const { styleable, builderStore } = getContext("sdk")
const context = getContext("context")
let width
let height
let ref
let children = writable({})
let mounted = false
let styles = memo({})
$: inBuilder = $builderStore.inBuilder
$: requiredRows = calculateRequiredRows(
$children,
mobile,
addEmptyRows && inBuilder
)
$: requiredHeight = requiredRows * GridRowHeight
$: availableRows = Math.floor(height / GridRowHeight)
$: rows = Math.max(requiredRows, availableRows)
$: mobile = $context.device.mobile
$: empty = $component.empty
$: colSize = width / GridColumns
$: styles.set({
...$component.styles,
normal: {
...$component.styles?.normal,
"--height": `${requiredHeight}px`,
"--min-height": $component.styles?.normal?.height || 0,
"--cols": GridColumns,
"--rows": rows,
"--col-size": colSize,
"--row-size": GridRowHeight,
},
empty: false,
})
// Calculates the minimum number of rows required to render all child
// components, on a certain device type
const calculateRequiredRows = (children, mobile, addEmptyRows) => {
const key = mobile ? "mobileRowEnd" : "desktopRowEnd"
let max = 2
for (let id of Object.keys(children)) {
if (children[id][key] > max) {
max = children[id][key]
}
}
let requiredRows = max - 1
if (addEmptyRows) {
return Math.ceil((requiredRows + 10) / 10) * 10
} else {
return requiredRows
}
}
// Stores metadata about a child node as constraints for determining grid size
const storeChild = node => {
children.update(state => ({
...state,
[node.dataset.id]: {
desktopRowEnd: parseInt(node.dataset.gridDesktopRowEnd),
mobileRowEnd: parseInt(node.dataset.gridMobileRowEnd),
},
}))
}
// Removes constraint metadata for a certain child node
const removeChild = node => {
children.update(state => {
delete state[node.dataset.id]
return { ...state }
})
}
onMount(() => {
let observer
// Set up an observer to watch for changes in metadata attributes of child
// components, as well as child addition and deletion
observer = new MutationObserver(mutations => {
for (let mutation of mutations) {
const { target, type, addedNodes, removedNodes } = mutation
if (target === ref) {
if (addedNodes[0]?.classList?.contains("component")) {
// We've added a new child component inside the grid, so we need
// to consider it when determining required rows
storeChild(addedNodes[0])
} else if (removedNodes[0]?.classList?.contains("component")) {
// We've removed a child component inside the grid, so we need
// to stop considering it when determining required rows
removeChild(removedNodes[0])
}
} else if (
type === "attributes" &&
target.parentNode === ref &&
target.classList.contains("component")
) {
// We've updated the size or position of a child
storeChild(target)
}
}
})
observer.observe(ref, {
childList: true,
attributes: true,
subtree: true,
attributeFilter: [
"data-grid-desktop-row-end",
"data-grid-mobile-row-end",
],
})
// Now that the observer is set up, we mark the grid as mounted to mount
// our child components
mounted = true
// Cleanup our observer
return () => {
observer?.disconnect()
}
})
</script>
<div
bind:this={ref}
class="grid"
class:mobile
bind:clientWidth={width}
bind:clientHeight={height}
use:styleable={$styles}
data-cols={GridColumns}
data-col-size={colSize}
>
{#if inBuilder}
<div class="underlay">
{#each { length: GridColumns * rows } as _, idx}
<div class="placeholder" class:first-col={idx % GridColumns === 0} />
{/each}
</div>
{/if}
<!-- Only render the slot if not empty, as we don't want the placeholder -->
{#if !empty && mounted}
<slot />
{/if}
</div>
<style>
.grid,
.underlay {
height: var(--height) !important;
min-height: var(--min-height) !important;
max-height: none !important;
display: grid;
gap: 0;
grid-template-rows: repeat(var(--rows), calc(var(--row-size) * 1px));
grid-template-columns: repeat(var(--cols), calc(var(--col-size) * 1px));
position: relative;
}
.underlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid var(--spectrum-global-color-gray-900);
opacity: 0.1;
pointer-events: none;
}
.underlay {
z-index: 0;
}
.placeholder {
border-bottom: 1px solid var(--spectrum-global-color-gray-900);
border-right: 1px solid var(--spectrum-global-color-gray-900);
}
.placeholder.first-col {
border-left: 1px solid var(--spectrum-global-color-gray-900);
}
/* Highlight grid lines when resizing children */
:global(.grid.highlight > .underlay) {
display: grid;
}
/* Highlight sibling borders when resizing childern */
:global(.grid.highlight > .component:not(.dragging)) {
outline: 2px solid var(--spectrum-global-color-static-blue-200);
pointer-events: none !important;
}
:global(.grid.highlight > .component.dragging) {
z-index: 999 !important;
}
/* Ensure all top level children have grid styles applied */
.grid :global(> .component:not(.ignores-layout)) {
display: flex;
overflow: auto;
pointer-events: all;
position: relative;
padding: calc(var(--grid-spacing) * 1px);
margin: calc(var(--grid-spacing) * 1px);
/* On desktop, use desktop metadata and fall back to mobile */
--col-start: var(--grid-desktop-col-start, var(--grid-mobile-col-start));
--col-end: var(--grid-desktop-col-end, var(--grid-mobile-col-end));
--row-start: var(--grid-desktop-row-start, var(--grid-mobile-row-start));
--row-end: var(--grid-desktop-row-end, var(--grid-mobile-row-end));
--h-align: var(--grid-desktop-h-align, var(--grid-mobile-h-align));
--v-align: var(--grid-desktop-v-align, var(--grid-mobile-v-align));
/* Ensure grid metadata falls within limits */
grid-column-start: min(max(1, var(--col-start)), var(--cols)) !important;
grid-column-end: min(
max(2, var(--col-end)),
calc(var(--cols) + 1)
) !important;
grid-row-start: max(1, var(--row-start)) !important;
grid-row-end: max(2, var(--row-end)) !important;
/* Flex container styles */
flex-direction: column;
align-items: var(--h-align);
justify-content: var(--v-align);
}
/* On mobile, use mobile metadata and fall back to desktop */
.grid.mobile :global(> .component) {
--col-start: var(--grid-mobile-col-start, var(--grid-desktop-col-start));
--col-end: var(--grid-mobile-col-end, var(--grid-desktop-col-end));
--row-start: var(--grid-mobile-row-start, var(--grid-desktop-row-start));
--row-end: var(--grid-mobile-row-end, var(--grid-desktop-row-end));
--h-align: var(--grid-mobile-h-align, var(--grid-desktop-h-align));
--v-align: var(--grid-mobile-v-align, var(--grid-desktop-v-align));
}
/* Handle grid children which need to fill the outer component wrapper */
.grid :global(> .component > *) {
flex: 0 0 auto !important;
}
.grid:not(.mobile)
:global(> .component[data-grid-desktop-v-align="stretch"] > *) {
flex: 1 1 0 !important;
height: 0 !important;
}
.grid.mobile :global(> .component[data-grid-mobile-v-align="stretch"] > *) {
flex: 1 1 0 !important;
height: 0 !important;
}
/* Grid specific CSS overrides for certain components */
.grid :global(> .component > img) {
object-fit: contain;
max-height: 100%;
}
</style>

3
packages/client/src/components/app/index.js
View File

@ -13,7 +13,7 @@ import "@spectrum-css/page/dist/index-vars.css"
export { default as Placeholder } from "./Placeholder.svelte"
// User facing components
export { default as container } from "./Container.svelte"
export { default as container } from "./container/Container.svelte"
export { default as section } from "./Section.svelte"
export { default as dataprovider } from "./DataProvider.svelte"
export { default as divider } from "./Divider.svelte"
@ -35,7 +35,6 @@ export { default as spectrumcard } from "./SpectrumCard.svelte"
export { default as tag } from "./Tag.svelte"
export { default as markdownviewer } from "./MarkdownViewer.svelte"
export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
export { default as grid } from "./Grid.svelte"
export { default as sidepanel } from "./SidePanel.svelte"
export { default as modal } from "./Modal.svelte"
export { default as gridblock } from "./GridBlock.svelte"

12
packages/client/src/components/preview/DNDHandler.svelte
View File

@ -13,6 +13,7 @@
import { Utils } from "@budibase/frontend-core"
import { findComponentById } from "utils/components.js"
import { DNDPlaceholderID } from "constants"
import { isGridEvent } from "utils/grid"
const ThrottleRate = 130
@ -25,15 +26,6 @@
// Local flag for whether we are awaiting an async drop event
let dropping = false
// Util to check if a DND event originates from a grid (or inside a grid).
// This is important as we do not handle grid DND in this handler.
const isGridEvent = e => {
return e.target
?.closest?.(".component")
?.parentNode?.closest?.(".component")
?.childNodes[0]?.classList.contains("grid")
}
// Util to get the inner DOM node by a component ID
const getDOMNode = id => {
return document.getElementsByClassName(`${id}-dom`)[0]
@ -267,7 +259,7 @@
// Check if we're adding a new component rather than moving one
if (source.newComponentType) {
dropping = true
await builderStore.actions.dropNewComponent(
builderStore.actions.dropNewComponent(
source.newComponentType,
drop.parent,
drop.index

4
packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
View File

@ -1,7 +1,7 @@
<script>
import { onMount } from "svelte"
import { DNDPlaceholderID } from "constants"
import { domDebounce } from "utils/domDebounce.js"
import { Utils } from "@budibase/frontend-core"
let left, top, height, width
@ -19,7 +19,7 @@
width = bounds.width
}
}
const debouncedUpdate = domDebounce(updatePosition)
const debouncedUpdate = Utils.domDebounce(updatePosition)
onMount(() => {
const interval = setInterval(debouncedUpdate, 100)

240
packages/client/src/components/preview/GridDNDHandler.svelte
View File

@ -1,112 +1,96 @@
<script>
import { onMount, onDestroy } from "svelte"
import { onMount, onDestroy, getContext } from "svelte"
import { builderStore, componentStore } from "stores"
import { Utils } from "@budibase/frontend-core"
import { Utils, memo } from "@budibase/frontend-core"
import { GridRowHeight } from "constants"
import {
isGridEvent,
GridParams,
getGridVar,
Devices,
GridDragModes,
} from "utils/grid"
const context = getContext("context")
// Smallest possible 1x1 transparent GIF
const ghost = new Image(1, 1)
ghost.src =
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
let dragInfo
let gridStyles
let id
let styles = memo()
// Grid CSS variables
$: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
$: vars = {
colStart: getGridVar(device, GridParams.ColStart),
colEnd: getGridVar(device, GridParams.ColEnd),
rowStart: getGridVar(device, GridParams.RowStart),
rowEnd: getGridVar(device, GridParams.RowEnd),
}
// Some memoisation of primitive types for performance
$: jsonStyles = JSON.stringify(gridStyles)
$: id = dragInfo?.id || id
$: id = dragInfo?.id
// Set ephemeral grid styles on the dragged component
// Set ephemeral styles
$: instance = componentStore.actions.getComponentInstance(id)
$: $instance?.setEphemeralStyles({
...gridStyles,
...(gridStyles ? { "z-index": 999 } : null),
})
$: $instance?.setEphemeralStyles($styles)
// Util to check if a DND event originates from a grid (or inside a grid).
// This is important as we do not handle grid DND in this handler.
const isGridEvent = e => {
return (
e.target
.closest?.(".component")
?.parentNode.closest(".component")
?.childNodes[0].classList.contains("grid") ||
e.target.classList.contains("anchor")
)
}
// Sugar for a combination of both min and max
const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
// Util to get the inner DOM node by a component ID
const getDOMNode = id => {
const component = document.getElementsByClassName(id)[0]
return [...component.children][0]
}
const processEvent = Utils.throttle((mouseX, mouseY) => {
const processEvent = Utils.domDebounce((mouseX, mouseY) => {
if (!dragInfo?.grid) {
return
}
const { mode, side, gridId, grid } = dragInfo
const {
startX,
startY,
rowStart,
rowEnd,
colStart,
colEnd,
rowDeltaMin,
rowDeltaMax,
colDeltaMin,
colDeltaMax,
} = grid
const domGrid = getDOMNode(gridId)
const { mode, side, grid, domGrid } = dragInfo
const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
if (!domGrid) {
return
}
const cols = parseInt(domGrid.dataset.cols)
const rows = parseInt(domGrid.dataset.rows)
const { width, height } = domGrid.getBoundingClientRect()
const colWidth = width / cols
const colSize = parseInt(domGrid.dataset.colSize)
const diffX = mouseX - startX
let deltaX = Math.round(diffX / colWidth)
const rowHeight = height / rows
let deltaX = Math.round(diffX / colSize)
const diffY = mouseY - startY
let deltaY = Math.round(diffY / rowHeight)
if (mode === "move") {
deltaY = Math.min(Math.max(deltaY, rowDeltaMin), rowDeltaMax)
deltaX = Math.min(Math.max(deltaX, colDeltaMin), colDeltaMax)
let deltaY = Math.round(diffY / GridRowHeight)
if (mode === GridDragModes.Move) {
deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
deltaY = Math.max(deltaY, 1 - rowStart)
const newStyles = {
"grid-row-start": rowStart + deltaY,
"grid-row-end": rowEnd + deltaY,
"grid-column-start": colStart + deltaX,
"grid-column-end": colEnd + deltaX,
[vars.colStart]: colStart + deltaX,
[vars.colEnd]: colEnd + deltaX,
[vars.rowStart]: rowStart + deltaY,
[vars.rowEnd]: rowEnd + deltaY,
}
if (JSON.stringify(newStyles) !== jsonStyles) {
gridStyles = newStyles
}
} else if (mode === "resize") {
styles.set(newStyles)
} else if (mode === GridDragModes.Resize) {
let newStyles = {}
if (side === "right") {
newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
} else if (side === "left") {
newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
} else if (side === "top") {
newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
} else if (side === "bottom") {
newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
} else if (side === "bottom-right") {
newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
} else if (side === "bottom-left") {
newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
newStyles[vars.rowEnd] = Math.max(rowEnd + deltaY, rowStart + 1)
} else if (side === "top-right") {
newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1)
newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
} else if (side === "top-left") {
newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
}
if (JSON.stringify(newStyles) !== jsonStyles) {
gridStyles = newStyles
newStyles[vars.colStart] = Math.min(colStart + deltaX, colEnd - 1)
newStyles[vars.rowStart] = Math.min(rowStart + deltaY, rowEnd - 1)
}
styles.set(newStyles)
}
}, 100)
})
const handleEvent = e => {
e.preventDefault()
@ -121,77 +105,64 @@
}
// Hide drag ghost image
e.dataTransfer.setDragImage(new Image(), 0, 0)
e.dataTransfer.setDragImage(ghost, 0, 0)
// Extract state
let mode, id, side
if (e.target.classList.contains("anchor")) {
// Handle resize
mode = "resize"
if (e.target.dataset.indicator === "true") {
mode = e.target.dataset.dragMode
id = e.target.dataset.id
side = e.target.dataset.side
} else {
// Handle move
mode = "move"
mode = GridDragModes.Move
const component = e.target.closest(".component")
id = component.dataset.id
}
// Find grid parent
const domComponent = getDOMNode(id)
const gridId = domComponent?.closest(".grid")?.parentNode.dataset.id
if (!gridId) {
// If holding ctrl/cmd then leave behind a duplicate of this component
if (mode === GridDragModes.Move && (e.ctrlKey || e.metaKey)) {
builderStore.actions.duplicateComponent(id, "above", false)
}
// Find grid parent and read from DOM
const domComponent = document.getElementsByClassName(id)[0]
const domGrid = domComponent?.closest(".grid")
if (!domGrid) {
return
}
const styles = getComputedStyle(domComponent)
// Show as active
domComponent.classList.add("dragging")
domGrid.classList.add("highlight")
builderStore.actions.selectComponent(id)
// Update state
dragInfo = {
domTarget: e.target,
domComponent,
domGrid,
id,
gridId,
gridId: domGrid.parentNode.dataset.id,
mode,
side,
grid: {
startX: e.clientX,
startY: e.clientY,
rowStart: parseInt(styles["grid-row-start"]),
rowEnd: parseInt(styles["grid-row-end"]),
colStart: parseInt(styles["grid-column-start"]),
colEnd: parseInt(styles["grid-column-end"]),
},
}
// Add event handler to clear all drag state when dragging ends
dragInfo.domTarget.addEventListener("dragend", stopDragging)
}
// Callback when entering a potential drop target
const onDragEnter = e => {
// Skip if we aren't validly dragging currently
if (!dragInfo || dragInfo.grid) {
return
}
const domGrid = getDOMNode(dragInfo.gridId)
const gridCols = parseInt(domGrid.dataset.cols)
const gridRows = parseInt(domGrid.dataset.rows)
const domNode = getDOMNode(dragInfo.id)
const styles = window.getComputedStyle(domNode)
if (domGrid) {
const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
const getStyle = x => parseInt(styles?.[x] || "0")
const getColStyle = x => minMax(getStyle(x), 1, gridCols + 1)
const getRowStyle = x => minMax(getStyle(x), 1, gridRows + 1)
dragInfo.grid = {
startX: e.clientX,
startY: e.clientY,
rowStart: getRowStyle("grid-row-start"),
rowEnd: getRowStyle("grid-row-end"),
colStart: getColStyle("grid-column-start"),
colEnd: getColStyle("grid-column-end"),
rowDeltaMin: 1 - getRowStyle("grid-row-start"),
rowDeltaMax: gridRows + 1 - getRowStyle("grid-row-end"),
colDeltaMin: 1 - getColStyle("grid-column-start"),
colDeltaMax: gridCols + 1 - getColStyle("grid-column-end"),
}
handleEvent(e)
}
}
const onDragOver = e => {
if (!dragInfo?.grid) {
if (!dragInfo) {
return
}
handleEvent(e)
@ -199,30 +170,33 @@
// Callback when drag stops (whether dropped or not)
const stopDragging = async () => {
// Save changes
if (gridStyles) {
await builderStore.actions.updateStyles(gridStyles, dragInfo.id)
if (!dragInfo) {
return
}
const { id, domTarget, domGrid, domComponent } = dragInfo
// Reset listener
if (dragInfo?.domTarget) {
dragInfo.domTarget.removeEventListener("dragend", stopDragging)
// Reset DOM
domComponent.classList.remove("dragging")
domGrid.classList.remove("highlight")
domTarget.removeEventListener("dragend", stopDragging)
// Save changes
if ($styles) {
builderStore.actions.updateStyles($styles, id)
}
// Reset state
dragInfo = null
gridStyles = null
styles.set(null)
}
onMount(() => {
document.addEventListener("dragstart", onDragStart, false)
document.addEventListener("dragenter", onDragEnter, false)
document.addEventListener("dragover", onDragOver, false)
})
onDestroy(() => {
document.removeEventListener("dragstart", onDragStart, false)
document.removeEventListener("dragenter", onDragEnter, false)
document.removeEventListener("dragover", onDragOver, false)
})
</script>

42
packages/client/src/components/preview/GridStylesButton.svelte Normal file
View File

@ -0,0 +1,42 @@
<script>
import { Icon } from "@budibase/bbui"
import { builderStore } from "stores"
export let style
export let value
export let icon
export let title
export let componentId
export let active
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
{title}
class:active
on:click={() => {
builderStore.actions.updateStyles({ [style]: value }, componentId)
}}
>
<Icon name={icon} size="S" />
</div>
<style>
div {
padding: 6px;
border-radius: 2px;
color: var(--spectrum-global-color-gray-700);
display: flex;
transition: color 0.13s ease-in-out, background-color 0.13s ease-in-out;
}
div:hover {
background-color: var(--spectrum-global-color-gray-200);
cursor: pointer;
}
.active,
.active:hover {
background-color: rgba(13, 102, 208, 0.1);
color: var(--spectrum-global-color-blue-600);
}
</style>

90
packages/client/src/components/preview/Indicator.svelte
View File

@ -1,5 +1,6 @@
<script>
import { Icon } from "@budibase/bbui"
import { GridDragModes } from "utils/grid"
export let top
export let left
@ -34,9 +35,20 @@
class:line
style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
class:withText={!!text}
class:vCompact={height < 40}
class:hCompact={width < 40}
>
{#if text || icon}
<div class="label" class:flipped class:line class:right={alignRight}>
<div
class="label"
class:flipped
class:line
class:right={alignRight}
draggable="true"
data-indicator="true"
data-drag-mode={GridDragModes.Move}
data-id={componentId}
>
{#if icon}
<Icon name={icon} size="S" color="white" />
{/if}
@ -50,8 +62,10 @@
{#if showResizeAnchors}
{#each AnchorSides as side}
<div
draggable="true"
class="anchor {side}"
draggable="true"
data-indicator="true"
data-drag-mode={GridDragModes.Resize}
data-side={side}
data-id={componentId}
>
@ -99,6 +113,7 @@
justify-content: flex-start;
align-items: center;
gap: 6px;
pointer-events: all;
}
.label.line {
transform: translateY(-50%);
@ -123,7 +138,7 @@
/* Anchor */
.anchor {
--size: 24px;
--size: 20px;
position: absolute;
width: var(--size);
height: var(--size);
@ -131,53 +146,84 @@
display: grid;
place-items: center;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
}
.anchor-inner {
width: 12px;
height: 12px;
width: calc(var(--size) / 2);
height: calc(var(--size) / 2);
background: white;
border: 2px solid var(--color);
pointer-events: none;
border-radius: 2px;
}
/* Thinner anchors for each edge */
.anchor.right,
.anchor.left {
height: calc(var(--size) * 2);
}
.anchor.top,
.anchor.bottom {
width: calc(var(--size) * 2);
}
.anchor.right .anchor-inner,
.anchor.left .anchor-inner {
height: calc(var(--size) * 1.2);
width: calc(var(--size) * 0.3);
}
.anchor.top .anchor-inner,
.anchor.bottom .anchor-inner {
width: calc(var(--size) * 1.2);
height: calc(var(--size) * 0.3);
}
/* Hide side indicators when they don't fit */
.indicator.hCompact .anchor.top,
.indicator.hCompact .anchor.bottom,
.indicator.vCompact .anchor.left,
.indicator.vCompact .anchor.right {
display: none;
}
/* Anchor positions */
.anchor.right {
right: calc(var(--size) / -2 - 1px);
top: calc(50% - var(--size) / 2);
left: calc(100% + 1px);
top: 50%;
cursor: e-resize;
}
.anchor.left {
left: calc(var(--size) / -2 - 1px);
top: calc(50% - var(--size) / 2);
left: -1px;
top: 50%;
cursor: w-resize;
}
.anchor.bottom {
left: calc(50% - var(--size) / 2 + 1px);
bottom: calc(var(--size) / -2 - 1px);
left: 50%;
top: calc(100% + 1px);
cursor: s-resize;
}
.anchor.top {
left: calc(50% - var(--size) / 2 + 1px);
top: calc(var(--size) / -2 - 1px);
left: 50%;
top: -1px;
cursor: n-resize;
}
.anchor.bottom-right {
right: calc(var(--size) / -2 - 1px);
bottom: calc(var(--size) / -2 - 1px);
top: 100%;
left: 100%;
cursor: se-resize;
}
.anchor.bottom-left {
left: calc(var(--size) / -2 - 1px);
bottom: calc(var(--size) / -2 - 1px);
left: 0;
top: 100%;
cursor: sw-resize;
}
.anchor.top-right {
right: calc(var(--size) / -2 - 1px);
top: calc(var(--size) / -2 - 1px);
left: 100%;
top: 0;
cursor: ne-resize;
}
.anchor.top-left {
left: calc(var(--size) / -2 - 1px);
top: calc(var(--size) / -2 - 1px);
left: 0;
top: 0;
cursor: nw-resize;
}
</style>

153
packages/client/src/components/preview/IndicatorSet.svelte
View File

@ -1,8 +1,8 @@
<script>
import { onMount, onDestroy } from "svelte"
import Indicator from "./Indicator.svelte"
import { domDebounce } from "utils/domDebounce"
import { builderStore } from "stores"
import { memo, Utils } from "@budibase/frontend-core"
export let componentId = null
export let color = null
@ -10,7 +10,10 @@
export let prefix = null
export let allowResizeAnchors = false
// Offset = 6 (clip-root padding) - 1 (half the border thickness)
const config = memo($$props)
const errorColor = "var(--spectrum-global-color-static-red-600)"
const mutationObserver = new MutationObserver(() => debouncedUpdate())
const defaultState = () => ({
// Cached props
componentId,
@ -29,38 +32,49 @@
let interval
let state = defaultState()
let nextState = null
let observingMutations = false
let updating = false
let observers = []
let intersectionObservers = []
let callbackCount = 0
let nextState
$: componentId, reset()
$: visibleIndicators = state.indicators.filter(x => x.visible)
$: offset = $builderStore.inBuilder ? 0 : 2
$: $$props, debouncedUpdate()
$: offset = $builderStore.inBuilder ? 5 : -1
$: config.set({
componentId,
color,
zIndex,
prefix,
allowResizeAnchors,
})
const checkInsideGrid = id => {
const component = document.getElementsByClassName(id)[0]
const domNode = component?.children[0]
// Update position when any props change
$: $config, debouncedUpdate()
// Ignore grid itself
if (domNode?.classList.contains("grid")) {
return false
}
const reset = () => {
mutationObserver.disconnect()
observingMutations = false
updating = false
}
return component?.parentNode
?.closest?.(".component")
?.childNodes[0]?.classList.contains("grid")
const observeMutations = element => {
mutationObserver.observe(element, {
attributes: true,
attributeFilter: ["style"],
})
observingMutations = true
}
const createIntersectionCallback = idx => entries => {
if (callbackCount >= observers.length) {
if (callbackCount >= intersectionObservers.length) {
return
}
nextState.indicators[idx].visible =
nextState.indicators[idx].insideModal ||
nextState.indicators[idx].insideSidePanel ||
entries[0].isIntersecting
if (++callbackCount === observers.length) {
if (++callbackCount === intersectionObservers.length) {
state = nextState
updating = false
}
@ -76,76 +90,95 @@
state = defaultState()
return
}
// Reset state
let elements = document.getElementsByClassName(componentId)
if (!elements.length) {
state = defaultState()
return
}
updating = true
callbackCount = 0
observers.forEach(o => o.disconnect())
observers = []
intersectionObservers.forEach(o => o.disconnect())
intersectionObservers = []
nextState = defaultState()
// Start observing mutations if this is the first time we've seen our
// component in the DOM
if (!observingMutations) {
observeMutations(elements[0])
}
// Check if we're inside a grid
if (allowResizeAnchors) {
nextState.insideGrid = checkInsideGrid(componentId)
nextState.insideGrid = elements[0]?.dataset.insideGrid === "true"
}
// Determine next set of indicators
const parents = document.getElementsByClassName(componentId)
if (parents.length) {
nextState.text = parents[0].dataset.name
if (nextState.prefix) {
nextState.text = `${nextState.prefix} ${nextState.text}`
}
if (parents[0].dataset.icon) {
nextState.icon = parents[0].dataset.icon
}
// Get text to display
nextState.text = elements[0].dataset.name
if (nextState.prefix) {
nextState.text = `${nextState.prefix} ${nextState.text}`
}
nextState.error = parents?.[0]?.classList.contains("error")
if (elements[0].dataset.icon) {
nextState.icon = elements[0].dataset.icon
}
nextState.error = elements[0].classList.contains("error")
// Batch reads to minimize reflow
const scrollX = window.scrollX
const scrollY = window.scrollY
// Extract valid children
// Sanity limit of 100 active indicators
const children = Array.from(
document.getElementsByClassName(`${componentId}-dom`)
)
// Sanity limit of active indicators
if (!nextState.insideGrid) {
elements = document.getElementsByClassName(`${componentId}-dom`)
}
elements = Array.from(elements)
.filter(x => x != null)
.slice(0, 100)
const multi = elements.length > 1
// If there aren't any nodes then reset
if (!children.length) {
if (!elements.length) {
state = defaultState()
updating = false
return
}
const device = document.getElementById("app-root")
const deviceBounds = device.getBoundingClientRect()
children.forEach((child, idx) => {
const callback = createIntersectionCallback(idx)
const threshold = children.length > 1 ? 1 : 0
const observer = new IntersectionObserver(callback, {
threshold,
root: device,
})
observer.observe(child)
observers.push(observer)
nextState.indicators = elements.map((element, idx) => {
const elBounds = element.getBoundingClientRect()
let indicator = {
top: Math.round(elBounds.top + scrollY - deviceBounds.top + offset),
left: Math.round(elBounds.left + scrollX - deviceBounds.left + offset),
width: Math.round(elBounds.width + 2),
height: Math.round(elBounds.height + 2),
visible: true,
}
const elBounds = child.getBoundingClientRect()
nextState.indicators.push({
top: elBounds.top + scrollY - deviceBounds.top - offset,
left: elBounds.left + scrollX - deviceBounds.left - offset,
width: elBounds.width + 4,
height: elBounds.height + 4,
visible: false,
insideSidePanel: !!child.closest(".side-panel"),
insideModal: !!child.closest(".modal-content"),
})
// If observing more than one node then we need to use an intersection
// observer to determine whether each indicator should be visible
if (multi) {
const callback = createIntersectionCallback(idx)
const intersectionObserver = new IntersectionObserver(callback, {
threshold: 1,
root: device,
})
intersectionObserver.observe(element)
intersectionObservers.push(intersectionObserver)
indicator.visible = false
indicator.insideSidePanel = !!element.closest(".side-panel")
indicator.insideModal = !!element.closest(".modal-content")
}
return indicator
})
// Immediately apply the update if we're just observing a single node
if (!multi) {
state = nextState
updating = false
}
}
const debouncedUpdate = domDebounce(updatePosition)
const debouncedUpdate = Utils.domDebounce(updatePosition)
onMount(() => {
debouncedUpdate()
@ -154,9 +187,9 @@
})
onDestroy(() => {
mutationObserver.disconnect()
clearInterval(interval)
document.removeEventListener("scroll", debouncedUpdate, true)
observers.forEach(o => o.disconnect())
})
</script>

271
packages/client/src/components/preview/SettingsBar.svelte
View File

@ -1,117 +1,180 @@
<script>
import { onMount, onDestroy } from "svelte"
import { onMount, onDestroy, getContext } from "svelte"
import SettingsButton from "./SettingsButton.svelte"
import GridStylesButton from "./GridStylesButton.svelte"
import SettingsColorPicker from "./SettingsColorPicker.svelte"
import SettingsPicker from "./SettingsPicker.svelte"
import { builderStore, componentStore, dndIsDragging } from "stores"
import { domDebounce } from "utils/domDebounce"
import { Utils, shouldDisplaySetting } from "@budibase/frontend-core"
import { getGridVar, GridParams, Devices } from "utils/grid"
const context = getContext("context")
const verticalOffset = 36
const horizontalOffset = 2
const observer = new MutationObserver(() => debouncedUpdate())
let top = 0
let left = 0
let interval
let self
let measured = false
let observing = false
let insideGrid = false
let gridHAlign
let gridVAlign
$: id = $builderStore.selectedComponentId
$: id, reset()
$: component = $componentStore.selectedComponent
$: definition = $componentStore.selectedComponentDefinition
$: instance = componentStore.actions.getComponentInstance(id)
$: state = $instance?.state
$: definition = $componentStore.selectedComponentDefinition
$: showBar =
definition?.showSettingsBar !== false &&
!$dndIsDragging &&
definition &&
!$state?.errorState
$: {
if (!showBar) {
measured = false
}
}
$: settings = getBarSettings(definition)
$: settings = getBarSettings(component, definition)
$: isRoot = id === $builderStore.screen?.props?._id
$: showGridStyles =
insideGrid &&
(definition?.grid?.hAlign !== "stretch" ||
definition?.grid?.vAlign !== "stretch")
$: mobile = $context.device.mobile
$: device = mobile ? Devices.Mobile : Devices.Desktop
$: gridHAlignVar = getGridVar(device, GridParams.HAlign)
$: gridVAlignVar = getGridVar(device, GridParams.VAlign)
const getBarSettings = definition => {
const reset = () => {
observer.disconnect()
measured = false
observing = false
insideGrid = false
}
const startObserving = domBoundary => {
observer.observe(domBoundary, {
attributes: true,
attributeFilter: ["style"],
})
observing = true
}
const getBarSettings = (component, definition) => {
let allSettings = []
definition?.settings?.forEach(setting => {
if (setting.section) {
if (setting.section && shouldDisplaySetting(component, setting)) {
allSettings = allSettings.concat(setting.settings || [])
} else {
allSettings.push(setting)
}
})
return allSettings.filter(setting => setting.showInBar && !setting.hidden)
return allSettings.filter(
setting =>
setting.showInBar &&
!setting.hidden &&
shouldDisplaySetting(component, setting)
)
}
const updatePosition = () => {
if (!showBar) {
return
}
const id = $builderStore.selectedComponentId
const parent = document.getElementsByClassName(id)?.[0]
const element = parent?.children?.[0]
// The settings bar is higher in the dom tree than the selection indicators
// as we want to be able to render the settings bar wider than the screen,
// or outside the screen.
// Therefore we use the clip root rather than the app root to determine
// its position.
const device = document.getElementById("clip-root")
if (element && self) {
// Batch reads to minimize reflow
const deviceBounds = device.getBoundingClientRect()
const elBounds = element.getBoundingClientRect()
const width = self.offsetWidth
const height = self.offsetHeight
const { scrollX, scrollY, innerWidth } = window
// Find DOM boundary and ensure it is valid
let domBoundary = document.getElementsByClassName(id)[0]
if (!domBoundary) {
return reset()
}
// Vertically, always render above unless no room, then render inside
let newTop = elBounds.top + scrollY - verticalOffset - height
if (newTop < deviceBounds.top - 50) {
newTop = deviceBounds.top - 50
}
if (newTop < 0) {
newTop = 0
}
const deviceBottom = deviceBounds.top + deviceBounds.height
if (newTop > deviceBottom - 44) {
newTop = deviceBottom - 44
}
// If we're inside a grid, allow time for buttons to render
const nextInsideGrid = domBoundary.dataset.insideGrid === "true"
if (nextInsideGrid && !insideGrid) {
insideGrid = true
return
} else {
insideGrid = nextInsideGrid
}
//If element is at the very top of the screen, put the bar below the element
if (elBounds.top < elBounds.height && elBounds.height < 80) {
newTop = elBounds.bottom + verticalOffset
}
// Get the correct DOM boundary depending if we're inside a grid or not
if (!insideGrid) {
domBoundary =
domBoundary.getElementsByClassName(`${id}-dom`)[0] ||
domBoundary.children?.[0]
}
if (!domBoundary || !self) {
return reset()
}
// Horizontally, try to center first.
// Failing that, render to left edge of component.
// Failing that, render to right edge of component,
// Failing that, render to window left edge and accept defeat.
let elCenter = elBounds.left + scrollX + elBounds.width / 2
let newLeft = elCenter - width / 2
// Start observing if required
if (!observing) {
startObserving(domBoundary)
}
// Batch reads to minimize reflow
const deviceEl = document.getElementById("clip-root")
const deviceBounds = deviceEl.getBoundingClientRect()
const elBounds = domBoundary.getBoundingClientRect()
const width = self.offsetWidth
const height = self.offsetHeight
const { scrollX, scrollY, innerWidth } = window
// Read grid metadata from data attributes
if (insideGrid) {
if (mobile) {
gridHAlign = domBoundary.dataset.gridMobileHAlign
gridVAlign = domBoundary.dataset.gridMobileVAlign
} else {
gridHAlign = domBoundary.dataset.gridDesktopHAlign
gridVAlign = domBoundary.dataset.gridDesktopVAlign
}
}
// Vertically, always render above unless no room, then render inside
let newTop = elBounds.top + scrollY - verticalOffset - height
if (newTop < deviceBounds.top - 50) {
newTop = deviceBounds.top - 50
}
if (newTop < 0) {
newTop = 0
}
const deviceBottom = deviceBounds.top + deviceBounds.height
if (newTop > deviceBottom - 44) {
newTop = deviceBottom - 44
}
//If element is at the very top of the screen, put the bar below the element
if (elBounds.top < elBounds.height && elBounds.height < 80) {
newTop = elBounds.bottom + verticalOffset
}
// Horizontally, try to center first.
// Failing that, render to left edge of component.
// Failing that, render to right edge of component,
// Failing that, render to window left edge and accept defeat.
let elCenter = elBounds.left + scrollX + elBounds.width / 2
let newLeft = elCenter - width / 2
if (newLeft < 0 || newLeft + width > innerWidth) {
newLeft = elBounds.left + scrollX - horizontalOffset
if (newLeft < 0 || newLeft + width > innerWidth) {
newLeft = elBounds.left + scrollX - horizontalOffset
newLeft = elBounds.right + scrollX - width + horizontalOffset
if (newLeft < 0 || newLeft + width > innerWidth) {
newLeft = elBounds.right + scrollX - width + horizontalOffset
if (newLeft < 0 || newLeft + width > innerWidth) {
newLeft = horizontalOffset
}
newLeft = horizontalOffset
}
}
// Only update state when things changes to minimize renders
if (Math.round(newTop) !== Math.round(top)) {
top = newTop
}
if (Math.round(newLeft) !== Math.round(left)) {
left = newLeft
}
measured = true
}
// Only update state when things changes to minimize renders
if (Math.round(newTop) !== Math.round(top)) {
top = newTop
}
if (Math.round(newLeft) !== Math.round(left)) {
left = newLeft
}
measured = true
}
const debouncedUpdate = domDebounce(updatePosition)
const debouncedUpdate = Utils.domDebounce(updatePosition)
onMount(() => {
debouncedUpdate()
@ -122,16 +185,85 @@
onDestroy(() => {
clearInterval(interval)
document.removeEventListener("scroll", debouncedUpdate, true)
reset()
})
</script>
{#if showBar}
<div
class="bar"
style="top: {top}px; left: {left}px;"
style="top:{top}px; left:{left}px;"
bind:this={self}
class:visible={measured}
>
{#if showGridStyles}
<GridStylesButton
style={gridHAlignVar}
value="start"
icon="AlignLeft"
title="Align left"
active={gridHAlign === "start"}
componentId={id}
/>
<GridStylesButton
style={gridHAlignVar}
value="center"
icon="AlignCenter"
title="Align center"
active={gridHAlign === "center"}
componentId={id}
/>
<GridStylesButton
style={gridHAlignVar}
value="end"
icon="AlignRight"
title="Align right"
active={gridHAlign === "end"}
componentId={id}
/>
<GridStylesButton
style={gridHAlignVar}
value="stretch"
icon="MoveLeftRight"
title="Stretch horizontally"
active={gridHAlign === "stretch"}
componentId={id}
/>
<div class="divider" />
<GridStylesButton
style={gridVAlignVar}
value="start"
icon="AlignTop"
title="Align top"
active={gridVAlign === "start"}
componentId={id}
/>
<GridStylesButton
style={gridVAlignVar}
value="center"
icon="AlignMiddle"
title="Align middle"
active={gridVAlign === "center"}
componentId={id}
/>
<GridStylesButton
style={gridVAlignVar}
value="end"
icon="AlignBottom"
title="Align bottom"
active={gridVAlign === "end"}
componentId={id}
/>
<GridStylesButton
style={gridVAlignVar}
value="stretch"
icon="MoveUpDown"
title="Stretch vertically"
active={gridVAlign === "stretch"}
componentId={id}
/>
<div class="divider" />
{/if}
{#each settings as setting, idx}
{#if setting.type === "select"}
{#if setting.barStyle === "buttons"}
@ -141,6 +273,7 @@
value={option.value}
icon={option.barIcon}
title={option.barTitle || option.label}
{component}
/>
{/each}
{:else}
@ -148,6 +281,7 @@
prop={setting.key}
options={setting.options}
label={setting.label}
{component}
/>
{/if}
{:else if setting.type === "boolean"}
@ -156,9 +290,10 @@
icon={setting.barIcon}
title={setting.barTitle || setting.label}
bool
{component}
/>
{:else if setting.type === "color"}
<SettingsColorPicker prop={setting.key} />
<SettingsColorPicker prop={setting.key} {component} />
{/if}
{#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
<div class="divider" />

12
packages/client/src/components/preview/SettingsButton.svelte
View File

@ -1,17 +1,19 @@
<script>
import { Icon } from "@budibase/bbui"
import { builderStore, componentStore } from "stores"
import { builderStore } from "stores"
import { createEventDispatcher } from "svelte"
export let prop
export let value
export let icon
export let title
export let rotate = false
export let bool = false
export let active = false
export let component
const dispatch = createEventDispatcher()
$: currentValue = $componentStore.selectedComponent?.[prop]
$: currentValue = component?.[prop]
$: active = prop && (bool ? !!currentValue : currentValue === value)
</script>
@ -19,7 +21,6 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
{title}
class:rotate
class:active
on:click={() => {
if (prop) {
@ -49,7 +50,4 @@
background-color: rgba(13, 102, 208, 0.1);
color: var(--spectrum-global-color-blue-600);
}
.rotate {
transform: rotate(90deg);
}
</style>

5
packages/client/src/components/preview/SettingsColorPicker.svelte
View File

@ -1,10 +1,11 @@
<script>
import { ColorPicker } from "@budibase/bbui"
import { builderStore, componentStore } from "stores"
import { builderStore } from "stores"
export let prop
export let component
$: currentValue = $componentStore.selectedComponent?.[prop]
$: currentValue = component?.[prop]
</script>
<div>

5
packages/client/src/components/preview/SettingsPicker.svelte
View File

@ -1,12 +1,13 @@
<script>
import { Select } from "@budibase/bbui"
import { builderStore, componentStore } from "stores"
import { builderStore } from "stores"
export let prop
export let options
export let label
export let component
$: currentValue = $componentStore.selectedComponent?.[prop]
$: currentValue = component?.[prop]
</script>
<div>

3
packages/client/src/constants.js
View File

@ -15,3 +15,6 @@ export const ActionTypes = {
export const DNDPlaceholderID = "dnd-placeholder"
export const ScreenslotType = "screenslot"
export const GridRowHeight = 24
export const GridColumns = 12
export const GridSpacing = 4

13
packages/client/src/stores/builder.js
View File

@ -41,13 +41,20 @@ const createBuilderStore = () => {
eventStore.actions.dispatchEvent("update-prop", { prop, value })
},
updateStyles: async (styles, id) => {
await eventStore.actions.dispatchEvent("update-styles", { styles, id })
await eventStore.actions.dispatchEvent("update-styles", {
styles,
id,
})
},
keyDown: (key, ctrlKey) => {
eventStore.actions.dispatchEvent("key-down", { key, ctrlKey })
},
duplicateComponent: id => {
eventStore.actions.dispatchEvent("duplicate-component", { id })
duplicateComponent: (id, mode = "below", selectComponent = true) => {
eventStore.actions.dispatchEvent("duplicate-component", {
id,
mode,
selectComponent,
})
},
deleteComponent: id => {
eventStore.actions.dispatchEvent("delete-component", { id })

3
packages/client/src/stores/components.js
View File

@ -142,9 +142,6 @@ const createComponentStore = () => {
}
const getComponentInstance = id => {
if (!id) {
return null
}
return derived(store, $store => $store.mountedComponents[id])
}

22
packages/client/src/stores/screens.js
View File

@ -129,29 +129,30 @@ const createScreenStore = () => {
// If we don't have a legacy custom layout, build a layout structure
// from the screen navigation settings
if (!activeLayout) {
let navigationSettings = {
let layoutSettings = {
navigation: "None",
pageWidth: activeScreen?.width || "Large",
embedded: $appStore.embedded,
}
if (activeScreen?.showNavigation) {
navigationSettings = {
...navigationSettings,
layoutSettings = {
...layoutSettings,
...($builderStore.navigation || $appStore.application?.navigation),
}
// Default navigation to top
if (!navigationSettings.navigation) {
navigationSettings.navigation = "Top"
if (!layoutSettings.navigation) {
layoutSettings.navigation = "Top"
}
// Default title to app name
if (!navigationSettings.title && !navigationSettings.hideTitle) {
navigationSettings.title = $appStore.application?.name
if (!layoutSettings.title && !layoutSettings.hideTitle) {
layoutSettings.title = $appStore.application?.name
}
// Default to the org logo
if (!navigationSettings.logoUrl) {
navigationSettings.logoUrl = $orgStore?.logoUrl
if (!layoutSettings.logoUrl) {
layoutSettings.logoUrl = $orgStore?.logoUrl
}
}
activeLayout = {
@ -173,8 +174,7 @@ const createScreenStore = () => {
},
},
],
...navigationSettings,
embedded: $appStore.embedded,
...layoutSettings,
},
}
}

14
packages/client/src/utils/domDebounce.js
View File

@ -1,14 +0,0 @@
export const domDebounce = (callback, extractParams = x => x) => {
let active = false
let lastParams
return (...params) => {
lastParams = extractParams(...params)
if (!active) {
active = true
requestAnimationFrame(() => {
callback(lastParams)
active = false
})
}
}
}

183
packages/client/src/utils/grid.js Normal file
View File

@ -0,0 +1,183 @@
import { GridSpacing, GridRowHeight } from "constants"
import { builderStore } from "stores"
import { buildStyleString } from "utils/styleable.js"
/**
* We use CSS variables on components to control positioning and layout of
* components inside grids.
* --grid-[mobile/desktop]-[row/col]-[start-end]: for positioning
* --grid-[mobile/desktop]-[h/v]-align: for layout of inner components within
* the components grid bounds
*
* Component definitions define their default layout preference via the
* `grid.hAlign` and `grid.vAlign` keys in the manifest.
*
* We also apply grid-[mobile/desktop]-grow CSS classes to component wrapper
* DOM nodes to use later in selectors, to control the sizing of children.
*/
// Enum representing the different CSS variables we use for grid metadata
export const GridParams = {
HAlign: "h-align",
VAlign: "v-align",
ColStart: "col-start",
ColEnd: "col-end",
RowStart: "row-start",
RowEnd: "row-end",
}
// Classes used in selectors inside grid containers to control child styles
export const GridClasses = {
DesktopFill: "grid-desktop-grow",
MobileFill: "grid-mobile-grow",
}
// Enum for device preview type, included in grid CSS variables
export const Devices = {
Desktop: "desktop",
Mobile: "mobile",
}
export const GridDragModes = {
Resize: "resize",
Move: "move",
}
// Builds a CSS variable name for a certain piece of grid metadata
export const getGridVar = (device, param) => `--grid-${device}-${param}`
// Determines whether a JS event originated from immediately within a grid
export const isGridEvent = e => {
return (
e.target.dataset?.indicator === "true" ||
e.target
.closest?.(".component")
?.parentNode.closest(".component")
?.childNodes[0]?.classList?.contains("grid")
)
}
// Svelte action to apply required class names and styles to our component
// wrappers
export const gridLayout = (node, metadata) => {
let selectComponent
// Applies the required listeners, CSS and classes to a component DOM node
const applyMetadata = metadata => {
const {
id,
styles,
interactive,
errored,
definition,
draggable,
insideGrid,
ignoresLayout,
} = metadata
if (!insideGrid) {
return
}
// If this component ignores layout, flag it as such so that we can avoid
// selecting it later
if (ignoresLayout) {
node.classList.add("ignores-layout")
return
}
// Callback to select the component when clicking on the wrapper
selectComponent = e => {
e.stopPropagation()
builderStore.actions.selectComponent(id)
}
// Determine default width and height of component
let width = errored ? 500 : definition?.size?.width || 200
let height = errored ? 60 : definition?.size?.height || 200
width += 2 * GridSpacing
height += 2 * GridSpacing
let vars = {
"--default-width": width,
"--default-height": height,
}
// Generate defaults for all grid params
const defaults = {
[GridParams.HAlign]: definition?.grid?.hAlign || "stretch",
[GridParams.VAlign]: definition?.grid?.vAlign || "center",
[GridParams.ColStart]: 1,
[GridParams.ColEnd]:
"round(up, calc((var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) + 1))",
[GridParams.RowStart]: 1,
[GridParams.RowEnd]: Math.max(2, Math.ceil(height / GridRowHeight) + 1),
}
// Specify values for all grid params for all devices, and strip these CSS
// variables from the styles being applied to the inner component, as we
// want to apply these to the wrapper instead
for (let param of Object.values(GridParams)) {
let dVar = getGridVar(Devices.Desktop, param)
let mVar = getGridVar(Devices.Mobile, param)
vars[dVar] = styles[dVar] ?? styles[mVar] ?? defaults[param]
vars[mVar] = styles[mVar] ?? styles[dVar] ?? defaults[param]
}
// Apply some overrides depending on component state
if (errored) {
vars[getGridVar(Devices.Desktop, GridParams.HAlign)] = "stretch"
vars[getGridVar(Devices.Mobile, GridParams.HAlign)] = "stretch"
vars[getGridVar(Devices.Desktop, GridParams.VAlign)] = "stretch"
vars[getGridVar(Devices.Mobile, GridParams.VAlign)] = "stretch"
}
// Apply some metadata to data attributes to speed up lookups
const addDataTag = (tagName, device, param) => {
const val = `${vars[getGridVar(device, param)]}`
if (node.dataset[tagName] !== val) {
node.dataset[tagName] = val
}
}
addDataTag("gridDesktopRowEnd", Devices.Desktop, GridParams.RowEnd)
addDataTag("gridMobileRowEnd", Devices.Mobile, GridParams.RowEnd)
addDataTag("gridDesktopHAlign", Devices.Desktop, GridParams.HAlign)
addDataTag("gridMobileHAlign", Devices.Mobile, GridParams.HAlign)
addDataTag("gridDesktopVAlign", Devices.Desktop, GridParams.VAlign)
addDataTag("gridMobileVAlign", Devices.Mobile, GridParams.VAlign)
if (node.dataset.insideGrid !== true) {
node.dataset.insideGrid = true
}
// Apply all CSS variables to the wrapper
node.style = buildStyleString(vars)
// Add a listener to select this node on click
if (interactive) {
node.addEventListener("click", selectComponent, false)
}
// Add draggable attribute
node.setAttribute("draggable", !!draggable)
}
// Removes the previously set up listeners
const removeListeners = () => {
// By checking if this is defined we can avoid trying to remove event
// listeners on every component
if (selectComponent) {
node.removeEventListener("click", selectComponent, false)
selectComponent = null
}
}
applyMetadata(metadata)
return {
update(newMetadata) {
removeListeners()
applyMetadata(newMetadata)
},
destroy() {
removeListeners()
},
}
}

10
packages/client/src/utils/styleable.js
View File

@ -3,13 +3,13 @@ import { builderStore } from "stores"
/**
* Helper to build a CSS string from a style object.
*/
const buildStyleString = (styleObject, customStyles) => {
export const buildStyleString = (styleObject, customStyles) => {
let str = ""
Object.entries(styleObject || {}).forEach(([style, value]) => {
if (style && value != null) {
str += `${style}: ${value}; `
for (let key of Object.keys(styleObject || {})) {
if (styleObject[key] != null) {
str += `${key}:${styleObject[key]};`
}
})
}
return str + (customStyles || "")
}

1
packages/frontend-core/src/components/ClientAppSkeleton.svelte
View File

@ -58,7 +58,6 @@
height: 100%;
display: flex;
flex-direction: column;
border-radius: 4px;
overflow: hidden;
background-color: var(--spectrum-global-color-gray-200);
}

1
packages/frontend-core/src/utils/index.js
View File

@ -9,3 +9,4 @@ export { memo, derivedMemo } from "./memo"
export { createWebsocket } from "./websocket"
export * from "./download"
export * from "./theme"
export * from "./settings"

25
packages/frontend-core/src/utils/memo.js
View File

@ -4,32 +4,23 @@ import { writable, get, derived } from "svelte/store"
// subscribed children will only fire when a new value is actually set
export const memo = initialValue => {
const store = writable(initialValue)
let currentJSON = null
const tryUpdateValue = (newValue, currentValue) => {
// Sanity check for primitive equality
if (currentValue === newValue) {
return
}
// Otherwise deep compare via JSON stringify
const currentString = JSON.stringify(currentValue)
const newString = JSON.stringify(newValue)
if (currentString !== newString) {
const tryUpdateValue = newValue => {
const newJSON = JSON.stringify(newValue)
if (newJSON !== currentJSON) {
store.set(newValue)
currentJSON = newJSON
}
}
return {
subscribe: store.subscribe,
set: newValue => {
const currentValue = get(store)
tryUpdateValue(newValue, currentValue)
},
set: tryUpdateValue,
update: updateFn => {
const currentValue = get(store)
let mutableCurrentValue = JSON.parse(JSON.stringify(currentValue))
let mutableCurrentValue = JSON.parse(currentJSON)
const newValue = updateFn(mutableCurrentValue)
tryUpdateValue(newValue, currentValue)
tryUpdateValue(newValue)
},
}
}

43
packages/frontend-core/src/utils/settings.js Normal file
View File

@ -0,0 +1,43 @@
import { helpers } from "@budibase/shared-core"
// Util to check if a setting can be rendered for a certain instance, based on
// the "dependsOn" metadata in the manifest
export const shouldDisplaySetting = (instance, setting) => {
let dependsOn = setting.dependsOn
if (dependsOn && !Array.isArray(dependsOn)) {
dependsOn = [dependsOn]
}
if (!dependsOn?.length) {
return true
}
// Ensure all conditions are met
return dependsOn.every(condition => {
let dependantSetting = condition
let dependantValues = null
let invert = !!condition.invert
if (typeof condition === "object") {
dependantSetting = condition.setting
dependantValues = condition.value
}
if (!dependantSetting) {
return false
}
// Ensure values is an array
if (!Array.isArray(dependantValues)) {
dependantValues = [dependantValues]
}
// If inverting, we want to ensure that we don't have any matches.
// If not inverting, we want to ensure that we do have any matches.
const currentVal = helpers.deepGet(instance, dependantSetting)
const anyMatches = dependantValues.some(dependantVal => {
if (dependantVal == null) {
return currentVal != null && currentVal !== false && currentVal !== ""
}
return dependantVal === currentVal
})
return anyMatches !== invert
})
}

5
yarn.lock
View File

@ -5127,6 +5127,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.2.12.tgz#9b08f23d5aa881b3441af7757800c7173e5685ff"
integrity sha512-rPFUW9SSW4+3/UJ3UrtY2/l3sQvlqB1fqxHLPDjgykvbfrnMejcCTNV4ZrFNHXpE/6+kGnk+yVViSPtWGwJzkA==
"@spectrum-css/tag@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@spectrum-css/tag/-/tag-3.0.0.tgz#b2e335dc526713b83f3e995e8d1d4fc84a3fc4df"
integrity sha512-a9z7ZTAWPonkWRNY5kxVaO6bxu9de3qUZWJ9Bl1YBlwWc8Fy1L7XqT4Wq3pW+4sktUbUUqqPYPIXK9xEFDofEw==
"@spectrum-css/tags@3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.2.tgz#5bf35fb79c97cd9344de485bd4626ad5b9f07757"