mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-20 11:28:30 +08:00
Separate branded assets from monorepo (#3406)
* remove branded files * use branding repo * include favicons * nixpkg fixup * win fix ico path * fix fmt * skip licensenses for dev builds * review fixup * test * test * ci test * ci test * ci test * fix ci
This commit is contained in:
Timon
@@ -4,9 +4,9 @@
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { IconName } from "@graphite/icons";
|
||||
import type { FrontendGraphInput, FrontendGraphOutput } from "@graphite/messages";
|
||||
import type { NodeGraphState } from "@graphite/state-providers/node-graph";
|
||||
import type { IconName } from "@graphite/utility-functions/icons";
|
||||
|
||||
import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
|
||||
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { type IconName, type IconSize } from "@graphite/utility-functions/icons";
|
||||
import { type IconName, type IconSize } from "@graphite/icons";
|
||||
|
||||
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { type IconName, type PopoverButtonStyle } from "@graphite/icons";
|
||||
|
||||
import type { MenuDirection } from "@graphite/messages";
|
||||
import { type IconName, type PopoverButtonStyle } from "@graphite/utility-functions/icons";
|
||||
|
||||
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { IconName } from "@graphite/icons";
|
||||
|
||||
import type { MenuListEntry } from "@graphite/messages";
|
||||
import type { IconName } from "@graphite/utility-functions/icons";
|
||||
|
||||
import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
|
||||
import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
import type { IconName } from "@graphite/utility-functions/icons";
|
||||
import type { IconName } from "@graphite/icons";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount, onDestroy } from "svelte";
|
||||
|
||||
import { evaluateMathExpression } from "@graphite/../wasm/pkg/graphite_wasm.js";
|
||||
import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
|
||||
import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages";
|
||||
import { evaluateMathExpression } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
|
||||
|
||||
import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
|
||||
import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { type IconName, ICONS, ICON_SVG_STRINGS } from "@graphite/utility-functions/icons";
|
||||
import { type IconName, ICONS, ICON_SVG_STRINGS } from "@graphite/icons";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
|
||||
import type { IconName } from "@graphite/icons";
|
||||
|
||||
import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages";
|
||||
import type { FullscreenState } from "@graphite/state-providers/fullscreen";
|
||||
import type { IconName } from "@graphite/utility-functions/icons";
|
||||
import { operatingSystem } from "@graphite/utility-functions/platform";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// import { panicProxy } from "@graphite/utility-functions/panic-proxy";
|
||||
import init, { setRandomSeed, wasmMemory, EditorHandle, receiveNativeMessage } from "@graphite/../wasm/pkg/graphite_wasm.js";
|
||||
import { type JsMessageType } from "@graphite/messages";
|
||||
import { createSubscriptionRouter, type SubscriptionRouter } from "@graphite/subscription-router";
|
||||
import init, { setRandomSeed, wasmMemory, EditorHandle, receiveNativeMessage } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
|
||||
|
||||
export type Editor = {
|
||||
raw: WebAssembly.Memory;
|
||||
|
||||
@@ -0,0 +1,445 @@
|
||||
// Graphics
|
||||
import GraphiteLogotypeSolid from "@branding/assets/graphics/graphite-logotype-solid.svg";
|
||||
|
||||
const GRAPHICS = {
|
||||
GraphiteLogotypeSolid: { svg: GraphiteLogotypeSolid, size: undefined },
|
||||
} as const;
|
||||
|
||||
// 12px Solid
|
||||
import Add from "@branding/assets/icon-12px-solid/add.svg";
|
||||
import Checkmark from "@branding/assets/icon-12px-solid/checkmark.svg";
|
||||
import Clipped from "@branding/assets/icon-12px-solid/clipped.svg";
|
||||
import CloseX from "@branding/assets/icon-12px-solid/close-x.svg";
|
||||
import Delay from "@branding/assets/icon-12px-solid/delay.svg";
|
||||
import Dot from "@branding/assets/icon-12px-solid/dot.svg";
|
||||
import DropdownArrow from "@branding/assets/icon-12px-solid/dropdown-arrow.svg";
|
||||
import Edit12px from "@branding/assets/icon-12px-solid/edit-12px.svg";
|
||||
import Empty12px from "@branding/assets/icon-12px-solid/empty-12px.svg";
|
||||
import Failure from "@branding/assets/icon-12px-solid/failure.svg";
|
||||
import FullscreenEnter from "@branding/assets/icon-12px-solid/fullscreen-enter.svg";
|
||||
import FullscreenExit from "@branding/assets/icon-12px-solid/fullscreen-exit.svg";
|
||||
import GridDotted from "@branding/assets/icon-12px-solid/grid-dotted.svg";
|
||||
import Grid from "@branding/assets/icon-12px-solid/grid.svg";
|
||||
import Info from "@branding/assets/icon-12px-solid/info.svg";
|
||||
import KeyboardArrowDown from "@branding/assets/icon-12px-solid/keyboard-arrow-down.svg";
|
||||
import KeyboardArrowLeft from "@branding/assets/icon-12px-solid/keyboard-arrow-left.svg";
|
||||
import KeyboardArrowRight from "@branding/assets/icon-12px-solid/keyboard-arrow-right.svg";
|
||||
import KeyboardArrowUp from "@branding/assets/icon-12px-solid/keyboard-arrow-up.svg";
|
||||
import KeyboardBackspace from "@branding/assets/icon-12px-solid/keyboard-backspace.svg";
|
||||
import KeyboardCommand from "@branding/assets/icon-12px-solid/keyboard-command.svg";
|
||||
import KeyboardControl from "@branding/assets/icon-12px-solid/keyboard-control.svg";
|
||||
import KeyboardEnter from "@branding/assets/icon-12px-solid/keyboard-enter.svg";
|
||||
import KeyboardOption from "@branding/assets/icon-12px-solid/keyboard-option.svg";
|
||||
import KeyboardShift from "@branding/assets/icon-12px-solid/keyboard-shift.svg";
|
||||
import KeyboardSpace from "@branding/assets/icon-12px-solid/keyboard-space.svg";
|
||||
import KeyboardTab from "@branding/assets/icon-12px-solid/keyboard-tab.svg";
|
||||
import License12px from "@branding/assets/icon-12px-solid/license-12px.svg";
|
||||
import Link from "@branding/assets/icon-12px-solid/link.svg";
|
||||
import Overlays from "@branding/assets/icon-12px-solid/overlays.svg";
|
||||
import Remove from "@branding/assets/icon-12px-solid/remove.svg";
|
||||
import RenderModeNormal from "@branding/assets/icon-12px-solid/render-mode-normal.svg";
|
||||
import RenderModeOutline from "@branding/assets/icon-12px-solid/render-mode-outline.svg";
|
||||
import RenderModePixels from "@branding/assets/icon-12px-solid/render-mode-pixels.svg";
|
||||
import RenderModeSvg from "@branding/assets/icon-12px-solid/render-mode-svg.svg";
|
||||
import Snapping from "@branding/assets/icon-12px-solid/snapping.svg";
|
||||
import SwapHorizontal from "@branding/assets/icon-12px-solid/swap-horizontal.svg";
|
||||
import SwapVertical from "@branding/assets/icon-12px-solid/swap-vertical.svg";
|
||||
import VerticalEllipsis from "@branding/assets/icon-12px-solid/vertical-ellipsis.svg";
|
||||
import Warning from "@branding/assets/icon-12px-solid/warning.svg";
|
||||
import WindowButtonWinClose from "@branding/assets/icon-12px-solid/window-button-win-close.svg";
|
||||
import WindowButtonWinMaximize from "@branding/assets/icon-12px-solid/window-button-win-maximize.svg";
|
||||
import WindowButtonWinMinimize from "@branding/assets/icon-12px-solid/window-button-win-minimize.svg";
|
||||
import WindowButtonWinRestoreDown from "@branding/assets/icon-12px-solid/window-button-win-restore-down.svg";
|
||||
import WorkingColors from "@branding/assets/icon-12px-solid/working-colors.svg";
|
||||
|
||||
const SOLID_12PX = {
|
||||
Add: { svg: Add, size: 12 },
|
||||
Checkmark: { svg: Checkmark, size: 12 },
|
||||
Clipped: { svg: Clipped, size: 12 },
|
||||
CloseX: { svg: CloseX, size: 12 },
|
||||
Delay: { svg: Delay, size: 12 },
|
||||
Dot: { svg: Dot, size: 12 },
|
||||
DropdownArrow: { svg: DropdownArrow, size: 12 },
|
||||
Edit12px: { svg: Edit12px, size: 12 },
|
||||
Empty12px: { svg: Empty12px, size: 12 },
|
||||
Failure: { svg: Failure, size: 12 },
|
||||
FullscreenEnter: { svg: FullscreenEnter, size: 12 },
|
||||
FullscreenExit: { svg: FullscreenExit, size: 12 },
|
||||
Grid: { svg: Grid, size: 12 },
|
||||
GridDotted: { svg: GridDotted, size: 12 },
|
||||
Info: { svg: Info, size: 12 },
|
||||
KeyboardArrowDown: { svg: KeyboardArrowDown, size: 12 },
|
||||
KeyboardArrowLeft: { svg: KeyboardArrowLeft, size: 12 },
|
||||
KeyboardArrowRight: { svg: KeyboardArrowRight, size: 12 },
|
||||
KeyboardArrowUp: { svg: KeyboardArrowUp, size: 12 },
|
||||
KeyboardBackspace: { svg: KeyboardBackspace, size: 12 },
|
||||
KeyboardCommand: { svg: KeyboardCommand, size: 12 },
|
||||
KeyboardControl: { svg: KeyboardControl, size: 12 },
|
||||
KeyboardEnter: { svg: KeyboardEnter, size: 12 },
|
||||
KeyboardOption: { svg: KeyboardOption, size: 12 },
|
||||
KeyboardShift: { svg: KeyboardShift, size: 12 },
|
||||
KeyboardSpace: { svg: KeyboardSpace, size: 12 },
|
||||
KeyboardTab: { svg: KeyboardTab, size: 12 },
|
||||
License12px: { svg: License12px, size: 12 },
|
||||
Link: { svg: Link, size: 12 },
|
||||
Overlays: { svg: Overlays, size: 12 },
|
||||
Remove: { svg: Remove, size: 12 },
|
||||
RenderModeNormal: { svg: RenderModeNormal, size: 12 },
|
||||
RenderModeOutline: { svg: RenderModeOutline, size: 12 },
|
||||
RenderModePixels: { svg: RenderModePixels, size: 12 },
|
||||
RenderModeSvg: { svg: RenderModeSvg, size: 12 },
|
||||
Snapping: { svg: Snapping, size: 12 },
|
||||
SwapHorizontal: { svg: SwapHorizontal, size: 12 },
|
||||
SwapVertical: { svg: SwapVertical, size: 12 },
|
||||
VerticalEllipsis: { svg: VerticalEllipsis, size: 12 },
|
||||
Warning: { svg: Warning, size: 12 },
|
||||
WindowButtonWinClose: { svg: WindowButtonWinClose, size: 12 },
|
||||
WindowButtonWinMaximize: { svg: WindowButtonWinMaximize, size: 12 },
|
||||
WindowButtonWinMinimize: { svg: WindowButtonWinMinimize, size: 12 },
|
||||
WindowButtonWinRestoreDown: { svg: WindowButtonWinRestoreDown, size: 12 },
|
||||
WorkingColors: { svg: WorkingColors, size: 12 },
|
||||
} as const;
|
||||
|
||||
// 16px Solid
|
||||
import AlignBottom from "@branding/assets/icon-16px-solid/align-bottom.svg";
|
||||
import AlignHorizontalCenter from "@branding/assets/icon-16px-solid/align-horizontal-center.svg";
|
||||
import AlignLeft from "@branding/assets/icon-16px-solid/align-left.svg";
|
||||
import AlignRight from "@branding/assets/icon-16px-solid/align-right.svg";
|
||||
import AlignTop from "@branding/assets/icon-16px-solid/align-top.svg";
|
||||
import AlignVerticalCenter from "@branding/assets/icon-16px-solid/align-vertical-center.svg";
|
||||
import Artboard from "@branding/assets/icon-16px-solid/artboard.svg";
|
||||
import BooleanDifference from "@branding/assets/icon-16px-solid/boolean-difference.svg";
|
||||
import BooleanDivide from "@branding/assets/icon-16px-solid/boolean-divide.svg";
|
||||
import BooleanIntersect from "@branding/assets/icon-16px-solid/boolean-intersect.svg";
|
||||
import BooleanSubtractBack from "@branding/assets/icon-16px-solid/boolean-subtract-back.svg";
|
||||
import BooleanSubtractFront from "@branding/assets/icon-16px-solid/boolean-subtract-front.svg";
|
||||
import BooleanUnion from "@branding/assets/icon-16px-solid/boolean-union.svg";
|
||||
import Bug from "@branding/assets/icon-16px-solid/bug.svg";
|
||||
import CheckboxChecked from "@branding/assets/icon-16px-solid/checkbox-checked.svg";
|
||||
import CheckboxUnchecked from "@branding/assets/icon-16px-solid/checkbox-unchecked.svg";
|
||||
import CloseAll from "@branding/assets/icon-16px-solid/close-all.svg";
|
||||
import Close from "@branding/assets/icon-16px-solid/close.svg";
|
||||
import Code from "@branding/assets/icon-16px-solid/code.svg";
|
||||
import Copy from "@branding/assets/icon-16px-solid/copy.svg";
|
||||
import Credits from "@branding/assets/icon-16px-solid/credits.svg";
|
||||
import CustomColor from "@branding/assets/icon-16px-solid/custom-color.svg";
|
||||
import Cut from "@branding/assets/icon-16px-solid/cut.svg";
|
||||
import DeselectAll from "@branding/assets/icon-16px-solid/deselect-all.svg";
|
||||
import Edit from "@branding/assets/icon-16px-solid/edit.svg";
|
||||
import Empty from "@branding/assets/icon-16px-solid/empty.svg";
|
||||
import EyeHidden from "@branding/assets/icon-16px-solid/eye-hidden.svg";
|
||||
import EyeHide from "@branding/assets/icon-16px-solid/eye-hide.svg";
|
||||
import EyeShow from "@branding/assets/icon-16px-solid/eye-show.svg";
|
||||
import EyeVisible from "@branding/assets/icon-16px-solid/eye-visible.svg";
|
||||
import Eyedropper from "@branding/assets/icon-16px-solid/eyedropper.svg";
|
||||
import FileExport from "@branding/assets/icon-16px-solid/file-export.svg";
|
||||
import FileImport from "@branding/assets/icon-16px-solid/file-import.svg";
|
||||
import File from "@branding/assets/icon-16px-solid/file.svg";
|
||||
import FlipHorizontal from "@branding/assets/icon-16px-solid/flip-horizontal.svg";
|
||||
import FlipVertical from "@branding/assets/icon-16px-solid/flip-vertical.svg";
|
||||
import FolderOpen from "@branding/assets/icon-16px-solid/folder-open.svg";
|
||||
import Folder from "@branding/assets/icon-16px-solid/folder.svg";
|
||||
import FrameAll from "@branding/assets/icon-16px-solid/frame-all.svg";
|
||||
import FrameSelected from "@branding/assets/icon-16px-solid/frame-selected.svg";
|
||||
import GraphViewClosed from "@branding/assets/icon-16px-solid/graph-view-closed.svg";
|
||||
import GraphViewOpen from "@branding/assets/icon-16px-solid/graph-view-open.svg";
|
||||
import GraphiteLogo from "@branding/assets/icon-16px-solid/graphite-logo.svg";
|
||||
import HandleVisibilityAll from "@branding/assets/icon-16px-solid/handle-visibility-all.svg";
|
||||
import HandleVisibilityFrontier from "@branding/assets/icon-16px-solid/handle-visibility-frontier.svg";
|
||||
import HandleVisibilitySelected from "@branding/assets/icon-16px-solid/handle-visibility-selected.svg";
|
||||
import Heart from "@branding/assets/icon-16px-solid/heart.svg";
|
||||
import HistoryRedo from "@branding/assets/icon-16px-solid/history-redo.svg";
|
||||
import HistoryUndo from "@branding/assets/icon-16px-solid/history-undo.svg";
|
||||
import IconsGrid from "@branding/assets/icon-16px-solid/icons-grid.svg";
|
||||
import Image from "@branding/assets/icon-16px-solid/image.svg";
|
||||
import Layer from "@branding/assets/icon-16px-solid/layer.svg";
|
||||
import License from "@branding/assets/icon-16px-solid/license.svg";
|
||||
import NewLayer from "@branding/assets/icon-16px-solid/new-layer.svg";
|
||||
import NodeBlur from "@branding/assets/icon-16px-solid/node-blur.svg";
|
||||
import NodeBrushwork from "@branding/assets/icon-16px-solid/node-brushwork.svg";
|
||||
import NodeColorCorrection from "@branding/assets/icon-16px-solid/node-color-correction.svg";
|
||||
import NodeGradient from "@branding/assets/icon-16px-solid/node-gradient.svg";
|
||||
import NodeImaginate from "@branding/assets/icon-16px-solid/node-imaginate.svg";
|
||||
import NodeMagicWand from "@branding/assets/icon-16px-solid/node-magic-wand.svg";
|
||||
import NodeMask from "@branding/assets/icon-16px-solid/node-mask.svg";
|
||||
import NodeMotionBlur from "@branding/assets/icon-16px-solid/node-motion-blur.svg";
|
||||
import NodeNodes from "@branding/assets/icon-16px-solid/node-nodes.svg";
|
||||
import NodeOutput from "@branding/assets/icon-16px-solid/node-output.svg";
|
||||
import NodeShape from "@branding/assets/icon-16px-solid/node-shape.svg";
|
||||
import NodeText from "@branding/assets/icon-16px-solid/node-text.svg";
|
||||
import NodeTransform from "@branding/assets/icon-16px-solid/node-transform.svg";
|
||||
import Node from "@branding/assets/icon-16px-solid/node.svg";
|
||||
import PadlockLocked from "@branding/assets/icon-16px-solid/padlock-locked.svg";
|
||||
import PadlockUnlocked from "@branding/assets/icon-16px-solid/padlock-unlocked.svg";
|
||||
import Paste from "@branding/assets/icon-16px-solid/paste.svg";
|
||||
import PinActive from "@branding/assets/icon-16px-solid/pin-active.svg";
|
||||
import PinInactive from "@branding/assets/icon-16px-solid/pin-inactive.svg";
|
||||
import PlaybackPause from "@branding/assets/icon-16px-solid/playback-pause.svg";
|
||||
import PlaybackPlay from "@branding/assets/icon-16px-solid/playback-play.svg";
|
||||
import PlaybackToEnd from "@branding/assets/icon-16px-solid/playback-to-end.svg";
|
||||
import PlaybackToStart from "@branding/assets/icon-16px-solid/playback-to-start.svg";
|
||||
import Random from "@branding/assets/icon-16px-solid/random.svg";
|
||||
import Reload from "@branding/assets/icon-16px-solid/reload.svg";
|
||||
import Reset from "@branding/assets/icon-16px-solid/reset.svg";
|
||||
import Resync from "@branding/assets/icon-16px-solid/resync.svg";
|
||||
import ReverseRadialGradientToLeft from "@branding/assets/icon-16px-solid/reverse-radial-gradient-to-left.svg";
|
||||
import ReverseRadialGradientToRight from "@branding/assets/icon-16px-solid/reverse-radial-gradient-to-right.svg";
|
||||
import Reverse from "@branding/assets/icon-16px-solid/reverse.svg";
|
||||
import Save from "@branding/assets/icon-16px-solid/save.svg";
|
||||
import SelectAll from "@branding/assets/icon-16px-solid/select-all.svg";
|
||||
import SelectParent from "@branding/assets/icon-16px-solid/select-parent.svg";
|
||||
import Settings from "@branding/assets/icon-16px-solid/settings.svg";
|
||||
import SmallDot from "@branding/assets/icon-16px-solid/small-dot.svg";
|
||||
import StackBottom from "@branding/assets/icon-16px-solid/stack-bottom.svg";
|
||||
import StackHollow from "@branding/assets/icon-16px-solid/stack-hollow.svg";
|
||||
import StackLower from "@branding/assets/icon-16px-solid/stack-lower.svg";
|
||||
import StackRaise from "@branding/assets/icon-16px-solid/stack-raise.svg";
|
||||
import StackReverse from "@branding/assets/icon-16px-solid/stack-reverse.svg";
|
||||
import Stack from "@branding/assets/icon-16px-solid/stack.svg";
|
||||
import TiltReset from "@branding/assets/icon-16px-solid/tilt-reset.svg";
|
||||
import Tilt from "@branding/assets/icon-16px-solid/tilt.svg";
|
||||
import TransformationGrab from "@branding/assets/icon-16px-solid/transformation-grab.svg";
|
||||
import TransformationRotate from "@branding/assets/icon-16px-solid/transformation-rotate.svg";
|
||||
import TransformationScale from "@branding/assets/icon-16px-solid/transformation-scale.svg";
|
||||
import Trash from "@branding/assets/icon-16px-solid/trash.svg";
|
||||
import TurnNegative90 from "@branding/assets/icon-16px-solid/turn-negative-90.svg";
|
||||
import TurnPositive90 from "@branding/assets/icon-16px-solid/turn-positive-90.svg";
|
||||
import UserManual from "@branding/assets/icon-16px-solid/user-manual.svg";
|
||||
import ViewportDesignMode from "@branding/assets/icon-16px-solid/viewport-design-mode.svg";
|
||||
import ViewportGuideMode from "@branding/assets/icon-16px-solid/viewport-guide-mode.svg";
|
||||
import ViewportSelectMode from "@branding/assets/icon-16px-solid/viewport-select-mode.svg";
|
||||
import Volunteer from "@branding/assets/icon-16px-solid/volunteer.svg";
|
||||
import Website from "@branding/assets/icon-16px-solid/website.svg";
|
||||
import WorkingColorsPrimary from "@branding/assets/icon-16px-solid/working-colors-primary.svg";
|
||||
import WorkingColorsSecondary from "@branding/assets/icon-16px-solid/working-colors-secondary.svg";
|
||||
import Zoom1x from "@branding/assets/icon-16px-solid/zoom-1x.svg";
|
||||
import Zoom2x from "@branding/assets/icon-16px-solid/zoom-2x.svg";
|
||||
import ZoomIn from "@branding/assets/icon-16px-solid/zoom-in.svg";
|
||||
import ZoomOut from "@branding/assets/icon-16px-solid/zoom-out.svg";
|
||||
import ZoomReset from "@branding/assets/icon-16px-solid/zoom-reset.svg";
|
||||
|
||||
const SOLID_16PX = {
|
||||
AlignBottom: { svg: AlignBottom, size: 16 },
|
||||
AlignHorizontalCenter: { svg: AlignHorizontalCenter, size: 16 },
|
||||
AlignLeft: { svg: AlignLeft, size: 16 },
|
||||
AlignRight: { svg: AlignRight, size: 16 },
|
||||
AlignTop: { svg: AlignTop, size: 16 },
|
||||
AlignVerticalCenter: { svg: AlignVerticalCenter, size: 16 },
|
||||
Artboard: { svg: Artboard, size: 16 },
|
||||
BooleanDifference: { svg: BooleanDifference, size: 16 },
|
||||
BooleanDivide: { svg: BooleanDivide, size: 16 },
|
||||
BooleanIntersect: { svg: BooleanIntersect, size: 16 },
|
||||
BooleanSubtractBack: { svg: BooleanSubtractBack, size: 16 },
|
||||
BooleanSubtractFront: { svg: BooleanSubtractFront, size: 16 },
|
||||
BooleanUnion: { svg: BooleanUnion, size: 16 },
|
||||
Bug: { svg: Bug, size: 16 },
|
||||
CheckboxChecked: { svg: CheckboxChecked, size: 16 },
|
||||
CheckboxUnchecked: { svg: CheckboxUnchecked, size: 16 },
|
||||
Close: { svg: Close, size: 16 },
|
||||
CloseAll: { svg: CloseAll, size: 16 },
|
||||
Code: { svg: Code, size: 16 },
|
||||
Copy: { svg: Copy, size: 16 },
|
||||
Credits: { svg: Credits, size: 16 },
|
||||
CustomColor: { svg: CustomColor, size: 16 },
|
||||
Cut: { svg: Cut, size: 16 },
|
||||
DeselectAll: { svg: DeselectAll, size: 16 },
|
||||
Edit: { svg: Edit, size: 16 },
|
||||
Empty: { svg: Empty, size: 16 },
|
||||
Eyedropper: { svg: Eyedropper, size: 16 },
|
||||
EyeHidden: { svg: EyeHidden, size: 16 },
|
||||
EyeHide: { svg: EyeHide, size: 16 },
|
||||
EyeShow: { svg: EyeShow, size: 16 },
|
||||
EyeVisible: { svg: EyeVisible, size: 16 },
|
||||
File: { svg: File, size: 16 },
|
||||
FileExport: { svg: FileExport, size: 16 },
|
||||
FileImport: { svg: FileImport, size: 16 },
|
||||
FlipHorizontal: { svg: FlipHorizontal, size: 16 },
|
||||
FlipVertical: { svg: FlipVertical, size: 16 },
|
||||
Folder: { svg: Folder, size: 16 },
|
||||
FolderOpen: { svg: FolderOpen, size: 16 },
|
||||
FrameAll: { svg: FrameAll, size: 16 },
|
||||
FrameSelected: { svg: FrameSelected, size: 16 },
|
||||
GraphiteLogo: { svg: GraphiteLogo, size: 16 },
|
||||
GraphViewClosed: { svg: GraphViewClosed, size: 16 },
|
||||
GraphViewOpen: { svg: GraphViewOpen, size: 16 },
|
||||
HandleVisibilityAll: { svg: HandleVisibilityAll, size: 16 },
|
||||
HandleVisibilityFrontier: { svg: HandleVisibilityFrontier, size: 16 },
|
||||
HandleVisibilitySelected: { svg: HandleVisibilitySelected, size: 16 },
|
||||
Heart: { svg: Heart, size: 16 },
|
||||
HistoryRedo: { svg: HistoryRedo, size: 16 },
|
||||
HistoryUndo: { svg: HistoryUndo, size: 16 },
|
||||
IconsGrid: { svg: IconsGrid, size: 16 },
|
||||
Image: { svg: Image, size: 16 },
|
||||
Layer: { svg: Layer, size: 16 },
|
||||
License: { svg: License, size: 16 },
|
||||
NewLayer: { svg: NewLayer, size: 16 },
|
||||
Node: { svg: Node, size: 16 },
|
||||
NodeBlur: { svg: NodeBlur, size: 16 },
|
||||
NodeBrushwork: { svg: NodeBrushwork, size: 16 },
|
||||
NodeColorCorrection: { svg: NodeColorCorrection, size: 16 },
|
||||
NodeGradient: { svg: NodeGradient, size: 16 },
|
||||
NodeImaginate: { svg: NodeImaginate, size: 16 },
|
||||
NodeMagicWand: { svg: NodeMagicWand, size: 16 },
|
||||
NodeMask: { svg: NodeMask, size: 16 },
|
||||
NodeMotionBlur: { svg: NodeMotionBlur, size: 16 },
|
||||
NodeNodes: { svg: NodeNodes, size: 16 },
|
||||
NodeOutput: { svg: NodeOutput, size: 16 },
|
||||
NodeShape: { svg: NodeShape, size: 16 },
|
||||
NodeText: { svg: NodeText, size: 16 },
|
||||
NodeTransform: { svg: NodeTransform, size: 16 },
|
||||
PadlockLocked: { svg: PadlockLocked, size: 16 },
|
||||
PadlockUnlocked: { svg: PadlockUnlocked, size: 16 },
|
||||
Paste: { svg: Paste, size: 16 },
|
||||
PinActive: { svg: PinActive, size: 16 },
|
||||
PinInactive: { svg: PinInactive, size: 16 },
|
||||
PlaybackPause: { svg: PlaybackPause, size: 16 },
|
||||
PlaybackPlay: { svg: PlaybackPlay, size: 16 },
|
||||
PlaybackToEnd: { svg: PlaybackToEnd, size: 16 },
|
||||
PlaybackToStart: { svg: PlaybackToStart, size: 16 },
|
||||
Random: { svg: Random, size: 16 },
|
||||
Reload: { svg: Reload, size: 16 },
|
||||
Reset: { svg: Reset, size: 16 },
|
||||
Resync: { svg: Resync, size: 16 },
|
||||
Reverse: { svg: Reverse, size: 16 },
|
||||
ReverseRadialGradientToLeft: { svg: ReverseRadialGradientToLeft, size: 16 },
|
||||
ReverseRadialGradientToRight: { svg: ReverseRadialGradientToRight, size: 16 },
|
||||
Save: { svg: Save, size: 16 },
|
||||
SelectAll: { svg: SelectAll, size: 16 },
|
||||
SelectParent: { svg: SelectParent, size: 16 },
|
||||
Settings: { svg: Settings, size: 16 },
|
||||
SmallDot: { svg: SmallDot, size: 16 },
|
||||
Stack: { svg: Stack, size: 16 },
|
||||
StackBottom: { svg: StackBottom, size: 16 },
|
||||
StackHollow: { svg: StackHollow, size: 16 },
|
||||
StackLower: { svg: StackLower, size: 16 },
|
||||
StackRaise: { svg: StackRaise, size: 16 },
|
||||
StackReverse: { svg: StackReverse, size: 16 },
|
||||
Tilt: { svg: Tilt, size: 16 },
|
||||
TiltReset: { svg: TiltReset, size: 16 },
|
||||
TransformationGrab: { svg: TransformationGrab, size: 16 },
|
||||
TransformationRotate: { svg: TransformationRotate, size: 16 },
|
||||
TransformationScale: { svg: TransformationScale, size: 16 },
|
||||
Trash: { svg: Trash, size: 16 },
|
||||
TurnNegative90: { svg: TurnNegative90, size: 16 },
|
||||
TurnPositive90: { svg: TurnPositive90, size: 16 },
|
||||
UserManual: { svg: UserManual, size: 16 },
|
||||
ViewportDesignMode: { svg: ViewportDesignMode, size: 16 },
|
||||
ViewportGuideMode: { svg: ViewportGuideMode, size: 16 },
|
||||
ViewportSelectMode: { svg: ViewportSelectMode, size: 16 },
|
||||
Volunteer: { svg: Volunteer, size: 16 },
|
||||
Website: { svg: Website, size: 16 },
|
||||
WorkingColorsPrimary: { svg: WorkingColorsPrimary, size: 16 },
|
||||
WorkingColorsSecondary: { svg: WorkingColorsSecondary, size: 16 },
|
||||
Zoom1x: { svg: Zoom1x, size: 16 },
|
||||
Zoom2x: { svg: Zoom2x, size: 16 },
|
||||
ZoomIn: { svg: ZoomIn, size: 16 },
|
||||
ZoomOut: { svg: ZoomOut, size: 16 },
|
||||
ZoomReset: { svg: ZoomReset, size: 16 },
|
||||
} as const;
|
||||
|
||||
// 16px Two-Tone
|
||||
import MouseHintDrag from "@branding/assets/icon-16px-two-tone/mouse-hint-drag.svg";
|
||||
import MouseHintLmbDouble from "@branding/assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
|
||||
import MouseHintLmbDrag from "@branding/assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
|
||||
import MouseHintLmb from "@branding/assets/icon-16px-two-tone/mouse-hint-lmb.svg";
|
||||
import MouseHintMmbDrag from "@branding/assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
|
||||
import MouseHintMmb from "@branding/assets/icon-16px-two-tone/mouse-hint-mmb.svg";
|
||||
import MouseHintNone from "@branding/assets/icon-16px-two-tone/mouse-hint-none.svg";
|
||||
import MouseHintRmbDouble from "@branding/assets/icon-16px-two-tone/mouse-hint-rmb-double.svg";
|
||||
import MouseHintRmbDrag from "@branding/assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
|
||||
import MouseHintRmb from "@branding/assets/icon-16px-two-tone/mouse-hint-rmb.svg";
|
||||
import MouseHintScrollDown from "@branding/assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
|
||||
import MouseHintScrollUp from "@branding/assets/icon-16px-two-tone/mouse-hint-scroll-up.svg";
|
||||
|
||||
const TWO_TONE_16PX = {
|
||||
MouseHintDrag: { svg: MouseHintDrag, size: 16 },
|
||||
MouseHintLmb: { svg: MouseHintLmb, size: 16 },
|
||||
MouseHintLmbDouble: { svg: MouseHintLmbDouble, size: 16 },
|
||||
MouseHintLmbDrag: { svg: MouseHintLmbDrag, size: 16 },
|
||||
MouseHintMmb: { svg: MouseHintMmb, size: 16 },
|
||||
MouseHintMmbDrag: { svg: MouseHintMmbDrag, size: 16 },
|
||||
MouseHintNone: { svg: MouseHintNone, size: 16 },
|
||||
MouseHintRmb: { svg: MouseHintRmb, size: 16 },
|
||||
MouseHintRmbDouble: { svg: MouseHintRmbDouble, size: 16 },
|
||||
MouseHintRmbDrag: { svg: MouseHintRmbDrag, size: 16 },
|
||||
MouseHintScrollDown: { svg: MouseHintScrollDown, size: 16 },
|
||||
MouseHintScrollUp: { svg: MouseHintScrollUp, size: 16 },
|
||||
} as const;
|
||||
|
||||
// 24px Two-Tone
|
||||
import GeneralArtboardTool from "@branding/assets/icon-24px-two-tone/general-artboard-tool.svg";
|
||||
import GeneralEyedropperTool from "@branding/assets/icon-24px-two-tone/general-eyedropper-tool.svg";
|
||||
import GeneralFillTool from "@branding/assets/icon-24px-two-tone/general-fill-tool.svg";
|
||||
import GeneralGradientTool from "@branding/assets/icon-24px-two-tone/general-gradient-tool.svg";
|
||||
import GeneralNavigateTool from "@branding/assets/icon-24px-two-tone/general-navigate-tool.svg";
|
||||
import GeneralSelectTool from "@branding/assets/icon-24px-two-tone/general-select-tool.svg";
|
||||
import RasterBrushTool from "@branding/assets/icon-24px-two-tone/raster-brush-tool.svg";
|
||||
import RasterCloneTool from "@branding/assets/icon-24px-two-tone/raster-clone-tool.svg";
|
||||
import RasterDetailTool from "@branding/assets/icon-24px-two-tone/raster-detail-tool.svg";
|
||||
import RasterHealTool from "@branding/assets/icon-24px-two-tone/raster-heal-tool.svg";
|
||||
import RasterImaginateTool from "@branding/assets/icon-24px-two-tone/raster-imaginate-tool.svg";
|
||||
import RasterPatchTool from "@branding/assets/icon-24px-two-tone/raster-patch-tool.svg";
|
||||
import RasterRelightTool from "@branding/assets/icon-24px-two-tone/raster-relight-tool.svg";
|
||||
import VectorEllipseTool from "@branding/assets/icon-24px-two-tone/vector-ellipse-tool.svg";
|
||||
import VectorFreehandTool from "@branding/assets/icon-24px-two-tone/vector-freehand-tool.svg";
|
||||
import VectorLineTool from "@branding/assets/icon-24px-two-tone/vector-line-tool.svg";
|
||||
import VectorPathTool from "@branding/assets/icon-24px-two-tone/vector-path-tool.svg";
|
||||
import VectorPenTool from "@branding/assets/icon-24px-two-tone/vector-pen-tool.svg";
|
||||
import VectorPolygonTool from "@branding/assets/icon-24px-two-tone/vector-polygon-tool.svg";
|
||||
import VectorRectangleTool from "@branding/assets/icon-24px-two-tone/vector-rectangle-tool.svg";
|
||||
import VectorSplineTool from "@branding/assets/icon-24px-two-tone/vector-spline-tool.svg";
|
||||
import VectorTextTool from "@branding/assets/icon-24px-two-tone/vector-text-tool.svg";
|
||||
|
||||
const TWO_TONE_24PX = {
|
||||
GeneralArtboardTool: { svg: GeneralArtboardTool, size: 24 },
|
||||
GeneralEyedropperTool: { svg: GeneralEyedropperTool, size: 24 },
|
||||
GeneralFillTool: { svg: GeneralFillTool, size: 24 },
|
||||
GeneralGradientTool: { svg: GeneralGradientTool, size: 24 },
|
||||
GeneralNavigateTool: { svg: GeneralNavigateTool, size: 24 },
|
||||
GeneralSelectTool: { svg: GeneralSelectTool, size: 24 },
|
||||
RasterBrushTool: { svg: RasterBrushTool, size: 24 },
|
||||
RasterCloneTool: { svg: RasterCloneTool, size: 24 },
|
||||
RasterDetailTool: { svg: RasterDetailTool, size: 24 },
|
||||
RasterHealTool: { svg: RasterHealTool, size: 24 },
|
||||
RasterImaginateTool: { svg: RasterImaginateTool, size: 24 },
|
||||
RasterPatchTool: { svg: RasterPatchTool, size: 24 },
|
||||
RasterRelightTool: { svg: RasterRelightTool, size: 24 },
|
||||
VectorEllipseTool: { svg: VectorEllipseTool, size: 24 },
|
||||
VectorFreehandTool: { svg: VectorFreehandTool, size: 24 },
|
||||
VectorLineTool: { svg: VectorLineTool, size: 24 },
|
||||
VectorPathTool: { svg: VectorPathTool, size: 24 },
|
||||
VectorPenTool: { svg: VectorPenTool, size: 24 },
|
||||
VectorRectangleTool: { svg: VectorRectangleTool, size: 24 },
|
||||
VectorPolygonTool: { svg: VectorPolygonTool, size: 24 },
|
||||
VectorSplineTool: { svg: VectorSplineTool, size: 24 },
|
||||
VectorTextTool: { svg: VectorTextTool, size: 24 },
|
||||
} as const;
|
||||
|
||||
// All icons
|
||||
const ICON_LIST = {
|
||||
...GRAPHICS,
|
||||
...SOLID_12PX,
|
||||
...SOLID_16PX,
|
||||
...TWO_TONE_16PX,
|
||||
...TWO_TONE_24PX,
|
||||
} as const;
|
||||
|
||||
// Exported icons and types
|
||||
export const ICONS: IconDefinitionType<typeof ICON_LIST> = ICON_LIST;
|
||||
export const ICON_SVG_STRINGS = Object.fromEntries(Object.entries(ICONS).map(([name, data]) => [name, data.svg]));
|
||||
|
||||
export type IconName = keyof typeof ICONS;
|
||||
export type IconSize = undefined | 12 | 16 | 24 | 32;
|
||||
export type PopoverButtonStyle = "DropdownArrow" | "VerticalEllipsis";
|
||||
|
||||
// The following helper type declarations allow us to avoid manually maintaining the `IconName` type declaration as a string union paralleling the keys of the
|
||||
// icon definitions. It lets TypeScript do that for us. Our goal is to define the big key-value pair of icons by constraining its values, but inferring its keys.
|
||||
// Constraining its values means that TypeScript can make sure each icon definition has a valid size number from the union of numbers that is `IconSize`.
|
||||
// Inferring its keys means we don't have to specify a supertype like `string` or `any` for the key-value pair's keys, which would prevent us from accessing
|
||||
// the individual keys with `keyof typeof`. Absent a specified type for the keys, TypeScript falls back to inferring that the key-value pair's type is the
|
||||
// map of all its individual entries. Having the full list of entries lets us automatically set the `IconName` type to the union of strings that is the full
|
||||
// list of keys. The result is that we don't have to maintain a separate list of icon names since this scheme infers it from the keys of the icon definitions.
|
||||
// Based on https://stackoverflow.com/a/64119715/775283
|
||||
type IconDefinition = { svg: string; size: IconSize };
|
||||
type EvaluateType<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
|
||||
type IconDefinitionType<T extends Record<string, IconDefinition>> = EvaluateType<{ [key in keyof T]: IconDefinition }>;
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
import { Transform, Type, plainToClass } from "class-transformer";
|
||||
|
||||
import { type PopoverButtonStyle, type IconName, type IconSize } from "@graphite/utility-functions/icons";
|
||||
import { type EditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
|
||||
import { type EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm.js";
|
||||
import { type PopoverButtonStyle, type IconName, type IconSize } from "@graphite/icons";
|
||||
|
||||
export class JsMessage {
|
||||
// The marker provides a way to check if an object is a sub-class constructor for a jsMessage.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
import { type Editor } from "@graphite/editor";
|
||||
import { type IconName } from "@graphite/icons";
|
||||
import {
|
||||
defaultWidgetLayout,
|
||||
DisplayDialog,
|
||||
@@ -11,7 +12,6 @@ import {
|
||||
patchWidgetLayout,
|
||||
TriggerDisplayThirdPartyLicensesDialog,
|
||||
} from "@graphite/messages";
|
||||
import { type IconName } from "@graphite/utility-functions/icons";
|
||||
|
||||
export function createDialogState(editor: Editor) {
|
||||
const { subscribe, update } = writable({
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { plainToInstance } from "class-transformer";
|
||||
|
||||
import { type EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm.js";
|
||||
import { type JsMessageType, messageMakers, type JsMessage } from "@graphite/messages";
|
||||
import { type EditorHandle } from "@graphite-frontend/wasm/pkg/graphite_wasm.js";
|
||||
|
||||
type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
|
||||
// Don't know a better way of typing this since it can be any subclass of JsMessage
|
||||
|
||||
@@ -1,445 +0,0 @@
|
||||
// Graphics
|
||||
import GraphiteLogotypeSolid from "@graphite-frontend/assets/graphics/graphite-logotype-solid.svg";
|
||||
|
||||
const GRAPHICS = {
|
||||
GraphiteLogotypeSolid: { svg: GraphiteLogotypeSolid, size: undefined },
|
||||
} as const;
|
||||
|
||||
// 12px Solid
|
||||
import Add from "@graphite-frontend/assets/icon-12px-solid/add.svg";
|
||||
import Checkmark from "@graphite-frontend/assets/icon-12px-solid/checkmark.svg";
|
||||
import Clipped from "@graphite-frontend/assets/icon-12px-solid/clipped.svg";
|
||||
import CloseX from "@graphite-frontend/assets/icon-12px-solid/close-x.svg";
|
||||
import Delay from "@graphite-frontend/assets/icon-12px-solid/delay.svg";
|
||||
import Dot from "@graphite-frontend/assets/icon-12px-solid/dot.svg";
|
||||
import DropdownArrow from "@graphite-frontend/assets/icon-12px-solid/dropdown-arrow.svg";
|
||||
import Edit12px from "@graphite-frontend/assets/icon-12px-solid/edit-12px.svg";
|
||||
import Empty12px from "@graphite-frontend/assets/icon-12px-solid/empty-12px.svg";
|
||||
import Failure from "@graphite-frontend/assets/icon-12px-solid/failure.svg";
|
||||
import FullscreenEnter from "@graphite-frontend/assets/icon-12px-solid/fullscreen-enter.svg";
|
||||
import FullscreenExit from "@graphite-frontend/assets/icon-12px-solid/fullscreen-exit.svg";
|
||||
import GridDotted from "@graphite-frontend/assets/icon-12px-solid/grid-dotted.svg";
|
||||
import Grid from "@graphite-frontend/assets/icon-12px-solid/grid.svg";
|
||||
import Info from "@graphite-frontend/assets/icon-12px-solid/info.svg";
|
||||
import KeyboardArrowDown from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-down.svg";
|
||||
import KeyboardArrowLeft from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-left.svg";
|
||||
import KeyboardArrowRight from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-right.svg";
|
||||
import KeyboardArrowUp from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-up.svg";
|
||||
import KeyboardBackspace from "@graphite-frontend/assets/icon-12px-solid/keyboard-backspace.svg";
|
||||
import KeyboardCommand from "@graphite-frontend/assets/icon-12px-solid/keyboard-command.svg";
|
||||
import KeyboardControl from "@graphite-frontend/assets/icon-12px-solid/keyboard-control.svg";
|
||||
import KeyboardEnter from "@graphite-frontend/assets/icon-12px-solid/keyboard-enter.svg";
|
||||
import KeyboardOption from "@graphite-frontend/assets/icon-12px-solid/keyboard-option.svg";
|
||||
import KeyboardShift from "@graphite-frontend/assets/icon-12px-solid/keyboard-shift.svg";
|
||||
import KeyboardSpace from "@graphite-frontend/assets/icon-12px-solid/keyboard-space.svg";
|
||||
import KeyboardTab from "@graphite-frontend/assets/icon-12px-solid/keyboard-tab.svg";
|
||||
import License12px from "@graphite-frontend/assets/icon-12px-solid/license-12px.svg";
|
||||
import Link from "@graphite-frontend/assets/icon-12px-solid/link.svg";
|
||||
import Overlays from "@graphite-frontend/assets/icon-12px-solid/overlays.svg";
|
||||
import Remove from "@graphite-frontend/assets/icon-12px-solid/remove.svg";
|
||||
import RenderModeNormal from "@graphite-frontend/assets/icon-12px-solid/render-mode-normal.svg";
|
||||
import RenderModeOutline from "@graphite-frontend/assets/icon-12px-solid/render-mode-outline.svg";
|
||||
import RenderModePixels from "@graphite-frontend/assets/icon-12px-solid/render-mode-pixels.svg";
|
||||
import RenderModeSvg from "@graphite-frontend/assets/icon-12px-solid/render-mode-svg.svg";
|
||||
import Snapping from "@graphite-frontend/assets/icon-12px-solid/snapping.svg";
|
||||
import SwapHorizontal from "@graphite-frontend/assets/icon-12px-solid/swap-horizontal.svg";
|
||||
import SwapVertical from "@graphite-frontend/assets/icon-12px-solid/swap-vertical.svg";
|
||||
import VerticalEllipsis from "@graphite-frontend/assets/icon-12px-solid/vertical-ellipsis.svg";
|
||||
import Warning from "@graphite-frontend/assets/icon-12px-solid/warning.svg";
|
||||
import WindowButtonWinClose from "@graphite-frontend/assets/icon-12px-solid/window-button-win-close.svg";
|
||||
import WindowButtonWinMaximize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-maximize.svg";
|
||||
import WindowButtonWinMinimize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-minimize.svg";
|
||||
import WindowButtonWinRestoreDown from "@graphite-frontend/assets/icon-12px-solid/window-button-win-restore-down.svg";
|
||||
import WorkingColors from "@graphite-frontend/assets/icon-12px-solid/working-colors.svg";
|
||||
|
||||
const SOLID_12PX = {
|
||||
Add: { svg: Add, size: 12 },
|
||||
Checkmark: { svg: Checkmark, size: 12 },
|
||||
Clipped: { svg: Clipped, size: 12 },
|
||||
CloseX: { svg: CloseX, size: 12 },
|
||||
Delay: { svg: Delay, size: 12 },
|
||||
Dot: { svg: Dot, size: 12 },
|
||||
DropdownArrow: { svg: DropdownArrow, size: 12 },
|
||||
Edit12px: { svg: Edit12px, size: 12 },
|
||||
Empty12px: { svg: Empty12px, size: 12 },
|
||||
Failure: { svg: Failure, size: 12 },
|
||||
FullscreenEnter: { svg: FullscreenEnter, size: 12 },
|
||||
FullscreenExit: { svg: FullscreenExit, size: 12 },
|
||||
Grid: { svg: Grid, size: 12 },
|
||||
GridDotted: { svg: GridDotted, size: 12 },
|
||||
Info: { svg: Info, size: 12 },
|
||||
KeyboardArrowDown: { svg: KeyboardArrowDown, size: 12 },
|
||||
KeyboardArrowLeft: { svg: KeyboardArrowLeft, size: 12 },
|
||||
KeyboardArrowRight: { svg: KeyboardArrowRight, size: 12 },
|
||||
KeyboardArrowUp: { svg: KeyboardArrowUp, size: 12 },
|
||||
KeyboardBackspace: { svg: KeyboardBackspace, size: 12 },
|
||||
KeyboardCommand: { svg: KeyboardCommand, size: 12 },
|
||||
KeyboardControl: { svg: KeyboardControl, size: 12 },
|
||||
KeyboardEnter: { svg: KeyboardEnter, size: 12 },
|
||||
KeyboardOption: { svg: KeyboardOption, size: 12 },
|
||||
KeyboardShift: { svg: KeyboardShift, size: 12 },
|
||||
KeyboardSpace: { svg: KeyboardSpace, size: 12 },
|
||||
KeyboardTab: { svg: KeyboardTab, size: 12 },
|
||||
License12px: { svg: License12px, size: 12 },
|
||||
Link: { svg: Link, size: 12 },
|
||||
Overlays: { svg: Overlays, size: 12 },
|
||||
Remove: { svg: Remove, size: 12 },
|
||||
RenderModeNormal: { svg: RenderModeNormal, size: 12 },
|
||||
RenderModeOutline: { svg: RenderModeOutline, size: 12 },
|
||||
RenderModePixels: { svg: RenderModePixels, size: 12 },
|
||||
RenderModeSvg: { svg: RenderModeSvg, size: 12 },
|
||||
Snapping: { svg: Snapping, size: 12 },
|
||||
SwapHorizontal: { svg: SwapHorizontal, size: 12 },
|
||||
SwapVertical: { svg: SwapVertical, size: 12 },
|
||||
VerticalEllipsis: { svg: VerticalEllipsis, size: 12 },
|
||||
Warning: { svg: Warning, size: 12 },
|
||||
WindowButtonWinClose: { svg: WindowButtonWinClose, size: 12 },
|
||||
WindowButtonWinMaximize: { svg: WindowButtonWinMaximize, size: 12 },
|
||||
WindowButtonWinMinimize: { svg: WindowButtonWinMinimize, size: 12 },
|
||||
WindowButtonWinRestoreDown: { svg: WindowButtonWinRestoreDown, size: 12 },
|
||||
WorkingColors: { svg: WorkingColors, size: 12 },
|
||||
} as const;
|
||||
|
||||
// 16px Solid
|
||||
import AlignBottom from "@graphite-frontend/assets/icon-16px-solid/align-bottom.svg";
|
||||
import AlignHorizontalCenter from "@graphite-frontend/assets/icon-16px-solid/align-horizontal-center.svg";
|
||||
import AlignLeft from "@graphite-frontend/assets/icon-16px-solid/align-left.svg";
|
||||
import AlignRight from "@graphite-frontend/assets/icon-16px-solid/align-right.svg";
|
||||
import AlignTop from "@graphite-frontend/assets/icon-16px-solid/align-top.svg";
|
||||
import AlignVerticalCenter from "@graphite-frontend/assets/icon-16px-solid/align-vertical-center.svg";
|
||||
import Artboard from "@graphite-frontend/assets/icon-16px-solid/artboard.svg";
|
||||
import BooleanDifference from "@graphite-frontend/assets/icon-16px-solid/boolean-difference.svg";
|
||||
import BooleanDivide from "@graphite-frontend/assets/icon-16px-solid/boolean-divide.svg";
|
||||
import BooleanIntersect from "@graphite-frontend/assets/icon-16px-solid/boolean-intersect.svg";
|
||||
import BooleanSubtractBack from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-back.svg";
|
||||
import BooleanSubtractFront from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-front.svg";
|
||||
import BooleanUnion from "@graphite-frontend/assets/icon-16px-solid/boolean-union.svg";
|
||||
import Bug from "@graphite-frontend/assets/icon-16px-solid/bug.svg";
|
||||
import CheckboxChecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-checked.svg";
|
||||
import CheckboxUnchecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-unchecked.svg";
|
||||
import CloseAll from "@graphite-frontend/assets/icon-16px-solid/close-all.svg";
|
||||
import Close from "@graphite-frontend/assets/icon-16px-solid/close.svg";
|
||||
import Code from "@graphite-frontend/assets/icon-16px-solid/code.svg";
|
||||
import Copy from "@graphite-frontend/assets/icon-16px-solid/copy.svg";
|
||||
import Credits from "@graphite-frontend/assets/icon-16px-solid/credits.svg";
|
||||
import CustomColor from "@graphite-frontend/assets/icon-16px-solid/custom-color.svg";
|
||||
import Cut from "@graphite-frontend/assets/icon-16px-solid/cut.svg";
|
||||
import DeselectAll from "@graphite-frontend/assets/icon-16px-solid/deselect-all.svg";
|
||||
import Edit from "@graphite-frontend/assets/icon-16px-solid/edit.svg";
|
||||
import Empty from "@graphite-frontend/assets/icon-16px-solid/empty.svg";
|
||||
import EyeHidden from "@graphite-frontend/assets/icon-16px-solid/eye-hidden.svg";
|
||||
import EyeHide from "@graphite-frontend/assets/icon-16px-solid/eye-hide.svg";
|
||||
import EyeShow from "@graphite-frontend/assets/icon-16px-solid/eye-show.svg";
|
||||
import EyeVisible from "@graphite-frontend/assets/icon-16px-solid/eye-visible.svg";
|
||||
import Eyedropper from "@graphite-frontend/assets/icon-16px-solid/eyedropper.svg";
|
||||
import FileExport from "@graphite-frontend/assets/icon-16px-solid/file-export.svg";
|
||||
import FileImport from "@graphite-frontend/assets/icon-16px-solid/file-import.svg";
|
||||
import File from "@graphite-frontend/assets/icon-16px-solid/file.svg";
|
||||
import FlipHorizontal from "@graphite-frontend/assets/icon-16px-solid/flip-horizontal.svg";
|
||||
import FlipVertical from "@graphite-frontend/assets/icon-16px-solid/flip-vertical.svg";
|
||||
import FolderOpen from "@graphite-frontend/assets/icon-16px-solid/folder-open.svg";
|
||||
import Folder from "@graphite-frontend/assets/icon-16px-solid/folder.svg";
|
||||
import FrameAll from "@graphite-frontend/assets/icon-16px-solid/frame-all.svg";
|
||||
import FrameSelected from "@graphite-frontend/assets/icon-16px-solid/frame-selected.svg";
|
||||
import GraphViewClosed from "@graphite-frontend/assets/icon-16px-solid/graph-view-closed.svg";
|
||||
import GraphViewOpen from "@graphite-frontend/assets/icon-16px-solid/graph-view-open.svg";
|
||||
import GraphiteLogo from "@graphite-frontend/assets/icon-16px-solid/graphite-logo.svg";
|
||||
import HandleVisibilityAll from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-all.svg";
|
||||
import HandleVisibilityFrontier from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-frontier.svg";
|
||||
import HandleVisibilitySelected from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-selected.svg";
|
||||
import Heart from "@graphite-frontend/assets/icon-16px-solid/heart.svg";
|
||||
import HistoryRedo from "@graphite-frontend/assets/icon-16px-solid/history-redo.svg";
|
||||
import HistoryUndo from "@graphite-frontend/assets/icon-16px-solid/history-undo.svg";
|
||||
import IconsGrid from "@graphite-frontend/assets/icon-16px-solid/icons-grid.svg";
|
||||
import Image from "@graphite-frontend/assets/icon-16px-solid/image.svg";
|
||||
import Layer from "@graphite-frontend/assets/icon-16px-solid/layer.svg";
|
||||
import License from "@graphite-frontend/assets/icon-16px-solid/license.svg";
|
||||
import NewLayer from "@graphite-frontend/assets/icon-16px-solid/new-layer.svg";
|
||||
import NodeBlur from "@graphite-frontend/assets/icon-16px-solid/node-blur.svg";
|
||||
import NodeBrushwork from "@graphite-frontend/assets/icon-16px-solid/node-brushwork.svg";
|
||||
import NodeColorCorrection from "@graphite-frontend/assets/icon-16px-solid/node-color-correction.svg";
|
||||
import NodeGradient from "@graphite-frontend/assets/icon-16px-solid/node-gradient.svg";
|
||||
import NodeImaginate from "@graphite-frontend/assets/icon-16px-solid/node-imaginate.svg";
|
||||
import NodeMagicWand from "@graphite-frontend/assets/icon-16px-solid/node-magic-wand.svg";
|
||||
import NodeMask from "@graphite-frontend/assets/icon-16px-solid/node-mask.svg";
|
||||
import NodeMotionBlur from "@graphite-frontend/assets/icon-16px-solid/node-motion-blur.svg";
|
||||
import NodeNodes from "@graphite-frontend/assets/icon-16px-solid/node-nodes.svg";
|
||||
import NodeOutput from "@graphite-frontend/assets/icon-16px-solid/node-output.svg";
|
||||
import NodeShape from "@graphite-frontend/assets/icon-16px-solid/node-shape.svg";
|
||||
import NodeText from "@graphite-frontend/assets/icon-16px-solid/node-text.svg";
|
||||
import NodeTransform from "@graphite-frontend/assets/icon-16px-solid/node-transform.svg";
|
||||
import Node from "@graphite-frontend/assets/icon-16px-solid/node.svg";
|
||||
import PadlockLocked from "@graphite-frontend/assets/icon-16px-solid/padlock-locked.svg";
|
||||
import PadlockUnlocked from "@graphite-frontend/assets/icon-16px-solid/padlock-unlocked.svg";
|
||||
import Paste from "@graphite-frontend/assets/icon-16px-solid/paste.svg";
|
||||
import PinActive from "@graphite-frontend/assets/icon-16px-solid/pin-active.svg";
|
||||
import PinInactive from "@graphite-frontend/assets/icon-16px-solid/pin-inactive.svg";
|
||||
import PlaybackPause from "@graphite-frontend/assets/icon-16px-solid/playback-pause.svg";
|
||||
import PlaybackPlay from "@graphite-frontend/assets/icon-16px-solid/playback-play.svg";
|
||||
import PlaybackToEnd from "@graphite-frontend/assets/icon-16px-solid/playback-to-end.svg";
|
||||
import PlaybackToStart from "@graphite-frontend/assets/icon-16px-solid/playback-to-start.svg";
|
||||
import Random from "@graphite-frontend/assets/icon-16px-solid/random.svg";
|
||||
import Reload from "@graphite-frontend/assets/icon-16px-solid/reload.svg";
|
||||
import Reset from "@graphite-frontend/assets/icon-16px-solid/reset.svg";
|
||||
import Resync from "@graphite-frontend/assets/icon-16px-solid/resync.svg";
|
||||
import ReverseRadialGradientToLeft from "@graphite-frontend/assets/icon-16px-solid/reverse-radial-gradient-to-left.svg";
|
||||
import ReverseRadialGradientToRight from "@graphite-frontend/assets/icon-16px-solid/reverse-radial-gradient-to-right.svg";
|
||||
import Reverse from "@graphite-frontend/assets/icon-16px-solid/reverse.svg";
|
||||
import Save from "@graphite-frontend/assets/icon-16px-solid/save.svg";
|
||||
import SelectAll from "@graphite-frontend/assets/icon-16px-solid/select-all.svg";
|
||||
import SelectParent from "@graphite-frontend/assets/icon-16px-solid/select-parent.svg";
|
||||
import Settings from "@graphite-frontend/assets/icon-16px-solid/settings.svg";
|
||||
import SmallDot from "@graphite-frontend/assets/icon-16px-solid/small-dot.svg";
|
||||
import StackBottom from "@graphite-frontend/assets/icon-16px-solid/stack-bottom.svg";
|
||||
import StackHollow from "@graphite-frontend/assets/icon-16px-solid/stack-hollow.svg";
|
||||
import StackLower from "@graphite-frontend/assets/icon-16px-solid/stack-lower.svg";
|
||||
import StackRaise from "@graphite-frontend/assets/icon-16px-solid/stack-raise.svg";
|
||||
import StackReverse from "@graphite-frontend/assets/icon-16px-solid/stack-reverse.svg";
|
||||
import Stack from "@graphite-frontend/assets/icon-16px-solid/stack.svg";
|
||||
import TiltReset from "@graphite-frontend/assets/icon-16px-solid/tilt-reset.svg";
|
||||
import Tilt from "@graphite-frontend/assets/icon-16px-solid/tilt.svg";
|
||||
import TransformationGrab from "@graphite-frontend/assets/icon-16px-solid/transformation-grab.svg";
|
||||
import TransformationRotate from "@graphite-frontend/assets/icon-16px-solid/transformation-rotate.svg";
|
||||
import TransformationScale from "@graphite-frontend/assets/icon-16px-solid/transformation-scale.svg";
|
||||
import Trash from "@graphite-frontend/assets/icon-16px-solid/trash.svg";
|
||||
import TurnNegative90 from "@graphite-frontend/assets/icon-16px-solid/turn-negative-90.svg";
|
||||
import TurnPositive90 from "@graphite-frontend/assets/icon-16px-solid/turn-positive-90.svg";
|
||||
import UserManual from "@graphite-frontend/assets/icon-16px-solid/user-manual.svg";
|
||||
import ViewportDesignMode from "@graphite-frontend/assets/icon-16px-solid/viewport-design-mode.svg";
|
||||
import ViewportGuideMode from "@graphite-frontend/assets/icon-16px-solid/viewport-guide-mode.svg";
|
||||
import ViewportSelectMode from "@graphite-frontend/assets/icon-16px-solid/viewport-select-mode.svg";
|
||||
import Volunteer from "@graphite-frontend/assets/icon-16px-solid/volunteer.svg";
|
||||
import Website from "@graphite-frontend/assets/icon-16px-solid/website.svg";
|
||||
import WorkingColorsPrimary from "@graphite-frontend/assets/icon-16px-solid/working-colors-primary.svg";
|
||||
import WorkingColorsSecondary from "@graphite-frontend/assets/icon-16px-solid/working-colors-secondary.svg";
|
||||
import Zoom1x from "@graphite-frontend/assets/icon-16px-solid/zoom-1x.svg";
|
||||
import Zoom2x from "@graphite-frontend/assets/icon-16px-solid/zoom-2x.svg";
|
||||
import ZoomIn from "@graphite-frontend/assets/icon-16px-solid/zoom-in.svg";
|
||||
import ZoomOut from "@graphite-frontend/assets/icon-16px-solid/zoom-out.svg";
|
||||
import ZoomReset from "@graphite-frontend/assets/icon-16px-solid/zoom-reset.svg";
|
||||
|
||||
const SOLID_16PX = {
|
||||
AlignBottom: { svg: AlignBottom, size: 16 },
|
||||
AlignHorizontalCenter: { svg: AlignHorizontalCenter, size: 16 },
|
||||
AlignLeft: { svg: AlignLeft, size: 16 },
|
||||
AlignRight: { svg: AlignRight, size: 16 },
|
||||
AlignTop: { svg: AlignTop, size: 16 },
|
||||
AlignVerticalCenter: { svg: AlignVerticalCenter, size: 16 },
|
||||
Artboard: { svg: Artboard, size: 16 },
|
||||
BooleanDifference: { svg: BooleanDifference, size: 16 },
|
||||
BooleanDivide: { svg: BooleanDivide, size: 16 },
|
||||
BooleanIntersect: { svg: BooleanIntersect, size: 16 },
|
||||
BooleanSubtractBack: { svg: BooleanSubtractBack, size: 16 },
|
||||
BooleanSubtractFront: { svg: BooleanSubtractFront, size: 16 },
|
||||
BooleanUnion: { svg: BooleanUnion, size: 16 },
|
||||
Bug: { svg: Bug, size: 16 },
|
||||
CheckboxChecked: { svg: CheckboxChecked, size: 16 },
|
||||
CheckboxUnchecked: { svg: CheckboxUnchecked, size: 16 },
|
||||
Close: { svg: Close, size: 16 },
|
||||
CloseAll: { svg: CloseAll, size: 16 },
|
||||
Code: { svg: Code, size: 16 },
|
||||
Copy: { svg: Copy, size: 16 },
|
||||
Credits: { svg: Credits, size: 16 },
|
||||
CustomColor: { svg: CustomColor, size: 16 },
|
||||
Cut: { svg: Cut, size: 16 },
|
||||
DeselectAll: { svg: DeselectAll, size: 16 },
|
||||
Edit: { svg: Edit, size: 16 },
|
||||
Empty: { svg: Empty, size: 16 },
|
||||
Eyedropper: { svg: Eyedropper, size: 16 },
|
||||
EyeHidden: { svg: EyeHidden, size: 16 },
|
||||
EyeHide: { svg: EyeHide, size: 16 },
|
||||
EyeShow: { svg: EyeShow, size: 16 },
|
||||
EyeVisible: { svg: EyeVisible, size: 16 },
|
||||
File: { svg: File, size: 16 },
|
||||
FileExport: { svg: FileExport, size: 16 },
|
||||
FileImport: { svg: FileImport, size: 16 },
|
||||
FlipHorizontal: { svg: FlipHorizontal, size: 16 },
|
||||
FlipVertical: { svg: FlipVertical, size: 16 },
|
||||
Folder: { svg: Folder, size: 16 },
|
||||
FolderOpen: { svg: FolderOpen, size: 16 },
|
||||
FrameAll: { svg: FrameAll, size: 16 },
|
||||
FrameSelected: { svg: FrameSelected, size: 16 },
|
||||
GraphiteLogo: { svg: GraphiteLogo, size: 16 },
|
||||
GraphViewClosed: { svg: GraphViewClosed, size: 16 },
|
||||
GraphViewOpen: { svg: GraphViewOpen, size: 16 },
|
||||
HandleVisibilityAll: { svg: HandleVisibilityAll, size: 16 },
|
||||
HandleVisibilityFrontier: { svg: HandleVisibilityFrontier, size: 16 },
|
||||
HandleVisibilitySelected: { svg: HandleVisibilitySelected, size: 16 },
|
||||
Heart: { svg: Heart, size: 16 },
|
||||
HistoryRedo: { svg: HistoryRedo, size: 16 },
|
||||
HistoryUndo: { svg: HistoryUndo, size: 16 },
|
||||
IconsGrid: { svg: IconsGrid, size: 16 },
|
||||
Image: { svg: Image, size: 16 },
|
||||
Layer: { svg: Layer, size: 16 },
|
||||
License: { svg: License, size: 16 },
|
||||
NewLayer: { svg: NewLayer, size: 16 },
|
||||
Node: { svg: Node, size: 16 },
|
||||
NodeBlur: { svg: NodeBlur, size: 16 },
|
||||
NodeBrushwork: { svg: NodeBrushwork, size: 16 },
|
||||
NodeColorCorrection: { svg: NodeColorCorrection, size: 16 },
|
||||
NodeGradient: { svg: NodeGradient, size: 16 },
|
||||
NodeImaginate: { svg: NodeImaginate, size: 16 },
|
||||
NodeMagicWand: { svg: NodeMagicWand, size: 16 },
|
||||
NodeMask: { svg: NodeMask, size: 16 },
|
||||
NodeMotionBlur: { svg: NodeMotionBlur, size: 16 },
|
||||
NodeNodes: { svg: NodeNodes, size: 16 },
|
||||
NodeOutput: { svg: NodeOutput, size: 16 },
|
||||
NodeShape: { svg: NodeShape, size: 16 },
|
||||
NodeText: { svg: NodeText, size: 16 },
|
||||
NodeTransform: { svg: NodeTransform, size: 16 },
|
||||
PadlockLocked: { svg: PadlockLocked, size: 16 },
|
||||
PadlockUnlocked: { svg: PadlockUnlocked, size: 16 },
|
||||
Paste: { svg: Paste, size: 16 },
|
||||
PinActive: { svg: PinActive, size: 16 },
|
||||
PinInactive: { svg: PinInactive, size: 16 },
|
||||
PlaybackPause: { svg: PlaybackPause, size: 16 },
|
||||
PlaybackPlay: { svg: PlaybackPlay, size: 16 },
|
||||
PlaybackToEnd: { svg: PlaybackToEnd, size: 16 },
|
||||
PlaybackToStart: { svg: PlaybackToStart, size: 16 },
|
||||
Random: { svg: Random, size: 16 },
|
||||
Reload: { svg: Reload, size: 16 },
|
||||
Reset: { svg: Reset, size: 16 },
|
||||
Resync: { svg: Resync, size: 16 },
|
||||
Reverse: { svg: Reverse, size: 16 },
|
||||
ReverseRadialGradientToLeft: { svg: ReverseRadialGradientToLeft, size: 16 },
|
||||
ReverseRadialGradientToRight: { svg: ReverseRadialGradientToRight, size: 16 },
|
||||
Save: { svg: Save, size: 16 },
|
||||
SelectAll: { svg: SelectAll, size: 16 },
|
||||
SelectParent: { svg: SelectParent, size: 16 },
|
||||
Settings: { svg: Settings, size: 16 },
|
||||
SmallDot: { svg: SmallDot, size: 16 },
|
||||
Stack: { svg: Stack, size: 16 },
|
||||
StackBottom: { svg: StackBottom, size: 16 },
|
||||
StackHollow: { svg: StackHollow, size: 16 },
|
||||
StackLower: { svg: StackLower, size: 16 },
|
||||
StackRaise: { svg: StackRaise, size: 16 },
|
||||
StackReverse: { svg: StackReverse, size: 16 },
|
||||
Tilt: { svg: Tilt, size: 16 },
|
||||
TiltReset: { svg: TiltReset, size: 16 },
|
||||
TransformationGrab: { svg: TransformationGrab, size: 16 },
|
||||
TransformationRotate: { svg: TransformationRotate, size: 16 },
|
||||
TransformationScale: { svg: TransformationScale, size: 16 },
|
||||
Trash: { svg: Trash, size: 16 },
|
||||
TurnNegative90: { svg: TurnNegative90, size: 16 },
|
||||
TurnPositive90: { svg: TurnPositive90, size: 16 },
|
||||
UserManual: { svg: UserManual, size: 16 },
|
||||
ViewportDesignMode: { svg: ViewportDesignMode, size: 16 },
|
||||
ViewportGuideMode: { svg: ViewportGuideMode, size: 16 },
|
||||
ViewportSelectMode: { svg: ViewportSelectMode, size: 16 },
|
||||
Volunteer: { svg: Volunteer, size: 16 },
|
||||
Website: { svg: Website, size: 16 },
|
||||
WorkingColorsPrimary: { svg: WorkingColorsPrimary, size: 16 },
|
||||
WorkingColorsSecondary: { svg: WorkingColorsSecondary, size: 16 },
|
||||
Zoom1x: { svg: Zoom1x, size: 16 },
|
||||
Zoom2x: { svg: Zoom2x, size: 16 },
|
||||
ZoomIn: { svg: ZoomIn, size: 16 },
|
||||
ZoomOut: { svg: ZoomOut, size: 16 },
|
||||
ZoomReset: { svg: ZoomReset, size: 16 },
|
||||
} as const;
|
||||
|
||||
// 16px Two-Tone
|
||||
import MouseHintDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-drag.svg";
|
||||
import MouseHintLmbDouble from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
|
||||
import MouseHintLmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
|
||||
import MouseHintLmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb.svg";
|
||||
import MouseHintMmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
|
||||
import MouseHintMmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-mmb.svg";
|
||||
import MouseHintNone from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-none.svg";
|
||||
import MouseHintRmbDouble from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb-double.svg";
|
||||
import MouseHintRmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
|
||||
import MouseHintRmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb.svg";
|
||||
import MouseHintScrollDown from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
|
||||
import MouseHintScrollUp from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-scroll-up.svg";
|
||||
|
||||
const TWO_TONE_16PX = {
|
||||
MouseHintDrag: { svg: MouseHintDrag, size: 16 },
|
||||
MouseHintLmb: { svg: MouseHintLmb, size: 16 },
|
||||
MouseHintLmbDouble: { svg: MouseHintLmbDouble, size: 16 },
|
||||
MouseHintLmbDrag: { svg: MouseHintLmbDrag, size: 16 },
|
||||
MouseHintMmb: { svg: MouseHintMmb, size: 16 },
|
||||
MouseHintMmbDrag: { svg: MouseHintMmbDrag, size: 16 },
|
||||
MouseHintNone: { svg: MouseHintNone, size: 16 },
|
||||
MouseHintRmb: { svg: MouseHintRmb, size: 16 },
|
||||
MouseHintRmbDouble: { svg: MouseHintRmbDouble, size: 16 },
|
||||
MouseHintRmbDrag: { svg: MouseHintRmbDrag, size: 16 },
|
||||
MouseHintScrollDown: { svg: MouseHintScrollDown, size: 16 },
|
||||
MouseHintScrollUp: { svg: MouseHintScrollUp, size: 16 },
|
||||
} as const;
|
||||
|
||||
// 24px Two-Tone
|
||||
import GeneralArtboardTool from "@graphite-frontend/assets/icon-24px-two-tone/general-artboard-tool.svg";
|
||||
import GeneralEyedropperTool from "@graphite-frontend/assets/icon-24px-two-tone/general-eyedropper-tool.svg";
|
||||
import GeneralFillTool from "@graphite-frontend/assets/icon-24px-two-tone/general-fill-tool.svg";
|
||||
import GeneralGradientTool from "@graphite-frontend/assets/icon-24px-two-tone/general-gradient-tool.svg";
|
||||
import GeneralNavigateTool from "@graphite-frontend/assets/icon-24px-two-tone/general-navigate-tool.svg";
|
||||
import GeneralSelectTool from "@graphite-frontend/assets/icon-24px-two-tone/general-select-tool.svg";
|
||||
import RasterBrushTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-brush-tool.svg";
|
||||
import RasterCloneTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-clone-tool.svg";
|
||||
import RasterDetailTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-detail-tool.svg";
|
||||
import RasterHealTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-heal-tool.svg";
|
||||
import RasterImaginateTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-imaginate-tool.svg";
|
||||
import RasterPatchTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-patch-tool.svg";
|
||||
import RasterRelightTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-relight-tool.svg";
|
||||
import VectorEllipseTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-ellipse-tool.svg";
|
||||
import VectorFreehandTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-freehand-tool.svg";
|
||||
import VectorLineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-line-tool.svg";
|
||||
import VectorPathTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-path-tool.svg";
|
||||
import VectorPenTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-pen-tool.svg";
|
||||
import VectorPolygonTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-polygon-tool.svg";
|
||||
import VectorRectangleTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg";
|
||||
import VectorSplineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-spline-tool.svg";
|
||||
import VectorTextTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-text-tool.svg";
|
||||
|
||||
const TWO_TONE_24PX = {
|
||||
GeneralArtboardTool: { svg: GeneralArtboardTool, size: 24 },
|
||||
GeneralEyedropperTool: { svg: GeneralEyedropperTool, size: 24 },
|
||||
GeneralFillTool: { svg: GeneralFillTool, size: 24 },
|
||||
GeneralGradientTool: { svg: GeneralGradientTool, size: 24 },
|
||||
GeneralNavigateTool: { svg: GeneralNavigateTool, size: 24 },
|
||||
GeneralSelectTool: { svg: GeneralSelectTool, size: 24 },
|
||||
RasterBrushTool: { svg: RasterBrushTool, size: 24 },
|
||||
RasterCloneTool: { svg: RasterCloneTool, size: 24 },
|
||||
RasterDetailTool: { svg: RasterDetailTool, size: 24 },
|
||||
RasterHealTool: { svg: RasterHealTool, size: 24 },
|
||||
RasterImaginateTool: { svg: RasterImaginateTool, size: 24 },
|
||||
RasterPatchTool: { svg: RasterPatchTool, size: 24 },
|
||||
RasterRelightTool: { svg: RasterRelightTool, size: 24 },
|
||||
VectorEllipseTool: { svg: VectorEllipseTool, size: 24 },
|
||||
VectorFreehandTool: { svg: VectorFreehandTool, size: 24 },
|
||||
VectorLineTool: { svg: VectorLineTool, size: 24 },
|
||||
VectorPathTool: { svg: VectorPathTool, size: 24 },
|
||||
VectorPenTool: { svg: VectorPenTool, size: 24 },
|
||||
VectorRectangleTool: { svg: VectorRectangleTool, size: 24 },
|
||||
VectorPolygonTool: { svg: VectorPolygonTool, size: 24 },
|
||||
VectorSplineTool: { svg: VectorSplineTool, size: 24 },
|
||||
VectorTextTool: { svg: VectorTextTool, size: 24 },
|
||||
} as const;
|
||||
|
||||
// All icons
|
||||
const ICON_LIST = {
|
||||
...GRAPHICS,
|
||||
...SOLID_12PX,
|
||||
...SOLID_16PX,
|
||||
...TWO_TONE_16PX,
|
||||
...TWO_TONE_24PX,
|
||||
} as const;
|
||||
|
||||
// Exported icons and types
|
||||
export const ICONS: IconDefinitionType<typeof ICON_LIST> = ICON_LIST;
|
||||
export const ICON_SVG_STRINGS = Object.fromEntries(Object.entries(ICONS).map(([name, data]) => [name, data.svg]));
|
||||
|
||||
export type IconName = keyof typeof ICONS;
|
||||
export type IconSize = undefined | 12 | 16 | 24 | 32;
|
||||
export type PopoverButtonStyle = "DropdownArrow" | "VerticalEllipsis";
|
||||
|
||||
// The following helper type declarations allow us to avoid manually maintaining the `IconName` type declaration as a string union paralleling the keys of the
|
||||
// icon definitions. It lets TypeScript do that for us. Our goal is to define the big key-value pair of icons by constraining its values, but inferring its keys.
|
||||
// Constraining its values means that TypeScript can make sure each icon definition has a valid size number from the union of numbers that is `IconSize`.
|
||||
// Inferring its keys means we don't have to specify a supertype like `string` or `any` for the key-value pair's keys, which would prevent us from accessing
|
||||
// the individual keys with `keyof typeof`. Absent a specified type for the keys, TypeScript falls back to inferring that the key-value pair's type is the
|
||||
// map of all its individual entries. Having the full list of entries lets us automatically set the `IconName` type to the union of strings that is the full
|
||||
// list of keys. The result is that we don't have to maintain a separate list of icon names since this scheme infers it from the keys of the icon definitions.
|
||||
// Based on https://stackoverflow.com/a/64119715/775283
|
||||
type IconDefinition = { svg: string; size: IconSize };
|
||||
type EvaluateType<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
|
||||
type IconDefinitionType<T extends Record<string, IconDefinition>> = EvaluateType<{ [key in keyof T]: IconDefinition }>;
|
||||
@@ -1,11 +1,11 @@
|
||||
// Demo artwork
|
||||
import ThumbnailChangingSeasons from "@graphite-frontend/assets/images/demo-artwork/thumbnail-changing-seasons.png";
|
||||
import ThumbnailIsometricFountain from "@graphite-frontend/assets/images/demo-artwork/thumbnail-isometric-fountain.png";
|
||||
import ThumbnailPaintedDreams from "@graphite-frontend/assets/images/demo-artwork/thumbnail-painted-dreams.png";
|
||||
import ThumbnailParametricDunescape from "@graphite-frontend/assets/images/demo-artwork/thumbnail-parametric-dunescape.png";
|
||||
import ThumbnailProceduralStringLights from "@graphite-frontend/assets/images/demo-artwork/thumbnail-procedural-string-lights.png";
|
||||
import ThumbnailRedDress from "@graphite-frontend/assets/images/demo-artwork/thumbnail-red-dress.png";
|
||||
import ThumbnailValleyOfSpires from "@graphite-frontend/assets/images/demo-artwork/thumbnail-valley-of-spires.png";
|
||||
import ThumbnailChangingSeasons from "@graphite/../assets/thumbnail-changing-seasons.png";
|
||||
import ThumbnailIsometricFountain from "@graphite/../assets/thumbnail-isometric-fountain.png";
|
||||
import ThumbnailPaintedDreams from "@graphite/../assets/thumbnail-painted-dreams.png";
|
||||
import ThumbnailParametricDunescape from "@graphite/../assets/thumbnail-parametric-dunescape.png";
|
||||
import ThumbnailProceduralStringLights from "@graphite/../assets/thumbnail-procedural-string-lights.png";
|
||||
import ThumbnailRedDress from "@graphite/../assets/thumbnail-red-dress.png";
|
||||
import ThumbnailValleyOfSpires from "@graphite/../assets/thumbnail-valley-of-spires.png";
|
||||
|
||||
const DEMO_ARTWORK = {
|
||||
ThumbnailChangingSeasons,
|
||||
|
||||
Vendored
+3
-2
@@ -1,6 +1,7 @@
|
||||
// Allow `import` statements to work with SVG files in the eyes of the TypeScript compiler.
|
||||
// This prevents red underlines from showing and lets it know the types of imported variables are strings.
|
||||
// Allow `import` statements to work with image files in the eyes of the TypeScript compiler.
|
||||
// This prevents red underlines from showing and lets it know the types of imported variables for image data.
|
||||
// The actual import is performed by Vite when building, as configured in the `resolve` aliases in `vite.config.ts`.
|
||||
|
||||
declare module "*.svg" {
|
||||
const content: string;
|
||||
export default content;
|
||||
|
||||
Reference in New Issue
Block a user