fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 06:18:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/inputs/NumberInput.vue
+37 -17
View File
@@ -2,13 +2,13 @@
<div class="number-input">
<button class="arrow left" @click="onIncrement(-1)"></button>
<button class="arrow right" @click="onIncrement(1)"></button>
<input type="text" spellcheck="false" :value="displayValue" />
<input type="text" spellcheck="false" v-model="text" @change="updateText($event.target.value)" /> />
</div>
</template>
<style lang="scss">
.number-input {
width: 64px;
width: 80px;
height: 24px;
position: relative;
border-radius: 2px;
@@ -98,37 +98,57 @@ import { defineComponent } from "vue";
export default defineComponent({
components: {},
props: {
value: { type: Number, required: true },
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 },
min: { type: Number, required: false },
max: { type: Number, required: false },
callback: { type: Function, required: false },
update_on_callback: { type: Boolean, default: true, required: false },
},
computed: {
displayValue(): string {
if (!this.unit) return this.value.toString();
return `${this.value}${this.unit}`;
},
data() {
return {
value: this.initial_value,
text: this.initial_value.toString() + this.unit,
};
},
methods: {
onIncrement(direction: number) {
const step = this.step * direction;
const newValue = this.value + step;
this.updateValue(newValue);
if (direction === 1 && this.increaseMultiplier) this.updateValue(this.value * this.increaseMultiplier, true);
else if (direction === -1 && this.decreaseMultiplier) this.updateValue(this.value * this.decreaseMultiplier, true);
else this.updateValue(this.value + this.step * direction, true);
},
updateValue(newValue: number) {
let value = newValue;
updateText(newText: string) {
const newValue = parseInt(newText, 10);
this.updateValue(newValue, true);
},
clampValue(newValue: number, resetOnClamp: boolean) {
if (!Number.isFinite(newValue)) return this.value;
let result = newValue;
if (Number.isFinite(this.min) && typeof this.min === "number") {
value = Math.max(value, this.min);
if (resetOnClamp && newValue < this.min) return this.value;
result = Math.max(result, this.min);
}
if (Number.isFinite(this.max) && typeof this.max === "number") {
value = Math.min(value, this.max);
if (resetOnClamp && newValue > this.max) return this.value;
result = Math.min(result, this.max);
}
return result;
},
setValue(newValue: number) {
this.value = newValue;
this.text = `${Math.round(this.value)}${this.unit}`;
},
updateValue(inValue: number, resetOnClamp: boolean) {
const newValue = this.clampValue(inValue, resetOnClamp);
this.$emit("update:value", value);
if (this.callback) this.callback(newValue);
if (this.update_on_callback) this.setValue(newValue);
},
},
});