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

Clean up and polish some code from the previous commit (#255)

Browse Source
This commit is contained in:
Keavon Chambers
2021-07-13 00:52:45 -07:00
committed by GitHub
parent 39e6893630
commit 7ae91e8330
9 changed files with 88 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -88,7 +88,7 @@
<Separator :type="SeparatorType.Section" />
<NumberInput :callback="setRotation" :initial_value="0" :step="15" :unit="`°`" :update_on_callback="false" ref="rotation" />
<NumberInput :callback="setRotation" :initialValue="0" :step="15" :unit="`°`" :updateOnCallback="false" ref="rotation" />
<Separator :type="SeparatorType.Section" />
@@ -98,7 +98,7 @@
<Separator :type="SeparatorType.Related" />
<NumberInput :callback="setZoom" :initial_value="100" :min="0.001" :increaseMultiplier="1.25" :decreaseMultiplier="0.8" :unit="`%`" :update_on_callback="false" ref="zoom" />
<NumberInput :callback="setZoom" :initialValue="100" :min="0.001" :increaseMultiplier="1.25" :decreaseMultiplier="0.8" :unit="`%`" :updateOnCallback="false" ref="zoom" />
</div>
</LayoutRow>
<LayoutRow :class="'shelf-and-viewport'">
@@ -192,7 +192,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetZoom, SetRotation } from "../../response-handler";
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetRotation } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import WorkingColors from "../widgets/WorkingColors.vue";
@@ -240,9 +240,9 @@ function makeModifiersBitfield(control: boolean, shift: boolean, alt: boolean):
export default defineComponent({
methods: {
async viewportResize() {
const { on_viewport_resize } = await wasm;
const { viewport_resize } = await wasm;
const canvas = this.$refs.canvas as HTMLDivElement;
on_viewport_resize(canvas.clientWidth, canvas.clientHeight);
viewport_resize(canvas.clientWidth, canvas.clientHeight);
},
async canvasMouseDown(e: MouseEvent) {
const { on_mouse_down } = await wasm;
@@ -266,12 +266,12 @@ export default defineComponent({
on_mouse_scroll(e.deltaX, e.deltaY, e.deltaZ, modifiers);
},
async setZoom(newZoom: number) {
const { on_set_zoom } = await wasm;
on_set_zoom(newZoom / 100);
const { set_zoom } = await wasm;
set_zoom(newZoom / 100);
},
async setRotation(newRotation: number) {
const { on_set_rotation } = await wasm;
on_set_rotation(newRotation * (Math.PI / 180));
const { set_rotation } = await wasm;
set_rotation(newRotation * (Math.PI / 180));
},
async keyDown(e: KeyboardEvent) {
if (redirectKeyboardEventToBackend(e)) {
@@ -325,8 +325,8 @@ export default defineComponent({
const toolData = responseData as SetActiveTool;
if (toolData) this.activeTool = toolData.tool_name;
});
registerResponseHandler(ResponseType.SetZoom, (responseData: Response) => {
const updateData = responseData as SetZoom;
registerResponseHandler(ResponseType.SetCanvasZoom, (responseData: Response) => {
const updateData = responseData as SetCanvasZoom;
if (updateData) {
const zoomWidget = this.$refs.zoom as typeof NumberInput;
zoomWidget.setValue(updateData.new_zoom * 100);

23
client/web/src/components/widgets/inputs/NumberInput.vue
View File

@@ -98,20 +98,21 @@ import { defineComponent } from "vue";
export default defineComponent({
components: {},
props: {
initial_value: { type: Number, default: 0, required: false },
unit: { type: String, default: "", required: false },
step: { type: Number, default: 1, required: false },
increaseMultiplier: { type: Number, default: null, required: false },
decreaseMultiplier: { type: Number, default: null, required: false },
initialValue: { type: Number, default: 0 },
unit: { type: String, default: "" },
step: { type: Number, default: 1 },
displayDecimalPlaces: { type: Number, default: 3 },
increaseMultiplier: { type: Number, default: null },
decreaseMultiplier: { type: Number, default: null },
min: { type: Number, required: false },
max: { type: Number, required: false },
callback: { type: Function, required: false },
update_on_callback: { type: Boolean, default: true, required: false },
updateOnCallback: { type: Boolean, default: true },
},
data() {
return {
value: this.initial_value,
text: this.initial_value.toString() + this.unit,
value: this.initialValue,
text: this.initialValue.toString() + this.unit,
};
},
methods: {
@@ -141,14 +142,16 @@ export default defineComponent({
},
setValue(newValue: number) {
this.value = newValue;
this.text = `${Math.round(this.value)}${this.unit}`;
const roundingPower = 10 ** this.displayDecimalPlaces;
this.text = `${Math.round(this.value * roundingPower) / roundingPower}${this.unit}`;
},
updateValue(inValue: number, resetOnClamp: boolean) {
const newValue = this.clampValue(inValue, resetOnClamp);
if (this.callback) this.callback(newValue);
if (this.update_on_callback) this.setValue(newValue);
if (this.updateOnCallback) this.setValue(newValue);
},
},
});

12
client/web/src/response-handler.ts
View File

@@ -21,7 +21,7 @@ export enum ResponseType {
CloseDocument = "CloseDocument",
UpdateWorkingColors = "UpdateWorkingColors",
PromptCloseConfirmationModal = "PromptCloseConfirmationModal",
SetZoom = "SetZoom",
SetCanvasZoom = "SetCanvasZoom",
SetRotation = "SetRotation",
}
@@ -66,8 +66,8 @@ function parseResponse(responseType: string, data: any): Response {
return newCloseDocument(data.CloseDocument);
case "UpdateCanvas":
return newUpdateCanvas(data.UpdateCanvas);
case "SetZoom":
return newSetZoom(data.SetZoom);
case "SetCanvasZoom":
return newSetZoom(data.SetCanvasZoom);
case "SetRotation":
return newSetRotation(data.SetRotation);
case "ExportDocument":
@@ -81,7 +81,7 @@ function parseResponse(responseType: string, data: any): Response {
}
}
export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors | SetZoom | SetRotation;
export type Response = SetActiveTool | UpdateCanvas | DocumentChanged | CollapseFolder | ExpandFolder | UpdateWorkingColors | SetCanvasZoom | SetRotation;
export interface CloseDocument {
document_index: number;
@@ -181,10 +181,10 @@ function newExpandFolder(input: any): ExpandFolder {
};
}
export interface SetZoom {
export interface SetCanvasZoom {
new_zoom: number;
}
function newSetZoom(input: any): SetZoom {
function newSetZoom(input: any): SetCanvasZoom {
return {
new_zoom: input.new_zoom,
};

8
client/web/wasm/src/document.rs
View File

@@ -41,7 +41,7 @@ pub fn new_document() -> Result<(), JsValue> {
// TODO: Call event when the panels are resized
/// Viewport resized
#[wasm_bindgen]
pub fn on_viewport_resize(new_width: u32, new_height: u32) -> Result<(), JsValue> {
pub fn viewport_resize(new_width: u32, new_height: u32) -> Result<(), JsValue> {
let ev = InputPreprocessorMessage::ViewportResize(ViewportPosition { x: new_width, y: new_height });
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
@@ -159,14 +159,14 @@ pub fn export_document() -> Result<(), JsValue> {
/// Sets the zoom to the value
#[wasm_bindgen]
pub fn on_set_zoom(new_zoom: f64) -> Result<(), JsValue> {
let ev = DocumentMessage::SetZoom(new_zoom);
pub fn set_zoom(new_zoom: f64) -> Result<(), JsValue> {
let ev = DocumentMessage::SetCanvasZoom(new_zoom);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}
/// Sets the rotation to the new value (in radians)
#[wasm_bindgen]
pub fn on_set_rotation(new_radians: f64) -> Result<(), JsValue> {
pub fn set_rotation(new_radians: f64) -> Result<(), JsValue> {
let ev = DocumentMessage::SetRotation(new_radians);
EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(ev)).map_err(convert_error)
}