Fix blend mode serialization and de-serialization to match (#400)

This commit is contained in:
mfish33 2021-12-06 11:39:40 -08:00 committed by Keavon Chambers
parent 20a4c76fd7
commit b854814076
3 changed files with 49 additions and 49 deletions

View File

@ -216,41 +216,41 @@ import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/M
const wasm = import("@/../wasm/pkg").then(panicProxy); const wasm = import("@/../wasm/pkg").then(panicProxy);
const blendModeEntries: SectionsOfMenuListEntries<BlendMode> = [ const blendModeEntries: SectionsOfMenuListEntries<BlendMode> = [
[{ label: "Normal", value: "normal" }], [{ label: "Normal", value: "Normal" }],
[ [
{ label: "Multiply", value: "multiply" }, { label: "Multiply", value: "Multiply" },
{ label: "Darken", value: "darken" }, { label: "Darken", value: "Darken" },
{ label: "Color Burn", value: "color-burn" }, { label: "Color Burn", value: "ColorBurn" },
// { label: "Linear Burn", value: "" }, // Not supported by SVG // { label: "Linear Burn", value: "" }, // Not supported by SVG
// { label: "Darker Color", value: "" }, // Not supported by SVG // { label: "Darker Color", value: "" }, // Not supported by SVG
], ],
[ [
{ label: "Screen", value: "screen" }, { label: "Screen", value: "Screen" },
{ label: "Lighten", value: "lighten" }, { label: "Lighten", value: "Lighten" },
{ label: "Color Dodge", value: "color-dodge" }, { label: "Color Dodge", value: "ColorDodge" },
// { label: "Linear Dodge (Add)", value: "" }, // Not supported by SVG // { label: "Linear Dodge (Add)", value: "" }, // Not supported by SVG
// { label: "Lighter Color", value: "" }, // Not supported by SVG // { label: "Lighter Color", value: "" }, // Not supported by SVG
], ],
[ [
{ label: "Overlay", value: "overlay" }, { label: "Overlay", value: "Overlay" },
{ label: "Soft Light", value: "soft-light" }, { label: "Soft Light", value: "SoftLight" },
{ label: "Hard Light", value: "hard-light" }, { label: "Hard Light", value: "HardLight" },
// { label: "Vivid Light", value: "" }, // Not supported by SVG // { label: "Vivid Light", value: "" }, // Not supported by SVG
// { label: "Linear Light", value: "" }, // Not supported by SVG // { label: "Linear Light", value: "" }, // Not supported by SVG
// { label: "Pin Light", value: "" }, // Not supported by SVG // { label: "Pin Light", value: "" }, // Not supported by SVG
// { label: "Hard Mix", value: "" }, // Not supported by SVG // { label: "Hard Mix", value: "" }, // Not supported by SVG
], ],
[ [
{ label: "Difference", value: "difference" }, { label: "Difference", value: "Difference" },
{ label: "Exclusion", value: "exclusion" }, { label: "Exclusion", value: "Exclusion" },
// { label: "Subtract", value: "" }, // Not supported by SVG // { label: "Subtract", value: "" }, // Not supported by SVG
// { label: "Divide", value: "" }, // Not supported by SVG // { label: "Divide", value: "" }, // Not supported by SVG
], ],
[ [
{ label: "Hue", value: "hue" }, { label: "Hue", value: "Hue" },
{ label: "Saturation", value: "saturation" }, { label: "Saturation", value: "Saturation" },
{ label: "Color", value: "color" }, { label: "Color", value: "Color" },
{ label: "Luminosity", value: "luminosity" }, { label: "Luminosity", value: "Luminosity" },
], ],
]; ];
@ -284,7 +284,7 @@ export default defineComponent({
(await wasm).toggle_layer_expansion(path); (await wasm).toggle_layer_expansion(path);
}, },
async setLayerBlendMode() { async setLayerBlendMode() {
const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value as BlendMode; const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value;
if (blendMode) { if (blendMode) {
(await wasm).set_blend_mode_for_selected_layers(blendMode); (await wasm).set_blend_mode_for_selected_layers(blendMode);
} }

View File

@ -194,22 +194,22 @@ function newPath(input: any): BigUint64Array {
} }
export type BlendMode = export type BlendMode =
| "normal" | "Normal"
| "multiply" | "Multiply"
| "darken" | "Darken"
| "color-burn" | "ColorBurn"
| "screen" | "Screen"
| "lighten" | "Lighten"
| "color-dodge" | "ColorDodge"
| "overlay" | "Overlay"
| "soft-light" | "SoftLight"
| "hard-light" | "HardLight"
| "difference" | "Difference"
| "exclusion" | "Exclusion"
| "hue" | "Hue"
| "saturation" | "Saturation"
| "color" | "Color"
| "luminosity"; | "Luminosity";
export class LayerPanelEntry { export class LayerPanelEntry {
name!: string; name!: string;

View File

@ -35,22 +35,22 @@ pub fn translate_blend_mode(blend_mode_svg_style_name: &str) -> Option<BlendMode
use BlendMode::*; use BlendMode::*;
let blend_mode = match blend_mode_svg_style_name { let blend_mode = match blend_mode_svg_style_name {
"normal" => Normal, "Normal" => Normal,
"multiply" => Multiply, "Multiply" => Multiply,
"darken" => Darken, "Darken" => Darken,
"color-burn" => ColorBurn, "ColorBurn" => ColorBurn,
"screen" => Screen, "Screen" => Screen,
"lighten" => Lighten, "Lighten" => Lighten,
"color-dodge" => ColorDodge, "ColorDodge" => ColorDodge,
"overlay" => Overlay, "Overlay" => Overlay,
"soft-light" => SoftLight, "SoftLight" => SoftLight,
"hard-light" => HardLight, "HardLight" => HardLight,
"difference" => Difference, "Difference" => Difference,
"exclusion" => Exclusion, "Exclusion" => Exclusion,
"hue" => Hue, "Hue" => Hue,
"saturation" => Saturation, "Saturation" => Saturation,
"color" => Color, "Color" => Color,
"luminosity" => Luminosity, "Luminosity" => Luminosity,
_ => return None, _ => return None,
}; };