fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-26 10:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix Eyedropper tool and make Svelte's bind:this more robust

Browse Source
This commit is contained in:
Keavon Chambers
2023-03-11 12:32:01 -08:00
parent 919779130f
commit 29af355f20
23 changed files with 177 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/floating-menus/DialogModal.svelte
+2 -2
View File
@@ -11,7 +11,7 @@
const dialog = getContext<DialogState>("dialog");
let self: FloatingMenu;
let self: FloatingMenu | undefined;
export function dismiss() {
dialog.dismissDialog();
@@ -19,7 +19,7 @@
onMount(() => {
// Focus the first button in the popup
const emphasizedOrFirstButton = (self.div().querySelector("[data-emphasized]") || self.div().querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
const emphasizedOrFirstButton = (self?.div()?.querySelector("[data-emphasized]") || self?.div()?.querySelector("[data-text-button]") || undefined) as HTMLButtonElement | undefined;
emphasizedOrFirstButton?.focus();
});
</script>
frontend/src/components/floating-menus/EyedropperPreview.svelte
+7 -12
View File
@@ -1,5 +1,5 @@
<script lang="ts" context="module">
// Should be equal to the width and height of the canvas in the CSS
// Should be equal to the width and height of the zoom preview canvas in the CSS
const ZOOM_WINDOW_DIMENSIONS_EXPANDED = 110;
// Should be equal to the width and height of the `.pixel-outline` div in the CSS, and should be evenly divisible into the number above
const UPSCALE_FACTOR = 10;
@@ -13,8 +13,10 @@
import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
const temporaryCanvas = document.createElement("canvas");
temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
let zoomPreviewCanvas: HTMLCanvasElement;
let zoomPreviewCanvas: HTMLCanvasElement | undefined;
export let imageData: ImageData | undefined = undefined;
export let colorChoice: string;
@@ -23,19 +25,12 @@
export let x: number;
export let y: number;
$: watchImageData(imageData);
function watchImageData(imageData: ImageData | undefined) {
displayImageDataPreview(imageData);
}
$: displayImageDataPreview(imageData);
function displayImageDataPreview(imageData: ImageData | undefined) {
zoomPreviewCanvas.width = ZOOM_WINDOW_DIMENSIONS;
zoomPreviewCanvas.height = ZOOM_WINDOW_DIMENSIONS;
if (!zoomPreviewCanvas) return;
const context = zoomPreviewCanvas.getContext("2d");
temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
const temporaryContext = temporaryCanvas.getContext("2d");
if (!imageData || !context || !temporaryContext) return;
@@ -61,7 +56,7 @@
>
<div class="ring">
<div class="canvas-container">
<canvas bind:this={zoomPreviewCanvas} />
<canvas width={ZOOM_WINDOW_DIMENSIONS} height={ZOOM_WINDOW_DIMENSIONS} bind:this={zoomPreviewCanvas} />
<div class="pixel-outline" />
</div>
</div>
frontend/src/components/floating-menus/MenuList.svelte
+4 -3
View File
@@ -13,8 +13,8 @@
import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.svelte";
let self: FloatingMenu;
let scroller: LayoutCol;
let self: FloatingMenu | undefined;
let scroller: LayoutCol | undefined;
// emits: ["update:open", "update:activeEntry", "naturalWidth"],
const dispatch = createEventDispatcher<{ open: boolean; activeEntry: MenuListEntry }>();
@@ -171,7 +171,7 @@
}
export function scrollViewTo(distanceDown: number): void {
scroller.div().scrollTo(0, distanceDown);
scroller?.div()?.scrollTo(0, distanceDown);
}
</script>
@@ -236,6 +236,7 @@
{/if}
{#if entry.children}
<!-- TODO: Solve the red underline error on the bind:this below -->
<svelte:self on:naturalWidth open={entry.ref?.open || false} direction="TopRight" entries={entry.children} {minWidth} {drawIcon} {scrollableY} bind:this={entry.ref} />
{/if}
</LayoutRow>