Add ParameterExposeButton component

Keavon · Keavon · commit 149434144dbc · 2022-11-21T12:15:22.000-08:00
diff --git a/editor/src/messages/layout/layout_message_handler.rs b/editor/src/messages/layout/layout_message_handler.rs
@@ -154,6 +154,10 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 						let callback_message = (optional_input.on_update.callback)(optional_input);
 						responses.push_back(callback_message);
 					}
+					Widget::ParameterExposeButton(parameter_expose_button) => {
+						let callback_message = (parameter_expose_button.on_update.callback)(parameter_expose_button);
+						responses.push_back(callback_message);
+					}
 					Widget::PivotAssist(pivot_assist) => {
 						let update_value = value.as_str().expect("RadioInput update was not of type: u64");
 						pivot_assist.position = update_value.into();
diff --git a/editor/src/messages/layout/utility_types/layout_widget.rs b/editor/src/messages/layout/utility_types/layout_widget.rs
@@ -67,6 +67,7 @@ impl Layout {
 					Widget::LayerReferenceInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::NumberInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::OptionalInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
+					Widget::ParameterExposeButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::PopoverButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::TextButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::IconLabel(_)
@@ -294,6 +295,7 @@ pub enum Widget {
 	LayerReferenceInput(LayerReferenceInput),
 	NumberInput(NumberInput),
 	OptionalInput(OptionalInput),
+	ParameterExposeButton(ParameterExposeButton),
 	PivotAssist(PivotAssist),
 	PopoverButton(PopoverButton),
 	RadioInput(RadioInput),
diff --git a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
@@ -1,5 +1,5 @@
-use crate::messages::input_mapper::utility_types::misc::ActionKeys;
 use crate::messages::layout::utility_types::layout_widget::WidgetCallback;
+use crate::messages::{input_mapper::utility_types::misc::ActionKeys, portfolio::document::node_graph::FrontendGraphDataType};
 
 use derivative::*;
 use serde::{Deserialize, Serialize};
@@ -45,6 +45,26 @@ pub struct PopoverButton {
 	pub tooltip_shortcut: Option<ActionKeys>,
 }
 
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+#[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]
+pub struct ParameterExposeButton {
+	pub exposed: bool,
+
+	#[serde(rename = "dataType")]
+	pub data_type: FrontendGraphDataType,
+
+	pub tooltip: String,
+
+	#[serde(skip)]
+	pub tooltip_shortcut: Option<ActionKeys>,
+
+	// Callbacks
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<ParameterExposeButton>,
+}
+
 #[derive(Clone, Serialize, Deserialize, Derivative, Default)]
 #[derivative(Debug, PartialEq)]
 #[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs
@@ -8,8 +8,9 @@ use graphene::layers::nodegraph_layer::NodeGraphFrameLayer;
 mod document_node_types;
 mod node_properties;
 
-#[derive(Clone, Copy, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
 pub enum FrontendGraphDataType {
+	#[default]
 	#[serde(rename = "general")]
 	General,
 	#[serde(rename = "raster")]
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
@@ -1,14 +1,27 @@
 use crate::messages::layout::utility_types::layout_widget::{LayoutGroup, Widget, WidgetCallback, WidgetHolder};
+use crate::messages::layout::utility_types::widgets::button_widgets::ParameterExposeButton;
 use crate::messages::layout::utility_types::widgets::input_widgets::{NumberInput, NumberInputMode};
 use crate::messages::layout::utility_types::widgets::label_widgets::{Separator, SeparatorDirection, SeparatorType, TextLabel};
 use crate::messages::prelude::NodeGraphMessage;
 
 use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{DocumentNode, NodeId, NodeInput};
 
+use super::FrontendGraphDataType;
+
 pub fn hue_shift_image_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
 	vec![LayoutGroup::Row {
 		widgets: vec![
+			WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
+				exposed: true,
+				data_type: FrontendGraphDataType::Number,
+				tooltip: "Expose input parameter in node graph".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
 			WidgetHolder::new(Widget::TextLabel(TextLabel {
 				value: "Shift Degrees".into(),
 				..Default::default()
@@ -20,8 +33,8 @@ pub fn hue_shift_image_properties(document_node: &DocumentNode, node_id: NodeId)
 			WidgetHolder::new(Widget::NumberInput(NumberInput {
 				value: Some({
 					let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
-								panic!("Hue rotate should be f32")
-							};
+						panic!("Hue rotate should be f32")
+					};
 					x as f64
 				}),
 				unit: "°".into(),
@@ -45,6 +58,16 @@ pub fn hue_shift_image_properties(document_node: &DocumentNode, node_id: NodeId)
 pub fn brighten_image_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
 	vec![LayoutGroup::Row {
 		widgets: vec![
+			WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
+				exposed: true,
+				data_type: FrontendGraphDataType::Number,
+				tooltip: "Expose input parameter in node graph".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
 			WidgetHolder::new(Widget::TextLabel(TextLabel {
 				value: "Brighten Amount".into(),
 				..Default::default()
@@ -56,8 +79,8 @@ pub fn brighten_image_properties(document_node: &DocumentNode, node_id: NodeId)
 			WidgetHolder::new(Widget::NumberInput(NumberInput {
 				value: Some({
 					let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
-								panic!("Brighten amount should be f32")
-							};
+						panic!("Brighten amount should be f32")
+					};
 					x as f64
 				}),
 				mode: NumberInputMode::Range,
@@ -80,6 +103,16 @@ pub fn brighten_image_properties(document_node: &DocumentNode, node_id: NodeId)
 pub fn add_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
 	let operand = |name: &str, index| LayoutGroup::Row {
 		widgets: vec![
+			WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
+				exposed: true,
+				data_type: FrontendGraphDataType::Number,
+				tooltip: "Expose input parameter in node graph".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
 			WidgetHolder::new(Widget::TextLabel(TextLabel {
 				value: name.into(),
 				..Default::default()
@@ -91,8 +124,8 @@ pub fn add_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<Layo
 			WidgetHolder::new(Widget::NumberInput(NumberInput {
 				value: Some({
 					let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[index] else {
-								panic!("Add input should be f32")
-							};
+						panic!("Add input should be f32")
+					};
 
 					x as f64
 				}),
diff --git a/frontend/src/components/widgets/WidgetRow.vue b/frontend/src/components/widgets/WidgetRow.vue
@@ -26,6 +26,7 @@
 				@changeFont="(value: unknown) => updateLayout(component.widgetId, value)"
 				:sharpRightCorners="nextIsSuffix"
 			/>
+			<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
 			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
 			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
 			<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(component.widgetId, value)" />
@@ -104,6 +105,7 @@ import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "
 
 import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import TextButton from "@/components/widgets/buttons/TextButton.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
@@ -175,6 +177,7 @@ export default defineComponent({
 		LayerReferenceInput,
 		NumberInput,
 		OptionalInput,
+		ParameterExposeButton,
 		PivotAssist,
 		PopoverButton,
 		RadioInput,
diff --git a/frontend/src/components/widgets/buttons/ParameterExposeButton.vue b/frontend/src/components/widgets/buttons/ParameterExposeButton.vue
@@ -0,0 +1,73 @@
+<template>
+	<LayoutRow class="parameter-expose-button">
+		<button :class="{ exposed }" :style="{ '--data-type-color': dataTypeColor }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.parameter-expose-button {
+	display: flex;
+	align-items: center;
+	flex: 0 0 auto;
+
+	button {
+		flex: 0 0 auto;
+		width: 8px;
+		height: 8px;
+		margin: 0;
+		padding: 0;
+		border: none;
+		border-radius: 50%;
+
+		&:not(.exposed) {
+			background: none;
+			border: 1px solid var(--data-type-color);
+
+			&:hover {
+				background: var(--color-6-lowergray);
+			}
+		}
+
+		&.exposed {
+			background: var(--data-type-color);
+
+			&:hover {
+				border: 1px solid var(--color-f-white);
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
+export default defineComponent({
+	props: {
+		exposed: { type: Boolean as PropType<boolean>, required: true },
+		dataType: { type: String as PropType<string>, required: true },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+	},
+	computed: {
+		dataTypeColor(): string {
+			// TODO: Move this function somewhere where it can be reused by other components
+			const colorsMap = {
+				general: "var(--color-data-general)",
+				vector: "var(--color-data-vector)",
+				raster: "var(--color-data-raster)",
+				mask: "var(--color-data-mask)",
+				number: "var(--color-data-number)",
+				color: "var(--color-data-color)",
+			} as const;
+
+			return colorsMap[this.dataType as keyof typeof colorsMap] || colorsMap.general;
+		},
+	},
+	components: { LayoutRow },
+});
+</script>
diff --git a/frontend/src/components/widgets/groups/WidgetSection.vue b/frontend/src/components/widgets/groups/WidgetSection.vue
@@ -100,6 +100,10 @@
 				text-align: right;
 			}
 
+			> .parameter-expose-button ~ .text-label:first-of-type {
+				text-align: left;
+			}
+
 			> .text-button {
 				flex-grow: 1;
 			}
diff --git a/frontend/src/components/widgets/inputs/LayerReferenceInput.vue b/frontend/src/components/widgets/inputs/LayerReferenceInput.vue
@@ -58,7 +58,8 @@
 		text-align: center;
 
 		&.missing {
-			color: var(--color-data-unused1);
+			// TODO: Define this as a permanent color palette choice
+			color: #d6536e;
 		}
 
 		&.layer-name {
diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts
@@ -1012,6 +1012,15 @@ export class TextAreaInput extends WidgetProps {
 	tooltip!: string | undefined;
 }
 
+export class ParameterExposeButton extends WidgetProps {
+	exposed!: boolean;
+
+	dataType!: string;
+
+	@Transform(({ value }: { value: string }) => value || undefined)
+	tooltip!: string | undefined;
+}
+
 export class TextButton extends WidgetProps {
 	label!: string;
 
@@ -1105,6 +1114,7 @@ const widgetSubTypes = [
 	{ value: SwatchPairInput, name: "SwatchPairInput" },
 	{ value: TextAreaInput, name: "TextAreaInput" },
 	{ value: TextButton, name: "TextButton" },
+	{ value: ParameterExposeButton, name: "ParameterExposeButton" },
 	{ value: TextInput, name: "TextInput" },
 	{ value: TextLabel, name: "TextLabel" },
 	{ value: PivotAssist, name: "PivotAssist" },

Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,10 @@`
`100`	`100`	`text-align: right;`
`101`	`101`	`}`
`102`	`102`
	`103`	`+ > .parameter-expose-button ~ .text-label:first-of-type {`
	`104`	`+ text-align: left;`
	`105`	`+ }`
	`106`	`+`
`103`	`107`	`> .text-button {`
`104`	`108`	`flex-grow: 1;`
`105`	`109`	`}`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,8 @@`
`58`	`58`	`text-align: center;`
`59`	`59`
`60`	`60`	`&.missing {`
`61`		`- color: var(--color-data-unused1);`
	`61`	`+ // TODO: Define this as a permanent color palette choice`
	`62`	`+ color: #d6536e;`
`62`	`63`	`}`
`63`	`64`
`64`	`65`	`&.layer-name {`