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

Merge branch 'master' into fix_group_creation_parenting

Browse Source
This commit is contained in:
Oliver Davies
2022-01-03 02:43:16 -08:00
committed by GitHub
parent 0a27d81e85 463ff1a9d8
commit a04b699716
20 changed files with 319 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+21 -16
View File
@@ -46,9 +46,9 @@
<Separator :type="'Section'" /> <Separator :type="'Section'" />
<IconButton :action="() => this.$refs.zoom.onIncrement('Increase')" :icon="'ZoomIn'" :size="24" title="Zoom In" /> <IconButton :action="increaseCanvasZoom" :icon="'ZoomIn'" :size="24" title="Zoom In" />
<IconButton :action="() => this.$refs.zoom.onIncrement('Decrease')" :icon="'ZoomOut'" :size="24" title="Zoom Out" /> <IconButton :action="decreaseCanvasZoom" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
<IconButton :action="() => this.$refs.zoom.updateValue(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" /> <IconButton :action="() => setCanvasZoom(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
<Separator :type="'Related'" /> <Separator :type="'Related'" />
@@ -70,31 +70,36 @@
<LayoutCol :class="'shelf'"> <LayoutCol :class="'shelf'">
<div class="tools scrollable-y"> <div class="tools scrollable-y">
<ShelfItemInput icon="LayoutSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" /> <ShelfItemInput icon="LayoutSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => dialog.comingSoon(289) && selectTool('Crop')" /> <ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => (dialog.comingSoon(289), false) && selectTool('Crop')" />
<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" /> <ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
<ShelfItemInput icon="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" /> <ShelfItemInput icon="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
<Separator :type="'Section'" :direction="'Vertical'" /> <Separator :type="'Section'" :direction="'Vertical'" />
<ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => dialog.comingSoon(153) && selectTool('Text')" /> <ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => (dialog.comingSoon(153), false) && selectTool('Text')" />
<ShelfItemInput icon="ParametricFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" /> <ShelfItemInput icon="ParametricFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" />
<ShelfItemInput icon="ParametricGradientTool" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" :action="() => dialog.comingSoon() && selectTool('Gradient')" /> <ShelfItemInput
icon="ParametricGradientTool"
title="Gradient Tool (H)"
:active="activeTool === 'Gradient'"
:action="() => (dialog.comingSoon(), false) && selectTool('Gradient')"
/>
<Separator :type="'Section'" :direction="'Vertical'" /> <Separator :type="'Section'" :direction="'Vertical'" />
<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => dialog.comingSoon() && selectTool('Brush')" /> <ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => (dialog.comingSoon(), false) && selectTool('Brush')" />
<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => dialog.comingSoon() && selectTool('Heal')" /> <ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => (dialog.comingSoon(), false) && selectTool('Heal')" />
<ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => dialog.comingSoon() && selectTool('Clone')" /> <ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => (dialog.comingSoon(), false) && selectTool('Clone')" />
<ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => dialog.comingSoon() && selectTool('Patch')" /> <ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => (dialog.comingSoon(), false) && selectTool('Patch')" />
<ShelfItemInput icon="RasterBlurSharpenTool" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" :action="() => dialog.comingSoon() && selectTool('BlurSharpen')" /> <ShelfItemInput icon="RasterDetailTool" title="Detail Tool (D)" :active="activeTool === 'Detail'" :action="() => (dialog.comingSoon(), false) && selectTool('Detail')" />
<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => dialog.comingSoon() && selectTool('Relight')" /> <ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => (dialog.comingSoon(), false) && selectTool('Relight')" />
<Separator :type="'Section'" :direction="'Vertical'" /> <Separator :type="'Section'" :direction="'Vertical'" />
<ShelfItemInput icon="VectorPathTool" title="Path Tool (A)" :active="activeTool === 'Path'" :action="() => selectTool('Path')" /> <ShelfItemInput icon="VectorPathTool" title="Path Tool (A)" :active="activeTool === 'Path'" :action="() => selectTool('Path')" />
<ShelfItemInput icon="VectorPenTool" title="Pen Tool (P)" :active="activeTool === 'Pen'" :action="() => selectTool('Pen')" /> <ShelfItemInput icon="VectorPenTool" title="Pen Tool (P)" :active="activeTool === 'Pen'" :action="() => selectTool('Pen')" />
<ShelfItemInput icon="VectorFreehandTool" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" :action="() => dialog.comingSoon() && selectTool('Freehand')" /> <ShelfItemInput icon="VectorFreehandTool" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" :action="() => (dialog.comingSoon(), false) && selectTool('Freehand')" />
<ShelfItemInput icon="VectorSplineTool" title="Spline Tool" :active="activeTool === 'Spline'" :action="() => dialog.comingSoon() && selectTool('Spline')" /> <ShelfItemInput icon="VectorSplineTool" title="Spline Tool" :active="activeTool === 'Spline'" :action="() => (dialog.comingSoon(), false) && selectTool('Spline')" />
<ShelfItemInput icon="VectorLineTool" title="Line Tool (L)" :active="activeTool === 'Line'" :action="() => selectTool('Line')" /> <ShelfItemInput icon="VectorLineTool" title="Line Tool (L)" :active="activeTool === 'Line'" :action="() => selectTool('Line')" />
<ShelfItemInput icon="VectorRectangleTool" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" :action="() => selectTool('Rectangle')" /> <ShelfItemInput icon="VectorRectangleTool" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" :action="() => selectTool('Rectangle')" />
<ShelfItemInput icon="VectorEllipseTool" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" :action="() => selectTool('Ellipse')" /> <ShelfItemInput icon="VectorEllipseTool" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" :action="() => selectTool('Ellipse')" />
@@ -246,7 +251,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation } from "@/dispatcher/js-messages"; import { UpdateArtwork, UpdateOverlays, UpdateScrollbars, UpdateRulers, SetActiveTool, SetCanvasZoom, SetCanvasRotation, ToolName } from "@/dispatcher/js-messages";
import LayoutCol from "@/components/layout/LayoutCol.vue"; import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue"; import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -381,7 +386,7 @@ export default defineComponent({
overlaysSvg: "", overlaysSvg: "",
canvasSvgWidth: "100%", canvasSvgWidth: "100%",
canvasSvgHeight: "100%", canvasSvgHeight: "100%",
activeTool: "Select", activeTool: "Select" as ToolName,
activeToolOptions: {}, activeToolOptions: {},
documentModeEntries, documentModeEntries,
viewModeEntries, viewModeEntries,
frontend/src/components/panels/LayerTree.vue
+2 -2
View File
@@ -30,10 +30,10 @@
</LayoutRow> </LayoutRow>
<LayoutRow :class="'layer-tree scrollable-y'"> <LayoutRow :class="'layer-tree scrollable-y'">
<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateLine($event)" @dragend="drop()"> <LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateLine($event)" @dragend="drop()">
<div class="layer-row" v-for="(layer, index) in layers" :key="layer.path"> <div class="layer-row" v-for="(layer, index) in layers" :key="String(layer.path.slice(-1))">
<div class="layer-visibility"> <div class="layer-visibility">
<IconButton <IconButton
:action="(e) => (toggleLayerVisibility(layer.path), e.stopPropagation())" :action="(e) => (toggleLayerVisibility(layer.path), e && e.stopPropagation())"
:icon="layer.visible ? 'EyeVisible' : 'EyeHidden'" :icon="layer.visible ? 'EyeVisible' : 'EyeHidden'"
:size="24" :size="24"
:title="layer.visible ? 'Visible' : 'Hidden'" :title="layer.visible ? 'Visible' : 'Hidden'"
frontend/src/components/widgets/buttons/IconButton.vue
+3 -1
View File
@@ -59,7 +59,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import IconLabel, { IconName, IconSize } from "@/components/widgets/labels/IconLabel.vue"; import { IconName, IconSize } from "@/utilities/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({ export default defineComponent({
props: { props: {
frontend/src/components/widgets/floating-menus/DialogModal.vue
+1 -1
View File
@@ -10,7 +10,7 @@
<TextLabel :bold="true" :class="'heading'">{{ dialog.state.heading }}</TextLabel> <TextLabel :bold="true" :class="'heading'">{{ dialog.state.heading }}</TextLabel>
<TextLabel :class="'details'">{{ dialog.state.details }}</TextLabel> <TextLabel :class="'details'">{{ dialog.state.details }}</TextLabel>
<LayoutRow :class="'buttons-row'" v-if="dialog.state.buttons.length > 0"> <LayoutRow :class="'buttons-row'" v-if="dialog.state.buttons.length > 0">
<TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="button.callback" v-bind="button.props" /> <TextButton v-for="(button, index) in dialog.state.buttons" :key="index" :title="button.tooltip" :action="() => button.callback && button.callback()" v-bind="button.props" />
</LayoutRow> </LayoutRow>
</LayoutCol> </LayoutCol>
</LayoutRow> </LayoutRow>
frontend/src/components/widgets/floating-menus/FloatingMenu.vue
+2 -2
View File
@@ -177,7 +177,7 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType, StyleValue } from "vue";
export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center"; export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
export type MenuType = "Popover" | "Dropdown" | "Dialog"; export type MenuType = "Popover" | "Dropdown" | "Dialog";
@@ -401,7 +401,7 @@ export default defineComponent({
}, },
}, },
computed: { computed: {
floatingMenuContentStyle(): Partial<CSSStyleDeclaration> { floatingMenuContentStyle(): StyleValue {
return { return {
minWidth: this.minWidth > 0 ? `${this.minWidth}px` : "", minWidth: this.minWidth > 0 ? `${this.minWidth}px` : "",
}; };
frontend/src/components/widgets/floating-menus/MenuList.vue
+4 -2
View File
@@ -14,7 +14,7 @@
> >
<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" :class="'entry-checkbox'" /> <CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" :class="'entry-checkbox'" />
<IconLabel v-else-if="entry.icon && drawIcon" :icon="entry.icon" :class="'entry-icon'" /> <IconLabel v-else-if="entry.icon && drawIcon" :icon="entry.icon" :class="'entry-icon'" />
<div v-else-if="drawIcon" class="no-icon" /> <div v-else-if="drawIcon" class="no-icon"></div>
<span class="entry-label">{{ entry.label }}</span> <span class="entry-label">{{ entry.label }}</span>
@@ -132,6 +132,8 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue"; import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue"; import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -144,7 +146,7 @@ export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[]
interface MenuListEntryData<Value = string> { interface MenuListEntryData<Value = string> {
value?: Value; value?: Value;
label?: string; label?: string;
icon?: string; icon?: IconName;
checkbox?: boolean; checkbox?: boolean;
shortcut?: string[]; shortcut?: string[];
shortcutRequiresLock?: boolean; shortcutRequiresLock?: boolean;
frontend/src/components/widgets/inputs/CheckboxInput.vue
+4 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="checkbox-input" :class="{ 'outline-style': outlineStyle }"> <div class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" /> <input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
<label :for="`checkbox-input-${id}`"> <label :for="`checkbox-input-${id}`">
<div class="checkbox-box"> <div class="checkbox-box">
<IconLabel :icon="icon" /> <IconLabel :icon="icon" />
@@ -82,7 +82,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import IconLabel, { IconName } from "@/components/widgets/labels/IconLabel.vue"; import { IconName } from "@/utilities/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({ export default defineComponent({
data() { data() {
frontend/src/components/widgets/inputs/DropdownInput.vue
+3 -3
View File
@@ -1,14 +1,14 @@
<template> <template>
<div class="dropdown-input"> <div class="dropdown-input">
<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="() => clickDropdownBox()" data-hover-menu-spawner> <div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" /> <IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
<span>{{ activeEntry.label }}</span> <span>{{ activeEntry.label }}</span>
<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" /> <IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
</div> </div>
<MenuList <MenuList
v-model:activeEntry="activeEntry" v-model:activeEntry="activeEntry"
@update:activeEntry="(newActiveEntry) => activeEntryChanged(newActiveEntry)" @update:activeEntry="(newActiveEntry: typeof MenuListEntry) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth) => onWidthChanged(newWidth)" @widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
:menuEntries="menuEntries" :menuEntries="menuEntries"
:direction="'Bottom'" :direction="'Bottom'"
:drawIcon="drawIcon" :drawIcon="drawIcon"
frontend/src/components/widgets/inputs/MenuBarInput.vue
+2 -2
View File
@@ -5,12 +5,12 @@
<IconLabel :icon="'GraphiteLogo'" /> <IconLabel :icon="'GraphiteLogo'" />
</div> </div>
</div> </div>
<div class="entry-container" v-for="entry in menuEntries" :key="entry"> <div class="entry-container" v-for="(entry, index) in menuEntries" :key="index">
<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner> <div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
<IconLabel :icon="entry.icon" v-if="entry.icon" /> <IconLabel :icon="entry.icon" v-if="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span> <span v-if="entry.label">{{ entry.label }}</span>
</div> </div>
<MenuList :menuEntries="entry.children" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" /> <MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
</div> </div>
</div> </div>
</template> </template>
frontend/src/components/widgets/inputs/OptionalInput.vue
+3 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="optional-input"> <div class="optional-input">
<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" :icon="icon" /> <CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" />
</div> </div>
</template> </template>
@@ -36,8 +36,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue"; import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
import { IconName } from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({ export default defineComponent({
props: { props: {
frontend/src/components/widgets/inputs/RadioInput.vue
+3 -1
View File
@@ -69,13 +69,15 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue"; import TextLabel from "@/components/widgets/labels/TextLabel.vue";
export interface RadioEntryData { export interface RadioEntryData {
value?: string; value?: string;
label?: string; label?: string;
icon?: string; icon?: IconName;
tooltip?: string; tooltip?: string;
action?: () => void; action?: () => void;
} }
frontend/src/components/widgets/inputs/ShelfItemInput.vue
+2 -1
View File
@@ -31,8 +31,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import IconButton from "@/components/widgets/buttons/IconButton.vue"; import IconButton from "@/components/widgets/buttons/IconButton.vue";
import { IconName } from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({ export default defineComponent({
components: { IconButton }, components: { IconButton },
frontend/src/components/widgets/labels/IconLabel.vue
+1 -198
View File
@@ -30,205 +30,8 @@
<script lang="ts"> <script lang="ts">
import { DefineComponent, defineComponent, PropType } from "vue"; import { DefineComponent, defineComponent, PropType } from "vue";
import Checkmark from "@/../assets/12px-solid/checkmark.svg"; import { IconName, IconSize, ICON_LIST } from "@/utilities/icons";
import CloseX from "@/../assets/12px-solid/close-x.svg";
import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
import FullscreenEnter from "@/../assets/12px-solid/fullscreen-enter.svg";
import FullscreenExit from "@/../assets/12px-solid/fullscreen-exit.svg";
import Grid from "@/../assets/12px-solid/grid.svg";
import Info from "@/../assets/12px-solid/info.svg";
import KeyboardArrowDown from "@/../assets/12px-solid/keyboard-arrow-down.svg";
import KeyboardArrowLeft from "@/../assets/12px-solid/keyboard-arrow-left.svg";
import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
import KeyboardBackspace from "@/../assets/12px-solid/keyboard-backspace.svg";
import KeyboardCommand from "@/../assets/12px-solid/keyboard-command.svg";
import KeyboardEnter from "@/../assets/12px-solid/keyboard-enter.svg";
import KeyboardOption from "@/../assets/12px-solid/keyboard-option.svg";
import KeyboardShift from "@/../assets/12px-solid/keyboard-shift.svg";
import KeyboardSpace from "@/../assets/12px-solid/keyboard-space.svg";
import KeyboardTab from "@/../assets/12px-solid/keyboard-tab.svg";
import Link from "@/../assets/12px-solid/link.svg";
import Overlays from "@/../assets/12px-solid/overlays.svg";
import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
import Snapping from "@/../assets/12px-solid/snapping.svg";
import Swap from "@/../assets/12px-solid/swap.svg";
import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
import Warning from "@/../assets/12px-solid/warning.svg";
import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
import AlignLeft from "@/../assets/16px-solid/align-left.svg";
import AlignRight from "@/../assets/16px-solid/align-right.svg";
import AlignTop from "@/../assets/16px-solid/align-top.svg";
import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
import Copy from "@/../assets/16px-solid/copy.svg";
import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
import File from "@/../assets/16px-solid/file.svg";
import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
import Paste from "@/../assets/16px-solid/paste.svg";
import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
import MouseHintMmbDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
import RasterBlurSharpenTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
export type IconName = keyof typeof ICON_LIST;
export type IconSize = 12 | 16 | 24 | 32;
const size12: IconSize = 12;
const size16: IconSize = 16;
const size24: IconSize = 24;
// const size32: IconSize = 32;
const ICON_LIST = {
Checkmark: { component: Checkmark, size: size12 },
CloseX: { component: CloseX, size: size12 },
DropdownArrow: { component: DropdownArrow, size: size12 },
FullscreenEnter: { component: FullscreenEnter, size: size12 },
FullscreenExit: { component: FullscreenExit, size: size12 },
Grid: { component: Grid, size: size12 },
Info: { component: Info, size: size12 },
KeyboardArrowDown: { component: KeyboardArrowDown, size: size12 },
KeyboardArrowLeft: { component: KeyboardArrowLeft, size: size12 },
KeyboardArrowRight: { component: KeyboardArrowRight, size: size12 },
KeyboardArrowUp: { component: KeyboardArrowUp, size: size12 },
KeyboardBackspace: { component: KeyboardBackspace, size: size12 },
KeyboardCommand: { component: KeyboardCommand, size: size12 },
KeyboardEnter: { component: KeyboardEnter, size: size12 },
KeyboardOption: { component: KeyboardOption, size: size12 },
KeyboardShift: { component: KeyboardShift, size: size12 },
KeyboardSpace: { component: KeyboardSpace, size: size12 },
KeyboardTab: { component: KeyboardTab, size: size12 },
Link: { component: Link, size: size12 },
Overlays: { component: Overlays, size: size12 },
ResetColors: { component: ResetColors, size: size12 },
Snapping: { component: Snapping, size: size12 },
Swap: { component: Swap, size: size12 },
VerticalEllipsis: { component: VerticalEllipsis, size: size12 },
Warning: { component: Warning, size: size12 },
WindowButtonWinClose: { component: WindowButtonWinClose, size: size12 },
WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: size12 },
WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: size12 },
WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: size12 },
AlignBottom: { component: AlignBottom, size: size16 },
AlignHorizontalCenter: { component: AlignHorizontalCenter, size: size16 },
AlignLeft: { component: AlignLeft, size: size16 },
AlignRight: { component: AlignRight, size: size16 },
AlignTop: { component: AlignTop, size: size16 },
AlignVerticalCenter: { component: AlignVerticalCenter, size: size16 },
BooleanDifference: { component: BooleanDifference, size: size16 },
BooleanIntersect: { component: BooleanIntersect, size: size16 },
BooleanSubtractBack: { component: BooleanSubtractBack, size: size16 },
BooleanSubtractFront: { component: BooleanSubtractFront, size: size16 },
BooleanUnion: { component: BooleanUnion, size: size16 },
Copy: { component: Copy, size: size16 },
EyeHidden: { component: EyeHidden, size: size16 },
EyeVisible: { component: EyeVisible, size: size16 },
File: { component: File, size: size16 },
FlipHorizontal: { component: FlipHorizontal, size: size16 },
FlipVertical: { component: FlipVertical, size: size16 },
GraphiteLogo: { component: GraphiteLogo, size: size16 },
Paste: { component: Paste, size: size16 },
ViewModeNormal: { component: ViewModeNormal, size: size16 },
ViewModeOutline: { component: ViewModeOutline, size: size16 },
ViewModePixels: { component: ViewModePixels, size: size16 },
ViewportDesignMode: { component: ViewportDesignMode, size: size16 },
ViewportGuideMode: { component: ViewportGuideMode, size: size16 },
ViewportSelectMode: { component: ViewportSelectMode, size: size16 },
ZoomIn: { component: ZoomIn, size: size16 },
ZoomOut: { component: ZoomOut, size: size16 },
ZoomReset: { component: ZoomReset, size: size16 },
MouseHintDrag: { component: MouseHintDrag, size: size16 },
MouseHintLmbDrag: { component: MouseHintLmbDrag, size: size16 },
MouseHintLmb: { component: MouseHintLmb, size: size16 },
MouseHintMmbDrag: { component: MouseHintMmbDrag, size: size16 },
MouseHintMmb: { component: MouseHintMmb, size: size16 },
MouseHintNone: { component: MouseHintNone, size: size16 },
MouseHintRmbDrag: { component: MouseHintRmbDrag, size: size16 },
MouseHintRmb: { component: MouseHintRmb, size: size16 },
MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
NodeTypePath: { component: NodeTypePath, size: size24 },
LayoutCropTool: { component: LayoutCropTool, size: size24 },
LayoutEyedropperTool: { component: LayoutEyedropperTool, size: size24 },
LayoutNavigateTool: { component: LayoutNavigateTool, size: size24 },
LayoutSelectTool: { component: LayoutSelectTool, size: size24 },
ParametricFillTool: { component: ParametricFillTool, size: size24 },
ParametricGradientTool: { component: ParametricGradientTool, size: size24 },
ParametricTextTool: { component: ParametricTextTool, size: size24 },
RasterBrushTool: { component: RasterBrushTool, size: size24 },
RasterCloneTool: { component: RasterCloneTool, size: size24 },
RasterBlurSharpenTool: { component: RasterBlurSharpenTool, size: size24 },
RasterHealTool: { component: RasterHealTool, size: size24 },
RasterPatchTool: { component: RasterPatchTool, size: size24 },
RasterRelightTool: { component: RasterRelightTool, size: size24 },
VectorEllipseTool: { component: VectorEllipseTool, size: size24 },
VectorFreehandTool: { component: VectorFreehandTool, size: size24 },
VectorLineTool: { component: VectorLineTool, size: size24 },
VectorPathTool: { component: VectorPathTool, size: size24 },
VectorPenTool: { component: VectorPenTool, size: size24 },
VectorRectangleTool: { component: VectorRectangleTool, size: size24 },
VectorShapeTool: { component: VectorShapeTool, size: size24 },
VectorSplineTool: { component: VectorSplineTool, size: size24 },
};
const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST; const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
export default defineComponent({ export default defineComponent({
frontend/src/components/widgets/labels/UserInputLabel.vue
+16 -5
View File
@@ -2,7 +2,7 @@
<div class="user-input-label"> <div class="user-input-label">
<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex"> <template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
<span class="group-gap" v-if="keyGroupIndex > 0"></span> <span class="group-gap" v-if="keyGroupIndex > 0"></span>
<template v-for="inputKey in keyGroup" :key="((keyInfo = keyTextOrIcon(inputKey)), inputKey)"> <template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
<span class="input-key" :class="keyInfo.width"> <span class="input-key" :class="keyInfo.width">
<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" /> <IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
<template v-else>{{ keyInfo.text }}</template> <template v-else>{{ keyInfo.text }}</template>
@@ -10,7 +10,7 @@
</template> </template>
</template> </template>
<span class="input-mouse" v-if="inputMouse"> <span class="input-mouse" v-if="inputMouse">
<IconLabel :icon="`MouseHint${inputMouse}`" /> <IconLabel :icon="mouseHintIcon(inputMouse)" />
</span> </span>
<span class="hint-text" v-if="hasSlotContent"> <span class="hint-text" v-if="hasSlotContent">
<slot></slot> <slot></slot>
@@ -97,7 +97,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import { HintInfo } from "@/dispatcher/js-messages"; import { HintInfo, KeysGroup } from "@/dispatcher/js-messages";
import { IconName } from "@/utilities/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -113,7 +115,10 @@ export default defineComponent({
}, },
}, },
methods: { methods: {
keyTextOrIcon(keyText: string): { text: string | null; icon: string | null; width: string } { keyTextOrIconList(keyGroup: KeysGroup): { text: string | null; icon: IconName | null; width: string }[] {
return keyGroup.map((inputKey) => this.keyTextOrIcon(inputKey));
},
keyTextOrIcon(keyText: string): { text: string | null; icon: IconName | null; width: string } {
// Definitions // Definitions
const textMap: Record<string, string> = { const textMap: Record<string, string> = {
Control: "Ctrl", Control: "Ctrl",
@@ -153,7 +158,7 @@ export default defineComponent({
if (text in iconsAndWidths) { if (text in iconsAndWidths) {
return { return {
text: null, text: null,
icon: `Keyboard${text}`, icon: this.keyboardHintIcon(text),
width: `width-${iconsAndWidths[text] * 8 + 8}`, width: `width-${iconsAndWidths[text] * 8 + 8}`,
}; };
} }
@@ -170,6 +175,12 @@ export default defineComponent({
return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` }; return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
}, },
mouseHintIcon(input: HintInfo["mouse"]): IconName {
return `MouseHint${input}` as IconName;
},
keyboardHintIcon(input: HintInfo["key_groups"][0][0]): IconName {
return `Keyboard${input}` as IconName;
},
}, },
}); });
</script> </script>
frontend/src/components/widgets/options/ToolOptions.vue
+22 -6
View File
@@ -31,6 +31,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType } from "vue"; import { defineComponent, PropType } from "vue";
import { ToolName } from "@/dispatcher/js-messages";
import { WidgetRow, IconButtonWidget } from "@/utilities/widgets"; import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
import IconButton from "@/components/widgets/buttons/IconButton.vue"; import IconButton from "@/components/widgets/buttons/IconButton.vue";
@@ -38,13 +39,11 @@ import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
import NumberInput from "@/components/widgets/inputs/NumberInput.vue"; import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
import Separator from "@/components/widgets/separators/Separator.vue"; import Separator from "@/components/widgets/separators/Separator.vue";
export type ToolName = "Select" | "Shape" | "Line" | "Pen";
export default defineComponent({ export default defineComponent({
inject: ["editor", "dialog"], inject: ["editor", "dialog"],
props: { props: {
activeTool: { type: String as PropType<ToolName> }, activeTool: { type: String as PropType<ToolName>, required: true },
activeToolOptions: { type: Object as PropType<Record<string, object>> }, activeToolOptions: { type: Object as PropType<Record<string, object>>, required: true },
}, },
methods: { methods: {
async updateToolOptions(path: string[], newValue: number) { async updateToolOptions(path: string[], newValue: number) {
@@ -152,9 +151,26 @@ export default defineComponent({
props: {}, props: {},
}, },
], ],
Shape: [{ kind: "NumberInput", optionPath: ["shape_type", "Polygon", "vertices"], props: { min: 3, isInteger: true, label: "Sides" } }], Crop: [],
Line: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }], Navigate: [],
Eyedropper: [],
Text: [],
Fill: [],
Gradient: [],
Brush: [],
Heal: [],
Clone: [],
Patch: [],
Detail: [],
Relight: [],
Path: [],
Pen: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }], Pen: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
Freehand: [],
Spline: [],
Line: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
Rectangle: [],
Ellipse: [],
Shape: [{ kind: "NumberInput", optionPath: ["shape_type", "Polygon", "vertices"], props: { min: 3, isInteger: true, label: "Sides" } }],
}; };
return { return {
frontend/src/components/window/title-bar/WindowButtonsWeb.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="window-buttons-web" @click="(e) => handleClick(e)" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'"> <div class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel> <TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" /> <IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
</div> </div>
frontend/src/components/workspace/Panel.vue
+3 -3
View File
@@ -7,11 +7,11 @@
:class="{ active: tabIndex === tabActiveIndex }" :class="{ active: tabIndex === tabActiveIndex }"
v-for="(tabLabel, tabIndex) in tabLabels" v-for="(tabLabel, tabIndex) in tabLabels"
:key="tabIndex" :key="tabIndex"
@click="(e) => e.stopPropagation() || (clickAction && clickAction(tabIndex))" @click="(e) => (e && e.stopPropagation(), clickAction && clickAction(tabIndex))"
@click.middle="(e) => e.stopPropagation() || (closeAction && closeAction(tabIndex))" @click.middle="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))"
> >
<span>{{ tabLabel }}</span> <span>{{ tabLabel }}</span>
<IconButton :action="(e) => e.stopPropagation() || (closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" /> <IconButton :action="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))" :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
</div> </div>
</div> </div>
<PopoverButton :icon="'VerticalEllipsis'"> <PopoverButton :icon="'VerticalEllipsis'">
frontend/src/dispatcher/js-messages.ts
+24 -1
View File
@@ -112,8 +112,31 @@ export class UpdateWorkingColors extends JsMessage {
readonly secondary!: Color; readonly secondary!: Color;
} }
export type ToolName =
| "Select"
| "Crop"
| "Navigate"
| "Eyedropper"
| "Text"
| "Fill"
| "Gradient"
| "Brush"
| "Heal"
| "Clone"
| "Patch"
| "Detail"
| "Relight"
| "Path"
| "Pen"
| "Freehand"
| "Spline"
| "Line"
| "Rectangle"
| "Ellipse"
| "Shape";
export class SetActiveTool extends JsMessage { export class SetActiveTool extends JsMessage {
readonly tool_name!: string; readonly tool_name!: ToolName;
readonly tool_options!: object; readonly tool_options!: object;
} }
frontend/src/state/dialog.ts
+3 -2
View File
@@ -2,6 +2,7 @@ import { reactive, readonly } from "vue";
import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages"; import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages";
import { EditorState } from "@/state/wasm-loader"; import { EditorState } from "@/state/wasm-loader";
import { IconName } from "@/utilities/icons";
import { stripIndents } from "@/utilities/strip-indents"; import { stripIndents } from "@/utilities/strip-indents";
import { TextButtonWidget } from "@/utilities/widgets"; import { TextButtonWidget } from "@/utilities/widgets";
@@ -9,13 +10,13 @@ import { TextButtonWidget } from "@/utilities/widgets";
export function createDialogState(editor: EditorState) { export function createDialogState(editor: EditorState) {
const state = reactive({ const state = reactive({
visible: false, visible: false,
icon: "", icon: "" as IconName,
heading: "", heading: "",
details: "", details: "",
buttons: [] as TextButtonWidget[], buttons: [] as TextButtonWidget[],
}); });
const createDialog = (icon: string, heading: string, details: string, buttons: TextButtonWidget[]): void => { const createDialog = (icon: IconName, heading: string, details: string, buttons: TextButtonWidget[]): void => {
state.visible = true; state.visible = true;
state.icon = icon; state.icon = icon;
state.heading = heading; state.heading = heading;
frontend/src/utilities/icons.ts
+199
View File
@@ -0,0 +1,199 @@
import Checkmark from "@/../assets/12px-solid/checkmark.svg";
import CloseX from "@/../assets/12px-solid/close-x.svg";
import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
import FullscreenEnter from "@/../assets/12px-solid/fullscreen-enter.svg";
import FullscreenExit from "@/../assets/12px-solid/fullscreen-exit.svg";
import Grid from "@/../assets/12px-solid/grid.svg";
import Info from "@/../assets/12px-solid/info.svg";
import KeyboardArrowDown from "@/../assets/12px-solid/keyboard-arrow-down.svg";
import KeyboardArrowLeft from "@/../assets/12px-solid/keyboard-arrow-left.svg";
import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
import KeyboardBackspace from "@/../assets/12px-solid/keyboard-backspace.svg";
import KeyboardCommand from "@/../assets/12px-solid/keyboard-command.svg";
import KeyboardEnter from "@/../assets/12px-solid/keyboard-enter.svg";
import KeyboardOption from "@/../assets/12px-solid/keyboard-option.svg";
import KeyboardShift from "@/../assets/12px-solid/keyboard-shift.svg";
import KeyboardSpace from "@/../assets/12px-solid/keyboard-space.svg";
import KeyboardTab from "@/../assets/12px-solid/keyboard-tab.svg";
import Link from "@/../assets/12px-solid/link.svg";
import Overlays from "@/../assets/12px-solid/overlays.svg";
import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
import Snapping from "@/../assets/12px-solid/snapping.svg";
import Swap from "@/../assets/12px-solid/swap.svg";
import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.svg";
import Warning from "@/../assets/12px-solid/warning.svg";
import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
import AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.svg";
import AlignLeft from "@/../assets/16px-solid/align-left.svg";
import AlignRight from "@/../assets/16px-solid/align-right.svg";
import AlignTop from "@/../assets/16px-solid/align-top.svg";
import AlignVerticalCenter from "@/../assets/16px-solid/align-vertical-center.svg";
import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
import Copy from "@/../assets/16px-solid/copy.svg";
import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
import EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
import File from "@/../assets/16px-solid/file.svg";
import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
import Paste from "@/../assets/16px-solid/paste.svg";
import ViewModeNormal from "@/../assets/16px-solid/view-mode-normal.svg";
import ViewModeOutline from "@/../assets/16px-solid/view-mode-outline.svg";
import ViewModePixels from "@/../assets/16px-solid/view-mode-pixels.svg";
import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
import ZoomOut from "@/../assets/16px-solid/zoom-out.svg";
import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
import MouseHintMmbDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
import RasterDetailTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-tool.svg";
import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
import VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
import VectorPathTool from "@/../assets/24px-two-tone/vector-path-tool.svg";
import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
export type IconName = keyof typeof ICON_LIST;
export type IconSize = 12 | 16 | 24 | 32;
const size12: IconSize = 12;
const size16: IconSize = 16;
const size24: IconSize = 24;
// const size32: IconSize = 32;
export const ICON_LIST = {
Checkmark: { component: Checkmark, size: size12 },
CloseX: { component: CloseX, size: size12 },
DropdownArrow: { component: DropdownArrow, size: size12 },
FullscreenEnter: { component: FullscreenEnter, size: size12 },
FullscreenExit: { component: FullscreenExit, size: size12 },
Grid: { component: Grid, size: size12 },
Info: { component: Info, size: size12 },
KeyboardArrowDown: { component: KeyboardArrowDown, size: size12 },
KeyboardArrowLeft: { component: KeyboardArrowLeft, size: size12 },
KeyboardArrowRight: { component: KeyboardArrowRight, size: size12 },
KeyboardArrowUp: { component: KeyboardArrowUp, size: size12 },
KeyboardBackspace: { component: KeyboardBackspace, size: size12 },
KeyboardCommand: { component: KeyboardCommand, size: size12 },
KeyboardEnter: { component: KeyboardEnter, size: size12 },
KeyboardOption: { component: KeyboardOption, size: size12 },
KeyboardShift: { component: KeyboardShift, size: size12 },
KeyboardSpace: { component: KeyboardSpace, size: size12 },
KeyboardTab: { component: KeyboardTab, size: size12 },
Link: { component: Link, size: size12 },
Overlays: { component: Overlays, size: size12 },
ResetColors: { component: ResetColors, size: size12 },
Snapping: { component: Snapping, size: size12 },
Swap: { component: Swap, size: size12 },
VerticalEllipsis: { component: VerticalEllipsis, size: size12 },
Warning: { component: Warning, size: size12 },
WindowButtonWinClose: { component: WindowButtonWinClose, size: size12 },
WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: size12 },
WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: size12 },
WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: size12 },
AlignBottom: { component: AlignBottom, size: size16 },
AlignHorizontalCenter: { component: AlignHorizontalCenter, size: size16 },
AlignLeft: { component: AlignLeft, size: size16 },
AlignRight: { component: AlignRight, size: size16 },
AlignTop: { component: AlignTop, size: size16 },
AlignVerticalCenter: { component: AlignVerticalCenter, size: size16 },
BooleanDifference: { component: BooleanDifference, size: size16 },
BooleanIntersect: { component: BooleanIntersect, size: size16 },
BooleanSubtractBack: { component: BooleanSubtractBack, size: size16 },
BooleanSubtractFront: { component: BooleanSubtractFront, size: size16 },
BooleanUnion: { component: BooleanUnion, size: size16 },
Copy: { component: Copy, size: size16 },
EyeHidden: { component: EyeHidden, size: size16 },
EyeVisible: { component: EyeVisible, size: size16 },
File: { component: File, size: size16 },
FlipHorizontal: { component: FlipHorizontal, size: size16 },
FlipVertical: { component: FlipVertical, size: size16 },
GraphiteLogo: { component: GraphiteLogo, size: size16 },
Paste: { component: Paste, size: size16 },
ViewModeNormal: { component: ViewModeNormal, size: size16 },
ViewModeOutline: { component: ViewModeOutline, size: size16 },
ViewModePixels: { component: ViewModePixels, size: size16 },
ViewportDesignMode: { component: ViewportDesignMode, size: size16 },
ViewportGuideMode: { component: ViewportGuideMode, size: size16 },
ViewportSelectMode: { component: ViewportSelectMode, size: size16 },
ZoomIn: { component: ZoomIn, size: size16 },
ZoomOut: { component: ZoomOut, size: size16 },
ZoomReset: { component: ZoomReset, size: size16 },
MouseHintDrag: { component: MouseHintDrag, size: size16 },
MouseHintLmbDrag: { component: MouseHintLmbDrag, size: size16 },
MouseHintLmb: { component: MouseHintLmb, size: size16 },
MouseHintMmbDrag: { component: MouseHintMmbDrag, size: size16 },
MouseHintMmb: { component: MouseHintMmb, size: size16 },
MouseHintNone: { component: MouseHintNone, size: size16 },
MouseHintRmbDrag: { component: MouseHintRmbDrag, size: size16 },
MouseHintRmb: { component: MouseHintRmb, size: size16 },
MouseHintScrollDown: { component: MouseHintScrollDown, size: size16 },
MouseHintScrollUp: { component: MouseHintScrollUp, size: size16 },
NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
NodeTypePath: { component: NodeTypePath, size: size24 },
LayoutCropTool: { component: LayoutCropTool, size: size24 },
LayoutEyedropperTool: { component: LayoutEyedropperTool, size: size24 },
LayoutNavigateTool: { component: LayoutNavigateTool, size: size24 },
LayoutSelectTool: { component: LayoutSelectTool, size: size24 },
ParametricFillTool: { component: ParametricFillTool, size: size24 },
ParametricGradientTool: { component: ParametricGradientTool, size: size24 },
ParametricTextTool: { component: ParametricTextTool, size: size24 },
RasterBrushTool: { component: RasterBrushTool, size: size24 },
RasterCloneTool: { component: RasterCloneTool, size: size24 },
RasterDetailTool: { component: RasterDetailTool, size: size24 },
RasterHealTool: { component: RasterHealTool, size: size24 },
RasterPatchTool: { component: RasterPatchTool, size: size24 },
RasterRelightTool: { component: RasterRelightTool, size: size24 },
VectorEllipseTool: { component: VectorEllipseTool, size: size24 },
VectorFreehandTool: { component: VectorFreehandTool, size: size24 },
VectorLineTool: { component: VectorLineTool, size: size24 },
VectorPathTool: { component: VectorPathTool, size: size24 },
VectorPenTool: { component: VectorPenTool, size: size24 },
VectorRectangleTool: { component: VectorRectangleTool, size: size24 },
VectorShapeTool: { component: VectorShapeTool, size: size24 },
VectorSplineTool: { component: VectorSplineTool, size: size24 },
};