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

Add the Pivot Assist widget

Browse source 
Part of #525
This commit is contained in:
Keavon Chambers 2022-08-29 00:07:38 -07:00
parent 41c137ed1b
commit 0f6f3be6e7
10 changed files with 199 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/components/widgets/WidgetRow.vue
View file

@ -23,6 +23,7 @@
:incrementCallbackDecrease="() => updateLayout(component.widgetId, 'Decrement')"
/>
<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
<PivotAssist v-if="component.props.kind === 'PivotAssist'" v-bind="component.props" @update:position="(value: string) => updateLayout(component.widgetId, value)" />
<PopoverButton v-if="component.props.kind === 'PopoverButton'" v-bind="component.props">
<h3>{{ (component.props as any).header }}</h3>
<p>{{ (component.props as any).text }}</p>
@ -75,6 +76,7 @@ import { defineComponent, type PropType } from "vue";
import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import TextButton from "@/components/widgets/buttons/TextButton.vue";
@ -134,6 +136,7 @@ export default defineComponent({
IconLabel,
NumberInput,
OptionalInput,
PivotAssist,
PopoverButton,
RadioInput,
Separator,

114
frontend/src/components/widgets/assists/PivotAssist.vue Normal file
View file

@ -0,0 +1,114 @@
<template>
<div class="pivot-assist">
<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }"></button>
<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }"><div></div></button>
<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }"><div></div></button>
<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }"><div></div></button>
<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }"><div></div></button>
<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }"><div></div></button>
<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }"><div></div></button>
<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }"><div></div></button>
<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }"><div></div></button>
</div>
</template>
<style lang="scss">
.pivot-assist {
position: relative;
flex: 0 0 auto;
width: 24px;
height: 24px;
button {
position: absolute;
width: 5px;
height: 5px;
margin: 0;
padding: 0;
outline: none;
background: none;
border: 1px solid var(--color-7-middlegray);
&:hover {
border-color: transparent;
background: var(--color-6-lowergray);
}
&.active {
border-color: transparent;
background: var(--color-f-white);
}
&.col-1::before,
&.col-2::before {
content: "";
pointer-events: none;
width: 2px;
height: 0;
border-top: 1px solid var(--color-7-middlegray);
position: absolute;
top: 1px;
right: -3px;
}
&.row-1::after,
&.row-2::after {
content: "";
pointer-events: none;
width: 0;
height: 2px;
border-left: 1px solid var(--color-7-middlegray);
position: absolute;
bottom: -3px;
right: 1px;
}
&.row-1 {
top: 3px;
}
&.col-1 {
left: 3px;
}
&.row-2 {
top: 10px;
}
&.col-2 {
left: 10px;
}
&.row-3 {
top: 17px;
}
&.col-3 {
left: 17px;
}
// Click targets that extend 1px beyond the borders of each square
div {
width: 100%;
height: 100%;
padding: 2px;
margin: -2px;
}
}
}
</style>
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import { type PivotPosition } from "@/wasm-communication/messages";
export default defineComponent({
emits: ["update:position"],
props: {
position: { type: String as PropType<string>, required: true },
},
methods: {
setPosition(newPosition: PivotPosition) {
this.$emit("update:position", newPosition);
},
},
});
</script>

7
frontend/src/wasm-communication/messages.ts
View file

@ -612,6 +612,12 @@ export class TextLabel extends WidgetProps {
multiline!: boolean;
}
export type PivotPosition = "None" | "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
export class PivotAssist extends WidgetProps {
position!: PivotPosition;
}
// WIDGET
const widgetSubTypes = [
@ -631,6 +637,7 @@ const widgetSubTypes = [
{ value: TextButton, name: "TextButton" },
{ value: TextInput, name: "TextInput" },
{ value: TextLabel, name: "TextLabel" },
{ value: PivotAssist, name: "PivotAssist" },
];
export type WidgetPropsSet = InstanceType<typeof widgetSubTypes[number]["value"]>;