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

Vue/TS bug and bad typing fixes

Browse source
This commit is contained in:
Keavon Chambers 2022-01-02 20:02:35 -08:00
parent 2c8d70acb4
commit 5518384ec1
20 changed files with 319 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/components/panels/Document.vue
View file

@ -46,9 +46,9 @@
<Separator :type="'Section'" />
<IconButton :action="() => this.$refs.zoom.onIncrement('Increase')" :icon="'ZoomIn'" :size="24" title="Zoom In" />
<IconButton :action="() => this.$refs.zoom.onIncrement('Decrease')" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
<IconButton :action="() => this.$refs.zoom.updateValue(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
<IconButton :action="increaseCanvasZoom" :icon="'ZoomIn'" :size="24" title="Zoom In" />
<IconButton :action="decreaseCanvasZoom" :icon="'ZoomOut'" :size="24" title="Zoom Out" />
<IconButton :action="() => setCanvasZoom(100)" :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
<Separator :type="'Related'" />
@ -70,31 +70,36 @@
<LayoutCol :class="'shelf'">
<div class="tools scrollable-y">
<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="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
<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="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'" />
<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => dialog.comingSoon() && selectTool('Brush')" />
<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => dialog.comingSoon() && selectTool('Heal')" />
<ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => dialog.comingSoon() && selectTool('Clone')" />
<ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => dialog.comingSoon() && selectTool('Patch')" />
<ShelfItemInput icon="RasterBlurSharpenTool" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" :action="() => dialog.comingSoon() && selectTool('BlurSharpen')" />
<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => dialog.comingSoon() && selectTool('Relight')" />
<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(), false) && selectTool('Heal')" />
<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(), false) && selectTool('Patch')" />
<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(), false) && selectTool('Relight')" />
<Separator :type="'Section'" :direction="'Vertical'" />
<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="VectorFreehandTool" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" :action="() => dialog.comingSoon() && selectTool('Freehand')" />
<ShelfItemInput icon="VectorSplineTool" title="Spline Tool" :active="activeTool === 'Spline'" :action="() => dialog.comingSoon() && selectTool('Spline')" />
<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(), false) && selectTool('Spline')" />
<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="VectorEllipseTool" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" :action="() => selectTool('Ellipse')" />
@ -246,7 +251,7 @@
<script lang="ts">
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 LayoutRow from "@/components/layout/LayoutRow.vue";
@ -381,7 +386,7 @@ export default defineComponent({
overlaysSvg: "",
canvasSvgWidth: "100%",
canvasSvgHeight: "100%",
activeTool: "Select",
activeTool: "Select" as ToolName,
activeToolOptions: {},
documentModeEntries,
viewModeEntries,

4
frontend/src/components/panels/LayerTree.vue
View file

@ -30,10 +30,10 @@
</LayoutRow>
<LayoutRow :class="'layer-tree scrollable-y'">
<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">
<IconButton
:action="(e) => (toggleLayerVisibility(layer.path), e.stopPropagation())"
:action="(e) => (toggleLayerVisibility(layer.path), e && e.stopPropagation())"
:icon="layer.visible ? 'EyeVisible' : 'EyeHidden'"
:size="24"
:title="layer.visible ? 'Visible' : 'Hidden'"

4
frontend/src/components/widgets/buttons/IconButton.vue
View file

@ -59,7 +59,9 @@
<script lang="ts">
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({
props: {

2
frontend/src/components/widgets/floating-menus/DialogModal.vue
View file

@ -10,7 +10,7 @@
<TextLabel :bold="true" :class="'heading'">{{ dialog.state.heading }}</TextLabel>
<TextLabel :class="'details'">{{ dialog.state.details }}</TextLabel>
<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>
</LayoutCol>
</LayoutRow>

4
frontend/src/components/widgets/floating-menus/FloatingMenu.vue
View file

@ -177,7 +177,7 @@
</style>
<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 MenuType = "Popover" | "Dropdown" | "Dialog";
@ -401,7 +401,7 @@ export default defineComponent({
},
},
computed: {
floatingMenuContentStyle(): Partial<CSSStyleDeclaration> {
floatingMenuContentStyle(): StyleValue {
return {
minWidth: this.minWidth > 0 ? `${this.minWidth}px` : "",
};

6
frontend/src/components/widgets/floating-menus/MenuList.vue
View file

@ -14,7 +14,7 @@
>
<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'" />
<div v-else-if="drawIcon" class="no-icon" />
<div v-else-if="drawIcon" class="no-icon"></div>
<span class="entry-label">{{ entry.label }}</span>
@ -132,6 +132,8 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@ -144,7 +146,7 @@ export type SectionsOfMenuListEntries<Value = string> = MenuListEntries<Value>[]
interface MenuListEntryData<Value = string> {
value?: Value;
label?: string;
icon?: string;
icon?: IconName;
checkbox?: boolean;
shortcut?: string[];
shortcutRequiresLock?: boolean;

6
frontend/src/components/widgets/inputs/CheckboxInput.vue
View file

@ -1,6 +1,6 @@
<template>
<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}`">
<div class="checkbox-box">
<IconLabel :icon="icon" />
@ -82,7 +82,9 @@
<script lang="ts">
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({
data() {

6
frontend/src/components/widgets/inputs/DropdownInput.vue
View file

@ -1,14 +1,14 @@
<template>
<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" />
<span>{{ activeEntry.label }}</span>
<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
</div>
<MenuList
v-model:activeEntry="activeEntry"
@update:activeEntry="(newActiveEntry) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth) => onWidthChanged(newWidth)"
@update:activeEntry="(newActiveEntry: typeof MenuListEntry) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
:menuEntries="menuEntries"
:direction="'Bottom'"
:drawIcon="drawIcon"

4
frontend/src/components/widgets/inputs/MenuBarInput.vue
View file

@ -5,12 +5,12 @@
<IconLabel :icon="'GraphiteLogo'" />
</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>
<IconLabel :icon="entry.icon" v-if="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span>
</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>
</template>

5
frontend/src/components/widgets/inputs/OptionalInput.vue
View file

@ -1,6 +1,6 @@
<template>
<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>
</template>
@ -36,8 +36,9 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
import { IconName } from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
props: {

4
frontend/src/components/widgets/inputs/RadioInput.vue
View file

@ -69,13 +69,15 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
export interface RadioEntryData {
value?: string;
label?: string;
icon?: string;
icon?: IconName;
tooltip?: string;
action?: () => void;
}

3
frontend/src/components/widgets/inputs/ShelfItemInput.vue
View file

@ -31,8 +31,9 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import { IconName } from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
components: { IconButton },

199
frontend/src/components/widgets/labels/IconLabel.vue
View file

@ -30,205 +30,8 @@
<script lang="ts">
import { DefineComponent, defineComponent, PropType } from "vue";
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 { IconName, IconSize, ICON_LIST } from "@/utilities/icons";
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;
export default defineComponent({

21
frontend/src/components/widgets/labels/UserInputLabel.vue
View file

@ -2,7 +2,7 @@
<div class="user-input-label">
<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
<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">
<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
<template v-else>{{ keyInfo.text }}</template>
@ -10,7 +10,7 @@
</template>
</template>
<span class="input-mouse" v-if="inputMouse">
<IconLabel :icon="`MouseHint${inputMouse}`" />
<IconLabel :icon="mouseHintIcon(inputMouse)" />
</span>
<span class="hint-text" v-if="hasSlotContent">
<slot></slot>
@ -97,7 +97,9 @@
<script lang="ts">
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";
@ -113,7 +115,10 @@ export default defineComponent({
},
},
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
const textMap: Record<string, string> = {
Control: "Ctrl",
@ -153,7 +158,7 @@ export default defineComponent({
if (text in iconsAndWidths) {
return {
text: null,
icon: `Keyboard${text}`,
icon: this.keyboardHintIcon(text),
width: `width-${iconsAndWidths[text] * 8 + 8}`,
};
}
@ -170,6 +175,12 @@ export default defineComponent({
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>

28
frontend/src/components/widgets/options/ToolOptions.vue
View file

@ -31,6 +31,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { ToolName } from "@/dispatcher/js-messages";
import { WidgetRow, IconButtonWidget } from "@/utilities/widgets";
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 Separator from "@/components/widgets/separators/Separator.vue";
export type ToolName = "Select" | "Shape" | "Line" | "Pen";
export default defineComponent({
inject: ["editor", "dialog"],
props: {
activeTool: { type: String as PropType<ToolName> },
activeToolOptions: { type: Object as PropType<Record<string, object>> },
activeTool: { type: String as PropType<ToolName>, required: true },
activeToolOptions: { type: Object as PropType<Record<string, object>>, required: true },
},
methods: {
async updateToolOptions(path: string[], newValue: number) {
@ -152,9 +151,26 @@ export default defineComponent({
props: {},
},
],
Shape: [{ kind: "NumberInput", optionPath: ["shape_type", "Polygon", "vertices"], props: { min: 3, isInteger: true, label: "Sides" } }],
Line: [{ kind: "NumberInput", optionPath: ["weight"], props: { min: 1, isInteger: true, unit: " px", label: "Weight" } }],
Crop: [],
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" } }],
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 {

2
frontend/src/components/window/title-bar/WindowButtonsWeb.vue
View file

@ -1,5 +1,5 @@
<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>
<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
</div>

6
frontend/src/components/workspace/Panel.vue
View file

@ -7,11 +7,11 @@
:class="{ active: tabIndex === tabActiveIndex }"
v-for="(tabLabel, tabIndex) in tabLabels"
:key="tabIndex"
@click="(e) => e.stopPropagation() || (clickAction && clickAction(tabIndex))"
@click.middle="(e) => e.stopPropagation() || (closeAction && closeAction(tabIndex))"
@click="(e) => (e && e.stopPropagation(), clickAction && clickAction(tabIndex))"
@click.middle="(e) => (e && e.stopPropagation(), closeAction && closeAction(tabIndex))"
>
<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>
<PopoverButton :icon="'VerticalEllipsis'">

25
frontend/src/dispatcher/js-messages.ts
View file

@ -112,8 +112,31 @@ export class UpdateWorkingColors extends JsMessage {
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 {
readonly tool_name!: string;
readonly tool_name!: ToolName;
readonly tool_options!: object;
}

5
frontend/src/state/dialog.ts
View file

@ -2,6 +2,7 @@ import { reactive, readonly } from "vue";
import { DisplayAboutGraphiteDialog } from "@/dispatcher/js-messages";
import { EditorState } from "@/state/wasm-loader";
import { IconName } from "@/utilities/icons";
import { stripIndents } from "@/utilities/strip-indents";
import { TextButtonWidget } from "@/utilities/widgets";
@ -9,13 +10,13 @@ import { TextButtonWidget } from "@/utilities/widgets";
export function createDialogState(editor: EditorState) {
const state = reactive({
visible: false,
icon: "",
icon: "" as IconName,
heading: "",
details: "",
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.icon = icon;
state.heading = heading;

199
frontend/src/utilities/icons.ts Normal file
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 },
};