mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix all remaining Vue/TS errors flagged in Volar

Browse source
This commit is contained in:
Keavon Chambers 2022-01-15 17:24:58 -08:00
parent 2cc39cdb37
commit 9b36e6a909
14 changed files with 49 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,7 @@
</div>
<div class="spacer"></div>
<div class="right side">
<OptionalInput v-model:checked="snappingEnabled" @update:checked="(newStatus) => setSnap(newStatus)" :icon="'Snapping'" title="Snapping" />
<OptionalInput v-model:checked="snappingEnabled" @update:checked="(newStatus: boolean) => setSnap(newStatus)" :icon="'Snapping'" title="Snapping" />
<PopoverButton>
<h3>Snapping</h3>
<p>The contents of this popover menu are coming soon</p>
@ -42,7 +42,7 @@
<Separator :type="'Section'" />
<NumberInput @update:value="(newRotation) => setRotation(newRotation)" v-model:value="documentRotation" :incrementFactor="15" :unit="'°'" />
<NumberInput @update:value="(newRotation: number) => setRotation(newRotation)" v-model:value="documentRotation" :incrementFactor="15" :unit="'°'" />
<Separator :type="'Section'" />
@ -54,7 +54,7 @@
<NumberInput
v-model:value="documentZoom"
@update:value="(newZoom) => setCanvasZoom(newZoom)"
@update:value="(newZoom: number) => setCanvasZoom(newZoom)"
:min="0.000001"
:max="1000000"
:incrementBehavior="'Callback'"
@ -133,9 +133,9 @@
<PersistentScrollbar
:direction="'Vertical'"
:handlePosition="scrollbarPos.y"
@update:handlePosition="(newValue) => translateCanvasY(newValue)"
@update:handlePosition="(newValue: number) => translateCanvasY(newValue)"
v-model:handleLength="scrollbarSize.y"
@pressTrack="(delta) => pageY(delta)"
@pressTrack="(delta: number) => pageY(delta)"
:class="'right-scrollbar'"
/>
</LayoutCol>
@ -144,9 +144,9 @@
<PersistentScrollbar
:direction="'Horizontal'"
:handlePosition="scrollbarPos.x"
@update:handlePosition="(newValue) => translateCanvasX(newValue)"
@update:handlePosition="(newValue: number) => translateCanvasX(newValue)"
v-model:handleLength="scrollbarSize.x"
@pressTrack="(delta) => pageX(delta)"
@pressTrack="(delta: number) => pageX(delta)"
:class="'bottom-scrollbar'"
/>
</LayoutRow>

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

@ -3,7 +3,7 @@
<LayoutRow :class="'options-bar'">
<DropdownInput
v-model:selectedIndex="blendModeSelectedIndex"
@update:selectedIndex="(newSelectedIndex) => setLayerBlendMode(newSelectedIndex)"
@update:selectedIndex="(newSelectedIndex: number) => setLayerBlendMode(newSelectedIndex)"
:menuEntries="blendModeEntries"
:disabled="blendModeDropdownDisabled"
/>
@ -12,7 +12,7 @@
<NumberInput
v-model:value="opacity"
@update:value="(newOpacity) => setLayerOpacity(newOpacity)"
@update:value="(newOpacity: number) => setLayerOpacity(newOpacity)"
:min="0"
:max="100"
:unit="'%'"
@ -29,7 +29,7 @@
</PopoverButton>
</LayoutRow>
<LayoutRow :class="'layer-tree scrollable-y'">
<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateInsertLine($event)" @dragend="drop($event)">
<LayoutCol :class="'list'" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="updateInsertLine($event)" @dragend="drop()">
<div class="layer-row" v-for="({ entry: layer }, index) in layers" :key="String(layer.path.slice(-1))">
<div class="visibility">
<IconButton
@ -51,7 +51,7 @@
:data-index="index"
draggable="true"
@dragstart="dragStart($event, layer)"
:title="layer.path"
:title="String(layer.path)"
>
<div class="layer-type-icon">
<IconLabel v-if="layer.layer_type === 'Folder'" :icon="'NodeTypeFolder'" title="Folder" />

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

@ -1,5 +1,5 @@
<template>
<button class="icon-button" :class="`size-${size}`" @click="(e) => action(e)">
<button class="icon-button" :class="`size-${size}`" @click="(e: MouseEvent) => action(e)">
<IconLabel :icon="icon" />
</button>
</template>

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

@ -49,11 +49,11 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { PopoverButtonIcon } from "@/utilities/widgets";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
export type PopoverButtonIcon = "DropdownArrow" | "VerticalEllipsis";
export default defineComponent({
components: {
FloatingMenu,

2
frontend/src/components/widgets/buttons/TextButton.vue
View file

@ -1,5 +1,5 @@
<template>
<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e) => action(e)">
<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e: MouseEvent) => action(e)">
<TextLabel>{{ label }}</TextLabel>
</button>
</template>

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

@ -1,12 +1,12 @@
<template>
<div class="color-picker">
<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e) => onPointerDown(e)">
<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="saturationCursor" class="selection-circle"></div>
</div>
<div class="hue-picker" ref="huePicker" @pointerdown="(e) => onPointerDown(e)">
<div class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="hueCursor" class="selection-pincers"></div>
</div>
<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e) => onPointerDown(e)">
<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="opacityCursor" class="selection-pincers"></div>
</div>
</div>

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

@ -29,7 +29,7 @@
:direction="'TopRight'"
:menuEntries="entry.children"
v-bind="{ defaultAction, minWidth, drawIcon, scrollable }"
:ref="(ref) => setEntryRefs(entry, ref)"
:ref="(ref: any) => setEntryRefs(entry, ref)"
/>
</div>
</template>

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

@ -98,7 +98,7 @@ export default defineComponent({
},
},
props: {
checked: { type: Boolean as PropType<boolean>, required: true },
checked: { type: Boolean as PropType<boolean>, default: false },
icon: { type: String as PropType<IconName>, default: "Checkmark" },
outlineStyle: { type: Boolean as PropType<boolean>, default: false },
},

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

@ -7,7 +7,7 @@
</div>
<MenuList
v-model:activeEntry="activeEntry"
@update:activeEntry="(newActiveEntry: typeof MenuListEntry) => activeEntryChanged(newActiveEntry)"
@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
:menuEntries="menuEntries"
:direction="'Bottom'"
@ -93,6 +93,11 @@ import { defineComponent, PropType } from "vue";
import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
declare global {
const MENU_LIST_ENTRY: MenuListEntry;
}
export default defineComponent({
props: {
menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },

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

@ -10,7 +10,7 @@
<IconLabel :icon="entry.icon" v-if="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span>
</div>
<MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
<MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref: any) => setEntryRefs(entry, ref)" />
</div>
</div>
</template>

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

@ -152,8 +152,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
export type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
export type IncrementDirection = "Decrease" | "Increase";
import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
export default defineComponent({
props: {

11
frontend/src/components/widgets/inputs/SwatchPairInput.vue
View file

@ -3,13 +3,13 @@
<div class="secondary swatch">
<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
<ColorPicker @update:color="(color) => secondaryColorChanged(color)" :color="secondaryColor" />
<ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" />
</FloatingMenu>
</div>
<div class="primary swatch">
<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
<ColorPicker @update:color="(color) => primaryColorChanged(color)" :color="primaryColor" />
<ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" />
</FloatingMenu>
</div>
</div>
@ -68,12 +68,17 @@
<script lang="ts">
import { defineComponent } from "vue";
import { RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
import { rgbaToDecimalRgba } from "@/utilities/color";
import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
declare global {
type RGBA_ = RGBA;
}
export default defineComponent({
inject: ["editor"],
components: {

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

@ -9,7 +9,7 @@
</PopoverButton>
<NumberInput
v-if="option.kind === 'NumberInput'"
@update:value="(value) => updateToolOptions(option.optionPath, value)"
@update:value="(value: number) => updateToolOptions(option.optionPath, value)"
:title="option.tooltip"
:value="getToolOption(option.optionPath)"
v-bind="option.props"

16
frontend/src/utilities/widgets.ts
View file

@ -1,3 +1,5 @@
import { IconName, IconSize } from "@/utilities/icons";
export type Widgets = TextButtonWidget | IconButtonWidget | SeparatorWidget | PopoverButtonWidget | NumberInputWidget;
export type WidgetRow = Widgets[];
export type WidgetLayout = WidgetRow[];
@ -31,8 +33,8 @@ export interface IconButtonWidget {
export interface IconButtonProps {
// `action` is used via `IconButtonWidget.callback`
icon: string;
size: number;
icon: IconName;
size: IconSize;
gapAfter?: boolean;
}
@ -48,9 +50,12 @@ export interface PopoverButtonWidget {
export interface PopoverButtonProps {
// `action` is used via `PopoverButtonWidget.callback`
icon?: string;
icon?: PopoverButtonIcon;
}
type Extends<T, U extends T> = U;
export type PopoverButtonIcon = Extends<IconName, "DropdownArrow" | "VerticalEllipsis">;
// Number Input
export interface NumberInputWidget {
kind: "NumberInput";
@ -63,7 +68,7 @@ export interface NumberInputProps {
value: number;
min?: number;
max?: number;
incrementBehavior?: boolean;
incrementBehavior?: IncrementBehavior;
incrementFactor?: number;
isInteger?: boolean;
unit?: string;
@ -73,6 +78,9 @@ export interface NumberInputProps {
disabled?: boolean;
}
export type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
export type IncrementDirection = "Decrease" | "Increase";
// Separator
export type SeparatorDirection = "Horizontal" | "Vertical";
export type SeparatorType = "Related" | "Unrelated" | "Section" | "List";