Frontend fixed to render changes to working colors when changed from backend (#180)

* Backend and Frontend modification to show working color mods

* Remove comments & change precedence for tool and doc actions

* Add keybind for resetting work colors

* Minor Frontend changes
This commit is contained in:
akshay1992kalbhor
2021-06-12 21:30:31 +05:30
committed by GitHub
parent 0e488d99ff
commit e867f4d7fc
5 changed files with 58 additions and 8 deletions

View File

@@ -70,6 +70,7 @@ import { rgbToDecimalRgb } from "@/lib/utils";
import { defineComponent } from "vue";
import ColorPicker from "../floating-menus/ColorPicker.vue";
import FloatingMenu, { MenuDirection, MenuType } from "../floating-menus/FloatingMenu.vue";
import { ResponseType, registerResponseHandler, Response, UpdateWorkingColors } from "../../../response-handler";
const wasm = import("../../../../wasm/pkg");
@@ -127,6 +128,14 @@ export default defineComponent({
mounted() {
this.$watch("primaryColor", this.updatePrimaryColor, { immediate: true });
this.$watch("secondaryColor", this.updateSecondaryColor, { immediate: true });
registerResponseHandler(ResponseType.UpdateWorkingColors, (responseData: Response) => {
const colorData = responseData as UpdateWorkingColors;
if (!colorData) return;
const { primary, secondary } = colorData;
this.primaryColor = { r: primary.red, g: primary.green, b: primary.blue, a: primary.alpha };
this.secondaryColor = { r: secondary.red, g: secondary.green, b: secondary.blue, a: secondary.alpha };
});
},
});
</script>

View File

@@ -16,6 +16,7 @@ export enum ResponseType {
ExpandFolder = "ExpandFolder",
CollapseFolder = "CollapseFolder",
SetActiveTool = "SetActiveTool",
UpdateWorkingColors = "UpdateWorkingColors",
}
export function attachResponseHandlerToPage() {
@@ -55,12 +56,35 @@ function parseResponse(responseType: string, data: any): Response {
return newUpdateCanvas(data.UpdateCanvas);
case "ExportDocument":
return newExportDocument(data.ExportDocument);
case "UpdateWorkingColors":
return newUpdateWorkingColors(data.UpdateWorkingColors);
default:
throw new Error(`Unrecognized origin/responseType pair: ${origin}, ${responseType}`);
}
}
export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder;
export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors;
export interface Color {
red: number;
green: number;
blue: number;
alpha: number;
}
function newColor(input: any): Color {
return { red: input.red * 255, green: input.green * 255, blue: input.blue * 255, alpha: input.alpha * 255 };
}
export interface UpdateWorkingColors {
primary: Color;
secondary: Color;
}
function newUpdateWorkingColors(input: any): UpdateWorkingColors {
return {
primary: newColor(input.primary),
secondary: newColor(input.secondary),
};
}
export interface SetActiveTool {
tool_name: string;