fix: Use reactive variable instead of computed

frappe · Jan 15, 2024 · d677862 · d677862
1 parent 4529226
commit d677862
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 50 deletions.
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
@@ -41,7 +41,6 @@ import { computed, inject, nextTick, onMounted, reactive, ref, useAttrs, watch,
 import getBlockTemplate from "@/utils/blockTemplate";
 import { getDataForKey } from "@/utils/helpers";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
-import { computedWithControl } from "@vueuse/core";
 import useStore from "../store";
 import BlockEditor from "./BlockEditor.vue";
 import BlockHTML from "./BlockHTML.vue";
@@ -81,25 +80,8 @@ const draggable = computed(() => {
 	return !props.block.isRoot() && !props.preview && false;
 });
 
-const hovered = ref(false);
-const isSelected = computedWithControl(
-	() => props.block.blockId,
-	() => {
-		return store.activeCanvas?.isSelected(props.block);
-	}
-);
-
-watch(
-	() => store.activeCanvas?.selectedBlockIds,
-	(newList, oldList) => {
-		if (store.activeCanvas?.isSelected(props.block) || oldList?.includes(props.block.blockId)) {
-			isSelected.trigger();
-		}
-	},
-	{
-		deep: true,
-	}
-);
+const isHovered = ref(false);
+const isSelected = ref(false);
 
 const getComponentName = (block: Block) => {
 	if (block.isRepeater()) {
@@ -162,7 +144,7 @@ const loadEditor = computed(() => {
 		target.value &&
 		props.block.getStyle("display") !== "none" &&
 		((isSelected.value && props.breakpoint === store.activeBreakpoint) ||
-			(hovered.value && store.hoveredBreakpoint === props.breakpoint)) &&
+			(isHovered.value && store.hoveredBreakpoint === props.breakpoint)) &&
 		!canvasProps?.scaling &&
 		!canvasProps?.panning
 	);
@@ -274,10 +256,24 @@ watch(
 	() => store.hoveredBlock,
 	(newValue, oldValue) => {
 		if (newValue === props.block.blockId) {
-			hovered.value = true;
+			isHovered.value = true;
 		} else if (oldValue === props.block.blockId) {
-			hovered.value = false;
+			isHovered.value = false;
 		}
 	}
 );
+
+watch(
+	() => store.activeCanvas?.selectedBlockIds,
+	() => {
+		if (store.activeCanvas?.isSelected(props.block)) {
+			isSelected.value = true;
+		} else {
+			isSelected.value = false;
+		}
+	},
+	{
+		deep: true,
+	}
+);
 </script>
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
@@ -480,9 +480,6 @@ const isSelected = (block: Block) => {
 };
 
 const selectBlock = (_block: Block, multiSelect = false) => {
-	if (isSelected(_block)) {
-		return;
-	}
 	if (multiSelect) {
 		selectedBlockIds.value.push(_block.blockId);
 	} else {
@@ -502,30 +499,6 @@ const clearSelection = () => {
 	selectedBlockIds.value = [];
 };
 
-// findParentBlock(blockId: string, blocks?: Array<Block>): Block | null {
-// 			if (!blocks) {
-// 				const firstBlock = this.activeCanvas?.getFirstBlock() as Block;
-// 				if (!firstBlock) {
-// 					return null;
-// 				}
-// 				blocks = [firstBlock];
-// 			}
-// 			for (const block of blocks) {
-// 				if (block.children) {
-// 					for (const child of block.children) {
-// 						if (child.blockId === blockId) {
-// 							return block;
-// 						}
-// 					}
-// 					const found = this.findParentBlock(blockId, block.children);
-// 					if (found) {
-// 						return found;
-// 					}
-// 				}
-// 			}
-// 			return null;
-// 		},
-
 const findParentBlock = (blockId: string, blocks?: Block[]): Block | null => {
 	if (!blocks) {
 		const firstBlock = getFirstBlock();