feat: Workflow tools

src/ui/src/builder/BuilderApp.vue

@@ -253,6 +253,11 @@ function handleRendererDrop(ev: DragEvent) {
 function handleRendererClick(ev: PointerEvent): void {
 	if (builderMode.value === "preview") return;
 
+	const unselectableEl: HTMLElement = (ev.target as HTMLElement).closest(
+		"[data-writer-unselectable]",
+	);
+	if (unselectableEl) return;
+
 	const targetEl: HTMLElement = (ev.target as HTMLElement).closest(
 		"[data-writer-id]",
 	);

src/ui/src/builder/BuilderSettings.vue

@@ -1,9 +1,7 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettings">
 		<div class="windowBar">
-			<div class="title">
-				{{ componentDefinition.name }}
-			</div>
+			<div class="title">{{ componentDefinition.name }}</div>
 			<button
 				v-if="description || docsString"
 				class="windowAction"
@@ -46,9 +44,18 @@
 
 		<div class="sections" :inert="readonly">
 			<BuilderSettingsProperties></BuilderSettingsProperties>
-			<BuilderSettingsBinding v-if="isBindable"></BuilderSettingsBinding>
-			<BuilderSettingsHandlers></BuilderSettingsHandlers>
-			<BuilderSettingsVisibility></BuilderSettingsVisibility>
+			<template
+				v-if="
+					!componentDefinition.toolkit ||
+					componentDefinition.toolkit == 'core'
+				"
+			>
+				<BuilderSettingsBinding
+					v-if="isBindable"
+				></BuilderSettingsBinding>
+				<BuilderSettingsHandlers></BuilderSettingsHandlers>
+				<BuilderSettingsVisibility></BuilderSettingsVisibility>
+			</template>
 		</div>
 
 		<div class="debug">

src/ui/src/builder/BuilderSettingsHandlers.vue

@@ -39,6 +39,13 @@
 							>
 								Go to page "{{ pageKey }}"
 							</option>
+							<option
+								v-for="workflowKey in workflowKeys"
+								:key="`$runWorkflow_${workflowKey}`"
+								:value="`$runWorkflow_${workflowKey}`"
+							>
+								Run workflow "{{ workflowKey }}"
+							</option>
 							<template v-if="isHandlerInvalid(eventType)">
 								<option
 									:value="component.handlers?.[eventType]"
@@ -140,6 +147,13 @@
 							>
 								Go to page "{{ pageKey }}"
 							</option>
+							<option
+								v-for="workflowKey in workflowKeys"
+								:key="`$runWorkflow_${workflowKey}`"
+								:value="`$runWorkflow_${workflowKey}`"
+							>
+								Run workflow "{{ workflowKey }}"
+							</option>
 						</select>
 						<span class="desc"
 							>The function that will handle the event.</span
@@ -186,14 +200,25 @@ const recognisedEvents: ComputedRef<WriterComponentDefinition["events"]> =
 	});
 
 const userFunctions = computed(() => wf.getUserFunctions());
+
 const pageKeys = computed(() => {
 	const pages = wf.getComponents("root");
 	const pageKeys = pages
+		.filter((page) => page.type == "page")
 		.map((page) => page.content["key"])
 		.filter((pageKey) => Boolean(pageKey));
 	return pageKeys;
 });
 
+const workflowKeys = computed(() => {
+	const workflows = wf.getComponents("workflows_root");
+	const workflowKeys = workflows
+		.filter((workflow) => workflow.type == "workflows_workflow")
+		.map((workflow) => workflow.content["key"])
+		.filter((workflowKey) => Boolean(workflowKey));
+	return workflowKeys;
+});
+
 const isHandlerInvalid = (eventType: string) => {
 	const handlerFunctionName = component.value.handlers?.[eventType];
 	if (!handlerFunctionName) return false;

src/ui/src/builder/useComponentActions.ts

@@ -127,6 +127,12 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		type: string,
 		parentId: Component["id"],
 		position?: number,
+		initProperties?: Partial<
+			Omit<
+				Component,
+				"id" | "type" | "parent" | "content" | "handlers" | "position"
+			>
+		>,
 	) {
 		const newId = generateNewComponentId();
 		const definition = wf.getComponentDefinition(type);
@@ -137,6 +143,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		});
 
 		const component = {
+			...(initProperties ?? {}),
 			id: newId,
 			type,
 			parentId,
@@ -160,8 +167,19 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		type: string,
 		parentId: Component["id"],
 		position?: number,
+		initProperties?: Partial<
+			Omit<
+				Component,
+				"id" | "type" | "parent" | "content" | "handlers" | "position"
+			>
+		>,
 	): Component["id"] {
-		const component = createComponent(type, parentId, position);
+		const component = createComponent(
+			type,
+			parentId,
+			position,
+			initProperties,
+		);
 		const transactionId = `create-${component.id}`;
 		ssbm.openMutationTransaction(transactionId, `Create`);
 		wf.addComponent(component);
@@ -688,6 +706,71 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		wf.sendComponentUpdate();
 	}
 
+	/**
+	 * Add an out
+	 */
+	function addOut(
+		componentId: Component["id"],
+		out: Component["outs"][number],
+	) {
+		const component = wf.getComponentById(componentId);
+		if (!component) return;
+		const transactionId = `add-${componentId}-out-${out.outId}-${out.toNodeId}`;
+		ssbm.openMutationTransaction(transactionId, `Add out`, true);
+		ssbm.registerPreMutation(component);
+
+		component.outs = [...(component.outs ?? []), out];
+
+		ssbm.registerPostMutation(component);
+		ssbm.closeMutationTransaction(transactionId);
+		wf.sendComponentUpdate();
+	}
+
+	/**
+	 * Remove an out
+	 */
+	function removeOut(
+		componentId: Component["id"],
+		out: Component["outs"][number],
+	) {
+		const component = wf.getComponentById(componentId);
+		if (!component) return;
+		const transactionId = `edit-${componentId}-out-${out.outId}-${out.toNodeId}`;
+		ssbm.openMutationTransaction(transactionId, `Edit out`, true);
+		ssbm.registerPreMutation(component);
+
+		component.outs = component.outs.filter(
+			(o) => !(out.outId === o.outId && out.toNodeId === o.toNodeId),
+		);
+
+		ssbm.registerPostMutation(component);
+		ssbm.closeMutationTransaction(transactionId);
+		wf.sendComponentUpdate();
+	}
+
+	/**
+	 * Change coordinates
+	 */
+	function changeCoordinates(
+		componentId: Component["id"],
+		x: number,
+		y: number,
+	) {
+		const component = wf.getComponentById(componentId);
+		if (!component) return;
+
+		const transactionId = `change-${componentId}-coordinates`;
+		ssbm.openMutationTransaction(transactionId, `Change coordinates`, true);
+		ssbm.registerPreMutation(component);
+
+		component.x = Math.floor(x);
+		component.y = Math.floor(y);
+
+		ssbm.registerPostMutation(component);
+		ssbm.closeMutationTransaction(transactionId);
+		wf.sendComponentUpdate();
+	}
+
 	/**
 	 * Set the value for a component's visibility.
 	 */
@@ -833,6 +916,9 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		undo,
 		redo,
 		setContentValue,
+		addOut,
+		removeOut,
+		changeCoordinates,
 		setVisibleValue,
 		setBinding,
 		getUndoRedoSnapshot,