Restore ESLint and Prettier auto-formatting and CI linting (#1457)

* Restore ESLint and Prettier autoformatting

* Fix formatting and lints in web files

* Hacky fix to eslint crash

* Fix remaining lints

* Add lint-fix script

---------

Co-authored-by: 0hypercube <0hypercube@gmail.com>
This commit is contained in:
Keavon Chambers
2023-11-16 13:12:47 -08:00
committed by GitHub
co-authored by 0hypercube
parent 9784d31edb
commit a6ca43bb2d
63 changed files with 5869 additions and 351 deletions
@@ -2,6 +2,7 @@
import { onDestroy, createEventDispatcher, getContext } from "svelte";
import { clamp } from "@graphite/utility-functions/math";
import type { Editor } from "@graphite/wasm-communication/editor";
import { type HSV, type RGB } from "@graphite/wasm-communication/messages";
import { Color } from "@graphite/wasm-communication/messages";
@@ -14,7 +15,6 @@
import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
import Separator from "@graphite/components/widgets/labels/Separator.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import type { Editor } from "@graphite/wasm-communication/editor";
type PresetColors = "none" | "black" | "white" | "red" | "yellow" | "green" | "cyan" | "blue" | "magenta";
@@ -71,7 +71,7 @@
$: hsvChannels = Object.entries(!isNone ? { h: hue * 360, s: saturation * 100, v: value * 100 } : { h: undefined, s: undefined, v: undefined }) as [keyof HSV, number | undefined][];
$: opaqueHueColor = new Color({ h: hue, s: 1, v: 1, a: 1 });
function generateColor(h: number, s: number, v: number, a: number, none: boolean, ..._: any[]) {
function generateColor(h: number, s: number, v: number, a: number, none: boolean) {
if (none) return new Color("none");
return new Color({ h, s, v, a });
}
@@ -432,8 +432,13 @@
.hue-picker {
background-blend-mode: screen;
background: linear-gradient(to top, #ff0000ff 16.666%, #ff000000 33.333%, #ff000000 66.666%, #ff0000ff 83.333%),
linear-gradient(to top, #00ff0000 0%, #00ff00ff 16.666%, #00ff00ff 50%, #00ff0000 66.666%), linear-gradient(to top, #0000ff00 33.333%, #0000ffff 50%, #0000ffff 83.333%, #0000ff00 100%);
background:
// Reds
linear-gradient(to top, #ff0000ff 16.666%, #ff000000 33.333%, #ff000000 66.666%, #ff0000ff 83.333%),
// Greens
linear-gradient(to top, #00ff0000 0%, #00ff00ff 16.666%, #00ff00ff 50%, #00ff0000 66.666%),
// Blues
linear-gradient(to top, #0000ff00 33.333%, #0000ffff 50%, #0000ffff 83.333%, #0000ff00 100%);
--selection-needle-color: var(--hue-color-contrasting);
}
@@ -567,7 +572,17 @@
.text-label {
// Many stacked white shadows helps to increase the opacity and approximate shadow spread which does not exist for text shadows
text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
text-shadow:
0 0 4px white,
0 0 4px white,
0 0 4px white,
0 0 4px white,
0 0 4px white,
0 0 4px white,
0 0 4px white,
0 0 4px white,
0 0 4px white,
0 0 4px white;
}
}
}
@@ -1,8 +1,11 @@
<script lang="ts">
import { getContext, onMount } from "svelte";
import { githubUrl } from "@graphite/io-managers/panic";
import { wipeDocuments } from "@graphite/io-managers/persistence";
import type { DialogState } from "@graphite/state-providers/dialog";
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -10,7 +13,6 @@
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
import type { DialogState } from "@graphite/state-providers/dialog";
const dialog = getContext<DialogState>("dialog");
@@ -87,7 +87,9 @@
left: -8px;
padding: 8px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 8px rgba(0, 0, 0, 0.25);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.5),
0 0 8px rgba(0, 0, 0, 0.25);
}
.canvas-container {
@@ -109,7 +111,9 @@
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.25);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.5),
inset 0 0 8px rgba(0, 0, 0, 0.25);
}
.pixel-outline {
@@ -40,6 +40,7 @@
$: virtualScrollingTotalHeight = entries.length === 0 ? 0 : entries[0].length * virtualScrollingEntryHeight;
$: virtualScrollingStartIndex = Math.floor(virtualScrollingEntriesStart / virtualScrollingEntryHeight) || 0;
$: virtualScrollingEndIndex = entries.length === 0 ? 0 : Math.min(entries[0].length, virtualScrollingStartIndex + 1 + 400 / virtualScrollingEntryHeight);
$: startIndex = virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0;
function watchOpen(open: boolean) {
highlighted = activeEntry;
@@ -55,7 +56,7 @@
virtualScrollingEntriesStart = (e.target as HTMLElement)?.scrollTop || 0;
}
function onEntryClick(menuListEntry: MenuListEntry): void {
function onEntryClick(menuListEntry: MenuListEntry) {
// Call the action if available
if (menuListEntry.action) menuListEntry.action();
@@ -71,7 +72,7 @@
open = false;
}
function onEntryPointerEnter(menuListEntry: MenuListEntry): void {
function onEntryPointerEnter(menuListEntry: MenuListEntry) {
if (!menuListEntry.children?.length) return;
if (menuListEntry.ref) {
@@ -80,7 +81,7 @@
} else dispatch("open", true);
}
function onEntryPointerLeave(menuListEntry: MenuListEntry): void {
function onEntryPointerLeave(menuListEntry: MenuListEntry) {
if (!menuListEntry.children?.length) return;
if (menuListEntry.ref) {
@@ -104,7 +105,7 @@
const flatEntries = entries.flat().filter((entry) => !entry.disabled);
const openChild = flatEntries.findIndex((entry) => entry.children?.length && entry.ref?.open);
const openSubmenu = (highlightedEntry: MenuListEntry): void => {
const openSubmenu = (highlightedEntry: MenuListEntry) => {
if (highlightedEntry.ref && highlightedEntry.children?.length) {
highlightedEntry.ref.open = true;
// The reason we bother taking `highlightdEntry` as an argument is because, when this function is called, it can ensure `highlightedEntry` is not undefined.
@@ -181,7 +182,7 @@
if (interactive && newHighlight?.value !== activeEntry?.value && newHighlight) dispatch("activeEntry", newHighlight);
}
export function scrollViewTo(distanceDown: number): void {
export function scrollViewTo(distanceDown: number) {
scroller?.div()?.scrollTo(0, distanceDown);
}
</script>
@@ -214,7 +215,7 @@
{#if sectionIndex > 0}
<Separator type="List" direction="Vertical" />
{/if}
{#each virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section as entry, entryIndex (entryIndex + (virtualScrollingEntryHeight ? virtualScrollingStartIndex : 0))}
{#each virtualScrollingEntryHeight ? section.slice(virtualScrollingStartIndex, virtualScrollingEndIndex) : section as entry, entryIndex (entryIndex + startIndex)}
<LayoutRow
class="row"
classes={{ open: isEntryOpen(entry), active: entry.label === highlighted?.label, disabled: Boolean(entry.disabled) }}
@@ -359,4 +360,5 @@
}
}
}
// paddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpadding
</style>