mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-03 21:08:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add a stroke width option to the Line Tool (#355)

Browse source 
* Add a stroke width option to the Line Tool

* Fix title case for line options

* Add px unit to line stroke width

* Add stroke width to pen tool

* Rename stroke width to weight

* Change number input width to min-width

* Remove the word "stroke" from "stroke weight"
This commit is contained in:
Henry Sloan 2021-08-23 21:55:59 -04:00 • committed by Keavon Chambers
parent 0a7c6df222
commit 44f244fb5f
5 changed files with 33 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/components/widgets/inputs/NumberInput.vue
View file

@ -19,7 +19,7 @@
<style lang="scss">
.number-input {
width: 80px;
min-width: 80px;
height: 24px;
position: relative;
border-radius: 2px;
@ -38,7 +38,8 @@
input {
flex: 1 1 100%;
width: 100%;
width: 0;
min-width: 30px;
height: 18px;
line-height: 18px;
margin: 0 8px;

14
frontend/src/components/widgets/options/ToolOptions.vue
View file

@ -41,7 +41,7 @@ export default defineComponent({
},
computed: {},
methods: {
async setToolOptions(newValue: number) {
async setShapeOptions(newValue: number) {
// TODO: Each value-input widget (i.e. not a button) should map to a field in an options struct,
// and updating a widget should send the whole updated struct to the backend.
// Later, it could send a single-field update to the backend.
@ -50,6 +50,14 @@ export default defineComponent({
// eslint-disable-next-line camelcase
(await wasm).set_tool_options(this.$props.activeTool || "", { Shape: { shape_type: { Polygon: { vertices: newValue } } } });
},
async setLineOptions(newValue: number) {
// eslint-disable-next-line camelcase
(await wasm).set_tool_options(this.$props.activeTool || "", { Line: { weight: newValue } });
},
async setPenOptions(newValue: number) {
// eslint-disable-next-line camelcase
(await wasm).set_tool_options(this.$props.activeTool || "", { Pen: { weight: newValue } });
},
async sendToolMessage(message: string | object) {
(await wasm).send_tool_message(this.$props.activeTool || "", message);
},
@ -126,7 +134,9 @@ export default defineComponent({
props: {},
},
],
Shape: [{ kind: "NumberInput", callback: this.setToolOptions, props: { value: 6, min: 3, isInteger: true, label: "Sides" } }],
Shape: [{ kind: "NumberInput", callback: this.setShapeOptions, props: { value: 6, min: 3, isInteger: true, label: "Sides" } }],
Line: [{ kind: "NumberInput", callback: this.setLineOptions, props: { value: 5, min: 1, isInteger: true, unit: " px", label: "Weight" } }],
Pen: [{ kind: "NumberInput", callback: this.setPenOptions, props: { value: 5, min: 1, isInteger: true, unit: " px", label: "Weight" } }],
};
return {