1
0
Fork 0
mirror of synced 2024-06-14 08:24:48 +12:00

adds drag-and-drop to the action drawer

This commit is contained in:
Keviin Åberg Kultalahti 2021-02-26 17:11:14 +01:00
parent 188f2b74d7
commit 5d26724e54
3 changed files with 33 additions and 816 deletions

View file

@ -2,6 +2,7 @@
import FlowItem from "./FlowItem.svelte"
import Arrow from "./Arrow.svelte"
import { flip } from "svelte/animate"
import {dndzone} from "svelte-dnd-action";
import { fade, fly } from "svelte/transition"
export let automation
@ -17,14 +18,22 @@
blocks = blocks.concat(automation.definition.steps || [])
}
}
const flipDurationMs = 300;
function handleDndConsider(e) {
blocks = e.detail.items;
}
function handleDndFinalize(e) {
blocks = e.detail.items;
}
</script>
{#if !blocks.length}<i>Add a trigger to your automation to get started</i>{/if}
<section class="canvas">
<section class="canvas" use:dndzone={{items: blocks, flipDurationMs}} on:consider={handleDndConsider} on:finalize={handleDndFinalize}>
{#each blocks as block, idx (block.id)}
<div
class="block"
animate:flip={{ duration: 600 }}
animate:flip={{ duration: flipDurationMs}}
in:fade|local
out:fly|local={{ x: 100 }}>
<FlowItem {onSelect} {block} />

View file

@ -9,9 +9,13 @@
const EVENT_TYPE_KEY = "##eventHandlerType"
export let actions
actions = actions.map((action, i) => {
return {...action, id: i}
})
// dndzone needs an id on the array items, so this adds some temporary ones.
if (actions) {
actions = actions.map((action, i) => {
return {...action, id: i}
})
}
let addActionButton
let addActionDropdown
@ -37,7 +41,7 @@
const newAction = {
parameters: {},
[EVENT_TYPE_KEY]: actionType.name,
id: actions.length + 1
id: actions ? actions.length + 1 : 0
}
if (!actions) {
actions = []

File diff suppressed because it is too large Load diff