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

Add JSON-backed options widget

Browse Source
This commit is contained in:
Henry Sloan
2021-07-18 12:06:57 -04:00
parent 131256ba0b
commit 3203f7bcdf
2 changed files with 124 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,49 +6,7 @@
<Separator :type="SeparatorType.Section" />
<IconButton :icon="'AlignHorizontalLeft'" :size="24" title="Horizontal Align Left" />
<IconButton :icon="'AlignHorizontalCenter'" :size="24" title="Horizontal Align Center" />
<IconButton :icon="'AlignHorizontalRight'" :size="24" gapAfter title="Horizontal Align Right" />
<Separator :type="SeparatorType.Unrelated" />
<IconButton :icon="'AlignVerticalTop'" :size="24" title="Vertical Align Top" />
<IconButton :icon="'AlignVerticalCenter'" :size="24" title="Vertical Align Center" />
<IconButton :icon="'AlignVerticalBottom'" :size="24" title="Vertical Align Bottom" />
<Separator :type="SeparatorType.Related" />
<PopoverButton>
<h3>Align</h3>
<p>More alignment-related buttons will be here</p>
</PopoverButton>
<Separator :type="SeparatorType.Section" />
<IconButton :icon="'FlipHorizontal'" :size="24" title="Flip Horizontal" />
<IconButton :icon="'FlipVertical'" :size="24" title="Flip Vertical" />
<Separator :type="SeparatorType.Related" />
<PopoverButton>
<h3>Flip</h3>
<p>More flip-related buttons will be here</p>
</PopoverButton>
<Separator :type="SeparatorType.Section" />
<IconButton :icon="'BooleanUnion'" :size="24" title="Boolean Union" />
<IconButton :icon="'BooleanSubtractFront'" :size="24" title="Boolean Subtract Front" />
<IconButton :icon="'BooleanSubtractBack'" :size="24" title="Boolean Subtract Back" />
<IconButton :icon="'BooleanIntersect'" :size="24" title="Boolean Intersect" />
<IconButton :icon="'BooleanDifference'" :size="24" title="Boolean Difference" />
<Separator :type="SeparatorType.Related" />
<PopoverButton>
<h3>Boolean</h3>
<p>More boolean-related buttons will be here</p>
</PopoverButton>
<ToolOptions :activeTool="activeTool" />
</div>
<div class="spacer"></div>
<div class="right side">
@@ -255,6 +213,7 @@ import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
const modeMenuEntries: SectionsOfMenuListEntries = [
@@ -401,6 +360,7 @@ export default defineComponent({
NumberInput,
DropdownInput,
OptionalInput,
ToolOptions,
},
});
</script>

121
client/web/src/components/widgets/options/ToolOptions.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<div class="tool-options">
<template v-for="(option, index) in optionsMap.get(activeTool) || []" :key="index">
<IconButton v-if="option.kind === 'icon'" :icon="option.icon" :size="24" :title="option.title" />
<Separator v-if="option.kind === 'separator'" :type="option.type" />
<PopoverButton v-if="option.kind === 'popover'">
<h3>{{ option.title }}</h3>
<p>{{ option.placeholder_text }}</p>
</PopoverButton>
<NumberInput v-if="option.kind === 'number'" :initialValue="option.initial" :step="option.step" :updateOnCallback="false" />
</template>
</div>
</template>
<style lang="scss">
.tool-options {
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import Separator, { SeparatorType } from "@/components/widgets/separators/Separator.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
type ToolOptionsList = Array<ToolOptions>;
type ToolOptionsMap = Map<string, ToolOptionsList>;
type ToolOptions = IconOption | SeparatorOption | PopoverOption | NumberOption;
interface IconOption {
kind: "icon";
icon: string;
title: string;
}
interface SeparatorOption {
kind: "separator";
type: SeparatorType;
}
interface PopoverOption {
kind: "popover";
title: string;
placeholder_text: string;
}
interface NumberOption {
kind: "number";
initial: number;
step: number;
}
const optionsMap: ToolOptionsMap = new Map([
[
"Select",
[
{ kind: "icon", icon: "AlignHorizontalLeft", title: "Horizontal Align Left" },
{ kind: "icon", icon: "AlignHorizontalCenter", title: "Horizontal Align Center" },
{ kind: "icon", icon: "AlignHorizontalRight", title: "Horizontal Align Right" },
{ kind: "separator", type: SeparatorType.Unrelated },
{ kind: "icon", icon: "AlignVerticalTop", title: "Vertical Align Top" },
{ kind: "icon", icon: "AlignVerticalCenter", title: "Vertical Align Center" },
{ kind: "icon", icon: "AlignVerticalBottom", title: "Vertical Align Bottom" },
{ kind: "separator", type: SeparatorType.Related },
{ kind: "popover", title: "Align", placeholder_text: "More alignment-related buttons will be here" },
{ kind: "separator", type: SeparatorType.Section },
{ kind: "icon", icon: "FlipHorizontal", title: "Flip Horizontal" },
{ kind: "icon", icon: "FlipVertical", title: "Flip Vertical" },
{ kind: "separator", type: SeparatorType.Related },
{ kind: "popover", title: "Flip", placeholder_text: "More flip-related buttons will be here" },
{ kind: "separator", type: SeparatorType.Section },
{ kind: "icon", icon: "BooleanUnion", title: "Boolean Union" },
{ kind: "icon", icon: "BooleanSubtractFront", title: "Boolean Subtract Front" },
{ kind: "icon", icon: "BooleanSubtractBack", title: "Boolean Subtract Back" },
{ kind: "icon", icon: "BooleanIntersect", title: "Boolean Intersect" },
{ kind: "icon", icon: "BooleanDifference", title: "Boolean Difference" },
{ kind: "separator", type: SeparatorType.Related },
{ kind: "popover", title: "Boolean", placeholder_text: "More boolean-related buttons will be here" },
],
],
["Shape", [{ kind: "number", initial: 6, step: 1 }]],
]);
export default defineComponent({
props: {
activeTool: { type: String },
},
computed: {},
methods: {},
data() {
return {
optionsMap,
SeparatorType,
};
},
components: {
Separator,
IconButton,
PopoverButton,
NumberInput,
},
});
</script>