Add some additional image effect nodes (#869)

* Move the Subpath type to graphene-std

* Add the transform subpath node

* Delete selected nodes

* Inserting node list on right click

* Add several bitmap manipulator nodes

* Convert add node to use f64

* Add posterize node

* Rename names randomly

* Fix naming

* Exposure node

* Fix typo

* Adjust exposure node range

* Comment out vector nodes

* Adjust exposure range again

* Posterise as ints

* Rename input

* Use >= in the to hsl function

frontend/src/components/widgets/buttons/ParameterExposeButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<LayoutRow class="parameter-expose-button">
-		<button :class="{ exposed }" :style="{ '--data-type-color': dataTypeColor }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
+		<button :class="{ exposed }" :style="{ '--data-type-color': `var(--color-data-${dataType})` }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
 	</LayoutRow>
 </template>
 
@@ -53,21 +53,6 @@ export default defineComponent({
 		// 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>

frontend/src/components/widgets/inputs/FieldInput.vue

@@ -10,6 +10,7 @@
 			v-model="inputValue"
 			:spellcheck="spellcheck"
 			:disabled="disabled"
+			:placeholder="placeholder"
 			@focus="() => $emit('textFocused')"
 			@blur="() => $emit('textChanged')"
 			@change="() => $emit('textChanged')"
@@ -148,6 +149,7 @@ export default defineComponent({
 		textarea: { type: Boolean as PropType<boolean>, default: false },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
 		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+		placeholder: { type: String as PropType<string>, required: false },
 	},
 	data() {
 		return {

frontend/src/components/widgets/inputs/TextInput.vue

@@ -7,6 +7,7 @@
 		:spellcheck="true"
 		:disabled="disabled"
 		:tooltip="tooltip"
+		:placeholder="placeholder"
 		:style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }"
 		:sharpRightCorners="sharpRightCorners"
 		@textFocused="() => onTextFocused()"
@@ -41,6 +42,7 @@ export default defineComponent({
 		// Label
 		label: { type: String as PropType<string>, required: false },
 		tooltip: { type: String as PropType<string | undefined>, required: false },
+		placeholder: { type: String as PropType<string>, required: false },
 
 		// Disabled
 		disabled: { type: Boolean as PropType<boolean>, default: false },