mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-26 04:38:11 +08:00
Major frontend code cleanup (#452)
Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed
This commit is contained in:
Keavon Chambers
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="icon-label" :class="`size-${String(icons[icon].size)}`">
|
||||
<div class="icon-label" :class="`size-${icons[icon].size}`">
|
||||
<component :is="icon" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -28,81 +28,19 @@
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
|
||||
import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
|
||||
import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
|
||||
import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
|
||||
import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-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 RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
|
||||
import RasterHealTool from "@/../assets/24px-two-tone/raster-heal-tool.svg";
|
||||
import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
|
||||
import RasterPatchTool from "@/../assets/24px-two-tone/raster-patch-tool.svg";
|
||||
import RasterBlurSharpenTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
|
||||
import RasterRelightTool from "@/../assets/24px-two-tone/raster-relight-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 VectorFreehandTool from "@/../assets/24px-two-tone/vector-freehand-tool.svg";
|
||||
import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
|
||||
import VectorLineTool from "@/../assets/24px-two-tone/vector-line-tool.svg";
|
||||
import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
|
||||
import VectorEllipseTool from "@/../assets/24px-two-tone/vector-ellipse-tool.svg";
|
||||
import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
|
||||
|
||||
import AlignLeft from "@/../assets/16px-solid/align-left.svg";
|
||||
import AlignHorizontalCenter from "@/../assets/16px-solid/align-horizontal-center.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 AlignBottom from "@/../assets/16px-solid/align-bottom.svg";
|
||||
import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
|
||||
import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
|
||||
import BooleanUnion from "@/../assets/16px-solid/boolean-union.svg";
|
||||
import BooleanSubtractFront from "@/../assets/16px-solid/boolean-subtract-front.svg";
|
||||
import BooleanSubtractBack from "@/../assets/16px-solid/boolean-subtract-back.svg";
|
||||
import BooleanIntersect from "@/../assets/16px-solid/boolean-intersect.svg";
|
||||
import BooleanDifference from "@/../assets/16px-solid/boolean-difference.svg";
|
||||
import ZoomReset from "@/../assets/16px-solid/zoom-reset.svg";
|
||||
import ZoomIn from "@/../assets/16px-solid/zoom-in.svg";
|
||||
import ZoomOut from "@/../assets/16px-solid/zoom-out.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 EyeVisible from "@/../assets/16px-solid/eye-visible.svg";
|
||||
import EyeHidden from "@/../assets/16px-solid/eye-hidden.svg";
|
||||
import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
|
||||
import File from "@/../assets/16px-solid/file.svg";
|
||||
import Copy from "@/../assets/16px-solid/copy.svg";
|
||||
import Paste from "@/../assets/16px-solid/paste.svg";
|
||||
import ViewportDesignMode from "@/../assets/16px-solid/viewport-design-mode.svg";
|
||||
import ViewportSelectMode from "@/../assets/16px-solid/viewport-select-mode.svg";
|
||||
import ViewportGuideMode from "@/../assets/16px-solid/viewport-guide-mode.svg";
|
||||
import { DefineComponent, defineComponent, PropType } from "vue";
|
||||
|
||||
import Checkmark from "@/../assets/12px-solid/checkmark.svg";
|
||||
import Link from "@/../assets/12px-solid/link.svg";
|
||||
import Grid from "@/../assets/12px-solid/grid.svg";
|
||||
import Overlays from "@/../assets/12px-solid/overlays.svg";
|
||||
import Snapping from "@/../assets/12px-solid/snapping.svg";
|
||||
import Info from "@/../assets/12px-solid/info.svg";
|
||||
import Warning from "@/../assets/12px-solid/warning.svg";
|
||||
import Swap from "@/../assets/12px-solid/swap.svg";
|
||||
import ResetColors from "@/../assets/12px-solid/reset-colors.svg";
|
||||
import DropdownArrow from "@/../assets/12px-solid/dropdown-arrow.svg";
|
||||
import VerticalEllipsis from "@/../assets/12px-solid/vertical-ellipsis.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 WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-minimize.svg";
|
||||
import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
|
||||
import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
|
||||
import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
|
||||
import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
|
||||
import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.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";
|
||||
@@ -110,124 +48,199 @@ 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 MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
|
||||
import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
|
||||
import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
|
||||
import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
|
||||
import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
|
||||
import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.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 MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-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 NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
|
||||
import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
|
||||
import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
|
||||
|
||||
const icons = {
|
||||
LayoutSelectTool: { component: LayoutSelectTool, size: 24 },
|
||||
LayoutCropTool: { component: LayoutCropTool, size: 24 },
|
||||
LayoutNavigateTool: { component: LayoutNavigateTool, size: 24 },
|
||||
LayoutEyedropperTool: { component: LayoutEyedropperTool, size: 24 },
|
||||
ParametricTextTool: { component: ParametricTextTool, size: 24 },
|
||||
ParametricFillTool: { component: ParametricFillTool, size: 24 },
|
||||
ParametricGradientTool: { component: ParametricGradientTool, size: 24 },
|
||||
RasterBrushTool: { component: RasterBrushTool, size: 24 },
|
||||
RasterHealTool: { component: RasterHealTool, size: 24 },
|
||||
RasterCloneTool: { component: RasterCloneTool, size: 24 },
|
||||
RasterPatchTool: { component: RasterPatchTool, size: 24 },
|
||||
RasterBlurSharpenTool: { component: RasterBlurSharpenTool, size: 24 },
|
||||
RasterRelightTool: { component: RasterRelightTool, size: 24 },
|
||||
VectorPathTool: { component: VectorPathTool, size: 24 },
|
||||
VectorPenTool: { component: VectorPenTool, size: 24 },
|
||||
VectorFreehandTool: { component: VectorFreehandTool, size: 24 },
|
||||
VectorSplineTool: { component: VectorSplineTool, size: 24 },
|
||||
VectorLineTool: { component: VectorLineTool, size: 24 },
|
||||
VectorRectangleTool: { component: VectorRectangleTool, size: 24 },
|
||||
VectorEllipseTool: { component: VectorEllipseTool, size: 24 },
|
||||
VectorShapeTool: { component: VectorShapeTool, size: 24 },
|
||||
AlignLeft: { component: AlignLeft, size: 16 },
|
||||
AlignHorizontalCenter: { component: AlignHorizontalCenter, size: 16 },
|
||||
AlignRight: { component: AlignRight, size: 16 },
|
||||
AlignTop: { component: AlignTop, size: 16 },
|
||||
AlignVerticalCenter: { component: AlignVerticalCenter, size: 16 },
|
||||
AlignBottom: { component: AlignBottom, size: 16 },
|
||||
FlipHorizontal: { component: FlipHorizontal, size: 16 },
|
||||
FlipVertical: { component: FlipVertical, size: 16 },
|
||||
BooleanUnion: { component: BooleanUnion, size: 16 },
|
||||
BooleanSubtractFront: { component: BooleanSubtractFront, size: 16 },
|
||||
BooleanSubtractBack: { component: BooleanSubtractBack, size: 16 },
|
||||
BooleanIntersect: { component: BooleanIntersect, size: 16 },
|
||||
BooleanDifference: { component: BooleanDifference, size: 16 },
|
||||
ZoomReset: { component: ZoomReset, size: 16 },
|
||||
ZoomIn: { component: ZoomIn, size: 16 },
|
||||
ZoomOut: { component: ZoomOut, size: 16 },
|
||||
ViewModeNormal: { component: ViewModeNormal, size: 16 },
|
||||
ViewModeOutline: { component: ViewModeOutline, size: 16 },
|
||||
ViewModePixels: { component: ViewModePixels, size: 16 },
|
||||
EyeVisible: { component: EyeVisible, size: 16 },
|
||||
EyeHidden: { component: EyeHidden, size: 16 },
|
||||
GraphiteLogo: { component: GraphiteLogo, size: 16 },
|
||||
File: { component: File, size: 16 },
|
||||
Copy: { component: Copy, size: 16 },
|
||||
Paste: { component: Paste, size: 16 },
|
||||
ViewportDesignMode: { component: ViewportDesignMode, size: 16 },
|
||||
ViewportSelectMode: { component: ViewportSelectMode, size: 16 },
|
||||
ViewportGuideMode: { component: ViewportGuideMode, size: 16 },
|
||||
Checkmark: { component: Checkmark, size: 12 },
|
||||
Link: { component: Link, size: 12 },
|
||||
Grid: { component: Grid, size: 12 },
|
||||
Overlays: { component: Overlays, size: 12 },
|
||||
Snapping: { component: Snapping, size: 12 },
|
||||
Info: { component: Info, size: 12 },
|
||||
Warning: { component: Warning, size: 12 },
|
||||
Swap: { component: Swap, size: 12 },
|
||||
ResetColors: { component: ResetColors, size: 12 },
|
||||
DropdownArrow: { component: DropdownArrow, size: 12 },
|
||||
VerticalEllipsis: { component: VerticalEllipsis, size: 12 },
|
||||
CloseX: { component: CloseX, size: 12 },
|
||||
FullscreenEnter: { component: FullscreenEnter, size: 12 },
|
||||
FullscreenExit: { component: FullscreenExit, size: 12 },
|
||||
WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: 12 },
|
||||
WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: 12 },
|
||||
WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: 12 },
|
||||
WindowButtonWinClose: { component: WindowButtonWinClose, size: 12 },
|
||||
KeyboardArrowUp: { component: KeyboardArrowUp, size: 12 },
|
||||
KeyboardArrowRight: { component: KeyboardArrowRight, size: 12 },
|
||||
KeyboardArrowDown: { component: KeyboardArrowDown, size: 12 },
|
||||
KeyboardArrowLeft: { component: KeyboardArrowLeft, size: 12 },
|
||||
KeyboardBackspace: { component: KeyboardBackspace, size: 12 },
|
||||
KeyboardCommand: { component: KeyboardCommand, size: 12 },
|
||||
KeyboardEnter: { component: KeyboardEnter, size: 12 },
|
||||
KeyboardOption: { component: KeyboardOption, size: 12 },
|
||||
KeyboardShift: { component: KeyboardShift, size: 12 },
|
||||
KeyboardSpace: { component: KeyboardSpace, size: 12 },
|
||||
KeyboardTab: { component: KeyboardTab, size: 12 },
|
||||
MouseHintNone: { component: MouseHintNone, size: 16 },
|
||||
MouseHintLmb: { component: MouseHintLmb, size: 16 },
|
||||
MouseHintRmb: { component: MouseHintRmb, size: 16 },
|
||||
MouseHintMmb: { component: MouseHintMmb, size: 16 },
|
||||
MouseHintScrollUp: { component: MouseHintScrollUp, size: 16 },
|
||||
MouseHintScrollDown: { component: MouseHintScrollDown, size: 16 },
|
||||
MouseHintDrag: { component: MouseHintDrag, size: 16 },
|
||||
MouseHintLmbDrag: { component: MouseHintLmbDrag, size: 16 },
|
||||
MouseHintRmbDrag: { component: MouseHintRmbDrag, size: 16 },
|
||||
MouseHintMmbDrag: { component: MouseHintMmbDrag, size: 16 },
|
||||
NodeTypePath: { component: NodeTypePath, size: 24 },
|
||||
NodeTypeFolder: { component: NodeTypeFolder, size: 24 },
|
||||
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 components = Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component]));
|
||||
const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
|
||||
|
||||
export default defineComponent({
|
||||
components: Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
|
||||
props: {
|
||||
icon: { type: String, required: true },
|
||||
gapAfter: { type: Boolean, default: false },
|
||||
icon: { type: String as PropType<IconName>, required: true },
|
||||
gapAfter: { type: Boolean as PropType<boolean>, default: false },
|
||||
},
|
||||
components,
|
||||
data() {
|
||||
return { icons };
|
||||
return {
|
||||
icons,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -20,13 +20,12 @@
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {},
|
||||
props: {
|
||||
bold: { type: Boolean, default: false },
|
||||
italic: { type: Boolean, default: false },
|
||||
bold: { type: Boolean as PropType<boolean>, default: false },
|
||||
italic: { type: Boolean as PropType<boolean>, default: false },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</template>
|
||||
</template>
|
||||
<span class="input-mouse" v-if="inputMouse">
|
||||
<IconLabel :icon="mouseMovementIcon(inputMouse)" />
|
||||
<IconLabel :icon="`MouseHint${inputMouse}`" />
|
||||
</span>
|
||||
<span class="hint-text" v-if="hasSlotContent">
|
||||
<slot></slot>
|
||||
@@ -95,28 +95,17 @@
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { HintInfo } from "@/dispatcher/js-messages";
|
||||
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
|
||||
export enum MouseInputInteraction {
|
||||
"None" = "None",
|
||||
"Lmb" = "Lmb",
|
||||
"Rmb" = "Rmb",
|
||||
"Mmb" = "Mmb",
|
||||
"ScrollUp" = "ScrollUp",
|
||||
"ScrollDown" = "ScrollDown",
|
||||
"Drag" = "Drag",
|
||||
"LmbDrag" = "LmbDrag",
|
||||
"RmbDrag" = "RmbDrag",
|
||||
"MmbDrag" = "MmbDrag",
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { IconLabel },
|
||||
props: {
|
||||
inputKeys: { type: Array, default: () => [] },
|
||||
inputMouse: { type: String },
|
||||
inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
|
||||
inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },
|
||||
},
|
||||
computed: {
|
||||
hasSlotContent(): boolean {
|
||||
@@ -173,50 +162,14 @@ export default defineComponent({
|
||||
let result;
|
||||
|
||||
// Letters and numbers
|
||||
if (/^[A-Z0-9]$/.test(text)) {
|
||||
result = text;
|
||||
}
|
||||
if (/^[A-Z0-9]$/.test(text)) result = text;
|
||||
// Abbreviated names
|
||||
else if (text in textMap) {
|
||||
result = textMap[text];
|
||||
}
|
||||
else if (text in textMap) result = textMap[text];
|
||||
// Other
|
||||
else {
|
||||
result = text;
|
||||
}
|
||||
else result = text;
|
||||
|
||||
return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
|
||||
},
|
||||
mouseMovementIcon(mouseInputInteraction: MouseInputInteraction) {
|
||||
switch (mouseInputInteraction) {
|
||||
case MouseInputInteraction.Lmb:
|
||||
return "MouseHintLmb";
|
||||
case MouseInputInteraction.Rmb:
|
||||
return "MouseHintRmb";
|
||||
case MouseInputInteraction.Mmb:
|
||||
return "MouseHintMmb";
|
||||
case MouseInputInteraction.ScrollUp:
|
||||
return "MouseHintScrollUp";
|
||||
case MouseInputInteraction.ScrollDown:
|
||||
return "MouseHintScrollDown";
|
||||
case MouseInputInteraction.Drag:
|
||||
return "MouseHintDrag";
|
||||
case MouseInputInteraction.LmbDrag:
|
||||
return "MouseHintLmbDrag";
|
||||
case MouseInputInteraction.RmbDrag:
|
||||
return "MouseHintRmbDrag";
|
||||
case MouseInputInteraction.MmbDrag:
|
||||
return "MouseHintMmbDrag";
|
||||
default:
|
||||
case MouseInputInteraction.None:
|
||||
return "MouseHintNone";
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
MouseInputInteraction,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user