Blend modes (#252)

* Add backend for selecting layer blend mode

* Change dropdown input to support callback on change

* Add debug messages

* Fix canvas update for blend-modes

* Finish up and polish blend modes implementations

* Add changes from code review

Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: Dennis Kobert <dennis@kobert.dev>

client/web/src/components/panels/Document.vue

@@ -2,7 +2,7 @@
 	<LayoutCol :class="'document'">
 		<LayoutRow :class="'options-bar'">
 			<div class="left side">
-				<DropdownInput :menuEntries="modeMenuEntries" :default="modeMenuEntries[0][0]" :drawIcon="true" />
+				<DropdownInput :menuEntries="documentModeEntries" v-model:selectedIndex="documentModeSelectionIndex" :drawIcon="true" />
 
 				<Separator :type="SeparatorType.Section" />
 
@@ -104,11 +104,11 @@
 			</LayoutCol>
 			<LayoutCol :class="'viewport'">
 				<LayoutRow :class="'bar-area'">
-					<CanvasRuler :origin="0" :majorMarkSpacing="75" :direction="RulerDirection.Horizontal" :class="'top-ruler'" />
+					<CanvasRuler :origin="0" :majorMarkSpacing="100" :direction="RulerDirection.Horizontal" :class="'top-ruler'" />
 				</LayoutRow>
 				<LayoutRow :class="'canvas-area'">
 					<LayoutCol :class="'bar-area'">
-						<CanvasRuler :origin="0" :majorMarkSpacing="75" :direction="RulerDirection.Vertical" />
+						<CanvasRuler :origin="0" :majorMarkSpacing="100" :direction="RulerDirection.Vertical" />
 					</LayoutCol>
 					<LayoutCol :class="'canvas-area'">
 						<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove" ref="canvas">
@@ -216,7 +216,7 @@ import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
 import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 
-const modeMenuEntries: SectionsOfMenuListEntries = [
+const documentModeEntries: SectionsOfMenuListEntries = [
 	[
 		{ label: "Design Mode", icon: "ViewportDesignMode" },
 		{ label: "Select Mode", icon: "ViewportSelectMode" },
@@ -334,7 +334,8 @@ export default defineComponent({
 		return {
 			viewportSvg: "",
 			activeTool: "Select",
-			modeMenuEntries,
+			documentModeEntries,
+			documentModeSelectionIndex: 0,
 			viewModeIndex: 0,
 			snappingEnabled: true,
 			gridEnabled: true,

client/web/src/components/panels/LayerTree.vue

@@ -1,7 +1,7 @@
 <template>
 	<LayoutCol :class="'layer-tree-panel'">
 		<LayoutRow :class="'options-bar'">
-			<DropdownInput :menuEntries="blendModeMenuEntries" :default="blendModeMenuEntries[0][0]" />
+			<DropdownInput :menuEntries="blendModeEntries" v-model:selectedIndex="blendModeSelectedIndex" @update:selectedIndex="blendModeChanged" :disabled="blendModeDropdownDisabled" />
 
 			<Separator :type="SeparatorType.Related" />
 
@@ -15,18 +15,18 @@
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree scrollable-y'">
-			<LayoutCol :class="'list'">
+			<LayoutCol :class="'list'" @click="deselectAllLayers">
 				<div class="layer-row" v-for="layer in layers" :key="layer.path">
 					<div class="layer-visibility">
-						<IconButton :icon="layer.visible ? 'EyeVisible' : 'EyeHidden'" @click="toggleLayerVisibility(layer.path)" :size="24" :title="layer.visible ? 'Visible' : 'Hidden'" />
+						<IconButton :icon="layer.visible ? 'EyeVisible' : 'EyeHidden'" @click.stop="toggleLayerVisibility(layer.path)" :size="24" :title="layer.visible ? 'Visible' : 'Hidden'" />
 					</div>
 					<div
 						class="layer"
 						:class="{ selected: layer.layer_data.selected }"
-						@click.shift.exact="handleShiftClick(layer)"
-						@click.ctrl.exact="handleControlClick(layer)"
-						@click.alt.exact="handleControlClick(layer)"
-						@click.exact="handleClick(layer)"
+						@click.shift.exact.stop="handleShiftClick(layer)"
+						@click.ctrl.exact.stop="handleControlClick(layer)"
+						@click.alt.exact.stop="handleControlClick(layer)"
+						@click.exact.stop="handleClick(layer)"
 					>
 						<div class="layer-thumbnail" v-html="layer.thumbnail"></div>
 						<div class="layer-type-icon">
@@ -53,11 +53,12 @@
 		align-items: center;
 
 		.dropdown-input {
-			flex: 0 0 auto;
+			max-width: 120px;
 		}
 
+		.dropdown-input,
 		.number-input {
-			flex: 1 1 100%;
+			flex: 1 1 auto;
 		}
 	}
 
@@ -110,7 +111,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "@/utilities/response-handler";
+import { ResponseType, registerResponseHandler, Response, BlendMode, ExpandFolder, LayerPanelEntry } from "@/utilities/response-handler";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import Separator, { SeparatorType } from "@/components/widgets/separators/Separator.vue";
@@ -124,13 +125,43 @@ import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/M
 
 const wasm = import("@/../wasm/pkg");
 
-const blendModeMenuEntries: SectionsOfMenuListEntries = [
-	[{ label: "Normal" }],
-	[{ label: "Multiply" }, { label: "Darken" }, { label: "Color Burn" }, { label: "Linear Burn" }, { label: "Darker Color" }],
-	[{ label: "Screen" }, { label: "Lighten" }, { label: "Color Dodge" }, { label: "Linear Dodge (Add)" }, { label: "Lighter Color" }],
-	[{ label: "Overlay" }, { label: "Soft Light" }, { label: "Hard Light" }, { label: "Vivid Light" }, { label: "Linear Light" }, { label: "Pin Light" }, { label: "Hard Mix" }],
-	[{ label: "Difference" }, { label: "Exclusion" }, { label: "Subtract" }, { label: "Divide" }],
-	[{ label: "Hue" }, { label: "Saturation" }, { label: "Color" }, { label: "Luminosity" }],
+const blendModeEntries: SectionsOfMenuListEntries = [
+	[{ label: "Normal", value: BlendMode.Normal }],
+	[
+		{ label: "Multiply", value: BlendMode.Multiply },
+		{ label: "Darken", value: BlendMode.Darken },
+		{ label: "Color Burn", value: BlendMode.ColorBurn },
+		// { label: "Linear Burn", value: "" }, // Not supported by SVG
+		// { label: "Darker Color", value: "" }, // Not supported by SVG
+	],
+	[
+		{ label: "Screen", value: BlendMode.Screen },
+		{ label: "Lighten", value: BlendMode.Lighten },
+		{ label: "Color Dodge", value: BlendMode.ColorDodge },
+		// { label: "Linear Dodge (Add)", value: "" }, // Not supported by SVG
+		// { label: "Lighter Color", value: "" }, // Not supported by SVG
+	],
+	[
+		{ label: "Overlay", value: BlendMode.Overlay },
+		{ label: "Soft Light", value: BlendMode.SoftLight },
+		{ label: "Hard Light", value: BlendMode.HardLight },
+		// { label: "Vivid Light", value: "" }, // Not supported by SVG
+		// { label: "Linear Light", value: "" }, // Not supported by SVG
+		// { label: "Pin Light", value: "" }, // Not supported by SVG
+		// { label: "Hard Mix", value: "" }, // Not supported by SVG
+	],
+	[
+		{ label: "Difference", value: BlendMode.Difference },
+		{ label: "Exclusion", value: BlendMode.Exclusion },
+		// { label: "Subtract", value: "" }, // Not supported by SVG
+		// { label: "Divide", value: "" }, // Not supported by SVG
+	],
+	[
+		{ label: "Hue", value: BlendMode.Hue },
+		{ label: "Saturation", value: BlendMode.Saturation },
+		{ label: "Color", value: BlendMode.Color },
+		{ label: "Luminosity", value: BlendMode.Luminosity },
+	],
 ];
 
 export default defineComponent({
@@ -140,9 +171,14 @@ export default defineComponent({
 			const { toggle_layer_visibility } = await wasm;
 			toggle_layer_visibility(path);
 		},
+		async setLayerBlendMode(blendMode: BlendMode) {
+			const { set_blend_mode_for_selected_layers } = await wasm;
+			set_blend_mode_for_selected_layers(blendMode);
+		},
 		async handleControlClick(clickedLayer: LayerPanelEntry) {
 			const index = this.layers.indexOf(clickedLayer);
 			clickedLayer.layer_data.selected = !clickedLayer.layer_data.selected;
+
 			this.selectionRangeEndLayer = undefined;
 			this.selectionRangeStartLayer =
 				this.layers.slice(index).filter((layer) => layer.layer_data.selected)[0] ||
@@ -150,29 +186,41 @@ export default defineComponent({
 					.slice(0, index)
 					.reverse()
 					.filter((layer) => layer.layer_data.selected)[0];
-			this.updateSelection();
+
+			this.sendSelectedLayers();
 		},
 		async handleShiftClick(clickedLayer: LayerPanelEntry) {
 			// The two paths of the range are stored in selectionRangeStartLayer and selectionRangeEndLayer
-			// So for a new Shift+Click, select all layers between selectionRangeStartLayer and selectionRangeEndLayer(stored in prev Sft+C)
+			// So for a new Shift+Click, select all layers between selectionRangeStartLayer and selectionRangeEndLayer (stored in prev Shift+Click)
 			this.clearSelection();
+
 			this.selectionRangeEndLayer = clickedLayer;
 			if (!this.selectionRangeStartLayer) this.selectionRangeStartLayer = clickedLayer;
 			this.fillSelectionRange(this.selectionRangeStartLayer, this.selectionRangeEndLayer, true);
-			this.updateSelection();
-		},
 
+			this.sendSelectedLayers();
+		},
 		async handleClick(clickedLayer: LayerPanelEntry) {
 			this.selectionRangeStartLayer = clickedLayer;
 			this.selectionRangeEndLayer = clickedLayer;
+
 			this.clearSelection();
 			clickedLayer.layer_data.selected = true;
-			this.updateSelection();
+
+			this.sendSelectedLayers();
+		},
+		async deselectAllLayers() {
+			this.selectionRangeStartLayer = undefined;
+			this.selectionRangeEndLayer = undefined;
+
+			const { deselect_all_layers } = await wasm;
+			deselect_all_layers();
 		},
 		async fillSelectionRange(start: LayerPanelEntry, end: LayerPanelEntry, selected = true) {
 			const startIndex = this.layers.findIndex((layer) => layer.path.join() === start.path.join());
 			const endIndex = this.layers.findIndex((layer) => layer.path.join() === end.path.join());
 			const [min, max] = [startIndex, endIndex].sort();
+
 			if (min !== -1) {
 				for (let i = min; i <= max; i += 1) {
 					this.layers[i].layer_data.selected = selected;
@@ -184,11 +232,12 @@ export default defineComponent({
 				layer.layer_data.selected = false;
 			});
 		},
-		async updateSelection() {
+		async sendSelectedLayers() {
 			const paths = this.layers.filter((layer) => layer.layer_data.selected).map((layer) => layer.path);
-			if (paths.length === 0) return;
+
 			const length = paths.reduce((acc, cur) => acc + cur.length, 0) + paths.length - 1;
 			const output = new BigUint64Array(length);
+
 			let i = 0;
 			paths.forEach((path, index) => {
 				output.set(path, i);
@@ -202,6 +251,30 @@ export default defineComponent({
 			const { select_layers } = await wasm;
 			select_layers(output);
 		},
+		setBlendModeForSelectedLayers() {
+			const selected = this.layers.filter((layer) => layer.layer_data.selected);
+
+			if (selected.length < 1) {
+				this.blendModeSelectedIndex = 0;
+				this.blendModeDropdownDisabled = true;
+				return;
+			}
+			this.blendModeDropdownDisabled = false;
+
+			const firstEncounteredBlendMode = selected[0].blend_mode;
+			const allBlendModesAlike = !selected.find((layer) => layer.blend_mode !== firstEncounteredBlendMode);
+
+			if (allBlendModesAlike) {
+				this.blendModeSelectedIndex = this.blendModeEntries.flat().findIndex((entry) => entry.value === firstEncounteredBlendMode);
+			} else {
+				// Display a dash when they are not all the same value
+				this.blendModeSelectedIndex = -1;
+			}
+		},
+		blendModeChanged() {
+			const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value as BlendMode;
+			if (blendMode) this.setLayerBlendMode(blendMode);
+		},
 	},
 	mounted() {
 		registerResponseHandler(ResponseType.ExpandFolder, (responseData: Response) => {
@@ -212,6 +285,8 @@ export default defineComponent({
 				if (responsePath.length > 0) console.error("Non root paths are currently not implemented");
 
 				this.layers = responseLayers;
+
+				this.setBlendModeForSelectedLayers();
 			}
 		});
 		registerResponseHandler(ResponseType.CollapseFolder, (responseData) => {
@@ -220,13 +295,15 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			blendModeMenuEntries,
+			blendModeEntries,
+			blendModeSelectedIndex: 0,
+			blendModeDropdownDisabled: true,
+			layers: [] as Array<LayerPanelEntry>,
+			selectionRangeStartLayer: undefined as undefined | LayerPanelEntry,
+			selectionRangeEndLayer: undefined as undefined | LayerPanelEntry,
+			opacity: 100,
 			MenuDirection,
 			SeparatorType,
-			layers: [] as Array<LayerPanelEntry>,
-			selectionRangeStartLayer: undefined as LayerPanelEntry | undefined,
-			selectionRangeEndLayer: undefined as LayerPanelEntry | undefined,
-			opacity: 100,
 		};
 	},
 	components: {

client/web/src/components/widgets/floating-menus/MenuList.vue

@@ -129,6 +129,7 @@ export type MenuListEntries = Array<MenuListEntry>;
 export type SectionsOfMenuListEntries = Array<MenuListEntries>;
 
 interface MenuListEntryData {
+	value?: string;
 	label?: string;
 	icon?: string;
 	// TODO: Add `checkbox` (which overrides any `icon`)

client/web/src/components/widgets/inputs/DropdownInput.vue

@@ -1,15 +1,16 @@
 <template>
 	<div class="dropdown-input">
-		<div class="dropdown-box" :style="{ minWidth: `${minWidth}px` }" @click="clickDropdownBox" data-hover-menu-spawner>
+		<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="clickDropdownBox" data-hover-menu-spawner>
 			<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
 		</div>
 		<MenuList
-			:menuEntries="menuEntries"
 			v-model:active-entry="activeEntry"
-			:direction="MenuDirection.Bottom"
+			@update:activeEntry="activeEntryChanged"
 			@width-changed="onWidthChanged"
+			:menuEntries="menuEntries"
+			:direction="MenuDirection.Bottom"
 			:drawIcon="drawIcon"
 			:scrollable="true"
 			ref="menuList"
@@ -66,6 +67,18 @@
 		&.open {
 			border-radius: 2px 2px 0 0;
 		}
+
+		&.disabled {
+			background: var(--color-2-mildblack);
+
+			span {
+				color: var(--color-8-uppergray);
+			}
+
+			svg {
+				fill: var(--color-8-uppergray);
+			}
+		}
 	}
 
 	.menu-list .floating-menu-container .floating-menu-content {
@@ -83,22 +96,36 @@ import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.
 export default defineComponent({
 	props: {
 		menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
-		default: { type: Object as PropType<MenuListEntry>, required: true },
+		selectedIndex: { type: Number, required: true },
 		drawIcon: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
 	},
 	data() {
 		return {
-			activeEntry: this.default,
+			activeEntry: this.menuEntries.flat()[this.selectedIndex],
 			MenuDirection,
 			minWidth: 0,
 		};
 	},
-	methods: {
-		clickDropdownBox() {
-			(this.$refs.menuList as typeof MenuList).setOpen();
+	watch: {
+		// Called only when `selectedIndex` is changed from outside this component (with v-model)
+		selectedIndex(newSelectedIndex: number) {
+			const entries = this.menuEntries.flat();
+
+			if (newSelectedIndex >= 0 && newSelectedIndex < entries.length) {
+				this.activeEntry = entries[newSelectedIndex];
+			} else {
+				this.activeEntry = { label: "-" };
+			}
 		},
-		setActiveEntry(newActiveEntry: MenuListEntry) {
-			this.activeEntry = newActiveEntry;
+	},
+	methods: {
+		// Called only when `activeEntry` is changed from the child MenuList component via user input
+		activeEntryChanged(newActiveEntry: MenuListEntry) {
+			this.$emit("update:selectedIndex", this.menuEntries.flat().indexOf(newActiveEntry));
+		},
+		clickDropdownBox() {
+			if (!this.disabled) (this.$refs.menuList as typeof MenuList).setOpen();
 		},
 		onWidthChanged(newWidth: number) {
 			this.minWidth = newWidth;

client/web/src/utilities/response-handler.ts

@@ -201,9 +201,53 @@ function newSetCanvasRotation(input: any): SetCanvasRotation {
 	};
 }
 
+export enum BlendMode {
+	Normal = "normal",
+	Multiply = "multiply",
+	Darken = "darken",
+	ColorBurn = "color-burn",
+	Screen = "screen",
+	Lighten = "lighten",
+	ColorDodge = "color-dodge",
+	Overlay = "overlay",
+	SoftLight = "soft-light",
+	HardLight = "hard-light",
+	Difference = "difference",
+	Exclusion = "exclusion",
+	Hue = "hue",
+	Saturation = "saturation",
+	Color = "color",
+	Luminosity = "luminosity",
+}
+function newBlendMode(input: string): BlendMode {
+	const blendMode = {
+		Normal: BlendMode.Normal,
+		Multiply: BlendMode.Multiply,
+		Darken: BlendMode.Darken,
+		ColorBurn: BlendMode.ColorBurn,
+		Screen: BlendMode.Screen,
+		Lighten: BlendMode.Lighten,
+		ColorDodge: BlendMode.ColorDodge,
+		Overlay: BlendMode.Overlay,
+		SoftLight: BlendMode.SoftLight,
+		HardLight: BlendMode.HardLight,
+		Difference: BlendMode.Difference,
+		Exclusion: BlendMode.Exclusion,
+		Hue: BlendMode.Hue,
+		Saturation: BlendMode.Saturation,
+		Color: BlendMode.Color,
+		Luminosity: BlendMode.Luminosity,
+	}[input];
+
+	if (!blendMode) throw new Error(`Invalid blend mode "${blendMode}"`);
+
+	return blendMode;
+}
+
 export interface LayerPanelEntry {
 	name: string;
 	visible: boolean;
+	blend_mode: BlendMode;
 	layer_type: LayerType;
 	path: BigUint64Array;
 	layer_data: LayerData;
@@ -213,6 +257,7 @@ function newLayerPanelEntry(input: any): LayerPanelEntry {
 	return {
 		name: input.name,
 		visible: input.visible,
+		blend_mode: newBlendMode(input.blend_mode),
 		layer_type: newLayerType(input.layer_type),
 		layer_data: newLayerData(input.layer_data),
 		path: new BigUint64Array(input.path.map((n: number) => BigInt(n))),