fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 10:58:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Frontend refactor to move response handler, key input handling, and more into new utilities folder (#260)

Browse Source 
Part of #124
This commit is contained in:
Keavon Chambers
2021-07-14 14:31:09 -07:00
committed by GitHub
parent 9d34aa4867
commit 726152759f
14 changed files with 80 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/web/src/components/panels/Document.vue
View File

@@ -192,7 +192,8 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetRotation } from "../../response-handler";
import { makeModifiersBitfield } from "@/utilities/input";
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetRotation } from "../../utilities/response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import WorkingColors from "../widgets/WorkingColors.vue";
@@ -217,26 +218,6 @@ const modeMenuEntries: SectionsOfMenuListEntries = [
const wasm = import("../../../wasm/pkg");
function redirectKeyboardEventToBackend(e: KeyboardEvent): boolean {
// Don't redirect user input from text entry into HTML elements
const target = e.target as HTMLElement;
if (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable) return false;
// Don't redirect a fullscreen request
if (e.key.toLowerCase() === "f11") return false;
// Don't redirect debugging tools
if (e.key.toLowerCase() === "f12") return false;
if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "c") return false;
return true;
}
function makeModifiersBitfield(control: boolean, shift: boolean, alt: boolean): number {
// eslint-disable-next-line no-bitwise
return Number(control) | (Number(shift) << 1) | (Number(alt) << 2);
}
export default defineComponent({
methods: {
async viewportResize() {
@@ -273,28 +254,11 @@ export default defineComponent({
const { set_rotation } = await wasm;
set_rotation(newRotation * (Math.PI / 180));
},
async keyDown(e: KeyboardEvent) {
if (redirectKeyboardEventToBackend(e)) {
e.preventDefault();
const { on_key_down } = await wasm;
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_key_down(e.key, modifiers);
}
},
async keyUp(e: KeyboardEvent) {
if (redirectKeyboardEventToBackend(e)) {
e.preventDefault();
const { on_key_up } = await wasm;
const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
on_key_up(e.key, modifiers);
}
},
async selectTool(toolName: string) {
const { select_tool } = await wasm;
select_tool(toolName);
},
async viewModeChanged(toolIndex: number) {
console.log(toolIndex);
function todo(_: number) {
return _;
}
@@ -341,10 +305,10 @@ export default defineComponent({
}
});
window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
// TODO: Move event listeners to `main.ts`
const canvas = this.$refs.canvas as HTMLDivElement;
canvas.addEventListener("wheel", this.canvasMouseScroll, { passive: false });
window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
window.addEventListener("resize", () => this.viewportResize());
window.addEventListener("DOMContentLoaded", () => this.viewportResize());

2
client/web/src/components/panels/LayerTree.vue
View File

@@ -104,7 +104,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../response-handler";
import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../utilities/response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import Separator, { SeparatorType } from "../widgets/Separator.vue";

3
client/web/src/components/widgets/floating-menus/ColorPicker.vue
View File

@@ -118,7 +118,8 @@
<script lang="ts">
import { defineComponent } from "vue";
import { clamp, hsvToRgb, rgbToHsv, isRGB } from "../../../lib/utils";
import { hsvToRgb, rgbToHsv, isRGB } from "@/utilities/color";
import { clamp } from "@/utilities/math";
const enum ColorPickerState {
Idle = "Idle",

6
client/web/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -66,13 +66,13 @@
</style>
<script lang="ts">
import { rgbToDecimalRgb } from "@/lib/utils";
import { rgbToDecimalRgb } from "@/utilities/color";
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";
import { ResponseType, registerResponseHandler, Response, UpdateWorkingColors } from "../../../utilities/response-handler";
const wasm = import("../../../../wasm/pkg");
const wasm = import("@/../wasm/pkg");
export default defineComponent({
components: {

2
client/web/src/components/workspace/Panel.vue
View File

@@ -150,7 +150,7 @@ import Minimap from "../panels/Minimap.vue";
import IconButton from "../widgets/buttons/IconButton.vue";
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
import { MenuDirection } from "../widgets/floating-menus/FloatingMenu.vue";
import { ResponseType, registerResponseHandler, Response } from "../../response-handler";
import { ResponseType, registerResponseHandler, Response } from "../../utilities/response-handler";
const wasm = import("../../../wasm/pkg");

2
client/web/src/components/workspace/Workspace.vue
View File

@@ -46,7 +46,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, SetActiveDocument, NewDocument, CloseDocument } from "../../response-handler";
import { ResponseType, registerResponseHandler, Response, SetActiveDocument, NewDocument, CloseDocument } from "../../utilities/response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import Panel from "./Panel.vue";