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

Add the Pivot Assist widget

Browse Source 
Part of #525
This commit is contained in:
Keavon Chambers
2022-08-29 00:08:01 -07:00
parent 440a9a6dd6
commit 1e723b8c86
10 changed files with 199 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/WidgetRow.vue
+3
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,
frontend/src/components/widgets/assists/PivotAssist.vue
+114
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>