From 47af8d9bed6f2d922e22ef6d0ed94ffbcbf2ef9b Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 12 Aug 2021 21:43:50 -0700 Subject: [PATCH] Disallow snake_case variable names in frontend --- frontend/.eslintrc.js | 2 +- frontend/src/components/panels/Document.vue | 27 +++++++------------ frontend/src/components/panels/LayerTree.vue | 17 +++++------- .../widgets/inputs/SwatchPairInput.vue | 8 +++--- .../widgets/options/ToolOptions.vue | 7 +++-- frontend/src/utilities/documents.ts | 3 +-- frontend/src/utilities/input.ts | 6 ++--- frontend/src/utilities/response-handler.ts | 5 ++-- 8 files changed, 29 insertions(+), 46 deletions(-) diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 3182ebcf..d011e0a4 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -36,7 +36,7 @@ module.exports = { "@typescript-eslint/camelcase": "off", "@typescript-eslint/no-use-before-define": "off", "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }], - camelcase: ["error", { allow: ["^(?:[a-z]+_)*[a-z]+$"] }], + camelcase: ["error", { properties: "always" }], "prettier-vue/prettier": [ "error", { diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue index 1abfdfa2..4093d478 100644 --- a/frontend/src/components/panels/Document.vue +++ b/frontend/src/components/panels/Document.vue @@ -260,29 +260,24 @@ export default defineComponent({ this.canvasSvgWidth = `${width}px`; this.canvasSvgHeight = `${height}px`; - const { viewport_resize } = await wasm; - viewport_resize(width, height); + (await wasm).viewport_resize(width, height); }, async canvasMouseDown(e: MouseEvent) { - const { on_mouse_down } = await wasm; const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey); - on_mouse_down(e.offsetX, e.offsetY, e.buttons, modifiers); + (await wasm).on_mouse_down(e.offsetX, e.offsetY, e.buttons, modifiers); }, async canvasMouseUp(e: MouseEvent) { - const { on_mouse_up } = await wasm; const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey); - on_mouse_up(e.offsetX, e.offsetY, e.buttons, modifiers); + (await wasm).on_mouse_up(e.offsetX, e.offsetY, e.buttons, modifiers); }, async canvasMouseMove(e: MouseEvent) { - const { on_mouse_move } = await wasm; const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey); - on_mouse_move(e.offsetX, e.offsetY, modifiers); + (await wasm).on_mouse_move(e.offsetX, e.offsetY, modifiers); }, async canvasMouseScroll(e: WheelEvent) { e.preventDefault(); - const { on_mouse_scroll } = await wasm; const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey); - on_mouse_scroll(e.deltaX, e.deltaY, e.deltaZ, modifiers); + (await wasm).on_mouse_scroll(e.deltaX, e.deltaY, e.deltaZ, modifiers); }, async setCanvasZoom(newZoom: number) { (await wasm).set_canvas_zoom(newZoom / 100); @@ -294,20 +289,16 @@ export default defineComponent({ (await wasm).decrease_canvas_zoom(); }, async setRotation(newRotation: number) { - const { set_rotation } = await wasm; - set_rotation(newRotation * (Math.PI / 180)); + (await wasm).set_rotation(newRotation * (Math.PI / 180)); }, async selectTool(toolName: string) { - const { select_tool } = await wasm; - select_tool(toolName); + (await wasm).select_tool(toolName); }, async swapWorkingColors() { - const { swap_colors } = await wasm; - swap_colors(); + (await wasm).swap_colors(); }, async resetWorkingColors() { - const { reset_colors } = await wasm; - reset_colors(); + (await wasm).reset_colors(); }, download(filename: string, fileData: string) { const svgBlob = new Blob([fileData], { type: "image/svg+xml;charset=utf-8" }); diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue index 82448772..ccda8e4f 100644 --- a/frontend/src/components/panels/LayerTree.vue +++ b/frontend/src/components/panels/LayerTree.vue @@ -176,19 +176,16 @@ export default defineComponent({ props: {}, methods: { async toggleLayerVisibility(path: BigUint64Array) { - const { toggle_layer_visibility } = await wasm; - toggle_layer_visibility(path); + (await wasm).toggle_layer_visibility(path); }, async setLayerBlendMode() { const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value as BlendMode; if (blendMode) { - const { set_blend_mode_for_selected_layers } = await wasm; - set_blend_mode_for_selected_layers(blendMode); + (await wasm).set_blend_mode_for_selected_layers(blendMode); } }, async setLayerOpacity() { - const { set_opacity_for_selected_layers } = await wasm; - set_opacity_for_selected_layers(this.opacity); + (await wasm).set_opacity_for_selected_layers(this.opacity); }, async handleControlClick(clickedLayer: LayerPanelEntry) { const index = this.layers.indexOf(clickedLayer); @@ -228,8 +225,7 @@ export default defineComponent({ this.selectionRangeStartLayer = undefined; this.selectionRangeEndLayer = undefined; - const { deselect_all_layers } = await wasm; - 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()); @@ -263,8 +259,7 @@ export default defineComponent({ } i += 1; }); - const { select_layers } = await wasm; - select_layers(output); + (await wasm).select_layers(output); }, setBlendModeForSelectedLayers() { const selected = this.layers.filter((layer) => layer.layer_data.selected); @@ -332,7 +327,7 @@ export default defineComponent({ const index = this.layers.findIndex((layer: LayerPanelEntry) => { const pathLengthsEqual = responsePath.length === layer.path.length; - return pathLengthsEqual && responsePath.every((layer_id, i) => layer_id === layer.path[i]); + return pathLengthsEqual && responsePath.every((layerId, i) => layerId === layer.path[i]); }); if (index >= 0) this.layers[index] = responseLayer; diff --git a/frontend/src/components/widgets/inputs/SwatchPairInput.vue b/frontend/src/components/widgets/inputs/SwatchPairInput.vue index f122a1fb..7c9cacec 100644 --- a/frontend/src/components/widgets/inputs/SwatchPairInput.vue +++ b/frontend/src/components/widgets/inputs/SwatchPairInput.vue @@ -108,25 +108,25 @@ export default defineComponent({ }, async updatePrimaryColor() { - const { update_primary_color, Color } = await wasm; + const { Color } = await wasm; let color = this.primaryColor; const button = this.getRef("primaryButton"); button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`); color = rgbToDecimalRgb(this.primaryColor); - update_primary_color(new Color(color.r, color.g, color.b, color.a)); + (await wasm).update_primary_color(new Color(color.r, color.g, color.b, color.a)); }, async updateSecondaryColor() { - const { update_secondary_color, Color } = await wasm; + const { Color } = await wasm; let color = this.secondaryColor; const button = this.getRef("secondaryButton"); button.style.setProperty("--swatch-color", `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`); color = rgbToDecimalRgb(this.secondaryColor); - update_secondary_color(new Color(color.r, color.g, color.b, color.a)); + (await wasm).update_secondary_color(new Color(color.r, color.g, color.b, color.a)); }, }, data() { diff --git a/frontend/src/components/widgets/options/ToolOptions.vue b/frontend/src/components/widgets/options/ToolOptions.vue index b6647c03..094c1b31 100644 --- a/frontend/src/components/widgets/options/ToolOptions.vue +++ b/frontend/src/components/widgets/options/ToolOptions.vue @@ -46,13 +46,12 @@ export default defineComponent({ // and updating a widget should send the whole updated struct to the backend. // Later, it could send a single-field update to the backend. - const { set_tool_options } = await wasm; // This is a placeholder call, using the Shape tool as an example - set_tool_options(this.$props.activeTool || "", { Shape: { shape_type: { Polygon: { vertices: newValue } } } }); + // eslint-disable-next-line camelcase + (await wasm).set_tool_options(this.$props.activeTool || "", { Shape: { shape_type: { Polygon: { vertices: newValue } } } }); }, async sendToolMessage(message: string | object) { - const { send_tool_message } = await wasm; - send_tool_message(this.$props.activeTool || "", message); + (await wasm).send_tool_message(this.$props.activeTool || "", message); }, handleIconButtonAction(option: IconButtonWidget) { if (option.message) { diff --git a/frontend/src/utilities/documents.ts b/frontend/src/utilities/documents.ts index 2806904c..e493be32 100644 --- a/frontend/src/utilities/documents.ts +++ b/frontend/src/utilities/documents.ts @@ -13,8 +13,7 @@ const state = reactive({ }); export async function selectDocument(tabIndex: number) { - const { select_document } = await wasm; - select_document(tabIndex); + (await wasm).select_document(tabIndex); } export async function closeDocumentWithConfirmation(tabIndex: number) { diff --git a/frontend/src/utilities/input.ts b/frontend/src/utilities/input.ts index 9ae4f677..3a65b3d1 100644 --- a/frontend/src/utilities/input.ts +++ b/frontend/src/utilities/input.ts @@ -34,9 +34,8 @@ export function shouldRedirectKeyboardEventToBackend(e: KeyboardEvent): boolean export async function handleKeyDown(e: KeyboardEvent) { if (shouldRedirectKeyboardEventToBackend(e)) { e.preventDefault(); - const { on_key_down } = await wasm; const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey); - on_key_down(e.key, modifiers); + (await wasm).on_key_down(e.key, modifiers); return; } @@ -52,9 +51,8 @@ export async function handleKeyDown(e: KeyboardEvent) { export async function handleKeyUp(e: KeyboardEvent) { if (shouldRedirectKeyboardEventToBackend(e)) { e.preventDefault(); - const { on_key_up } = await wasm; const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey); - on_key_up(e.key, modifiers); + (await wasm).on_key_up(e.key, modifiers); } } diff --git a/frontend/src/utilities/response-handler.ts b/frontend/src/utilities/response-handler.ts index 53dc31e1..bf184078 100644 --- a/frontend/src/utilities/response-handler.ts +++ b/frontend/src/utilities/response-handler.ts @@ -1,6 +1,7 @@ -import { reactive } from "vue"; - /* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable camelcase */ + +import { reactive } from "vue"; type ResponseCallback = (responseData: Response) => void; type ResponseMap = {