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

Refactor ToolOptions to ToolSettings

Browse Source
This commit is contained in:
Henry Sloan
2021-07-20 22:38:02 -04:00
parent 21a1046d9b
commit 651161fd16
2 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/panels/Document.vue
+3 -3
View File
@@ -6,7 +6,7 @@
<Separator :type="SeparatorType.Section" /> <Separator :type="SeparatorType.Section" />
<ToolOptions :activeTool="activeTool" /> <ToolSettings :activeTool="activeTool" />
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="right side"> <div class="right side">
@@ -213,7 +213,7 @@ import RadioInput from "@/components/widgets/inputs/RadioInput.vue";
import NumberInput from "@/components/widgets/inputs/NumberInput.vue"; import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue"; import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue"; import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
import ToolOptions from "@/components/widgets/options/ToolOptions.vue"; import ToolSettings from "@/components/widgets/options/ToolSettings.vue";
import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue"; import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
const modeMenuEntries: SectionsOfMenuListEntries = [ const modeMenuEntries: SectionsOfMenuListEntries = [
@@ -360,7 +360,7 @@ export default defineComponent({
NumberInput, NumberInput,
DropdownInput, DropdownInput,
OptionalInput, OptionalInput,
ToolOptions, ToolSettings,
}, },
}); });
</script> </script>
client/web/src/components/widgets/options/ToolOptions.vue → client/web/src/components/widgets/options/ToolSettings.vue
+18 -18
View File
@@ -1,19 +1,19 @@
<template> <template>
<div class="tool-options"> <div class="tool-settings">
<template v-for="(option, index) in optionsMap.get(activeTool) || []" :key="index"> <template v-for="(setting, index) in settingsMap.get(activeTool) || []" :key="index">
<IconButton v-if="option.kind === 'icon'" :icon="option.icon" :size="24" :title="option.title" /> <IconButton v-if="setting.kind === 'icon'" :icon="setting.icon" :size="24" :title="setting.title" />
<Separator v-if="option.kind === 'separator'" :type="option.type" /> <Separator v-if="setting.kind === 'separator'" :type="setting.type" />
<PopoverButton v-if="option.kind === 'popover'"> <PopoverButton v-if="setting.kind === 'popover'">
<h3>{{ option.title }}</h3> <h3>{{ setting.title }}</h3>
<p>{{ option.placeholder_text }}</p> <p>{{ setting.placeholder_text }}</p>
</PopoverButton> </PopoverButton>
<NumberInput v-if="option.kind === 'number'" :callback="option.callback" :initialValue="option.initial" :step="option.step" :min="option.min" :updateOnCallback="true" /> <NumberInput v-if="setting.kind === 'number'" :callback="setting.callback" :initialValue="setting.initial" :step="setting.step" :min="setting.min" :updateOnCallback="true" />
</template> </template>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.tool-options { .tool-settings {
height: 100%; height: 100%;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
@@ -30,29 +30,29 @@ import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
const wasm = import("@/../wasm/pkg"); const wasm = import("@/../wasm/pkg");
type ToolOptionsList = Array<ToolOptions>; type ToolSettingsList = Array<ToolSettings>;
type ToolOptionsMap = Map<string, ToolOptionsList>; type ToolSettingsMap = Map<string, ToolSettingsList>;
type ToolOptions = IconOption | SeparatorOption | PopoverOption | NumberOption; type ToolSettings = IconSetting | SeparatorSetting | PopoverSetting | NumberSetting;
interface IconOption { interface IconSetting {
kind: "icon"; kind: "icon";
icon: string; icon: string;
title: string; title: string;
} }
interface SeparatorOption { interface SeparatorSetting {
kind: "separator"; kind: "separator";
type: SeparatorType; type: SeparatorType;
} }
interface PopoverOption { interface PopoverSetting {
kind: "popover"; kind: "popover";
title: string; title: string;
placeholder_text: string; placeholder_text: string;
} }
interface NumberOption { interface NumberSetting {
kind: "number"; kind: "number";
initial: number; initial: number;
step: number; step: number;
@@ -76,7 +76,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
optionsMap: new Map([ settingsMap: new Map([
[ [
"Select", "Select",
[ [
@@ -117,7 +117,7 @@ export default defineComponent({
], ],
], ],
["Shape", [{ kind: "number", initial: 6, step: 1, min: 3, callback: this.setToolSettings }]], ["Shape", [{ kind: "number", initial: 6, step: 1, min: 3, callback: this.setToolSettings }]],
]) as ToolOptionsMap, ]) as ToolSettingsMap,
SeparatorType, SeparatorType,
}; };
}, },