feat: highligt selected element

src/components/newtab/workflow/WorkflowBuilderSearchBlocks.vue

@@ -117,7 +117,12 @@ function extractBlocks() {
     })
   );
 
-  props.editor.precanvas.style.transition = 'transform 250ms ease';
+  props.editor.precanvas.style.transition = 'transform 300ms ease';
+}
+function clearHighlightedNodes() {
+  document.querySelectorAll('.search-select-node').forEach((el) => {
+    el.classList.remove('search-select-node');
+  });
 }
 function clearState() {
   if (!state.selected) {
@@ -137,6 +142,8 @@ function clearState() {
     canvasY: 0,
   });
 
+  clearHighlightedNodes();
+
   setTimeout(() => {
     props.editor.precanvas.style.transition = '';
   }, 500);
@@ -148,6 +155,11 @@ function onSelectItem({ item }) {
     props.editor.zoom_refresh();
   }
 
+  clearHighlightedNodes();
+  document
+    .querySelector(`#node-${item.id}`)
+    ?.classList.add('search-select-node');
+
   const { rectX, rectY } = initialState;
   props.editor.translate_to(
     -(item.pos_x - rectX),
@@ -165,3 +177,8 @@ input {
   transition: width 250ms ease;
 }
 </style>
+<style>
+.search-select-node .drawflow_content_node {
+  @apply ring-4;
+}
+</style>