{#if Object.keys(blockRefs).length} {#each blocks as block, idx (block.id)} @@ -179,9 +179,6 @@ display: flex; flex-direction: column; align-items: center; - max-height: 100%; - height: 100%; - width: 100%; } .header-left { @@ -221,15 +218,26 @@ display: flex; justify-content: space-between; align-items: center; - padding-left: var(--spacing-l); - transition: background 130ms ease-out; + padding: var(--spacing-l); flex: 0 0 60px; padding-right: var(--spacing-xl); + position: absolute; + width: 100%; + box-sizing: border-box; + pointer-events: none; + } + + .header > * { + pointer-events: auto; } .controls { display: flex; - gap: var(--spacing-xl); + gap: var(--spacing-l); + } + + .controls .toggle-active :global(.spectrum-Switch-label) { + margin-right: 0px; } .buttons { @@ -243,11 +251,6 @@ cursor: pointer; } - .disabled { - pointer-events: none; - color: var(--spectrum-global-color-gray-500) !important; - } - .group { border-radius: 4px; display: flex; diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index f55feb97ed..95df59b249 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -4,7 +4,7 @@ permissions, selectedAutomation, tables, - } from "stores/builder" + } from "@/stores/builder" import { Icon, Divider, @@ -16,16 +16,16 @@ } from "@budibase/bbui" import { sdk } from "@budibase/shared-core" import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte" - import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte" + import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte" import FlowItemHeader from "./FlowItemHeader.svelte" - import RoleSelect from "components/design/settings/controls/RoleSelect.svelte" - import { ActionStepID, TriggerStepID } from "constants/backend/automations" + import RoleSelect from "@/components/design/settings/controls/RoleSelect.svelte" + import { ActionStepID, TriggerStepID } from "@/constants/backend/automations" import { AutomationStepType } from "@budibase/types" import FlowItemActions from "./FlowItemActions.svelte" - import DragHandle from "components/design/settings/controls/DraggableList/drag-handle.svelte" + import DragHandle from "@/components/design/settings/controls/DraggableList/drag-handle.svelte" import { getContext } from "svelte" import DragZone from "./DragZone.svelte" - import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte" + import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte" export let block export let blockRef @@ -51,8 +51,13 @@ if (!blockEle) { return } - const { width, height } = blockEle.getBoundingClientRect() - blockDims = { width: width / $view.scale, height: height / $view.scale } + const { width, height, top, left } = blockEle.getBoundingClientRect() + blockDims = { + width: width / $view.scale, + height: height / $view.scale, + top, + left, + } } const loadSteps = blockRef => { @@ -174,12 +179,21 @@ e.stopPropagation() + updateBlockDims() + + const { clientX, clientY } = e view.update(state => ({ ...state, moveStep: { id: block.id, offsetX: $pos.x, offsetY: $pos.y, + w: blockDims.width, + h: blockDims.height, + mouse: { + x: Math.max(Math.round(clientX - blockDims.left), 0), + y: Math.max(Math.round(clientY - blockDims.top), 0), + }, }, })) } @@ -386,6 +400,7 @@ width: 480px; font-size: 16px; border-radius: 4px; + cursor: default; } .block .wrap { width: 100%; diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte index 1542c65650..e3014f3e56 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemActions.svelte @@ -47,5 +47,6 @@ display: flex; gap: var(--spacing-m); padding: 8px 12px; + cursor: default; } diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte index 0aa43f8e04..e81d6d0f5c 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte @@ -1,9 +1,9 @@ diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte index fa89ab9393..c44ba8a93a 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationNavItem.svelte @@ -4,12 +4,12 @@ userSelectedResourceMap, automationStore, contextMenuStore, - } from "stores/builder" + } from "@/stores/builder" import { notifications, Icon } from "@budibase/bbui" import { sdk } from "@budibase/shared-core" - import ConfirmDialog from "components/common/ConfirmDialog.svelte" - import UpdateAutomationModal from "components/automation/AutomationPanel/UpdateAutomationModal.svelte" - import NavItem from "components/common/NavItem.svelte" + import ConfirmDialog from "@/components/common/ConfirmDialog.svelte" + import UpdateAutomationModal from "@/components/automation/AutomationPanel/UpdateAutomationModal.svelte" + import NavItem from "@/components/common/NavItem.svelte" export let automation export let icon diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte index a26efdf243..f84130f5e7 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte @@ -1,11 +1,11 @@
-