Skip to content

Commit

Permalink
add disable node
Browse files Browse the repository at this point in the history 
add handle errors gracefully

fix #21
fix #20
fix #23
  • Loading branch information
@Armaldio
Armaldio committed Oct 1, 2024
1 parent 665562c commit 451abb2
Show file tree
Hide file tree
Showing 7 changed files with 205 additions and 86 deletions.
133 changes: 100 additions & 33 deletions src/renderer/components/nodes/EditorNodeAction.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,57 @@
<div
ref="$node"
class="node-action"
:class="{ active: activeNode?.uid === value.uid, error: errors.length > 0 }"
@click="showSidebar = true"
:class="{
active: activeNode?.uid === value.uid,
error: errors.length > 0,
disabled: value.disabled,
}"
>
<!--<div v-if="isHovered" class="hover-overlay">
<div class="hover-overlay">
<div class="hover-overlay-content">
<Button>
<template #icon>
<i class="mdi mdi-pencil"></i>
</template>
</Button>
<Button>
<template #icon>
<i class="mdi mdi-trash-can"></i>
</template>
</Button>
<Button>
<template #icon>
<i class="mdi mdi-content-copy"></i>
</template>
</Button>
<Button>
<template #icon>
<i class="mdi mdi-arrow-up"></i>
</template>
</Button>
<Button>
<template #icon>
<i class="mdi mdi-arrow-down"></i>
</template>
</Button>
<div class="left">
<Button @click="swapNodes(index, 'up')">
<template #icon>
<i class="mdi mdi-arrow-up"></i>
</template>
</Button>
<Button @click="swapNodes(index, 'down')">
<template #icon>
<i class="mdi mdi-arrow-down"></i>
</template>
</Button>
</div>
<div class="center">
<Button @click="showSidebar = true">
<template #icon>
<i class="mdi mdi-pencil"></i>
</template>
</Button>
</div>
<div class="right">
<Button v-if="value.disabled" @click="enableNode(value)">
<template #icon>
<i class="mdi mdi-toggle-switch-off-outline"></i>
</template>
</Button>
<Button v-else @click="disableNode(value)">
<template #icon>
<i class="mdi mdi-toggle-switch"></i>
</template>
</Button>
<Button @click="cloneNode(value, index + 1)">
<template #icon>
<i class="mdi mdi-content-copy"></i>
</template>
</Button>
<Button @click="removeNode(value.uid)">
<template #icon>
<i class="mdi mdi-trash-can"></i>
</template>
</Button>
</div>
</div>
</div>-->
</div>

<div class="vertical">
<PluginIcon :icon="pluginDefinition?.icon"></PluginIcon>
Expand Down Expand Up @@ -100,13 +119,16 @@ import DOMPurify from 'dompurify'
import { makeResolvedParams } from '@renderer/utils/evaluator'
import { ValidationError } from '@renderer/models/error'
import AddNodeButton from '../AddNodeButton.vue'
import { useElementHover } from '@vueuse/core'
const props = defineProps({
value: {
type: Object as PropType<BlockAction>,
required: true
},
index: {
type: Number,
required: true
},
path: {
type: Array as PropType<string[]>,
required: true
Expand All @@ -130,7 +152,17 @@ const $node = ref<HTMLDivElement>()
// const isHovered = useElementHover($node)
const editor = useEditor()
const { getNodeDefinition, setBlockValue, addNode, getPluginDefinition, removeNode } = editor
const {
getNodeDefinition,
setBlockValue,
addNode,
getPluginDefinition,
removeNode,
swapNodes,
cloneNode,
disableNode,
enableNode,
} = editor
const { activeNode } = storeToRefs(editor)
const nodeDefinition = computed(() => {
Expand All @@ -141,7 +173,6 @@ const pluginDefinition = computed(() => {
return getPluginDefinition(value.value.origin.pluginId)
})
const onValueChanged = (newValue: unknown, paramKey: string) => {
setBlockValue(value.value.uid, {
...value.value,
Expand Down Expand Up @@ -207,7 +238,7 @@ watchDebounced(
const showSidebar = ref(false)
</script>

<style scoped>
<style scoped lang="scss">
.condition-branches {
display: flex;
}
Expand All @@ -224,7 +255,21 @@ const showSidebar = ref(false)
padding: 16px;
border-radius: 4px;
width: fit-content;
min-width: 300px;
background-color: white;
display: flex;
&.disabled {
// background-color: #eee;
// color: white;
opacity: .5;
}
&:hover {
.hover-overlay {
opacity: 1;
}
}
box-shadow:
0 0 #0000,
Expand Down Expand Up @@ -268,18 +313,40 @@ const showSidebar = ref(false)
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
margin: 0 auto;
transition: opacity 0.25s;
.hover-overlay-content {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 8px;
width: 100%;
margin: 0 8px;
.left,
.center,
.right {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
button {
// border: 1px solid #5f60b7;
}
}
}
}
</style>
75 changes: 43 additions & 32 deletions src/renderer/pages/editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,47 +225,58 @@ const run = async () => {
const { setActiveNode } = instance
setIsRunning(true)
await processGraph({
graph: klona(nodes.value),
definitions: pluginDefinitions.value,
variables: variables.value,
context: {},
steps: {},
onNodeEnter: (node) => {
setActiveNode(node)
},
onNodeExit: () => {
setActiveNode()
},
onExecuteItem: async (node, params, steps) => {
/* if (node.type === 'condition') {
try {
await processGraph({
graph: klona(nodes.value),
definitions: pluginDefinitions.value,
variables: variables.value,
context: {},
steps: {},
onNodeEnter: (node) => {
setActiveNode(node)
},
onNodeExit: () => {
setActiveNode()
},
onExecuteItem: async (node, params, steps) => {
/* if (node.type === 'condition') {
return api.execute('condition:execute', {
nodeId: node.origin.nodeId,
pluginId: node.origin.pluginId,
params,
steps
})
} else */ if (node.type === 'action') {
const result = await api.execute('action:execute', {
nodeId: node.origin.nodeId,
pluginId: node.origin.pluginId,
params,
steps
})
return result
} else {
throw new Error('Unhandled type ' + node.type)
const result = await api.execute('action:execute', {
nodeId: node.origin.nodeId,
pluginId: node.origin.pluginId,
params,
steps
})
return result
} else {
throw new Error('Unhandled type ' + node.type)
}
}
}
})
})
toast.add({
summary: 'Execution done',
life: 10_000,
severity: 'success',
detail: 'Your project has been executed successfully'
})
} catch (e) {
console.error('error while executing process')
toast.add({
summary: 'Execution failed',
life: 10_000,
severity: 'error',
detail: 'Project has encountered an error'
})
}
setIsRunning(false)
toast.add({
summary: 'Execution done',
life: 10_000,
severity: 'success',
detail: 'Your project has been executed successfully'
})
}
const isSaving = ref(false)
Expand Down
4 changes: 1 addition & 3 deletions src/renderer/pages/nodes-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
v-if="node.type === 'action'"
:path="[...path, (startingIndex + index).toString()]"
:value="node"
:index="index"
:steps="steps"
:errors="errors[node.uid]"
></EditorNodeAction>
Expand Down Expand Up @@ -116,6 +117,3 @@ const { nodes, path } = toRefs(props)
color: #333;
}
</style>
isConditionDefinition, isEventDefinition, isLoopDefinition, , BlockCondition, BlockEvent,
BlockLoopimport { nanoid } from 'nanoid' isConditionDefinition, isEventDefinition, isLoopDefinition,
, BlockCondition, BlockEvent, BlockLoop
Loading

0 comments on commit 451abb2

Please sign in to comment.