Viewport canvas navigation with modifier keys and zoom widget (#229)

* Add rotation around the center

* Document transform centred

* Fix drawing hexagon on rotated document

* Format

* Fix translation on rotated document

* Remove logging

* Rotate around centre of viewport

* Rotate with shift + MMB drag

* Zoom with +/- keys

* Rotation input field

* Implement frontend zoom buttons

* Zoom with ctrl + MMB

* Format

* Update number inputs

* Require Ctrl + Plus / Minus key

* Ctrl scroll

* Update zoom -> Multiply Zoom

* Fix typo

* More fixing typo

* Remove :v-on

* Add mouse scroll X

* Scrolling on document

* Refactor

* Format

* Fix ctrl + plus/minus to zoom

* Reduce zoom sensitivity

* Ctrl + shift + mmb drag = snap rotate

* Further reduce zoom speed

* Add ctrl + number key to change zoom

* Switch Ctrl and Shift for zoom and rotate

* Fix compile errors

* Format JS

* Add increment to snap angle

* Edit getting layerdata functions

* Pass viewport size directily into create_document_transform_from_layerdata

* Add to_dvec2()

* Refactor get_transform

* Get -> Calculate

* Add consts

* Use to_radians

* Remove get from function names

* Use .entry when getting layerdata that does not exist

* Fix distance scroll calculations

* Fix zooming.

* Remove 'Violation' in chrome

* Fix compile errors
This commit is contained in:
0HyperCube
2021-07-12 23:50:10 -07:00
committed by Keavon Chambers
parent 1aebeabb3a
commit cd45a8d275
22 changed files with 442 additions and 73 deletions
+26 -2
View File
@@ -21,6 +21,8 @@ export enum ResponseType {
CloseDocument = "CloseDocument",
UpdateWorkingColors = "UpdateWorkingColors",
PromptCloseConfirmationModal = "PromptCloseConfirmationModal",
SetZoom = "SetZoom",
SetRotation = "SetRotation",
}
export function attachResponseHandlerToPage() {
@@ -64,6 +66,10 @@ function parseResponse(responseType: string, data: any): Response {
return newCloseDocument(data.CloseDocument);
case "UpdateCanvas":
return newUpdateCanvas(data.UpdateCanvas);
case "SetZoom":
return newSetZoom(data.SetZoom);
case "SetRotation":
return newSetRotation(data.SetRotation);
case "ExportDocument":
return newExportDocument(data.ExportDocument);
case "UpdateWorkingColors":
@@ -71,11 +77,11 @@ function parseResponse(responseType: string, data: any): Response {
case "PromptCloseConfirmationModal":
return {};
default:
throw new Error(`Unrecognized origin/responseType pair: ${origin}, ${responseType}`);
throw new Error(`Unrecognized origin/responseType pair: ${origin}, '${responseType}'`);
}
}
export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors;
export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors | SetZoom | SetRotation;
export interface CloseDocument {
document_index: number;
@@ -175,6 +181,24 @@ function newExpandFolder(input: any): ExpandFolder {
};
}
export interface SetZoom {
new_zoom: number;
}
function newSetZoom(input: any): SetZoom {
return {
new_zoom: input.new_zoom,
};
}
export interface SetRotation {
new_radians: number;
}
function newSetRotation(input: any): SetRotation {
return {
new_radians: input.new_radians,
};
}
export interface LayerPanelEntry {
name: string;
visible: boolean;