{
const nodes = generatePositionedNodes(stages.value);
- const special = createSpecialNode('from_any', { x: 600, y: -200 }, '#EF4444', 'From Any', selectStage, isTransitionMode.value, true);
+ const special = createSpecialNode('from_any', { x: 600, y: -200 }, '#ffff00', 'From Any', selectStage, false);
return [...nodes.map((n) => ({
...n,
data: {
...n.data,
isSelected: selectedStage.value === parseInt(n.id, 10),
onSelect: () => selectStage(n.id),
+ onEscape: () => clearSelection(),
onEdit: () => editStage(n.id),
onDelete: () => showDeleteModal('stage', n.id),
},
- // draggable: !isTransitionMode.value,
})), special];
});
const styledEdges = computed(() => generateStyledEdges(transitions.value, {
- transitionMode: isTransitionMode.value,
selectedId: selectedTransition.value,
}).map((edge) => ({
...edge,
data: {
...edge.data,
onSelect: () => selectTransition(edge.id),
+ onEscape: () => clearSelection(),
onDelete: () => showDeleteModal('transition', edge.id),
onEdit: () => editTransition(edge.id),
},
@@ -375,7 +368,6 @@ export default {
if (selectedStage.value) showDeleteModal('stage', selectedStage.value);
else if (selectedTransition.value) showDeleteModal('transition', selectedTransition.value);
},
- toggleMode: toggleTransitionMode,
undo: () => {
if (!store.getters.canUndo) {
return;
@@ -434,15 +426,6 @@ export default {
saveNodePosition();
});
- // window.WorkflowGraph.Event.fire('Error', { error: error.message });
- window.WorkflowGraph.Event.listen('Error', (event) => {
- if (window.Joomla && window.Joomla.renderMessages) {
- window.Joomla.renderMessages({
- error: [event.error.message],
- });
- }
- });
-
let isRestoringViewport = false;
watch([loading, error], () => {
setTimeout(() => {
@@ -485,13 +468,11 @@ export default {
positionedNodes,
styledEdges,
liveRegion,
- isTransitionMode,
handleConnect,
selectEdge,
handleDeleteConfirm,
addStage,
addTransition,
- toggleTransitionMode,
clearSelection,
handleNodeDragStop,
};
diff --git a/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue b/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
index 11e3c0a4346..8b336ade898 100644
--- a/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/edges/CustomEdge.vue
@@ -9,60 +9,136 @@
:stroke-dasharray="style?.strokeDasharray"
:marker-end="markerEnd"
/>
-
-
+
+
+
+
-
+
+
+
{{ data?.title }}
+
+
+
+
+
+
+
+
+ {{ data?.title }}
+
+
@@ -113,17 +189,28 @@ export default {
default: () => ({}),
},
},
+ data() {
+ return {
+ showActions: false,
+ isHovered: false,
+ maxHeight: 100,
+ maxWidth: 100,
+ currentMenuIndex: -1,
+ blurTimeout: null,
+ hoverTimeout: null,
+ };
+ },
computed: {
edgeData() {
return getSmoothStepPath({
sourceX: this.sourceX,
sourceY: this.sourceY,
- sourcePosition: this.sourcePosition,
targetX: this.targetX,
targetY: this.targetY,
+ sourcePosition: this.sourcePosition,
+ targetPosition: this.targetPosition,
centerX: (this.sourceX + this.targetX) / 2,
centerY: (this.sourceY + this.targetY) / 2,
- targetPosition: this.targetPosition,
borderRadius: 10,
offset: 10,
});
@@ -132,29 +219,95 @@ export default {
return this.edgeData[0];
},
labelX() {
- return this.edgeData[1] + ((this.data?.offsetIndex < 0 ? this.data?.offsetIndex : 0) || 0) * 100;
+ return this.edgeData[1] + ((this.data?.offsetIndex < 0 ? this.data?.offsetIndex : 0) || 0) * this.maxWidth;
},
labelY() {
return this.edgeData[2] + ((this.data?.offsetIndex > 0 ? this.data?.offsetIndex : 0) || 0) * 75;
},
- },
- methods: {
- onEdgeKeydown(e) {
- if (e.key === 'Enter' || e.key === ' ') {
- this.data.onSelect();
- e.preventDefault();
+ menuItems() {
+ const items = [];
+ if (this.data?.permissions?.edit && this.$refs.editButton) {
+ items.push(this.$refs.editButton);
}
- if ((e.key === 'e' || e.key === 'E') && this.data?.isTransitionMode) {
- this.data.onEdit();
- e.preventDefault();
+ if (this.data?.permissions?.delete && this.$refs.deleteButton) {
+ items.push(this.$refs.deleteButton);
}
- if ((e.key === 'Delete' || e.key === 'Backspace') && this.data?.isTransitionMode) {
- this.data.onDelete?.();
- e.preventDefault();
+ return items;
+ },
+ },
+ watch: {
+ 'data.title': {
+ handler: 'updateLabelWidth',
+ immediate: true,
+ },
+ showActions(newVal) {
+ if (!newVal) {
+ this.currentMenuIndex = -1;
+ }
+ },
+ },
+ mounted() {
+ this.updateLabelWidth();
+ },
+ beforeUnmount() {
+ if (this.blurTimeout) clearTimeout(this.blurTimeout);
+ if (this.hoverTimeout) clearTimeout(this.hoverTimeout);
+ },
+ methods: {
+ toggleActions() {
+ this.showActions = !this.showActions;
+ if (this.showActions) {
+ this.$nextTick(() => this.focusFirstMenuItem());
}
},
- onEdgeFocus() {},
- onEdgeBlur() {},
+ openActions() {
+ this.data.onSelect?.();
+ this.showActions = true;
+ this.isHovered = false;
+ },
+ closeActions() {
+ this.data.onEscape?.();
+ clearTimeout(this.hoverTimeout);
+ clearTimeout(this.blurTimeout);
+ this.showActions = false;
+ },
+ handleEdit() {
+ this.closeActions();
+ this.data?.onEdit?.();
+ },
+ handleDelete() {
+ this.closeActions();
+ this.data?.onDelete?.();
+ },
+ onNodeEnter() {
+ clearTimeout(this.hoverTimeout);
+ this.isHovered = true;
+ },
+ onNodeLeave() {
+ this.hoverTimeout = setTimeout(() => {
+ if (!this.showActions) this.isHovered = false;
+ }, 100);
+ },
+ onDropdownEnter() {
+ clearTimeout(this.blurTimeout);
+ },
+ onDropdownLeave() {
+ this.blurTimeout = setTimeout(() => {
+ this.closeActions();
+ this.isHovered = false;
+ }, 100);
+ },
+ onSelected() {
+ return this.data.onSelect;
+ },
+ updateLabelWidth() {
+ this.$nextTick(() => {
+ if (this.$refs.textMeasurer) {
+ const measuredWidth = this.$refs.textMeasurer.offsetWidth;
+ this.maxWidth = Math.min(measuredWidth + 50, 300);
+ }
+ });
+ },
},
};
diff --git a/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue b/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue
index 10b716eb90a..ea4cfd729cf 100644
--- a/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue
+++ b/administrator/components/com_workflow/resources/scripts/components/nodes/StageNode.vue
@@ -6,87 +6,151 @@
tabindex="0"
:data-stage-id="stage?.id"
role="button"
- :aria-label="`${translate('COM_WORKFLOW_GRAPH_STAGE')} :
- ${stage?.title}. ${stage?.published ? translate('WORKFLOW_GRAPH_ENABLED') :
- translate('WORKFLOW_GRAPH_DISABLED')}`"
- @keydown="onNodeKeydown"
- @focus="onNodeFocus"
- @blur="onNodeBlur"
+ @mouseenter="onNodeEnter"
+ @mouseleave="onNodeLeave"
+ @focus="onNodeEnter"
+ @blur="onNodeLeave"
@click="onSelected"
+ @keydown.enter="openActions"
+ @keydown.esc="closeActions"
+ @keydown.tab="closeActions"
>
-
+
+
+
+
+
+
+ {{ stage.title }}
+
+
+
+
+
+
+
-
-