feat: added reusable component goto parent button

ui/src/builder/BuilderApp.vue

@@ -134,6 +134,7 @@ import BuilderInstanceTracker from "./BuilderInstanceTracker.vue";
 import BuilderInsertionOverlay from "./BuilderInsertionOverlay.vue";
 import BuilderInsertionLabel from "./BuilderInsertionLabel.vue";
 import { isPlatformMac } from "../core/detectPlatform";
+import { getClosestComponent } from "./helpers";
 
 const ss = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -252,7 +253,8 @@ function handleRendererDrop(ev: DragEvent) {
 function handleRendererClick(ev: PointerEvent): void {
 	if (builderMode.value === "preview") return;
 
-	const targetEl: HTMLElement = (ev.target as HTMLElement).closest(
+	const targetEl: HTMLElement = getClosestComponent(
+		ev.target as HTMLElement,
 		"[data-streamsync-id]",
 	);
 	if (!targetEl) return;
@@ -268,7 +270,8 @@ function handleRendererClick(ev: PointerEvent): void {
 const handleRendererDragStart = (ev: DragEvent) => {
 	if (builderMode.value === "preview") return;
 
-	const targetEl: HTMLElement = (ev.target as HTMLElement).closest(
+	const targetEl: HTMLElement = getClosestComponent(
+		ev.target as HTMLElement,
 		"[data-streamsync-id]",
 	);
 

ui/src/builder/BuilderSettings.vue

@@ -38,6 +38,7 @@
 		</div>
 
 		<div class="sections">
+			<BuilderSettingsActions></BuilderSettingsActions>
 			<BuilderSettingsProperties></BuilderSettingsProperties>
 			<BuilderSettingsBinding v-if="isBindable"></BuilderSettingsBinding>
 			<BuilderSettingsHandlers></BuilderSettingsHandlers>
@@ -58,6 +59,7 @@ import injectionKeys from "../injectionKeys";
 
 import BuilderSettingsHandlers from "./BuilderSettingsHandlers.vue";
 import BuilderSettingsProperties from "./BuilderSettingsProperties.vue";
+import BuilderSettingsActions from "./BuilderSettingsActions.vue";
 import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
 import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
 import BuilderCopyText from "./BuilderCopyText.vue";
@@ -67,12 +69,7 @@ const ssbm = inject(injectionKeys.builderManager);
 const docsActive = ref(false);
 
 const component = computed(() => ss.getComponentById(ssbm.getSelectedId()));
-
-const componentDefinition = computed(() => {
-	const { type } = component.value;
-	const definition = ss.getComponentDefinition(type);
-	return definition;
-});
+const componentDefinition = ss.getComponentDefinitionById(component.value.id);
 
 const closeSettings = () => {
 	ssbm.setSelection(null);

ui/src/builder/BuilderSettingsActions.vue

@@ -0,0 +1,50 @@
+<template>
+	<div v-if="actions.length > 0" class="BuilderSettingsActions">
+		<div class="sectionTitle">
+			<i class="ri-equalizer-line ri-xl"></i>
+			<h3>Actions</h3>
+		</div>
+		<div>
+			<div class="propertyCategory">
+				<div v-for="[fieldKey, action] in actions" :key="fieldKey">
+					<div class="fieldWrapper">
+						<button @click="action.handler">
+							{{ action.name }}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import injectionKeys from "../injectionKeys";
+
+const ss = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
+
+const selectedComponent = computed(() => {
+	return ss.getComponentById(ssbm.getSelectedId());
+});
+
+const componentDefinition = ss.getComponentDefinitionById(
+	selectedComponent.value.id,
+);
+
+const actions = computed(() => {
+	if (!componentDefinition.value.actions) {
+		return [];
+	}
+	return Object.entries(componentDefinition.value.actions);
+});
+</script>
+
+<style scoped>
+@import "./sharedStyles.css";
+
+.BuilderSettingsActions {
+	padding: 24px;
+}
+</style>

ui/src/builder/helpers.ts

@@ -0,0 +1,12 @@
+
+export function getClosestComponent(target: HTMLElement, selector: string): HTMLElement {
+	const ignore: HTMLElement = (target as HTMLElement).closest(
+		".streamsync-ignore",
+	);
+	if (ignore) {
+		target = ignore;
+	}
+
+	return (target as HTMLElement).closest(selector);
+}
+

ui/src/builder/useDragDropComponent.ts

@@ -1,4 +1,5 @@
 import { Ref, ref } from "vue";
+import { getClosestComponent } from "./helpers";
 import { Core, Component } from "../streamsyncTypes";
 import { CANDIDATE_CONFIRMATION_DELAY_MS } from "./builderManager";
 
@@ -44,9 +45,9 @@ export function useDragDropComponent(ss: Core) {
 	function getIdFromElement(el: HTMLElement) {
 		// Elements inside a cage aren't taken into account for insertion
 
-		const cageEl = el.closest("[data-streamsync-cage]");
+		const cageEl = getClosestComponent(el, "[data-streamsync-cage]");
 		const startEl = cageEl ?? el;
-		const targetEl: HTMLElement = startEl.closest("[data-streamsync-id]");
+		const targetEl: HTMLElement = getClosestComponent(startEl, "[data-streamsync-id]");
 		if (!targetEl) return;
 		return targetEl.dataset.streamsyncId;
 	}

ui/src/core/index.ts

@@ -24,8 +24,9 @@ const KEEP_ALIVE_DELAY_MS = 60000;
 export function generateCore() {
 	let sessionId: string = null;
 	const sessionTimestamp: Ref<number> = ref(null);
-	const componentDefinitionOverrides: Ref<Partial<StreamsyncComponentDefinition>> =
-		ref({});
+	const componentDefinitionOverrides: Ref<
+		Partial<StreamsyncComponentDefinition>
+	> = ref({});
 	const mode: Ref<"run" | "edit"> = ref(null);
 	const runCode: Ref<string> = ref(null);
 	const components: Ref<ComponentMap> = ref({});
@@ -567,6 +568,26 @@ export function generateCore() {
 		return (componentDefinitionOverrides.value[componentId] = patch);
 	}
 
+	function getInstancePath(componentId: Component["id"]): InstancePath {
+		const path = [];
+		let currentId = componentId;
+		while (currentId) {
+			const component = components.value[currentId];
+			path.unshift({ componentId: component.id, instanceNumber: 0 });
+			currentId = component.parentId;
+		}
+		return path;
+	}
+	function getComponentPageId(componentId: Component["id"]): Component["id"] {
+		let currentId = componentId;
+		while (currentId) {
+			const component = components.value[currentId];
+			if (component.type == "page") return component.id;
+			currentId = component.parentId;
+		}
+		return null;
+	}
+
 	const core = {
 		webSocket,
 		syncHealth,
@@ -596,6 +617,8 @@ export function generateCore() {
 		isChildOf,
 		getComponentDefinitionById,
 		setComponentDefinitionById,
+		getInstancePath,
+		getComponentPageId,
 	};
 
 	return core;

ui/src/core_components/other/CoreReusable.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { FieldType } from "../../streamsyncTypes";
-import { h, inject, watch, ref } from "vue";
+import { h, inject, watch, ref, nextTick } from "vue";
 import injectionKeys from "../../injectionKeys";
 
 export default {
@@ -30,6 +30,7 @@ const fields = inject(injectionKeys.evaluatedFields);
 const instancePath = inject(injectionKeys.instancePath);
 const parentId = instancePath.at(-2).componentId;
 const ss = inject(injectionKeys.core);
+const ssbm = inject(injectionKeys.builderManager);
 const renderProxiedComponent = inject(injectionKeys.renderProxiedComponent);
 const isBeingEdited = inject(injectionKeys.isBeingEdited);
 const componentId = inject(injectionKeys.componentId);
@@ -40,6 +41,11 @@ const proxyDefinition = ss.getComponentDefinitionById(fields.proxyId);
 const parentDef = ss.getComponentDefinitionById(parentId);
 
 function renderError(message: string, cls: string) {
+	ss.setComponentDefinitionById(componentId, {
+		slot: "default",
+		positionless: false,
+		actions: [],
+	});
 	vnode.value = h(
 		"div",
 		{ class: ["CoreReuse", cls] },
@@ -82,9 +88,26 @@ function render() {
 	ss.setComponentDefinitionById(componentId, {
 		slot: proxyDefinition.value.slot || "default",
 		positionless: proxyDefinition.value.positionless || false,
+		actions: {
+			redirect: {
+				name: "Goto reused component",
+				icon: "arrow-right",
+				handler: async () => {
+					ss.setActivePageId(
+						ss.getComponentPageId(fields.proxyId.value),
+					);
+					await nextTick();
+					ssbm.setSelection(
+						fields.proxyId.value,
+						ss.getInstancePath(componentId),
+					);
+				},
+			},
+		},
 	});
 	const reusedNode = renderProxiedComponent(fields.proxyId.value, 0, {
-		class: ["CoreReuse"],
+		class: ["CoreReuse", "streamsync-ignore"],
+		renderOnly: true,
 	});
 	vnode.value = reusedNode;
 }

ui/src/renderer/ComponentProxy.vue

@@ -14,7 +14,7 @@ import { VNode } from "vue";
 import ChildlessPlaceholder from "./ChildlessPlaceholder.vue";
 
 export default {
-	props: ["componentId", "instancePath", "instanceData"],
+	props: ["componentId", "instancePath", "instanceData", "renderOnly"],
 	setup(props) {
 		const ss = inject(injectionKeys.core);
 		const ssbm = inject(injectionKeys.builderManager);
@@ -64,6 +64,7 @@ export default {
 				],
 				instanceData: [...instanceData, ref(null)],
 				...ext,
+				renderOnly: props.renderOnly || ext.renderOnly,
 			});
 			return vnode;
 		};
@@ -278,7 +279,7 @@ export default {
 				},
 				...dataAttrs,
 				...(!isDisabled.value ? eventHandlerProps.value : []),
-				draggable: isBeingEdited.value,
+				draggable: !props.renderOnly && isBeingEdited.value,
 			};
 			return rootElProps;
 		};